项目国际化已经成为现在开发中的一个不可或缺的部分应公司要求实现国际化,尤其适用了angularjs来实现国际化,话不多说直接看操作
1,配置国际化
1.1 引入js文件
<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>
1.2 注册配置国际化
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实现国际化操作