AngularJS国际化配置

本文详细介绍了AngularJS应用中实现国际化的步骤,包括下载angular-translate库,将其引入到项目js文件,加载translate组件,创建en.json和cn.json等多语言文件,并在HTML和JS代码中如何使用这些翻译资源。
摘要由CSDN通过智能技术生成

AngularJS国际化配置

下载angular-translate

下载zip包:https://github.com/angular-translate/bower-angular-translate/releases

引入到js文件

<script src="/bower_components/angular-translate-2.15.2/angular-translate.min.js"></script>
<script src="/bower_components/angular-translate-loader-static-files-2.15.2/angular-translate-loader-static-files.min.js"></script>

加载tranlate组件

var authModule = angular.module("AuthModule", ['pascalprecht.translate']);

var transProvider = function($translateProvider) {
    var lang = window.localStorage.lang || 'cn';
    $translateProvider.preferredLanguage(lang);
    $translateProvider.useStaticFilesLoader({
        prefix: '/i18n/',
        suffix: '.json'
    });
};


authModule.config(['$translateProvider', transProvider]);

建立多语言文件

在项目中建立i18n目录。并且在目录下建立对应语言的文件,例如:
- en.json
- cn.json

在消息文件内容写入:

{
  "name": "名字",
}

在html中使用

<div>{{each.data.name | translate }}</div>

在js代码中进行翻译

$scope.name = $translate.instant("name");

@完

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值