AngularJs 多语言的使用 angular-translate

随着世界各地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,具体的使用这里就不多说了,你可以自己搜索这个插件去看官方的具体文档这里就不再赘述了。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章