AngularJS开发入门与核心特性解析

需积分: 19 69 浏览量更新于2024-07-23 收藏 2.61MB PDF 举报

"AngularJS开发指南" AngularJS是一个由Google开发的JavaScript框架，专门用于构建动态Web应用程序。这个框架的核心特点是其强大的数据绑定和依赖注入机制，显著减少了开发者编写大量重复代码的需求。AngularJS的设计理念是扩展HTML的语法，使得HTML可以更好地适应构建复杂应用的需求，而不仅仅局限于静态内容的展示。在AngularJS中，数据绑定允许模型数据与视图直接交互，无需手动同步。这意味着当模型数据发生变化时，视图会自动更新，反之亦然。这种双向数据绑定大大简化了开发过程，提高了效率。此外，AngularJS引入了指令（Directives）的概念，这是一种自定义的HTML标签或属性，用于增强HTML的功能。例如，双大括号{{}}用于显示数据，ng-if和ng-repeat用于条件渲染和循环，以及ng-model用于连接表单元素和模型数据。这些指令使得HTML代码更加语义化，更易于理解和维护。在处理表单和验证方面，AngularJS提供了内置的验证机制，可以直接在HTML表单中进行客户端验证，提高了用户体验，同时减少了服务器端的压力。表单的状态管理和验证逻辑可以通过AngularJS轻松管理。 AngularJS还支持模块化，允许将应用分解为可重用的组件。这些组件可以包含自己的控制器、服务、指令和模板，从而提高代码的可复用性和可维护性。此外，依赖注入（Dependency Injection）系统使得服务和对象之间的依赖关系得以清晰管理，有助于代码的解耦和测试。 AngularJS作为一个端到端的解决方案，涵盖了从数据获取到用户界面呈现的全过程。它鼓励采用MVC（Model-View-Controller）架构模式，使得应用程序结构清晰，易于扩展。虽然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页未读，继续阅读

filefox

粉丝: 1
资源: 4

AngularJS开发入门与核心特性解析

AngularJS开发指南

AngularJS开发指南33：单元测试1

AngularJS开发指南29：将服务注入到控制器中1

使用angularjs开发的好处

使用 html css angularjs 开发的可行性

学习 angularjs

学习 angularJs

angularjs 入门

angularjs入门与进阶pdf

angularjs教学

最新资源