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)
  5. model - app的数据
  6. view - 用户所看到的东东
  7. directives - HTML的语法扩展
  8. filters - 根据用户的本地格式,格式化数据
  9. injector - 加载我们的app(依赖管理之类)
  10. module - 配置injector
  11. $ - 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!”。

<@R_403_338@ charset="UTF-8"> Hello Kitty! Hello {{name}}!

五、Controller

<@R_403_338@ charset="UTF-8"> Controller

九、Filters

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

<@R_403_338@ charset="UTF-8"> filter

十一、Angular Namespace

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

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

猜你在找的JavaScript相关文章