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：模块的更多相关文章

  1. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  2. AngularJS快速入门指南11：事件

    AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...

  3. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  5. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南10：DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  8. AngularJS快速入门指南04：指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  9. AngularJS快速入门指南02：介绍

    AngularJS是一个JavaScript框架.它可以通过<script>标记被添加到HTML页面中. AngularJS通过指令对HTML属性进行了扩展,然后通过表达式将数据绑定到HT ...

随机推荐

  1. Windows下的UDP爆了10054--远程主机强迫关闭了一个现有的连接

    原文地址:http://www.cnblogs.com/pasoraku/p/5612105.html 故事是这样的. 前几天在网上逛,看到了一个漂亮的坦克模型. 我觉得这个坦克可以做一个游戏,那需要 ...

  2. JS 关闭页面事件

    主页面调用:<script src="<%=ResolveUrl("../JS/QuitJS.js") %>" type="text ...

  3. flex表格的使用

    Flex中表格使用datagrid+columns两个组件构成,dagagrid中定义了表格的外观属性和数据源Columns中定义了表格的列名还有对应的字段,方便从数据源取得数据 数据源的赋值一般有两 ...

  4. 今天工作中遇到的问题！echart.js

    echart.js 引用的时候, 配置文件和引用的echart.js  应该放在main.js的后面,带有window.onload的js后面.这样的话,不会阻止echar.js的渲染.

  5. 一个书店管理系统java

    自己的第一个小程序 ps:书是在集合里面后面文件处理的有一点小问题,希望有人会给点意见 //客户类 import java.io.Serializable; public class Customer ...

  6. Mac 系统下的环境变量

    1.查看电脑环境变量   -->echo $PATH 2. 新建环境变量   sudo vim ~/.bash_profile  输入密码 3. 按 I ,编辑新的环境变量地址,保存 退出 :w ...

  7. The Factory pattern

    public class Factory { public static void main(String[] args) {//Client IFruit fruit=Factorytemp.get ...

  8. 一些不起眼但非常有用的 Vim 命令

    保存文件并退出 说起来有些惭愧,我也是最近才学到这个命令

  9. java程序操作Geometry对象

    Geometry 空间地理对象,Oracle中存储Geometry对象的字段类型是 MDSYS.SDO_GEOMETRY,在数据库中构建Geometry对象的方法: v_pointarray MDSY ...

  10. python中协程的使用示例

    例子1 把字符串分割为列表 def line_splitter( delimiter = None ): print( 'ready to split' ) result = None while T ...