One thing I can accomplish in my angularjs application using ui.router is:
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<div data-ui-view></div>'
})
.state('app.auth', {
url: '',
abstract: true,
controller: 'AuthShellController as vm',
templateUrl: 'views/auth/auth-shell-view.html'
})
.state('app.ui', {
abstract: true,
templateUrl: 'views/ui-shell-view.html',
controller: 'ShellController as vm'
On the other hand, my angular2 application features these routes:
const appRoutes:Routes = <Routes>[
{
path: '',
component: DashboardComponent,
},
{
path: 'login',
component: LoginComponent,
},
{
path: 'presentation',
children: [{
path: 'new',
component: PresentationComponent
}, {
path: ':id',
component: PresentationComponent
}]
},
];
In angularjs, I am able to resolve the same URL through states. For example, if an authorization state is present, only the login form is displayed without the header or sidebar.
Conversely, if an application state is detected, the shell containing the header, footer, sidebar and more is rendered.
Query
How can I effectively handle base layouts within the angular2 router?