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的更多相关文章

  1. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  2. 【Python】【Web.py】详细解读Python的web.py框架下的application.py模块

    详细解读Python的web.py框架下的application.py模块   这篇文章主要介绍了Python的web.py框架下的application.py模块,作者深入分析了web.py的源码, ...

  3. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  4. 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 ...

  5. AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析

    前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...

  6. AngularJS标准Web业务流程开发框架-4.AngularJS四大模块之一：Controller

    一.Controller的创建 angular.controller("name",funtion($scope){ }) 1.name:控制器的名称(建议参考Java包的命名规范 ...

  7. AngularJs学习笔记-AngularJS权威教程学习笔记

    AngularJS是什么? AngularJS是一种构建动态Web应用的结构化框架.主要用于构建单页面Web应用, 增加抽象级别,使构建交互式的现代Web应用变得更加简单. AngularJS使开发W ...

  8. [AngularJS] TweenList 3D + AngularJS Animate

    AngularJS animations and TweenLite make it really easy to create cool 3d effects in your application ...

  9. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

随机推荐

  1. 通过调用门进行有特权级变换的转移,详细注解 对pmtest5.asm解释很详细.

    http://www.myexception.cn/operating-system/484288.html http://www.myexception.cn/operating-system/44 ...

  2. easyui源码翻译1.32--Messager（消息窗口）

    前言 使用$.messager.defaults重写默认值对象.下载该插件翻译源码 消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), p ...

  3. PDF文件结构

    概述PDF是一种不依赖应用程序软件.硬件和操作系统的文件格式.PDF页包含文本.图形和图像.页面外观由内容流(content stream)描述,内容流包含一些列图形对象(graphics objec ...

  4. JSON对象与JSON数组

    一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):""名称/ ...

  5. oprofile使用方法

    安装oprofile,然后加载内核模块.#modprobe oprofile,模块加载后开始使用oprofile. 1. 首先设置监视内核,使用debuginfo提供的内核,/boot下面的内核无法使 ...

  6. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  7. 360手机助手内部资料曝光，63张PPT纯干货

    360手机助手内部资料曝光,63张PPT纯干货 日前,国内最大的安卓应用商店360手机助手发布了<2016年手机软件行业趋势绿皮书>,这份绿皮书对2015年以来移动互联网的趋势做了总结,展 ...

  8. hdu1501Zipper（记忆化搜索）

    http://acm.hdu.edu.cn/showproblem.php?pid=1501 搜了下记忆化搜索是嘛 然后就看到这个题了 不过一不小心看到代码了 代码又那么短 一不小心给记住了 然后看了 ...

  9. BZOJ_1833_[ZJOI2010]_数字计数_(数位dp)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1833 统计\(a~b\)中数字\(0,1,2,...,9\)分别出现了多少次. 分析 数位dp ...

  10. voucer

    <style type="text/css"> .fieldset_s{border: 1px #dedede solid;padding: 19px; color: ...