AngularJS学习(三)——控制器Controller探究.docx

AngularJS学习（三）——控制器ControllerController介绍?在angular中，controller由JavaScript的构造函数定义，主要用于增强angular的scope。当controller通过ng-controller directive与DOM关联，angular将用指定的controller构造函数实例化一个新的controller对象，同时一个新的child scope将被创建，然后以参数$scope注入到controller中。如果controller使用了controller as a语法，那么控制器实例将会分配给这个属性a。在第一章有讲到这种情况，可以返回去看下，这里就不再写示例了。使用controller的情况：$scope中对象的初始化给$scope中对象增加一些行为不使用controller的情况：操作DOM，controller应该仅仅包含业务逻辑，把显示的逻辑放到controller中会影响它的可测试性，angular有很多数据绑定和封装了DOM操作的directives，完全没必要去操作DOM。格式化输入，用angular form controls代替过滤输出，用angular filters代替在controller直接共享代码或状态，用angular services代替管理其他组件的生命周期（如创建一个service实例）scope对象初始化?通常情况下，你创建一个angular应用时，你需要先设置scope的初始状态。你需要为scope设置一些属性，包含在view中预先声明的model，所有$scope的属性在controller注册的DOM里都是可用的。下面的例子演示如何创建一个controller，并且初始化scope对象。varmyApp = angular.module(myApp, []);myApp.controller(GreetingController, [$scope, function($scope) {$scope.greeting = Hola!; }]);我们创建了一个angular module : myApp，然后调用module的controller方法，给module增加了一个controller构造函数。再看下controller相对应的DOM，greeting属性做了数据绑定，可以显示在controller中的值。divng-controller=GreetingController {{ greeting }}/div给scope对象增加一些行为?为了响应一些事件或者在view中进行一些计算，我们必须为$scope增加一些行为。我们通过为$scope对象增加方法的方式为他增加行为，这些方法可以被template/view调用。下面的示例演示如何为controller增加方法varmyApp = angular.module(myApp,[]);myApp.controller(DoubleController, [$scope, function($scope) {$scope.double = function(value) { return value * 2; };}]);controller一旦被添加到DOM中，该方法就可以在template中被调用divng-controller=DoubleController Two times inputng-model=num equals {{ double(num) }}/divController示例?为了进一步说明angular controller是如何工作的，我们再来一个程序，包含下面一些组件：一个template，包含2个按钮和一条消息一个model，包含字符串spice一个controller，包含2个位spice赋值的函数在模板中的消息包含一个spice model，默认设置为very，点击按钮时给spice赋值，通过data binding的方式自动更新这条消息。?index.htmldivng-controller=SpicyControllerbuttonng-click=chiliSpicy()Chili/buttonbuttonng-click=jalapenoSpicy()Jalape?o/buttonpThe food is {{spice}} spicy!/p/divapp.jsvarmyApp = angular.module(spicyApp1, []);myApp.controller(SpicyController, [$scope, function($scope) {$scope.spice = very;$s