angular 多语言
Quick Start
Install module
- Via Bower
$ bower install angular
$ bower install angular-translate
$ bower install angular-translate-loader-static-files- Via Npm
$ npm install --save-dev angular
$ npm install --save-dev angular-translate- Via bower.json || package.json
## bower install || npm install
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "irene",
"license": "ISC",
"devDependencies": {
"angular": "^1.6.7",
"angular-translate": "^2.16.0",
"angular-translate-loader-static-files": "^2.16.0"
}
}
相关解释
angular-translate 是angular提供的，用来处理多语言的包
它有多种使用方式：可以作为指令(directives)或者过滤器(filters)，他们使用共同的$translate 服务
angular-translate-loader-static-files 通过加前/后缀，可以让你传输的数据拥指定的格式
文件夹结构
app
- html
- app.html
- js
- app.js
- i18n
- language-cn.json
- language-en.json
- node_modules
- angular
- angular-translate
- angular-translate-loader-static-files
- package.json
Getting Started
1. app.html
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>i18n apptitle>
<script src="../node_modules/angular/angular.min.js">script>
<script src="../node_modules/angular-translate/dist/angular-translate.min.js">script>
<script src="../node_modules/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js">script>
<script src="../js/app.js">script>
head>
<body ng-controller="appController as app">
<ul>
<li ng-repeat="(key, name) in app.languageChoice">
<a href="javascript:void(0)" ng-click="app.chooseLanguage(key)" ng-bind="name">a>
li>
ul>
<hr/>
<div translate>hellodiv>
<hr/>
<div translate>test_languagediv>
<div translate="test_language">div>
<div ng-bind="'test_language'|translate">div>
<p>{{ 'test_language' | translate }}p>
<img src="mylogo.png" translate-attr="{ alt: 'test_language' }">
<label>
<input type="text" placeholder="{{'test_language'|translate}}">
label>
<div translate="test_language" translate-values='{ username: controllerTest.username }'>div>
body>
html>详细解释
1> HTML 中引入
<script src="path/to/angular-translate.js">script>2. app.js
$translateProvider && controller && translateStorage
var app = angular.module('myApp',['pascalprecht.translate']);
app.controller('appController', function ($translate, $scope) {
var vm = this;
vm.languageChoice = {
'en': 'English',
'cn': '简体中文'
};
vm.languageValue = vm.languageChoice[$translate.proposedLanguage()];
vm.chooseLanguage = chooseLanguage;
function chooseLanguage(language) {
$translate.use(language);
vm.languageValue = vm.languageChoice[$translate.proposedLanguage()];
$scope.$broadcast('changed', language);
}
return vm;
});
app.config(function ($translateProvider) {
var preferLanguage = 'en';
if (navigator.language.indexOf('zh') >= 0) {
preferLanguage = 'cn';
}
$translateProvider
.useStaticFilesLoader({
// prefix: '/api/base/language/',
// suffix: ''
prefix: '../i18n/language-',
suffix: '.json'
})
.preferredLanguage(preferLanguage)
.fallbackLanguage(['cn', 'en'])
.useStorage('translateStorage');
});
app.factory('translateStorage', function ($window) {
var langKey;
return {
put: function (name, value) {
// store `value` under `name` somehow
langKey = value;
$window.localStorage.setItem(name, value);
},
get: function (name) {
// request value of `name` somehow
if (!langKey) {
langKey = $window.localStorage.getItem(name);
}
return langKey;
}
}
});详细解释
1> 依赖注入 ‘pascalprecht.translate’
var app = angular.module('myApp',['pascalprecht.translate']);2> 发送请求
prefix 前缀：api前缀/文件名称前缀
suffix 后缀：文件名称后缀为json
## 请求接口api
prefix: '/api/base/language/',
suffix: ''
## 请求本地json文件夹
prefix: '../i18n/language-',
suffix: '.json'3> navigator
if (navigator.language.indexOf('zh') >= 0) {
preferLanguage = 'cn';
}- navigator:返回本地浏览器的一些基本配置信息，language当前浏览器使用语言
4> $stranslate
$translateProvider
.useStaticFilesLoader({
// prefix: '/api/base/language/',
// suffix: ''
prefix: '../i18n/language-',
suffix: '.json'
})
.preferredLanguage(preferLanguage)
.fallbackLanguage(['cn', 'en'])
.useStorage('translateStorage');- 链式调用$translateProvider上的方法
translateProvider.useStaticFilesLoader:告诉 translate他应该使用下面指定的文件格式
$translateProvider.preferredLanguage：当同时注册了多个方法是时，优先选择哪一种语言
$translateProvider.fallbackLanguage：定义（初始）回退语言，在找不到对应的翻译表id时，页面会会退语言中进行翻译（避免configuration运行过快导致错误）
$translateProvider.registerAvailableLanguageKeys浏览器返回的语言可能是这样的 [‘en_US’,’en_UK’,’de_DE’,’de_CH’] ,translate会把它当作四种语言，我们需要的是智能的识别出这是两种语言，可以使用下面配置:
$translateProvider
.registerAvailableLanguageKeys(['en', 'de'], {
'en_*': 'en',
'de_*': 'de'
})
.determinePreferredLanguage();5> Storage
app.factory('translateStorage', function ($window) {
var langKey;
return {
put: function (name, value) {
// store `value` under `name` somehow
langKey = value;
$window.localStorage.setItem(name, value);
},
get: function (name) {
// request value of `name` somehow
if (!langKey) {
langKey = $window.localStorage.getItem(name);
}
return langKey;
}
}
});
translateProvider.useStorage(′translateStorage′):保存当前切换好的语言，使用 window原生的$window.localStorage的方式
或者使用angular提供的包：
两种包都是提前注入依赖 'ngCookies'
##1. Using cookieStorage
$ bower install angular-translate-storage-local
$translateProvider.useLocalStorage();
##2. Using localStorage
$ bower install angular-translate-storage-cookie
$translateProvider.useCookieStorage();
6> controller $translate
$scope.$broadcast('changed', language):如果是多个页面，可以采用发消息的方式更改语言
$translate.use('en') :
传入页面切换后的语言en，页面当前的语言proposedLanguage就可以被转化
$translate.proposedLanguage():
检测到页面使用的语言，但是在语言切换时不能实时检测到语言的变换，也可结合$translate.use()使用
$translate.versionInfo() // 2.16.0
可以获得已安装的angular-translate的版本号3. i18n 翻译表(translation table)
请求本地json时的文件夹名字：i18n
##1. language-en.json
{
"hello":"hello"
"test_language":"english"
}
##2. language-cn.json
{
"hello":"你好"
"test_language":"中文"
}