首页 > Web开发 > 详细

博弈AngularJS讲义(17) - 启动

时间:2015-01-10 02:12:38      阅读:420      评论:0      收藏:0      [点我收藏+]

Bootstrap

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

?

Angular<script> 标签

? 下面的例子说明了如何在页面中引入Angular.

??

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js"></script>
  </body>
</html>

? ?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

?

??
bubuko.com,布布扣

?

?

<!doctype html>
<html ng-app="optionalModuleName">
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

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

??

<!doctype html>
<html ng-app="optionalModuleName" ng-strict-di>
  <body>
    I can add: {{ 1+2 }}.
    <script src="angular.js"></script>
  </body>
</html>

?

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

??

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module(‘myApp‘, [])
      .controller(‘MyController‘, [‘$scope‘, function ($scope) {
        $scope.greetMe = ‘World‘;
      }]);

    angular.element(document).ready(function() {
      angular.bootstrap(document, [‘myApp‘]);
    });
  </script>
</body>
</html>

?通过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的参数列表中注入应用模块所需的依赖。一般在需要注入很多依赖的测试场景中适用。

??

博弈AngularJS讲义(17) - 启动

原文:http://boyitech.iteye.com/blog/2174417

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!