AngularJS: Factory is always undefined when injected into a controller
I am trying a simple example AddressBook Angular app. I have a factory that returns an array of records and it is displayed as a list using a list controller
angular.module('abModule', ['ngRoute'])
.factory('AddressBook', function() {
var address_book = [
{
"id": 1,
"first_name": "John",
"last_name": "Doe",
"age": 29
},
{
"id": 2,
"first_name": "Anna",
"last_name": " Smith",
"age": 24
},
{
"id": 3,
"first_name": "Peter",
"last_name": " Jones",
"age": 39
}
];
alert('inside factory function');
return {
get: function() {
return address_book
}
};
})
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'list_controller',
templateUrl:'list.html'
})
.when('/add', {
controller:'add_controller',
templateUrl:'add.html'
})
.otherwise({
redirectTo:'/'
});
})
.controller('list_controller',['$scope', function ($scope, AddressBook) {
$scope.address_book = AddressBook;
}])
.controller('add_controller',['$scope', function ($scope,AddressBook) {
//$scope.entry = {};
$scope.save = function() {
AddressBook.set(
{
"id": $scope.address_book.length +1,
"first_name":$scope.entry.firt_name,
"last_name":$scope.entry.last_name,
"age":$scope.entry.age
}
);
};
}]);
Here 'AddressBook' is always undefined inside 'list_controller'. Any idea where I am going wrong? Any help is appreciated.
source to share
You are not commenting AddressBook
for your DI
.controller('list_controller',['$scope', function ($scope, AddressBook) {
$scope.address_book = AddressBook;
}])
it should be:
.controller('list_controller',['$scope', 'AddressBook', function ($scope, AddressBook) {
$scope.address_book = AddressBook;
}])
Ditto for the other controller.
source to share
Another approach is to use a declaration with a declaration according to your dependencies, which are used in the same order as your function arguments shown below. This helps in injecting the correct services after minifying the code.
var App = angular.module('myApp',[]);
App.controller('myCtrl',myCtrl);
//inject your dependencies;
myCtrl.$inject = ["$scope", "AddressBook","anotherService"] //
function myCtrl($scope,AddressBook,anotherService){
.....
}
Note. Service names will be renamed after minification and can mess up your application
source to share
Another possible reason for always getting undefined in a factory variable is incorrect mapping of declared dependencies to the function parameter list. For example:.
var loginCtrl = loginModule.controller("loginController",
['$scope', '$window', 'notificationMessage',
function ($scope, $window, serverDataConvertor, notificationMessage) {
// notificationMessage is undefined because serverDataConvertor factory is not a declared dependency
// controller logic comes here
}
Unfortunately Angular does not issue any warnings or errors, which can be very frustrating, especially when the list of dependencies is large.
source to share