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)}}
不会改变数据模型。
