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. iis下设置默认页

    IIS设置设默认页 计算机-->右键管理-->服务器和应用程序-->Internet信息服务 -->网站-->你发布的网站名-->功能视图-->IIS大类里- ...

  2. 上海CEC大收购（包括华大九天）

    紫光收购展讯.锐迪科后,上海开始通过扶植CEC培育新势力,CEC已经收购上海澜起,即将收购amlogic.Ominivision,还在与marvell眉来眼去,此外华大九天已经移植上海,加上之前的上海 ...

  3. Linux多线程编程（不限Linux）转

    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...

  4. TortoiseSVN设置比较工具为BeyondCompare

    1.  "C:\Beyond Compare 4\BCompare.exe" %base %mine /title1=%bname /title2=%yname /leftread ...

  5. poj3140Contestants Division

    链接 这叫树形DP吗..?断开某条边 求剩下两颗树数权值和的差最小 dfs一遍 枚举边 查了n久 wa n次  dp数组没初始化.. 在poj上1A感觉应该挺爽 #include <iostre ...

  6. hadoop中的分布式缓存——DistributedCache

    分布式缓存一个最重要的应用就是在进行join操作的时候,如果一个表很大,另一个表很小很小,我们就可以将这个小表进行广播处理,即每个计算节点 上都存一份,然后进行map端的连接操作,经过我的实验验证,这 ...

  7. 为什么你的 phpinfo() 无法显示

    一.问题描述 编写了一个php文件test.php,代码如下: <?php echo phpinfo(); ?> 浏览器访问了一下,却返回了 NULL. 二.问题定位及解决 网上查了下,大 ...

  8. Hibernate java.lang.NoSuchFieldError: INSTANCE

    在使用hibernate3.6.2是我遇到了一个有趣的错误java.lang.NoSuchFieldError: INSTANCEat org.hibernate.type.BasicTypeRegi ...

  9. Wordpress Jigoshop插件路径泄露漏洞

    漏洞名称: Wordpress Jigoshop插件路径泄露漏洞 CNNVD编号: CNNVD-201311-109 发布时间: 2013-11-12 更新时间: 2013-11-12 危害等级:   ...

  10. 转自 void- man 差分约束系统详解

    一直不知道差分约束是什么类型题目,最近在写最短路问题就顺带看了下,原来就是给出一些形如x-y<=b不等式的约束,问你是否满足有解的问题 好神奇的是这类问题竟然可以转换成图论里的最短路径问题,下面 ...