Javascript 角度多语言应用程序

我正在尝试创建一个多语言的Angular应用程序。我想使用角度平移，但我不明白它是如何工作的。我有一个json，我使用$http.get获取，接收到的数据我将其写入$scope并使用ng repeat等在视图中输出数据。如何使用translate输出数据？我希望从json文件中获得翻译，并尽可能使用与示例中相同的json结构。寻求建议

角度应用程序

(function(){

    var app = angular.module('webApp', []);

    app.controller('InfoCtrl', function($scope, $http){
        $scope.services = [];
        $scope.gallery = [];
        $scope.clients = [];


        $http.get('assets/translations/translate.json').success(function(data) { 
            // console.log("success!");

            $scope.services = data[0].services;
            $scope.gallery = data[1].gallery;
            $scope.clients = data[2].clients;
    });  

    });

})();

JSON

不同

$scope

阵列的示例视图

<div class="service-wrapper">
    <div class="service" ng-repeat='service in services'>
        <h2><i class="fa fa-{{service.icon}}"></i>{{service.title}}</h2>
        <p>{{service.description}}</p>
    </div>                      
</div>

<div class="gallery-wrapper">
    <a class="gallery-img" href="assets/images/gallery/{{image.image}}" data-lightbox="work" ng-repeat='image in gallery'><img ng-src="assets/images/gallery/{{image.image}}" alt="Image"></a>
</div>

<div class="client-unit" ng-class="{'active-client': $first}" ng-repeat='client in clients'>

    <figure class="client-face">
        <img ng-src="assets/images/clients/{{client.image}}" alt="client-face">

        <figcaption>
            <strong class="client-name">{{client.name}}</strong>
            <em class="client-title">{{client.title}}</em>
        </figcaption>

    </figure>

    <div class="client-content">
        <p>{{client.review}}</p>
    </div>
</div>

{{service.title}}
{{service.description}

{{client.name}
{{client.title}
{{client.review}

角度翻译可以帮助您国际化客户端字符串

它是如何工作的 简而言之，您必须向$translationProvider提供包含您的翻译的json：

$translateProvider.translations('en', {
    'home.title': 'Welcome in my app',
    'button.cancel': 'Cancel'
});

然后使用“平移”过滤器：

<h1>{{'home.title' | translate}}</h1>
<h1>{{::'home.title' | translate}}</h1> <!-- one-time binding with angular 1.3+ -->

{{'home.title'| translate}
{{：：'home.title'| translate}

还是指令

<h1 translate="home.title"></h1>
<h1 translate>home.title</h1>

home.title

就性能而言，您更喜欢最后三种语法中的一种。第一个是

{{'home.title'| translate}}

，它将监视程序保存在内存中。 有关角度平移的其他功能，请参阅文档。这是指南

---

翻译您发布的JSON字符串

看到您发布的json，我觉得您需要翻译一些特定于服务的字符串。他们的翻译应在后端完成，即服务器应根据所选语言返回翻译文本

<h1 translate="home.title"></h1>
<h1 translate>home.title</h1>