angular的bootstrap(引导)和compiler(编译)机制_angularjs

《angular的bootstrap(引导)和compiler(编译)机制_angularjs》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Angular的Bootstrap（^

2、导）和Comp订e【（编译）机制在上节简单介绍了Angularjs框架，在这节将继续Angular的Bootstrap（引导）和Comp订cr（编译）机制。一:Bootstrap：Angular的初始化1：Angular推荐的自动化初始如下：•••

3、需要自动引导应用程序的根节点，一般典型为htmltag0在DOMContentLoaded事件触发Angular会口动寻找ngapp作为应用的根节点，如果找到则会进行如下操作：1•加载module（模块）相关directive（指令）。2.创建应用程序injector（Angular的注入机制）.3.编译处理ng-app作为根节点的指令。这里允许你t定义选择D0M节点作为应用根节点。Ican

4、add:{{+}}.2：手动初始化:如果想对对初始化冇更多的控制权，可以采用自定义手动引导方法初始化代替angular的口动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。手动引导方式将会如下：Hello{{'World'}}!

5、p://code,angularjs.org/angular.js">〈/script>1.在页面所有代码加载完成后，找到html模板根节点(典型为document元素).2.调用api/angular.bootstrap(angular,bootstrap(element[,modules]

6、))编译模板使其可执行.二：Comp订er：Angular的编译Angular的编译机制允许开发人员给浏览器添加新的Iltml语法，允许我们添加一些html节点，attribute,其至创建一些自定义的节点，attribute。Angular把这些彳亍为的扩展成为指令directives.Angular带来了有用的directive,并允许我们创建特定领域的directiveo1:Comp订er处理分为两个步』1.转换D0M,收集directive,返回Link（连接）function。2.合并指令

7、和Scope产生一个活生生的View。scopmode屮的任何改变都会通过反应到view中，并来自view的用户交互也会同步到scopemodel,并scope是一个单一数据源。2:指令DirectiveDirective是一个会被特殊的html设计编辑处理的彳亍为。其可以被放置在节点的names,attributes,class上，甚至是html注释中。下面是Angular自带的ng-bind的等价写法：

8、d:exp;〃>〈/span>〈ng-bind>directive仅仅是一个在dom中会被Angular执彳亍的一个function。下面是一个拖拽的实例，其可以被应用于span,div的attribute上：angular,module('drag5,[]).directive('draggable，,function($document){varstartX二,startY=,x=,y=;returnfunction(sco

9、pe,element,attr){element.css({position:，relative"、border:'pxsolidred",backgroundColor:'lightgrey",cursor:'pointer"});clement.bind(Jmouscdowrf,function(event){startX=event.screenX-x;startY=event.screenY-y;$document.bind(，mousemove",mouse