This course will be retired on February 24, 2020. We recommend "Build a REST API With Express" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
We’ll need some data to see if our application is working. In this video we’ll create some mock data and test our API.
Resources
Follow Along
Here's how to get the code to follow along with this video:
git clone https://github.com/treehouse-projects/mean-todo.git
cd mean-todo
git checkout tags/s2v3 -b mocking-data
npm install
-
0:00
Our API is looking good and well organized.
-
0:03
In the next stage, we'll be connecting our Angular application to our Express API.
-
0:09
But before we do that, we need to create some mock data.
-
0:12
In this video, I'll show you how to create mock data and
-
0:16
a great tool to send requests and receive data.
-
0:20
Let's start by creating a mock directory.
-
0:23
And the mock directory goes in the root of our project.
-
0:29
The reason for this is because inside the mock directory,
-
0:32
we'll have data that can be used for all sorts of things,
-
0:35
from testing our API to building it in the initial prototype stages.
-
0:39
Inside of our mock directory, let's create a file called todos.json,
-
0:45
and this is what we'll use to mock our todos API endpoint.
-
0:51
Inside this file, we're going to create a JSON object, and
-
0:55
I'll do that by creating an empty object inside of an array.
-
1:00
Each one of these objects is going to be a to do, it's going to have a name property.
-
1:05
And our first to do's name property is going to be reply to dad's tech
-
1:11
question email from two weeks ago.
-
1:17
I'm sure a to do that a lot of us have.
-
1:20
And I'll just copy and paste in a few more to-dos.
-
1:25
Fantastic.
-
1:26
Now we just need to import these to-dos into our API controller.
-
1:32
We'll do this the same way that we load our other modules.
-
1:43
And we'll give a relative path to our to dos.
-
1:55
Now in our response We'll replace this array with our jason array.
-
2:03
It's been imported here.
-
2:05
Up until now, we've been using the browser to check if our API was working.
-
2:10
As we move further along in our course,
-
2:12
we'll be wanting to use a more robust tool to check our routes.
-
2:16
Post man is the Chrome extension that I use to make requests to my API as I'm
-
2:20
building new routes and adding logic to my controller.
-
2:24
You can learn about how to download and install post man in the teacher's notes.
-
2:29
So using post man, let's make a request Tour API.
-
2:41
And of course, we have to make sure our server is running.
-
2:50
Now when I try my request, there are my to do's.
-
2:54
We can see the response content looks good, we can also see other information,
-
3:00
like the header information, sent with the response.
-
3:04
And there's our content type header that we are looking for,
-
3:08
and of course our status.
-
3:10
PostNet has some great features like collections if you're working on multiple
-
3:14
applications, or even environment variables if you need to seamlessly switch
-
3:19
between local and remote servers.
-
3:21
We won't go into any of these features in this course, but
-
3:24
you can find a link to the PostNet website in the teacher's notes.
-
3:29
Nice work so far.
-
3:30
You're doing great!
-
3:32
Next, we'll look at the Angular Todo Application code.
-
3:35
We'll make some changes so it's modular, and
-
3:37
wire it up to show you the todos from our API.
You need to sign up for Treehouse in order to download course files.
Sign up