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

angular的bootstrap方法

2024-09-17 23:12:42   217人阅读

　　使用 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方法


联系
我们