Get data before page load in angularJS

Question

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

Error: [$injector:unpr] Unknown provider: officeListProvider <- officeList <- myController http://errors.angularjs.org/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;
});

Community · Accepted Answer · 2017-05-23 12:16:35Z

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.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jul 29, 2015 at 16:36

Surya Chandra Rao Gandreddi

5567 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AVI Over a year ago

Thanks Surya, based on your suggestions, I updated the code. Now the console.log (data) [see above], prints the 1850 records as expected but how should I hook it up to $routeProvider.resolve() method. I want to load the drop down before the page initialize.

Surya Chandra Rao Gandreddi Over a year ago

load the drop down before the page initialises? what do you mean? the data is in client-side javascript and you need to import that into your html using AngularJS Controller - how to load data from resolve to controller, check this: odetocode.com/blogs/scott/archive/2014/05/20/…

AVI Over a year ago

I want to get data from database before page load in angular. Please see the URL below. tech-blog.maddyzone.com/javascript/get-data-page-load-angular.

AVI Over a year ago

I used the URL u mentioned , they use like - resolve: { message:...................................... and than inject the same in controller app.controller("newsController", function (message). See here name "message" is same in controller and routerProvider function but when I did the same [see the code i just updated] the injector service not able to recognize the provider.This is the error I get : Error: [$injector:unpr] Unknown provider: officeListProvider <- officeList <- myController

Alaksandar Jesus Gene · Accepted Answer · 2015-07-30 00:07:22Z

0

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

edited Jul 30, 2015 at 0:07

answered Jul 29, 2015 at 23:33

Alaksandar Jesus Gene

6,89113 gold badges61 silver badges92 bronze badges

1 Comment

Alaksandar Jesus Gene Over a year ago

Happy to help always.

Collectives™ on Stack Overflow

Get data before page load in angularJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related