AngularJS开发指南2：AngularJS初始化过程

自动初始化

请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中。比如：<html ng-app>

AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令寻找你应用的根作用域。如果 ng-app指令找到了，那么AngularJS将会：

（1）载入指令相关的模块。这里指的是optionalModuleName模块。
（2）创建应用的“注入器(injector)”。
（3）拥有ng-app 指令的标签为根节点来编译其中的DOM。

<!doctype html>
<html ng-app="optionalModuleName">
    <body>
        I can add: {{ 1+2 }}.
        <script src="angular.js"></script>
    </body>
</html>

手动初始化

如果你需要主动控制一下初始化的过程，你可以使用手动执行引导程序的方法。

<!doctype html>
<html xmlns:ng="http://angularjs.org">
    <body>
        Hello {{'World'}}!
        <script src="http://code.angularjs.org/angular.js"></script>
        <script>
            angular.element(document).ready(function() {
            　　angular.bootstrap(document);
            });
        </script>
    </body>
</html>

等页面和所有的脚本加载完之后，找到HTML模板的根节点——通常就是文档的根节点。
调用 angular.bootstrap方法，将模板编译成可执行的、数据双向绑定的应用程序。

HTML编译器

HTML在编写静态页面时，有很多声明式的结构来控制格式。比如你要把某个内容居中，你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了。这就是声明式语言的强大之处。

但是声明式语言也有力所不能及的地方，原因之一在于你不能用它来让浏览器识别新的语法。比如说，你不要内容居中，而是居左到1/3,这时它就做不到了。所以我们需要一个办法让浏览器能学会新的HTML语法。

AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素。AngularJS称这种行为扩展为“指令”。

编译器是AngularJS提供的一项服务，它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。

编译：遍历DOM并且收集所有的相关指令，生成一个链接函数。
链接：给指令绑定一个作用域，生成一个动态的视图。作用域模型的任何改变都会反映到视图上，并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。

有一些指令，比如ng-repeat会为数据集合里的每一项都克隆一次对应的DOM元素。将整个编译过程分为编译和链接两个阶段的作法改善了整体的性能，因为克隆出来的模板总共只需要被编译一次，然后链接到各自的模型实例上就行了。

指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。指令可以写在元素的名称里，属性里，css类名里，注释里。下面有几个功能相同的使用ng-bind指令的例子。

<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->

指令本质上只是一个当编译器编译到相关DOM时需要执行的函数。

下面是一条能让元素变得可拖拽的指令。注意<span>元素里的那个draggable属性。

<!doctype html>
<html ng-app="drag">
  <head>
    <script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
    <script>
       angular.module('drag', []).directive('draggable', function($document) {
          var startX=0, startY=0, x = 0, y = 0;
          return function(scope, element, attr) {
             element.css({
                 position: 'relative',
                 border: '1px solid red',
                 backgroundColor: 'lightgrey',
                 cursor: 'pointer'
             });
             element.bind('mousedown', function(event) {
                startX = event.screenX - x;
                startY = event.screenY - y;
                $document.bind('mousemove', mousemove);
                $document.bind('mouseup', mouseup);
             });

             function mousemove(event) {
                 y = event.screenY - startY;
                 x = event.screenX - startX;
                 element.css({
                    top: y + 'px',
                    left:  x + 'px'
                 });
             }

            function mouseup() {
                 $document.unbind('mousemove', mousemove);
                 $document.unbind('mouseup', mouseup);
            }
         }
      }); 
    </script>
  </head>
  <body>
    <span draggable>Drag ME</span>
  </body>
</html>

通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进的优美之处在于我们给了浏览器新能力。我们用了一种只要开发者熟悉HTML规则，就会很自然的扩展浏览器理解新行为新语法的能力。

angular视图

网上有很多的模板系统，比如handlerbars。他们大多数都是“将静态的字符模板和数据绑定，生成新字符，然后通过innerHTML插入到页面元素中”。这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新字符，再插入到DOM里。
AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是一个链接函数，这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用程序也没有用到innerHTML。更特别的是，Angular的指令不仅仅能使用字符串形式的绑定，还可以使用一些指示行为的结构体，比如：ng-repeat。

加油！

posted on 2015-01-21 09:25 chaojidan 阅读(2185) 评论(0) 编辑收藏举报

刷新页面返回顶部

chaojidan

导航

公告

AngularJS开发指南2：AngularJS初始化过程