AngularJs概念的详细解释和示例代码

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

去吧。

一.摘要

本文概述了角度组件，并解释了它们的工作原理。名单如下：

静止的你好世界.改成了Hello Kitty！运行时-引入角度运行时范围视图和控制程序(神马胶水.胶水)，以及控制器的行为-app(应用行为)Model-app的数据视图-用户看到的指令-HTML语法扩展过滤器-根据用户的本地格式格式化数据注入器-加载我们的app(依赖管理等。)模块-配置注射器$-角度命名空间第二，启动(启动)

以下描述了角度如何开始(参考图表和以下示例):

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

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

3.DOMContentLoaded事件的角度等待；

4.ng-app的角度外观，这是一个指令；用于指定应用程序边界范围；

5.如果ng-app有指定的模块(可能是ng-app=“some app”)，它将被用作configuration $ injector

6.$injector用于创建$compile服务和$ rootscope

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

8.ng-init是一个指令，它在相应的范围内创建name属性，并给它一个“Kitty”值；

9.在表达式中插入“{{name}}”的值，最后显示“Hello Kitty！”。

！DOCTYPE html html lang=' zh-cn ' ng-app head meta charset=' UTF-8 ' title hello Kitty！/title style type='text/css '。ng-斗篷{ display: none}/style/head dydiv ng-init=' name=' Kitty ' ' Hello { { name } }！/div脚本src=' http:/angular-1 . 0 . 1 . js ' type=' text/JavaScript '/script/body/html由于今晚要和别人讨论一些事情，所以进度比较慢。又是那句话。已经是深夜了。棱角分明，广告后见！

==============================================

广告结束了。继续

第三，运行时

这个图表和下面的例子描述了angular如何使用浏览器事件循环(所有的时间处理函数和定时器执行的函数将被安排在一个队列结构中，一个无限循环将被用来连续地从队列中取出函数来执行。这是事件循环。来自http://wiki.nodejs.tw/nodejs从头开始。

1.浏览器事件循环等待事件到来。事件来自用户交互(DOM事件)、定时器事件(setTimeout)、网络事件(服务器响应、XHR等)。);

2.事件回调函数开始执行。在这里输入javascript上下文。这个回调函数可以修改DOM结构。

3.回调函数执行后，浏览器退出javascript上下文，根据DOM的变化重新绘制视图。

Angular通过创建自己的事件处理循环修改了一般的javascript流。这将Javascript分为传统和Angular执行上下文。在angular执行上下文中执行的操作具有Angular数据绑定、异常处理、属性监控等功能。我们可以在javascript中使用$apply()进入Angular执行上下文。但请记住，在大多数(有角度的)地方(如控制器、服务)，处理事件的指令将调用$apply for you。手动调用$apply的场景通常是在您实现自定义事件处理程序或处理来自第三方库的回调时。

1.通过调用scope进入角度执行上下文。$apply(刺激剂Fn)。prostiusfn是我们希望在angular执行上下文中执行的函数(包括作为参数的作用域)或angular合法表达式。

2.Angular执行刺激剂Fn，这通常会改变应用程序状态。

3.Angular进入$digest循环。这个循环由两个较小的循环组成：处理$evalAsync队列和处理$watch list。$digest循环将继续迭代，直到模型稳定，也就是说，$evalAsync队列为空，$watch列表没有检测到任何变化。

4.$evalAsync队列用于排列必须跳出当前堆栈的帧(堆栈帧是指堆栈中为当前运行的函数分配的区域(或空间)。传入参数，返回地址(当这个函数完成时，你必须跳到这个返回地址。注意：即主音函数的断点)和函数使用的内部存储单元(即栈上存储的局部变量)都在栈帧中。http://book.51cto.com/art/200804/70915.htm c . 1.1堆栈框架)，但在浏览器视图绘制之前。这通常通过使用setTimeout(0)来实现。但是setTimeout(0)的方法会导致变慢，或者当浏览器在处理完每个事件后绘制视图时，视图会闪烁(angular解决了这个问题吗？怎么解决？)。

5.$watch list是在最新迭代中可能被修改的表达式的集合。如果(模型)改变，将调用$watch函数，从而达到重新分配特定DOM的目的。

6.一旦angular $digest循环完成(前面3中提到的情况)，在离开angular和javascript的上下文后，浏览器将重新绘制DOM来响应更改。

下面解释一下“hello kitty”(-_-！)是如何实现用户在文本框中输入文本时的数据绑定效果。

1.编译阶段(编译阶段):

A) ng-model和input指令定义输入中的按键事件侦听器。

B) {{name}}占位符(我不知道怎么翻译)(表达式)设置一个$watch在名称更改时响应。

2.运行时阶段：

a)按下inut控件中的“x”按钮，让浏览器触发按键事件；

B) input指令捕获文本框值的变化，然后调用$ apply(" name=' x '；)，在角度执行上下文中更新应用的模型。

C) Angluar将“名称=' x '”；应用于模型。(模型改变)

