javascript - Get data before page load in angularJS - Stack Overflow

admin管理员组

文章数量:1022777

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

Share Improve this question Follow edited Jul 29, 2015 at 22:36 C1pher 1,97266 gold badges3434 silver badges5252 bronze badges asked Jul 29, 2015 at 15:49 AVIAVI 34811 gold badge88 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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
});

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

Share Improve this question Follow edited Jul 29, 2015 at 22:36 C1pher 1,97266 gold badges3434 silver badges5252 bronze badges asked Jul 29, 2015 at 15:49 AVIAVI 34811 gold badge88 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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
});

本文标签： javascriptGet data before page load in angularJSStack Overflow