Exercise: Angular part 5 (SPA - Movies with Routing & Navigation)


Idea: Introduction to Angular (Routing & Navigating).
Background: The Ultimate Angular-cli Reference and Angular.io

Relateret billede

In this exercise you have to make a Single Page Application (SPA) with Routing and Navigation in 10 steps.
The Application you have to create is very much like the Application from the previous exercise, but now with Routing and Navigation.
The Application will have a navigation-bar with links to other pages. A selection of a movie from the list should navigate to a page with detailed info about the movie.
The result should look something like this:






 

Step 1 - Download an initial project - MovieRouter
Download and extract the MovieRouter.zip folder in your VSCode/Angular folder.
Navigate to the new folder: MovieRouter and create the initial project by running: npm install
Verify, that it works by running: ng serve -o.

Your initial project looks like this:

 


The next step is to configure the router module.

Step 2 - AppRoutingModule (app-routing.module.ts)
When the initial project was created with the Angular CLI, with the command: ng new MovieRouter, there was typed 'Y' to the question: ? Would you like to add Angular routing?.
It's the reason why we have the automatic generated module: AppRoutingModule. All we need is to do some configuration of this module:

Add imports of all the child-components (so we can define path to the components):

import { MovieListComponent } from './movie-list/movie-list.component';
import { MovieDetailComponent } from './movie-detail/movie-detail.component';
import { LoginComponent } from './login/login.component';
import { UnderConstructionComponent} from './under-construction/under-construction.component';

Add all the path-specifications to the routes:

const routes: Routes = [
{ path: 'movie-list', component: MovieListComponent },
{ path: 'movie-detail/:Title', component: MovieDetailComponent },
{ path: 'login', component: LoginComponent },
{ path: 'under-construction', component: UnderConstructionComponent },
{ path: '', redirectTo: '/movie-list', pathMatch: 'full' },
{ path: '**', component: MovieListComponent }
];

Notice: the redirectTo and '**' - what is the effect of adding the two path-specifications? Is the order of the specifications independent?



Step 3 - AppModule (app.module.ts)
Update the AppModule (the module must import the AppRoutingModule).
Hint: don't forget to add AppRoutingModule in the imports array under @NgModule as well.



Step 4 - AppComponent (app.components.html)

Update the AppComponent.

The nav-tag should have 4 a-tag with routerLink to the components:

<a routerLink="/movie-list" class="nav-item nav-link" routerLinkActive="active">Movies</a>
<a routerLink="/under-construction" class="nav-item nav-link" routerLinkActive="active">Admin</a>
<a routerLink="/under-construction" class="nav-item nav-link" routerLinkActive="active">About</a>
<a routerLink="/login" class="nav-item nav-link" routerLinkActive="active">Login</a>


Insert the place-holder to the components: <router-outlet></router-outlet>. The router-outlet will be substituted with the template for the selected component



Step 5 - MovieListComponent (movie-list.component.ts)
Update the MovieListComponent
The component must import: Router, ActivatedRoute and Params from '@angular/router':

import { Router, ActivatedRoute, Params } from '@angular/router'


The constructor must inject: Router and ActivatedRoute:

constructor(private movieService : MovieService, private route: ActivatedRoute, private router: Router) {}


Insert a call to the navigate-method in the onSelect-method:

this.router.navigate(['/movie-detail', movie.Title]);

 

Step 6 MovieDetailComponent (movie-detail.component.ts)
Update the MovieDetailComponent
The component must import: Router, ActivatedRoute and Params
The constructor must inject: Router and ActivatedRoute
Insert a call to the navigate-method in the gotoMovies-method:

this.router.navigate(['/movie-list']);

Insert: this.movie = this.movieService.getMovie(this.route.snapshot.paramMap.get('Title')); in the ngOnInit( )-method

What is a snapshot? - find out and explain!


Step 7 - Test/Verify
Verify that you got something like this:







Congratulation!
- Angular is rocking even more and now your SPA-App have Routing and Navigation onboard (but your Angular App is still isolated from the server - Hallo Ajax - where are you?).


/ Henrik H