[Angularjs]国际化
写在前面
在项目中，有用到国际化，跟着就了解了下使用angularjs实现的国际化，这里做一下记录。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一个例子
这里需要引入angular-translate.min.js，可以从这里进行下载：http://angular-translate.github.io/
这里通过在路由上面添加一个language的参数，通过$routeParams获取该参数，决定是使用中文还是英文。
单页页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>路由</title>
<script src="JS/angular.min.js"></script>
<script src="JS/angular-route.min.js"></script>
<script src="JS/angular-translate.min.js"></script>
<link href="Css/style.css" rel="stylesheet" />
<script>
var app = angular.module('app', ['ngRoute', 'pascalprecht.translate']);
app.config(['$routeProvider', function ($routeProvider) {
//这里指定路由
$routeProvider
.when('/Login/:lang', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
}]);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Login',
UserName: 'UserName',
Pwd: 'Password',
BUTTON_Login: 'Login',
BUTTON_Cancel: 'Cancel',
PleaseMobile: 'Please input your mobile No.',
Pwd_tips: 'Please input your password'
});
$translateProvider.translations('cn', {
TITLE: '登录',
UserName: '用户名',
Pwd: '密码',
BUTTON_Login: '登录',
BUTTON_Cancel: '取消',
PleaseMobile: '请输入注册手机号',
Pwd_tips: '请输入密码'
});
//默认语言
$translateProvider.preferredLanguage('cn');
}); //控制器
app.controller('LoginController', function ($scope, $translate, $routeParams) {
console.log($routeParams.lang);
//通过$routeParams获取路由参数，也就是语言
var language = $routeParams.lang;
//转换语言版本
$translate.use(language);
});
</script> </head>
<body>
<a href="#/Login/en">登录</a>
<!--视图 占位-->
<div ng-view></div>
</body>
</html>
View：Login.html
<form id="login-form" class="login-form">
<div class="cartoon">
<div id="handLeft" class="hand-left">
<div class="hand"></div>
</div>
<div id="handRight" class="hand-right">
<div class="hand"></div>
</div>
</div>
<div class="it-text-list it-box">
<div class="it-label">{{"UserName"| translate}}</div>
<div class="it-input">
<input type="text" placeholder='{{"PleaseMobile"| translate}}' name="phoneNum" id="phoneNum">
</div>
</div>
<div class="it-text-list it-text-bottom it-box">
<div class="it-label">{{"Pwd"| translate}}</div>
<div class="it-input">
<input type="password" placeholder='{{"Pwd_tips"| translate}}' name="password" id="password">
</div>
</div>
</form>
<div class="cn-buttons">
<div class="button bt-red">{{"BUTTON_Login"| translate}}</div>
</div> <div class="cn-buttons">
<div class="button bt-white">{{"BUTTON_Cancel"| translate}}</div>
</div>
测试
英语：http://localhost:18174/1_4_route.html#/Login/en
中文：http://localhost:18174/1_4_route.html#/Login/cn
总结
在使用国际化的时候，查了一些资料，完整的demo还是挺少的，摸索，加实践，就有了这篇文章。
[Angularjs]国际化的更多相关文章
- AngularJS国际化配置
AngularJS国际化配置 下载angular-translate 下载zip包:https://github.com/angular-translate/bower-angular-transla ...
- AngularJS 国际化——Angular-translate
对于一个用户群面向全球的的应用来说,不得不考虑国际化的问题.当然,即便是刚刚起步的小应用,如果有心搞大,也应该提前设计国际化的方案. 本篇讲述使用AngularJS构建的应用的简单国际化方案,准确的说 ...
- AngularJS 技术总结
学习AngularJS,并且能在工作中使用到,算是很幸运了.因此本篇也会搜集各种资料,进行分享. 书籍分享 AngularJS权威指南 常用链接 AngularJS API文档 AngularJS 用 ...
- [Angularjs]系列——学习与实践
写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...
- [Angularjs]ng-repeat中使用ng-model遇到的问题
写在前面 在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的. 系列文章 [Angularjs]ng- ...
- [Angularjs]ng-file-upload上传文件
写在前面 最近在弄文档库的H5版,就查找了下相关的上传组件,发现了ng-upload的东东,推荐给大家. 系列文章 [Angularjs]ng-select和ng-options [Angularjs ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- [转]Ionic + AngularJS angular-translate 国际化本地化解决方案
本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术 ...
随机推荐
- XXOOJL
她的鞋子放在外面没拿进来很显眼,我们俩正抱在床上,刚做完什么也没穿,她也没擦.听到门外的脚步声.赶紧穿.她在我房间里没出声,但我父亲肯定看出来了.于是问我:母亲去哪了,然后他去找她. 太尴尬了,那晚我 ...
- [转]World Wind学习总结一
WW的纹理,DEM数据,及LOD模型 以earth为例 1． 地形数据: 默认浏览器纹理数据存放在/Cache/Earth/Images/NASA Landsat Imagery/NLT Landsa ...
- pandas 前后行操作
一.前后行满足条件 问题: 各位老师好,我有一个dataframe 产品 数据1 数据2 A 1 2 B 4 5 C 6 3 我想找出比如这一行数据1>数据2 AND 数据1的上一行3 AND ...
- 每日一SQL-善用DATEADD和DATEDIFF
转自:http://www.dotblogs.com.tw/lastsecret/archive/2010/10/04/18097.aspx 上個星期去Tech-Day聽了幾場有趣的課,其中一堂是楊志 ...
- 从0开始学Java——JSP和Servlet——jsp转servlet出错的三个典型场景
由于jsp终究是要转换为servlet的java文件,然后再编译为.class文件,最后才执行,那么在这过程的任何一个步骤都可能有问题,主要包括三个方面,下面逐一分析: 一.JSP转换为Servlet ...
- Spring MVC实现文件下载
下载文件① 下载文件需要将byte数组还原成文件. 首先使用mybatis将数据库中的byte数组查出来,指定文件名(包括格式).然后使用OutputStream将文件输入 @RequestMapp ...
- [CareerCup] 4.6 Find Next Node in a BST 寻找二叉搜索树中下一个节点
4.6 Write an algorithm to find the'next'node (i.e., in-order successor) of a given node in a binary ...
- double相加(減)结果会有些误差
前提介绍 今天在调试代码的时候发现了一个double类型数据相减的有趣问题,148163.1 - 82692.09大家猜猜结果等于多少,经过调试最终为5471.010000000009. 是不是很奇怪 ...
- 发布HTML5 2D游戏引擎YEngine2D
关于YEngine2D YEngine2D是一个开源的.采用HTML5技术和Javscript语言创建的2D游戏框架,用来构建web二维游戏. GitHub地址 最新版本 v0.1.2 浏览器支持 C ...
- 记录我开始学习 Git的路程
工作半年多了,总觉得没学到什么东西,于是乎找了个Git学习一下,感觉还蛮厉害的样子.为此记录下我的路程 2015,11,26 更新 前面的路都挺艰难的,在官网下载msysgit网速几乎为0(心情千万只 ...