angular绑定初始化及bootstrap手动初始化

最新推荐文章于 2021-06-30 13:41:07 发布

jiegeng2233

最新推荐文章于 2021-06-30 13:41:07 发布

阅读量1k

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/jiegeng2233/article/details/78972323

版权

angularJS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

要启动一个angular应用，可以使用ng-app指令，也可以调用bootstrap方法手动启动。

绑定初始化

ng-app 通过绑定来进行angular的初始化，会把js代码侵入到html中.（缺）

如果引用了angular.js脚本，而且document.readyState为“complete”状态，那么AngularJS会在DOMContentLoaded事件中自动初始化。此时，Angular会先去查找 ng-app指令作为你的应用程序的根。如果Angular发现了 ng-app指令，那么它将：

1. 加载与这个指令相关的模块。

2. 创建应用程序注入器。

3. 编译器将ng-app指令作为一个根去编译为对应的DOM树。在这里，你就可以告诉Angular应用程序，把哪部分DOM编译为Angular应用程序的一部分。

手动初始化

(可以解决IE低版本浏览器问题)

如果你想要去控制Angular应用程序的初始化过程，那么你可以使用手动引导启动的方法。Angular中也提供了手动绑定的api——bootstrap

angular.bootstrap(element, [modules], [config]);

element(必需)。要启动angular的根节点，一般为document，也可以是其他的的html的dom。
modules(数组，可选)。依赖的模块。
conifg(object,可选)。配置项，目前只有strictDi一个可配置项，默认为false,是否开启辅助debug。

看例子。

[html]view plain copy 
    
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title></title>  
   <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>  
 </head>  
 <body>  
   <div ng-controller="ctrl1">  
   {{myString}}  
   </div>  
   <script>  
     var app = angular.module('app',[]);  
     app.controller('ctrl1',['$scope',function($scope){  
       $scope.myString='hello world';  
     }])  
     angular.bootstrap(document,['app'],{strictDi: true});  
   
   </script>  
 </body>  
 </html>  