Routing in Eleven Dimensions with Component Router – Brian Ford

AngularConnect · 14K views · 2015 · 18:52

Open on YouTube

Web developmenttalkdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering or asking about Angular 2 auxiliary routes, multiple router outlets, and child routing, since it is the main explanation from the router's author.

Recommended by 3 people across 2 different months, 2015 to 2016.

What it is

A conference talk from AngularConnect 2015 in which Brian Ford of the Angular team presents the Component Router for Angular 1 and 2. It covers the linking DSL, lifecycle hooks, child route delegation, and auxiliary routing.

What people said

Recommends Mark Rajcok · 2015-12 · Stack Overflow · on “When I change route the whole app refreshes and doesnt seem like a single page app”

According to the RouterLink [LINK] page that @EricMartinez mentioned in a comment, you need to use links with the following format: <a [router-link]="['./register']">Sign up</a> See also Brian's AngularConnect 2015 talk [this video] on routing.

Recommends Tomer Almog · 2016-01 · Stack Overflow · on “Angular2 multiple router-outlet in the same template”

yes you can, but you need to use aux routing. you will need to give a name to your router-outlet: <router-outlet name="auxPathName"></router-outlet> and setup your route config: @RouteConfig([ {path:'/', name: 'RetularPath', component: OneComponent, useAsDefault: true}, {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent} ]) Check out this example [LINK] , and also this video [this video] . Update for RC.5 Aux routes has changed a bit: in your router outlet use a name: <router-outlet name="aux"> In your router config: {path: '/auxRouter', component: secondComponentComponent, outlet: 'aux'}

Recommends Angular University · 2016-01 · Stack Overflow · on “Angular2 multiple router-outlet in the same template”

check the talk from the developer of the router, to see what is currently possible -> [this video] IF I remember well there are child routes and auxiliary routes.

Cites Dennis Smolek · 2015-10 · Stack Overflow · on “Angular2 Router Hates My AUX Routes”

UPDATE 11/1/15 Aux Routes are not supported very well as of Alpha 45. Link to Github Issue [LINK] props to @evan-plaice Original Question I watched Brian Ford's talk on the Angular2 Router: [this video] And I started to try and use the "Aux" routes and my code is throwing a ton of errors. I'm on Alpha 44 on mgechev's Angular Seed [LINK] In my app.ts component it's pretty standard, for the RouteConfig I Have: @RouteConfig([ { path: '/', component: HomeCmp, as: 'Home' }, { path: '/run', component: RunCmp, as: 'Run' }, { path: '/manage', component: ManageCmp, as: 'Manage' }, { path: '/user', component: UserCmp, as: 'User' }, { path: '/settings', component: LocalSettingsCmp, as: 'Settings' }, { aux:

Cites Pardeep jain · 2015-11 · Stack Overflow · on “Angular2 Routing for child level”

My App.ts file contains code: { path: '/Issuebook/...', component:Issuebook, as:'Issuebook' }, The routeConfig and the HTML contains <li><a [router-link]="['/Issuebook','Duebook']">Issuebook</a></li> and in the child component i have written code for routing like: @RouteConfig([ {path:'/DueBookChildComponent', component: Duebook, as: 'Duebook'} ]) and HTML for child is: <a [router-link]="['./Duebook']"><button class="btn btn-warning">Due Book</button></a> My problem is when i open Issuebook route it will open with its child route too but i want to open only Issuebook and child rout only when i click on the Due Book button. I have watched this video for reference [this video] . but i cant understa

Cites Vivendi · 2016-01 · Stack Overflow · on “What are auxiliary routes in Angular 2 for?”

I'm trying to understand what auxiliary routes are for in Angular 2, but I can't really wrap my head around it. I've watched Brian Ford's talk about it: [this video] That sort of gave me an idea. But I'm still confused as when to use an aux route instead of a "normal" route. I also can't find any decent info on this matter. Everything is either out dated or they come with a one liner explanation like: "Aux routes: independent routes". I really don't see how aux routes differs from a regular route in Angular 2. What's the difference? At what points do I need an aux route?

Cites Seba Kerckhof · 2016-07 · Stack Overflow · on “How to delegate routes to a child component?”

At the last angular-connect the component router 1.0 was shown and it had a feature where you could delegate a sub-tree of the routes to a certain component using two-dots notation. See: [this video] . I was a big fan of this feature as you could build a large component (e.g. a chat system) that needs its own routing, but have all of this encapsulated in the child component and therefore use it as a black-box wherever you wanted. This is a great feature for reusable components if you work in a large team. In the router 3.0 this seems gone and instead you specify the child routes of a component inside nested arrays. Does this mean you have to build your entire routing tree up-front and if you move