AngularJS Service Undefined When Injected

Question

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

}());

Pankaj Parkar · Accepted Answer · 2016-06-22 20:22:18Z

4

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

answered Jun 22, 2016 at 20:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Ranger Over a year ago

That absolutely fixed it. I'll accept it once SO's 13-minute timer lets me. I've not done that, though, in my other controllers that use my other custom services. Just for my conceptual understanding, do you know why I was able to have those services injected without specifying their string names in the app.controller() method?

Pankaj Parkar Over a year ago

actually you could read up on my last answer on similar question, let me know if you still don't get what you want. Thanks :)

Josue Martinez Over a year ago

the order was the thing

Collectives™ on Stack Overflow

AngularJS Service Undefined When Injected

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related