AngularJs Modules详解及示例代码

2024-05-06 14:52:12

字体：大中小

来源：转载

供稿：网友

一、什么是Module？

　　很多应用都有一个用于初始化、加载（wires是这个意思吗？）和启动应用的main方法。angular应用不需要main方法，作为替代，module提供有指定目的的声明式，描述应用如何启动。这样做有几项优点：

这过程是声明描述的，更加容易读懂。在单元测试中，不需要加载所有module，这对写单元测试很有帮助。额外的module可以被加载到情景测试中，可以覆盖一些设置，帮助进行应用的端对端测试（end-to-end test）。第三方代码可以作为可复用的module打包到angular中。 module可以通过任意顺序或并行加载（取决于模块执行的延迟性，due to delayed nature of module execution）。

二、The Basics（基础）

　　我们很迫切想知道如何让Hello World module能够工作。下面有几个关键的事情要注意：

module API（http://code.angularjs.org/1.0.2/docs/api/angular.Module）

注意的提及的在<html ng-app=”myApp”>中的myApp module，它让启动器启动我们定义的myApp module。

<!DOCTYPE HTML><html lang="zh-cn" ng-app="myApp"><head>  <meta charset="UTF-8">  <title>basics</title>  <style type="text/css">    .ng-cloak {      display: none;    }  </style></head><body><div class="ng-cloak">  {{'Kitty' | greet}}</div><script src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript">  var simpleModule = angular.module("myApp", []);  simpleModule.filter("greet", function () {    return function(name) {      return "Hello " + name + " !";    }  });</script></body></html>

三、（Recommended Setup）推荐设置

　　虽然上面的例子很简单，它不属于大规模的应用。我们建议将自己的应用按照如下建议，拆分为多个module：

　　这样划分的理由是，当我们在测试的时候，往往需要忽略那些让测试变得困难的初始化代码。通过将代码分成独立的module，在测试中就可以很容易地忽略那些代码。这样，我们就可以更加专注在加载相应的module进行测试。

　　上面的只是一个建议，可以随意地按照自己的需求制定。

四、Module Loading & Dependencies（模块加载和依赖）

　　module是配置（configuration）的集合，执行在启动应用的进程中应用的块（blocks）。在它的最简单的形式中，由两类block组成：

　　1.配置块（configuration blocks）：在provider注册和配置的过程中执行的。只有provider和constant（常量？）可以被注入（injected）到configuration blocks中。这是为了避免出现在service配置完毕之前service就被执行的意外。

上一篇：通过JS和PHP两种方法判断用户请求时使用的浏览器类型

下一篇：JS 拼凑字符串的简单实例