angular.js国际化模块
生活随笔
收集整理的這篇文章主要介紹了
angular.js国际化模块
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近需要將一個項目轉化成英文的, 于是發現一個angular模塊angular-translate,實現如下:
1.安裝包
bower install angular-translate bower install angular-translate-loader-static-files //然后在頁面引用進去 <script?src="/angular-translate.min.js"></script> <script?src="/angular-translate-loader-static-files.min.js"></script>//路徑依據項目路徑來
2.新建一個文件夾,里面新建兩個文件en.json和cn.json
en.json文件內容如下
{"100001":"Login","100002":"Register"}cn.json文件內容如下
{"100001":"登錄","100002":"注冊"}3.接下來要注入依賴,在config文件夾下面,新建一個translate.config.js文件
(function(angular) {"use strict";angular.module("app") //?angular.module('app',?['pascalprecht.translate'])注意區別,這樣寫是錯誤的, .config(['$translateProvider',function($translateProvider){var lang = window.localStorage.lang || 'cn'
$translateProvider.preferredLanguage(lang)
$translateProvider.useStaticFilesLoader({
prefix: '/i18n/', //指定文件前綴
suffix: '.json' //指定文件后綴
})
}])
})(angular);
4.在頁面中使用
<select ng-model="cur_lang" ng-change="vm.userInfo.switching(cur_lang)"><option value="en">English</option><option value="cn">簡體中文</option></select> function switching(lang) { $translate.use(lang) window.localStorage.lang = lang window.location.reload() } $scope.cur_lang = $translate.use();
5.新建一個filters文件夾,里面新建一個T.js
(function(angular){angular.module('app.filters').filter("T",['$translate',function($translate){return function(key){if(key){return $translate.instant(key)}}}]) })(angular)6.在頁面應用時候如下:
<li class="m on"><a ui-sref="main.home">{{'100001'|T}}</a></li>然后就OK了
?
轉載于:https://www.cnblogs.com/alhh/p/8421142.html
總結
以上是生活随笔為你收集整理的angular.js国际化模块的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win10删除自定义的背景图片历史记录
- 下一篇: 简单的面试题简解思路(搜集)