Javascript UI路由器：如果解析函数作为命名依赖项提供，则解析只执行一次

我一直在angular项目中广泛使用resolve，为了可读性，我想将所有resolve函数移动到独立的模块中（一些状态甚至可以共享相同的resolve函数，而不必重写它们）

因此，我有一个简单的例子：

angular.module("stream", [
  "resources.groups",
  "ui.router"
]).config(function ($stateProvider) {
  $stateProvider.state("stream", {
    url: ... ,
    views: ... ,
    resolve: {
      groups: function (groups) {
        console.log("Resolving groups");
        return groups.get();
      }
    }
  }
});

angular.module("conversations", [
  "resources.groups",
  "ui.router"
]).config(function ($stateProvider) {
  $stateProvider.state("conversations", {
    url: ... ,
    views: ... ,
    resolve: {
      groups: function (groups) {
        console.log("Resolving groups");
        return groups.get();
      }
    }
  }
});

在这种情况下，“解析组”将在每次状态从任何其他状态更改为流或对话时被记录（当然流和对话的子状态除外）。例如，

访问流（已解决组）->访问状态3->访问对话（已解决组）->访问流（已解决组）

然而，当我将其重构为以下内容时，解析现在仅在访问它所使用的任何状态时调用一次。例如，

visit state3->visit stream（组已解决）->visit conversations（此处或以后未解决）->visit state3->visit stream->visit conversations…

。导致此行为的原因如下：

angular.module("stream", [
  "resolves.groups",
  "ui.router"
]).config(function ($stateProvider) {
  $stateProvider.state("stream", {
    url: ... ,
    views: ... ,
    resolve: {
      groups: "resolveGroups"
    }
  }
});

angular.module("conversations", [
  "resolves.groups",
  "ui.router"
]).config(function ($stateProvider) {
  $stateProvider.state("conversations", {
    url: ... ,
    views: ... ,
    resolve: { groups: "resolveGroups" }
    }
  }
});

angular.module("resolves.groups", [
  "resources.groups"
]).factory("resolveGroups", function (groups) {
  return groups.get();
});

---

如何实现解析函数从外部服务共享和重用，但每次转换到使用解析函数的状态时，解析函数仍会执行？

服务方法的问题是AngularJS服务是单例的，因此它们只能（惰性地）实例化一次

但是，由于映射到

resolve

对象中的名称的可注入项只不过是简单的独立数据结构（字符串数组和末尾的函数），因此您可以在配置时以常量公开它们：

angular.module('myApp.resolvers')
  .constant('myAppResolvers', {
    groups: ['groups', function (groups) {
      return groups.get();
    }],
    myOtherThing: ['$http', 'myService', '$q', function ($http, myService, $q) {
      // code for resolving some other thing
    }]
  });

然后在您的配置中：

myApp.config('$stateProvider','myAppResovers', function ($stateProvider, myAppResolvers) {
  $stateProvider.state("stream", {
    url: ... ,
    views: ... ,
    resolve: {
      groups: myAppResolvers.groups
    }
}

这样就实现了代码重用