angular-notes/routing.md

# Routing in Angular

## Lesson Objectives

1. Create a new angular app
1. Clean up app HTML
1. Create About, Links, and Resume components
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

First create a new app using

```
ng new router
```

Now, `cd` into the new directory and start serving the app

```
cd router
ng serve --open
```

You should now see the welcome screen

## Clean up app HTML

Go into `src/app/app.component.html` and change the HTML to:

```html
<h1>Welcome To My Personal Site</h1>
```

## Create About, Links, and Resume components

We'll create a component for the different "sections" of the site we want to "navigate" to.

```
ng generate component about
ng generate component links
ng generate component resume
```

## Edit the HTML for the About, Links, and Resume components

Edit `src/app/about/about.component.html`:

```html
<h2>This is the About Section of the Site</h2>
<h3>Early Life</h3>
<p>Just a kid growing up rough on the streets.  Hustlin' code for ca$h</p>
<h3>Career</h3>
<p>Now I'm makin' it raaaiiiiiinnnn!!!</p>
```

Edit `src/app/links/links.component.html`:

```html
<h2>This is the Links Section of the Site</h2>
<ul>
    <li>
        <a href="https://angular.io/">Angular Home Page</a>
    </li>
    <li>
        <a href="https://www.google.com/">Google</a>
    </li>
    <li>
        <a href="https://www.npmjs.com/">NPM</a>
    </li>
    <li>
        <a href="https://nodejs.org/en/">Node</a>
    </li>
</ul>
```

Edit `src/app/resume/resume.component.html`:

```html
<h2>Resume</h2>
<ul>
    <li>
        <dl>
            <dt>2010-2011, 2013-Present</dt>
            <dd>Crushed It</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>2008-2010</dt>
            <dd>Chief Code Jockey at jockey.com</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>2003-2008</dt>
            <dd>Software Engineer at Initech</dd>
        </dl>
    </li>
</ul>
```

## Display all components at once

Edit `src/app/app.component.html`:

```html
<h1>Welcome To My Personal Site</h1>
<app-about></app-about>
<app-links></app-links>
<app-resume></app-resume>
```

You should now see all components displayed on the page

## Set up the router

First import the RouterModule in to `src/app/app.module.ts`:

```javascript
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { LinksComponent } from './links/links.component';
import { ResumeComponent } from './resume/resume.component';
import { RouterModule } from '@angular/router'; // add import statement here
```

Now add the module as an import in `src/app/app.module.ts` and define which modules go with which routes:

```javascript
imports: [
  BrowserModule,
  RouterModule.forRoot([
    {
      path: 'about',
      component: AboutComponent
    },
    {
      path: 'resume',
      component: ResumeComponent
    },
    {
      path: 'links',
      component: LinksComponent
    }
  ])
],
```

## 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 `<router-outlet></router-outlet>`

```html
<h1>Welcome To My Personal Site</h1>
<router-outlet></router-outlet>
```

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
<h1>Welcome To My Personal Site</h1>
<nav>
    <ul>
        <li>
            <a routerLink="/">Home</a>
        </li>
        <li>
            <a routerLink="/about">About</a>
        </li>
        <li>
            <a routerLink="/links">Links</a>
        </li>
        <li>
            <a routerLink="/resume">Resume</a>
        </li>
    </ul>
</nav>
<router-outlet></router-outlet>
```