Creating a datastore in your service in order to persist data across multiple components. To separate concerns between components and services and to inch closer to achieving the single responsibility principle.
- We are currently updating our Angular message list…as soon as a post is made,…but what if for some reason the server is down…or the post fails for some other reason?…We don't want to give the false impression…that it was successful if it failed.…So, let's only push it to the list once the message post…returns successfully from the back end.…If it failed, then it won't get added to the list…and the user will know to try again.…Let's go back to Visual Studio Code…and see how we can do this.…Let's open up our messages component.…
A straightforward way to achieve this…is to move our message list from the component,…as we see it on line 23,…and move that into a service…and then instead of looping through the messages…in our local message array,…as we are on line seven,…we can instead loop through the messages…that are located in the service.…This is somewhat of an intermediary step…towards creating a more robust store service…that will store our data locally,…but for now, it's fine to have it in our web service.…
The benefit of this is that any component…
Author
Alexander Zanfir
Updated
10/17/2017Released
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
-
Create the component6m 33s
-
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
-
Broadcast with subject2m 43s
-
-
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: Create a data store in our service