AngularJS 1.3.13-服务提供商传递给UI路由器配置无法解析

Question

我知道我不能依赖工厂将其注入配置中，因为它们只接受提供者，据我所知，这只是工厂和服务继承的完全可自定义的服务。 所以我以为我会尝试创建一堆小型路由提供程序，这样我就不必在配置中的变量中添加通常重用的解析操作作为匿名函数，而不久后就会变得一团糟。

提供商

angular.module('project.app.service', [])

    .provider('UserAuthService', function () {

        this.$get = ['UserResource', function (UserResource) {

            return {
                getUser: getUser
            };

            function getUser() {
                 return UserResource.auth().$promise;
            }
        }];
    }),
...

包含提供商模块的路由

angular.module('project.app.route', ['project.app.service'])

.config(['$stateProvider', '$urlRouterProvider', 'UserAuthServiceProvider', 
    function ($stateProvider, $urlRouterProvider, UserAuthServiceProvider) { 

        $stateProvider

            ...

            .state('dashboard.index', {
                url: "/map",
                templateUrl: "templates/dashboard/map/map.html",
                controller: 'MapController',
                controllerAs: 'mapCtrl',
                resolve: {
                    UserAuth: UserAuthServiceProvider.getUser()
                }
            })
            ...
});

docs指出只能注入$ get函数，但是即使看起来应该可以工作，它也会引发此错误：

TypeError: UserAuthService.getUser is not a function

这似乎应该从文档和示例中使用，并应归功于下面的注释，以提供帮助和集思广益。

有没有单行的解析参数解决方案可以使此模块更具模块化，还是应该只将匿名函数放在ui-route配置的顶部，注入一个工厂，然后忘记它？

Answer 1

1. 仅应在应用程序使用其创建之前需要的任何东西配置/初始化（在module.config期间）时使用Provider来配置服务。 您不应在其他任何地方使用它。
2. 如果您的提供程序上没有任何可配置的内容（您只提供$get ，Angular会在运行时需要它时使用它来创建单例），那么就没有理由将其注入.config （您也可以通过简化使用module.factory而不是module.provider ）。
3. UI-Router将解析状态的resolve任何项目所需的依赖项。 当resolve项目是一个函数时，它将尝试通过参数名称（称为隐式注释）来解决该函数中的所有依赖项。 或者，您可以使用内联数组注释。

示例（使用隐式注释）

 angular.module('project.app.route', ['project.app.service'])
    .config(['$stateProvider', '$urlRouterProvider', 'UserAuthServiceProvider', 
        function ($stateProvider, $urlRouterProvider, UserAuthServiceProvider) {
            // configure your UserAuthServiceProvider, if there is anything.

            $stateProvider
                .state('dashboard.index', {
                    url: "/map",
                    templateUrl: "templates/dashboard/map/map.html",
                    controller: 'MapController',
                    controllerAs: 'mapCtrl',
                    resolve: {
                        UserAuth: function(UserAuthService) { return UserAuthService.getUser(); }
                    }
                });
    });

示例（使用内联数组注释）

 angular.module('project.app.route', ['project.app.service'])
    .config(['$stateProvider', '$urlRouterProvider', 'UserAuthServiceProvider', 
        function ($stateProvider, $urlRouterProvider, UserAuthServiceProvider) {
            // configure your UserAuthServiceProvider, if there is anything.

            $stateProvider
                .state('dashboard.index', {
                    url: "/map",
                    templateUrl: "templates/dashboard/map/map.html",
                    controller: 'MapController',
                    controllerAs: 'mapCtrl',
                    resolve: {
                        UserAuth: ['UserAuthService', function(UserAuthService) { return UserAuthService.getUser(); }]
                    }
                });
    });

您应使用哪一个（隐式或内联数组注释）？ 好吧，这取决于项目的构建方式。 如果您的源代码不是最小的（对于生产版本来说应该是最小的），或者您的构建管道中有一些模块可以自动将隐式转换为内联数组注释，请使用隐式。 否则，请使用内联数组。