i18n using Angular Translate StaticFilesLoader

Question

I am facing similar issues while using angularJS-translate module.

Reference Url to similar issue: i18n using Angular Translate StaticFilesLoader

This is my JS code:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(function ($translateProvider) {

  $translateProvider.useStaticFilesLoader({
    prefix: 'locale-',
    suffix: '.json'
  });
  $translateProvider.preferredLanguage('en_US');

});

app.controller('langController', ['$scope', '$translate', function ($scope, $translate) {

  $scope.switchLanguage = function (key) {
    $translate.use(key);
  };
}]);

html:

<!doctype html>
<!--[if lt IE 7]> <html class1="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Description" content="angular translate brings internationalization (i18n) and localization (l10n) to your Angular apps!">
    <meta name="fragment" content="!">
    <title>angular translate - i18n for your Angular apps, made easy.</title>

    <script src="js/angular.js"></script>
    <script src="js/angular-translate.min.js"></script
    <script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>  
    <script src="app.js"></script>
  </head>

  <body ng-app="myApp">


            <div class="span4">
              <div class="well">
                  <h2 translate>Hello</h2>
                  <p translate>This is a paragraph</p>
                  <p translate>Welcome to Hello world!</P>
              </div>
              <div ng-controller="langController">
                <button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
                <button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">german</button>

              </div>
              <hr>

              <div ng-controller="langController">
                <select ng-model="lang" ng-selected="selected">
                  <option disabled="disabled" selected="selected">Select Language</option>  
                  <option ng-click="changeLanguage('en')" class="ng-scope">English</option>
                  <option ng-click="changeLanguage('de')" class="ng-scope">German</option>
                </select>
              </div>
            </div>
   </body>
</html>

locale-en_US.json:

"TITLE":"Hello",
"FOO":"This is a paragraph.",
"BUTTON_LANG_EN":"english",
"BUTTON_LANG_DE":"german",
"TEXT":"Welcome to Hello world!"

locale-de_DE.json:

"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"

i have placed .js,.html, locale-en_US.json,locale-de_DE.json language files in the same folder and I am not able to get the output as desired , getting error in Firefox console: Error: [$injector:unpr] Unknown provider: $translateStaticFilesLoaderProvider <- $translateStaticFilesLoader.

Can you help me on this please?

Thanks, Ketan

glamnoise glamnoise · Accepted Answer · 2014-11-18T10:16:06

change ng-click="changeLanguage('en')"
with: ng-click="changeLanguage('en_EN')"

change ng-click="changeLanguage('de')"
with: ng-click="changeLanguage('de_DE')"

the language json file is

{
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
}

i18n using Angular Translate StaticFilesLoader

2 Answers