AngularJS快速入门指南12：模块
AngularJS模块定义了一个application。
模块是一个application中不同部分的容器。
application中的所有控制器都应该属于一个模块。
带有一个控制器的模块
下面这个application（"myApp"）包含一个控制器（"myCtrl"）：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div> <script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script> </body>
</html>
在JS文件中定义模块和控制器
在AngularJS applications中，我们通常会将模块和控制器定义到不同的JavaScript文件中。
在下面这个例子中，"myApp.js"包含了一个application的模块定义，"myCtrl.js"包含了控制器的定义：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div> <script src="myApp.js"></script>
<script src="myCtrl.js"></script> </body>
</html>
myApp.js代码：
var app = angular.module("myApp", []);
 |
这里的参数[]可以被用来指定模块的依赖项（即需要加载的其它模块） |
|---|
myCtrl.js代码：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Global Namespace中的函数污染
在JavaScript中要尽量避免使用全局函数。因为全局函数容易被其它的JavaScript代码改写或销毁。
AngularJS模块的定义减少了出现这种问题的风险，尽量将函数定义到AngularJS模块中。
何时加载Library？
|
在我们所有的示例代码中，AngularJS library都是在HTML文档的head部分被加载的。 |
|---|
建议将脚本的引用放到<body>元素的最后。但你还是会看到许多的AngularJS示例代码将library的引用放在文档的head部分，这仅仅只是为了在library被加载后对angular.module的访问进行编译。
另一个解决方法是将AngularJS library的引用放到<body>元素的最后，你自己的AngularJS脚本代码之前：
<!DOCTYPE html>
<html>
<body> <div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script> </body>
</html>
AngularJS快速入门指南12：模块的更多相关文章
- AngularJS快速入门指南13：表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
- AngularJS快速入门指南11：事件
AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...
- AngularJS快速入门指南01：导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南10：DOM节点
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...
- AngularJS快速入门指南04：指令
AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...
- AngularJS快速入门指南02：介绍
AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...
随机推荐
- 按Enter键触发事件
1.document.onkeydown=function(e){ var keycode=document.all?event.keyCode:e.which; if(k ...
- OD使用教程10
首先载入程序,然后Ctrl+N打开输入输出表 然后直接输入要找到函数,找到之后下断点,右键-在每个参考上设置断点 然后运行程序来到第一个断点处 然后f8走,开始找注册码没找到就换一个函数,然后看 ...
- Android中的桌面快捷方式
一.判断是否已有快捷方式 private String getAuthorityFromPermission(Context context, String permission){ if (perm ...
- Centos 7下搭建WordPress
1,首先安装MySQL. http://www.cnblogs.com/zyh120/p/6066983.html 2,继续安装httpd,php,php-mysql这3个服务. [root@loca ...
- android开源系列之——xUtils 开源库
http://blog.csdn.net/lijunhuayc/article/details/40585607
- Excel里内嵌在线翻译
本来寻思着继续写点系统运行日志跟踪技术的,但早晨哥家领导从单位打来电话,让帮助她的闺蜜搞一个excel翻译的问题,总部IT搞不定.我过去是用excel做了几年工作,却都是些数学计算,跟翻译也扯不上啊: ...
- Object-C内存管理－对象引用计数的特例
看到OC中内存管理这块,其中的引用计数部分,部分10.5上的EBOOK示例已经在10.9上不能运行正确了,比如下面的代码: NSString * str1 = @"string 1" ...
- Java学习笔记一——安装JDK并配置环境变量
下载安装JDK1.8 在官网上下载JDK,官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...
- andriod studio
初衷:使用andriod的webview调用html页面,生成app. AVD注意细节: RAM : 1G VM heap:228MB Graphics:software - GLES 2.0 存在的 ...
- android wifi 获取扫描结果
1.1 framework部分: 1.2 supplicant部分: hdd_cfg80211_scan_done_callback -> wlan_hdd_cfg80211_update_bs ...