AngularJS开发指南：打造动态Web应用

需积分: 10 104 浏览量更新于2024-07-17 收藏 2.62MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

AngularJS中文社区

&&

AngularJS英文官网

&&代码许可

TheMITLicense

&&文档许可

CCBY3.0

©2012AngularJS.cn|Poweredby

WordPress

&

bbPress

|[

湘ICP备12011607

]

《AngularJS开发指南04：核心概览》上有1条评论

$injector.invoke(doSomething); // This is how the framework calls your functions

注意，你唯一需要写的就是上例中指出的函数，并把需要的依赖写在函数参数里。当AngularJS

调用这个函数时，它会自动体充好需要的参数。

看看下面的动态时间的例子，注意它是如何在构造器中列举出依赖的。当

ng-controller

实例化

构造器的时候，它自动提供了指明的依赖。没有必要去创建依赖、查找依赖、或者提供一个依赖的引

用给注入器。

index.html:

<!doctype html>

<head>

</head >

<body>

Current time is: {{ time.now }}

</di v>

</body >

</html>

script.js:

angular.module('timeExampleModule', []).

// Declare new object call time,

// which will be available for injection

factory('time', function($timeout) {

var time = {};

(fun ction tick() {

time.now = new Date().toString();

$timeout(tick, 1000);

})();

retu rn time;

});

// Notice that you can simply ask for time

// and it will be provided. No need to look for it.

function ClockC trl($scope, time) {

$scope.time = time;

}

运行效果

AngularJS命名空间

为了防止意外的命名冲突，AngularJS为可能冲突的对象名加以前缀"$"。所以请不要在你自己的

代码里用"$"做前缀，以免和AngularJS代码发生冲突。



中文文档AngularJS中文社区

&&

英文文档AngularJS官网

&&

代码许可TheMIT

License

&&

文档许可CCBY3.0

rainer_H发表在开发指南分类，标签AngularJS、rainer_H、开发指南。将本文加入收藏夹。

defims在2013年1月28日08:59说道：登录以回复

指令的script.js部分有错误，复制了index.html部分。

要发表评论，您必须先登录。

AngularJS开发指南05：指令

发表于2012年10月4日rainer_H

指令

使我们用来扩展浏览器能力的技术之一。在DOM编译期间，和HTML关联着的指令会被检测

到，并且被执行。这使得指令可以为DOM指定行为，或者改变它。

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变

成“

特定领域语言(DSL)

”。

从HTML中调用指令

指令遵循驼峰式命名，如

ngBind

。指令可以通过使用指定符号转化成链式风格的的名称来调

用，特定符号包括

,

。你好可以选择给指令加上前缀，比如“x-”，“data-”来让它符合

html的验证规则。这里有以下可以用的指令名称例子：

ng:bind

,

ng-bind

,

ng_bind

,

x-ng-

bind

,

data-ng-bind

。

指令可以做为元素名，属性名，类名，或者注释。下面是一些等效调用myDir指令的例子：

<my-dir> </my-di r>

指令可以通过很多不同的方式调用，但最后结果都是等效的。下例中对此做了演示。

index.html：

<!doctype html>

<head>

</head >

<body>

Hello <input ng-model='name'> <hr/>

&ltspan ng:bind="name"&gt <span ng:bind="name"></span> <br/>

&ltspan ng_bind="name"&gt <span ng_bind="name"></span> <br/>

&ltspan ng-bind="name"&gt <span ng-bind="name"></span> <br/>

&ltspan data-ng-bind="name"&gt <span data-ng-bind="name"></span> <br/>

&ltspan x-ng-bind="name"&gt <span x-ng-bind="name"></span> <br/>

</di v>

</body >

</html>

script.js：

function Ctrl1($scope) {

$scope.name = 'angular';

}

Endtoendtest：

it('should show off bindings', function() {

expect(element('div[ng-controller="Ctrl1"] span[ng-bind]').text()).toBe('angular');

});

字符串替换式

在编译期间，编译器会用$interpolate服务去检查文本中是否嵌入了表达式。这个表达式会被当

成一个监视器一样注册，并且在作为$digest循环中的一部分，它会自动更新。下面是一个替换式的

例子：

<img src="img/{{username}}.jpg">Hello {{username}}!</img>

编译过程和指令匹配

HTML的编译分为三个阶段：

←

→

资讯文档社区关于

搜索

1. 首先浏览器会用它的标准API将HTML解析成DOM。你需要认清这一点，因为我们的模板必须是可被解

析的HTML。这是AngularJS和那些“以字符串为基础而非以DOM元素为基础的”模板系统的区别之

处。

2. DOM的编译是有

$compile

方法来执行的。这个方法会遍历DOM并找到匹配的指令。一旦找到一个，

它就会被加入一个指令列表中，这个列表是用来记录所有和当前DOM相关的指令的。一旦所有的指令

都被确定了，会按照优先级被排序，并且他们的

compile

方法会被调用。指令的

$compile()

函数能修

改DOM结构，并且要负责生成一个link函数（后面会提到）。$compile方法最后返回一个合并起来的

链接函数，这是链接函数是每一个指令的compile函数返回的链接函数的集合。

3. 通过调用一步所说的链接函数来将模板与作用域链接起来。这会轮流调用每一个指令的链接函数，让每

一个指令都能对DOM注册监听事件，和建立对作用域的的监听。这样最后就形成了作用域的DOM的动

态绑定。任何一个作用域的改变都会在DOM上体现出来。

