MVC5开发前端框架AngularJS快速入门之Controller

先看看AngularJS官方对Controller的解释

在Angular中，控制器就像 JavaScript 中的构造函数一般，是用来增强 Angular作用域(scope) 的。

当一个控制器通过 ng-controller 指令被添加到DOM中时，ng 会调用该控制器的构造函数来生成一个控制器对象，这样，就创建了一个新的子级 作用域(scope)。在这个构造函数中，作用域(scope)会作为$scope参数注入其中，并允许用户代码访问它。

一般情况下，我们使用控制器做两件事：

• 初始化 $scope 对象
• 为 $scope 对象添加行为（方法）

c从这个解释中可以看出，在angularJS中Controller是有作用域的，它的作用域就是它所附加的DOM标签域，其次Controller是为域对象$scope提供对象及方法，从而实现它所在的作用域内的DOM标签的双向绑定或事件处理。看个简单例子：

 <div class="col-md-3" id="login" ng-controller="LoginCtrl">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h5>用户登录</h5>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="control-label">用户名</label>
                            <input type="text" class="form-control" ng-model="UserInfo.UserName" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">密码</label>
                            <input type="password" class="form-control" ng-model="UserInfo.Password" />
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" ng-click="Login()">登录</button>
                        </div>


                    </div>
                </div>

在这个div中定义了一个LoginCtrl的控制器，那么这个控制器的作用域即是id=login的div。在上面的这段html中可以看出LoginCtrl包含了一个名为UserInfo的对象，这个对象包含了UserName，Password属性，同时在LoginCtrl中还包含了 一个Login的方法 。下面看看具体的代码 ：

var loginApp = angular.module("loginApp", []);
loginApp.controller('LoginCtrl', function ($scope, $http) {
    $scope.UserInfo={
        UserName:"admin",
        Password:"admin"
    }
    $scope.Login=function() {
        $http.post('/account/login', $scope.UserInfo).success(function (data,status) {
            console.log('登录成功');
        }).error(function (data,status) {
            console.log('登录失败');
        });
        
    }
});

从上面代码可以看出，controller设计也是基于模块的，每个Controller都必须由一个模块来进行创建。

上面 的 Controller的创建的第一参数是Controller的名称，后面的functions是它个一个构造函数，因为这个congroller需要使用$scope,$http,所以这个构造函数注入了两个angular的服务，如果有自定义的服务需要使用也需要在构造函数中进行注入，还有另外一种创建Controller的方式如下：

loginApp.controller('LoginCtrl',['$scope','$http',function($scope,$http){....}])

这种方式第一个参数还是Controller名称，后面跟这一个数组，在数组中前面是该Controller需要使用的服务依赖，最后是Controller的构造。

在这个Controller中我们定义了一个对象和一个方法，注意这里都是在$scope中进行定义，这就能理解官方说的是$scope的增强了。

最后，关于Controller的扩展和复用，按照官方的说法，每一个Controller对应一个view，如果有多个Controller使用相同内容时需要考虑将相同的部分抽像成服务，然后在Controller中调用这个服务从而实现对Controller的扩展。具体实现下面再进一步记录。