Add angular translate for localisation

[ghaiat]

http://angular-translate.github.io/

[thaiat]

Here are the manual steps:

• bower install --save angular-translate
• bower install --save angular-i18n
• bower install --save angular-dynamic-locale
• npm install --save angular-moment

Add the following in package.json

"browser": {
  "angular-dynamic-locale": "./bower_components/angular-dynamic-locale/dist/tmhDynamicLocale.js",
  "angular-translate": "./bower_components/angular-translate/angular-translate.js",
  "moment-fr": "./node_modules/angular-moment/node_modules/moment/locale/fr.js"
},
"browserify-shim": {
   "angular-translate": {
      "depends": [
        "angular"
      ]
    }
}

Create a new module translate:

yo angular-famous-ionic:module translate --skip-route
yo angular-famous-ionic:constant translate en
yo angular-famous-ionic:constant translate fr
yo angular-famous-ionic:service translate language

Here is the service language :

'use strict';
var servicename = 'language';

module.exports = function(app) {

    var dependencies = ['$window', '$translate', 'amMoment', 'tmhDynamicLocale'];

    function service($window, $translate, amMoment, tmhDynamicLocale) {
        var set = function(l) {
            l = (l || 'en').substring(0, 2);
            $translate.use(l);
            amMoment.changeLocale(l);
            //localStorage.setString('language', l);
            tmhDynamicLocale.set(l);
        };

        var initialize = function() {
            var deferred = $q.defer();
            if($window.navigator.globalization) {
                $window.navigator.globalization.getPreferredLanguage(function(language) {
                    set(language.value);
                    deferred.resolve();
                });
            } else {
                set($window.navigator.language || $window.navigator.userLanguage || 'en');
                deferred.resolve();
            }
            return deferred.promise;
        };

        return {
            initialize: initialize,
            set: set
        };

    }
    service.$inject = dependencies;
    app.factory(app.name + '.' + servicename, service);
};

Here is an example the fr constant:

  app.constant(app.name + '.' + constantname, {
        'WELCOME': 'Bienvenue'
    });

Add the following in the index of the translate module:

'use strict';

var modulename = 'translate';

module.exports = function(namespace) {

    var fullname = namespace + '.' + modulename;

    var angular = require('angular');
    require('angular-translate');
    require('angular-moment');
    require('moment-fr');
    require('angular-dynamic-locale');

    var app = angular.module(fullname, [
        'pascalprecht.translate',
        'ngCordova',
        'angularMoment',
        'tmh.dynamicLocale'
    ]);
    // inject:folders start
    require('./constants')(app);
    // inject:folders end

    app.config(['$translateProvider', fullname + '.en', fullname + '.fr',
        function($translateProvider, en, fr) {
            $translateProvider.translations('en', en);
            $translateProvider.translations('fr', fr);
            $translateProvider.preferredLanguage('en');
            $translateProvider.fallbackLanguage('en');
            $translateProvider.useSanitizeValueStrategy('escaped');
        }
    ]);

    return app;
};

Add the following in main.js:

var runDeps = [
    '$ionicPlatform',
    '$window',
    require('./translate')(namespace).name + '.language'
];
var run = function($ionicPlatform, $window, language) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if($window.cordova && $window.cordova.plugins.Keyboard) {
            $window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if($window.StatusBar) {
            $window.StatusBar.styleDefault();
        }

        if($window.TestFairy) {
            $window.TestFairy.begin('xxx');
        }

        language.initialize();
    });
};

[heralight]

Good implementation,
some corrections,
add to translate/index.js in inject: folders

require('services')(app);

in translate/services/language.service.js
fix missing $q declaration in dependencies and constructor

Thanks,

Alexandre