[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/技术 ...
随机推荐
- MySQL基础 - 外键和约束
在工作中经常会遇到不少不同的观点,比如对于数据库来说那就是是否要设置外键,设置外键的理由自然不必多说,而不设置外键的理由多半为设置外键影响性能,但就目前工作来讲,还没有涉及到因为外键而引发的数据库瓶颈 ...
- cannot change version web module 3.0
eclipse如何修改dynamic web module version 由于从SVN down下来的工程java及tomcat 版本比本地高,导致工程不能编译,报以下错误. 1.Java comp ...
- 把字符串添加到HashMap中
&ZhuoTai_Name=205&NoSongDanDish=0&OrderZhuoTai_ID=aca87b77797e4c859a53c228471a2636&Z ...
- windows live writer 尝试登陆时发生意外错误，导致无法发表博客解决方案
刚用windows live writer发表博客, 但是出现如下提示: 尝试登陆时发生意外错误: 网络连接错误--尝试连接到一下日志时出错: http://www.cnblogs.com//xxxx ...
- matlab figure 窗口最大化
http://blog.163.com/yinhexiwen@126/blog/static/6404826620122942057214/ % figure 窗口最大化,坐标轴也随着窗口变大而相应变 ...
- Linux第四次学习笔记
程序的机器级表示 寻址方式的演变 DOS → 8086 → IA32 Inter处理器系列俗称x86,其演变过程(根据其所需要的晶体管数量来说明): 8086 → 80286 → i386 → i48 ...
- iOS程序中调用系统自带应用(短信，邮件，浏览器，地图，appstore，拨打电话,iTunes，iBooks )
在网上找到了下在记录下来以后方便用 在程序中调用系统自带的应用,比如我进入程序的时候,希望直接调用safar来打开一个网页,下面是一个简单的使用:
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-partialview.html 系列教程:MVC5 + E ...
- 开源搜索 Iveely Search Engine 0.6.0 发布 -- 黎明前的娇嫩
快两年了,Iveely Search Engine已经走过了5个版本的岁月,虽出生“贫寒”,没有任何开源基金会的支持,没有优秀的“干爹.干妈”,它凭着它的爱好者的支持,0.6.0终于破壳而出,7年前, ...
- Javascript基础系列之（六）循环语句（while语句）
循环语句的作用是反复的执行同一段代码,尽管分几种不同的类型,但其原理几乎相同:只要给定的条件满足,包含在循环体内的语句会不断执行,一旦条件不再满足则终止. while循环是前测试循环,这意味着是否终止 ...