[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中,又 ...
随机推荐
- 如何解决eclipse中的中文乱码问题：
方法一:代码里面进行改变编码 1. 编码方式的gbk和utf不同,不可以互相转换,只有byte和utf或者byte和gbk之间的转换,之间的转码如下:
- AD设计中，三种大面积覆铜的区别
在AD设计中,主要有三种大面积覆铜方式,分别是Fill(铜皮) Polygon Pour(灌铜)和Plane(平面层),这三种方式刚开始的时候没有细细区分,现在分别应用了一下, 总结如下,欢迎指正 F ...
- C# Json处理日期和Table
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Ru ...
- 在Hadoop伪分布式模式下安装Hbase
安装环境:Hadoop 1.2.0, Java 1.7.0_21 1.下载/解压 在hbase官网上选择自己要下的hbase版本,我选择的是hbase-0.94.8. 下载后解压到/usr/local ...
- 正则表达式（javascript）学习总结
正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...
- linux进程间通信方式
(1)管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. (2)命名管道(named pipe):命名管道克服了管道没有名字的限制,因此,除具 ...
- C#技术------垃圾回收机制(GC)
GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就已经提供了GC的功能,这是 ...
- 【HDOJ】2054 A == B ？
这道题目起初看,so easy.再看一下ac率,注意到没有说明变量类型.显然是一道字符串的题.需要考虑+/-符号位,+.1.-.1.00010.0.+0.-00.00等情况,同时数组开到100000以 ...
- poj1724ROADS（BFS）
链接 本来想写spfa 加点什么限制什么的可能就过了 写着写着就成裸BFS了 也没优化就水过了 #include <iostream> #include<cstdio> #in ...
- java常量池概念
在class文件中,“常量池”是最复杂也最值得关注的内容. Java是一种动态连接的语言,常量池的作用非常重要,常量池中除了包含代码中所定义的各种基本类型(如int.long等等)和对象型(如Stri ...