Javascript 创建自定义提供程序angularjs

我正在尝试创建一些路由来解析对RESTAPI的调用 在页面加载之前。因为我无法注入使用创建的服务 app.factory（），我正在尝试创建一个提供程序来执行此操作，以便在配置路由中使用它，但我 获取

错误：[$injector:unpr]未知提供程序：$http

我希望能够在

mainFlow.api

中为4或5个端点调用提供程序 这将在页面加载之前解决。我这样做对吗

我的代码：

service.js

config.js

---

我在

service.js

中传递

$http

，当时不需要。我还在

config.js

中传递

“$choiceServiceProvider”

，而它应该是

“choiceServiceProvider”

为什么不将choiceServiceProvider注入配置？为什么要将choice而不是choiceService注入控制器？因为解析完成后，我应该能够访问.state（）中指定的控制器中的

choice

和

other\u choice

。我已尝试将

choiceServiceProvider

传递到.config中，但这没有任何区别。此外，我不想在控制器中调用choiceService.get（'/api/some choice/'）。我希望在控制器可用之前解析数据，然后我可以在控制器中使用解析的数据。基本上，我不想在页面准备好后调用我的api。

var mainApp = angular.module('mainApp');

mainApp.provider('choiceService', ['$http', function($http) {
    return {
        $get: function() {
            return {
                get: function(url) {
                    return $http.get(url);
                }
            };
        }
    };
}]);

var mainApp = angular.module('mainApp', [
    'ui.router'
]);

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

        $stateProvider
            .state('mainFlow', {
                abstract: true,
                url: '/base',
                template: '<ui-view/>'
            })
            .state('mainFlow.choose-main', {
                url: '',
                templateUrl: '/choose_main.html',
            })
            .state('mainFlow.contact', {
                controller: 'ContactFormController',
                url: '/contact-details',
                templateUrl: '/panel_contact_info.html',
            })
            .state('mainFlow.api', {
                url: '/about-your-api',
                controller: 'ApiFormController',
                templateUrl: '/panel_about_your_api.html',
                resolve: {
                    choice: function(choiceServiceProvider) {

                        return choiceServiceProvider.get('/api/yes-no-choice/');
                    },
                    other_choice: function(choiceServiceProvider){
                        return choiceServiceProvider.get('/api/my-other-choice/')
                    }

                }
            })

var mainApp = angular.module('mainApp');
mainApp.controller('ApiFormController', [
    '$scope', 
    '$state',
    'choiceService',
    function($scope, $state, choiceService) {

        $scope.choices = choiceService;
    }
]);