要启动一个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手动初始化

手动初始化

(可以解决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>

需要注意的是:

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应用程序。

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

绑定初始化

手动初始化

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

相关推荐