angularjs 實現國際化__js

來源:互聯網
上載者:User

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


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.