CODEWITHSUNDEEP
javascriptangularjs
lch
lch

Reputation: 4931

Angular: [$injector:unpr] Unknown provider:

routes.js

angular
        .module('main')
        .config(config);

    config.$inject = ['$routeProvider', '$httpProvider'];

    function config($routeProvider){

        $routeProvider
            .when('/', {
                templateUrl:'main/views/landing.client.view.html',
                controller:'MainController',
                controllerAs:'mainCtrl',
                resolve: {
                    orgTypes: orgTypes
                }
            })
            .otherwise({
                redirectTo:'/'
            });

    }


    function orgTypes($http){

        return $http
            .get('emrsvs/orgTypes')
            .then(function successCallBack(response){
                return response;
            }, function errorCallBack(error){
                console.log(error);
            });

    }

controller.js

 angular
        .module('main')
        .controller('MainController', MainController);

    MainController.$inject = ['$rootScope', '$timeout', 'orgTypes'];

    function MainController($rootScope, $timeout, orgTypes){

        var mainCtrl = this;
        mainCtrl.orgTypes = orgTypes;

    }

Error

[$injector:unpr] Unknown provider: orgTypesProvider <- orgTypes <- MainController

Here i am injecting a dependency 'orgTypes' from route to controller. It produced unknown provider error. Is there anything wrong with my sysntax? can someone find my mistake

Upvotes: 0

Views: 747

Answers (2)

georgeawg
georgeawg

Reputation: 48968

I can't see anything wrong if you inject the controller with the ng-view directive.

<div ng-app="main">
   <ng-view></ng-view>
</div>

Your code works in this JSFiddle.

In your router config, you inject orgTypes from a resolver function. The $routeProvider service injects resolvers as locals into controllers. That method works OK.

If you use the ng-controller directive to load MainController, you will get that error. The $compile service doesn't have access to those resolvers in that case.

Upvotes: 0

saikumar
saikumar

Reputation: 1051

you should include following code in routes.js , before orgTypes function definition 

angular.module('main')
        .factory('orgTypes', orgTypes);
    orgTypes.$inject = ['$http'];
/*You need to apply following changes also in controller*/
angular
    .module('main')
    .controller('MainController', MainController);

MainController.$inject = ['$rootScope', '$timeout', 'orgTypes'];

function MainController($rootScope, $timeout, orgTypes){

    var mainCtrl = this;
    orgTypes.then(function(response){
      mainCtrl.orgTypes = response;
    }) 

}

Upvotes: 1

Related Questions