深究AngularJS——AngularJS中的Controller(控制器)

先看个示例

<div ng-app="myApp"   ng-controller="myCtrl">

    <!-- 在该控制器内保存着如下两个Model里的数据
    ng-model 指令用于双向绑定输入域到控制器的属性 --> 
    第一个数字: <input type="text" ng-model="first"><br>
    第二个数字: <input type="text" ng-model="second"><br>
    <br>
    相乘结果: {{first* second}}

</div>

<script>
    //AngularJS 应用程序：在 <div> 内由 ng-app 定义运行。
    var app = angular.module('myApp', []);

    //控制器
    app.controller('myCtrl', function($scope) {//$scope 是一个应用对象，用于调用控制器，并保存Model(模型)的对象
        //给控制器里的model赋值
        $scope.first= 10;
        $scope.second= 20;
    });
</script>

控制器定义

在<div>内由ng-controller 指令定义，操作应用程序的 JavaScript 对象。
其中应用程序是指由ng-app指令定义的对象。

控制器方法

控制器也可以有方法（变量和函数）：

<div ng-app="myApp" ng-controller="myCtrl">

    运行方法: {{methodName()}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.methodName= function() {
            return "输出到页面";
        }
    });
</script>

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。
此时只需要把 <script> 标签中的代码复制到名为 myController.js 的外部文件中，然后引入即可：

<div ng-app="myApp" ng-controller="myCtrl">
    运行方法: {{methodName()}}
</div>

<script src="myController.js"></script>