angularJs国际化，多语言切换

东明兄 • 2018-08-29 • 开发笔记 • 4774 阅读
chat

做的项目需要国际化，能够切换不通的语言，在做之前先根据网上的方案写了两个例子，

使用angular-translate插件实现：

具体代码： 

<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="MainCtrl as mainctrl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="angular_v1.7.2/angular.js"></script>
    <script src="bower-angular-translate-2.18.1/angular-translate.js"></script>

</head>
<body>
<!--<div  ng-app="myapp">-->
<!--<div ng-controller="MainCtrl as mainctrl">-->

<h1>test1</h1>
{{defaultLanguage}}

<select ng-model="defaultLanguage" ng-click="changeLanguage()" ng-options="x.english as x.lang for x in language">

</select>

<h1>{{ 'edit' | translate }}</h1>
<h1>{{ 'delete' | translate }}</h1>
<!--<span translate="delete"></span>-->
<!--</div>-->

<!--</div>-->
<script>
    var myapp = angular.module("myapp", ['pascalprecht.translate']);

    myapp.controller("MainCtrl", function ($scope, $translate) {

        $scope.lang = navigator.language || navigator.userLanguage;
        console.log( $scope.lang);//通过浏览器检测语言
        $scope.defaultLanguage = "";


        $scope.language = [
            {id: 1, lang: "English", english: "english"},
            {id: 2, lang: "中文简体", english: "simplifiedChinese"},
            {id: 3, lang: "中文繁體", english: "traditionalChinese"},
            {id: 4, lang: "Việt", english: "vietnamese"},
            {id: 5, lang: "العربية", english: "arabic"},
        ];

        $scope.changeLanguage = function () {
            localStorage.setItem("language", $scope.defaultLanguage);
            $translate.use($scope.defaultLanguage)
        }



        $scope.getDefaultLanguage = function () {
            if (localStorage.getItem("language") === null) {
                $scope.defaultLanguage = "english";
            } else {
                $scope.defaultLanguage = localStorage.getItem("language")
            }
            $scope.changeLanguage();
        };

        $scope.getDefaultLanguage();




    });

    myapp.config(['$translateProvider', function ($translateProvider) {
        $translateProvider.translations('English', {
            'delete': 'delete',
            'edit': 'edit'
        });

        $translateProvider.translations('simplifiedChinese', {
            'delete': '删除',
            'edit': '编辑',
        });

        $translateProvider.translations('traditionalChinese', {
            'delete': '繁体删除',
            'edit': '繁体编辑'
        });

        $translateProvider.translations('vietnamese', {
            'delete': '越南语删除',
            'edit': '越南语编辑'
        });

        $translateProvider.translations('arabic', {
            'delete': '阿拉伯语删除',
            'edit': '阿拉伯语编辑'
        });
        $translateProvider.preferredLanguage('simplifiedChinese');


    }]);


</script>


</body>
</html>

这样做已经可以实现多语言切换了，但是要在js中配置多语言数据，不太合适，再利用http://angular-translate.github.io/ 


<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="MainCtrl as mainctrl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/angular_v1.7.2/angular.js"></script>
    <script src="/bower-angular-translate-2.18.1/angular-translate.js"></script>
    <script src="/bower-angular-translate-2.18.1/angular-translate-loader-static-files.js"></script>
  
</head>
<body>
    {{defaultLanguage}}

    <select  ng-model="defaultLanguage" ng-click="changeLanguage()"  ng-options="x.english as x.lang for x in language">

    </select>

    <h1>{{ 'edit' | translate }}</h1>
    <h1>{{ 'delete' | translate }}</h1>
    <span translate="delete"></span>
    <script>
     var myapp = angular.module("myapp", ['pascalprecht.translate']);
     myapp.controller("MainCtrl", function ($scope, $translate) {

         var lang = navigator.language||navigator.userLanguage;
         console.log(lang);//通过浏览器检测语言

         if(localStorage.getItem("language")){
             $scope.defaultLanguage=localStorage.getItem("language")
         }else {
             $scope.defaultLanguage = "english";
         }


         $scope.language =[
             {id:1,lang:"English",english:"english"},
             {id:2,lang:"中文简体",english:"simplifiedChinese"},
             {id:3,lang:"中文繁體",english:"traditionalChinese"},
             {id:4,lang:"Việt",english:"vietnamese"},
             {id:5,lang:"العربية",english:"arabic"},
         ]

         $scope.changeLanguage = function () {
             localStorage.setItem("language", $scope.defaultLanguage);
             $translate.use($scope.defaultLanguage)
             console.log($scope.defaultLanguage);
         }


         $scope.getDefaultLanguage = function () {
             if (localStorage.getItem("language") === null) {
                 $scope.defaultLanguage = "english";
             } else {
                 $scope.defaultLanguage = localStorage.getItem("language")
             }
             $scope.changeLanguage();
         };

         $scope.getDefaultLanguage();




     })


     myapp.config(['$translateProvider', function ($translateProvider) {


         $translateProvider.useStaticFilesLoader({
             files: [{
                 prefix: '/langConfig/',//语言包路径
                 suffix: '.json'   //语言包后缀名
             }]
         });
         $translateProvider.fallbackLanguage('english');//默认加载语言包

     }]);
    </script>

      <!--<script src="translate.js"></script>-->
</body>
</html>

相关链接：

https://cdnjs.com/libraries/angular-translate-loader-static-files

http://angular-translate.github.io/

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/574/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
angularJs国际化，多语言切换
angularJs实现多语言切换
<<上一篇
下一篇>>
chat