AngularJS权威教程第5章控制器controller

叁歲伎倆 2022-08-18 13:21 216阅读 0赞

AngularJS权威教程 第5章 控制器controller

控制器在AngularJS中的作用是增强视图。在Hello World的例子中，我们并没有使用普通的控制器，而是使用了一个隐式控制器。

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自

定义行为。

当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的$scope给控制器。可以在这个控制器里初化$scope。

由于AngularJS会负责处理控制器的实例化过程，我们只需编写构造函数即可。

下面的例子展示了控制器初始化：

function FirstController($scope) {
    $scope.message = "hello";
    }

将控制器命名为\[Name\]Controller而不是\[Name\]Ctrl是一个最佳实践。

AngularJS会在创建作用域时调用控制器方法。前面的例子是在全局作用域中创建的这个函数。更合理的方式是创建一个模块，

然后在模块中创建控制器，AngularJS允许我们在视图中像调用普通数据一样调用$scope上的函数。如下所示：

var app = angular.module('app', []);
    app.controller('FirstController', function($scope) {
    $scope.message = "hello";
    });

案例如下

<!doctype html>
    <html ng-app="myApp">
    <head>
      <title>Simple App</title>
      <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    </head>
    <body>
      <div ng-controller="FirstController">
        <h4>The Simplest adding machine ever</h4>
        <button ng-click="add(1)" class="button">Add</button>
        <a href="#" ng-click="subtract(1)" class="button alert">Subtract</a>
        <h4>Current count: {
       { counter }}</h4>
      </div>
    
      <script>
        var app = angular.module('myApp', []);
        app.controller('FirstController', ['$scope', function($scope) {
          $scope.counter = 0;
          $scope.add = function(amount) { $scope.counter += amount; };
          $scope.subtract = function(amount) { $scope.counter -= amount; };
        }]);
      </script>
    
    </body>
    </html>

效果如图

![Center][]

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储

数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

AngularJS允许在$scope上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。

$scope对象用来从数据模型向视图传递信息。同时，它也可以用来设置事件监听器，同应用的其他部分进行交互，以及创建与应

用相关的特定业务逻辑。

AngularJS通过作用域将视图、控制器和指令隔离开来，这样就很容易为功能的具体部分编写测试。

案例如下：

<!doctype html>
    <html ng-app="myApp">
    <head>
      <title>Basic Controller Example</title>
      <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    </head>
    <body>
    
      <div ng-controller="MyController">
        <h1>{
       { person }}</h1>
        and their name:
        <h2>{
       { person.name }}</h2>
      </div>
    
    
      <script>
        var app = angular.module('myApp', []);
        app.controller('MyController', function($scope) {
          $scope.person = {
            name: "Ari Lerner"
          };
        });
      </script>
    
    </body>
    </html>

效果如图：

![Center 1][]

5.1 控制器嵌套（作用域包含作用域）

AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作

用域就是$rootScope。(有一个例外：在指令内部创建的作用域被称作孤立作用域。)

除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域。如果熟悉面向对象编程，对这个

机制应该不会陌生。

默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属

性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法

更新。

案例如下：

<!doctype html>
    <html ng-app="myApp">
    <head>
      <title>Simple App</title>
      <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    </head>
    <body>
    
      <div ng-controller="ParentController">
        <div ng-controller="ChildController">
          <a href="#" ng-click="sayHello()">Say hello</a>
        </div>
        {
       { person }}
      </div>
    
      <script>
        var app = angular.module('myApp', []);
    
        app.controller('ParentController', function($scope) {
          $scope.person = { greeted: false };
        })
    
        app.controller('ChildController', function($scope) {
          $scope.sayHello = function() {
            $scope.person.name = "Ari Lerner";
            $scope.person.greeted = true;
          }
        })
      </script>
    
    </body>
    </html>

效果如图：

![Center 2][]

[Center]: /images/20220731/59e489ab0cf844b0b4de6d5353432265.png
[Center 1]: /images/20220731/6d7e46be0152455bba9e419d07acd8df.png
[Center 2]: /images/20220731/85377bf7fe0a42d282cfd5f3756a8cf2.png