自动初始化

请将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。

加油！

AngularJS开发指南2：AngularJS初始化过程的更多相关文章

  1. AngularJS开发指南16：AngularJS构建大型Web应用详解

    AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...

  2. AngularJS开发指南1：AngularJS简介

    什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...

  3. AngularJS开发指南8：AngularJS模块的详解

    在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Jav ...

  4. AngularJS开发指南4：指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  5. AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解

    模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...

  6. AngularJS开发指南14：AngularJS的服务详解

    服务是一种由服务器端带到客户端的特性,它由来已久.AngularJS应用中的服务是一些用依赖注入捆绑在一起的可替换的对象.服务是最常和依赖注入一起用的,它也是AngularJS中的关键特性. 接下来, ...

  7. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  8. AngularJS开发指南11：AngularJS的model，controller，view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  9. AngularJS开发指南15：AngularJS的创建服务，将服务注入到控制器，管理服务依赖详解

    创建服务 虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务.你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者 ...

随机推荐

  1. vim自定义配色方案，图文并茂

    1.先上图                                 下面是tcpdump的源码.颜色根据自己的喜好配置,我比较喜欢亮的颜色,看的清楚! 2.下载辅助配置文件           ...

  2. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  3. Elastic search入门

    首先是下载elasticsearch https://www.elastic.co/downloads,解压: 然后下载了中文分析器ik,github上搜索elasticsearch-ik就能找到,h ...

  4. Linux 系统常用命令汇总（二） vi 文本编辑

    文本编辑 vi 命令 作用 +文件名 编辑文本文件,若文件不存在同时创建该文件 Ctrl+f 向后翻一页 Ctrl+b 向前翻一页 Ctrl+d 向后翻半页 Ctrl+u 向前翻半页 + 光标移动到下 ...

  5. 【读书笔记《Android游戏编程之从零开始》】20.游戏开发基础（游戏数据存储）

    对于数据的存储,Android 提供了4种保存方式. (1)SharedPreference 此方法适用于简单数据的保持,文如其名,属于配置性质的保存,不适合比较大的情况,默认存放在手机内存里 (2) ...

  6. HDU 4902 Nice boat --线段树(区间更新)

    题意:给一个数字序列,第一类操作是将[l,r]内的数全赋为x ,第二类操作是将[l,r]中大于x的数赋为该数与x的gcd,若干操作后输出整个序列. 解法: 本题线段树要维护的最重要的东西就是一个区间内 ...

  7. Mango Weekly Training Round #6 解题报告

    比赛链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=41856#overview A.多种解法.可以dfs倒序染色,如mathlove ...

  8. sql 入门经典（第五版） Ryan Stephens 学习笔记 　第四部分：建立复杂的数据库查询/

    第十三章: 在查询表里结合表 1.等值结合 : // 选择 tabla_a 和table_b 中id相等的行,输出 他们的id 和name select table_a.id , table_a.na ...

  9. 注册其它地区Apple ID

    不同地区Apple Id需求 iPhone 最近换上了iPhone,想要下载其它国家地区的游戏,需要登录该国的Apple Id才能在itunes里下载. 下面记录一下我注册日本地区的Apple Id过 ...

  10. 经典71道Android试题及答案

    本文为开发者奉献了70道经典Android面试题加答案--重要知识点几乎都涉及到了,你还等啥,赶紧收藏吧!! 1. 下列哪些语句关于内存回收的说明是正确的? (b) A. 程序员必须创建一个线程来释放 ...