I'm trying to write a translation service based off of this post, but I'm not able to start debugging because I keep getting the error "Error: [ng:areq] Argument 'TranslationController' is not a function, got undefined".
I've copied the structure from my other controllers that work just fine, where am I going wrong?
(Partial app.js code)
}).when('/Location', {
templateUrl: "Views/Location/Location.html",
controller: "TranslationController"
Partial index.html code - ignore the malformed html
script type="text/javascript" src="js/TranslationService.js"></script
script type="text/javascript" src="js/TranslationController.js"></script
script type="text/javascript" src="js/angular/i18n/angular-locale_en.js"></script
TranslationController.js
angular
.module('app')
.controller('TranslationController', ['$scope', '$cookies', 'TranslationService', function($scope, $cookies, $TranslationService) {
$scope.translation;
var onSuccess = function (tx, r) {
$scope.$apply(function () {
$scope.translation = r;
});
$scope.init = function () {
$TranslationService.getTranslation(onSuccess, $scope, $cookies.lang);
}
$scope.init();
}]);
TranslationService.js
angular
.module('TDE')
.factory('TranslationService', ['$resource', function($resource) {
return {
Translations : function(fn) {
return getTranslation($resource, $scope, $cookies.lang);
}
};
this.getTranslation = function($resource, $scope, language) {
var languageFilePath = "js/translations/translation_" + language + ".json";
window.logger.logIt("language path = " + languageFilePath);
$resource(languageFilePath).get(function (data) {
$scope.translation = data;
})
}
}]);
Partial location.html file:
<label>{{translation._EXPERIMENTTITLE_}}</label>