AngularJS 控制器

  • 定义和使用

    AngularJS 控制器控制AngularJS应用程序的数据。
    AngularJS 控制器是常规的JavaScript对象。
    AngularJS 应用程序由控制器控制。
    ng-controller 指令定义了应用程序控制器。
    控制器是由标准JavaScript对象构造函数创建的JavaScript对象。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <p>尝试更改名称。</p>
        <div ng-app="myApp" ng-controller="myCtrl">
            First Name: <input type="text" ng-model="firstName"><br>
            Last Name: <input type="text" ng-model="lastName"><br>
            <br>
            Full Name: {{ firstName + " " + lastName }}
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.firstName = "John";
                $scope.lastName = "Doe";
            });
        </script>
    </body>
    </html>
    
    尝试一下
    应用说明:
    AngularJS 应用程序由ng-app="myApp"定义。 该应用程序在 <div> 内部运行。
    ng-controller="myCtrl" 属性是AngularJS指令。 它定义了一个控制器。
    myCtrl函数是JavaScript函数。
    AngularJS 将使用 $scope 对象调用控制器。
    在AngularJS中,$scope 是应用程序对象(应用程序变量和函数的所有者)。
    控制器在范围内创建两个属性(变量)(firstName和lastName)。
    ng-model 指令将输入字段绑定到控制器属性(firstName和lastName)。
  • 控制器方法

    上面的示例演示了具有两个属性的控制器对象:lastName和firstName。
    控制器也可以具有方法(变量作为函数):
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp" ng-controller="personCtrl">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{ fullName() }}
      </div> 
      <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
            $scope.fullName = function() {
               return $scope.firstName + " " + $scope.lastName;
            };
        });
      </script>
    </body>
    </html>
    
    尝试一下
  • 外部文件中的控制器

    在较大的应用程序中,通常将控制器存储在外部文件中。
    只需将<script>标记之间的代码复制到名为personController.js的外部文件中:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="personCtrl">
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{ fullName() }}
        </div> 
        <script src="personController.js"></script>
    </body>
    </html>
    
    尝试一下
    personController.js 内容
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.fullName = function() {
            return $scope.firstName + " " + $scope.lastName;
        };
    });
    
  • 外部文件另一个示例

    对于下一个示例,我们将创建一个新的控制器文件:
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    });
    
    将文件另存为namesController.js:
    然后在应用程序中使用控制器文件:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="namesCtrl">
          <ul>
            <li ng-repeat="x in names">
              {{ x.name + ', ' + x.country }}
            </li>
          </ul>
        </div> 
        <script src="namesController.js"></script>
    </body>
    </html>
    
    尝试一下