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

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

 

 

 

 

posted @   Zhentiw  阅读(297)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae