[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/技术 ...
随机推荐
- RESTClient - firefox插件
地址:https://addons.mozilla.org/zh-CN/firefox/addon/restclient/ 关于此附加组件 RESTClient是一款用于测试各种Web服务的插件,它可 ...
- char，string和CString转换
&1 string->char string str0 = "sophia is a good girl."; const char *str1 = str0.c_s ...
- 从Swift学习iOS开发的路线指引
本文主要是楼主近段时间从Swift语法开始自学iOS开发的流程总结,PS 一个前提,楼主的生存环境中买不到一本iOS开发中文教程,所以基本都是百度摸索出来的 >_< 主要流程 学习Swif ...
- 关于json 与 Request Header 的Content-Type 一些关系。
由于最近遇到关于,ashx文件ajax解析参数的问题.查询网上很多资料后,已经解决. 鉴于网上已经足够多的,关于这个问题的文章.大部分内容来自互联网,我这里只是做一些整理和记录.特此说明并非原创. C ...
- php 接收表单 方法的区别
在php中用于接收表单数据的方法有$_REQUEST.$_POST和$_GET.他们作用都是类似的,下面来看一下他们的区别. 一.$_REQUEST能够用于接收post与get方法提交的数据,但是$_ ...
- Object C学习笔记14-分类(category)
在.NET中有一个非常带劲的特性,那就是扩展方法. 扩展方法使你能够向现有类型“添加”方法(包括你自定义的类型和对象噢),而无需创建新的派生类型.重新编译或以其他方式修改原始类型.扩展方法是一种特殊的 ...
- js1常用的东西
1 .ready 与resize方法.$(inject).ready(function() { var windowWidth = $(document.body).outerWidth(true); ...
- words in view Moqui resource code
annotation:注释 注解 documentation:文件 证明文件 embed:嵌入 context:环境 上下文 explicity: 明确的 明白的 conversion: 转化
- OneZero第一次会议（非正式）
会议时间:2016年3月20日 15:50~16:50 会议成员:冉华(http://www.cnblogs.com/ranh941/) 张敏(http://www.cnblogs.com/zhang ...
- Photoshop之渐变工具使用
最上面两个游标控制不透明度 下面两个控制渐变位置 点击游标可以设置颜色 基于每个游标进行操作