AngularJS入门教程：打造动态Web应用

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

"AngularJS开发指南_angular 中文社区" AngularJS是一个由Google维护的JavaScript框架，主要用于构建动态Web应用程序。该框架的核心理念是通过扩展HTML的语法，使其更适合描述应用程序的组件，从而简化开发过程。AngularJS引入了数据绑定和依赖注入的概念，这两种机制大大减少了开发者手动操作DOM（文档对象模型）的需求，提高了开发效率。数据绑定是AngularJS的一个关键特性，它实现了视图和模型之间的自动同步。这意味着当模型数据发生变化时，视图会自动更新，反之亦然。这种双向数据绑定简化了代码，避免了手动同步数据的复杂性。依赖注入是另一个核心功能，它允许模块化和松耦合的代码编写。AngularJS自动管理对象之间的依赖关系，开发者无需手动创建和注入对象，而是通过声明依赖即可。这样可以轻松地替换或扩展组件，增强了代码的可测试性和可维护性。 AngularJS通过指令（Directives）扩展了HTML的功能，使得开发者可以定义新的元素和属性，赋予HTML以动态行为。例如，使用双大括号{{}}实现数据绑定，使用ng-repeat进行循环遍历，ng-if或ng-show/hide控制DOM元素的显示与隐藏，以及ng-form和ng-model用于表单验证和数据绑定。此外，AngularJS还提供了服务（Services）来封装功能，如$http服务用于Ajax请求，$resource服务用于与RESTful API交互，$scope服务作为视图和控制器之间通信的桥梁。这些服务使得代码更加模块化，易于复用和测试。 AngularJS致力于提供端到端的解决方案，覆盖了从客户端渲染、数据管理、路由、状态管理到测试的全过程。虽然它的设计理念倾向于引导开发者按照特定的方式构建应用，但同时也保持了一定的灵活性，允许开发者根据需求进行调整和扩展。 AngularJS是一个强大的前端开发框架，特别适合构建复杂的单页应用程序（SPA）。其丰富的特性和工具集，以及对MVVM（Model-View-ViewModel）模式的支持，使得开发者能够更高效地构建可维护、可测试的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页未读，继续阅读

sinestandly

粉丝: 3
资源: 8

AngularJS入门教程：打造动态Web应用

angularJS中文API

最新angularjs 1.3.0中文API,中文教程

angular-forum:使用Angular构建的论坛应用程序

AngularJS开发指南.pdf

AngularJS快速开发指南：使用angular-seed项目种子

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

angular-phonecat项目：AngularJS实战指南

gsg-angularjs:AngularJS入门指南

AngularJs权威指南（高清版）

AngularJS-StyleGuide-IonicApp:Ionic 应用程序中的 AngularJS 风格指南

最新资源