创建自定义提供程序angularjs

时间:2015-03-22 22:55:04

标签: javascript angularjs

我正在尝试创建一些路由来解析对其余api的调用 在页面加载之前。因为我无法注入使用创建的服务 app.factory(),我正在尝试创建一个提供程序来执行此操作,以便我可以在配置路由中使用它,但我是 得到Error: [$injector:unpr] Unknown provider: $http

我希望能够在mainFlow.api中为4个或5个端点调用提供程序 将在页面加载之前解决。我是否正确地采用这种方式?

我的代码:

service.js

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

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

config.js

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/')
                    }

                }
            })

然后我可以使用controller.js

中已解析的数据

controller.js

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

        $scope.choices = choiceService;
    }
]);

1 个答案:

答案 0 :(得分:0)

在没有必要的情况下,我在$http传递了service.js。我还在'$choiceServiceProvider' config.js传递'choiceServiceProvider'