2015-10-06 6 views
6

Я новичок в angular-translate в моем Угловом приложении.Как сохранить выбранный язык в LocalStorage при использовании Angular-translate?

Требование:

Я должен создать приложение мульти язык в AngularJS, где пользователь имеет возможность установить свой язык. Итак, для этого мне приходится загружать переводы из файлов и сохранять этот предпочтительный язык в localStorage. Так что, если пользователь снова обратится к приложению, он отобразит ранее заданный язык.

Что я сделал до сих пор:

Loaded переводы из файлов с помощью $translateProvider.useStaticFilesLoader

Код:

var app = angular.module("myLangApp", ['pascalprecht.translate']) 
app.config(function($translateProvider) { 
$translateProvider.useStaticFilesLoader({ 
     prefix: 'languages/', 
     suffix: '.json' 
     }); 
    $translateProvider.useLocalStorage(); 
}); 

Приложение работает отлично, если я закомментировать эту строку:

// $translateProvider.useLocalStorage(); 

Но если я использую его, я получаю эту ошибку на консоли:

Console error for the above code.

Я также включил angular-translate-storage-local.min.js файл в моем index.html .Но не увенчались успехом.

Я также видел эти вопросы в SO, но они не помогают: Angular-translate's localStorage: Unknown provider: $translateLocalStorageProvider

Любая немедленная помощь будет весьма заметным. Благодаря

+1

Возможный дубликат [Угловых-перевода-й LocalStorage: Неизвестный поставщик: $ translateLocalStorageProvider] (http://stackoverflow.com/questions/30287185/angular-translates-localstorage-unknown-provider-translatelocalstorageprovid) – Aks

+0

Также включите это: https://github.com/angular-translate/bower-angular-translate-storage-cookie – Aks

+0

Я думаю, это может вам помочь. http://stackoverflow.com/questions/22364503/angular-translateprovider-issue-with-uselocalstorage –

ответ

8

Вот documentation на хранение с угловым перевести

То, что вы скоро поймете, прочитав это, что угловой translate- местная библиотека предназначена для использования вместе с библиотекой с угловым переводом-хранилищем-файлом. Так как локальное хранилище не поддерживается в некоторых старых браузерах (например, IE 7 или ниже), угловой перевод хочет иметь возможность отказаться от использования файлов cookie, когда локальное хранилище не будет делать трюк.

Ошибка вызвана углового перевода-хранения-местный пытается внедрить его падение обратно вариант угловой перевод-хранения-печенье.

Чтобы обойти эту проблему, вы хотите установить угловой-переводить-локальный-cookie.

Опасайтесь, что angular-translate-local-cookie пытается ввести ngCookie, который представляет собой библиотеку, которую вам нужно будет установить, а также установить инъекцию зависимостей для вашего приложения. Инъекции должны быть

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

Кроме того, неправильный порядок включаемых файлов в вашем index.html также может вызвать проблемы для вас. Правильный порядок должен быть

<script type="text/javascript" src="vendor/angular-cookies/angular-cookies.min.js"></script> 
<script type="text/javascript" src="vendor/angular-translate-storage-cookie/angular-translate-storage-cookie.min.js"></script> 
<script type="text/javascript" src="vendor/angular-translate-storage-local/angular-translate-storage-local.min.js"></script> 
0

в моем приложении я также комментарий $translateProvider.useLocalStorage(); но я добавил

$translateProvider.preferredLanguage('en'); 
$translateProvider.useStaticFilesLoader({ 
    prefix: 'languages/', 
    suffix: '.json' 
}); 

У меня есть различные файлы JSon, один для каждого Ланга, и с FUNC

$translate.use('fr') 

изменить язык пользовательского интерфейса каждый раз, когда пользователь меняет язык, я сохраняю его в локальном хранилище и использую его на startUp внутри $ translate.use

+0

Я согласен с вами. Но мой вопрос другой. Я хочу сохранить язык пользователя в локальном хранилище. так что, если пользователь снова появится в приложении, нет необходимости снова выбирать язык. –

+0

'$ translateProvider.preferredLanguage (' en ')' задает значение по умолчанию lang, – David

+0

'$ translateProvider.preferredLanguage (' en ')', заданное по умолчанию lang, , вы можете создать функцию startUp, которая проверит, есть ли сохраненный lang в localStorage и примените его, используя: '$ translate.use (window.localStorage.getItem (' CLIENT_LANG '))' и в другой функции, когда пользователь решит изменить ui lang, который вы будете строить: ' changeLang (langKey) { $ translate.use ("" + langKey); window.localStorage.setItem ('CLIENT_LANG', langKey); } – David

0

Здравствуйте Попробуйте включить эти два JS файлов в индексной страницу

  • углового транслируют-хранения-local.js
  • углового перевод-хранения-печенье.JS

или (если вы используете Бауэр)

<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script> 
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>