对于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');
}
}
}]);
在点击切换语言按钮的时候语言就会变成你想要的
大功告成!希望对大家有帮助~