AngularJS和UI-Router簡化了狀態

Question

我對Angular相當陌生（僅用了幾個月），儘管自從我讀了第一本書以來我學到了很多東西，但還是有一些概念或最佳實踐我。 這可能就是其中之一。我在其中有一組狀態的時刻項目，基本上它有

• 集合 - 它列出了，在這種情況下，我做了它獨立的國家，但它需要一個centerId參數（因爲集合屬於一箇中心）。
  • 創建集合 - 因爲這需要相同的centerId，這個「可以」是集合的子狀態，但我發現這樣做時，無論何時創建集合，都必須更新父集合。所以我沒有把它作爲集合狀態的子集，而是它有它自己的centerId參數，我通過。
  • 編輯集合 - 同樣這與創建集合相同，此狀態使用與創建集合相同的控制器和實際上相同的模板。
  • 交付 - 提供集合是允許用戶更新與一組特定的信息（POD，簽名等）集合的狀態，這有它自己的狀態和模板
  • 收集 - 收集相同交付除POD之外，它有一個POC（收集證明），所以它使用與交付相同的控制器和模板
  • 導入 - 導入用於通過csv導入集合列表。

現在，所有這些國家都有一個共同點，他們都需要centerId。就像我之前所說的那樣，我可以讓它們成爲集合狀態的所有子節點，但是在更新父狀態集合列表時會出現複雜情況。它被分組，所以解析後的集合實際上會在呈現給視圖之前通過一些代碼。

這是我目前的狀態佈局：

// Now set up the states 
$stateProvider.state('collections', { 
    url: '/collections/:centerId', 
    templateUrl: '/assets/tpl/collections/index.html', 
    controller: 'CollectionsController', 
    controllerAs: 'controller', 
    resolve: { 

     // Resolve our collections before the state loads 
     collections: ['$stateParams', 'CollectionsService', function ($stateParams, service) { 

      // Get our center id 
      var centerId = $stateParams.centerId; 

      // Return our collections 
      return service.get(centerId); 
     }] 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Collections' 
    } 
}).state('savingCollections', { 
    url: '', 
    abstract: true, 
    resolve: { 

     // Resolve our statuses 
     statuses: ['Api', function (api) { 

      // Return our statuses 
      return api.get('/api/statuses'); 
     }] 
    } 
}).state('savingCollections.import', { 
    url: '/collections/:centerId/import', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/import.html', 
      controller: 'ImportCollectionsController', 
      controllerAs: 'controller', 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Import your collections' 
    } 
}).state('savingCollections.create', { 
    url: '/collections/:centerId/create', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/save.html', 
      controller: 'SaveCollectionController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 

     // Creates a blank collection so that the injection works 
     collection: function() { 

      // Return an empty object 
      return {}; 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Create your collection' 
    } 
}).state('savingCollections.edit', { 
    url: '/collections/:centerId/edit/:id', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/save.html', 
      controller: 'SaveCollectionController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 

     // Gets a collection from the API 
     collection: ['$stateParams', '$q', 'CollectionsService', function ($stateParams, $q, service) { 

      // Get our ids 
      var id = $stateParams.id, 
       centerId = $stateParams.centerId; 

      // return our collection 
      return service.get(centerId, id); 
     }] 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Update your collection' 
    } 
}).state('savingCollections.receiveCollections', { 
    url: '', 
    abstract: true, 
    params: { 
     selected: null 
    }, 
    resolve: { 
     selected: ['$stateParams', function ($stateParams) { 

      // Get our selected items 
      var selected = $stateParams.selected; 

      // If we have something in our parameters 
      if (selected) { 

       // Save them into our session 
       sessionStorage.selected = angular.toJson(selected); 
      } 

      // Return our selected items 
      return angular.fromJson(sessionStorage.selected); 
     }] 
    }, 
}).state('savingCollections.receiveCollections.collect', { 
    url: '/collections/:centerId/collect', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/receive.html', 
      controller: 'CollectCollectionsController', 
      controllerAs: 'controller' 
     } 
    }, 
    params: { 
     collecting: true 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Collect' 
    } 
}).state('savingCollections.receiveCollections.deliver', { 
    url: '/collections/:centerId/deliver', 
    controller: 'CollectCollectionsController', 
    controllerAs: 'controller', 
    views: { 
     '@': { 
      templateUrl: '/assets/tpl/collections/receive.html', 
      controller: 'CollectCollectionsController', 
      controllerAs: 'controller' 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Deliver' 
    } 
}); 

我希望這是足夠的信息。 如果你不確定我想要做什麼，基本上我想讓我的狀態容易閱讀和理解。我喜歡這樣，如果有人看着這些國家，他們就會知道到底發生了什麼。 另外，我想從醜陋的UI，srefs像這樣剋制：

ui-sref="savingCollections.receiveCollections.deliver({ centerId: controller.centerId, selected: [collection]})" 

任何幫助，將不勝感激。

Answer 1

你的狀態聲明並不差。我覺得它們很可讀。我必須提高可讀性的一點建議是將解析函數從狀態聲明中移出到另一個地方，並簡單地按名稱引用它們。您可以將它們放在州代碼的下面，或者將它們放在不同的服務中。

我把我的不同的服務，像這樣：

var resolveFunctions = { 
    resolveData: function($q, $stateParams, dataService) { 
     //getData returns a promise 
     return dataService.getData($stateParams.id); 
    }  
} 

angular.module("myModule").constant("resolveFunctions", resolveFunctions); 

這個決心功能檢索基於狀態參數的ID的一些數據。

然後我就可以使用resolveFunctions服務的地方，我宣佈我的狀態：

//Inject resolveFunctions service as a dependency wherever you are defining your states 

resolve: { 
    data: resolveFunctions.resolveData 
} 

我希望是有道理的。

至於狀態之間的切換，我使用狀態參數在狀態之間傳遞數據。新狀態的解析函數可以從狀態參數中讀取，如上面的resolveFunctions示例中所示。

您可以在您的控制器中使用$ state.go（）在狀態參數之間切換（可以使用$ state.go調用添加一個ng-click處理程序）。

以下代碼轉到「savingCollections」狀態並傳遞一箇中心ID作爲狀態參數。你可以，或提取centerId在控制器或決心功能之一使用$ stateParams.centerId

$state.go("savingCollections", { centerId: centerId }); 

我沒有這樣做，個人，但我想你也可以這樣做，在UI的SREF以及。

ui-sref="savingCollections({ centerId: controller.centerId })" 

如果UI-SREF的作品，這將是比調用$ state.go（）