Angularjs四大特性

Angularjs的四大特性

 1. 使用MVC设计模式

 2. 双向数据绑定

 3. 依赖注入

 4. 采用模块化设计

一. 控制器的作用域

1. 每次调用ngController都会创建一个新的Controller对象
2. 每个Controller对象都有唯一的$scope对象，表示当前控制器对象的有效范围/作用域
3. 声明在某个$scope中的模型数据，一般情况下不能被其他的控制器所使用
4. 若想在多个控制器间共享数据、传递数据，可以声明在根作用域--$rootScope--每个Angular应用只有一个唯一的$rootScape对象
5. 控制器的本质用途：用于划分一个大型页面中的不同的DIV块- 每个块中都有自己专用的数据，以及可以跟其他块共享的数据

二. AngularJS四大特性之二-双向数据绑定-重点

1. 方向1
   Model绑定到View，此后不论何时只要Model发生改变，立即会自动同步更新
   实现方法 {{}} ng-bind ngif ngRepeat...几乎所有的显示数据的指令都实现了方向1的绑定

     练习：
   
        1. 创建一个点击计数器，有一个按钮，只要点击一次，立即显示出点击次数
   
        2. 轮播图的前进后退按钮
   

2. 方向2

view绑定到model,把视图中可以修改的HTML元素，即表单控件的值绑定到模型变量上。此后，只要用户修改了表单控件的值后，后台模型变量的值会立即随之改变
实现： 只有ngmodel指令可以，为了监视到Model变量真的被改变了可以使用$scope.$watch()函数对Model数据的值进行监视,

         $scope.$watch('name',function(newValue,oldValue, scope){

           console.log(newValue);

           console.log(oldValue);

        });

• 单行文本输入域，ngModel可以把value属性值绑定到model

• 复选框，ngModely可以把true、false值绑定到Model变量

• 单选框 ngModel可以把当前选中的单选框的value值绑定到Model变量

• 下拉框 ngModel可以把当前选中的option的value值绑定到Model变量

    练习：
  
     1）实现简易版的购物车计算器
  
     2）用户同意本站使用条款则显示“注册”按钮，否则“注册按钮”消失
  
     3）下拉选择用户头像的名称，旁边立即显示用户选择的头部图片
  
     4）表格外勾选“全部选择”，框，则表格内的所有复选框全部选择复选
  

三. ng模块中提供的Service组件

1. $rootScope 用于在所有控制前间共享数据的服务

2. $interval 周期性定时器服务

3. $timeout 一次性定时器服务

四. ng模块提供的directive组件

• ngClick: 为元素绑定单机事件的监听函数-只能是Model函数($scope.函数名=function(){})，不能是全局函数,可以在view中被调用

• ngMouseOver

• ngSrc 为img标签指定src属性，但可以防止404请求错误

• ngShow 若赋值为true，则display：block;否则display:none

• ngHide; 跟ngshow相反