Angularjs 및 $locale

Angularjs 및 $locale

수동으로 $locale을 설정할 수 있습니까?

로컬을 지원하는 유일한 방법은 앵귤러 라이브러리의 로컬라이제이션파일을 현재 로케일에 포함시키는 것입니다.만약 문화가 여러 개 있다면?이 경우 현지화 파일을 동적으로 로드해야 합니까?제가 무엇을 빠뜨리고 있나요?

로케일로 할 수 .localStorage페이지를 새로 고칩니다.i18n으로 하다이치노

<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>

i18n을 관리하는 각도 모듈을 만들었습니다.각진i18n에 대한 JS 지원은 매우 초기 단계입니다. 더 많은 제어와 유연성을 원한다면 angular-timeout - http://angular-translate.github.io/을 확인하십시오.

내가 도울 수 있으면 알려줘!

오늘날 angular-dynamic-locale은 동적인 현지화를 원하는 모든 사용자에게 매우 적합합니다.

저는 같은 문제로 고민했고, 여기 있는 모든 답변을 읽고 제 프로젝트에서 i18n/l10n을 소개했습니다.결과는 다음과 같습니다.

• angular-timeout(http://angular-translate.github.io)은 콘텐츠(커스텀)를 현지화하는 완벽한 방법입니다.그러나 앵글의 날짜, 통화 또는 번호 필터는 번역되지 않습니다.
• Angular에는 날짜, 통화 또는 숫자 필터를 현지화하는 메커니즘이 내장되어 있습니다.지원되는 로케일에 대한 번역은 https://github.com/angular/angular.js/tree/master/src/ngLocale,를 참조하십시오.각도가이드는 https://docs.angularjs.org/guide/i18n에 있습니다.
• Angular의 내장 메커니즘의 문제: 런타임에 로케일을 변경하는 것은 쉽지 않습니다.여기서부터 https://github.com/lgalfaso/angular-dynamic-locale이 가동됩니다.런타임에 언어를 쉽게 변경할 수 있습니다.

따라서 해결책은 angular-translate 프로젝트와 angular-dynamic-locale 프로젝트를 모두 사용하는 것입니다.

솔직히, 앵귤러에서의 $locale 서비스는 아직 꽤 원시적이다.정말 좋은데, 이 부분은 유연성이 부족한 것 같아요.가장 큰 문제는 적절한 로케일 파일을 동적으로 새로고침하여 로케일을 전환하더라도 날짜 필터 등은 설정 시 로케일 정보를 등록하기 때문에 사용자가 변경한 것을 인식하지 못한다는 것입니다.현재 몇 가지 선택지가 있습니다.1 .선택한 로케일로 페이지 다시 로드...또는 2. 로케일 프로바이더와 그것을 사용하는 필터를 작성합니다.

적절한 스크립트 파일을 동적으로 로드하고 영향을 받는 모든 필터와 서비스를 다시 초기화한 후 보기를 새로 고치는 서비스를 만들 수 있지만, 이 시점에서는 이 모든 것이 어떻게 될지 잘 모르겠습니다.

이 스크립트를 포함하여 https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js을 사용하면 런타임 중에 로케일을 설정할 수 있습니다.

1. https://github.com/angular/angular.js/tree/master/src/ngLocale에서 원하는 모든 로케일을 다운로드하십시오.
2. 합니다.를 들어, 「」라고 하는 디렉토리입니다./assets/js/locales/filename-LOCALE.js - 주의: LOCalein 파일명으로 쓰는 것이 중요합니다.필요한 로케일은 모두 동적으로 다운로드 됩니다.
3. In your module, include 모듈에 다음을 포함합니다.tmhDynamicLocale as ~하듯이'tmh.DynamicLocale'e.g.var app = angular.module('app',['tmh.DynamicLocale']);;;;
4. 구성에서는 공급업체에 통과합니다.구성에서는 공급자를 전달합니다. ''tmhDynamicLocaleProvider' ' and set the location of your locale files, e.g. 로케일 파일의 위치를 설정합니다.tmhLocaleProvider.localeLocationPattern('/assets/js/locales/angular-locale-{{locale}}.js'); {{locale}}는 실행 시 설정한 로케일로 스왑 아웃 됩니다.
5. 전체의 하려면 에서app.run()을합니다.'tmhDynamicLocale'★★★★★★★★★★★★★★★★★★★app.run(['tmhDynamicLocale',function(tmhDynamicLocale){}]);
6. 같이 합니다.tmhDynamicLocale.set('en-gb');. 교대로,tmhDynamicLocale을 사용하다예를 들어 컨트롤러 등 서비스 주입이 허용되는 다른 위치에 로케일을 설정할 수 있습니다.서비스는 싱글톤이며 컨트롤러에서 로케일을 설정하면 어플리케이션 전체에서 로케일을 설정할 수 있습니다.

이것으로 올바른 로케일이 실행되게 됩니다.상세한 것에 대하여는, 다음의 README 를 사용해 주세요.tmhDynamicLocale:https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

크레딧 : Lucas Mirelmann :tmhDynamicLocale.

나는 흥미로운 것을 발견했다.각이 진 것은 아니지만 찌그러져 있기 때문에 통합은 문제 없습니다.퍼포먼스를 테스트하고 다시 정보를 드리겠습니다.

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

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

각도를 로드하려면브라우저의 JS 현지화 https://github.com/angular/bower-angular-i18n 및 https://github.com/lgalfaso/angular-dynamic-locale를 프로젝트에 설치합니다.

인스톨 하는 각 라이브러리의 메뉴얼을 참조해 주세요.다음은 저의 Ionic 프로젝트의 예입니다.

1. my index.html:

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

2. 내 앱.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);
            }
      }
      ...
   

각도는 i18n/l10n을 크게 지지합니다.가이드는 이쪽에서 찾을 수 있습니다.

애플리케이션의 요건에 따라, 이 서포트를 실장 방법이 정해집니다.

1. 어플리케이션이1개의 로케일만을 필요로 하는 경우 또는 어플리케이션의 최종 사용자가 특정 로케일에만 속해 있는 경우 i18n/l10n의 어플리케이션 범위를 그 로케일만으로 제한할 수 있습니다.

우리가 어떻게 이러한 것들을 달성할 수 있는지에 대한 좋은 설명은 여기 있는 저의 이전 답변 중 하나에서 찾을 수 있습니다.

2. 특정 컴포넌트, 디렉티브 또는 부품을 다른 형식 또는 로케일로 표시하는 경우 몇 가지 디렉티브컴포넌트 또는 필터로 설정할 수 있습니다.

필터를 사용한 이러한 구현의 예는 여기에서 찾을 수 있습니다.

 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]);

3. 동적 로케일을 사용하려면 로컬 스토리지에 저장하여 새 로케일 설정을 사용하여 브라우저를 새로고침해야 합니다.1에서 설명한 솔루션을 역동적인 성격으로 사용할 수 있습니다.

Web pack 및 typescript 를 사용하는 경우는, 로케일을 동적으로 로드할 수 있습니다.

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

변환 서비스를 사용하여 브라우저의 로케일을 취득한 후 필요한 작업을 수행할 수도 있습니다.예를 들어 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: string): string {
            var language: string = this.translateService.getBrowserCultureLang();
            console.log(language);
            return (value == "" || value == null) ? "" : formatDate(value, 'shortDate', language);
        }

    }

언급URL : https://stackoverflow.com/questions/13007430/angularjs-and-locale