双语网站国际化策略（angularjs）

最近手头再维护一个老项目，浅谈下双语建站，木有耐心的，直接拿代码吧
只要思路还是用json语言包
搭建步骤：npm 下载angular-translate

npm install angular
npm install angular-translate
npm install angular-translate-loader-static-files

index.html中引用脚本及相应选择框

<script src="angular-1.6.8.js"></script>
<script src="angular-translate.min.js"></script>
<script src="angular-translate-loader-static-files.min.js"></script>
<script src="factory.js"></script>
<script src="controller.js"></script>

<select class="language-switching" ng-controller="LanguageSwitchingCtrl" ng-model="cur_lang"        ng-change="switching(cur_lang)">
    <option value="en">English</option>
    <option value="cn">简体中文</option>
</select>

文件 angular-translate.min.js 是angular官方提供的国际化模块

文件 angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.

json文件格式
en.json : {“10”:”Login”,”11”:”Register”}
cn.json : {“10”:”Login”,”11”:”Register”}

模块引入

var app = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
        var lang = window.localStorage.lang||'cn';  //利用localstorage查询用户本地注册语言
    $translateProvider.preferredLanguage(lang);  //默认已注册的语言
    $translateProvider.useStaticFilesLoader({
        prefix: '/lang/',  //prefix : 指定文件前缀  调用json文件
        suffix: '.json'    //suffix: 指定文件后缀   调用json文件
    });
}]);

translate.controller.js
翻译模块

angular.module('myApp').controller('LanguageSwitchingCtrl', ['$scope', '$translate', function (scope, $translate) {
    scope.switching = function(lang){
        $translate.use(lang);
        window.localStorage.lang = lang;
        window.location.reload();
    };
    scope.cur_lang = $translate.use(); //默认select选项
}]);

factory.js
创建服务

angular.module('myApp').factory('Switch', ['$translate', function($translate) {
    var Switch = {
        Switch:function(key) {
            if(key){
                return $translate.instant(key);
            }
            return key;
        }
    }
    return Switch;
}]);

login.controller.js
对应模块调用服务

angular.module('myApp').controller('LoginCtrl', ['$scope','Switch',
    function($scope,Switch) {

        $scope.login_title=Switch.Switch(10);   //直接调用 Switch 服务的 Switch 方法,传入翻译ID 返回 翻译值.

    }
]);

待续