[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/技术 ...
随机推荐
- S2--《优化MySchool数据库设计》总结
第一章 数据库的设计 1.1 数据库设计 数据库中创建的数据库结构的种类,以及在数据实体之间建立的复杂关系是决定数据库系统效率的重要因素. 糟糕的数据库设计表现在以下两个方面: *效率低下 * ...
- Sublime Text 3 文本编辑器
1.安装下载 下载地址:http://www.cr173.com/soft/121149.html http://www.xiazaiba.com/html/24343.html 官网 http:// ...
- HTML语义化之常见模块
用合理的HTML标记以及特有的属性去格式化文档内容. 浏览器会根据标签的语义给定一个默认的样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读 ...
- 即学即会 Java 程序设计基础视频教程（100课整）无水印版
课程总共包含100个课时,总授课长达27多个小时,内容覆盖面广,从入门到精通,授课通俗易懂,分析问题独到精辟通过本套视频的学习,学员能够快速的掌握java编程语言,成为java高手. 课程目录:课时1 ...
- 20135220谈愈敏Blog7_可执行程序的装载
可执行程序的装载 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 一. ...
- 从走出校门到Java实习生生活
序 男,95年,这个学期就大四了,非计算机专业(数字媒体).目前在二线城市做Java实习生,待遇一般,应该算一个正常的实习生水平吧:租的一个约10平米的小单间,实习工资-衣食住行-杂七杂八的小消费差不 ...
- css的6中居中的方式
请先看blog:http://blog.csdn.net/wolinxuebin/article/details/7615098
- 字符串去掉空格 trim()方法
jquery库提供了$.trim()方法,能直接用, 但没用库时FF里有效果,IE里就没实现, 解决办法:用正则替换 方法: function trimStr(str){return str.repl ...
- [工具类]文件或文件夹xx已存在，则重命名为xx(n)（2）
写在前面 最近一直在弄文件传输组件,其中一个功能就是,在接收端接收文件时,如果文件已经存在了,则对其进行文件名+索引的方式进行自动重命名,之前也写个类似的工具类,总感觉代码太冗余,每回头想想,总觉得心 ...
- 第十七课：js数据缓存系统的原理
这一章主要讲的是jQuery的缓存系统的历史发展,以及他自己的框架的缓存系统的实现.都是源码解析. 我就挑几个重点讲下: (1)jQuery的缓存机制的原理 jQuery的缓存机制实现的原理是在元素中 ...