AngularJS权威教程第3章模块Module

灰太狼 2022-08-18 12:10 193阅读 0赞

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>
    
      
      <script src="lib/angular.js"></script>
      <script src="lib/angular-route.js"></script>
      
      <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');

效果如图：

![Center][]

[Center]: /images/20220731/6e39ba46e5d041ae9f2fb46fe5493913.png