I am currently working on a small AngularJS project and encountering an issue with my service files not being successfully injected into the controllers. I have double-checked for any syntax errors, but despite trying different variations, the problem persists:
Service:
(function (){
'use strict';
angular
.module('tooltipEditorFrontEndApp')
.factory('AuthService', AuthService);
AuthService.$inject = ['$window', 'Restangular'];
function AuthService($window, Restangular) {
var exports = {
setAuthHeader: setAuthHeader
};
function setAuthHeader() {
if ($window.sessionStorage.getItem('token')) {
var token = angular.fromJson($window.sessionStorage.getItem('token')).token;
Restangular.setDefaultHeaders({ 'Authorization': 'Token '+token });
}
}
return exports;
}
})();
Controller:
(function (){
'use strict';
angular
.module('tooltipEditorFrontEndApp')
.controller('MainController', MainController);
MainController.$inject = ['$scope', '$window', 'Restangular', 'AuthService'];
function MainController($scope, $window, Restangular, AuthService) {
var test;
AuthService.setAuthHeader();
test = Restangular.all('states');
test.getList().then(function(states) {
$scope.states = Restangular.stripRestangular(states);
});
}
})();
Load scripts:
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script scr="scripts/services/auth.service.js"></script>
<script src="scripts/controllers/main.controller.js"></script>
<script src="scripts/controllers/login.controller.js"></script>
<script src="scripts/controllers/about.controller.js"></script>
<!-- endbuild -->