3

I'm using the angular-translate to do multiple language support. I have the 4 languages json in local. (en.json, ru,json, is.json, jp.json), and i have written code like below in app config

app.config(['$stateProvider' , '$urlRouterProvider', '$translateProvider', 'TENANT_KEY', 'LANG_KEY',
    function ($stateProvider, $urlRouterProvider, $translateProvider, TENANT_KEY) {
        'use strict';
        ...
        $translateProvider.useStaticFilesLoader({
                    prefix: '/assets/languages/',
                    suffix: '.json'
                });

        $translateProvider.preferredLanguage('en');
        ...
        }]);

Here is the question: I want the app start with the language from server side, like last time i choose 'ru' as current language, and next time when i open the app, the language will default to 'ru'.

I have wrote the localService to remember the language selection, but in app.config, we cannot use service, how can i do with it?

angular.module('storm.common')
    .constant('LANG_KEY', 'lang')
    .service('LocaleService', ['PersistenceService', 'LANG_KEY', '$window', '$translate',
        function (PersistenceService, LANG_KEY, $window, $translate) {
            'use strict';
            // 'is' is used for i18n team for their testing !!!
            var supportedLocale = ['en', 'ja', 'ru', 'is'];
            this.set = function (locale) {
                if (!locale) {
                    if (PersistenceService.get(LANG_KEY)) {
                        locale = PersistenceService.get(LANG_KEY);
                    } else {
                        locale = ($window.navigator.language || 'en').replace(/^(en)-.*/, '$1');
                    }
                }
                if (supportedLocale.join(',').indexOf(locale) === -1) {
                    locale = 'en';
                }
                PersistenceService.set(LANG_KEY, locale);
                $translate.use(locale);
//                moment.locale(locale);
            };

            this.get = function () {
                return PersistenceService.get(LANG_KEY) || 'en';
            };
        }
    ]);
huan feng
  • 7,307
  • 2
  • 32
  • 56

1 Answers1

0

You can't inject your service inside the config block. Use run block instead.

The reason is explained here: how to inject dependency into module.config(configFn) in angular

You code should be like this:

app.run(['$translateProvider', 'LocaleService', 
    function($translateProvider, LocaleService){ 
       'use strict';
       ....
       $translateProvider.useStaticFilesLoader({
                prefix: '/assets/languages/',
                suffix: '.json'
            });

       $translateProvider.preferredLanguage(LocaleService.get());
}]);
Community
  • 1
  • 1
Huy Hoang Pham
  • 4,107
  • 1
  • 16
  • 28
  • But localeService is not a sync method, actually it is an Async method(because here persistenceService is async method), and we cannot directly set it into preferredLanguage – huan feng Aug 05 '15 at 06:31
  • I see that you are using `locale = PersistenceService.get(LANG_KEY);` in your code. How can that work if `PersistenceService` is async method :o? – Huy Hoang Pham Aug 05 '15 at 06:36
  • Yes, you are correct. I made a mistake here, can you just give a example for how can i set language based on server db storage? – huan feng Aug 05 '15 at 06:40
  • Can you update the code of your `PersistenceService` in your question? – Huy Hoang Pham Aug 05 '15 at 06:43
  • The code is really complex, actually PersistenceSercie.get a not async call, but PersistenceService.init is an ajax call, and in init, we will get all the storage data from the server. i just copy 3 related files to a plunkr: http://plnkr.co/edit/1qeRtWdFZabbz2SjnG8t?p=info Please help to take a look – huan feng Aug 05 '15 at 06:51