2-angular.bootstrap

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

使用方法：

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

参数：

参数名称参数类型描述
element DOMElement DOM元素
modules Array 要加载的模板
config Object 配置选项的对象。

返回值：

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

实例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="js/angular.min.js"></script>       
    </head>
    <body>
        <div ng-controller="WelcomeController">
           <span ng-bind="greeting"></span>
        </div>
        <script type="text/javascript">
            var app = angular.module('demo', []).controller('WelcomeController', function ($scope) {
                $scope.greeting = 'Welcome!';
            });
            angular.bootstrap(document, ['demo']);
        </script>
    </body>
</html>

等同于：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="js/angular.min.js"></script>       
    </head>
    <body ngApp="myApp">
        <div ng-controller="WelcomeController">
           <span ng-bind="greeting"></span>
        </div>
        <script type="text/javascript">
            var app = angular.module('myApp', []).controller('WelcomeController', function ($scope) {
                $scope.greeting = 'Welcome!';
            });
            //angular.bootstrap(document, ['demo']);
        </script>
    </body>
</html>
<html>
    <head>
        <script src="angular.js"></script>
        <script>
        // 创建moudle1
        var moudle1 = angular.module('moudle1', []);
        moudle1.controller("controller1",function($scope){$scope.name="aty"});
        
        // 创建moudle2
        var moudle2 = angular.module('moudle2', []);
        moudle2.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 id="div1"  ng-controller="controller1">div1:{{name}}</div>
        <div id="div2"  ng-controller="controller2">div2:{{name}}</div>
    </body>
</html>

 

posted @ 2017-06-08 14:29  发福大叔  阅读(212)  评论(0)  编辑  收藏  举报