如何在ui路由器中構建我的狀態和路由

我正在使用angular1和ui-router（1.0.0.beta3）構建電子商務網站。如何在ui路由器中構建我的狀態和路由

但我不知道如何設置。這是我的想法。

const home = { 
    name: 'home', 
    url: '/', 
    views: { 
     header: 'header', 
     navbar: 'navbar', 
     sidenav: 'sideNav', 
     content: 'home' 
    } 
}; 

const category = { 
    name: 'home.category', 
    url: '/{url}', 
    views: { 
     content: 'categoryPage' 
    } 
}; 

const product = { 
    name: 'home.category.product', 
    url: '/{url}', 
    views: { 
     content: 'productPage' 
    } 
};

我們不容那來自CMS它的自我，控制環節「/關於美」和「/類別-X」可以是一個類別或CMS-頁面，所以我們增加了一個途徑狀態我們可以解析entity_type（產品，類別或cms頁面）

.state('home.router', { 
     url: '/{url}?:{page:int}&:{limit:int}&:id', 
     params: { 
      limit: null, 
      category: null, 
      page: { 
       dynamic: true 
      }, 
      id: { 
       dynamic: true 
      } 
     }, 
     templateProvider: ['urlRewrite', function(urlRewrite) { 
      switch (urlRewrite.entity_type) { 
       case 'category': 
        return '<category-page limit="$stateParams.limit" page="$stateParams.page" category="{name: $resolve.urlRewrite.request_path, id: $resolve.urlRewrite.entity_id}"/>'; 
       case 'product': 
        return '<product-page id="$resolve.urlRewrite.entity_id"/>'; 
       case 'cms-page': 
       default: 
        return '<page url="$resolve.urlRewrite.target_path" />'; 
      } 
     }], 
     resolve: { 
      urlRewrite: ['UrlRewrite', '$stateParams', function(UrlRewrite, $stateParams) { 
       return UrlRewrite.getUrlRewrite($stateParams.url); 
      }] 
     } 
    });

問題是類別和路由url模式發生衝突。，我們不能真正使用父母/孩子繼承等等。

我們應該如何解決「未知」的網址？

Plunkr：http://plnkr.co/edit/gXzDO5j3arP8QCrpwL9k?p=preview

來源

2016-11-22 Mackelito

所以問題是home.router可以捕獲你不想要的類別網址？有沒有辦法區分真正的類別網址和cms鏈接？（例如，通過更改抓到的網址的格式） – Matthias

現貨問題..沒有，我們不能改變網址結構。所以URL「/ hey-喲」可能是一個類別或cms頁面:( – Mackelito

我可能仍然是誤解。你輸入類別/產品鏈接，而不是他們來自cms網站嗎？我認爲你控制了這些。你不會改變他們的模式，因爲沒有衝突嗎？ – Matthias

讓我爲您提供示例代碼段。它會給你這個想法。

appName.config(['$stateProvider','$urlRouterProvider', '$httpProvider' ,function ($stateProvider, $urlRouterProvider, $httpProvider) { 

    // $urlRouterProvider.otherwise('/login'); 
    $urlRouterProvider.otherwise(function($injector, $location){ 
     var state = $injector.get('$state'); 
     var $localStorage = $injector.get('$localStorage'); 
     if($localStorage.user){ 
      return '/dashboard' 
     }else { 
      return '/login' 
     } 
    }); 
    $stateProvider 
    .state('login', { 
     url: '/login', 
     views: { 
      '': { 
       templateProvider: function ($templateFactory, $localStorage) { 
        return $templateFactory.fromUrl(asset_path('angular/templates/base/login.html')); 
       }, 
       controller: 'LoginCtrl' 
      } 
     } 
    }) 

    $httpProvider.interceptors.push('Interceptor'); 

}]);

來源

2016-11-22 17:37:10

如何在ui路由器中構建我的狀態和路由

回答

相關問題