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. windows phone 中的TextBlock的一些特性（TextWrapping，TextWrapping）

    文字很长时,换行:TextWrapping="Wrap" 文字很长时,省略:TextWrapping="WordEllipsis"

  2. asp.net中时间差的问题

    asp.net中时间差的问题 在asp中我们可以用datediff来处理,时间的差,相当的不错,可是在asp.net中C#语言中却没有.可是ASP.net给我们提供了一个TimeSpan,我们可以用它 ...

  3. leetcode面试准备: Game of Life

    leetcode面试准备: Game of Life 1 题目 According to the Wikipedia's article: "The Game of Life, also k ...

  4. 多核CPU怎么理解

    简而言之,双核处理器即是基于单个半导体的一个处理器上拥有两个一样功能的处理器核心.换句话说,将两个物理处理器核心整合入一个核中.企业IT管理者们也一直坚持寻求增进性能而不用提高实际硬件覆盖区的方法.多 ...

  5. 使用GDI+ DrawDriverString实现行距及字符间距控制

    主要是要将一个标题和几段文字绘制到固定大小的图片上,如果一张放不下就生成多张.在使用DrawString是发现无法控制行距 namespace TibetTest {     public class ...

  6. FORM Save : ORA-01403 FRM-40735 ORA-06502

    症状: FORM开发后挂上服务器后,运行保存按键提示: ORA-01403: 未找到任何数据 ----------------------------------------------------- ...

  7. 3 Financial Services Social Media Success Storie

    As financial services firms step-up their use of social media, we’ve been looking for some early suc ...

  8. Samba nsswitch/pam_winbind.c文件输入验证漏洞

    漏洞名称: Samba nsswitch/pam_winbind.c文件输入验证漏洞 CNNVD编号: CNNVD-201312-047 发布时间: 2013-12-05 更新时间: 2013-12- ...

  9. Xcode 配置常用变量（SRCROOT, PROJECT_DIR, PROJECT_NAME）

    https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/XcodeBuildSettingRef/ ...

  10. MVC中的@Html.DisplayFor等方法如何控制日期的显示格式（转）

    http://www.tuicool.com/articles/BNVBR3 在Sql Server2005中,如果将某字段定义成日期 时间 类型DateTime,那么在视图中会默认显示成年月日时分秒 ...