AngularJS的初始化

本文主要介绍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的初始化

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

作者：make dream

AngularJS的初始化的更多相关文章

  1. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  2. 04、AngularJS的ng-bind、多个控制器和apply

    这篇,讲一下angularjs的ng-bind指令,多个控制器,以及手动触发angularjs的脏检查,我直接把代码贴,顺着代码讲. <!DOCTYPE html> <html> ...

  3. AngularJS 源码分析1

    AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...

  4. 理解angularjs的作用域

    <!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...

  5. AngularJS快速入门指南04：指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

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

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

  7. AngularJS + ui-router + RequireJS异步加载注册controller／directive／filter／service

    一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...

  8. AngularJS.directive系列：嵌套directive的通讯及scope研究

    一.directive中的scope directive无疑是AngularJS中比较复杂难懂的部分,而directive中个scope更是其中最复杂的部分了,尤其是在嵌套directive中互相通讯 ...

  9. AngularJS.js: 杂项

    ylbtech-AngularJS.js: 杂项 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多 ...

随机推荐

  1. ZOJ 1649：Rescue（BFS）

    Rescue Time Limit: 2 Seconds      Memory Limit: 65536 KB Angel was caught by the MOLIGPY! He was put ...

  2. Android apk file

    apk file 事实上zip文件. 您可以使用unzip命令提取. unzip example1.apk -d ./example_dir tree . ├── AndroidManifest.xm ...

  3. CENTOS6.4安装lxml失败

    环境如下: Centos6.4 Python 2.7.6 pip install lxml 执行上面的命令,有类似下面的提示: src/lxml/lxml.etree.c:188133: error: ...

  4. WebView无法放大缩小解决方式

    先看看我们之前所写的代码 1) 加入权限:AndroidManifest.xml中必须使用了许可"android.permission.INTERNET" 2) 使用了一个WebV ...

  5. oracle 数据库技术支持生命周期表

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl4b3Jh/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  6. MongoDB的upsert状态判断和pymongo使用方法

    在mongo中,有一个命令非常的方便,就是upsert,顾名思义就是update+insert的作用 根据条件判断有无记录,有的话就更新记录,没有的话就插入一条记录 upsert的使用方法: Mong ...

  7. 快速构建Windows 8风格应用27-漫游应用数据

    原文:快速构建Windows 8风格应用27-漫游应用数据 本篇博文主要介绍漫游应用数据概览.如何构建漫游应用数据.构建漫游应用数据最佳实践. 一.漫游应用数据概览 1.若应用当中使用了漫游应用数据, ...

  8. 有趣的游戏：Google XSS Game

    Google最近出了一XSS游戏: https://xss-game.appspot.com/ 我这个菜鸟看提示,花了两三个小时才全过了.. 这个游戏的规则是仅仅要在攻击网页上弹出alert窗体就能够 ...

  9. MySQL之GROUP BY用法误解

    1.说明  “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理.(只是简单说明这个 ...

  10. mvc拦截器

    在ASP.NET MVC中,有三种拦截器:Action拦截器.Result拦截器和Exception拦截器.这里说的是第一种和第三种.其实所谓的ASP.NET MVC拦截器,也没什么神秘的,就是一个普 ...