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 ?