angularjs入门

当前位置:首页>AngularJS>angularjs入门>MVC5开发前端框架AngularJS快速入门之Controller

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

时间:2015-08-07 16:46来源:网络整理 作者:KKWL 点击:
MVC5开发前端框架AngularJS快速入门之Controller 分类:asp.net 学习MVC5 学习 先看看AngularJS官方对Controller的解释 在Angular中,控制器就像 JavaScript 中的 构造函数 一般,是用来增强Angular作用域

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

分类: asp.net 学习 MVC5 学习

先看看AngularJS官方对Controller的解释

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

 指令被添加到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的扩展。具体实现下面再进一步记录。



    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 上一篇MVC5开发前端框架angularJS快速入门(一)
  • 下一篇MVC5开发前端框架AngularJS快速入门之Service
    ------分隔线----------------------------