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

5星 · 超过95%的资源 | 下载需积分: 19 | PDF格式 | 2.61MB | 更新于2024-07-24 | 188 浏览量 | 举报

1 收藏

"AngularJS中文教程，AngularJS开发指南01，AngularJS简介" AngularJS是一个JavaScript框架，专门用于构建动态Web应用程序。它于2012年由Misko Hevery创建，目的是解决HTML在构建交互式Web应用时的局限性。AngularJS的核心特性包括数据绑定和依赖注入，这两者极大地简化了开发过程，减少了手动DOM操作和状态管理的复杂性。数据绑定是AngularJS的一个关键概念，它允许视图和模型之间的双向通信。这意味着当模型数据发生变化时，视图会自动更新，反之亦然。这种机制极大地减少了在代码中处理事件和更新UI的工作量。例如，使用双大括号{{}}语法，我们可以直接在HTML中展示和绑定JavaScript对象的属性。依赖注入是另一个核心特性，它有助于管理对象之间的关系和依赖。AngularJS自动处理对象的实例化和依赖关系的解析，使得代码更加模块化和可测试。开发者无需手动创建和管理对象，而是声明所需的服务，AngularJS会自动注入。 AngularJS通过指令（directives）扩展了HTML的功能，使得开发者可以定义新的HTML元素和属性，从而实现特定的逻辑。比如ng-repeat指令用于循环遍历数组并生成DOM元素，ng-if用于有条件地显示或隐藏元素，还有ng-form和ng-model等用于表单验证和数据绑定。此外，AngularJS提供了一套完整的端对端解决方案，覆盖了从数据获取、视图渲染到用户交互的整个流程。它不仅适用于创建CRUD（创建、读取、更新、删除）应用，还支持服务、过滤器、控制器、路由等组件，使得构建复杂的Web应用变得更加便捷。 AngularJS的设计哲学是“声明式编程”，鼓励开发者关注数据和业务逻辑，而不是关注DOM操作和状态管理的细节。尽管AngularJS有一些特定的设计决策，如其“固执”的CRUD应用模式，但它在保持框架一致性的同时，也为开发者提供了足够的灵活性来适应各种项目需求。 AngularJS通过其独特的特性和设计理念，成为了前端开发的重要工具，特别是对于构建动态和交互丰富的Web应用程序。学习AngularJS能够提升开发者构建现代Web应用的效率和能力。

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页未读，继续阅读

ccsdsx

粉丝: 0

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

AngularJS中文教程.rar_angularjs_angularjs教程

angularjs中文教程step7源码

AngularJS入门教程中文版

AngularJS中文教程：构建动态Web应用

AngularJS中文教程：打造响应式Web应用

AngularJS中文教程：前端框架的应用与实践

AngularJS入门教程

AngularJS入门教程02：AngularJS模板

AngularJS入门教程01：静态模板

AngularJS入门教程之过滤器用法示例

最新资源