angularJs国际化,多语言切换

Daming 2018-08-29
1条评论 2,304 次浏览
Daming 2018-08-291条评论 2,304 次浏览

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

使用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/

1+

angularJs国际化,多语言切换” 有1条评论

  1. Hello there,

    My name is Aly and I would like to know if you would have any interest to have your website here at crazyming.cn promoted as a resource on our blog alychidesign.com ?

    We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
    .
    If you may be interested please in being included as a resource on our blog, please let me know.

    Thanks,
    Aly

    0

发表评论

电子邮件地址不会被公开。