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");

@完

AngularJS国际化配置的更多相关文章

  1. AngularJS $http配置为form data 提交

    AngularJS $http配置为form data 提交 $scope.formData = {}; $http({ method: 'POST', url: '/user/', // pass ...

  2. springmvc国际化 基于请求的国际化配置

    springmvc国际化 基于请求的国际化配置 基于请求的国际化配置是指,在当前请求内,国际化配置生效,否则自动以浏览器为主. 项目结构图: 说明:properties文件中为国际化资源文件.格式相关 ...

  3. springmvc国际化 基于浏览器语言的国际化配置

    当前标签: springmvc   springmvc国际化 基于浏览器语言的国际化配置 苏若年 2013-10-09 13:03 阅读:305 评论:0   SpringMVC中应用Ajax异步通讯 ...

  4. spring MVC 使用 hibernate validator验证框架,国际化配置

    spring mvc使用hibernate validator框架可以实现的功能: 1. 注解java bean声明校验规则. 2. 添加message错误信息源实现国际化配置. 3. 结合sprin ...

  5. SpringBoot 国际化配置,SpringBoot Locale 国际化

    SpringBoot 国际化配置,SpringBoot Locale 国际化 ================================ ©Copyright 蕃薯耀 2018年3月27日 ht ...

  6. Spring MVC + Velocity实现国际化配置

    国际化介绍 web开发中,国际化是需要考虑的一个问题,而且这个问题一般是越早敲定越好(不然等到系统大了,翻译是个问题).下面是结合实际项目(Spring MVC+Velocity)对实现国际化的一些总 ...

  7. Spring Security教程(5)---- 国际化配置及UserCache

    这一章是为了给后面的讲解打基础的,主要介绍下国际化的配置及UserCache的配置及使用 国际化配置 <!-- 定义上下文返回的消息的国际化 --> <bean id="m ...

  8. Maven下Flex国际化配置

    之前写了flashbulid.initellij下的flex国际化配置,它们都是在本地打包发布的,那么我们的工程用maven管理了,需要自动发布.这时候如何修改flex的pom文件,来让它build的 ...

  9. angular项目国际化配置(ngx-translate)

    原文 https://www.jianshu.com/p/7d1da3098625 大纲 1.认识ngx-translate 2.ngx-translate的配置步骤 3.ngx-translate的 ...

随机推荐

  1. [label][git-commands] Several Git Commands

    The process of Git commands Operation 1. git commit -m 'fist post' Windows PowerShellCopyright (C) 2 ...

  2. C# BackgroundWorker 的使用、封装

    示例代码: PT_USER_INFO user = new PT_USER_INFO(); IList<TES_COMBAT_TASK> taskList = new List<TE ...

  3. TestNG参数化之@Parameters传参

    通过TestNG实现参数话常用两种方式,一种是借助 @Parameters读取testng.xml中参数,一种是使用@DataProvider注解传参. 此次主要讲解XML传参,语法:在java类中定 ...

  4. Java50道经典习题-程序7 处理字符串

    题目:输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数.分析:利用while语句,条件为输入的字符不为'\n'. import java.util.*; public class Pr ...

  5. shell脚本报错:-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory

    当我们把文件从windows系统中编辑的文件拷贝到linux系统中,如果我们执行文件会保存如下的错: shell脚本报错:-bash: xxx: /bin/bash^M: bad interprete ...

  6. Lora通讯

    Lora通讯 今年放弃了电源,踏入了物联网行业,也不知道算不算放弃吧,但我内心始终在呐喊,早晚会把你拿下,现在暂且放过你! 首先普及一下物联网,物联网是21世纪兴起的行业,最开始是由比尔盖茨在1995 ...

  7. 【BZOJ2440】[中山市选2011]完全平方数

    题意描述 原题 一句话描述: 求第K个不是完全平方数的倍数的数. K≤$10^{9}$ ------------------------------------------ 题解: 首先,直接求第$k ...

  8. Elasticsearch5.4 删除type

    首先要说明的是现在的Elasticsearch已经不支持删除一个type了,所以使用delete命令想要尝试删除一个type的时候会出现如下错误,如果存在一个名为edemo的index和tets的ty ...

  9. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  10. python --爬虫基础 --爬取今日头条 使用 requests 库的基本操作, Ajax

    '''思路一: 由于是Ajax的网页,需要先往下划几下看看XHR的内容变化二:分析js中的代码内容三:获取一页中的内容四:获取图片五:保存在本地 使用的库1. requests 网页获取库 2.fro ...