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 ...
随机推荐
- 禁止VMware虚拟机与Host的时间同步
禁止VMware虚拟机与Host的时间同步 1. 查看虚拟机是否安装了 VMware Tools, 如果有安装,则将 VMware Tools 属性窗口的“选项”-->“其他选项”中“虚拟机与宿 ...
- 一个书店管理系统java
自己的第一个小程序 ps:书是在集合里面后面文件处理的有一点小问题,希望有人会给点意见 //客户类 import java.io.Serializable; public class Customer ...
- Json数据中的特殊字符处理
今天在项目中遇到一个问题,页面上的数据突然显示不出来了,查验后得知是Json数据出现了问题.使用JSON从后台向前台传输数据的时候,当数据本身含有一些特殊字符,会导致JSON数据的解析出错.如果内容中 ...
- LR11录制脚本时打不开浏览器，如何解决？
请教一下各位大神,我安装的LR11,在录制脚本的时候打不开浏览器,已经试过了网上的方法还是不行,以下是搜到的方法: 无法打开IE的主要原因是,LR的注册信息被修改了,所以无法找到IE的路径. 解决这个 ...
- 【线段树】bzoj1018 [SHOI2008]堵塞的交通traffic
线段树的每个叶子节点存一列. 每个节点维护六个域,分别是左上左下.左上右上.左上右下.左下右上.左下右下.右上右下在区间内部的连通性,不考虑绕出去的情况. 初始每个叶子的左上左下.右上右下是连通的. ...
- JavaScript 中 申明变量的方式--let 语句
let 语句 - 声明一个块范围变量. 语法 let 变量名 = 初始化值; 例子 "use strict"; let name = '赵敏'; (function opt(){ ...
- [LeetCode] 423 Reconstruct Original Digits from English
Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...
- Windows服务器安装配置PHP7.0环境图文教程
摘自http://www.111cn.net/phper/linux-php/109865.htm Windows服务器安装配置PHP7.0环境图文教程 www.111cn.net 更新:2016-0 ...
- JTA 深度历险 - 原理与实现
转自http://www.ibm.com/developerworks/cn/java/j-lo-jta/ 在 J2EE 应用中,事务是一个不可或缺的组件模型,它保证了用户操作的 ACID(即原子.一 ...
- html5+css3 制作音乐播放器
//css// body , html{ margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } .Mus ...