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

您應使用哪一個（隱式或內聯數組注釋）？ 好吧，這取決於項目的構建方式。 如果您的源代碼不是最小的（對於生產版本來說應該是最小的），或者您的構建管道中有一些模塊可以自動將隱式轉換為內聯數組注釋，請使用隱式。 否則，請使用內聯數組。