AngularJs Understanding the Controller Component

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了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中。

一、 Setting up the initial state of a scope object（设置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。

　　正如指引的model章节（）讨论的那样，任意对象（或者原始的类型）赋值到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中做以下的事情：

  1. 任何类型的DOM操作 - controller应该仅仅包含业务逻辑。DOM操作，即应用的表现逻辑，它的测试难度是众所周知的。将任何表现逻辑放到controller中，大大地影响了应用逻辑的可测试性。angular为了自动操作（更新）DOM，提供的数据绑定（）。如果我们希望执行我们自定义的DOM操作，可以把表现逻辑抽取到directive（）中。
  2. Input formatting（输入格式化） - 使用angular form controls （）代替。
  3. Output filtering （输出格式化过滤） - 使用angular filters 代替。
  4. 执行无状态或有状态的、controller共享的代码 - 使用angular services 代替。
  5. 实例化或者管理其他组件的生命周期（例如创建一个服务实例）。

四、 Associating Controllers with Angular Scope Objects

　　我们可以显式地通过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中工作的，让我们使用以下组件创建一个小应用：

  1. 一个有两个按钮和一个简单消息的template。
  2. 一个由名为”spice”的字符串属性组成的model。
  3. 一个有两个设置spice属性的方法的controller。

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

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> spicy-controller <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

<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继承的。让我们看看下面的例子：

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> controller-inheritance <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <script src="../angular-1.0.1.js" type="text/javascript">
<script src="../angular-scenario-1.0.1.js" type="text/javascript">
<script src="../jasmine.js" type="text/javascript">
<script src="../jasmine-html.js" type="text/javascript">
<script src="../angular-mocks-1.0.1.js" type="text/javascript">
<script type="text/javascript">
function MyController($scope) {
$scope.spices = [
{"name":"pasilla","spiciness":"mild"},{"name":"jalapeno","spiceiness":"hot hot hot!"},{"name":"habanero","spiceness":"LAVA HOT!!"}
];

$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继承关系。

<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> controller-test <Meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <script src="../angular-1.0.1.js" type="text/javascript">
<script src="../angular-scenario-1.0.1.js" type="text/javascript">
<script src="../jasmine.js" type="text/javascript">
<script src="../jasmine-html.js" type="text/javascript">
<script src="../angular-mocks-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名称';
}

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的资料整理，后续继续补充相关资料，谢谢大家的支持！

原文链接：https://www.f2er.com/js/46136.html
Component详解Controller

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作