Here is the situation I am facing: I am working on an Ionic project and I want to implement internationalization using angular-translate. To achieve this, I have added angular-translate.min.js to my project:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-translate.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
This snippet is from within the body of the project:
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<ion-side-menu-content>
<a href="#chooseBtn" class="button button-icon">
<i class="icon ion-ios-help-outline "></i>
</a>
<h1 class="title" ng-click="test(activeProject.tasks.length)" translate="TITLE">Tap to choose!</h1>
...
And here is a section of my app.js file:
var app = angular.module('todo', ['ionic', 'pascalprecht.translate']).config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: "Tap here to choose!"
});
$translateProvider.translations('it', {
TITLE: "Tocca qui per scegliere!"
});
}]);
app.factory('Projects', function () {
return {
...
}
});
app.controller('TodoCtrl', function ($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate, $location, $anchorScroll, $ionicScrollDelegate, $ionicPopup, $translateProvider) {
$scope.ChangeLanguage = function (lang) {
$translateProvider.use(lang);
};
$timeout(function () {
$scope.ChangeLanguage("it");
});
});
Upon running the project, I encounter the following exception in the browser:
Error: [$injector:unpr] Unknown provider: $translateProviderProvider <- $translateProvider <- TodoCtrl
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24translateProviderProvider%20%3C-%20%24translateProvider%20%3C-%20TodoCtrl
at REGEX_STRING_REGEXP (ionic.bundle.js:8895)
at ionic.bundle.js:13089
How can I resolve this issue?