d)$摘要循环开始

E) $watch list检测到name的值已被更改，然后再次解析{{name}}表达式，然后更新DOM。

F) Angulart退出(angular)执行上下文，然后退出keydown事件和javascript执行上下文；依次；

g)浏览器重新绘制视图并更新字符。

！DOCTYPE html html lang=' zh-cn ' ng-app head meta charset=' UTF-8 ' title hello Kitty！/title style type='text/css '。ng-斗篷{ display: none} /style/headbody输入ng-model=' name ' class=' ng-斗篷'/pHello {{name}}！/pscript src=' http:/angular-1 . 0 . 1 . js ' type=' text/JavaScript '/script/body/html iv。范围

范围负责检测模型的变化，并作为表达式的执行上下文。范围嵌套在类似于DOM结构的层次结构中(如前所述，分区可能与控制器相关)。(有关详细信息，请参见各个方向文档，以了解哪个指令将创建新的范围)

下面的例子说明了表达式“name”的值是根据它所依赖(属于)的作用域来确定的，它还包括了求值的方式(就像Js的作用域链，没有就找他爸爸要)。

！DOCTYPE HTMl HTMl lang=' zh-cn ' ng-app head meta charset=' UTF-8 ' title scope/title style type=' text/CSS '。ng-斗篷{ display: none}/style/head dydiv class=' ng-斗篷' ng-controller=' ControllerA ' Hello { { name } }！/div div class=' ng-斗篷' ng-controller=' controller b ' Hello { { name } }！div class=' ng-斗篷' ng-controller=' controller c ' Hello { { name } }！div class=' ng-斗篷' ng-controller=' controller d ' Hello { { name } }！/div/divscript src='http:/angular-1 . 0 . 1 . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' function control era($ scope){ $ scope . name=' Kitty '；} function controller b($ scope){ $ scope . name=' Lcallao '；} function controller c($ scope){ $ scope . name=' Jeffrey '；}函数控制器d ($作用域){ }/脚本/正文/html V. Controller

！DOCTYPE HTMl HTMl lang=' zh-cn ' ng-app head meta charset=' UTF-8 ' title controller/title style type=' text/CSS '。ng-斗篷{ display: none}/style/head dydiv class=' ng-斗篷' ng-controller=' ControllerA ' Hello { { name } }！按钮ng-click='doIt()'DoIt！/button/div script src=' http :/angular-1 . 0 . 1 . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' function control era($ scope){ $ scope . name=' Kitty '；$ scope . doit=function(){ $ scope . name='俏丽'；};}/script/body/htmlController是视图背后的代码(-_-！)。它的职责是构建一个模型，并通过回调函数将其推入视图。视图是从当前范围到模板(HTML)的映射(翻译有点勉强.).范围是指导模型查看和向控制器发送事件之间的链接。

将控制器与视图分开很重要，因为：

1.1。控制器是用javascript编写的。Javascript势在必行。命令是描述应用程序行为的好方法。控制器不应该包含任何显示信息(DOM引用或HTML片段)

2.2。视图模板是用HTML编写的。HTML是声明性的。声明式是HTML描述UI的好方法。视图不应包含任何行为。

3.因为控制器不知道它需要对应哪个视图，所以一个控制器可以使用多个视图(间接)。这是为了重新剥皮(换皮？)，其他特定于设备的视图(如手机和台式机)，以及代码的可测试性都非常重要。

不及物动词模型

模型可以理解为一个数据对象。它与模板结合使用来生成视图。为了将模型写入视图，模型必须被范围引用。与许多其他框架不同，angular对模型没有任何限制或要求。不需要添加额外的类，也不需要通过特殊的特权方法访问或更改模型。Model的数据类型可以是原始类型(字符串、数字……)、键值对象({a:1，b:2})或函数(){…}。简而言之，angular的模型只需要是一个普通的javascript对象。

七.视角

视图是用户可以看到的。视图从模板中诞生。它与模型相结合，最终呈现为浏览器DOM。Angular以与许多其他模板系统非常不同的方式呈现视图。

其他模板引擎：许多模板引擎是通过创建带有特殊标签的HTML字符串来实现的。通常，这些模板标签会破坏HTML的语法，这意味着您无法通过普通的HTML编辑器编辑代码(嗯……)。模板字符串被传输到模板引擎，并与数据合并。最后生成一个HTML字符串。通常，这些字符串以。innerHTML，它鼓励浏览器呈现模板内容。当数据发生变化时，这个过程需要反复进行。模板的粒度与DOM更新的粒度一致。关键是模板系统处理字符串。

棱角分明：棱角分明模版的不同之处，在于它是基于数字正射影像图的而不是基于字符串的。模版依然需要在超文本标记语言中写入一些字符串，但依旧是HTML(不是通过在里面嵌入模版)。浏览器把超文本标记语言转换为多姆，然后数字正射影像图成为了编译器（角度的的模版引擎)的输入编译器查找指令，依次在模型中设置手表。得出的结果，是一个一直更新的查看，不需要重新拼接模型与模板。模型成为了视角的唯一数据来源（唯一的真理来源).

