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

不会改变数据模型。

单向数据绑定

参考资料

Angular-translate
Angularjs简介
Angularjs中文指南
民工叔博客