1

I'm building an app with angular2 alpha27 and systemjs. It's supposed to be a big app one day and many components are supposed to use links inside the app. For the moment, to determine the router config I put this into app.ts:

@RouteConfig([
    { path: '/', as: 'overview', component: Overview },
    { path: '/requests', as: 'requests', component: Requests },
    { path: '/pane', as: 'pane', component: Pane }
])

The problem:

If I need in other components to put a link to Overview like this <a router-link="overview">Overview</a> I have to import to that component all router injectables and define RouterConfig and import components (like Overview, Pane, etc.. mentioned above) to make linking work.

First, it doesn't make any sense to import all these to several components that only need a link to Overview, for example.

Second, I would like to define my @RouterConfig only once for maintenance reasons.

The idea I have is to make a service, that would define @RouterConfig and make it available to any component. But I have no idea, how to do this.

Please, would anyone have an idea of the best way of arranging such code?

Francesco Borzi
  • 56,083
  • 47
  • 179
  • 252
kakaja
  • 714
  • 2
  • 9
  • 22

2 Answers2

3

No, you'll only need to use @RouterConfig once like you suggest in the main app component. To link from one component to another you need to import RouterLink and pass as directive to the View-annotation.

import { RouterLink } from 'angular2/router'

@Component({ selector: 'foo' })
@View({
  template: `<a [router-link]=['/bar']>Link to bar</a>`,
  directives: [RouterLink])
export class FooComponent {
}

I've done a video tutorial on angular 2 routing if you're interested, make sure to check it out https://youtu.be/ZsGRiHSaOxM

Ajden Towfeek
  • 387
  • 2
  • 14
  • Great! Thank you ! By the way, I really think that your videos are fantastic. From all the videos about ng2, yours are waaaaaaaay more clear and comprehensive somehow. Thank you very much for them!! – kakaja Sep 10 '15 at 06:52
  • Thanks for the kind words. I'm planning to do a new video today, make sure to check it out, and subscribe to my channel if you haven't done so already ;-) – Ajden Towfeek Sep 11 '15 at 08:01
0

Extensibility shouldn't be a problem.

With the new-angular-router you attach your route config to a class/controller, rather than a service. This way is actually a lot more flexible, as you can even have apps within apps within apps, all with their own routes.

Think of it like a tree, and any branch of the tree can start adding more branches anytime, wherever they need to go. Those new branches stem off of each other.

If routes are defined in one place rather than when needed your code will become much less modular than if you were to attach routes to components, which can then be moved around without breaking, paralleling the file structure.

My advice: think in trees as perhaps nature intended. This advice of course does not suit all use cases, but is the simplest course of action.

shmck
  • 5,129
  • 4
  • 17
  • 29
  • Thank you for your answer! Do you mean, that if I want to put a link to the Overview `Overview` to 10 components, I have to import the Router and define the RouterConfig plus import the Overview (to make the link, otherwise the RouterConfig throws an error) in all 10 components? And if once I want to change the name of the link to 'Home', I will need to change it in 10 components again? There is really no other way? – kakaja Jun 26 '15 at 07:52
  • I imagine the routes will re-use similar templates, in which case you would just pass in the necessary params for each route. An example: ` {{app.user.name}}` – shmck Jun 27 '15 at 02:38