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

5星 · 超过95%的资源需积分: 19 96 浏览量更新于2024-07-24 收藏 2.61MB PDF 举报

"AngularJS开发指南，官方翻译文档，讲解AngularJS框架的核心特性和使用方法，包括数据绑定、依赖注入、指令等，旨在帮助开发者构建动态Web应用。" AngularJS是一个强大的JavaScript框架，专为构建动态Web应用程序而设计。它由Google维护，并在Web开发社区中广受欢迎。该框架的核心理念是简化前端开发，通过增强HTML的模板功能，让开发者能够更加高效地构建组件，减少繁琐的DOM操作。 1. 数据绑定：AngularJS的一个关键特性是双向数据绑定，它允许模型(model)和视图(view)之间的自动同步。这意味着当模型的数据改变时，视图会自动更新，反之亦然。这种绑定通过使用双大括号{{ }}来实现，使得数据展示和更新变得简单。 2. 依赖注入：AngularJS的依赖注入(DI)系统负责管理应用中的对象和服务，自动处理对象的创建和依赖关系。这减少了代码间的耦合，使得测试和维护更为容易。开发者只需在需要的地方声明依赖，AngularJS会自动提供。 3. 指令：AngularJS通过自定义的HTML标记或属性（称为指令）扩展了HTML的功能。例如，`ng-repeat`用于迭代数组并重复渲染DOM元素，`ng-if`用于条件性地显示或隐藏内容。这些指令使得HTML更具表现力，可以更好地描述应用的逻辑。 4. 表单处理与验证：AngularJS提供了内置的表单和验证机制。可以轻松地将表单元素与模型绑定，并进行客户端验证，如必填字段检查、电子邮件格式验证等。 5. 可重用组件：AngularJS鼓励组件化开发，通过模块化和指令系统，开发者可以创建可复用的UI组件，提升代码的可维护性和可扩展性。 6. 端对端解决方案：AngularJS不仅仅是一个UI框架，它还提供了路由、服务、过滤器等全面的功能，可以覆盖从数据获取到用户交互的整个应用流程。虽然它倾向于一种特定的开发模式，但这并不妨碍开发者根据需求进行定制和扩展。 7. 测试友好：AngularJS的设计考虑到了测试，提供了模拟服务和注入器的工具，使得单元测试和端到端测试变得更加方便。 8. 与服务器端技术的兼容性：由于AngularJS是在浏览器端运行的JavaScript，它能与任何后端技术无缝集成，如Node.js、PHP、Java等。 AngularJS提供了一个完整的框架，用于构建功能丰富的、响应式的Web应用。其设计理念和强大的特性使得开发者能够更加专注于应用逻辑，而不是基础架构的实现。然而，尽管AngularJS有诸多优点，也需要注意其学习曲线较陡峭，特别是对于不熟悉MVC架构或JavaScript的开发者来说。

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

tangyaling0422

粉丝: 0
资源: 31

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

angularjs developer guide

Angular-AngularJS-StyleGuide.zip

angularjs-guide:AngularJS Guide 中文版

angularjs 学习网站

qt creator 自定义guide

matlab的guide在哪

MATLAB自带的GUIDE工具找不到

利用guide图像滤波

servo guide10.5怎么安装

如何在MATLAB中找到GUIDE工具

最新资源