AngularJs Understanding the Controller Component

在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(https://www.jb51.net/article/91749.htm)的实例。当我们或者angular通过scope.$new API($rootScope.Scope#$new)创建新的child scope时,有一个选项作为方法的参数传入controller(这里没看明白,只知道controller的第一个参数是一个新创建的scope,有绑定parent scope)。这将告诉angular需要联合controller和新的scope,并且扩展它的行为。

  controller可以用作:

1.设置scope对象的初始状态。
2.增加行为到scope中。

一、 Setting up the initial state of a scope object(设置scope对象的初始状态)

  通常,当我们创建应用的时候,我们需要为angular scope设置初始化状态。

  angular将一个新的scope对象应用到controller构造函数(估计是作为参数传进去的意思),建立了初始的scope状态。这意味着angular从不创建controller类型实例(即不对controller的构造函数使用new操作符)。构造函数一直都应用于存在的scope对象。

  我们通过创建model属性,建立了scope的初始状态。例如:

                function GreetingCtrl ($scope) {$scope.greeting = “Hola!”;}

  “GreetingCtrl”这个controller创建了一个叫“greeting”的,可以被应用到模版中的model。

二、 Adding Behavior to a Scope Object(在scope object中增加行为)

  在angular scope对象上的行为,是以scope方法属性的形式,供模版、视图使用。这行为(behavior)可以修改应用的model。

  正如指引的model章节(https://www.jb51.net/article/91777.htm)讨论的那样,任意对象(或者原始的类型)赋值到scope中,成为了model属性。任何附加到scope中的function,对于模版视图来说都是可用的,可以通过angular expression调用,也可以通过ng event handler directive调用(如ngClick)。

三、 Using Controllers Correctly

  一般而言,controller不应该尝试做太多的事情。它应该仅仅包含单个视图所需要的业务逻辑(还有点没转过弯了,一直认为Controller就是个做转发的……)。

  保持Controller的简单性,常见办法是抽出那些不属于controller的工作到service中,在controller通过依赖注入来使用这些service。这些东西会在向导的Dependency Injection Services章节中讨论。

  不要在Controller中做以下的事情:

任何类型的DOM操作 - controller应该仅仅包含业务逻辑。DOM操作,即应用的表现逻辑,它的测试难度是众所周知的。将任何表现逻辑放到controller中,大大地影响了应用逻辑的可测试性。angular为了自动操作(更新)DOM,提供的数据绑定()。如果我们希望执行我们自定义的DOM操作,可以把表现逻辑抽取到directive(https://www.jb51.net/article/91739.htm)中。

Input formatting(输入格式化) - 使用angular form controls (https://www.jb51.net/article/91744.htm)代替。

Output filtering (输出格式化过滤) - 使用angular filters 代替。

执行无状态或有状态的、controller共享的代码 - 使用angular services 代替。

实例化或者管理其他组件的生命周期(例如创建一个服务实例)。 

四、 Associating Controllers with Angular Scope Objects

  我们可以显式地通过scope.$new关联controller和scope对象,或者隐式地通过ngController directive(:ngController)或者$route service($route)。

  1. Controller 构造函数和方法的 Example

  为了说明controller组件是如何在angular中工作的,让我们使用以下组件创建一个小应用:

一个有两个按钮和一个简单消息的template。

一个由名为”spice”的字符串属性组成的model。

一个有两个设置spice属性的方法的controller。

  在我们的模版里面的消息,包含一个到spice model的绑定,默认设置为”very”。根据被单击按钮,将spice model的值设置为”chili”或者” jalapeño”,消息会被数据绑定自动更新。

<!DOCTYPE html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>spicy-controller</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body> <div ng-controller="SpicyCtrl"> <button ng-click="chiliSpicy()">Chili</button> <button ng-click="jalapenoSpicy('jalapeño')">Jalapeño</button> <p>The food is {{spice}} spicy!</p> </div> <script src="https://www.jb51.net/angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function SpicyCtrl($scope) { $scope.spice = "very"; $scope.chiliSpicy = function() { $scope.spice = "chili"; }; $scope.jalapenoSpicy = function(val) { this.spice = val; }; } </script> </body> </html>

  在上面例子中需要注意的东东:

ngController directive被用作为我们的模版(隐式)创建scope,那个scope会称为SpicyCtrl的参数。

SpicyCtrl只是一个普通的javascript function。作为一个(随意)的命名规则,名称以大写字母开头,并以”Ctrl”或者”Controller”结尾。

对属性赋值可以创建或者更新$scope的model。

controller方法可以通过直接分配到$scope实现创建。(chiliSpicy方法)

controller的两个方法在template中都是可用的(在ng-controller属性所在的元素以及其子元素中都有效)。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfzpx.html