在實際開發中會遇到很多類似模塊界面大體都一致只是極少的細節部分不一樣，這時不管是在html頁面還有js及數據交互的時候我們就沒必要因為這些不同的頁面分出不同的文件，這樣很浪費內存及效率，於是我在開發中想到一種辦法：通過ng路由傳遞參數使其多個頁面都可以使用一套總體的文件來管理編輯。這樣既提高開發效率也節省資源內存。

首先在列表數據中，鏈接設置跳轉路由及參數，多個參數可以使用對象方法傳遞，這裏我使用對象傳遞兩個參數一個是跳轉過去的詳情查詢ID，另一個就是頁面的標識符：

1 <div class="col-md-3 itemPr">
2 　　<a target="_blank"
 
 ui-sref="bargainDetail({id:b.id,appDetail:‘RENTDetail‘})">
3    　　<h4>產品總價: <span ng-bind="b.realReceivable"></span>元</h4>
4   　　 <h4 ng-if="b.received">已收金額: <span ng-bind="b.received"></span>元</h4>
5  　</a>
6 </div>

然後設置此路由並接受路由中的參數：

 1 // 產品公共詳情
 

 2 .state(‘residenceResourceDetails‘,{
 3 　　url:‘/residenceResourceDetails/:id/:appDetail‘,
 4    views:{
 5    　　‘ts-view‘:{
 6       　　controller:‘residenceResourceDetailsCtrl‘,
 7          templateUrl:‘tpl/resourceRent/residenceResourceDetails.html‘
 8    　　}
 9 　　}
10 })

接下來在對應中的控制器中接受路由傳遞的參數並做以下設置：

 1 // 接口設置
 2 if($stateParams.appDetail===‘RENTDetail‘){ // 示例1
 3     $scope.xxxxxionBTN=false; // XXXXX 顯示隱藏
 4     $scope.xxxxxionPAGEURL=‘xxxxxList‘; // XXXXX 接口地址
 5     $scope.xxxxxmissionURL=‘xxxxxission‘; // XXXXX 接口地址
 6     $scope.xxxxxommissionURL=‘xxxxxission‘; // XXXXX 接口地址
 7     $scope.xxxxxtCommissionConfirmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
 8     $scope.xxxxxtCommissionAuditTimeURL=‘xxxxxditTime‘; // XXXXX 接口地址
 9     $scope.xxxxxinURL=‘xxxxxondHouse‘; // XXXXX  接口地址
10 
11 }else if($stateParams.appDetail===‘SELLDetail‘){ // 示例2
12     $scope.xxxxxonBTN=true; // XXXXX 顯示隱藏
13     $scope.xxxxxPAGEURL=‘xxxxxsionList‘; // XXXXX 接口地址
14     $scope.xxxxxssionURL=‘xxxxxmission‘; // XXXXX 接口地址
15     $scope.xxxxxsionURL=‘xxxxxssion‘; // XXXXX 接口地址
16     $scope.xxxxxfirmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
17     $scope.xxxxxonAuditTimeURL=‘xxxxxAuditTime‘; // XXXXX 接口地址
18     $scope.xxxxxinURL=‘xxxxxdHouse‘; // XXXXX 接口地址
19 
20 }else if($stateParams.appDetail===‘NEWDetail‘){ // 示例3
21     $scope.xxxxxPAGEURL=‘xxxxxsionList‘; // XXXXX 接口地址
22     $scope.xxxxxRL=‘xxxxxuse‘; // XXXXX 接口地址
23     $scope.xxxxxionURL=‘xxxxxission‘; // XXXXX 接口地址
24     $scope.xxxxxmmissionURL=‘xxxxxssion‘; // XXXXX 接口地址
25     $scope.xxxxxrmTimeURL=‘xxxxxfirmTime‘; // XXXXX 接口地址
26     $scope.xxxxxditTimeURL=‘xxxxxitTime‘; // XXXXX 接口地址
27 }

以上是在一個公共頁面中，路由分別傳遞過來的參數，通過傳遞過來的參數我們在控制器中註入 $stateParams 服務來接收參數，上面的每個分支判斷中都是一個頁面的數據接口及哪些按鈕展示哪些按鈕不展示，這樣一來在一個公共的html頁面中展示通過模塊的鏈接控制他的鏈接顯示隱藏，在通過列表中的鏈接控制詳情中的數據顯示，通過這些操作只需要有不同的導航及一個公共頁面一個公共控制器文件就可以解決多個模塊類似的頁面顯示及數據交互，這樣操作大大節省了資源占用及開發速度。

AngularJs通過路由傳參解決多個頁面資源浪費問題