Jak uzyskać zlokalizowane szablony (templateUrl) w routingu z angularjs

Question

Jest przypadek użycia, który jest dość popularny w budowaniu międzynarodowej aplikację internetową:

istnieją zlokalizowane szablony dla każdej kultury, o nazwie konwencji jak „en_US/nazwa .html ',' ru_RU/name.html 'itd.

Ustawienia regionalne użytkownika mogą być dostępne tylko po zalogowaniu użytkownika (lub użytkownik może wybrać ustawienia regionalne).

Najlepszą opcją, jaką znalazłem, jest podanie wartości lokalizacji za pomocą DI (aby mogła być aktualizowana w dowolnym miejscu - lub gdy otrzymam odpowiedź z backendu z konfiguracją użytkownika lub gdy użytkownik coś wybierze).

Ale routing może być skonfigurowany tylko w kroku konfiguracji, w którym "wartości" nie mogły zostać wstrzyknięte. Tak więc nie można wstrzyknąć konfiguracji locale i dodać templateUrl zgodnie z tą wartością.

Oto zobrazowanie mojego rozwiązania w postaci Plnkr example.

Jedynym innym rozwiązaniem, które widzę, jest modyfikowanie prywatnych tablic tras (za pomocą $ route.routes []), ale brzmi to jak brzydkie hackowanie.

Czy istnieją inne rozwiązania umożliwiające wdrożenie tego powszechnego przypadku użycia zlokalizowanych szablonów?

Answer 1

Możliwe, że można to zrobić w dowolny sposób, np. Przesuwając numer templateCache zamiast modyfikować trasę, ale inaczej podchodzę do tego problemu.

W twoim podejściu, gdy twoja strona rośnie, bardzo trudno byłoby utrzymać (przynajmniej) 2 kopie szablonów. Jeśli będziesz obsługiwać więcej języków, będziesz miał kłopoty znacznie krótszy.

Stworzyłbym usługę, która zawiera obiekty słownikowe podobne do języków.

angular.module("myApp", []) 
     .factory("Internationalization", function() { 
      var dict: { 
       en_US: { 
        hello: "Hello," 
       }, 
       fr_FR: { 
        salut: "Salut," 
       } 
      }; 
      var get = function (locale, key) { 
       return formatdict[locale][key]; 
      } 
      return {get: get}; 
     }); 

Następnie można wprowadzić usługę do kontrolera i dołączyć do zakresu.

To powinno pomóc w rozpoczęciu pracy, warto sprawdzić this, jeśli chcesz uzyskać pomoc string.format.