如何在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路由器中构建我的状态和路由

回答

相关问题