項目國際化已經成為現在開發中的一個不可或缺的部分應公司要求實現國際化,尤其適用了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實現國際化操作