Get data before page load in angularJS
I am trying to extract a dropdown before page load using angular $ http. I tried several combinations, but it kept 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'm only a few weeks into angular, so I apologize for 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;
});
source to share
In the controller, you should only call officeList. Here is a working JSFIDDLE . I also have a webapi example 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
});
source to share
The error says "officeListProvider" is missing or not visible, you need to add it as a dependency.
Try changing below:
var ctrl = angular.module('myApp.controllers', []);
to
var ctrl = angular.module('myApp.controllers', ['myApp.services']);
and also please use the same service name either srvOfficeList or officeList and also check your factory service, this is not correct - example: AngularJS: factory $ http service
Hope this solves the problem.
Please try to create a CodePen (or a similar tool) at the time of posting the question so the answer can be tried / fixed there and shared with you.
source to share