var$compile=...;//injectedintoyourcode

varscope=...;

var html = '<div ng-bind='exp'></div>';

// Step 1: parse HTML into DOM element

var temp late = angular.element(html);

// Step 2: compile the template

var linkFn = $compile(template);

// Step 3: link the compiled template with the scope.

linkFn(scope);

编译和链接分离的合理性分析

你可能会疑惑为什么编译过程和链接过程要分离。要明白其中的原因，你可以先看下面这个带

有“重复指令”的例子：

Hello {{user}}, you have these actions:

<ul>

</li>

</ul>

简短的说，编译和链接的分离是模型和DOM结构能够动态关联的一种需要。

当上面的例子被编译后，编译器会遍历所有节点来寻找指令。例如{{user}}是一个替换式指

令，

ngRepeat

是另一个指令。但是

ngRepeat

有一个难题。他需要为

user.actions

中的每一

个

action

构造一个li。这以为着它先要保存一个“干净”的li元素来用作克隆，然后等新的action插

入进来时，克隆一个li并插入到ul中。但是仅仅克隆li的话工作还没完。他还需要编译这个li才能把其中

的像是{{action.descriptions}}的替换式替换成相应作用域下的值。我们可以用一个简单地方法来克隆

和插入li元素然后编译它。但是要编译每一个li的话，使用克隆会速度很慢，因为编译的工程需要我们

遍历DOM树，并找到对应的指令并执行它们。如果我们在一个需要循环100次循环体内执行编译的

话，性能问题就会马上凸现出来。

而我们的解决方案就是将编译工程分为两个阶段。编译阶段将指令识别出来并按优先级排序，编

译阶段将作用域中的实例和li进行链接。

ngRepeat

会阻止li子元素的编译。取而代之的是

ngRepeat

指令会单独对li进行编译。这个编译

结束后会生成一个链接函数，这个函数包含了准备li元素上的所有指令，并等待被绑定到相应克隆出来

的li元素上。在执行期，

ngRepeat

之指令会监视表达式，当有新的元素增加到对应的数组之后，它就

会新克隆一个li元素，为它创建一个新作用域，并使用链接函数把它和对应作用域链接上。

总结

编译函数

-编译函数在指令中是很少的，因为大部分指令都只是为了处理相应的DOM元素实例，

而不是改变模板DOM元素。考虑到性能问题，任何指令的实例见能被共享的操作都应该移到编译函数

中。

链接函数

-指令很少不带有链接函数，链接函数可以让指令对相应克隆元素注册事件，还可以将

作用域中的内容复制到DOM中。

如何写指令(短版)

下面这个例子演示一个获取当前时间的指令。

index.html：

<!doctype html>

<head>

</head >

<body>

Date format: <input ng-model="format"> <hr/>

Current time is: <span my-current-time="format"></span>

</di v>

</body >

</html>

script.js：

function Ctrl2($scope) {

$scope.format = 'M/d/yy h:mm:ss a';

}

angular.module('time', [])

// Register the 'myCurrentTime' directive factory method.

// We inject $timeout and dateFilter service since the factory method is DI.

.directive('myCurrentTime', function($timeout, dateFilter) {

// return the directive link function. (compile function not needed)

retu rn func tion(scope, element, attrs) {

va r format, // date format

timeoutId; // timeoutId, so that we can cancel the time updates

// used to update the UI

fu nction updateTime() {

element.text(dateFilter(new Date(), format));

}

// watch the expression, and update the UI on change.

scope.$watch(attrs.myCurrentTime, function(value) {

format = value;

updateTime();

});

// schedule update in one second

fu nction updateLater() {

// save the timeoutId for canceling

timeoutId = $timeout(function() {

updateTime(); // update DOM

updateLater(); // schedule another update

}, 1000);

}

// listen on DOM destroy (removal) event, and cancel the next UI update

// to prevent updating time ofter the DOM element was removed.

element.bind('$destroy', function() {

$timeout.cancel(timeoutId);

});

updateLater(); // kick off the UI update process.

}

});

如何写指令(长版)

下面是写一个完整的指令的例子。

var myModule = angular.module(...);

myModule.directive('directiveName', function factory(injectables) {

var directiveDefinitionObject = {

priority: 0,

temp late: '<div></div>',

templateUrl: 'directive.html',

replace: false,

transclude: false,

restrict: 'A',

scope: false,

compile: function compile(tElement, tAttrs, transclude) {

re turn {

pre: function preLink(scope, iElement, iAttrs, controller) { ... },

post: function postLink(scope, iElement, iAttrs, controller) { ... }

}

link: function postLink(scope, iElement, iAttrs) { ... }

};

return directiveDefinitionObject;

});

大部分情况下你不需要控制这么多细节。这其中的具体内容下面会有完整的解释。这一节里我们

只关注大部分指令相同的地方。

剩余87页未读，继续阅读

没点像

粉丝: 0
资源: 21

AngularJS开发指南：打造动态Web应用

angular学习资料

angularJs资料

angularJS学习资料总结

AngularJS中的模块化开发

利用AngularJS构建Android Hybrid App

angularjs学习路线图

angularjs 学习网站

学习 angularjs

学习 angularJs

我不会angularjs怎么办

angularjs 入门

angularjs教学

angularjs入门与进阶pdf

vue和AngularJS的区别

angularjs教程

使用angularjs开发的好处

angularjs的生命周期

论述AngularJS React Vue.is

qiankun angularjs

angularjs下载

最新资源