Angular-Bootstrap和Compiler

简介:

 在上节简单介绍了Angular js框架,在这节将继续Angular的Bootstrap(引导)和Compiler(编译)机制。

一:Bootstrap:Angular的初始化

     1:Angular推荐的自动化初始如下:

复制代码
 1  <! doctype html >
 2 
 3  < html  xmlns:ng ="http://angularjs.org"  ng-app >
 4 
 5  < body >
 6 
 7 ...
 8 
 9  < script  src ="angular.js" >
10 
11  < / body>
12 
13  < / html  
复制代码

   利用ngapp标示你需要自动引导应用程序的根节点,一般典型为html tag。在DOMContentLoaded事件触发Angular会自动寻找ngapp作为应用的根节点,如果找到则会进行如下操作:

  1. 加载module(模块)相关directive(指令)。
  2. 创建应用程序injector(Angular的注入机制).
  3. 编译处理ng-app作为根节点的指令。这里允许你自定义选择DOM节点作为应用根节点。
复制代码
 1 <!doctype html>
 2 
 3 <html ng-app="optionalModuleName">
 4 
 5 <body>
 6 
 7 I can add: {{ 1+2 }}.
 8 
 9 <script src="angular.js"></script>
10 
11 </body>
12 
13 </html>
复制代码
 

    2:手动初始化:

     如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。手动引导方式将会如下:

复制代码
 1  <! doctype html >
 2 
 3  < html  xmlns:ng ="http://angularjs.org" >
 4 
 5  < body >
 6 
 7 Hello {{'World'}}!
 8 
 9  < script  src ="http://code.angularjs.org/angular.js" ></ script >
10 
11  < script >
12 
13  angular.element(document).ready( function () {
14 
15  angular.bootstrap(document);
16 
17  });
18 
19  </ script >
20 
21  </ body >
22 
23  </ html >
复制代码

 

  1. 在页面所有代码加载完成后,找到html模板根节点(典型为document元素).
  2. 调用api/angular.bootstrap(angular.bootstrap(element[, modules]))编译模板使其可执行.

二:Compiler:Angular的编译

     Angular的编译机制允许开发人员给浏览器添加新的Html语法,允许我们添加一些html节点,attribute,甚至创建一些自定义的节点,attribute。Angular把这些行为的扩展成为指令directives.Angular带来了有用的directive,并允许我们创建特定领域的directive。

   1: Compiler处理分为两个步骤:

  1. 转换DOM,收集directive,返回Link(连接)function。
  2. 合并指令和Scope产生一个活生生的View。scop mode中的任何改变都会通过反应到view中,并来自view的用户交互也会同步到scope model,并scope是一个单一数据源。

   2:指令Directive

  Directive是一个会被特殊的html设计编辑处理的行为。其可以被放置在节点的names, attributes, class 上,甚至是html注释中。下面是Angular自带的ng-bind的等价写法:

复制代码
1  < span  ng-bind ="exp" ></ span >
2 
3  < span  class ="ng-bind: exp;" ></ span >
4 
5  < ng-bind ></ ng-bind >
6  <!--  directive: ng-bind exp –>
复制代码

       directive仅仅是一个在dom中会被Angular执行的一个function。下面是一个拖拽的实例,其可以被应用于span,div的attribute上:

View Code

    Demo

you can drag and move me to anywhere !

     3:view理解

     有许多的模板引擎都被设计为模板(template)和数据(model)的合并返回一个字符串,再利用innerHTML追加在DOM节点,这以为则数据的任何改变都必须重新合并生成新的内容追加在DOM上。形如下图属于单向绑定技术:

2012-8-13 23-33-08 

     而Angular则不同利用directive指令而非字符串,返回值是一个合并数据model的link function。view和model的绑定是自动,透明的,不需要开发人员添加额外的action去更新view,Angular在这里不仅是数据model的绑定,还有行为概念。作为双向的绑定,形如下图:

2012-8-13 23-33-08 

资料:

  1. Angular官网:http://angularjs.org/
  2. 代码下载:https://github.com/angular/angular.js

Angular随笔:

  1. AngularJs - Javascript MVC 框架
  2. Angular-Bootstrap和Compiler

   其他章节还在翻译中...希望大家多多指教,对于翻译我不会去按照原文完全翻译,会按照自己的理解。


本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/archive/2012/08/13/2637262.html,如需转载请自行联系原作者

目录
相关文章
|
9天前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
35 2
|
7月前
|
存储 API
什么是 Angular Schematics
什么是 Angular Schematics
26 0
|
7月前
|
自然语言处理 JavaScript 前端开发
angular-devkit 中 build-angular 包的作用
angular-devkit 中 build-angular 包的作用
98 0
|
7月前
|
前端开发 JavaScript API
关于 Angular 应用的 Bootstrap 过程
关于 Angular 应用的 Bootstrap 过程
34 0
解决Cannot find module &#39;@angular/compiler-cli&#39;
解决Cannot find module &#39;@angular/compiler-cli&#39;
111 0
解决Cannot find module &#39;@angular/compiler-cli&#39;
|
JavaScript 前端开发 编译器
Angular ngcc和ivy
Angular ngcc和ivy
302 0
Angular ngcc和ivy
|
JavaScript 前端开发
Angular self study 1 - Bootstrap
Angular self study 1 - Bootstrap
Angular self study 1 - Bootstrap
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
177 0
Angular library 学习笔记
如何找到Angular应用的某个directive是属于哪一个Angular module
如何找到Angular应用的某个directive是属于哪一个Angular module
如何找到Angular应用的某个directive是属于哪一个Angular module
|
前端开发
Angular bootstrap的一个例子
Angular bootstrap的一个例子
Angular bootstrap的一个例子