web-dev-qa-db-fra.com

Angularjs et $ locale

Puis-je définir manuellement $ locale pour certaines applications?

Est-il possible que la seule façon de prendre en charge les sections locales consiste à inclure le fichier de localisation de la bibliothèque angulaire pour la langue actuelle Et s'il y a plusieurs cultures? Dans ce cas, je dois charger des fichiers de localisation dynamiquement? Qu'est-ce que je rate?

localizationangularjs
42
Andrej Kaurin

Vous pouvez charger les paramètres régionaux de votre choix dans localStorage, puis actualiser la page. Demandez au script ci-dessous de charger le fichier i18n dont vous avez besoin. Changer les paramètres régionaux à la volée n'est pas encore supporté.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
var locale = JSON.parse(localStorage.getItem('locale'));
if (locale) {
    document.write('<script src="scripts/i18n/angular-locale_'+locale+'.js"><\/script>');
}
</script>
31
will Farrell

J'ai construit un module angulaire qui prend en charge i18n. Le support AngularJS pour i18n est plutôt primordial, si vous voulez avoir plus de contrôle et être plus flexible, allez à la caisse angular-translate - http://angular-translate.github.io/

Faites-moi savoir, si je peux aider!

31
Pascal Precht

Pour ceux qui recherchent une localisation dynamique aujourd'hui angular-dynamic-locale fait un excellent travail.

23
maklemenz

Je me débattais avec les mêmes problèmes, lisais toutes les réponses ici et introduisais i18n/l10n dans mon projet. Ce sont mes résultats:

La solution consiste donc à utiliser les deux projets, angular-translate et angular-dynamic-locale.

23
u_b

J'ai trouvé quelque chose d'intéressant. Ce n’est pas angulaire, mais jQuery donc l’intégration devrait être ok ..__Je vais tester les performances et revenir avec info.

https://github.com/js-coder/x18n/wiki/Getting-started

https://github.com/js-coder/jQuery.x18n

1
Andrej Kaurin

Si vous souhaitez charger la localisation angularJS de votre navigateur, installez https://github.com/angular/bower-angular-i18n et https://github.com/lgalfaso/angular-dynamic-locale dans votre projet.

Lisez la documentation de chaque bibliothèque à installer. Voici un exemple de mon projet Ionic:

  1. Dans mon index.html:

    ...
<!-- angular-dynamic-locale-->
<script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
...

  2. Dans mon app.js

    var app = angular.module('project-name', ['ionic',..., 'tmh.dynamicLocale']);
...
// tmhDynamicLocaleProvider
app.config(function(tmhDynamicLocaleProvider) {
   //  override the default path (angular/i18n/angular-locale_{{locale}}.js) to the stored Angular i18n locale files
   tmhDynamicLocaleProvider.localeLocationPattern('lib/angular-i18n/angular-locale_{{locale}}.js');
})
...
app.run(function($rootScope, $ionicPlatform, ..., tmhDynamicLocale){
   // set locale for angular formats   
   var inArray = function(needle, haystack) {
      var key = '';
      for (key in haystack) {
         if (haystack[key] === needle) {
            return true;
         }
      }
      return false;
   };
   var preferredLanguage = navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage;
   if (typeof preferredLanguage === 'string') {
      var code = preferredLanguage.substring(2, 0);
         if (inArray(code, PROPERTIES.LANGUAGES)) {
            tmhDynamicLocale.set(code);
         }
   }
   ...
1
pablo.nunez

Si vous utilisez webpack et TypeScript, vous pouvez charger vos paramètres régionaux de manière dynamique.

    export const loadLocale = function(lng){
    if(lng != 'en'){
        require('./angular-locale_' + lng + '.js');
    }
};
0
httpete

Angular fournit un excellent support pour i18n/l10n . Vous pouvez trouver le guide ici

Les exigences de notre application déterminent comment nous pouvons implémenter ce support.

  1. Si notre application ne nécessite qu'une seule locale ou si les utilisateurs finaux de notre application appartiennent uniquement à une locale particulière, nous pouvons restreindre la portée de notre application pour i18n/l10n à cette seule locale.

Vous pouvez trouver une bonne explication sur la façon dont nous pouvons réaliser de telles choses dans l’une de mes réponses précédentes ici .

  1. Si nous voulons servir un composant, une directive ou une pièce particulière à afficher dans un autre format ou avec des paramètres régionaux, nous pouvons utiliser des composants de directives ou même un filtre pour cela.

Vous pouvez trouver un exemple de violon pour une telle implémentation utilisant un filtre peut être trouvé ici

 function MyController($scope) {
   $scope.property = {
     price: 50000000.557
   }
 }

 function toLocaleCurrencyFilter($filter) {
  return function(amount, currencySymbol, fractionSize, locale) {
    var returnValue = Number(parseFloat(amount)).toLocaleString(locale, {
      minimumFractionDigits: parseInt(fractionSize),
      maximumFractionDigits: parseInt(fractionSize),
    });
    returnValue = returnValue + " " + currencySymbol
    return returnValue;
  };
 }
 angular.module('myApp', [])
   .controller('MyController', ['$scope', MyController])
   .filter('toLocaleCurrency', ['$filter', toLocaleCurrencyFilter]);
  1. Si nous voulons des paramètres régionaux dynamiques, vous devez recharger le navigateur avec les nouveaux paramètres régionaux en les enregistrant dans le stockage local pour prendre effet . Vous pouvez utiliser la solution décrite dans 1 avec une nature dynamique.
0
Samuel J Mathew