angularjs 实现国际化
2016-05-23 16:55
429 查看
项目国际化已经成为现在开发中的一个不可或缺的部分应公司要求实现国际化,尤其适用了angularjs来实现国际化,话不多说直接看操作
关于translate的几个文件都需要引入,引入angularjs-cookie的作用是,当用户切换了语言,刷新之后,会显示用户操作的语言
在html中使用translate:
html中:
js中:
以上就是angularjs实现国际化操作
1,配置国际化
1.1 引入js文件
我们都知道要使用第三方库文件,就必须要引入一些文件,比如样式文件,js文件,要实现国际化需要引入angularjs的几个文件<span style="white-space:pre"> </span><script type="text/javascript" src="resources/angular/angular.min.js"></script> <script type="text/javascript" src="resources/angular/angular-cookies.min.js"></script> <script type="text/javascript" src="resources/angular/angular-translate.min.js"></script> <script type="text/javascript" src="resources/angular/translate-service/storage-cookie.js"></script> <script type="text/javascript" src="resources/angular/translate-service/loader-static-files.js"></script>
关于translate的几个文件都需要引入,引入angularjs-cookie的作用是,当用户切换了语言,刷新之后,会显示用户操作的语言
1.2 注册配置国际化
引入js文件之后,需要在app中注册一下,在controller中注册$translateangular.module('main', [ "pascalprecht.translate", "ngCookies" ]) .config(['$translateProvider', function($translateProvider){ //json文件路径 $translateProvider.useStaticFilesLoader({ prefix: '/programe/hanlet/statices/data/', suffix: '.json' }); //默认使用英文 $translateProvider.preferredLanguage('en_US'); //保存到cookie中 $translateProvider.useCookieStorage(); }])<pre name="code" class="html">.controller("loginCtrl", function($translate) { //国际化 $scope.setLang = function(langKey) { $translate.use(langKey); }; });
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre code_snippet_id="1693633" snippet_file_name="blog_20160523_3_5069568" name="code" class="javascript">//注册之后,在data文件下创建中英文json文件,格式如下:按键值对书写
<span style="font-family: Arial, Helvetica, sans-serif;">{</span>
"User Guide":"User Guide" }
<pre name="code" class="plain">{ "User Guide":"用户指导" }
在html中使用translate:
<h3 class="modal-title">{{"User Guide"|translate}}</h3>
2,切换语言事件
定义切换事件:html中:
<a href="#" ng-click="setLang('en_US')">English</a> | <a href="#" ng-click="setLang('zh_CH')">中</a>
js中:
//切换中英文 $scope.setLang = function(langKey) { $translate.use(langKey); };
以上就是angularjs实现国际化操作
相关文章推荐
- 浅谈Ruby on Rails的国际化
- JavaScript面对国际化编程时的一些建议
- AngularJS基础教程之简单介绍
- AngularJS中处理多个promise的方式
- php程序的国际化实现方法(利用gettext)
- AngularJS入门(用ng-repeat指令实现循环输出
- angularJS 中$attrs方法使用指南
- AngularJS实现textarea记录只能输入规定数量的字符并显示
- 深入浅析AngularJS和DataModel
- 简述AngularJS相关的一些编程思想
- 不能不知道的10个angularjs英文学习网站
- AngularJS中的$watch(),$digest()和$apply()区分
- Angularjs中的事件广播 ―全面解析$broadcast,$emit,$on
- AngularJS的一些基本样式初窥
- 简单讲解AngularJS的Routing路由的定义与使用
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- Angular发布1.5正式版,专注于向Angular 2的过渡
- 简介AngularJS的视图功能应用
- AngularJS语法详解