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. Java集合ArrayList的应用

    /** * * @author Administrator * 功能:Java集合类ArrayList的使用 */ package com.test; import java.io.BufferedR ...

  2. 浏览器助手,请求拦截，后台模拟键鼠操作，页内嵌入JS

    http://www.cnblogs.com/ /// <summary>        /// 网页浏览器助手        /// 请求拦截,后台模拟键鼠操作,页内嵌入JS       ...

  3. WCF - Versus Web Service

    There are some major differences that exist between WCF and a Web service which are listed below. 这里 ...

  4. [Hadoop源码解读]（四）MapReduce篇之Counter相关类

    当我们定义一个Counter时,我们首先要定义一枚举类型: public static enum MY_COUNTER{ CORRUPTED_DATA_COUNTER, NORMAL_DATA_COU ...

  5. Embedding Documents in Word 2007 by Using the Open XML SDK 2.0 for Microsoft Office

    Download the sample code This visual how-to article presents a solution that creates a Word 2007 doc ...

  6. haproxy配置直接重定向url

    在邮件列表看到有个人问haproxy能否在接到一个请求时选择一个后端服务器,然后301重定向url .主要原因是他有5个1G的出口,这样就能充分利用其带宽.测试了一下是可以的 frontend fre ...

  7. codeforces 652C Foe Pairs 水题

    题意:给你若干个数对,给你一个序列,保证数对中的数都在序列中 对于这个序列,询问有多少个区间,不包含这些数对 分析:然后把这些数对转化成区间,然后对于这些区间排序,然后扫一遍,记录最靠右的左端点就好 ...

  8. [Stephen]Export from Excel to ALM

    1.根据当前安装的ALM版本和Excel版本到https://hpln.hp.com/page/alm-excel-addin-page中对应的插件进行下载安装,安装时Excel需要关闭.安装成功后, ...

  9. java命名规范和编程技巧

    一个好的java程序首先命名要规范. 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,方便维护等作用 Package 的命名 Package 的名字应该都是由一个小写 ...

  10. 2015年9月28日JQuery提前预习预热笔记

    visual studio下载2010 2010与2008不一样,2008需要添加补丁,采用调用对象.2010可以直接用. JQuery=$ 是函数是方法是对象 念J快儿,念doler 开发人员工具( ...