3

new to Angular and I'm trying to inject constants from a separate file. It seems to work with the DI, but when I try to use it, I get an error: Error: undefined is not an object (evaluating 'CApiEndpoints.authUrl').

I tried dot notation and brackets as suggested in Accessing AngularJS constants but continue to get the error.

The files are included in index.html, and DI doesn't complain.

index.html

<script type="text/javascript" src="js/angular/constants.js"></script>
<script type="text/javascript" src="js/angular/app.js"></script>

js/angular/constants.js

var app = angular.module('appConst', []);

app.constant('CApiEndpoints', {
    authUrl:        'http://api.example.com/v1/',
    ...
});

and my js/angular/app.js

var app = angular.module('app', ['ngRoute', 'ngCookies', 'appConst', 'appServices']);

app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', function($scope, $route, $http, $cookies, $routeParams, $location, CApiEndpoints){

    console.log(CApiEndpoints);  // shows 'undefined'

    $http({
        method  : 'GET',
        url     : CApiEndpoints.authUrl + 'user_info'
    })
    .then(
      function successCallback(response) {
        console.log(response);
      },
      function errorCallback(response) {
        console.log(response);
    });
}]);

Any help would be appreciated. I've searched for the last 2 hours trying to figure this out.

Community
  • 1
  • 1
Friderich Weber
  • 290
  • 2
  • 12

1 Answers1

4

While injecting dependencies inside your controller function using DI inline array annotation, they must follow the order how they are injected in array.

If you follow above rule you will come to know that you have two extra paramters inside your function, so you should remove those two unwanted ($routeParams, $location) dependency.

app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', 
   function($scope, $route, $http, $cookies, CApiEndpoints){

      //controller code

   }
]);

If you haven't added those parameter mistakenly, you should add those parameter on both side inside function & array.

app.controller('pageController', ['$scope', '$route', '$http', '$cookies', '$routeParams', '$location', 'CApiEndpoints', 
   function($scope, $route, $http, $cookies, $routeParams, $location CApiEndpoints){

      //controller code

   }
]);
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • GAH! I did that before by messing up the order of `$scope` and `$http` which took me a while to figure out. I am using `$routeParams` and `$location`, but this put me on the right track to fix it. for me: `app.controller('pageController', ['$scope', '$route', '$http', '$cookies', 'CApiEndpoints', function($scope, $route, $http, $cookies, CApiEndpoints,$routeParams, $location){...` works correctly now. Thanks Pankaj! – Friderich Weber Jan 04 '16 at 19:59
  • @FriderichWeber it shouldn't be..though you above line of code shouldn't have `,$routeParams, $location` basically they are undefined.no need of adding them threre – Pankaj Parkar Jan 04 '16 at 20:15
  • indeed, I've removed them altogether now and it's back to working. Thanks again. – Friderich Weber Jan 04 '16 at 20:21
  • @FriderichWeber glad to help you..Thanks :) – Pankaj Parkar Jan 04 '16 at 20:23