码迷,mamicode.com
首页 > 其他好文 > 详细

angular的bootstrap方法

时间:2017-04-28 13:40:39      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:jquery   ack   this   meta   style   var   启动方式   使用   ctr   

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

标签:jquery   ack   this   meta   style   var   启动方式   使用   ctr   

原文地址:http://www.cnblogs.com/guofan/p/6773154.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!