Angular JS学习笔记（一）--Bootstrap

总结

本文主要解释了angular初始化过程，以及在你有需要的情况下对angular进行手工初始化。

Angular <script> 标签

下面的例子给我们展示了如何通过推荐的路径整合Angular，并实现自动初始化。

1 <!doctype html>
2 <html xmlns:ng="http:angularjs.org" ng-app>
3     <body>
4          ……
5          <script src="angular.js">
6     </body>
7 </html>

注意：

  • 将script标签放置在页面的底部。将script标签放置于页面底部能够加速加载angular.js，因为将加载标签放置于底部能够防止因angular.js的加载而阻塞整个页面的加载。你可以在http://code.angularjs.org中获取最新版本的angularjs。出于安全的考虑，请不要在产品中直接饮用这个地址来加载该脚本。因为这位为你的产品带来安全隐患。如果仅仅是用于研发学习，也可以直接使用。
  • angular-[version].js：适用于阅读和日常开发调试；
  • angular-[version].min.js是压缩和混淆后的版本，适用于最终产品的应用。
  • 如果想在应用中自动启动angular，将ng-app放置于应用的根节点，通常是放置于<html>标签中；
<html ng-app>
  • 在IE7浏览器下则需要添加id="ng-app"
<html ng-app id="ng-app">
  • 如果你使用旧的directive语法风格"ng:"，那么就需要在html中添加一个xml-namespace来进行表明。（在IE7中使用这种方式是有历史原因的，所以我们在新版本中叶不推荐使用ng:） 
<html xmlns:ng="http://angularjs.org">

自动初始化

Angular会在DOMContentLoaded事件中或当document.readyState='complete'并执行angular.js时进行自动初始化。此时Angular将会寻找标示应用根节点的ng-app指令。如果ng-app指令被发现，那么：

  • 加载与指令相关的module
  • 创建相应的应用injector
  • 以ng-app指令作为应用根节点来对DOM进行编译。这将允许你将页面中的一部分DOM作为Angular应用。
<!doctype html>
<html ng-app="optionalModuleName">
   <body>
       I can add:{{ 1+2 }}.
       <script src="angular.js"></script>
   </body>
</html>

手工初始化

如果你需要进一步控制初始化过程，那么你可以使用手工初始化方法来代替自动初始化。例如当你需要通过script loaders来加载angular.js或在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>

注意：我们这里已经提供了将要被加载进入injector的应用模块名称作为作为angular.bootstrap函数第二个参数。需要注意的是angular.bootstrap将不会在此过程中创建模块。你必须在创建完自定义的modules后才能将其作为angular.bootstrap函数的参数。

这些是我们编码过程中需要遵循的原则：

  • 在所有页面和代码加载完后，找到当前AngularJS应用的根节点，一般是当前页面的根节点；
  • 调用angular.bootstrap将相应的元素编译为一个可执行、双向绑定的应用。

延迟启动

"延迟启动"这一特性能够使得一些工具（比如Batarang和test runners）来对angular的启动过程进行挖掘，同时也可对DI注册的一些modules进行跟踪，这些modules作为可以代替或增加DI服务的手段，也可以来进行模拟批量依赖。

当angular.bootstrap被调用时，如果window.name包含前缀NG_DEFER_BOOTSTRAP！，那么angular启动流程将会暂挺，一直到angular.resumeBootstrap()被调用。

angular.resumeBootstrap()采用一些可选的模块列表，这些列表将被添加到应用即将用来启动的一些模块列表中。

 

posted on 2015-05-28 00:23  糊涂小将  阅读(705)  评论(0)    收藏  举报