angular translate入门示例

最新推荐文章于 2024-12-02 10:07:09 发布

heibaiyuxuan

最新推荐文章于 2024-12-02 10:07:09 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angular translate angularjs

本文链接：https://blog.youkuaiyun.com/heibaiyuxuan/article/details/51237052

angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文是关于AngularJS中Angular Translate模块的入门示例，详细介绍了如何在页面中使用Angular Translate进行多语言切换，并提供了cn.json配置文件的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做angularJS，记录一下angular translate的基本使用。

页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
        <label ng-bind="test"></label>

        <p>
            <a translate="100001"></a>
            <a translate="100002"></a>
        </p>
    </div>
</body>

<script src="../js/lib/angularJS/1.4.6/angular.min.js"></script>
<script src="../js/lib/angularJS/angular-translate.min.js"></script>
<script src="../js/lib/angularJS/angular-translate-loader-static-files.min.js"></script>
<script src="../js/index.js"></script>
</html>

js：

var app = angular.module('myApp', ['pascalprecht.translate']).config(['$translateProvider',function($translateProvider){
    var lang = window.localStorage.lang || 'cn';
    console.info(lang);
    $translateProvider.preferredLanguage(lang);
    $translateProvider.useStaticFilesLoader({
        prefix: '../i18n/',
        suffix: '.json'
    });
}]);

app.controller('myController', ['$scope', '$translate', function (scope, $translate) {
    scope.switching = function(lang){
        $translate.use(lang);
        window.localStorage.lang = lang;
        window.location.reload();
    };
    scope.test = '11111111111';

    $translate('100001').then(function (key) {
        console.info('trans --------' + key);
        scope.test = key;
    });

    //$translate(['HEADLINE', 'PARAGRAPH', 'NAMESPACE.PARAGRAPH']).then(function (translations) {
    //    $scope.headline = translations.HEADLINE;
    //    $scope.paragraph = translations.PARAGRAPH;
    //    $scope.namespaced_paragraph = translations['NAMESPACE.PARAGRAPH'];
    //});

}]);

cn.json：

{"100001":"登录","100002":"注册"}