diff --git a/router/src/app/app.component.html b/router/src/app/app.component.html index 07303eb..ffdff5b 100644 --- a/router/src/app/app.component.html +++ b/router/src/app/app.component.html @@ -1,4 +1,18 @@

Welcome To My Personal Site

- - - + + diff --git a/routing.md b/routing.md index 8b4ea2a..55287b0 100644 --- a/routing.md +++ b/routing.md @@ -8,6 +8,8 @@ 1. Edit the HTML for the About, Links, and Resume components 1. Display all components at once 1. Set up the router +1. Tell the router where to display the components +1. Create links to the different "pages" ## Create a new angular app @@ -148,3 +150,43 @@ imports: [ ]) ], ``` + +## Tell the router where to display the components + +Now that we've set up the router, we need to tell it where to display the components. Remove the component declarations in `src/app/app.component.html` and replace them with `` + +```html +

Welcome To My Personal Site

+ +``` + +You can now test the different "pages" by going to + +- http://localhost:4200/about +- http://localhost:4200/links +- http://localhost:4200/resume + +## Create links to the different "pages" + +When creating links, we don't use `href` anymore. Instead we use `routerLink`. Edit `src/app/app.component.html`: + +```html +

Welcome To My Personal Site

+ + +```