很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验.

angular.js 作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angular.js 官方出了一个模块 angular-translate 来解决多语言国际化问题.

我们前端采用 bower 包管理工具来管理依赖,点击链接查看bower 使用方法,这里不再详细说明.

今天和大家分享的内容目录:

  1. 使用angular-translate 模块的前期准备工作

  2. 创建过滤器做html页面内容的国际化

  3. 创建服务做javascript 脚本里的内容国际化

  1. 使用 angular-translate 模块的前期准备工作

使用 bower 管理工具下载 angular 及 angular-translate 模块

bower install angular
bower install angular-translate
bower install angular-translate-loader-static-files
//然后在页面引用进去
<script src="/vender/angular-1.3.8.js"></script>
<script src="/vender/bower-angular-translate-2.4.2/angular-translate.min.js"></script>
<script src="/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

第一个文件 angular-1.3.8.js 就不用多说了.你懂的.

第二个文件 angular-translate.min.js 是angular官方提供的国际化模块

第三个文件 angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.

我们找一个独立的文件夹 i18n 用来放json 文件,目录及文件如下层级关系:

/i18n/

en.json

cn.json

en.json 文件内容如下:

{"100001":"Login","100002":"Register"}

cn.json 文件内容如下:

{"100001":"登录","100002":"注册"}

上面2个json文件对应相同的键 ,我们称之为 翻译键.  不同的语言文件中,相同的翻译键对应相应的翻译值即可.如 "Login" 对应 "登录"

接下来我们需要在注入依赖:

var app = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
        var lang = window.localStorage.lang||'cn';
$translateProvider.preferredLanguage(lang);
$translateProvider.useStaticFilesLoader({
prefix: '/i18n/',
suffix: '.json'
});
}]);

分解的看下上面的代码:

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

这一句就是告诉我们已经把 angular-translate 模块以一个依赖项加载进来.

