大佬教程收集整理的这篇文章主要介绍了AngularJs Understanding the Controller Component,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope()的实例。当我们或者angular通过scope.$new API(http://docs.angularjs.org/api/ng.$rootScope.Scope#$new)创建新的child scope时,有一个选项作为方法的参数传入controller(这里没看明白,只知道controller的第一个参数是一个新创建的scope,有绑定parent scope)。这将告诉angular需要联合controller和新的scope,并且扩展它的行为。
controller可以用作:
1.设置scope对象的初始状态。 2.增加行为到scope中。
通常,当我们创建应用的时候,我们需要为angular scope设置初始化状态。
angular将一个新的scope对象应用到controller构造函数(估计是作为参数传进去的意思),建立了初始的scope状态。这意味着angular从不创建controller类型实例(即不对controller的构造函数使用new操作符)。构造函数一直都应用于存在的scope对象。
我们通过创建model属性,建立了scope的初始状态。例如:
“GreetingCtrl”这个controller创建了一个叫“greeting”的,可以被应用到模版中的model。二、 Adding Behavior to a Scope Object(在scope object中增加行为)
在angular scope对象上的行为,是以scope方法属性的形式,供模版、视图使用。这行为(behavior)可以修改应用的model。
一般而言,controller不应该尝试做太多的事情。它应该仅仅包含单个视图所需要的业务逻辑(还有点没转过弯了,一直认为Controller就是个做转发的……)。
保持Controller的简单性,常见办法是抽出那些不属于controller的工作到service中,在controller通过依赖注入来使用这些service。这些东西会在向导的Dependency Injection Services章节中讨论。
不要在Controller中做以下的事情:
我们可以显式地通过scope.$new关联controller和scope对象,或者隐式地通过ngController directive(http://docs.angularjs.org/api/ng.directive:ngController)或者$route service(http://docs.angularjs.org/api/ng.$route)。
1. Controller 构造函数和方法的 Example
为了说明controller组件是如何在angular中工作的,让我们使用以下组件创建一个小应用:
在我们的模版里面的消息,包含一个到spice model的绑定,默认设置为”very”。根据被单击按钮,将spice model的值设置为”chili”或者” jalapeño”,消息会被数据绑定自动更新。
<script src="../angular-1.0.1.js" type="text/javascript">
<script type="text/javascript">
function SpicyCtrl($scope) {
$scope.spice = "very";
$scope.chiliSpicy = function() {
$scope.spice = "chili";
};
$scope.jalapenoSpicy = function(val) {
this.spice = val;
};
}
在上面例子中需要注意的东东:
controller方法可以带参数的,正如下面例子所示:
<script src="../angular-1.0.1.js" type="text/javascript">
<script type="text/javascript">
function SpicyCtrl($scope) {
$scope.spice = "very";
$scope.spicy = function(spice) {
$scope.spice = spice;
};
}
注意那个SpicyCtrl controller现在只定义了一个有一个参数”spice”、叫”spicy”的方法。template可以引用controller方法并为它传递常量字符串或model值。
Controller继承在angular是基于scope继承的。让我们看看下面的例子:
<script src="../angular-1.0.1.js" type="text/javascript">
<script type="text/javascript">
function MainCtrl($scope) {
$scope.timeOfDay = 'Main时间';
$scope.name = 'Main名称';
}
function ChildCtrl($scope) {
$scope.name = 'Child名称';
}
function BabyCtrl($scope) {
$scope.timeOfDay = 'Baby时间';
$scope.name = 'Baby名称';
}
注意我们如何嵌套3个ngController directive到模版中的。为了我们的视图,这模版结构将会导致4个scope被创建:
继承的工作,在controller和model中是一样的。所以我们前一个例子中,所有model可以通过controller被重写。
注意:在两个Controller之间标准原型继承不是如我们所想地那样工作的,因为正如我们之前提到的,controller不是通过angular直接初始化的,但相反地,apply了那个scope对象。(controllers are not instantiated directly by angular,but rather are applied to the scope object,这里跟之前一样,我还是没理解。)
虽然有很多方法去测试controller,最好的公约之一,如下面所示,需要注入$rootScope和$controller。(测试需要配合jasmine.js)
$scope.spice = "habanero";
}
describe("MyController function",function () {
describe("MyController",function () {
var scope;
beforeEach(inject(function ($rootScope,$controller) {
scope = $rootScope.$new();
var ctrl = $controller(MyController,{$scope:scope});
}));
it('should create "cpices" 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");
});
});
});
(function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var trivialReporter = new jasmine.TrivialReporter();
jasmineEnv.addReporter(trivialReporter);
jasmineEnv.specFilter = function (spec) {
return trivialReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function () {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
如果我们需要测试嵌套的controller,我们需要在test中创建与DOM里面相同的scope继承关系。
function ChildCtrl($scope) {
$scope.name = 'Child名称';
}
function BabyCtrl($scope) {
$scope.timeOfDay = 'Baby时间';
$scope.name = 'Baby名称';
}
describe("MyController",function () {
var mainScope,childScope,babyScope;
beforeEach(inject(function ($rootScope,$controller) {
mainScope = $rootScope.$new();
var mainCtrl = $controller(MainCtrl,{$scope:mainScope});
childScope = mainScope.$new();
var childCtrl = $controller(ChildCtrl,{$scope:childScope});
babyScope = childScope.$new();
var babyCtrl = $controller(BabyCtrl,{$scope:babyScope});
}));
it('should have over and selected',function () {
expect(mainScope.timeOfDay).toBe("Main时间");
expect(mainScope.name).toBe("Main名称");
expect(childScope.timeOfDay).toBe("Main时间");
expect(childScope.name).toBe("Child名称");
expect(babyScope.timeOfDay).toBe("Baby时间");
expect(babyScope.name).toBe("Baby名称");
});
});
(function () {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var trivialReporter = new jasmine.TrivialReporter();
jasmineEnv.addReporter(trivialReporter);
jasmineEnv.specFilter = function (spec) {
return trivialReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function () {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
以上就是关于 AngularJs Understanding the Controller Component的资料整理,后续继续补充相关资料,谢谢大家的支持!
以上是大佬教程为你收集整理的AngularJs Understanding the Controller Component全部内容,希望文章能够帮你解决AngularJs Understanding the Controller Component所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。