转换Ionic应用程序以吸引全球受众的5个步骤指南

支持您的移动应用程序的一种简单方法是支持他们的母语。 Apple强烈建议您为全球受众准备您的应用程序。 本教程介绍了如何翻译Ionic应用程序以支持其他语言。 我最近的“工作时间”更新（版本3.2）包括对其他5种语言的支持。 本教程通过5个简单步骤逐步介绍了如何更新应用程序：

1. 翻译您的应用程序的内容
2. 将Angular Translate模块添加到您的应用中
3. 更新您的模板
4. 更新您的控制器和服务
5. 测试您的翻译

翻译您的应用程序的内容

在更改任何代码之前，我们需要翻译所有应用程序内容。 创建应用程序中所有文本的文本文档。 确保检查所有内容。 以下是一些注意事项：

• 每个模板的文字
• 来自每个控制器的文本
• 每个服务的文字
• 过滤器返回的文字
• App Store说明
• App Store关键字

除非您是多语种，否则您需要使用翻译服务将文本转换为您的首选语言。 我过去曾经使用过一个名为“我可以本地化”的网站。 您也可以在Fiverr上找到负担得起的翻译产品。 我建议找到具有翻译移动应用程序经验的翻译人员。

将Angular Translate模块添加到您的应用中

假设您使用Ionic Framework和AngularJS构建了应用程序，则应使用功能强大的翻译服务Angular Translate。 从他们的仓库中下载最新版本，解压缩文件，然后将angular-translate.min.js文件移动到项目js文件夹中。 然后只需将脚本嵌入到www/index.html文件中，如下所示：

确保将模块作为依赖项注入到您的应用程序中。 这是工作时间的节选：

 angular.module('hoursworked', ['pascalprecht.translate']) 

然后使用$translateProvider向应用程序介绍您的$translateProvider 。 以下是工作时间示例：

 $translateProvider.translations('en', { 
 start_label: "Start Time", 
 end_label: "End Time" 
 }); 

 $translateProvider.translations('es', { 
 start_label: "Principio", 
 end_label: "Fin" 
 }); 

 $translateProvider.translations('pt', { 
 start_label: "Hora de Início", 
 end_label: "Hora de Término" 
 }); 

 $translateProvider.translations('zh', { 
 start_label: "开始时间", 
 end_label: "时间结束" 
 }); 

 $translateProvider.preferredLanguage("en"); 
 $translateProvider.fallbackLanguage("en"); 

更新您的模板

既然您的应用已经了解了翻译，则需要从模板中删除所有纯文本。 以“工作时间”中的“开始时间”标签为例。 这是翻译应用程序之前的模板片段：

  
 Start Time 
  
  

这是升级为使用翻译过滤器的同一代码段：

  
 {{"start_label" | translate}} 
  
  

更新您的控制器和服务

更新每个模板后，您将需要更新所有返回文本的逻辑。 以下是使用翻译过滤器的“工作时间”日历的控制器示例。 请注意，要使过滤器在控制器内部运行，必须将其作为依赖项注入： .controller('CalendarCtrl', function($filter) {...更新依赖项列表后，您可以自由使用翻译过滤器：

前控制器逻辑

 DayFactory.index().then(function(hours) { 
 $scope.hours = hours; 
 if ($scope.allLabel =="View All Hours") { 
 $scope.limit = hours.length; 
 $scope.allLabel = "View Less"; 
 } else { 
 $scope.limit = 5; 
 $scope.allLabel = "View All Hours"; 
 } 

 }, function(errors) { console.log(errors); }); 

转换了相同的控制器逻辑

 DayFactory.index().then(function(hours) { 
 var va1 = $filter('translate')("view_all"); 
 var va2 = $filter('translate')("view_less"); 
 $scope.hours = hours; 
 if ($scope.allLabel == va1) { 
 $scope.limit = hours.length; 
 $scope.allLabel = va2; 
 } else { 
 $scope.limit = 5; 
 $scope.allLabel = va1; 
 } 

 }, function(errors) { console.log(errors); }); 

测试您的翻译

测试您的翻译非常简单，我敢说有点令人愉快。 您将更改要测试的iOS设备的语言和区域。 在这里可以找到设置：

• 设置应用
• 一般
• 语言和地区
• iPhone语言
• 选择您提供翻译的语言

然后，您可以重新打开您的应用以确认内容已转换。 这是我测试葡萄牙语工作时间翻译的截屏视频：