About AngularJS && ionic

《AngularJS权威教程》

1、AngularJS是MVC（模型-视图-控制器）架构，模型一般包含应用数据和与数据交互的方法，视图将数据呈献给用户，而控制器则是二者之间的桥梁，因此驶入不需要知道如何保存对象，数据模型不需要同视图进行交互；

2、AngularJS会虚幻调用$digest()循环来进行脏检查，以检查数据模型的变化；

3、数据模型对象是指$scope对象，$scope对象是一个简单的javascript对象，其属性是可以被视图访问，也可以通控制器进行交互。

4、scope即为作用域，作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新$scope，也可以依赖$scope在其发生变化时立刻重新渲染视图。

 

   AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。 $rootScope是所有$scope对象的最上层。$rootScope是AngularJS中最接近全局作用域的对象。

 

 

   $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性，ng-controller指令可以为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。

 

 

   ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素；

   $scope的生命周期包括：

 1）创建：在创建控制器或指令时，AngularJS会用$injector创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去；

 2）链接：当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中；

 3）更新：事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数；

 4）当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己；

5、控制器

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能；

 

控制器嵌套：默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。

 

 

 

6、手动解析表达式：$parse这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。将$parse服务注入到控制器中，然后调用它就可以实现手动解析表达式

       <input ng-model="expr" type="text" placeholder="Enter an expression" />

 

        $scope.user = {name: "Name",
                       age:12
                      };
   $scope.$watch('expr', function(newVal, oldVal, scope){
var parseFun = $parse(newVal);
$scope.parsedValue = parseFun(scope);
});

当input的输入为user.name时，parseFun则成为一个取出user对象的name属性的函数，parseFun(scope)中scope为作用域的引用，则可以引用当前scope的user对象。

 

$watch的原型为$watch(watchExpression, listener, objectEquality);，listener包含3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

 

 

7、 过滤器：在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器；

  filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回；

  自定义过滤器：

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {};
});

 

9、ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素；

 ng-init指令用来在指令被调用时设置内部作用域的初始状态；

 {{ }}是ng-bind的简略形式，实现在内部$scope和视图之间创建绑定；

 

 ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来；

 

10、 

内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域
 

directive指令定义的属性scope用于作用域的控制：

scope:true 时创建了一个新的作用域，并且是继承父作用域的；

scope:false 时不创建新作用域，仍使用父作用域；

 

scope:{}时创建一个新的与父作用域隔离的作用域；再使用绑定策略就可以与外界交互了；

20、Angular事件系统并不与浏览器的事件系统相通，这意味着，我们只能在作用域上监听Angular事件而不是DOM事件。