Question

我正在尝试创建一个多语言Angular应用。我想使用angular-translate，但我不明白它是如何工作的。我有一个json，我使用$ http.get，收到的数据我把它写入$ scope并使用ng-repeat等输出数据在视图中。如何使用翻译输出数据？我希望从json文件中获取翻译并使用与示例中相同的json结构（如果可能）。寻找建议。

Angular app

(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可以帮助您国际化 客户端字符串 。

它是如何运作的

简而言之，您必须使用包含翻译的json提供 $ translationProvider ：

$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让我觉得您想要翻译一些特定于服务的字符串。他们的翻译应该在后端完成，即服务器应该根据所选择的语言返回翻译的文本。

角度多语言应用程序

1 个答案:

它是如何运作的