用于解析为可重用模块的打包函数

Question

我正在根据 John Papa's style guide（嗯，主要是）重构我的 Angular 应用程序，并且正在使我的应用程序更加模块化。我运行遇到了路由解析的问题。到目前为止，我使用了一个全局应用程序变量来保存我的 Angular 应用程序。我的服务也是这样的：

"use strict";
var usersService = app.service("usersService", ["$http", function ($http) {
    var userService = {};
    var endpoint = ClientSettings.authServiceUrl + "users";

    var get = function () {
        return $http.get(endpoint);
    };

    var getUser = function (id) {
        return $http.get(endpoint + "/" + id);
    };

    userService.get = get;
    userService.getUser = getUser;

    return userService;
}]);

usersService.loadUser = ["usersService", "authService", function(usersService, authService) {
    return usersService
        .getUser(authService.authentication.id)
        .then(function(response) {
            return response.data;
        });
}];

现在，当我尝试重构它时，我得到：

(function() {
    "use strict";

    angular
        .module("App.Auth")
        .service("usersService", usersService);

        usersService.$inject = ["$http"];

    function usersService($http) {
        var endpoint = ClientSettings.authServiceUrl + "users";

        var service = {
            get: get,
            getUser: getUser
        };
        return service;     

        var get = function () {
            return $http.get(endpoint);
        };

        var getUser = function (id) {
            return $http.get(endpoint + "/" + id);
        };
    }
})();

但是我遇到了 usersService.loadUser 的问题。这是一个仅用于解析的函数，如下所示：

.state("profile", {
    url : "/profile",
    controller : "profileController",
    templateUrl : "profile.html",
    resolve : {
        user : usersService.loadUser
    }
})

UsersService是Auth模块的一部分，但路由是在应用程序所在的模块中配置的。

我希望此模块提供一组用于解析的函数。我的目标是尽量减少代码重复，这肯定会为此做很多事情。

解决方案

这是基于下面的（已被接受）。

(function () {
    "use strict";

    angular
        .module("App.Auth")
        .provider("usersService", usersServiceProvider);

    function usersServiceProvider() {
        usersService.$inject = ["$http"];
        loadUser.$inject = ["usersService", "authService"];

        var provider = {
            $get: usersService,
            loadUser: loadUser
        }
        return provider;

        function usersService($http) {
            var endpoint = ClientSettings.authServiceUrl + "users";

            var service = {
                get: get,
                getUser: getUser
            };
            return service;

            var get = function () {
                return $http.get(endpoint);
            };

            var getUser = function (id) {
                return $http.get(endpoint + "/" + id);
            };
        }

        function loadUser(usersService, authService) {
            return usersService
                .getUser(authService.authentication.id)
                .then(function (response) {
                    return response.data;
                });
        }
    }
})();

NOTE: If you're using ngAnnotate, you will have to manually specify /*@ngInject*/ for injectable functions (loadUser in this case) as it doesn't seem to recognize it. At least at the time of writing this.

然后您将 provider 注入 config 函数并访问您的 resolve-ready 函数，如下所示：

.state("profile", {
    url : "/profile",
    controller : "profileController",
    templateUrl : "profile.html",
    resolve : {
        user : usersServiceProvider.loadUser
    }
})

之所以可行，是因为虽然 service 在 config 时不可用，但在解析 resolve 时可用。

usersServiceProvider 中也不需要 resolve-ready 函数，只要它是 provider。那是因为它是 config 阶段唯一可用的可注射类型的提供者。我这样做是因为它允许我将相关功能保留在同一个地方。

Answer 1

出于实际原因，在单个服务中保存解析器方法是不好的。状态在 config 中定义，您没有注入 usersService，那是 resolve 进行服务注入。所以上面的代码可以用这个

resolve : {
    user : function (usersService, $injector) {
        return $injector(usersService.loadUser);
    }
}

看起来重构走错了路。

不过，这可以通过将usersService做成provider服务来避免，所以usersServiceProvider可以注入config，usersServiceProvider.loadUser可以用作解析器。

My goal is to minimize code duplication and this would certainly do a lot for that.

通过在 usersService 中完成常见工作并将解析器保留在单独的服务中来最小化它。将 loadUser 打包成 usersService.

没有任何好处（更像是它的反面）

用于解析为可重用模块的打包函数

Packing functions meant for resolve into a reusable module

javascript

design-patterns

angularjs

angular-routing

angular-ui-router

解决方案