angular.bootstrap手动加载angularjs模块

一、概述

描述:

  此方法用于手动加载angularjs模板

  (官方翻译:注意基于端到端的测试不能使用此功能来引导手动加载,他们必须使用ngapp。 angularjs会检测这个模板是否被浏览器加载或者加载多次并且在控制台给出警告在加载其他模块的时候,这防止了奇怪的结果,在实际应用中,angularjs在尝试其它的多个  实例来研究DOM)。

使用方法:

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

参数:

参数名称参数类型描述
elementDOMElementDOM元素
modulesArray要加载的模板
configObject配置选项的对象。

返回值:

  返回这个应用程序的新创建的injector 对象。

二、使用

使用angular.bootstrap完成模块的手动加载(一个页面多个ng-app时使用)

<html>

  <head>
    <script src="angular.js"></script>
    <script>

    // 创建moudle1
    var rootMoudle = angular.module('moudle1', []);
    rootMoudle.controller("controller1",function($scope){$scope.name="aty"});

    // 创建moudle2
    var m2 = angular.module('moudle2', []);
    m2.controller("controller2",function($scope){$scope.name="aty"});


    // 页面加载完成后,再加载模块
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("div1"),["moudle1"]);
      angular.bootstrap(document.getElementById("div2"),["moudle2"]);
    });

  </script>

  <head>
  <body>
    <div   ng-controller="controller1">div1:{{name}}</div>
    <div   ng-controller="controller2">div2:{{name}}</div>
  </body>

</html>