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. NSMutableArray,NSMutableDictionary的内存管问题

    今天做项目遇到一个问题,在一个类中定义了一个可变数组,使用的是copy的内存管理策略 当往数组中添加包装好的基本数据的时候,程序直接崩溃了.解决方法:把copy换成strong就不会崩溃了; 后来做了 ...

  2. [codility]Prefix-set

    这题很简单,一开始用了set.但后来一想这样其实是n*logn的,而且没有利用所有的数都在0..N-1之间.那么可以直接用vector当hashset. // you can also use inc ...

  3. apache的 .htaccess文件的常用配置

    使用.htaccess文件需要注意的地方: 1.找到配置文件httpd.conf,将override的值改成all.如下图:(如果不设置成all,apache将忽略.htaccess文件)

  4. 接口 --- Java

    package com.test2; public class Test { public static void main(String[] args) { // TODO Auto-generat ...

  5. Android UI性能优化详解

    设计师,开发人员,需求研究和测试都会影响到一个app最后的UI展示,所有人都很乐于去建议app应该怎么去展示UI.UI也是app和用户打交道的部分,直接对用户形成品牌意识,需要仔细的设计.无论你的ap ...

  6. Android开发UI之Action Bar

    郭大神的讲解:http://blog.csdn.net/guolin_blog/article/details/18234477 官网链接:http://developer.android.com/i ...

  7. Hadoop源代码分析【IO专题】

    由于Hadoop的MapReduce和HDFS都有通信的需求,需要对通信的对象进行序列化.Hadoop并没有采用Java的序列化(因为Java序列化比较复杂,且不能深度控制),而是引入了它自己的系统. ...

  8. [hadoop源代码解读] 【SequenceFile】

    SequeceFile是Hadoop API提供的一种二进制文件支持.这种二进制文件直接将<key, value>对序列化到文件中.一般对小文件可以使用这种文件合并,即将文件名作为key, ...

  9. BZOJ_1009_[HNOI2008]_GT考试_(动态规划+kmp+矩阵乘法优化+快速幂)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1009 字符串全部由0~9组成,给出一个串s,求一个长度为n的串,不包含s的种类有多少. 分析 ...

  10. Com和DCOM

    COM,DCOM原理及应用 1.DCOM COM的进程透明特性表现在组件对象和客户程序即可以拥有各自的进程空间,也可以共享同一个进程空间,COM负责把客户的调用正确传到组件对象中,并保证参数传递的正确 ...