八、指令

管理的是一个行为（例如之前文章的例子"躲猫猫")或数字正射影像图转换（自定义标签，里面包含一组DOM)，将其名称放在属性、标签名、阶级名里面都可以触发该指令。管理的允许你以声明的方式扩展超文本标记语言的标签。

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

！DOCTYPE HTMl HTMl lang=' zh-cn ' ng-app=' my directive ' head meta charset=' UTF-8 ' title指令/title style type=' text/CSS ' .ng-斗篷{ display : none }/style/head body ng-controller=' MyCtrl ' div ng-model=' content ' content可编辑=' true ' my Little Dada/div pre class=' ng-斗篷模型值={ { content } }/pre button ng-click=' reset()' reset(更改模型)/按钮脚本src=' http 3360./angular-1。0 .1 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' angular。模块('我的指令'，[]).指令(' contenteditable '，function(){ return { require : ' ng model '，link:function(作用域，元素，attr，ng model){ function setVal(){ ng model } .$ SetViewValue(元素。text())；}//veew-模型元素。bind(' key up '，function() { scope .$ apply(SetVal)；});//模型-查看型号.$ render=function(val){ console。日志(“渲染正在运行”)；元素。html(val)；};//init SetVal()；} } } ).控制器(“我的Ctrl”，函数($ scope){ $ scope。reset=function(){ $ scope。内容=《我的小达达》；};});/脚本/正文/html九、过滤器

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

！DOCTYPE HTMl HTMl lang=' zh-cn ' ng-app head meta charset=' UTF-8 ' title filter/title style type=' text/CSS ' .ng-斗篷{ display : none }/style/head dydiv ng-init=' list=['百度' b '，'搜狗s '，' 360 '，' 3SB']'数字格式化： 1233211234567-{ { 1233211234567 |号码}}br/数组过滤，然后通过json格式输出：输入ng-model=' my filter text ' type=' text '/br/{ { list | filter : my filter text | JSON } } br///div脚本src=' http :/angular-1。0 .1 .js ' type=' text/JavaScript '/script/body/html十、模块和注射器

注射器是一个服务定位器。每一个有角的应用，都会有一个单独的注射器。注射器提供一个通过名称查找对象实例的途径注射器。会在内部躲藏中保持所有对象实例，所以重复调用相同的名称时，返回的都是同一个对象实例。如果对象不存在，那么它会请求实例工厂（实例工厂)去创建一个新实例。

组件是一个配置注射器的实例工厂的方法，被称为提供程序。

//创建一个模块var myModule=angular。模块(' myModule '，[]) //配置注射器myModule.factory('serviceA '，function() { return { //而不是{},把你的对象创建放在这里};});//创建一个注射器，并从“我的模块”var $注入器=angular。注射器(“我的模块”)进行配置；//从注射器中检索一个名为var ServiCea=$ injector。获取(' ServiCea ')的对象；//始终为真，因为实例缓存$注射器。get(' ServiCea ')===$ injector。get(' ServiCea ')；//真但是注射器的真正牛X的地方在于它可以用于调用方法和"实例化"类型。这个美妙的特性是允许方法和类型请求他们所依赖的资源，而不是寻找他们。

//你写这样的函数。函数dosame ing(ServiCea，serviceB) { //在这里做点什么} //有角度为您的应用程序提供注入器var $注入器=.//////var ServiCea=$ injector。get(' ServiCea ')；var ServiCeb=$ injector。get(' ServiCeb ')；//现在调用函数剂量计量(ServiCea，ServiCeb)；//上面是传统的老方法~下面是有角的说自己的牛X方法////////该$注射器将自动向函数$注射器。调用(剂量测量)提供参数；//这是框架调用函数的方式注意，我们唯一需要写的，就是我们的功能，在功能的争论中列出方法依赖的资源即可！当有角的调用功能时，他会使用"呼叫"方法，自动填充功能设备。

留意下面的例子中是如何在构造器中列出依赖的。当ng-控制器实例化控制器时，将自动提供所依赖的资源。没有必要去创建、寻找、创建注射器引用来加载依赖资源。

！DOCTYPE HTMl HTMl lang=' zh-cn ' ng-app=' time example ' head meta charset=' UTF-8 ' title injector/title style=' text/CSS ' .ng-斗篷{ display : none }/style/head dydiv ng-controller=' clock TRL ' class=' ng-斗篷'当前时间为： { { time。now } }/div脚本src=' http :/angular-1。0 .1 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' angular。模块('时间示例'，[]).工厂(“我的时钟”，函数($ time out){ var time={ }；（函数tick() { time.now=new Date().toString()；$超时（打勾，1000);})();返回时间；});/* * * * @ param $作用域* @param myClock这里自动插入了依赖的我的钟！* @ constructor */function clock TRL($ scope，my clock){ $ scope。时间=我的时钟；}/脚本/正文/html十一、角度命名空间

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

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