AngularJs concepts详解及示例代码

大佬教程收集整理的这篇文章主要介绍了AngularJs concepts详解及示例代码，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

原版地址：http://code.angularjs.org/1.0.2/docs/guide/concepts

继续。。

一、总括

本文主要是angular组件(components)的概览，并说明他们如何工作。列表如下：

1. statup - 依旧是Hello world...改为Hello Kitty！
2. runtime - 介绍angular的runtime
3. scope - view与contorller的纽带（神马glue...胶）
4. controller - app的行为(application behavior)
@H_572_11@model - app的数据
5. view - 用户所看到的东东
6. directives - HTML的语法扩展
7. filters - 根据用户的本地格式，格式化数据
8. injector - 加载我们的app（依赖管理之类）
@H_572_11@module - 配置injector
9. $ - angular的命名空间（namespace）

二、启动（Startup）

下面描述angular是如何启动的（参考图表与下面的例子）：

1. 浏览器加载HTML，将HTML标签转换为DOM对象；

2. 浏览器加载angular.js的脚本；

3. Angular等待DOMContentLoaded事件；

4. Angular寻找ng-app这个用于指定应用边界范围的directive；

5. 如果ng-app有指定module（也许是ng-app=”SomeApp”），将被用作配置$injector；

6. $injector用于创建$compile服务（service）以及$rootScope；

7. $compile服务用作“编译”（有点像遍历，然后做一点神秘的事情）DOM，并将其与对应的$rootScope连接。

8. ng-init 这个directive在对应的scope中创建name属性并对其赋予”Kitty”值；

9. 将“{{name}}”的值插入(interpolates)到表达式中，最终显示”Hello Kitty!”。

四、Scope

　　scope的是负责检测model的变化，并作为表达式的执行上下文(execution context)。Scope是在一个类似于DOM结构的层次结构中嵌套的（据之前了解，划分可能跟controller有关）。（详情查看individual directive documentation，看看哪个directive会创建新的scope）

　　下面的例子展示”name”这个表达式的值是根据它依赖（所属）的scope决定的，而且还包含了值查找的方式（类似Js的作用域链，自己没有就找老爸要）。

五、Controller

　　Controller是在view背后的代码(-_-!)。它的职责是构建model，并通过回调函数，将其（model）推送到view中。View是当前scope到template(HTML)的映射（翻译得有点勉强...）。Scope是指挥model到view以及向controller发送event的纽带。

　　Controller与view分离是很重要的，因为：

1.Controller是写在javascript中的。Javascript是命令式的（imperative）。命令（imperative）是描述应用程序行为的一个好方法。Controller不应该包含任何显示信息（的逻辑）（DOM引用或者HTML片段）

2.View模版是写在HTML里的。HTML是声明式的。声明式（的HTML）是描述UI的好方法。View不应该包含任何行为。

3.由于Controller不知道自己需要对应哪一个View，使得一个Controller可以（间接）使用多个View。这对于re-skinning（更换皮肤？）、其他设备特定的视图（例如手机与桌面）还有代码的可测性是很重要的。

六、Model

　　Model，可以理解为数据对象。它被用作与模版结合，以产生视图。为了将model写入到视图中，model必须被scope所引用。与很多其他框架不一样，angular对model没有任何限制与要求。不需要额外添加class，也不需要通过特殊的特权方法去访问或者改变model。Model的数据类型，可以是原始的类型（String、number……），可以是键值对象({a:1,b:2})，也可以是函数（function() {…}）。简要地说，angular的model只需要是一个普通的javascript对象。

七、View

　　view是用户所能看到的东西。view诞生于模版。它与model结合，最终呈现为浏览器DOM。Angular采取一个对于其他很多模版系统来说，很不一样的方式去呈现View。

其他模版引擎：很多模版引擎，是通过建立带有特殊标记的HTML字符串来实现的。通常这些模版标记破坏了HTML的语法，这意味着不能通过一般的HTML编辑器去编辑代码（这个嘛…）。模版字符串传入模版引擎，与数据合并。最终生成HTML字符串。这些字符串一般通过.innerHTML的方式写入DOM中，促使浏览器呈现模版内容。当数据发生改变时，这个过程需要一次又一次地重复。模版的粒度与DOM更新的粒度一致。这粒的关键，是模版系统处理字符串。

Angular：Angular模版的不同之处，在于它是基于DOM的而不是基于字符串的。模版依然需要在HTML中写入一些字符串，但依旧是HTML（不是通过在里面嵌入模版）。浏览器把HTML转换为DOM，然后DOM成为了compiler（angular的模版引擎）的输入。Compiler查找directives，依次在model中设置watches。得出的结果，是一个一直更新的view，不需要重新拼接model与template。model成为了view的唯一数据来源（single source of truth）。

　　Directive是一个行为（例如之前文章的例子“躲猫猫”）或DOM转换（自定义标签，里面包含一组DOM），将其名称放在属性、标签名、class名里面都可以触发该directive。Directive允许你以声明的方式扩展HTML的标签。

　　下面的例子，还有一些疑问。就是$render如何触发@_@

directive

{{Content}}

九、Filters

　　Filters 扮演一个数据转换（格式化）的角色。通常他们是与地域有关的，不同地域也许会有不同的输出格式。他们在追随了Unix过滤器的精神与类似的语法：| (pipE)

十一、Angular Namespace

为了防止名称冲突，angular会在object的名称中加入前缀$。请不要在代码中使用$前缀以避免冲突。(-_-!! )

以上就是关于AngularJS concepts 的资料整理，后续继续添加相关文章，谢谢大家对本站的支持！

大佬总结

以上是大佬教程为你收集整理的AngularJs concepts详解及示例代码全部内容，希望文章能够帮你解决AngularJs concepts详解及示例代码所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。