脚本宝典收集整理的这篇文章主要介绍了Angularjs之国际化,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Angularjs国际化
公司需要开发一个供应商后台系统,从gIThub上找了一套模板INSPinia,前端UI用Bootstrap,框架用的Angularjs。使用Angular是因为Angularjs是一个完善的前端MVC框架,包含带有丰富指令的模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。而且github上有很多成熟的基于angular的库,便于项目快速迭代。
项目中有外国供应商接入,所以有国际化需求,angular在国际化这块已经有成熟的插件支持angular-translate,总结下项目中实现国际化的过程:
语言
//初始化加载的模块
$translatePartialLoaderPRovider.addPart('XXX');
//不同模块加载不同语言翻译数据
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'js/languages/{part}/{lang}.json'
});
//默认选择使用语言
$translateProvider.preferredLanguage('zh');
//存储上次选择语言
$translateProvider.useCookieStorage();
//当前view下调用对应的语言模块
$translatePartialLoader.addPart('orderlist');
$translate.refresh();
// 切换语言
if (Store.get("language")) {
$scoPE.language = store.get("language");
} else {
$scope.language = "zh";
}
$scope.changeLanguage = function(langkey) {
$translate.use(langkey);
store.set('language', langkey);
};
//插值表达式使用变量
{{'ORDER_INFO' | translate}}
时间
//localtime转化成utc 时间
$scope.toUTCDate = function(date) {
VAR _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours() + 8, date.getUTCMinutes(), date.getUTCSeconds());
return _utc;
};
$scope.millisToUTCDate = function(millis) {
return toUTCDate(new Date(millis));
};
{{millisToUTCDate(orders.createTime) | date : 'yyyy-MM-dd HH:mm:ss'}}
//如果使用angular 1.4.X版本
{{‘unix date’ | date : 'yyyy-MM-dd HH:mm:ss':'+0800'}}
下面是看一些比较好的Angularjs文章收集的栗子
//当数组中有重复数据时,ng-repeat不起作用(Angular默认需要在数组中使用唯一索引)
$scope.arr2 = [1, 1, 3];
<ul>
<li ng-repeat="item in arr2 track by $index">{{item}}</li>
</ul>
ng-if条件值为true时,才会动态创建一个dom节点;ng-show则是无论条件值为true或者false都创建这个dom节点,依靠css display属性来隐藏dom节点。
格式化函数
$scope.changeOrderstate = function(orderState) {
var stateMap = {
'WaiT_STOCKOUT': '待发货',
'STOCKOUTING': '发货中'
};
return stateMap[orderState];
};
view:
{{changeOrderState(orders.state)}}
不会改变数据模型。
参考资料
以上是脚本宝典为你收集整理的Angularjs之国际化全部内容,希望文章能够帮你解决Angularjs之国际化所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。