您的位置：首页 > Web前端 > JavaScript

Anguarjs实现国际化，中英文切换Demo

2017-01-06 09:39 483 查看

目录结构

index.html

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.js"></script>
<script src="angular-translate.js"></script>
<script src="angular-translate-loader-static-files.js"></script>
<script src="index.js"></script>
</head>
<body ng-controller="mainController">
<div class="btn-group">
<button type="button" class="btn btn-info" ng-click="togglelang()">{{lang}}</button>
</div>
<br/>

{{'title' | translate}}
{{'content' | translate: {whitespace: num} }}
<span translate="date"></span>
</body>
</html>

index.js
var app = angular.module('app', ['pascalprecht.translate']);

app.config(function($translateProvider) {

if (!window.localStorage.getItem("lang")) {
window.localStorage.setItem("lang", navigator.language.toLowerCase() == "en-us" ? "locate-en_us" : "locate-zh_cn");
}

var lang = window.localStorage.getItem("lang");

$translateProvider.preferredLanguage(lang);

$translateProvider.useStaticFilesLoader({
prefix: 'i18n/',
suffix: '.json'
});
});

app.controller('mainController', ['$scope', '$filter', '$translate', function($scope, $filter, $translate) {
$scope.lang = window.localStorage.getItem("lang") == "locate-zh_cn" ? "En" : "zh";

$scope.togglelang = function() {
if ($translate.use() == "locate-zh_cn") {
$translate.use("locate-en_us");
window.localStorage.setItem("lang", "locate-en_us");
$scope.lang = "zh";
} else {
$translate.use("locate-zh_cn");
window.localStorage.setItem("lang", "locate-zh_cn");
$scope.lang = "En";
}
}

$scope.num = 9;

// console.log($filter('translate')('title'))
}])

i18n文件
{
"title" : "hello",
"content" : "world {{whitespace}}",
"date" : "two thousand and sixteen",
"ctrl" : "ctrl"
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 国际化中英文切换 angularjs

相关文章推荐

新的分享

章节导航