Angular 多语言应用程序

Question

我正在尝试创建一个多语言 Angular 应用程序。我想使用 angular-translate ，但我不明白它是如何工作的。我有一个使用 $http.get 获得的 json，收到的数据我将其写入 $scope 并使用 ng-repeat 等输出数据。如何使用翻译输出数据？如果可能，我想从 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

[
    {
        "services": [
            {
                "icon": "money",
                "title": "Service 1",
                "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and"
            },
            {
                "icon": "cogs",
                "title": "Service 2",
                "description": "Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical"
            },
            {
                "icon": "building",
                "title": "Service 3",
                "description": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at"
            },
            {
                "icon": "industry",
                "title": "Service 4",
                "description": "Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of 'de Finibus Bonorum et Malorum' (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during"
            }
        ]
    },
    {
        "gallery": [
            {
                "image": "image-1.jpg"
            },
            {
                "image": "image-2.jpg"
            },
            {
                "image": "image-3.jpg"
            },
            {
                "image": "image-4.jpg"
            },
            {
                "image": "image-5.jpg"
            },
            {
                "image": "image-6.jpg"
            },
            {
                "image": "image-7.jpg"
            },
            {
                "image": "image-8.jpg"
            }
        ]
    },
    {
        "clients": [
            {
                "name": "Aaron",
                "title": "Designer",
                "image": "face-aaroni.jpg",
                "logo": "logo1.png",
                "review": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nesciunt harum natus ea praesentium corporis, eius nam nihil aliquam necessitatibus incidunt ullam quis at blanditiis, voluptates, doloribus! Atque libero expedita aut natus molestiae ratione culpa neque ut voluptatum beatae nulla, repellat praesentium iusto vel ipsa assumenda, optio eum, totam, quia?"
            },
            {
                "name": "Atari",
                "title": "Programmer",
                "image": "face-atariboy.jpg",
                "logo": "logo2.png",
                "review": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nesciunt harum natus ea praesentium corporis, eius nam nihil aliquam necessitatibus incidunt ullam quis at blanditiis, voluptates, doloribus! Atque libero expedita aut natus molestiae ratione culpa neque ut voluptatum beatae nulla, repellat praesentium iusto vel ipsa assumenda, optio eum, totam, quia?"
            },
            {
                "name": "Janna",
                "title": "QA Ingerneer",
                "image": "face-jackiesaik.jpg",
                "logo": "logo3.png",
                "review": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nesciunt harum natus ea praesentium corporis, eius nam nihil aliquam necessitatibus incidunt ullam quis at blanditiis, voluptates, doloribus! Atque libero expedita aut natus molestiae ratione culpa neque ut voluptatum beatae nulla, repellat praesentium iusto vel ipsa assumenda, optio eum, totam, quia?"
            }
        ]
    }
]

不同$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>

Answer 1

Angular-translate 可以帮助您国际化客户端字符串。

它是如何工作的

简而言之，您必须向 $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+ -->

或指令

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

在性能方面更喜欢最后三种语法之一。第一个，{{'home.title' | translate}}，将观察者留在记忆中。 有关 angular-translate 的其他功能，请参阅文档。这是getting-started指南。

---

您发布的 JSON 字符串的翻译

看到你发布的 json 让我觉得你想翻译一些 service-specific 字符串。他们的翻译应该在后端完成，即服务器应该根据选择的语言返回翻译后的文本。