Angular ui路由器可選url params

Question

我已經爲我的商店應用程序定義了狀態，但我不確定我是否正確地執行了此操作。由於我在url中有多個可選參數，所以我不知道該如何實現它。

.state('app.products', { 
    abstract: true, 
    views: { 
     'content@': { 
      templateUrl: 'app/products/views/product.html' 
     }, 
     'productHeader@app.products': { 
      templateUrl: 'app/products/views/product-header.html' 
      } 
    } 
}) 

以上是我對產品頁面的抽象視圖。產品將在男人/女人分開，也子類別，如：

www.example.com/man/ 

www.example.com/man/footwear/ 

www.example.com/man/footwear/shoes 

Man，footwear和shoes都是可選的，因爲man PARAM可以woman，footwear可以cloth（其中最後PARAM將如shirts）和所有上述可能的組合。

我不確定是否必須單獨製作每個狀態，或者我可以用除此之外的其他狀態來處理所有這些情況？

只要注意，product header在這裏是不相關的，如果它需要良好的結構來刪除它，當然我可以做到這一點。

我只是找不到任何類似的在線，所以如果有人有任何鏈接，也將是有益的。

Answer 1

我最近做了一些非常類似的事情，將每個子類別狀態嵌套到其父類別狀態。這樣做的一些好處是，您不必在父狀態中定義的子狀態中重複執行大量代碼，也不必重新加載已在父狀態中加載的數據和視圖。

下面是一個例子，讓你開始：

.state('app.products', { 
    abstract: true, 
    url: '/products', 
    views: {...} 
}) 
.state('app.products.gender', { 
    url: '/:gender', 
    views: {...} 
}) 
.state('app.products.gender.category', { 
    url: '/:category', 
    views: {...} 
}) 
.state('app.products.gender.category.type', { 
    url: '/:type', 
    views: {...} 
}) 

首先，網址自動兒童州堆棧。這意味着你只需要爲每個孩子狀態定義一個url參數，並且你仍然可以得到像這樣的url這個/app/products/:gender/:category/:type。

做這種方式是，在父狀態定義意見會自動包含在所有子的第二個好處指出，除非你明確地將其覆蓋：

.state('app.products.gender.category', { 
    url: '/:category', 
    views: { 
    'foo@someParentState': {templateUrl: 'foo.html'}, 
    'bar@someParentState': {templateUrl: 'bar.html'} 
    } 
}) 
.state('app.products.gender.category.type', { 
    url: '/:type', 
    views: { 
    // foo.html is still rendered here 
    // bar.html is replaced by baz.html 
    'bar@someParentState': {templateUrl: 'baz.html'} 
    } 
}) 

從這個看到的另一個好處例如，當狀態更改爲app.products.gender.category.type時，foo.html將不會被重新加載。例如，假設foo.html有一個長類型的滾動列表。如果用戶點擊列表中的一個項目將狀態從app.products.gender.category更改爲子項狀態app.products.gender.category.type，則foo的長滾動列表將不會重新加載，用戶仍然可以看到他們點擊的項目。另一方面，如果該點擊已將狀態更改爲非子狀態，則該列表可能已被重新加載（數據和全部），並且用戶可能必須滾動才能看到他們點擊的項目。

一些建議：

• 讓您的嵌套狀態名稱短。
• 如果絕對必要的話，只能在層次結構中包含一個狀態（我在看你的app.products！）。
• 有很多方法可能導致此技術出錯，因此請務必查看ui-router docs以獲取幫助您減少編碼的配置。