Köşeli yönlendirici isteğe bağlı url params

Question

Mağazam için bir durum tanımladım ama doğru yaptığımdan emin değilim. URL'de birden fazla isteğe bağlı parametrem bulunduğundan, nasıl uygulayacağımı bilmiyorum.

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

Ürünler sayfam için özet görünümümdür. Ürünler adam/kadın ayrılmış ve ayrıca gibi alt kategorileri edilecektir: man param woman olabilir çünkü

www.example.com/man/ 

www.example.com/man/footwear/ 

www.example.com/man/footwear/shoes 

Man, footwear ve shoesfootwear olabilir, hepsi isteğe bağlıdır cloth (son param shirts örneğin istendiği durumda) ve tüm Yukarıdakilerin olası kombinasyonları.

Her eyaleti ayrı ayrı yapmak zorunda mıyım yoksa bunlardan başka bir durumla başa çıkabilir miyim?

Sadece dikkat etmek gerekirse, product header burada geçerli değildir ve iyi bir yapıyı kaldırmak için gerekliyse, bunu yapabilirim.

Ben sadece benzer bir şey bulamıyorum, bu yüzden herhangi bir kimse varsa bağlantı da yararlı olacaktır.

Answer 1

Her alt kategori durumunu ana kategori durumuna yerleştirerek son zamanlarda tarafından çok benzer bir şey yaptım. Bu şekilde yapmanın bazı avantajları, bir üst durumda zaten tanımlanmış olan bir alt durumdaki bir çok kodu yinelemekten ve ayrıca ana durumda önceden yüklenmiş olan verileri ve görünümleri yeniden yüklemekten kurtulmak zorunda kalmanızdır. .

İşte başlangıç ​​için bir örnek:

.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: {...} 
}) 

Birincisi, URL'ler otomatik çocuk eyalette yığını. Bu, her bir çocuk durumu için tek bir URL parametresi tanımlamanız gerektiği anlamına gelir ve siz hala bu URL'yi /app/products/:gender/:category/:type gibi almaktan vazgeçersiniz.

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

bu görüldüğü başka yararı:

bu şekilde bir ebeveyn durumda tanımlanan görünümleri otomatik olarak çocuğun bütün dahil olmasıdır yapıyor ikinci yararı açıkça geçersiz kılmadıkça, devletler Örneğin, durum app.products.gender.category.type olarak değiştirildiği zaman foo.html dosyasının yeniden yüklenmeyeceği şeklindedir. Örneğin, foo.html'in bu kategoride uzun bir kaydırma listesi türü olduğunu varsayalım. Kullanıcı, listedeki bir öğeyi app.products.gender.category durumundan app.products.gender.category.type çocuk durumuna değiştiren bir öğeyi tıklatırsa, foo'nun uzun kaydırma listesi yeniden yüklenmez ve kullanıcı tıkladığı öğeyi görmeye devam edebilir. Diğer taraftan, bu tıklama durumun devleti olmayan bir duruma değiştirmişse, liste muhtemelen yeniden yüklenmiştir (veri ve hepsi) ve kullanıcının tıkladığı öğeyi görmek için kaydırması gerekebilir.

Sana tavsiye:

• kısa sizin iç içe devlet isimleri tutun.
• Sadece gerekliyse hiyerarşide bir durum ekleyin (size app.products bakıyorum!).
• Bu tekniğin yanlış gidebileceği pek çok yöntem vardır; dolayısıyla, daha az kod yazmanıza yardımcı olacak yapılandırmalar için ui-router docs'u gözden geçirdiğinizden emin olun.