Create and test a hello world route function.
- [Instructor] Let's convert our test service into a real one with a end point that will provide our messages for our front end. We will start by renaming the service to slash messages. So on line four, we'll just append messages to the string. Then instead of hello, we will send the json list. Let's copy that over from the front end. At this point, if you've been opening and closing the front end and back end project inside the same instance of Visual Studio code, you can actually open up a new instance so that you can keep your front end and back end open at the same time.
So we'll go over to File, and then we'll just select New Window. And at this point, you can open up your front end project. And now let's go into our source, and then app folder, and then let's take a look at the message component. And let's go and copy the two json objects from inside the messages list on line 15. Now let's go back to our back end, and let's create a variable called messages.
And I'll do that on line four. And I'll just paste in the two json objects. Next, we can respond to that request with a response dot json. So I'll take out the response dot send on line seven, and type in dot json, and I'll pass along our new messages list. In order to make testing our changes a bit easier, let's install a package called nodemon globally.
This will restart our service each time it detects a change to the file. As a quick note, nodemon does not require any changes to your code. It simply wraps your node application and checks on any files that have changed. So let's go to our terminal, and stop our existing node process. Then let's use npm install dash g for global and we'll install nodemon. Now let's run nodemon with server js, and test out our service inside Chrome.
So I'll type in nodemon in our terminal and then I'll provide the file, server js. And as you can see, it's watching for changes. So I can just leave that running now as we make future changes. Let's go ahead and test this out inside our browser. So inside the tab where we had our default route, I'll put in a slash messages, and as you can see, our messages are being returned to us in json. Next let's update Angular so that the data is displayed from this service instead of the local version.
- 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
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.