Angular Routers Cheat Sheet

 

By: Mosh Hamedani

Enabling Routing 1- Add in index.html:

!"#$%& !($)# "*#+,-.-& !."#$%&

2- Add a reference to the router script in index.html :

!)/*012 )*/,-34%#564%78#).$3978$*:.(73%8#).*472#*;%#.&

3- Add router providers when bootstrapping the application (so Angular can do the required dependency injection behind the scene): In boot.ts

0614*2 ?@ABCD@5E@AFGHD@IJ +*46 K$3978$*:.*472#*L

(442)2*$1MN11O46143#32P Q@ABCD@5E@AFGHD@IR Q@ABCD@5E@AFGHD@IRST ST

1

 

By: Mosh Hamedani

Configuring Routes U@472#O43+09MQ ? 1$2"V K.KP 3$6#V KW46#LP /46143#32V W46#O46143#32 JP ? 1$2"V K.$8(76)LP 3$6#V KN8(76)LP /46143#32V N8(76)O46143#32JP ? 1$2"V K.$8(76).V0%LP 3$6#V KN8(76H#2$08)P /46143#32V X JP ? 1$2"V K.Y42"#*LP 3$6#V KA2"#*LP *#%0*#/2C4V QKW46#LR J RS #Z14*2 /8$)) N11O46143#32 ?J

Using Router Outlet 0614*2 ?@ABCD@5HG@DOCGFDIJ +*46 K$3978$*:.*472#*LT

UO46143#32M? 2#618$2#V [ !*472#*\4728#2&!.*472#*\4728#2& [P %0*#/20&F0#`!.$&

Getting Route Parameters 0614*2 ?@472#E$*$6)J +*46 K$3978$*:.*472#*LT

#Z14*2 /8$)) N11O46143#32 ? /43)2*7/24*M*472#E$*$6)V @472#E$*$6)S ? ST J J

3

 

By: Mosh Hamedani

Imperative Navigation 0614*2 ?@472#*J +*46 K$3978$*:.*472#*LT

#Z14*2 /8$)) N11O46143#32 ? /43)2*7/24*M1*0