CODEWITHSUNDEEP
javascriptangularjstypescriptangularangular2-routing
xil3
xil3

Reputation: 16449

Defining route links outside of app template in Angular 2

I was just wondering if it's bad practice to define angular2 app router links outside of the app; or if there is a better way of doing it.

In all of the angular2 documentation, it gives examples of routing, and it defines the links within the app template (see 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 that example, they define the links with <a [routerLink]="['CrisisCenter']">Crisis Center</a>.

But what if I did this:

<html>
    <head></head>
    <body>
        <nav>
            <a href="#/crisis-center">Crisis Center</a>
        </nav>

        <div>
            <my-app></my-app>
        </div>
    </body>
</html>

Would that work for navigation within the app?

The reason I want to keep them outside of the app, is because I have a lot of permission handling (hide/show) based on Symfony variables, so I'd rather manage the menus with that.

Upvotes: 3

Views: 565

Answers (1)

philoniare
philoniare

Reputation: 1653

That would be fine, but the main reason to use RouteConfig and router-outlet is because it loads that part of the page into router-outlet without refreshing the page. So, just know that if you use normal anchor tags, it will no longer be a SPA(single page application).

Upvotes: 1

Related Questions