2-angular.bootstrap

最新推荐文章于 2021-03-17 17:18:17 发布

weixin_34124577

最新推荐文章于 2021-03-17 17:18:17 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/ms-grf/p/6962628.html

版权

描述：
　　此方法用于手动加载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>

转载于:https://www.cnblogs.com/ms-grf/p/6962628.html

weixin_34124577

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-angular.bootstrap

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

扫一扫