|
| 1 | +<p align="center"> |
| 2 | + <img src="_images-angular-routing/angular-logo-1.png" alt="angular logo" title="angular logo" width="200" /> |
| 3 | +</p> |
| 4 | + |
1 | 5 | 1 Angular Routing and Navigation |
2 | 6 | ===================== |
3 | 7 | - The `Angular Router enables navigation from one view (component)` to the another/next as users perform tasks, views (component) |
|
13 | 17 | - **routerLink** |
14 | 18 | - The attribute/directive for binding a clickable HTML element to a route which denotes link/view name to load/show in `(<router-outlet>)` |
15 | 19 |
|
| 20 | +Let's create below Angular Single Page Application (SPA) with Routing and Navigation feature: |
| 21 | +--------------------- |
| 22 | +<p> |
| 23 | + <figure> |
| 24 | + <img src="./_images-angular-routing/1.1-spa-single-page-app-home.png" alt="Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Home View" title="Image - Output - Angular Single Page Application (SPA) with Routing and Navigation - Home View" width="1000" border="2" /> |
| 25 | + <figcaption> Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Home View</figcaption> |
| 26 | + </figure> |
| 27 | +</p> |
| 28 | + |
| 29 | +<p> |
| 30 | + <figure> |
| 31 | + <img src="./_images-angular-routing/1.2-spa-single-page-app-departments.png" alt="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Departments View" title="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Departments View" width="1000" border="2" /> |
| 32 | + <figcaption> Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Departments View</figcaption> |
| 33 | + </figure> |
| 34 | +</p> |
| 35 | + |
| 36 | +<p> |
| 37 | + <figure> |
| 38 | + <img src="./_images-angular-routing/1.3-spa-single-page-app-employees.png" alt="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Employees View" title="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Employees View" width="1000" border="2" /> |
| 39 | + <figcaption> Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Employees View</figcaption> |
| 40 | + </figure> |
| 41 | +</p> |
| 42 | + |
| 43 | +<p> |
| 44 | + <figure> |
| 45 | + <img src="./_images-angular-routing/1.4-spa-single-page-app-products.png" alt="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Products View" title="Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Products View" width="1000" border="2" /> |
| 46 | + <figcaption> Image - Output - Angular Single Page Application (SPA) with Routing Navigation - Products View</figcaption> |
| 47 | + </figure> |
| 48 | +</p> |
| 49 | + |
16 | 50 | 1.Angular Routing Application setup steps: |
17 | 51 | --------------------- |
18 | 52 | 1. Generate a new Angular project/app with routing option |
|
0 commit comments