javascript - UI路由器: if resolve function is given as a named dependency,解析仅执行一次

Question

我一直在我的 Angular 项目中广泛使用解析，并且已经到了这样的程度，为了可读性，我想将所有解析函数移动到独立模块(某些状态甚至可以共享相同的解析函数，无需我重写它们)。

所以，我有一个简化的例子:

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 -> 访问对话(已解析组)-> 访问流(已解析组)

但是，当我将其重构为以下内容时，当我访问它所使用的任何状态时，解析现在只会被调用一次。例如，访问 state3 -> 访问流(组已解析) -> 访问对话(此处未解决或不再解析) -> 访问 state3 -> 访问流 -> 访问对话...。以下原因导致了此行为:

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();
});

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

Answer 1

服务方法的问题在于 AngularJS 服务是单例的，因此它们只会(惰性地)实例化一次。

但是，由于映射到 resolve 对象中的名称的注入(inject)只不过是简单的独立数据结构(字符串数组和末尾的函数)，因此您可以在配置中公开它们时间常数:

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
    }
}

这样就实现了代码重用。