[转]AngularJs 多语言的使用 angular-translate

本文转自：http://www.tuicool.com/articles/zeymimB

随着世界各地Web访问量的增加，作为开发者的我们也在不断让应用国际化、本地化。当用户访问我们的应用时，他应该能够在运行时立即切换语言环境。

鉴于我们正在开发的是AngularJS客户端应用，尤其不希望用户必须刷新页面或者访问一个完全不同的URL。当然，AngularJS可以很容易地调整那些国际化读者的本机语言环境，或许通过为不同语言生成不同模板的方式为应用提供服务。

然而，这个过程可能会很麻烦，当我们想要改变应用的布局时会发生什么情况？每个独立的模板都需要重新构建和部署。而这个过程应该是很简单才对。

今天就来说说这个    “angular-translate”  

你可以使用angular-translate来替代创建新模板的方式，这个AngularJS模块为你的应用提供了i18n（国际化）服务。angular-translate要求创建一个JSON文件，它描述每种语言的翻译数据。然后它只会在必要时从服务器延迟加载特定语言的翻译数据。 

angular-translate库自带了很多内置指令和过滤器，这让我们的应用国际化变得简单。我

们一起来学习一下。

1. 安装：安装的方式有很多也很简单，你如果使用nodejs的话你可以使用Bower（前端包管理器），如果你不熟悉可以google它的使用。当然最简单的是你直接下载下来引入进来。但是你需要确保你的这个类库放在angularjs之后，这个我想也不必多说了：

   <script src="path/to/angular.js"></script> <script src="path/to/angular-translate.js"></script>

   最后一项要点是，在你的应用中必须将angular-translate声明为一个加载依赖：

   var app = angular.module('myApp', ['pascalprecht.translate']);

   现在已经准备好使用angular-translate组件来翻译你的应用了。

