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

要启动一个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应用程序的一部分。

angular绑定初始化及bootstrap手动初始化_第1张图片

手动初始化

(可以解决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
  1. >  
  2. <html>  
  3. <head>  
  4.   <title>title>  
  5.   <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js">script>  
  6. head>  
  7. <body>  
  8.   <div ng-controller="ctrl1">  
  9.   {{myString}}  
  10.   div>  
  11.   <script>  
  12.     var app = angular.module('app',[]);  
  13.     app.controller('ctrl1',['$scope',function($scope){  
  14.       $scope.myString='hello world';  
  15.     }])  
  16.     angular.bootstrap(document,['app'],{strictDi: true});  
  17.   
  18.   script>  
  19. body>  
  20. html>  

需要注意的是:

1,angular.bootstrap必须是在element参数所指向的dom树加载完毕后才能调用,所以通常我们会在$(document).ready()后执行。此处因为我们的script是放在body尾部,所以不存在问题。

2,angular.bootstrap只会绑定第一次加载的对象。

3,后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。

4,当你手动启动你的应用程序的时候,你是不可以再去使用 ng-app 指令的

把我们的应用程序名称(上例中就是模块app的名称“app”)通过injector注入器 注入到了angular.bootstrap方法中的第二个参数中去。需要注意的是,angular.bootstrap 它不动态去创建模块,所以当你把它当做参数传递的时候,你必须自己去创建你的模块。

你应该在你定义了和加载了你的module之后再去调用 angular.bootstrap() 方法。你不可以在angular.bootstrap()  调用之后再去增加controller, service, directives等等…

你的代码应该遵循这样的顺序:

1. 当你的所有文件,代码都加载完毕之后,去找到你的根元素(要作为Angular应用程序的那个元素),通常,我们都是将文档(document)作为的我们的根。

2. 调用 angular.bootstrap,去编译为一个可以进行双向绑定的可执行的Angular应用程序。




你可能感兴趣的:(angularJS)