Angular JS - 4 - Angular JS 作用域与控制器对象

1. 控制器对象使用

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body ng-app="">
 8 
 9 <div ng-controller="myController">
10   <input type="text" ng-model="firstName"/>
11   <input type="text" ng-model="lastName"/>
12   <p>姓名1：{{firstName + "-" + lastName }}</p>
13   <p>姓名2：{{getFullName()}}</p> <!--getFullName,打印的是函数体！！！ -->
14 </div>
15 <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
16 <script type="text/javascript">
17   //函数自调用，this是window  对象调用函数，this是对象，new一个对象调用函数，this是这个new出来的实例
18   function myController($scope) { //构造函数：new的函数，声明形参$scope 作用域对象
19 
20     console.log($scope);//查看$scope 这个对象有没有被注入进来
21     console.log(this instanceof myController);//如果是true，说明this是一个myController的实例，被new 过的
22     $scope.firstName = 'kb',
23       $scope.lastName = 'bryant',
24       //添加属性，这个属性是一个函数
25       $scope.getFullName = function () {
26         var obj = $scope;
27         return obj.firstName + " " + this.lastName;
28         // return firstName + " " + lastName; 则先在本函数中找有没有firstName, 没找到，再去上一层找有没有定义firstName属性，没有，则报错
29       }
30   }
31 </script>
32 </body>
33 </html>

上面通过 ng-controller 指定了一个angular 控制器的构造函数，构造函数中，定义了2个属性和一个方法，在页面显示上，通过表达式和方法调用来显示输出。

可以看到，这里的属性是在002这个对象下面，而不再是根作用域对象的属性。同时，改变第一个input标签，第二个input标签和它对应的显示部分都不受影响。

作用域对象:
  * 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
  * 它的属性和方法与页面中的指令或表达式是关联的
控制器对象:
  * 用来控制AngularJS应用数据的 实例对象(关键是实例)
  * ng-controller : 这个指令指定控制器的构造函数,当ng-controller指向一个构造函数时，Angular会自动new此函数创建控制器对象
  * 同时Angular还有创建一个新的作用域对象$scope, 它是根作用域对象$rootScope的子对象（子对象可以继承父对象的属性和方法）
  * 在控制器函数中声明$scope形参, Angular会自动将$scope传入；ng-controller最终的目的是生成一个$scope 作用域对象，最终操作的也是这个对象

2. 继承

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 <body ng-app="" ng-init="age='12'">
 8 
 9 <div ng-controller="myController">
10   <input type="text" ng-model="firstName"/>
11   <input type="text" ng-model="lastName"/>
12   <p>姓名1：{{firstName + "-" + lastName}}</p>
13   <p>姓名2：{{getFullName()}}</p> <!--getFullName,打印的是函数体！！！ -->
14   <p>使用根作用域对象中定义的属性：{{age}}</p>
15 </div>
16 <script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
17 <script type="text/javascript">
18   //函数自调用，this是window  对象调用函数，this是对象，new一个对象调用函数，this是这个new出来的实例
19   function myController($scope) { //构造函数：new的函数，声明形参$scope 作用域对象
20 
21     console.log($scope);//查看$scope 这个对象有没有被注入进来
22     console.log(this instanceof myController);//如果是true，说明this是一个myController的实例，被new 过的
23     $scope.firstName = 'kb',
24       $scope.lastName = 'bryant',
25       //添加属性，这个属性是一个函数
26       $scope.getFullName = function () {
27         var obj = $scope;
28         return obj.firstName + " " + this.lastName;
29         // return firstName + " " + lastName; 则先在本函数中找有没有firstName, 没找到，再去上一层找有没有定义firstName属性，没有，则报错
30       }
31   }
32 </script>
33 </body>
34 </html>

在body中初始化了一个age属性，在div中去是使用了。div中定义的控制器对象是没有定义age属性的，它的管辖范围也仅仅是div 盒子内，运行结果如下，可以看到age属性是一个根作用域对象的属性，而自定义的作用域对象中却可以直接拿来使用，这是因为，作用域对象是根作用域对象的子对象，具有继承关系。

3.依赖注入

* 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
* 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入。
* angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
  ！！！形参必须是特定的名称, 否则Angular无法注入抛异常

* 回调函数的event的就是依赖对象
* 回调函数有形参就是依赖注入

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6 </head>
 7 
 8 <body >
 9 <button id="btn">单击一下</button>
10 <script type="text/javascript">
11     document.getElementById('btn').onclick = function(event) {//这里这个形参就是依赖注入，
12         alert(event.clientX);//要显示坐标的值，依赖于event这个对象，没有它不行
13     };
14 </script>
15 </body>
16 </html>

其实之前的自定义控制器对象的过程中，function里面的形参 $scope就是依赖对象，它以形参的方式被注入到函数中，后续的操作都是基于这个对象去操作。这就是angular的依赖注入

Angular JS - 4 - Angular JS 作用域与控制器对象

猜你喜欢