首页 > 代码库 > angular的bootstrap方法

angular的bootstrap方法

  使用 angular 写程序的开发都知道,要想使用 angular 应用能够运行,需要在页面中 “登录” 它,我们常用的方法是这样的:

<!DOCTYPE html>
<html ng-app=‘myApp‘>
    <head>
        <meta charset=‘utf-8‘>
        <script src=‘angular.js‘></script>
    </head>
    <body>
        <div id=‘text‘ ng-controller=‘myCtrl‘></div>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                console.log(1);
            })
        </script>
    </body>
</html>

  使用 ng-app 指令,让 angular 知道我们在调用它。

  除了这种指令调用外,还有另一种 js 文件的启动方式,就是使用 angular 自带的 bootstrap 方法来实现启动,省却了页面中的 ng-app 指令。

  like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘>
        <script src=‘angular.js‘></script>
        <script src=‘jquery-1.11.3.js‘></script>
    </head>
    <body>
        <div id=‘text‘ ng-controller=‘myCtrl‘></div>
        <div id=‘text2‘ ng-controller=‘myCtrl2‘></div>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                console.log(1);
            })
            
            var app2 = angular.module(myApp2, []);
            app2.controller(myCtrl2, function ($scope) {
                console.log(2);
            })
            
            $(document).ready(function () {
                angular.bootstrap($(#text), [app.name]);
                angular.bootstrap($(#text2), [app2.name]);
            });            
        </script>
    </body>
</html>

  这样,我们可以定义多个 module 来执行不同的功能,自己在自己的作用域中,不会出现一个大 module 里好多变量名称,而且也不会出现变量污染的情况,怎么样,是不是很 fashion ?

angular的bootstrap方法