[Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization
It is best to start your application's localization efforts early in development, even if you only support one language initially. Libraries like angular-localization help make the process of supporting additional languages much easier.
Bower.json:
{
"name": "localzation",
"version": "0.0.0",
"authors": [
"Zhentian Wan <answer881215@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular-localization": "~1.2.0"
},
"devDependencies": {
"lodash": "~3.6.0"
}
}
Install:
bower install angular-locatization --save-dev
Index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<div ng-controller="AnimalCtrl as vm">
<div class="row">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="lang_selector" class="col-xs-3 control-label">Select language: </label>
<div class="col-xs-2" >
<select id="lang_selector"
class="form-control"
ng-model="vm.language"
ng-options="lang.label for lang in vm.supportedLanguages"
ng-change="vm.updateLocale(vm.language)">
</select>
</div>
</div>
</form> </div>
<div class="row"
ng-repeat="animal in vm.animals">
<div class="col-xs-12"><h2 i18n="{{animal.code}}"></h2></div>
</div>
</div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-localization/angular-localization.min.js"></script>
<script src="bower_components/lodash/lodash.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:
function AnimalController(locale, Languagefactroy) {
var ctrl = this;
ctrl.supportedLanguages = [];
ctrl.language = {};
Languagefactroy.getSupportedLanguages().then(function(languages){
ctrl.supportedLanguages = languages;
ctrl.language = _.first( ctrl.supportedLanguages);
});
ctrl.animals = [
{name: 'Cat', code: 'common.cat'},
{name: 'Monkey', code: 'common.monkey'}
];
ctrl.updateLocale = function(lang) {
locale.setLocale(lang.value);
}
}
function AppCtrl($scope, localeEvents) {
var ctrl = this;
$scope.$on(localeEvents.localeChanges, function(event, data) {
console.log(event);
console.log('new locale chosen: ' + data);
});
}
function Languagefactroy($http) {
var lang = {},
languages = [];
lang.getSupportedLanguages = function() {
return $http.get('./languages/languages.json').then(setAvailableLangs);
};
lang.getAvailableLangs = function() {
return languages;
};
function setAvailableLangs(langs) {
languages = extract(langs)
return languages;
}
function extract(res) {
return res.data;
}
return lang;
}
angular.module('app', ['ngSanitize',
'ngLocalize',
'ngLocalize.Config',
'ngLocalize.Events',
'ngLocalize.InstalledLanguages'])
.value('localeConf', {
basePath: 'languages',
defaultLocale: 'en-US',
sharedDictionary: 'common',
fileExtension: '.lang.json',
persistSelection: true,
cookieName: 'COOKIE_LOCALE_LANG',
observableAttrs: new RegExp('^data-(?!ng-|i18n)')
})
.value('localeSupported', [
'en-US',
'fi',
'fr'
])
.controller('AnimalCtrl', AnimalController)
.controller('AppCtrl', AppCtrl)
.factory('Languagefactroy', Languagefactroy)
;
languages.json:
[
{"label": "English", "value": "en-US"},
{"label": "Suomi", "value": "fi"},
{"label": "French", "value": "fr"}
]
en-US/common.lang.json:
{
"cat": "Cat",
"monkey": "Monkey"
}
[Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization的更多相关文章
- 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- 【Python】【Web.py】详细解读Python的web.py框架下的application.py模块
详细解读Python的web.py框架下的application.py模块 这篇文章主要介绍了Python的web.py框架下的application.py模块,作者深入分析了web.py的源码, ...
- AngularJs(Part 9)--AngularJS 表单
AngularJS 表单 AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...
- web 存储方式汇总：Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage
1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...
- AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析
前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...
- AngularJS标准Web业务流程开发框架-4.AngularJS四大模块之一：Controller
一.Controller的创建 angular.controller("name",funtion($scope){ }) 1.name:控制器的名称(建议参考Java包的命名规范 ...
- AngularJs学习笔记-AngularJS权威教程学习笔记
AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...
- [AngularJS] TweenList 3D + AngularJS Animate
AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
随机推荐
- Ubuntu下APACHE HTTPS安装和配置
http://blog.csdn.net/newjueqi/article/details/9789659
- ANDROID_MARS学习笔记_S02_001_Spinner
1.strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> < ...
- ANDROID_MARS学习笔记_S01原始版_015_Socket
一.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- Django单元测试(二)------测试工具
The test client test client是一个python类,来模拟一个简单的“哑”浏览器,允许你来测试你的view函数.你可以使用test client完成下列事情: 1.模拟&quo ...
- Eclipse下Properties解析(重要的可修改的会用红笔标注)
以项目为例,打开Properties界面 显示如图: Resource(资源) 展开为 Builders Hibernate Settings Java Build Path(个人认为最重要的) Ja ...
- AFNetworking 2.0 获取json数据时,返回 NSLocalizedDescription=Request failed: unacceptable content-type: text/html, 解决方法.
AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; manager.responseSe ...
- [Irving]DateTime格式处理大全
DateTime dt = DateTime.Now;// Label1.Text = dt.ToString();//2005-11-5 13:21:25// Label2.Text = ...
- [liu yanling]软件测试的过程
测试过程按4个步骤进行,即单元测试.组装测试.确认测试和系统测试.
- 利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
最近客户要求实现论坛贴子附件裁剪功能,没有考虑js与ios.android容器交互解决方案,单纯用js去实现它的.由于本来附件上传用的别的插件实现的,所以是在此基础上费了不少劲,才把jQuery-ph ...
- NOIP2015 提高组（senior） 解题报告
过了这么久才来发解题报告,蒟蒻实在惭愧 /w\ Day1 T1 [思路] 模拟 [代码] #include<iostream> #include<cstring> #inclu ...