本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化。

　　Angular <script> Tag

下面通过一小段代码来介绍推荐的自动初始化过程：

<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

<body>

     ...

     <script src="angular.js">

</body>

</html>
  • 把script标签放在页面的底部可以缩短应用加载的时间，因为这样的话Html的加载不会被angular.js脚本的加载阻塞。
  • angular-[version].js是具有可读性的版本，适用于开发和调试。
  • angular-[version].min.js是压缩和混淆后的版本，适用于产品代码。
  • 如果你想让angular自动初始化的话，可以在<html>标签中加上ng-app 
    <html ng-app>
    
    …
    
</html>
  • 如果要支持IE7的话需要加上id="ng-app" 
    <html id="ng-app" ng-app>
    
     …
    
</html>
  • 如果要使用旧版的指令语法（ng:）的话，要支持IE还需要在<html>标签中引入xml的命名空间（因为一些历史原因，现在已经不推荐使用ng:的语法了） 
    <html xmlns:ng="http://angularjs.org">
    
     …
    
</html>

　　自动初始化（Automatic Initialization）

在DOMContentLoaded事件触发时Angular会执行自动初始化过程。这时，Angular会查找ng-app指令，并用它来标明整个应用的根作用域。如果找到了ng-app指令，Angular会做一下几件事：

  • 加载和指令（directive）内容相关的模块（module）
  • 创建一个应用“注入器”（injector）
  • 将含有ng-app指令的节点作为根节点来编译DOM。这样一来，你可以只指定一部分DOM作为Angular应用。

　　手动初始化（Manual Initialization）

如果你想更多的来控制初始化的过程，你可以手动的执行引导程序。比如你需要用到脚本加载器（script loader）或者要在Angular编译页面之前加入一些操作的话，你就需要手动的调用Angular的初始化方法了。例如：

<!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.module('myApp',[]);

              angular.bootstrap(document,['myApp']);

          });

    </script>

</body>

</html> 

     注意：angular.bootstrap函数签名如下：

参数 类型 说明
element Element 作为Angular应用根作用域的DOM元素
modules
(optional) 		Array<String|Function|Array> 数组中为所有需要加载的模块的的名称，每个模块的名字需要在此之前定义，Angular不会在运行到这里时自己去定义模块。

如果手动调用初始化函数的话，代码的书写需要遵循以下顺序：

  • 等到页面加载完成后，找到AngularJS的根元素（通常是文档的根元素）。
  • 调用angular.bootstrap函数将模板编译成可以执行的、数据双向绑定的应用程序。

     延迟引导（Deferred Bootstrap）

这个特性使得像Batarang这样的工具和一些test runner能够在Angular的引导过程中建立钩子，在注册需要注入的依赖的时候可以增加或者替换注入的service，或者mock一些比较重的依赖。当angular.bootstrap被调用时如果window.name中包含前缀NG_DEFER_BOOTSTRAP!，引导过程将会被暂停直到angular.resumeBootstrap()被调用。angular.resumeBootstrap()可以传入一个可选的模块数组作为参数，这个数组中的模块会被加到引导函数的模块数组中一起被初始化。

=============Angular  JS学习笔记系列=============

  1. AngularJS学习笔记1——什么是AngularJS？
  2. AngularJS学习笔记2——AngularJS的初始化

=========================================

AngularJS学习笔记2——AngularJS的初始化的更多相关文章

  1. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  2. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  3. AngularJS学习笔记(1) - AngularJS入门

    什么是AngularJS? AngularJS是建立在jQuery的一个轻量级版本之上的MVC框架.MVC将业务逻辑代码和视图.模型相分离.AngularJS提供的所有功能都可以通过使用JavaScr ...

  4. AngularJS学习笔记3——AngularJS的工作原理

    个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  8. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

  9. AngularJs学习笔记--Dependency Injection（DI，依赖注入）

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

随机推荐

  1. Objective-C Foundation框架

    1.字符串 OC由两个字符串:NSString和NSMutableString,NSString代表字符序列不可变的字符串,而NSMutableString则代表字符序列可变的字符串. 1.1 创建字 ...

  2. HTML浅学入门---基础知识 （1）<基本规则>

    HTML: 结构化文档,超文本标记语言 (一)四条基本规则 1.每个开始标记必须和结束标记配套使用.// <tag>    </tag> 2.文档中必须包含唯一的打开和关闭标记 ...

  3. UITableView设置cell为不可选？

    本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文将为读者讲解UITableView如何设置单 ...

  4. Android基础整理之四大组件Activity

    最近准备系统的重新整理复习一下Android的各方面的知识,本着知识分享的原则,我就把梳理过程中一些东西给记录下来,权当一个学习笔记吧. 下面步入正题..... 什么是Activity Activit ...

  5. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  6. 12、android socket使用demo：网络聊天

    目录: 一.效果图 二.原代码分享 三.代码分析 四.总结 一.效果图如下: 客户端1: 客户端2:           二.原代码分享如下: 1.java代码只有一个 MainActivity.ja ...

  7. Jenkins-测试自动化环境搭建（Python+RobotFramework+selenium）

    下载插件: Python:https://wiki.jenkins-ci.org/display/JENKINS/Python+Plugin RobotFramework:https://wiki.j ...

  8. LESS CSS 框架简介

    使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表 ...

  9. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  10. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back