Abstract routes for implementing layouts

[xmlking]

How to I implement multiple layouts that are parents for sub set of routes by default? E.g: I have some routes for pre-login users that has one layout theam and some routes for post-login users with different layout theam.

[brettstack]

+1

[Simon-Li]

+1

[btford]

To better understand – you want the same URL, but totally different content based on app state?

[brettstack]

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

[btford]

Yes, I know UI router has a thing called "Abstract Routes."

I'm curious what the use case is.

[brettstack]

Sorry for the hasty reply. I was in a meeting. I use them quite a bit to serve as containers/groupings for child states. They allow you to set a base path, template and logic that is used by all child states without allowing that state to be accessed directly (you can only access a concrete child state). A good example of this is unauthenticated and authenticated states. The two templates are very different, and one important piece of logic is as well (do not allow unauthenticated users access to authenticated states). But you wouldn't want to have 'authenticated' and 'unauthenticated' in your URL.

Another use case is for child resources. Say I have a state at the path clients/1. In the abstract state I request data from the server for that client so that all child states have the client data. I could also create a template that adds to the breadcrumb or adds a 'Clients' heading to the page. I could create a child concrete state that has the same path as the abstract state which lists details about the client. Since this has the same path as the abstract state, this can be thought of as the default state. I can then create another child state at path clients/1/friends to list the clients friends.

On Thu, 30 Apr 2015 5:54 pm Brian Ford notifications@github.com wrote:

Yes, I know UI router has a thing called "Abstract Routes."

I'm curious what the use case is.

— Reply to this email directly or view it on GitHub https://github.com/angular/router/issues/203#issuecomment-98011320.

[xmlking]

here I am referring Layout as a abstract component (with a html template with ng-viewports and optional controller)
all my routes (pages) will inherit one of the available Layouts
Layout will never be associated with a route since it is an abstract component.

[martinmicunda]

+1

[yarsh]

+1

[tjn487]

+1

I'm using this feature from ui-router and want to upgrade my angular 1.5.x based application to angular latest version 5.x or 6.x but latest angular router still doesn't support this feature.

Is there any plan to implement this feature?

[ViieeS]

@tjn487 I'm not sure, but we can try to do it like this:

const routes: Routes = [
  {
    path: '', component: AbstractComponent,
    children: [
      {path: 'some', component: SomeComponent}
    ]
  },
];

[xmlking]

I am using this pattens for this usecase https://github.com/xmlking/ngx-starter-kit/blob/develop/libs/dashboard/src/lib/dashboard.module.ts