puffin
puffin

Reputation: 1351

Creating a custom provider angularjs

I am trying to create some routing that will resolve calls to my rest api before the page loads. Because I can't inject a service created using app.factory(), I am attempting to create a provider to do this so I can use it in my config routing, but I'm getting Error: [$injector:unpr] Unknown provider: $http

I want to be able to call the provider in mainFlow.api for 4 or five endpoints that will resolve before the page loads. Am I going about this the correct way?

My code:

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

                }
            })

Then I can use the resolved data in controller.js

controller.js

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

        $scope.choices = choiceService;
    }
]);

Upvotes: 1

Views: 1700

Answers (1)

puffin
puffin

Reputation: 1351

I was passing $http in service.js when there was no need. I was also passing in '$choiceServiceProvider' in config.js when it should have been just 'choiceServiceProvider'

Upvotes: 1

Related Questions