[转]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,具体的使用这里就不多说了,你可以友善招来那个插件去看官方的实际文档这里就不再赘言了。

 

相关文章