Angular 多语言应用
Angular multilanguage app
我正在尝试创建一个多语言 Angular 应用程序。我想使用 angular-translate ，但我不明白它是如何工作的。我有一个 json 我使用 $http.get 得到的数据，我将它写入 $scope 并使用 ng-repeat 等输出数据。如何使用翻译输出数据？我想从 json 文件中获取翻译，并尽可能使用与示例中相同的 json 结构。寻求建议。
Angular 应用
(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>
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 让我觉得您想要翻译一些 特定于服务的 字符串。他们的翻译应该在后端完成，即服务器应该 return 根据所选语言翻译的文本。
我正在尝试创建一个多语言 Angular 应用程序。我想使用 angular-translate ，但我不明白它是如何工作的。我有一个 json 我使用 $http.get 得到的数据，我将它写入 $scope 并使用 ng-repeat 等输出数据。如何使用翻译输出数据？我想从 json 文件中获取翻译，并尽可能使用与示例中相同的 json 结构。寻求建议。
Angular 应用
(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>
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 让我觉得您想要翻译一些 特定于服务的 字符串。他们的翻译应该在后端完成，即服务器应该 return 根据所选语言翻译的文本。