博弈AngularJS讲义(17) - 启动

阅读更多

Bootstrap

  本节我们将分析Angular应用初始化流程以及怎样手动启动Angular应用。

 

Angular

   1. 将script标签置于body标签低端。这样可以加快页面的加载， 这样HTML加载不会因为加载angular.js被阻塞。可以从http://code.angularjs.org 下载最新的Angular。请不要在Production代码中引入前面的URL，会引发安全问题。

    - 在开发环境下调试可引入angular-[version].js

  -在生产环境中使用angular-[version].min.js，这是被混淆和压缩过的版本，可以提高安全性，提升页面的加载

  2. 把ng-app指令置于app的顶部标签，通常在html标签上，这样Angular会自动启动应用。

  3. 如果使用旧风格的指令语法ng:,需要引入xml-namespace（命名空间），解决IE兼容性问题。

 

自动初始化

  Angular初始化由DOMContentLoaded事件或者在document.readyState为'complete'后angular.js载入完后被触发。Angular会

寻找ng-app指令并按如下步骤初始化应用：

  1. 载入与ng-app指令相关的模块

  2. 创建模块相关的注入器

  3. 以ng-app所在节点为根节点编译DOM

 

  

 

 

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

 
  最佳实践推荐在ng-app所在元素中加入ng-strict-di指令，参看如下代码：

  

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

 

  如果不用ng-app，我们可以通过angular api在js代码中启动angular应用，代码如下:

  

  

    Hello {{greetMe}}!
  
  

  

 通过angular.bootstrap在相应的DOM元素中启动应用模块，上例中bootstrap的第一个参数document为angular app所对应的DOM,

第二个参数为需要启动的应用模块。模块必须在调用bootstrap前定义。在调用bootstrap后不能再为应用模块添加控制器、服务、指令等

组件。启动bootstrap必须在页面和所有模块代码被载入以后，即angular.element(document).ready回调中。

 

延迟启动

  如果window.name属性以NG_DEFER_BOOTSTRAP!为前缀，调用angular.bootstrap后，启动过程将在angular.resumeBootstrap回调中被执行。

  可以在angular.resumeBootstrap的参数列表中注入应用模块所需的依赖。一般在需要注入很多依赖的测试场景中适用。

  

• 
• 大小: 23.8 KB

• 查看图片附件