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];
    
    
     
{
   {item}}
    

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

不会改变数据模型。

参考资料