Abdul Waheed Abdul Waheed - 12 days ago 8
Javascript Question

Unknown provider: translateFilterProvider <- translateFilter in Angular JS

I am creating an where I need to translate text in multi language for this I am using 'angular-translate' library while following tutorial. I have done all the necessary setup things as mentioned in the tutorial but i am getting 'unknown translateFilterProvider' error. I have tried other links over StackOverFlow but those did not work for me as mentioned URL
Angular-translate Unknown provider
Error: Unknown provider: translateFilterProvider <- translateFilter angularjs

I am new to angular and I have no idea what I am missing. Below is the code I am using
This is my index.html file which has sequence of js file including.

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angulalr-translate/angular-translate.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="controllers/loginController.js"></script>
<script src="service/NetworkManager.js"></script>
<script src="js/Constants.js"></script>


This is app.js file code that has config method

angular.module('starter', ['ionic', 'pascalprecht.translate'])
.config(function($stateProvider, $urlRouterProvider, $translateProvider) {
$translateProvider.translations('en', {
hello_message: "Howdy",
goodbye_message: "Goodbye"
});
$translateProvider.translations('es', {
hello_message: "Hola",
goodbye_message: "Adios"
});
$translateProvider.preferredLanguage("en");
$translateProvider.fallbackLanguage("en");
});


This is my controller where I am injecting my '$translate' as a dependency

angular.module('starter', [])
.controller('loginController', function($translate, $scope, constants, WebserviceCall) {


})

and this is the code on index.html where I am using translate as binding expression

<div ng-controller="loginController">
<h1>{{"hello_message" | translate}}</h1>
<h2>{{"goodbye_message" | translate}}</h2>
</div>


Any help??

Answer

No need to have dependency in the controller again, Change as

angular.module('starter')
.controller('loginController', function($translate, $scope, constants,webserviceCall) {
}