[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中,又 ...
随机推荐
- [Gauss]HDOJ3976 Electric resistance
题意: 一看图就明白了 要求的是1与n端点间的等效电阻 重点在于转化成考虑电流 根据KCL定理:在任一瞬间流出(流入)该节点的所有电流的代数和恒为零 U = IR 可以令1点的电势为零 那么n点的电势 ...
- Android开发UI之控件-Android-PullToRefresh
下拉刷新,使用的是Android-PullToRefresh,Github--https://github.com/chrisbanes/Android-PullToRefresh PullToRef ...
- 搭建Git本地服务器
搭建Git本地服务器 参考文章:http://www.ossxp.com/doc/git/gitolite.html 当前任务,学习中... 公司小范围用法: 服务器上做的: .在服务器上建立一个用户 ...
- [hadoop源代码解读] 【SequenceFile】
SequeceFile是Hadoop API提供的一种二进制文件支持.这种二进制文件直接将<key, value>对序列化到文件中.一般对小文件可以使用这种文件合并,即将文件名作为key, ...
- 修改tomcat的部署名称
找到指定工程下面的.setting目录下面的org.eclipse.wst.common.component文件,可以看到以下的配置 <?xml version="1.0" ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- ActiveX添加测试工程， 出现的问题[非选择性参数][找不到成员]
ActiveX 添加测试工程 1.新建工程MFC application, 2.添加完毕,在main Dialog中, 右键[Insert Activex Control],选择你的ActiveX控件 ...
- bzoj2763: [JLOI2011]飞行路线 分层图+dij+heap
分析:d[i][j]代表从起点到点j,用了i次免费机会,那就可以最短路求解 #include <stdio.h> #include <iostream> #include &l ...
- 【CSS】Beginner4:Text
1.alter the size and shape of the text 2.font-family:Arial, Verdana,"Times New Roman",helv ...
- Java笔记(十九)……多线程
概述 进程: 是一个正在执行中的程序 每一个进程执行都有一个执行顺序,该执行顺序是一个执行路径,或者叫一个控制单元 线程: 就是进程中的一个独立的控制单元,线程在控制着进程的执行 一个进程中至少有一个 ...