Angularjs et $ locale

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

Est-il possible que le seul moyen de prendre en charge les utilisateurs locaux consiste à inclure le fichier de localisation de la bibliothèque angular pour les parameters régionaux actuels. Et s’il y a plusieurs cultures? Dans ce cas, je dois charger les fichiers de localisation de manière dynamic? Qu’est-ce que je rate?

Honnêtement, le service $ locale en angular est encore très primitif. C’est vraiment bien, mais il semble manquer de souplesse dans ce domaine. Le plus gros problème est que, même si vous changez vos parameters régionaux en rechargeant dynamicment le fichier de parameters régionaux approprié, des éléments tels que le filtre de date ne sauront pas que vous l’avez modifié, car ils enregistrent leurs parameters régionaux. Vous avez donc plusieurs choix à l’heure actuelle: 1. Rechargez la page avec les parameters régionaux sélectionnés … ou 2. Ecrivez votre propre fournisseur de parameters régionaux et les filtres qui l’utilisent.

Il pourrait être possible de créer un service qui chargerait dynamicment le fichier de script approprié, réinitialiser tous les filtres et services concernés, puis actualiser les vues, mais je ne suis pas vraiment sûr de ce que cela impliquerait à ce stade.

Vous pouvez charger les parameters régionaux souhaités dans localStorage , puis actualiser la page. Demandez au script ci-dessous de charger le fichier i18n dont vous avez besoin. La modification des parameters régionaux à la volée n’est pas encore prise en charge.

   

J’ai construit un module angular qui prend soin de i18n. Le support d’AngularJS pour i18n est assez primitif, si vous voulez avoir plus de contrôle et être plus flexible, consultez angular-translate – http://angular-translate.github.io/

Faites moi savoir si je peux vous aider!

Pour ceux qui recherchent une localisation dynamic, angular-dynamic-locale fait un excellent travail.

J’ai lutté avec les mêmes problèmes, lu toutes les réponses ici et introduit i18n / l10n dans mon projet. Ce sont mes résultats:

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

En incluant ce script: https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js permet de définir les parameters régionaux au moment de l’exécution.

  1. Téléchargez toutes les locales que vous voulez depuis https://github.com/angular/angular.js/tree/master/src/ngLocale
  2. Stockez les parameters régionaux dans un répertoire de votre serveur Web, par exemple /assets/js/locales/filename-LOCALE.jsnote: ce que vous écrivez en tant que LOCALE dans le nom du fichier est important – les parameters régionaux requirejs seront téléchargés dynamicment.
  3. Dans votre module, incluez tmhDynamicLocale tant que 'tmh.DynamicLocale' par exemple var app = angular.module('app',['tmh.DynamicLocale']) ;
  4. Dans votre configuration, transmettez le fournisseur, par exemple, ” tmhDynamicLocaleProvider ” et définissez l’emplacement de vos fichiers de parameters régionaux, par exemple tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js'); {{locale}} sera remplacé par les parameters régionaux définis lors de l’exécution.
  5. Pour définir les parameters régionaux dans votre application, dans app.run() , transmettez le service 'tmhDynamicLocale' , par exemple app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
  6. Dans votre rappel d’exécution, définissez les parameters régionaux comme ceci: tmhDynamicLocale.set('en-gb'); . Alternativement, comme tmhDynamicLocale est un service, vous pouvez définir les parameters régionaux à différents endroits où les injections de services sont autorisées, par exemple les contrôleurs, mais les services sont configurés sur un contrôleur.

Vous devriez maintenant avoir les parameters régionaux corrects en cours d’exécution. Pour plus d’informations, utilisez le fichier README pour tmhDynamicLocale : https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

Crédit: Lucas Mirelmann pour tmhDynamicLocale .

J’ai trouvé quelque chose d’intéressant. Ce n’est pas angular mais c’est de la jquery alors l’intégration devrait être correcte. Je vais tester les performances et revenir avec des informations.

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

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

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. Ceci est un exemple de mon projet ionique:

  1. Dans mon index.html:

     ...   ... 
  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 === 'ssortingng') { var code = preferredLanguage.subssortingng(2, 0); if (inArray(code, PROPERTIES.LANGUAGES)) { tmhDynamicLocale.set(code); } } ... 

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’un seul environnement local ou que les utilisateurs finaux de notre application appartiennent uniquement à un environnement local particulier, nous pouvons restreindre la scope de notre application pour i18n / l10n uniquement à ces parameters régionaux.

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

  1. Si nous voulons diffuser un composant, une directive ou une partie en particulier dans un autre format ou une autre locale, nous pouvons choisir des composants de directives ou même un filtre pour cela.

Vous pouvez trouver un exemple de violon pour une telle implémentation en 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)).toLocaleSsortingng(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 parameters régionaux dynamics, vous devez recharger le navigateur avec les nouveaux parameters régionaux en les enregistrant dans le stockage local pour prendre effet. Vous pouvez utiliser la solution décrite en 1 avec un certain dynamisme.

Si vous utilisez webpack et typecript, vous pouvez charger vos parameters régionaux de manière dynamic.

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

Vous pouvez également utiliser le service de traduction pour obtenir les parameters régionaux du navigateur, puis les utiliser pour faire ce dont vous avez besoin. . . par exemple, dans un ShortDatePipe:

  import { Pipe, PipeTransform} from '@angular/core'; import { formatDate } from '@angular/common'; import { TranslateService } from '@ngx-translate/core'; @Pipe({ name: 'shortDate' }) export class ShortDatePipe implements PipeTransform { constructor(private translateService: TranslateService) { } transform(value: ssortingng): ssortingng { var language: ssortingng = this.translateService.getBrowserCultureLang(); console.log(language); return (value == "" || value == null) ? "" : formatDate(value, 'shortDate', language); } }