寫在前面
在項目中，有用到國際化，跟着就了解了下使用angularjs實現的國際化，這里做一下記錄。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一個例子
這里需要引入angular-translate.min.js，可以從這里進行下載：http://angular-translate.github.io/
這里通過在路由上面添加一個language的參數，通過$routeParams獲取該參數，決定是使用中文還是英文。
單頁頁面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>路由</title>
<script src="JS/angular.min.js"></script>
<script src="JS/angular-route.min.js"></script>
<script src="JS/angular-translate.min.js"></script>
<link href="Css/style.css" rel="stylesheet" />
<script>
var app = angular.module('app', ['ngRoute', 'pascalprecht.translate']);
app.config(['$routeProvider', function ($routeProvider) {
//這里指定路由
$routeProvider
.when('/Login/:lang', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
}]);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Login',
UserName: 'UserName',
Pwd: 'Password',
BUTTON_Login: 'Login',
BUTTON_Cancel: 'Cancel',
PleaseMobile: 'Please input your mobile No.',
Pwd_tips: 'Please input your password'
});
$translateProvider.translations('cn', {
TITLE: '登錄',
UserName: '用戶名',
Pwd: '密碼',
BUTTON_Login: '登錄',
BUTTON_Cancel: '取消',
PleaseMobile: '請輸入注冊手機號',
Pwd_tips: '請輸入密碼'
});
//默認語言
$translateProvider.preferredLanguage('cn');
});
//控制器
app.controller('LoginController', function ($scope, $translate, $routeParams) {
console.log($routeParams.lang);
//通過$routeParams獲取路由參數，也就是語言 var language = $routeParams.lang;
//轉換語言版本
$translate.use(language);
});
</script>
</head>
<body>
<a href="#/Login/en">登錄</a>
<!--視圖 占位-->
<div ng-view></div>
</body>
</html>
View：Login.html
<form id="login-form" class="login-form"> <div class="cartoon"> <div id="handLeft" class="hand-left"> <div class="hand"></div> </div> <div id="handRight" class="hand-right"> <div class="hand"></div> </div> </div> <div class="it-text-list it-box"> <div class="it-label">{{"UserName"| translate}}</div> <div class="it-input"> <input type="text" placeholder='{{"PleaseMobile"| translate}}' name="phoneNum" id="phoneNum"> </div> </div> <div class="it-text-list it-text-bottom it-box"> <div class="it-label">{{"Pwd"| translate}}</div> <div class="it-input"> <input type="password" placeholder='{{"Pwd_tips"| translate}}' name="password" id="password"> </div> </div> </form> <div class="cn-buttons"> <div class="button bt-red">{{"BUTTON_Login"| translate}}</div> </div> <div class="cn-buttons"> <div class="button bt-white">{{"BUTTON_Cancel"| translate}}</div> </div>
測試
英語：http://localhost:18174/1_4_route.html#/Login/en
中文：http://localhost:18174/1_4_route.html#/Login/cn
總結
在使用國際化的時候，查了一些資料，完整的demo還是挺少的，摸索，加實踐，就有了這篇文章。