it-swarm.com.de

Angularjs und $ locale

Kann ich $ locale für eine Anwendung manuell festlegen?

Es ist möglich, dass die einzige Möglichkeit zur Unterstützung von Gebietsschemas besteht, die Lokalisierungsdatei aus der Winkelbibliothek für das aktuelle Gebietsschema aufzunehmen. Was ist, wenn es mehrere Kulturen gibt? In diesem Fall muss ich Lokalisierungsdateien dynamisch laden? Was vermisse ich?

42
Andrej Kaurin

Ehrlich gesagt ist der $ locale-Dienst in angular immer noch ziemlich primitiv. Es ist wirklich gut, aber in diesem Bereich scheint es an Flexibilität zu mangeln. Das größte Problem ist, dass selbst wenn Sie Ihr Gebietsschema ändern, indem Sie die richtige Gebietsschemadatei dynamisch neu laden, Dinge wie der Datumsfilter nicht wissen, dass Sie sie geändert haben, weil sie ihre Gebietsschemadaten beim Einrichten registrieren. So haben Sie derzeit eine Reihe von Möglichkeiten: 1. Laden Sie die Seite mit dem ausgewählten Gebietsschema neu ... oder 2. Schreiben Sie Ihren eigenen Gebietsschema-Anbieter und Filter, die es verwenden.

Es könnte möglich sein, einen Dienst zu erstellen, der die richtige Skriptdatei dynamisch lädt, alle betroffenen Filter und Dienste neu initialisiert und dann die Ansichten aktualisiert, aber ich bin es Ich bin mir nicht sicher, was das alles zu diesem Zeitpunkt bedeuten würde.

15
Ben Lesh

Sie können das gewünschte Gebietsschema in localStorage laden und die Seite anschließend aktualisieren. Lassen Sie das folgende Skript die benötigte i18n-Datei laden. Das Ändern des Gebietsschemas im laufenden Betrieb wird noch nicht unterstützt.

<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

Ich habe ein Winkelmodul gebaut, das sich um i18n kümmert. Die Unterstützung von AngularJS für i18n ist ziemlich primitiv. Wenn Sie mehr Kontrolle und Flexibilität haben möchten, checkout angle-translate - http://angular-translate.github.io/

Lass es mich wissen, wenn ich helfen kann!

31
Pascal Precht

Für jeden, der heute nach dynamischer Lokalisierung sucht, ist angle-dynamic-locale eine großartige Arbeit.

23
maklemenz

Ich hatte mit denselben Problemen zu kämpfen, las alle Antworten hier und führte i18n/l10n in mein Projekt ein. Das sind meine Ergebnisse:

Die Lösung besteht also darin, beide Projekte zu verwenden: angle-translate und angle-dynamic-locale.

23
u_b

Einschließlich dieses Skripts: https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js ermöglicht das Festlegen von Gebietsschemas zur Laufzeit.

  1. Laden Sie alle gewünschten Ländereinstellungen von https://github.com/angular/angular.js/tree/master/src/ngLocale herunter
  2. Speichern Sie die Ländereinstellungen in einem Verzeichnis auf Ihrem Webserver, z. /assets/js/locales/filename-LOCALE.js - Anmerkung: Was Sie als [~ # ~] Gebietsschema [~ # ~] im Dateinamen ist wichtig - alle erforderlichen Gebietsschemas werden dynamisch heruntergeladen.
  3. Fügen Sie in Ihr Modul tmhDynamicLocale als 'tmh.DynamicLocale' ein, z. var app = angular.module('app',['tmh.DynamicLocale']);
  4. Übergeben Sie in Ihrer Konfiguration den Provider, d. H. 'tmhDynamicLocaleProvider', und legen Sie den Speicherort Ihrer Gebietsschemadateien fest, z. tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js');{{locale}} wird gegen das Gebietsschema ausgetauscht, das Sie zur Laufzeit festgelegt haben.
  5. Um das Gebietsschema für Ihre App festzulegen, übergeben Sie in app.run() den Dienst 'tmhDynamicLocale', z. app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
  6. Legen Sie in Ihrem Run-Callback das Gebietsschema wie folgt fest: tmhDynamicLocale.set('en-gb');. Alternativ können Sie, da tmhDynamicLocale ein Dienst ist, das Gebietsschema an verschiedenen Stellen festlegen, an denen Diensteinspritzungen zulässig sind, z. Controller, obwohl zu beachten ist, dass Dienste Singletons sind, und das Festlegen des Gebietsschemas in einem Controller wird es in der App festlegen.

Jetzt sollte das richtige Gebietsschema ausgeführt werden. Weitere Informationen erhalten Sie in der [~ # ~] Readme-Datei [~ # ~] für tmhDynamicLocale: https://github.com/ lgalfaso/angle-dynamic-locale/blob/master/README.md

Kredit: Lucas Mirelmann für tmhDynamicLocale.

2
dewd

Ich habe etwas interessantes gefunden. Es ist nicht eckig, aber es ist jquery, also sollte die Integration in Ordnung sein.

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

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

1
Andrej Kaurin

Wenn Sie die angleJS-Lokalisierung Ihres Browsers laden möchten, installieren Sie https://github.com/angular/bower-angular-i18n und https://github.com/lgalfaso/angular-dynamic-locale in Ihrem Projekt.

Lesen Sie die Dokumentation der einzelnen Bibliotheken, um sie zu installieren. Dies ist ein Beispiel meines Ionic-Projekts:

  1. In meinem index.html:

    ...
    <!-- angular-dynamic-locale-->
    <script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
    ...
    
  2. In meiner 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

Wenn Sie Webpack und TypeScript verwenden, können Sie Ihr Gebietsschema dynamisch laden.

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

Angular bietet großartige Unterstützung für i18n/l10n . Den Leitfaden finden Sie hier

Die Anforderungen an unsere Anwendung bestimmen, wie wir diese Unterstützung implementieren können.

  1. Wenn für unsere Anwendung nur ein Gebietsschema erforderlich ist oder die Endbenutzer unserer Anwendung nur einem bestimmten Gebietsschema angehören, können wir unseren Anwendungsbereich für i18n/l10n auf dieses Gebietsschema beschränken

Eine gute Erklärung, wie wir dies erreichen können, finden Sie in einer meiner vorherigen Antworten hier .

  1. Wenn wir eine bestimmte Komponente, eine bestimmte Direktive oder einen Teil in einem anderen Format oder Gebietsschema anzeigen möchten, können wir einige Direktive-Komponenten oder sogar einen Filter dafür auswählen

Ein Beispiel für eine solche Implementierung mit einem Filter finden Sie unter hier .

 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. Wenn Sie ein dynamisches Gebietsschema wünschen, müssen Sie den Browser mit den neuen Gebietsschemaeinstellungen neu laden, indem Sie es im lokalen Speicher ablegen, um wirksam zu werden. Sie können die in 1 beschriebene Lösung mit einiger Dynamik verwenden.
0
Samuel J Mathew