首先，要做AngularJS國際化，需要下面三個模塊
<script src="../angular/angular/angular.js"></script>
<script src="../angular/angular-translate/angular-translate.js"></script>
<script src="../angular/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
大家可以使用bower工具下載這些模塊
bower install angular
bower install angular-translate
bower install angular-translate-loader-static-files
首先，我們這里那中文和英文舉個??，先新建一個目錄i18n,在這個目錄下新建兩個json文件cn.json, en.json.用來保存中英文對應(yīng)的key和value.
cn.json:
{
"title": "這是標題"
}
en.json:
{
"title": "this is our title"
}
目錄結(jié)構(gòu)
這里就不把module模塊和controller模塊單獨分到不同的文件離去了，全部寫到html里：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular/angular/angular.js"></script>
<script src="../angular/angular-translate/angular-translate.js"></script>
<script src="../angular/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="testCtr">
<select class="language-switching" ng-model="cur_lang" ng-change="switching(cur_lang)">
<option value="en">English</option>
<option value="cn">簡體中文</option>
</select>
<br/>
<span>測試：<span ng-bind="title"></span></span>
</div>
<script>
var app = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
$translateProvider.useStaticFilesLoader({
prefix: '../i18n/',
suffix: '.json'
});
}]).controller('testCtr',['$scope', '$translate', function($scope, $translate){
var lang = window.localStorage.lang||'cn'; //默認加載中文對應(yīng)的json文件
$translate.use(lang).then(function() {
$scope.title = $translate.instant('title');
});
$scope.switching = function(langKey){
$translate.use(langKey).then(function() {
$scope.title = $translate.instant('title'); //這里一定要注意：.use（)是async方法，而.instant()是sync方法，所以一定要.use方法加載完之后再去取值，不然.instant()可能會在json文件還沒加載完就執(zhí)行，導(dǎo)致取值失敗。
});
}
}]);
</script>
</body>
</html>
最后打個小廣告，閑著沒事東拼西湊了個小程序（好多妹子奧??），閑著無聊的小伙伴幫我掃掃湊湊人數(shù)哈：
炱無聊
