Angular-tranlsate is not properly loading with Ionic


#1

Hi all, I started working with Ionic and I have found it to be great. I setup ngCordova perfectly and now I’ve been having some troubles with angular-translate I follow the docs. But still I can get it working. This how I have things setup so far.

index.html:

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<script src="lib/angular-translate/angular-translate.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
  <body ng-app="app">
    <ion-nav-view>
    </ion-nav-view>
  </body>

app.js:

angular.module('app', ['ionic',
  'pascalprecht.translate',
  'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
      StatusBar.backgroundColorByHexString("#D4DCE2");
    }
  });

})

.config(function ($stateProvider, $urlRouterProvider, $translateProvider) {

  $translateProvider.translations('en_US',{
    'test' : 'Some text'
  });

  $translateProvider.preferredLanguage('en_US');

  $stateProvider
    .state('welcome', {
      url: "/welcome",
      templateUrl: "templates/welcome.html",
      controller: 'WelcomeController'
    });

  $urlRouterProvider.otherwise('/welcome');
})

.controller('WelcomeController', function ($scope) {

  $scope.someFunction = function () {
    ..... 
  };
});

welcome.html:

<ion-content scroll="false" has-bouncing="false">
    {{ 'test' | tranlsate }}
</ion-content>

This is the error I’m getting:

Error: [$injector:unpr] Unknown provider: tranlsateFilterProvider <- tranlsateFilter
http://errors.angularjs.org/1.3.13/$injector/unpr?p0=tranlsateFilterProvider%20%3C-%20tranlsateFilter
    at ionic.bundle.js:8762
    at ionic.bundle.js:12696
    at Object.getService [as get] (ionic.bundle.js:12843)
    at ionic.bundle.js:12701
    at Object.getService [as get] (ionic.bundle.js:12843)
    at null.$filter (ionic.bundle.js:25233)
    at Parser.filter (ionic.bundle.js:20830)
    at Parser.filterChain (ionic.bundle.js:20824)
    at Parser.statements (ionic.bundle.js:20803)
    at Parser.parse (ionic.bundle.js:20660)

Any help or tip that could point in the right direction would be really helpfull


#2

I think you just forgot to import $translate in your controller.
Something like:

.controller('WelcomeController', function ($scope, $translate) {

  $scope.someFunction = function () {
    ..... 
  };
});