我们一般写AngularJS时,会在html或者body、div、form等标签里面加上ng-app=”myApp”之类的,这实际上就是让angular自动加载,Angular会自动找到ng-app指令,并将写有ng-app的HTML元素里面的内容作为自己的管辖范围,也就是以该元素为根。这时系统只会找第一个ng-app,如果你的代码里面有多个ng-app的话,angular只理会第一个,后面的直接无视。
如果你的代码里面没有包含ng-app,你就只能手动加载angular了,就需要用到angular.bootstrap这个函数了。
angular.bootstrap函数有两个参数,第一个参数必须,第二个为可选参数。
使用方法:

  1. element(DOM元素):该DOM元素将作为angular的根
  2. modules(数组,数组里面的元素可以是字符、函数、数组):angular需要加载的各个模块的名字所构成的数组

返回值:为应用新建一个注入器。
示例代码如下:

      var app =angular.module("myApp",[]);
      var app2 =angular.module("myApp2",[]);
      var app3 =angular.module("myApp3",[]);
      console.log(app);
      app.controller('myCtrl', ['$scope',function($scope){
        $scope.test = "This is a test!"
      }]);
      app2.controller('myCtrl2', ['$scope',function($scope){
        $scope.test = "A test too!"
      }]);
      app3.controller('myCtrl3', ['$scope',function($scope){
        $scope.test = "I am from div3!"
      }]);

      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementsByName('boot'), ['myApp', 'myApp2']); 
        angular.bootstrap(document.getElementById("div3"),["myApp3"]);
      });

html代码

<html>
  <body>  
    <div name='boot' ng-controller="myCtrl">
      {{test}}
    </div>
    <div name='boot' ng-controller="myCtrl2">
      {{test}}
    </div>
    <div id='div3' ng-controller="myCtrl3">
      {{test}}
    </div>
  </body>  
</html>

运行结果如下:
angular.bootstrap
也可以利用下面的代码实现加载三个

      angular.element(document).ready(function() {
        angular.bootstrap(document), ['myApp', 'myApp2', 'myApp3']); 
      });

在做项目的实战中,手动加载angular完全没有必要。

随机文章

AngularJS加载方式和angular.bootstrap
AngularJS加载方式和angular.bootstrap

三星首次承认正在研发智能手表
三星首次承认正在研发智能手表

“太阳能墨水”印在纸上就可以发电哦
“太阳能墨水”印在纸上就可以发电哦

ubuntu终端“确定”窗口无法点击
ubuntu终端“确定”窗口无法点击

android常用的junit
android常用的junit

相关文章

Java基础第十四讲:字符串
Java基础第十四讲:字符串

IOS在Cyber Monday的销量额贡献比android大
IOS在Cyber Monday的销量额贡献比android大

在iPhone,iPad和iPod上的IOS7可以完美越狱啦
在iPhone,iPad和iPod上的IOS7可以完美越狱啦

苍井空可爱喝汤照
苍井空可爱喝汤照

黑莓官方催促twitter用户用回老版本客户端
黑莓官方催促twitter用户用回老版本客户端

oppo(欧珀)手机刷机图文教程
oppo(欧珀)手机刷机图文教程

内容分享:道招
本文链接:AngularJS加载方式和angular.bootstrap
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!