Angularjs--factory is undefined - angularjs

Question

I am developing an application using MVC and angularjs and very new to angularjs. The code uses lot of different factory defined in separate js files and those factories are injected correctly in modules but still I see 'factory not defined error'
The app.js is below:-
(function () {
'use strict';
angular.module('MyApp', ['common.core', 'common.ui'])
.run(run);
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http','membershipService'];
function run($rootScope, $location, $cookieStore, $http) {
// handle page refreshes
$rootScope.repository = $cookieStore.get('repository') || {};
if ($rootScope.repository.loggedUser) {
$http.defaults.headers.common['Authorization'] = $rootScope.repository.loggedUser.authdata;
}
}
})();
Factory is defined in separate file like this:-
(function (app) {
'use strict';
var app = angular.module('MyApp');
app.factory('membershipService', membershipService);
membershipService.$inject = ['apiService', 'notificationService','$http', '$base64', '$cookieStore', '$rootScope'];
function membershipService(apiService, notificationService, $http, $base64, $cookieStore, $rootScope) {
var service = {
login: login,
register: register,
saveCredentials: saveCredentials,
removeCredentials: removeCredentials,
isUserLoggedIn: isUserLoggedIn
}
function login(user, completed) {
apiService.post('/api/account/authenticate', user,
completed,
loginFailed);
}
function register(user, completed) {
apiService.post('/signup', user,
completed,
registrationFailed);
}
function saveCredentials(user) {
var membershipData = $base64.encode(user.username + ':' + user.password);
$rootScope.repository = {
loggedUser: {
username: user.username,
authdata: membershipData
}
};
$http.defaults.headers.common['Authorization'] = 'Basic ' + membershipData;
$cookieStore.put('repository', $rootScope.repository);
}
function removeCredentials() {
$rootScope.repository = {};
$cookieStore.remove('repository');
$http.defaults.headers.common.Authorization = '';
};
function loginFailed(response) {
notificationService.displayError(response.data);
}
function registrationFailed(response) {
notificationService.displayError('Registration failed. Try again.');
}
function isUserLoggedIn() {
return $rootScope.repository.loggedUser != null;
}
return service;
}
})(angular.module('common.core'));
The controller is defined like this:-
(function (app) {
'use strict';
var app = angular.module('MyApp');
app.controller('SignUpController', SignUpController);
SignUpController.$inject = ['$scope', 'membershipService', 'notificationService', '$rootScope', '$location'];
function SignUpController($scope, membershipService, notificationService, $rootScope, $location) {
$scope.pageClass = 'page-login';
$scope.register = register;
$scope.user = {};
};
function register() {
membershipService.register($scope.user, registerCompleted)
}
function registerCompleted(result) {
if (result.data.success) {
membershipService.saveCredentials($scope.user);
notificationService.displaySuccess('Hello ' + $scope.user.username);
$scope.userData.displayUserInfo();
$location.path('/');
}
else {
notificationService.displayError('Registration failed. Try again.');
}
}
})(angular.module('common.core'));
The script are loaded like below:-
bundles.Add(new ScriptBundle("~/bundles/Controllers").Include(
"~/Scripts/Controllers/app.js",
"~/Scripts/Services/apiService.js",
"~/Scripts/Services/notificationService.js",
"~/Scripts/Services/membershipService.js",
"~/Scripts/Services/fileUploadService.js",
"~/Scripts/Controllers/SignUpController.js"
The 'register' function throws an error 'membershipservice not defined', what am i doing wrong? Please help.

Answer 1

I'm seeing this:
run.$inject = ['$rootScope', '$location', '$cookieStore', '$http','membershipService'];
function run($rootScope, $location, $cookieStore, $http) {
// handle page refreshes
You are missing the membershipService in the function parameter list.
Also this:
SignUpController.$inject = ['$scope', 'membershipService', 'notificationService', '$rootScope', '$location'];
function SignUpController($scope, membershipService, notificationService, $rootScope, $location) {
$scope.pageClass = 'page-login';
$scope.register = register;
$scope.user = {};
};
function register() {
membershipService.register($scope.user, registerCompleted)
}
function registerCompleted(result) {
if (result.data.success) {
membershipService.saveCredentials($scope.user);
notificationService.displaySuccess('Hello ' + $scope.user.username);
$scope.userData.displayUserInfo();
$location.path('/');
}
else {
notificationService.displayError('Registration failed. Try again.');
}
}
This will never work, because you are defining the function outside of the function where you pass the membershipService into.
The SignUpController should look something like:
function SignUpController($scope, membershipService, notificationService, $rootScope, $location) {
$scope.pageClass = 'page-login';
$scope.register = register;
$scope.user = {};
function register() {
membershipService.register($scope.user, registerCompleted)
}
function registerCompleted(result) {
if (result.data.success) {
membershipService.saveCredentials($scope.user);
notificationService.displaySuccess('Hello ' + $scope.user.username);
$scope.userData.displayUserInfo();
$location.path('/');
}
else {
notificationService.displayError('Registration failed. Try again.');
}
}
};
See, in your method SignUpController that is where the DI will be injecting the parameters into.
However, you have defined the functions that require those parameters OUTSIDE the scope of SignUpController function