ui-router uiOnParamsChanged 項目優化

angularjs 組件化（component）開發模式下，使用ui-router 做爲切換路由，當路由切換時組件模板會從新渲染加載，頁面出現跳動，而且每次都得從新渲染模板，這樣着實影響項目性能。在官網查到uiOnParamsChanged 這個方法能夠有效解決模板每次渲染的問題，它能夠監控url 上參數的變化來從新請求數據再替換到界面，而不用從新加載一遍組件，效率提高，並界面不會出現抖動。

使用條件：

1. 同一狀態下參數發生變化

2. 參數必須提早定義到url 上

3. 設置dynamic=true，即便用動態參數（reloadOnSearch=false，高版本已棄用）

4. 定義uiOnParamsChanged 方法，在此方法裏處理參數變換後的數據請求

# 與ng-table 結合使用刷新後參數有迴歸到初始值，經排查發現，ng-table getData模式每次初始化都會請求默認參數，因此要將改變後的參數賦值到ng-table 再次初始化時的默認參數

.state('home.user-groups.list', {
    url: '/user-groups/list?pager.keyword&page&count',    //刷新後能保持當前狀態
    params:{    //參數默認值設置
        page:'1',
        count:'10',
        'pager.keyword':null
    },
    component: 'userGroupsList',
//    reloadOnSearch: false,    //高版本已棄用
    dynamic:true,    //啓用動態參數
    lazyLoad: function($transition$){
        //加載對應的組件
        return $transition$.injector().get('$ocLazyLoad').load('user-groups/list/component');
    }
})

//監控參數動態變化
this.uiOnParamsChanged = function(changeParams) {
    console.log("new params: ", changeParams);
    angular.extend($state.params,changeParams);
    instance.tableParams.parameters(changeParams)
};
//將變化後的參數賦值給ng-table默認參數
ngTableDefaults.params = {
        page:Number($state.params['page']),
        count:Number($state.params['count']),
        'pager.keyword':$state.params['pager.keyword']
};
this.tableParams = new NgTableParams({},{
    $loading:true,
    counts:[],
    getData:function(params){
//        console.log(params.url());
//        $location.search(params.url());    //直接修改地址欄參數，刷新後會出現地址欄閃爍
        $state.go($state.current.name,params.url());    //參數的變化其實就是狀態變動
        return userGroupsService.get(params.url()).$promise.then(function(resp){
            params.total(resp.data.pager.total);
            return resp.data.pager.data;
        });
    }
});