您的位置：首页 > Web前端 > AngularJS

AngularJS权威教程第3章模块Module

2015-12-18 13:40 543 查看

AngularJS权威教程第3章模块Module

3.1.模块

在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

使用模块能给我们带来许多好处，比如：

保持全局命名空间的清洁；
编写测试代码更容易，并能保持其清洁，以便更容易找到互相隔离的功能；
易于在不同应用间复用代码；
使应用能够以任意顺序加载代码的各个部分。

AngularJS允许我们使用angular.module()方法来声明模块。

这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

//这个方法相当于AngularJS模块的setter方法，是用来定义模块的.
angular.module('myApp', []);

调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来引用myApp模块：

// 这个方法用于获取应用，这个方法相当于AngularJS模块的getter方法，用来获取对模块的引用。
angular.module('myApp')

2.参数
angular.module()参数如下。

name（字符串） name是模块的名称，字符串变量。

requires（字符串数组）

requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载。

3.示例代码如下

index,

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="css/app.css"/>
<meta name="viewport" content="width=device-width">
</head>
<body>

{{ clock }}
<div ng-controller="MyController">
<h5>Hello {{ clock.now }}</h5>
</div>

<!-- Library files -->
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
<!-- App files -->
<script src="js/filters.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/app.js"></script>
</body>
</html>

app.js

var app = angular.module('myApp', [
'myApp.services',
'myApp.directives',
'myApp.filters',
'myApp.controllers'
]);

controllers.js

angular.module('myApp.controllers', [])
.controller('MyController', function($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});

directives.js

angular.module('myApp.directives', []);

filters.js

angular.module('myApp.filters', []);

services.js

angular.module('myApp.services', [])
.value('version', '0.0.1');

效果如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

AngularJS权威教程 第3章 模块Module

AngularJS权威教程第3章模块Module