.config(['$translateProvider',function($translateProvider)

config 函数用 $translateProvider 服务配置 $translate 服务实现.

我们上面使用了 localStorage.lang  来存储用户上一次选择的语言,如果用户是第一次范围,默认显示中文(及 加载 cn.json 文件来翻译)

$translateProvider.preferredLanguage(lang)

这一句告诉 angular.js 哪种语言是默认已注册的语言.

$translateProvider.useStaticFilesLoader({
prefix: '/i18n/',
suffix: '.json'
});

上面的语句告诉我们 angular.js 应该加载本地那些国际化语言配置文件.

prefix : 指定文件前缀.

suffix: 指定文件后缀.

这时你可能会想,只有前缀和后缀那 它到底该加载那个文件呢.如果 i18n 里面有几十种语言翻译文件,是不是要全部加载?

不是这样的.它会按照默认注册的语言去加载.默认注册的语言就是下面这一句得到的.

var lang = window.localStorage.lang||'cn';

如果用户上次访问了英文站, window.localStorage.lang=en; 那么对于会加载 /i18n/en.json  文件

如果用户第一次访问, window.localStorage.lang=undefined ,那么默认我们会加载 /i18n/cn.json 文件

然后我们决定在页脚的位置放一个选择语言的下拉列表框

<div>
    <select class="language-switching" ng-controller="LanguageSwitchingCtrl" ng-model="cur_lang"        ng-change="switching(cur_lang)">
<option value="en">English</option>
<option value="cn">简体中文</option>
    </select>
</div>

上面的语言选择器提供了2种语言 ,en ,cn

当我们选择项变化时会触发 ng-change 函数

空间还绑定了模型 ng-model="cur_lang"

然后我们看下 controller 里面的内容:

angular.module('myApp').controller('LanguageSwitchingCtrl', ['$scope', '$translate', function (scope, $translate) {
    scope.switching = function(lang){
        $translate.use(lang);
        window.localStorage.lang = lang;
        window.location.reload();
    };
    scope.cur_lang = $translate.use();
}]);

ng-change 事件触发时会执行 控制器的 switching 方法. 此方法会接受下拉列表 option 传过来的参数值 (en 或者 cn )

然后执行 $translate.use(lang) 方法.此方法实现了在运行时切换语言的功能.

那 ng-model 到底实现了什么功能呢?这里的作用就是页面加载时下拉列表显示出当前默认使用的是哪种语言,就是定位select 默认项.

我们所有的准备环境都配置好了,下面开始介绍应用:

2.创建过滤器做Html 页面内容的国际化

现在我们先准备在html页面里做国际化,首先想到做一个过滤器,在html页面使用起来是最方便的. /filters/ 目录下创建 T.js 过滤器

angular.module("myApp").filter("T", ['$translate', function($translate) {
return function(key) {
if(key){
return $translate.instant(key);
}
};
}]);

过滤器使用起来非常简单方便,加入我们要在一个登录页面里,登录和注册链接需要我们做国际化.

<div ng-controller="LoginCtrl" >
    <div>
         <p>
         <a ui-sref="app.login({})">{{'登录'|T:100001}}</a>
         <a ui-sref="app.register({})">{{'注册'|T:100002}}</a>
         </p>
    </div>
</div>

这样在不同的语言环境, angular.js 会加载不同的语言配置文件,根据翻译ID展示出来翻译值.

3.我们在javascript 脚本中使用国际化

当然有人说直接用过滤器来做,也是可以的,但是个人更喜欢创建一个服务,感觉使用起来简单方法

我们在 /services/ 目录里创建 T.js 服务,内容如下:

angular.module('myApp').factory('T', ['$translate', function($translate) {
    var T = {
        T:function(key) {
            if(key){
                return $translate.instant(key);
            }
            return key;
        }
    }
    return T;
}]);

服务T 返回了一个方法 T.下面我们样式一下如何在controller 里使用国际化.

假如登录的控制器 LoginCtrl.js 有一个登录标签需要做国际化:

angular.module('myApp').controller('LgoinCtrl', ['$scope','T',
    function($scope,T) {
        
        $scope.login_title=T.T(100001);
    
    }
]);

首先需要把 T 服务依赖注入到控制器,然后在需要国际化的地方直接调用 T 服务的 T 方法,传入翻译ID 返回 翻译值.

*****end*****

国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境的更多相关文章

  1. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  2. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  3. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  4. 使用hessian开发WebService,轻量级,更简单、快捷

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...

  5. python模块介绍- HTMLParser 简单的HTML和XHTML解析器

    python模块介绍- HTMLParser 简单的HTML和XHTML解析器 2013-09-11 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq ...

  6. 多模块分布式系统的简单服务访问 - OSGI原形(.NET)

    多模块分布式系统的简单服务访问 - OSGI原形(.NET) 先描述一下本篇描述的适用场景(3台server, 各个模块分布在各个Server上,分布式模块互相依赖.交互的场景): 多个OSIG引擎交 ...

  7. nodejs nodejs模块使用及简单的示例

    nodejs模块使用及简单的示例 参考菜鸟教程网:http://www.runoob.com/ 一.fs模块的使用: 1.文件操作: 读文件: //读文件 var fs=require('fs'); ...

  8. SELECTORS模块实现并发简单版FTP

    环境:windows, python 3.5功能:使用SELECTORS模块实现并发简单版FTP允许多用户并发上传下载文件 结构:ftp_client ---| bin ---| start_clie ...

  9. django 数据库连接模块解析及简单长连接改造

    django 数据库连接模块解析及简单长连接改造工作中纯服务端的项目用到了线程池和django的ORM部分.django 的数据库连接在每一个线程中开启一份,并在查询完毕后自动关闭连接. 线程池处理任 ...

随机推荐

  1. Oracle查询client编码集

    Oracle查询client编码集 SQL> select userenv('language') from dual; USERENV('LANGUAGE') ---------------- ...

  2. Oracle 与 SqlServer 的区别浅析总结

    我主要用过的数据库为Oracle10g和SqlServer2008,通过实际运用和查阅资料整理如下: 主题 Oracle 10g SQLServer 2008 存储过程格式 Create Or Rep ...

  3. UIFont可用字体

    label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: Font Family: Amer ...

  4. gradle 添加jar依赖,执行grade build时出现“程序包不存在”问题

    引用的第三方依赖的包都找不到了 解决办法 group'com.suneony' version'1.0.0' apply plugin:'java' repositories { mavenLocal ...

  5. Canvas简述

    HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相 ...

  6. 位图算法 C语言

    #include <stdio.h> void set_bit(void *base, unsigned long n) { unsigned long *m = (unsigned lo ...

  7. rarcrack

    apt-get install rarcrack使用方法:rarcrack --threads xx --type rar xx.rar

  8. hdoj-1251-统计难题【map】

    统计难题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others) Total Submiss ...

  9. 〖Linux〗Ubuntu13.10中打开键盘背光灯

    刚刚从淘宝上买回一个带有Led背光的键盘(黑爵战神x5 背光升级版): 然后发现在Linux中背光灯并不亮,在Windows中就可以按下Scroll Lock键点亮: 在网上探索了一番,觉得应该可以使 ...

  10. FPGA视频拼接器的DP 的4k 功能输入, 把lvds 转为 serdes

    4k(3840 x 2160 @60hz)越来越成为一种视频趋势,怎样把4K 接入到拼接器中.是一个棘手的问题. 先看一下原理图的接口: 这是 anx1122的 lvds的接口. 以下看一下系统的框架 ...