Nex Terren Nex Terren - 5 months ago 32
AngularJS Question

AngularJS Service Undefined When Injected

Stackoverflow has numerous questions under this title but I'm going through each one and not seeing what I'm doing meaningfully differently. More to the point, this isn't my only service, and the rest of them work.

My service:

(function () {

var envService = function ($location) {

//Removed

return {
//Removed for SO, was simply an object of functions

}

var module = angular.module('passwordResetApp');
module.factory('envService', ['$location', envService]);
}());


My app.js:

(function () {
'use strict';

var app = angular.module('passwordResetApp', ['ngRoute', 'AdalAngular', 'ui.grid', 'ui.grid.pagination', 'ui.grid.edit', 'ui.grid.cellNav', 'ui.grid.selection']);

app
.config([
'$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider',
function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {

$routeProvider
.when('/home',
{
templateUrl: '/app/views/home.html',
caseInsensitiveMatch: true
})
.when('/PasswordReset',
{
templateUrl: '/app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
//requireAdLogin: true,
caseInsensitiveMatch: true
})
.when('/UserSearch',
{
templateUrl: '/app/views/userSearch.html',
controller: 'UserSearchController as vm',
//requireAdLogin: true,
caseInsensitiveMatch: true
})
.otherwise({ redirectTo: '/home' });

adalProvider.init(
{
instance: 'https://login.microsoftonline.com/',
tenant: 'Removed for SO',
clientId: 'Removed for SO',
requireADLogin: false,
//anonymousEndpoints: [
// '/'
//],
//endpoints: [
// '/'
//],
extraQueryParameter: 'nux=1',
cacheLocation: 'localStorage',
// enable this for IE, as sessionStorage does not work for localhost.
},
$httpProvider
);

$locationProvider.html5Mode(true).hashPrefix('!');

}
]
);

app.directive('header',
function() {
return {
//Attribute, not element
restrict: 'A',
replace: true,
templateUrl: 'app/views/_header.html',
controller: 'HeaderController as vm',
caseInsensitiveMatch: true
}
});

app.directive('footer',
function() {
return {
restrict: 'A',
replace: true,
templateUrl: 'app/views/_footer.html',
caseInsensitiveMatch: true
}
});

app.run([
'$route', '$http', '$rootScope', '$location',
function ($route, $http, $rootScope) {
$http.defaults.withCredentials = true;
$rootScope.getUrlPath = function (url) {
return baseUrl + url;
};
}
]);


}());

And the controller attempting to have the service injected:

(function () {
'use strict';

var app = angular.module('passwordResetApp');

var headerController = function ($scope, $location, envService, adalService) {
var vm = this;
vm.currentUser = {};
vm.environment = envService.getEnvironment();

vm.changeView = function(view) {
$location.path(view);
};

vm.login = function () {
adalService.login();
};

vm.logout = function () {
adalService.logOut();
};
};

app.controller('HeaderController', ['adalAuthenticationService', headerController]);


}());

Answer

You have to inject all the dependencies in DI array, in order to use them in controller function. Make sure the sequence should not get messed up.

app.controller('HeaderController', ['$scope', '$location', 'envService', 'adalService', headerController]);