点击查看AngularJS系列目录
转载请注明出处:http://www.cnblogs.com/leosx/
理解控制器
在AngularJS的控制器中,构造函数会有Scope参数。
当一个控制器通过ng-controller指令连接到DOM上,Angular将实例化一个新的控制器对象,然后调用指定的控制器的构造函数。一个新的子作用范围(scope)将被创建,并作为一种可注入的参数传递给控制器的构造函数为$scope
。
如果控制器使用controller as
语法附加到DOM上,那么控制器实例将被分配给新的$scope
范围。并且多了一个和as同名的属性,然后把自己指向这个属性,就方便我们访问了。
使用controller
:
1.初始化
$scope
对象。2.为
$scope
对象附加行为。
错误的使用方式:
1.操作DOM -- 控制器中应该只包含业务逻辑。把业务逻辑放到控制器中,可以显著提高可测试性。Angualr大多数情况下使用数据绑定和封装指令来实现手动DOM操作。而不是直接在
controller
里面操作DOM。2.格式输入 -- 应该使用Angular的表单控件,而不是用原生的表单控件。
3.filter过滤器 -- 应该使用Angular的filter来代替原生的过滤器。
4.跨控制器共享代码或状态 -- 应该使用Angular的服务来代替。
5.管理其他组件的生命周期(例如,创建服务实例)。
$scope
对象的初始化
通常情况下,当你创建一个应用程序,你都会需要初始化angular的$scope
。通常情况下,我们在初始化$scope
的时候,都是为$scope
附加一些属性或者方法。该属性包含视图所使用的模型(由视图中提出的模型)。所有$scope
上的属性,在controller中注册的模板的DOM控件都是可以访问的。
下面的例子演示如何创建一个GreetingController,并且向$scope
作用域范围中增加了一个问候语属性:
var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
我们为我们的引用程序创建了一个AngularJS模块 – myApp .然后我们使用模块的.controller()
方法将控制器的构造函数模块中去。
在这里,我们已经使用了内嵌的注入器明确指定了由Angualr提供的$scope服务的依赖。查看依赖注入的指南,了解更多信息。
我们使用ng-controller
指令将controller绑定到DOM上。greeting
属性会被绑定到我们到模板上去:
<div ng-controller="GreetingController">
{{ greeting }}
</div>
在$scope
上增加一个行为
为了在视图中对事件作出反应或执行计算,我们必须要让$scope
提供响应的功能/行为。通常,我们都是附加一个方法来提供这些功能的。附加之后,这些方法就可以被 模板/视图 调用。
下面的示例向一个控制器的$scope添加一个方法来实现翻倍:
var myApp = angular.module('myApp',[]); myApp.controller('DoubleController', ['$scope', function($scope) {
$scope.double = function(value) { return value * 2; };
}]);
一旦controller被附加到了DOM上,那么这个double
方法就可以在Angularjs的模板中被调用了。
<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>
正如本指南的概念部分所提到的,任何对象(或原函数)分配到的作用域范围$scope成为模块module的一个属性。任何被附加到$scope
上到属性或者方法,对于view或者模板(template)都是可以访问到的。并且可以通过表达式或者ng-事件来调用(例如:ngClick)。
正确的使用controller
一般情况下,一个控制器不应该试图做太多操作。它应只该包含单个视图所需的业务逻辑。
保持控制器干净单一的方法就是把那些和不属于这个控制器的东西放到一个服务中去。然后通过在控制器中依赖注入这个服务,然后去使用服务所提供的方法。将会在本指南的依赖注入和服务节中讨论。
简单例子
文件一:index.html
<div ng-controller="SpicyController">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</div>
文件二:app.js
var myApp = angular.module('spicyApp1', []); myApp.controller('SpicyController', ['$scope', function($scope) {
$scope.spice = 'very'; $scope.chiliSpicy = function() {
$scope.spice = 'chili';
}; $scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
};
}]);
效果图(自己去实现一下看看效果):
多层次的Scope示例
现在我们来初步看一下将controller多层次的绑定在DOM上。当ng-controller指令创建了一个新的$scope
,我们要知道,这个$scope
是继承自上级$scope
而来的(每个module都会有一个$rootScope
,第一级controller
的$scope
将会继承自这个$rootscope
)。既然是继承,那么子集controller
的$scope
就会包含了上级controller
的$scope
所有的属性和方法!关于更多的$scope相关的,请查阅相关章节。
来一个例子看看吧!
第一个文件:index.html
<div class="spicy">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="ChildController">
<p>Good {{timeOfDay}}, {{name}}!</p> <div ng-controller="GrandChildController">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
第二个文件:app.css
div.spicy div {
padding: 10px;
border: solid 2px blue;
}
第三个文件:app.js
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope) {
$scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
$scope.timeOfDay = 'evening';
$scope.name = 'Gingerbread Baby';
}]);
效果图如下:
请注意我们是如何将ng-controller
指令嵌套在我们的模板当中的。上面的例子中,总共产生了四个scope。
1、root scope(每一个module都会有一个$rootscope)
2、
MainController
的scope,其中包含了timeOfDay
和name
属性。3、
ChildController
的scope,它继承了上一级的timeOfDay
属性,并且重写了上一级的name
属性。4、
GrandChildController
的scope,它重写了所有上级的timeOfDay
和name
属性。
继承方法和继承属性是一样的。所以,上面的那些属性也可以换成一个返回字符串的方法,都是可以的。
测试控制器(controller)
虽然有许多方法来测试一个控制器,但是推荐如下图所示,注入$rootScope和$controller的方式来测试:
控制器的定义:
var myApp = angular.module('myApp',[]); myApp.controller('MyController', function($scope) {
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
{"name":"jalapeno", "spiciness":"hot hot hot!"},
{"name":"habanero", "spiciness":"LAVA HOT!!"}];
$scope.spice = "habanero";
});
控制器的测试:
describe('myController function', function() { describe('myController', function() {
var $scope; beforeEach(module('myApp')); beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
$controller('MyController', {$scope: $scope});
})); it('should create "spices" model with 3 spices', function() {
expect($scope.spices.length).toBe(3);
}); it('should set the default value of spice', function() {
expect($scope.spice).toBe('habanero');
});
});
});
如果你需要测试嵌套的控制器,你必须按照DOM结构层次去逐一创建对应的controller:
describe('state', function() {
var mainScope, childScope, grandChildScope; beforeEach(module('myApp')); beforeEach(inject(function($rootScope, $controller) {
mainScope = $rootScope.$new();
$controller('MainController', {$scope: mainScope});
childScope = mainScope.$new();
$controller('ChildController', {$scope: childScope});
grandChildScope = childScope.$new();
$controller('GrandChildController', {$scope: grandChildScope});
})); it('should have over and selected', function() {
expect(mainScope.timeOfDay).toBe('morning');
expect(mainScope.name).toBe('Nikki');
expect(childScope.timeOfDay).toBe('morning');
expect(childScope.name).toBe('Mattie');
expect(grandChildScope.timeOfDay).toBe('evening');
expect(grandChildScope.name).toBe('Gingerbread Baby');
});
});
AngularJS--控制器(Controller)的更多相关文章
-
Angularjs 控制器controller的作用
我们在view中给模型的一个参数name赋值 “hello world” . 这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那 ...
-
AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
-
angularjs控制器之间通信,事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
-
AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
-
Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
-
angularjs探秘<;三>; 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
-
【angularJS】Controller控制器
1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...
-
AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...
-
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...
-
AngularJS 控制器 ng-controller
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...
随机推荐
-
Spring配置bean文件的底层实现方式
首先 bean文件如下: <beans> <bean id="date" class="java.util.Date"></bea ...
-
ThinkPHP中add()方法的返回值
在处理业务数据的时候,有时会遇到需要取得刚insert的数据的主键id值. 以前的做法都是先插入数据后,再通过查询获得id值. 后来在学习ThinkPHP开发的时候才知道,add()方法在写入成功后得 ...
-
java---相亲练习
public class wu{ public static void main(String[] args){ //TODO 自动生成的方法存根 int a = 0,b = 0,c = 0; int ...
-
【gm】
gm : GraphicsMagick for node.js aheckmann/gm imgAreaSelect 图片剪裁 apt-get install imagemagick 执行conver ...
-
XML Schema <;第三篇>;
验证XML文档是否符合议定的XML结构有两种方法,分别是DTD模式与XML Schema.本文主要介绍XML Schema. 一.XML Schema的优点 XML Schema基于XML,没有专门的 ...
-
c+(内存)
内存是程序运行的基础.所有正在运行的代码都保存在内存里面.内存需要处理各种各样的数据,包括键盘的数据.鼠标的数据.usb的数据.串口的数据.摄像头的数据,那么这些数据经过程序的处理之后,就要进行输出到 ...
-
转://Oracle 事务探索与实例(一)
一数据库版本 SYS@LEO1>select* from v$version; BANNER -------------------------------------------------- ...
-
System.ServiceModel.CommunicationException: 接收HTTP 响应时错误发生
具体错误信息例如以下: System.ServiceModel.CommunicationException: 接收对 http://110.110.110.110/TestService/TestS ...
-
RocketMQ的使用
1 在resources目录下创建config目录,新建文件rocketmq.properties文件 # 指定namesrv地址 suning.rocketmq.namesrvAddr=localh ...
-
php的serialize()函数和unserialize()函数
适用情境:serialize()返回字符串,此字符串包含了表示value的字节流,可以存储于任何地方.这有利于存储或传递 PHP 的值,同时不丢失其类型和结构.比较有用的地方就是将数据存入数据库或记录 ...