文档章节

angular-translate 使用测试记录

开心最佳
 开心最佳
发布于 2016/09/09 08:58
字数 606
阅读 318
收藏 1

安装就不赘述了。主要记录在使用时的方法调用和注意事项。

对$translateProvider配置:

(1)异步请求文件的配置方法

angular.module('httpApp',['pascalprecht.translate'])
                .config(['$translateProvider',function ($translateProvider){
                    var lang = window.localStorage.lang||'zh-cn';
                    $translateProvider.preferredLanguage(lang);
                    $translateProvider.useStaticFilesLoader({
                        prefix: '/lang/',
                        suffix: '.json'
                    });
                    $translateProvider.useSanitizeValueStrategy('escapeParameters');
                }

 

1.使用preferredLanguage(lang)配置初始使用语言,lang为使用的语言;

2.使用useStaticFilesLoader(option)配置应该加载本地国际化语言配置文件的位置,其中option中属性‘prefix’为文件前缀,‘suffix’为后缀

以上配置后,会在‘/lang/zh-cn.json’位置找到对应的json文件获取语言内容。

3.$translateProvider.useSanitizeValueStrategy('escapeParameters')这一段使用‘escapeParameters’的策略类型,如果不使用会出现警告(未深究原理):

pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured. This can have serious security implications. See http://angular-translate.github.io/docs/#/guide/19_security for details.

‘/lang/zh-cn.json’文件应为合理的json文件内容为

{
  "HEADLINE": "你好!",
  "INTRO_TEXT": "这是中文!"
}

‘/lang/en.json’同理

(2)直接在配置代码中加入语言,不将语言分开加载:

angular.module('httpApp',['pascalprecht.translate'])
                .config(['$translateProvider',function ($translateProvider){
                    var lang = window.localStorage.lang||'zh-cn';
                    $translateProvider.preferredLanguage(lang);
                    $translateProvider.translations('zh-cn', {
                        HEADLINE: '你好!',
                        INTRO_TEXT: '这是中文!'
                    })
                    .translations('en', {
                        HEADLINE: 'hell!',
                        INTRO_TEXT: 'this's english!'
                    });
                    $translateProvider.useSanitizeValueStrategy('escapeParameters');
                }

以上直接在文件中使用translations()方法配置,加入使用的语言对应键值对象即可。

在translations()方法配置和useSanitizeValueStrategy()方法配置同时存在时,会优先使用缓存的语言,既translations()方法配置的语言内容,若没有对应的语言才考虑使用文件内容。

 

语言使用:

1.在html中使用

<div ng-controller="myCtrl">
    <div>
        <h2 ng-bind="'HEADLINE' | translate"> </h2>
        <p>{{'INTRO_TEXT' | translate}}</p>
    </div>
    <button ng-click="changeLang()">语言</button>
</div>

 angular-translate内已封装了将对应的键值的转译filter:‘translate’,只要用对应的键值加上‘|translate’即可获得对应的语言内容。

2.在js中使用:

.controller('myCtrl',function($scope, $filter){
    $scope.changeLang = function (){
        var lang = $filter('translate')('key');
    }

既在controller内调用过滤器filter,从而获取到相应的数据

语言切换:

.controller('myCtrl',function($scope, $translate){
    $scope.changeLang = function (){
        var lang = $translate.use();
        lang == 'zh-cn'? $translate.use('en'): $translate.use('zh-cn');
    }

在引入‘$translate’对象,调用其use(lang)方法其中lang为要切换的语言。

 

参考:http://blog.csdn.net/dream182/article/details/52232770

http://blog.csdn.net/daniel7443/article/details/51160420

© 著作权归作者所有

开心最佳
粉丝 1
博文 5
码字总数 825
作品 0
深圳
私信 提问
加载中

评论(1)

梦延年
梦延年
大佬你好,可以加个微信吗,我是按照你这样写的,但还是没有效果,可以帮我看看什么原因吗?微信tychen11
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.4K
19
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7K
22
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
166
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部