在 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 的帮助下是可能的。在你的 angular 应用中注入 'pascalprecht.translate' 作为模块依赖。

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

在您的控制器中注入 $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/

Answer 2

为什么不在你的作用域中创建一个名为 translate 的函数，它将一个对象作为参数（参数？），该对象可以像

{ english: "thank you", portuguese: "obrigado" }

翻译功能从 Service/Factory 确认语言设置的值，并以正确的语言呈现单词。

工厂可能是这样的：

app.Factory("LanguageFactory", function () {
    var obj = {};
    obj.language = "english"; //of course, it's english
    return obj;
});

您的控制器可以像这样使用工厂：

app.controller("", function ($scope, LanguageFactory) {
    $scope.language = LanguageFactory;
    $scope.translate = function (word) {
        if ($scope.language == 'english') {
           return word.english;
        }
        else if ($scope.language == 'french') {
           return word.french;
        } // could go on and on
        //an alternative would be
        return word[$scope.language];
        //but to use to alternative, you would need to know what format the
        //json is returned in 
    }
});

我认为这应该可行。因此，在您 html 中任何您希望多语言功能发挥作用的地方，您都可以像

一样显示它

<p>{{translate(name)}}</p>

哦，我忘了，您需要提供一种方法来更改工厂中语言对象的值。这可能有效：

$scope.changeLanguage = function (l) {
     $scope.language.language = l;
}

Answer 3

试试这个简单的例子
Html

<button class="btn btn-info" ng-click="setLanguage('en')">English</button>
<button class="btn btn-info" ng-click="setLanguage('de')">Danish</button>
<p>{{name[language]}}</p>

Javascript

  //inside controller
    $scope.language='en';  //initial default value
    $scope.setLanguage = function(language) {
        $scope.language = language;    
       }

Answer 4

你可以使用 ngx-translate

希望这会有所帮助

在 angular js 中是否可以在不重复代码的情况下编写多语言网站？

Is it possible to write multilingual website without repeating code in angular js?

javascript

multilingual

angularjs