AngularJS 中 module 的依赖性声明与注入

在 AngularJS 中，模块（module）是一个可以重用的代码块，它包含了组件、服务、指令等等。模块可以被其他模块依赖，这个依赖关系可以理解为一种依赖注入（dependency injection）的方式。本文将介绍 AngularJS 中 module 的依赖性声明与注入。

依赖性声明

在 AngularJS 中，依赖性声明是通过 module 的 requires 方法来实现的。requires 方法接受一个数组参数，数组中包含了该模块所依赖的其他模块的名称。例如：

angular.module('myApp', ['ngRoute', 'ngResource']);

上面的代码声明了一个名为 myApp 的模块，它依赖于 ngRoute 和 ngResource 两个模块。

需要注意的是，模块的依赖关系是一个有向无环图（DAG），如果出现循环依赖，将会导致程序出现问题，因此需要避免出现循环依赖。

依赖注入

依赖注入是一种将依赖关系从代码中分离出来的技术，它可以使得代码更加模块化、可维护性更高。在 AngularJS 中，依赖注入是通过将依赖对象作为参数传递给控制器、指令、服务等等的构造函数来实现的。

例如，在控制器中注入 $scope 和 myService 两个依赖：

angular.module('myApp').controller('myController', function($scope, myService) {
  // ...
});

在上面的代码中，$scope 和 myService 都是由 AngularJS 框架自动注入的。AngularJS 会根据依赖关系图自动将依赖对象传递给控制器构造函数中的参数。

需要注意的是，AngularJS 可以自动识别依赖对象的名称，因此在参数名称中使用特定的名称并不是必需的。例如，下面的代码是等效的：

angular.module('myApp').controller('myController', function(a, b) {
  // ...
});

上面的代码中，a 和 b 分别对应 $scope 和 myService。

示例代码

下面是一个简单的示例代码，它演示了如何在 AngularJS 中使用依赖性声明和依赖注入：

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

angular.module('myApp').config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'homeController'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'aboutController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

angular.module('myApp').controller('homeController', function($scope) {
  $scope.message = 'Hello, world!';
});

angular.module('myApp').controller('aboutController', function($scope) {
  $scope.message = 'This is the about page.';
});

上面的代码中，我们声明了一个名为 myApp 的模块，它依赖于 ngRoute 模块。然后我们在 config 方法中配置了路由，并在两个控制器中注入了 $scope 对象。

总结

本文介绍了 AngularJS 中 module 的依赖性声明与注入。通过使用依赖性声明和依赖注入，我们可以更加方便地管理模块之间的依赖关系，使得代码更加模块化、可维护性更高。在编写 AngularJS 应用程序时，我们应该充分利用这些技术来提高代码的质量和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658e965beb4cecbf2d4767f9