Yeoman生成的angular项目引入angular-gettext

对于Yeoman，用过angular的人应该都不陌生，本文的重点也不是教大家如何使用Yeoman（很简单，网上也有很多教程，这里就不赘述了），本文重点是如何配置angular-gettext
第一步当然是将angular-gettext用bower安装（在这个项目里推荐bower安装，因为项目使用的构建工具是grunt，angular的版本也是比较老的版本）

bower install --save angular-gettext

安装完成后因为用了grunt-wiredep，所以会自动生成项目的依赖
这里写图片描述
然后在项目的app.js文件里注入gettext模块并设置默认语言，设置gettextCatalog.debug = true的目的是为了在有的词没翻译的情况下会生成一个MISSING字段

angular
  .module('yeomanApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'gettext'
  ])
  .run(function(gettextCatalog){
    gettextCatalog.setCurrentLanguage('en_US');
    gettextCatalog.debug = true;
  })
  .config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      $locationProvider.html5Mode(true)
  }]);

接下来就需要用到grunt的插件grunt-angular-gettext

npm install grunt-angular-gettext --save-dev
grunt.loadNpmTasks('grunt-angular-gettext');

Gruntfile.js里首先在grunt.initConfig配置nggettext_extract任务

nggettext_extract: {
    pot: {
      files: {
        'app/language/po/template.pot': ['app/*.html','app/views/*.html']
      }
    }
  }

grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'postcss',
    'ngtemplates',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin',
    'nggettext_extract'
  ]);

上面的任务就是把app目录下面的所有html文件里面标记过translate的词提取出来，我们执行grunt build的任务会发现在我们app目录下会生成language文件夹，po文件夹里的template.pot时候我们的翻译模板，我们使用Poeit打开它选择你要翻译成的语言，这里我选择了两个语言，一个是zh_CN，一个是en_US，翻译好保存为.po文件，language文件夹里面会多出zh_CN.po和en_US.po以及zh_CN.mo和en_US.mo，.mo的文件我们不用去管
这里写图片描述
这个时候我们就需要在Gruntfile.js里面配置另外一个任务nggettext_compile

nggettext_compile: {
      all: {
        files: {
          'app/scripts/translations.js': ['app/language/po/*.po']
        }
      },
    }

添加到build的依赖任务数组里面后执行grunt build，那在我们的app/scripts/下会生成一个js文件，就是translations.js，可以看到我们选择的两个语言都已经翻译完成！

接下来就如同需要angular-gettext.js作为项目的依赖一样，translations.js也需要在index.html引入。因为是个小demo，我只做了头部“首页”，“关于”，“联系”这三个词的翻译

<ul class="nav navbar-nav">
  <li class="active"><a href="#/" translate>首页</a></li>
  <li><a ng-href="#/about" translate>关于</a></li>
  <li><a ng-href="#/" translate>联系</a></li>
</ul>

  启动项目~
这里写图片描述
  因为我们设置里默认语言是英文，头部的那三个词已经是英文啦！
  在index.html的控制器rootctrl.js里面我加入了切换语言的逻辑

angular.module('yeomanApp')
  .controller('RootCtrl', ['$scope', 'gettextCatalog', function ($scope, gettextCatalog) {
    $scope.changeLanguage = function (){
      var lang = gettextCatalog.getCurrentLanguage();
      if(lang === 'en_US') {
        gettextCatalog.setCurrentLanguage('zh_CN');
      }else {
        gettextCatalog.setCurrentLanguage('en_US');
      }
    }
  }]);

在点击切换语言按钮的时候语言就会变成你想要的
这里写图片描述
大功告成！希望对大家有帮助~

Yeoman生成的angular项目引入angular-gettext

猜你喜欢