Angularjs之国际化

发布时间:2019-06-12 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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

//当数组中有重复数据时,ng-repeat不起作用(Angular默认需要在数组中使用唯一索引)
$scope.arr2 = [1, 1, 3];
<ul>
    <li ng-repeat="item in arr2 track by $index">{{item}}</li>
</ul>

ng-if/ng-show


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)}}

不会改变数据模型。

单向数据绑定

参考资料

@L_406_8@
Angularjs简介
Angularjs中文指南
民工叔博客

脚本宝典总结

以上是脚本宝典为你收集整理的Angularjs之国际化全部内容,希望文章能够帮你解决Angularjs之国际化所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。