2. 使用方法：安装好angular-translate后，将它声明为应用的依赖，这样才可以用它来翻译应用程序的内容。首先，需要提供翻译数据，这样应用才能真正地说一种新的语言。这一步可以通过使用最新的$translateProvider服务配置$translate服务实现。培养应用使用一种新的语言很简单。只需在应用上使用config函数，为应用提供不同的语言翻译（比如英语、德语、希伯来语等）。首先，需要将$translateProvider注入到配置函数中，就像这样：

   angular.module('angularTranslateApp', ['pascalprecht.translate'])
   .config(function($translateProvider) {
    //  翻译会放到这里 });

   要添加一种语言，必须让$translateProvider找到一个翻译表格，这是一个JSON对象，它包含将要翻译为具体值的消息（键）。使用翻译表格时允许我们将翻译数据编写为一个简单的JSON文件，以便从远程加载或者在编译时设置，比如：

   {
     "name":"hello AngularJs"
   }

   在翻译表格中，键（key）表示一个翻译ID，而其值表示某种语言特定的翻译数据。现在，先给应用添加一个翻译表格。$translateProvider提供了一个叫做translations()的方法来处理它。     

   app.config(function($translateProvider) {
     $translateProvider.translations({
       "headline": "Hello there, This is my awesome app!",   "intro": "And it has i18n support!"  }); });

   有了这个翻译表格之后，应用就可以使用angular-translate了。由于这是在配置期间添加的翻译表格，因此在angular-translate的组件被实例化时就能访问到这个翻译表格了。

   先切换到应用的模板部分。要将键绑定给视图很简单，只需添加翻译数据到视图层即可。使用translate过滤器时，甚至不必接触控制器或者服务，或者无需担心视图层：因为你可以从任何控制器或者服务中解耦翻译逻辑，并且无需接触业务逻辑代码就能让视图可替换。

   从根本上说，translate过滤器的工作原理就像这样：

   <h2>{{'HEADLINE' | translate }}</h2>
   <p>{{'INTRO_TEXT' | translate}}</p>

   现在可以翻译视图层中的内容了，并且还避免了翻译逻辑污染控制器逻辑；然而，即使我们不使用angular-translate也能得到完全相同的结果，因为在这个示例应用中只涉及一种语言。

3. 同时多个语言的支持：上面的代码事例你已经看到一种语言的设置了，如果同时多个语言呢？我可能需要自己设置使用那个语言的场景，上面的就不再适合了，这个插件也是为我们提供这样的功能的。话不多说了直接看代码就一目了然了

   app.config(function($translateProvider) {
     $translateProvider.translations('en', {
      HEADLINE: 'Hello there, This is my awesome app!',   INTRO_TEXT: 'And it has i18n support!'  }) .translations('de', {   HEADLINE: 'Hey, das ist meine großartige App!',   INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!'  }); }); 

   ok，上面的例子非常的简介明了，多个支持就这么的简单。如果说你要动态设置呢？这个什么时候切换怎么搞呢？比如上面的代码我进来是显示那个呢？是英语还是德语呢？

   要设置首选语言，你可以使用$translateProvider.preferredLanguage()方法。这个方法会告诉angular-translate哪种已注册语言是应用默认应该使用的语言。它要求使用一个语言键值作为参数，这个参数指向某个翻译表格。现在，我们来告诉应用应该使用英语作为默认语言：

   app.config(function($translateProvider) {
     $translateProvider.translations('en', {
      HEADLINE: 'Hello there, This is my awesome app!',   INTRO_TEXT: 'And it has i18n support!'  })  .translations('de', {   HEADLINE: 'Hey, das ist meine gro?artige App!',   INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!'  });  $translateProvider.preferredLanguage('en'); });

   ok，上面已经解决了我们在多个语言的时候默认使用那个的方法，那么动态设置呢？怎么搞呢我们继续往下看，要在运行时切换到一种新语言，必须使用angular-translate的$translate服务。它有一个use()方法，这个方法要么返回一个当前正在使用的语言对应的语言键，或者传递一个语言键作为参数，这个参数会让angular-translate使用该参数对应的语言。     

   为了感受一下如何在真实的应用中运用这一功能，我们可以添加两个表示译文的翻译ID，稍后添加到HTML模板中的按钮会用到这两个ID：代码片段还是上面的那个啊，

   app.config(function($translateProvider) {
     $translateProvider.translations('en', {
      HEADLINE: 'Hello there, This is my awesome app!',   INTRO_TEXT: 'And it has i18n support!'  })  .translations('de', {   HEADLINE: 'Hey, das ist meine gro?artige App!',   INTRO_TEXT: 'Und sie unterstzt mehrere Sprachen!'  });  $translateProvider.preferredLanguage('en'); });

   接下来，我们要使用$translate服务和它的use()方法在控制器上实现一个方法以便在运行时改变语言。为此，要将$translate服务注入到应用的控制器中，然后添加一个函数给它的$scope对象：

   app.controller('TranslateController', function($translate, $scope) {
     $scope.changeLanguage = function(langKey) {   $translate.use(langKey);  } });

   接着，我们通过为每种语言添加一个按钮的方式在HTML模板中反映这一变化。还必须在每个按钮上设置一个ng-click指令在运行时调用改变语言的函数。

   <div ng-controller="TranslateController">
     <button ng-click="changeLanguage('de')" translate="BUTTON_TEXT_DE"></button>  <button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"></button> </div>

   ok，这样就把刚才我抛出的问题都解决了。

4. 最后说下动态加载语言Angular的$http服务，我们可以通过$translateProvider的registerLoader方法来动态加载语言。首先，需要安装angular-translate-loader-url扩展来设置loader-url服务，它要求有一个后端服务器通过处理lang参数的方式返回JSON数据。如果你已经有一个处理带lang      参数路由的后端程序，那么可以像这样使用     

   Bower安装loader-url服务：

   bower install angular-translate-loader-url

   同样你不想这么安装你去github自己下载引入也是一样的，同理需要引入到文件中放到angularjs的下面。

   ok，具体的使用这里就不多说了，你可以自己搜索这个插件去看官方的具体文档这里就不再赘述了。