AngularJS初步
-
AngularJS特点
- 遵循AMD规范
- 不需要操作节点
- 对于jquery,一般是利用现有完整的DOM,然后在这戏Dom的基础上进行二次调教了;而对于AngularJS等框架则是根据数据模型以及其对应用dom模板,而后通过模板类似于搭积木那样组合页面。
- 不适合频繁dom操作的应用。
-
{{}} Angular的表达式
-
借鉴mvc理念;仅仅只是借鉴,区别在于控制C,Angular弱化了控制器
- mvvm
- vm:viewModel,$scope 是一个对象
- 官方解释 mvw
- w:whatever,$scope 是什么都无所谓,都可以
- mvvm
-
<html ng-app>
-
最早是由backbone提出该理念,但封装不够彻底
-
ng-model 双向绑定,只有能在页面下可操作的标签才能双向保定 ##原理
-
$watch
- 监听列表
- 页面上所有绑定到页面上的{{}}、ng-model等都会加入监听列表,根据数据变化,来改变页面显示。
- <pre> scope.age=20; $scope.$watch('age',function(newValue,oldValue){ console.info(‘监听age’); });</pre>
-
$digest
- 循环监听列表,当发现监听值发生变化,调用相应回调函数,进行dom操作
- 需要在anguler上下文环境中才能启动
- 每次循环到有值的改变,会重新循环,所以为了保证效率,尽量不要让数据相互影响。相互影响超过10次angular会报错。
-
$apply
- 把环境改变为angular的上下文环境
- <pre> $scope.$apply(function(){ (angular上下文环境) }); </pre>
mvc
- model(模型) view(视图) controller(控制器)
- model相当于数据,view呈现model里的数据,controller是连接model和iew之间的传输
$scope
- 是一个对象
- 可以嵌套
- 顶层$rootScrope,就近原则查找属性,最终查到$rootScrope,没有不会报错
- function($scope){};依赖注入,被动获取
$index
获取选中节点序号
过滤器
过滤器(filter)正如其名,接受一个输入,通过某种规则处理后,返回处理后的结果。
- currency
- date
- filter
- json
- limitTo
- lowercase
- uppercase
- number
- orderBy
directive
测试指令,在css里面写一个.red;在html中调用ng-class="{red:true}";
- ng-class
- ng-style
- ng-show
- ng-hide ##事件## 给$scope对象添加一个属性,属性为一个函数,在html中ng-click="调用该函数"。 *ng-click
AJAX $http
$http.get("/users/router?username="+$scope.username").success(function(){});
$http.post("/users/router",{name:xiaoming,pwd:123456}).success(function(){});