[Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization

最新推荐文章于 2024-10-10 10:50:43 发布

生产的驴

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量82

点赞数

文章标签： javascript json ViewUI

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"
}

生产的驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