双语网站国际化策略（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 返回 翻译值.    }]);

待续