如何使用AngularJS获取路由中的本地化模板(templateUrl)

Question

在构建国际Web应用程序时,有一个非常流行的用例:

每种文化都有本地化模板,名称约定为'en_US/name.html','ru_RU/name.html'等.

用户的区域设置只能在用户登录后(或用户可以选择区域设置)获取.

因此,我找到的最佳选择是使用DI提供本地化值(因此可以在任何地方更新 - 或者当我从后端收到用户配置的响应,或者当用户选择某些内容时).

但是只能在配置步骤中配置路由,其中​​"值"无法注入.所以你不能注入locale配置并根据该值添加templateUrl.

这是一个Plnkr示例,说明我的解决方案.

只有我看到的其他解决方案是修改私有路由数组(使用$ route.routes []),但这听起来像丑陋的黑客.

是否有其他解决方案来实现使用本地化模板的常见用例？

Answer 1

可能有多种方法可以按照您的意愿执行此操作，例如覆盖templateCache而不是修改路由，但我将以不同的方式处理此问题。

在您的方法中，随着站点的增长，维护（至少）2 个模板副本将非常困难。如果您支持更多语言，那么您遇到的麻烦就会短得多。

我会创建一个服务，其中包含类似字典的语言对象。

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

然后您可以将服务注入控制器并将其附加到范围。

这应该可以帮助您入门，如果您需要支持，您可能需要查看一下string.format。