AngularJS 如何在 app.config 中注入服务

在本文中，我们将介绍如何在 AngularJS 的 app.config 中注入服务。在 AngularJS 中，app.config 用于配置模块加载前的操作，比如在应用启动前，我们可以配置路由、设置默认参数等。

阅读更多：AngularJS 教程

什么是服务

在 AngularJS 中，服务用于组织代码逻辑，并提供可复用的功能。服务作为一个单例对象，在整个应用中可以被多个组件共享和调用。常见的服务有http、route等。服务的好处是可以将复杂的业务逻辑封装起来，使得代码更易于管理和维护。

在 app.config 中注入服务

在 app.config 中注入服务有一些限制，因为这个阶段还未完成依赖注入的过程。但是，我们可以通过一些技巧来实现在 app.config 中注入服务。

下面是一个示例，展示了如何在 app.config 中注入一个自定义的服务：

angular.module("myApp", [])
  .config(["provide", function(provide) {
    provide.decorator("http", ["delegate", "myService", function(delegate, myService) {
      // 在 http 服务上添加一个拦截器delegate.interceptors.push(function() {
        // 在请求发送前执行一些操作
        myService.doSomething();
      });
      return $delegate;
    }]);
  }]);

上述代码中，我们使用 provide.decorator 方法来装饰（decorate）http 服务，为其添加一个拦截器。在拦截器中，我们可以调用 myService 的某个方法，实现在请求发送前执行一些操作。

示例说明

假设我们有一个名为 myService 的服务，它提供了一个名为 doSomething 的方法。而我们想在每个 HTTP 请求发送前调用这个方法进行一些操作。我们可以通过在 app.config 中注入该服务来实现这个需求。

首先，我们需要在 app.config 中使用 provide.decorator 方法装饰http 服务，并为其添加一个拦截器。在拦截器中调用 myService 的 doSomething 方法即可。

以上述示例代码为例，我们调用 myService 的 doSomething 方法，实现在每个请求发送前打印一条日志：

angular.module("myApp", [])
  .config(["provide", function(provide) {
    provide.decorator("http", ["delegate", "myService", function(delegate, myService) {
      delegate.interceptors.push(function() {
        // 在请求发送前打印日志
        myService.doSomething();
      });
      returndelegate;
    }]);
  }])
  .service("myService", function() {
    this.doSomething = function() {
      console.log("Doing something before sending request...");
    };
  });

在上述代码中，我们创建了一个名为 myService 的服务，并定义了其中的 doSomething 方法。在 app.config 中装饰 $http 服务，并在拦截器中调用 myService 的 doSomething 方法，在控制台打印出”Doing something before sending request…”的日志。

总结

通过使用 provide.decorator 方法，我们可以在 AngularJS 的 app.config 中注入服务。本文通过一个示例展示了如何在 app.config 中装饰http 服务，并调用自定义服务的方法实现在请求发送前执行一些操作。这种技巧可以使我们更灵活地配置应用的初始状态，并根据需求进行一些预处理操作。希望本文对你理解在 app.config 中注入服务有所帮助。