AngularJS 国际化

最新推荐文章于 2024-06-24 09:11:31 发布

书香水墨

最新推荐文章于 2024-06-24 09:11:31 发布

阅读量621

点赞数

分类专栏：前端文章标签： AngularJS

本文链接：https://blog.csdn.net/qq_27870421/article/details/89194897

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

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.useStaticFilesLoader({
        //     prefix: '/T/',
        //     suffix: '.json'
        // });

        $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.preferredLanguage("zh");
        //
        // // 默认加载语言包
        // $translateProvider.fallbackLanguage('zh');

        //
        // sanitize：使用翻译文本清理HTML $sanitize
        // escape：在翻译中转义HTML
        // sanitizeParameters：使用插值参数的值清理HTML中的HTML $sanitize
        // escapeParameters：在插值参数的值中转义HTML
        // sce：在$sce.trustAsHtml（值）中包装HTML
        // sceParameters：在$ sce.trustAsHtml（value）中的插值参数的值中包装HTML
        $translateProvider.useSanitizeValueStrategy(['escapeParameters']);

        // $translateProvider.useLoader('translationLoader');
        
        // 获取FOO表示的对应值。中文下为'这是一幅图'，英文下为'This is a paragraph'
		// $translate.instant("This is a paragraph"); 
    }]);

    // 选择框改变时，改变语言
    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);
        });

    }]);

    // 转义HTML标签
    angular.module('index').filter('trustHtml', ['$sce', function ($sce) {
        return function (input) {
            return $sce.trustAsHtml(input);
        }
    }])

</script>

</html>

运行效果如下

在这里插入图片描述

书香水墨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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="ht...
复制链接

扫一扫