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 ...
随机推荐
- Windows下的UDP爆了10054--远程主机强迫关闭了一个现有的连接
原文地址:http://www.cnblogs.com/pasoraku/p/5612105.html 故事是这样的. 前几天在网上逛,看到了一个漂亮的坦克模型. 我觉得这个坦克可以做一个游戏,那需要 ...
- JS 关闭页面事件
主页面调用:<script src="<%=ResolveUrl("../JS/QuitJS.js") %>" type="text ...
- flex表格的使用
Flex中表格使用datagrid+columns两个组件构成,dagagrid中定义了表格的外观属性和数据源Columns中定义了表格的列名还有对应的字段,方便从数据源取得数据 数据源的赋值一般有两 ...
- 今天工作中遇到的问题!echart.js
echart.js 引用的时候, 配置文件和引用的echart.js 应该放在main.js的后面,带有window.onload的js后面.这样的话,不会阻止echar.js的渲染.
- 一个书店管理系统java
自己的第一个小程序 ps:书是在集合里面后面文件处理的有一点小问题,希望有人会给点意见 //客户类 import java.io.Serializable; public class Customer ...
- Mac 系统下的环境变量
1.查看电脑环境变量 -->echo $PATH 2. 新建环境变量 sudo vim ~/.bash_profile 输入密码 3. 按 I ,编辑新的环境变量地址,保存 退出 :w ...
- The Factory pattern
public class Factory { public static void main(String[] args) {//Client IFruit fruit=Factorytemp.get ...
- 一些不起眼但非常有用的 Vim 命令
保存文件并退出 说起来有些惭愧,我也是最近才学到这个命令
- java程序操作Geometry对象
Geometry 空间地理对象,Oracle中存储Geometry对象的字段类型是 MDSYS.SDO_GEOMETRY,在数据库中构建Geometry对象的方法: v_pointarray MDSY ...
- python中协程的使用示例
例子1 把字符串分割为列表 def line_splitter( delimiter = None ): print( 'ready to split' ) result = None while T ...