Angular JS小笔记

与jQuery的区别

1. jQuery：js函数库；封装简化dom操作
2. angular：js结构化框架；主体不再是dom，而是页面中的动态数据

angular的特性和优点

1. 双向数据绑定

2. 声明式依赖注入
   依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
   angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用
   形参必须是特定的名称, 否则Angular无法注入抛异常

3. 解耦应用逻辑、数据模型和视图

4. 完善的页面指令

5. 定制表单验证

6. Ajax封装

常用指令

1. ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建($ rootScope)根作用域对象

2. ng-model : 将当前输入框的值与xxx关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性,联系页面和内存的桥梁

3. {{}} (表达式) : 显示数据,从作用域对象的指定属性名上取

4. ng-init 用来初始化当前作用域
5. ng-controller : 指定控制器构造函数

表达式和语句的区别

1、表达式：通常有一个返回值，可以放在任何需要值的地方，比如函数调用的参数，一个变量名，一个运算，

2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

3、区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。

4、特例：if语句，就不用加封号 可也是完整的语句。

三个重要对象

1. 作用域对象

• 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
• 它的属性和方法与页面中的指令或表达式是关联的

2. 控制器

• 用来控制AngularJS应用数据的实例对象
• ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
• 同时Angular还会创建一个新的域对象$ scope, 它是$ rootScope的子对象
• 在控制器函数中声明$ scope形参, Angular会自动将$ scope传入
  

3. 模块对象
   
   代码优化

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
//创建当前应用的模块对象
  var model = angular.module('myApp',[]);
  model.controller('myCtrl01',function($scope){
  $scope.myName = 'luneo';
  });
    model.controller('myCtrl02',function($scope){
  $scope.myName = 'lucky';
  });
    //代码优化（一）--链式调用
    //模块对象的方法执行完返回的就是模块对象本身
    //$scope写法问题（js代码压缩时会把所有的局部变量压缩成abcd等）
    // 1、形参只能写固定的变量名$scope;
    // 2、一旦文件压缩，将不能使用，会报错。
  angular.module('myApp',[])
    .controller('myCtrl01',function($scope){
  $scope.myName = 'luneo';
  }).controller('myCtrl02',function($scope){
  $scope.myName = 'lucky';
  });
  //代码优化（二）
    angular.module('myApp',[])
    .controller('myCtrl01',['$scope',function(a){
    a.myName = "LuckyLuneo";
    }])
    .controller('myCtrl02',['$scope',function(b){
      b.myName = "LuckyLuneo";
    }])
  </script>

函数是全局搜索的