1 / 11
文档名称:

AngularJS开发指南17:Controller组件.doc

格式:doc   大小:15KB   页数:11页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

AngularJS开发指南17:Controller组件.doc

上传人:好用的文档 12/4/2021 文件大小:15 KB

下载得到文件列表

AngularJS开发指南17:Controller组件.doc

相关文档

文档介绍

文档介绍:AngularJS开发指南17:Controller组件
在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过scope.$new俩创建一个新的子作用域对象时,有一个选项能让你将它当做参数传递给控制器。这能使AngularjS将控制器和这个作用域联系起来,增强作用域的行为。
控制器用于:
设置好作用域对象的初始状态。
给作用域对象增加行为。
给作用于对象设置初始状态
一般来说,当你创建应用时,你需要对它的作用域设置初始状态。
AngularJS将对作用域对象调用控制器的构造函数(从某种意义上来说就像使用的Javascript的apply方法),以此来设置作用域的初始状态。这意味着AngularJS不会创建控制器类型的实例(不会使用new方法来调用控制器构造函数)。控制器总是对某个已存在的作用域对象调用。formatDate
你可以通过创建一个模型属性来设置初始作用域的初始状态。 比如:
function GreetingCtrl($scope) { $ = 'Hola!'; }GreetingCtrl控制器创建了一个模板中可以调用的叫greeting的模型。
给作用域对象增加行为
AngularJS作用域对象的行为是由作用域的方法来表示的。这些方法是可以在模板或者说视图中调用的。这些方法和应用模型交互,并且能改变模型。
如我们在模型那一章所说的,任何对象(或者原生的类型)被赋给作用域后就会变成模型。任何赋给作用域的方法,都能在模板或者说视图中被调用,并且能通过表达式或者ng事件指令调用。(比如,ngClick)
正确地使用控制器
总的来说,一个控制器不应该做太多工作。它应该只包含单个视图的业务逻辑。
保持控制器职责单一的最常见做法是将那些不属于控制器的工作抽离到服务中,然后通过依赖注入在控制器中使用这些服务。这在依赖注入服务的章节中会详细讨论。
不要用控制器干下面的事情:
控制器应该只关心业务逻辑。DOM操作(表现层逻辑)通常会把测试弄得很难。将任何表现层逻辑放到控制器中都会显著地增加对业务逻辑的测试难度。。如果你需要手动操作DOM,将表现层的逻辑抽离到指令中。
对输入格式化 — 你应该用AngularJS的表单控制来实现格式化。.
对输出格式化 — 该用AngularJS的过滤器实现。.
在控制器中运行无状态或者有状态但在控制器中共享的代码 — 该用服务来实现.
实例化组件或者控制其它组件的生命周期(比如创建一个服务的实例).
将控制器和AngularJS的作用域对象联系起来
你可以显示地用scope.$new来将控制器和作用域对象显示地联系起来,或者隐式地通过ngController指令或者$route服务来联系。
控制器构造函数和方法的例子
为了阐述AngularJS的控制器组件的运行原理,让我们来创建一个拥有下面这些组件的小应用:
一个有两个按钮和一条消息的模板
一个叫spice的字符串模型。
一个拥有两个方法的控制器。方法是用来设置spice的值得。
模板中的消息包含了一个对spice模型的绑定,它初始的字符串是“very”。这个spice模型会被设置成 chili 或者 jalapeno,这取决于哪个按钮会被点击。消息会通过data-binding自动更新。
一个 spice 控制器例子
Chili
Jalape?o
The food is {{spice}} spicy!
function SpicyCtrl($scope) {
$ = 'very';
$ = function() {
$ = 'chili';
}
$ = function() {
$ = 'jalape?o';
}
}例子中有下面这些需要注意:
ngController指令是用来(隐式地)为模板创建作用域的。并且使用命令中指定的spicyCtrl控制器来增强这个作用域。
spicyCtrl只是一个纯Javascript函数。使用了驼峰式命名法(可选)命名并以Ctrl或者Controller结尾。
对作用域对象赋予一个新的属性会创建或者更新模型。
控制器方法能够直接通过赋格作用域对象这个方式创建(如例子中