javascript - 是否可以编写多语言网站而无需在 angular js 中重复代码？

Question

我需要编写一个 2 种语言的网站，一个是英语，另一个是丹麦语。显示的数据会以json格式存储，分别为name.en和name.de。将有两个按钮，一个用于英语，一个用于丹麦语。

但我不想要这样的编码

<p ng-show="english">{{name.en}}</p> 
<p ng-show="danish">{{name.de}}</p> 

而且我不想像这样编写代码

 <div ng-switch on="isExists(item)">
        <span ng-switch-when="true">{{name.en}}</span>
        <span ng-switch-default>{{name.en}}</span>
       <span ng-switch-when="false">{{name.de}}</span>
 </div>

我在这里分别用英语和丹麦语重复相同的代码。我想用一行来显示它。谁能帮帮我？

Answer 1

是的，在 angular-translate 的帮助下是可能的。将 'pascalprecht.translate' 作为模块依赖注入(inject)到您的 Angular 应用中。

var app = angular.module("app", ['pascalprecht.translate']);

创建一个将保存 json 数据的配置部分。

app.config(function ($translateProvider) {
    $translateProvider.translations('en', {
        'Logout': 'Logout',
        'Login': 'Login'
    });
    $translateProvider.translations('de', {
        'Logout': 'DeLogOut',
        'Login': 'DeLogIn'
    });
    $translateProvider.preferredLanguage('en');
});

在您的 Controller 中注入(inject) $translate 作为动态更改语言的依赖项。

$scope.changeLanguage = function (key) {
         $translate.use(key); // key as 'en' or 'de'
     };

在您的部分使用 translate 指令。

<h2 translate="">Log In</h2>

从api获取json数据

var testApp = angular.module("app");
function fetchData() {
  var initInjector = angular.injector(["ng"]),                               $http = initInjector.get("$http");
  return $http.get('/api/getJson', {'cache':false}).then(function(response) {
  testApp.constant("appConstants", response.data);
 }, function(errorResponse) {
  });
 }

更多信息请引用https://angular-translate.github.io/