Linking a component to a route which will allow us to change the view in the router-outlet.
- [Narrator] We will make our messages component…as its own route so that we can…easily demonstrate routes with an existing component.…Also, eventually you might want to be able…to search for specific messages,…such as messages from one specific user.…And by having messages as its own route,…you can pass the username in the URL…to search for those messages.…So lets begin by adding a new route,…and we can just copy and paste our existing route.…
And we'll want to access this route…by going to the /messages URL,…so I'll put in messages for this path,…and then I'll just specify the messages component…since that's the component we want to load…when we go to this path.…Let's test this out.…Let's navigate to our messages component…by typing /messages in the URL.…And now we can see that our messages component…did load correctly.…Now let's add some buttons in the navbar,…so we can navigate to our messages view…without causing a page reload.…
So let's open up our nav component.…We will add a button with the empty button material style.…
Author
Alexander Zanfir
Updated
4/4/2019Released
5/16/2017- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Duration
Views
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.
-
Introduction
-
Welcome1m 7s
-
Using the exercise files1m 32s
-
-
1. Setting Up the Infrastructure
-
Demo application overview1m 10s
-
-
2. Displaying Data in Angular 2
-
Creating the component6m 24s
-
Show our data3m 22s
-
-
3. Getting Your Data from Node
-
Set up express3m 10s
-
Create a service2m 42s
-
-
4. Saving Your Data to Node
-
Create a post service3m 39s
-
Save data to a list1m 20s
-
Creating an express router2m 54s
-
-
5. Creating a Form in Angular
-
Creating the component6m 49s
-
Get our input data5m 17s
-
-
6. Navigating with Router
-
Create a nav bar2m 44s
-
Set up routes4m 10s
-
Add a messages route2m 49s
-
Pass a route parameter3m 40s
-
Retrieve a route parameter1m 17s
-
-
7. Reactive Programming
-
HTTP get with Observable6m 14s
-
-
8. Creating Reactive Forms in Angular
-
Create a register layout5m 29s
-
Validate with reactive forms7m 21s
-
-
9. Registering Users
-
Store a token with Angular1m 43s
-
Log out2m 45s
-
10. Logging In
-
Create the login services6m 47s
-
11. Authorizing Resources
-
Edit user Info7m 45s
-
Update message posting1m 26s
-
Conclusion
-
Next steps18s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Add a messages route