I've been contemplating whether it's considered poor practice to define angular2 app router links outside of the app. Is there a more efficient way to accomplish this?
Throughout the angular2 documentation, routing examples typically showcase link definitions within the app template (as seen below).
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<nav>
<a [routerLink]="['CrisisCenter']">Crisis Center</a>
<a [routerLink]="['Heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent},
{path:'/heroes', name: 'Heroes', component: HeroListComponent}
])
export class AppComponent { }
In the example above, the links are defined with
<a [routerLink]="['CrisisCenter']">Crisis Center</a>But what if I were to structure it like this:
<html>
<head></head>
<body>
<nav>
<a href="#/crisis-center">Crisis Center</a>
</nav>
<div>
<my-app></my-app>
</div>
</body>
</html>
Could this method effectively facilitate navigation within the app?
The main reason behind keeping the links outside of the app is due to extensive permission handling based on Symfony variables, which leads me to prefer managing menus through that system.