angularJS中提供模块的概念,供我们把代码封装在模块单元中,使用模块能给我们带来的好处
- 保持全局命名空间的清洁
- 易于在不同应用间复用代码
-
demo.html <!doctype html> <html ng-app="freefedApp"> <head> <title>angular应用demo</title> <script src="angular.js"></script> <script src="app.js"></script> </head> <body> </body> </html> app.js /*声明module*/ angular.module('freefedApp',[]);
代码解读:
- angular.module(name,requires) 接收两个参数, 第一个是模块名称,第二个是依赖模块数组
-
上面通过ng-app指令模块名,自动在相应dom中建立angular应用模块,且一个页面中只能出现一次ng-app,如果需要定义多个应用模块,通过
angular.bootstrap(elment,modulename)手动关联启动,如下:demo.html <!doctype html> <html> <head> <title>angular应用demo</title> <script src="angular.js"></script> <script src="app.js"></script> </head> <body> <div id="userModule"> <h1>用户中心模块</h1> </div> <div id="newsModule"> <h1>新闻数据模块</h1> </div> </body> </html> app.js /*声明module*/ angular.module('userApp',[]); angular.module('newsApp',[]); /*手动启动关联到对应dom*/ angular.bootstrap(document.getElementById('userModule'),['userApp']); angular.bootstrap(document.getElementById('newsModule'),['newsApp']);