- AngularJS 国际化官网
在使用国际化前需要引入angular.min.js
、angular-translate.min.js
、angular-translate-loader-static-files.min.js
这三个JS文件
AngularJs 国际化官网 https://angular-translate.github.io/docs/#/guide/19_security
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-translate/2.18.1/angular-translate.min.js"></script>
<script src="https://cdn.bootcss.com/angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-translate/2.18.1/angular-translate.min.js"></script>
<script src="https://cdn.bootcss.com/angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.min.js"></script>
</head>
<body ng-app='index' ng-controller="indexController">
<h3 ng-bind-html="'TITLE' | translate | trustHtml"></h3>
<select ng-model="lang">
<option value="zh" selected = "selected" >{{'ZH' | translate}}</option>
<option value="en">{{'EN' | translate}}</option>
</select>
</body>
<script>
angular.module('index',['pascalprecht.translate']);
angular.module('index').config(['$injector',function ($injector) {
var $translateProvider = $injector.get('$translateProvider');
$translateProvider.translations('en',{
'TITLE':"<h1>Hello</h1>",
'FOO':'This is a paragraph',
'ZH':' Chinese',
'EN':'English'
});
$translateProvider.translations('zh',{
'TITLE':"<h1>你好</h1>",
'FOO':'这是一幅图',
'ZH':'中文',
'EN':'英文'
});
$translateProvider.useSanitizeValueStrategy(['escapeParameters']);
}]);
angular.module('index').controller('indexController',['$scope','$injector',
function indexController($scope, $injector){
$scope.lang = "zh";
var $translate = $injector.get('$translate');
$scope.$watch("lang", function (newValue) {
$translate.use(newValue);
});
}]);
angular.module('index').filter('trustHtml', ['$sce', function ($sce) {
return function (input) {
return $sce.trustAsHtml(input);
}
}])
</script>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/713f68331767e05de51f6712d54c9077.gif)