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

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错
自动初始化

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

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

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

   
        I can add: {{ 1+2 }}.
       
   

手动初始化

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

 

   
        Hello {{‘World’}}!
       
       
            angular.element(document).ready(function() {
              angular.bootstrap(document);
            });
       
   

 

等页面和所有的脚本加载完之后,找到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指令的例子。


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

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

 

 
   
   
      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);
            }
        }
      });
   
 
 
    Drag ME
 
   

 

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

angular视图

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

AngularJS权威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜欢,并分享我的工作~带你走近AngularJS系列

  1. 带你走近AngularJS – 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 带你走近AngularJS – 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 带你走近AngularJS – 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的详细介绍请点这里
AngularJS 的下载地址请点这

未经允许不得转载:演道网 » AngularJS开发指南2:AngularJS初始化过程

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册