7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 Defining and Configuring Routes

We'll start this chapter by looking at how we can define the routes that, together with our components, make up the states of the example application.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


6.1 Defining and Configuring Routes

HI folks, in this lesson we're going to begin looking at routing. Routing is a familiar concept for single page applications, and is a combination of a URL and a piece of view. Typically, in a modern JavaScript application, we don't want the whole application to reload every time the user wants to view different parts of the application. So routing allows us to update the view of our application, perhaps taking the user to an entirely different part of the application without the browser reloading and losing the current state. So let's think about this for our example application. At the moment, we have some different states for our game. There is the initial start page, where the user enters their name and chooses some game options. Then there is the actual game screen, where the user will play the game. And lastly, there is the end screen, where the player will see the result of the game and can quit or choose to play again. We are controlling access to these different states using simple ng ifs to show or hide the different components. For our needs this is fine, we have a limited number of views to present and a limited number of components we want to navigate between. But as an application grows, using these ng iffs like we are in the example application will quickly become burdensome. For larger applications with many more views and states, we will likely want the more elegant solution with less complexity, and routing can be that solution. So even though we don't strictly need to, we're going to spend the next few lessons implementing routing in the example application. So let's make a start. In larger applications, people will generally create a separate routing module that contains all of the routing logic, we're not going to go that far. A single file containing all of our routes will be more than adequate. So the first step in setting up routing will be for us to define our routes. Let's create a new file in the root of our application called app.routes.ts. We'll only need one import from Angular So we're going to import the routes type from angular/router, but we will also need to import some of our own components, the ones that we would like to route to. These are the component will be routing between in the example application. The app.routes.ts file that we've just created will export the routes that we define. So we're going to export an array of the type routes with the identifier appRoutes. So each root will be an object that we use to define information about the route. One route will be the StartComponent. A route at a minimum will contain a path which is the URL that will be used to match the route and a component which is the component we want to route two when the path is matched. We can also add routes for the game and end components. So we've defined routes for our three main components. Another route we can define is an empty route. This serves as the default route. For us, the start component could be seen as the default component. So let's add a default route that points back to the start component. This route has no path, because it is the default route and serves as the entry point to the application. Which is typically at the route of the app, and not behind a deeper URL. We already have a route that renders the start component. So instead of defining the startComponent as the component we want to route to for the default component, we can just redirect to the /startRoute. The path match option here ensure that this route is only matched if navigating to slash the route URL. One question remaining, at this point, is what happens if someone tries to route to a URL that doesn't exist? To handle this scenario, there is one more route we need to define, a wildcard route. That we can use to redirect people if they try to hit a route that does not exist. For this let's add a new component, a page not found component, let's create one with the CLI. Now we can import this new component into our roots files as well. And then lastly we can add the wildcard route that will match any unspecified URL and redirect to this page not found component. The wildcard route should always be defined last. It's the last route that will be hit if no other routes are matched. One key point, which we don't have to worry about because the CLI automatically added it for us. Way back at the start of the course when we generated the initial application, it's the base href. Let's just open up the index.html file in the root of the app here. And we can see that there is this base element with the href pointing to slash. So this is generally what we would set it to as the route URL for the app. Angular needs this for any routing to work. So if the CLI hadn't added it for us, we would have to add it ourselves manually. Obviously, the CLI did add it for us, so we don't need to do anything here. But you should note this for future applications that you might build. So in this lesson we've learned a little bit about the purpose of routing and we've seen that we can define the routes for our application using a simple array of objects. Where each object represents a single route with a defined path which maps to a component. We saw how to define a default empty route for our application's initial landing page. And we also saw how to define a wildcard route that can be used to route to a page not found component if no other routes are matched. Thanks for watching.

Back to the top