angularjs 实现国际化

项目国际化已经成为现在开发中的一个不可或缺的部分应公司要求实现国际化,尤其适用了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中注册$translate
angular.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实现国际化操作


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值