I am trying to fetch a drop downlist before the page load using angular $http. I tried few binations but it keep on giving the same error:

Error: [$injector:unpr] Unknown provider: officeListProvider <- officeList <- myController .4.3/$injector/unpr?p0=officeListProvider%20%3C-%20officeList%20%3C-%20myController

I am few weeks old in angular so please pardon in case of any silly mistakes.

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../home/goEeUpdateAngular.obj', {
        templateUrl: '/employee_update_angular.jsp', 
        controller: 'myController',
        resolve: {
            officeList: function(officeListFactory) {
                return officeListFactory.getOfficeList();
            }
        }
    });   
}]);

myApp.factory('officeListFactory', function($http, $window) {
    $window.alert("Hi");
    var factoryResult = {
        getOfficeList: function() {
            var promise = $http({
                method: 'GET', 
                url: '../../home/goOfficesList.obj' 
            }).success(function(data, status, headers, config) {
                console.log (data);
                return data;
            });

            return promise;
        }
    }; 

    console.log (factoryResult.getOfficeList());
    return factoryResult;
});

myApp.controller('myController',function ($scope,officeList) {
    $scope.officeListFactory = officeListFactory.data;
});

I am trying to fetch a drop downlist before the page load using angular $http. I tried few binations but it keep on giving the same error:

Error: [$injector:unpr] Unknown provider: officeListProvider <- officeList <- myController http://errors.angularjs/1.4.3/$injector/unpr?p0=officeListProvider%20%3C-%20officeList%20%3C-%20myController

I am few weeks old in angular so please pardon in case of any silly mistakes.

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../home/goEeUpdateAngular.obj', {
        templateUrl: '/employee_update_angular.jsp', 
        controller: 'myController',
        resolve: {
            officeList: function(officeListFactory) {
                return officeListFactory.getOfficeList();
            }
        }
    });   
}]);

myApp.factory('officeListFactory', function($http, $window) {
    $window.alert("Hi");
    var factoryResult = {
        getOfficeList: function() {
            var promise = $http({
                method: 'GET', 
                url: '../../home/goOfficesList.obj' 
            }).success(function(data, status, headers, config) {
                console.log (data);
                return data;
            });

            return promise;
        }
    }; 

    console.log (factoryResult.getOfficeList());
    return factoryResult;
});

myApp.controller('myController',function ($scope,officeList) {
    $scope.officeListFactory = officeListFactory.data;
});

• javascript
• angularjs

2 Answers 2

The error says "officeListProvider" is not present or not visible, you need to add it as dependency.

Please try the below change:

var ctrl = angular.module('myApp.controllers', []);

to

var ctrl = angular.module('myApp.controllers', ['myApp.services']);

and also please use the same service name it is either srvOfficeList or officeList, and also check your service factory, it is not right - example:AngularJS : factory $http service

Hope it will fix the issue.

Please try to create a CodePen (or similar tool) while posting the question, so that the Answer can tried/fixed in there and shared back with you.

In controller you should call only officeList. Here is the working JSFIDDLE. I too sample webapi instead of your url

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../home/goEeUpdateAngular.obj', {
        templateUrl: '/employee_update_angular.jsp', 
        controller: 'myController',
        resolve: {
            officeList: function(officeListFactory) {
                return officeListFactory.getOfficeList();
            }
        }
    });   
}]);

myApp.factory('officeListFactory', function($http, $window) {
    $window.alert("Hi");
    var factoryResult = {
        getOfficeList: function() {
            var promise = $http({
                method: 'GET', 
                url: '../../home/goOfficesList.obj' 
            }).success(function(data, status, headers, config) {
                console.log (data);
                return data;
            });

            return promise;
        }
    }; 

    console.log (factoryResult.getOfficeList());
    return factoryResult;
});

myApp.controller('myController',function ($scope,officeList) {
    $scope.officeListFactory = officeList.data; //changes are made here
});