angularjs 实现国际化

发布时间：2020-12-17 10:09:13 所属栏目：安全来源：网络整理

导读：项目国际化已经成为现在开发中的一个不可或缺的部分应公司要求实现国际化，尤其适用了angularjs来实现国际化，话不多说直接看操作 1，配置国际化 1.1 引入js文件我们都知道要使用第三方库文件，就必须要引入一些文件，比如样式文件，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中注册$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,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实现国际化操作

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!