Angular and RxJS: Adding a REST API Back End

Category: angular, angular-hub, AngularJS, JavaScript, nilsonj, rest api, RxJS

This article is part 3 of the SitePoint Angular 2+ Tutorial on how to create a CRUD App with the Angular CLI. In this article, we’ll update our application to communicate with a REST API back end.

In part one we learned how to get our Todo application up and running and deploy it to GitHub pages. This worked just fine but, unfortunately, the whole app was crammed into a single component.

In part two we examined a more modular component architecture and learned how to break this single component into a structured tree of smaller components that are easier to understand, re-use and maintain.

Part 0 — The Ultimate Angular CLI Reference Guide
Part 1 — Getting our first version of the Todo application up and running
Part 2 — Creating separate components to display a list of todos and a single todo
Part 3 — Update the Todo service to communicate with a REST API back end
Part 4 — Use Angular router to resolve data

You don’t need to have followed parts one and two of this tutorial for three to make sense. You can simply grab a copy of our repo, checkout the code from part two, and use that as a starting point. This is explained in more detail below.

REST API Back End: Two people holding a radio aerial, communicating with a giant Angular logo on a hill.

A Quick Recap

Here’s what our application architecture looked like at the end of part 2:

REST API back end: Application Architecture

Currently, the TodoDataService stores all data in memory. In this third article, we’ll update our application to communicate with a REST API back end instead.

We will:

create a mock REST API back end
store the API URL as an environment variable
create an ApiService to communicate with the REST API back end
update the TodoDataService to use the new ApiService
update the AppComponent to handle asynchronous API calls
create an ApiMockService to avoid real HTTP calls when running unit tests.

REST API back end: Application Architecture

By the end of this article, you’ll understand:

how you can use environment variables to store application settings
how you can use the Angular HTTP client to perform HTTP requests
how you can deal with Observables that are returned by the Angular HTTP client
how you can mock HTTP calls to avoid making real HTTP request when running unit tests.

So, let’s get started!

Up and Running

Make sure you have the latest version of the Angular CLI installed. If you don’t, you can install this with the following command:

npm install -g @angular/cli@latest

If you need to remove a previous version of the Angular CLI, you can:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

After that, you’ll need a copy of the code from part two. This is available on GitHub. Each article in this series has a corresponding tag in the repository so you can switch back and forth between the different states of the application.

The code that we ended with in part two and that we start with in this article is tagged as part-2. The code that we end this article with is tagged as part-3.

You can think of tags like an alias to a specific commit id. You can switch between them using git checkout. You can read more on that here.

So, to get up and running (the latest version of the Angular CLI installed) we would do this:

git clone [email protected]:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-2
npm install
ng serve

Then visit http://localhost:4200/. If all’s well, you should see the working Todo app.

Setting up a REST API back end

Let’s use json-server to quickly set up a mock back end.

From the root of the application, run:

npm install json-server --save

Next, in the root directory of our application, create a file called db.json with the following contents:

{
  "todos": [
    {
      "id": 1,
      "title": "Read SitePoint article",
      "complete": false
    },
    {
      "id": 2,
      "title": "Clean inbox",
      "complete": false
    },
    {
      "id": 3,
      "title": "Make restaurant reservation",
      "complete": false
    }
  ]
}

Finally, add a script to package.json to start our back end:

"scripts": {
  ...
  "json-server": "json-server --watch db.json"
}

We can now launch our REST API back end using:

npm run json-server

This should display the following:

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

That’s it! We now have a REST API back end listening on port 3000.

To verify that your back end is running as expected, you can navigate your browser to http://localhost:3000.

The following endpoints are supported:

GET /todos: get all existing todos
GET /todos/:id: get an existing todo
POST /todos: create a new todo
PUT /todos/:id: update an existing todo
DELETE /todos/:id: delete an existing todo

So if you navigate your browser to http://localhost:3000/todos, you should see a JSON response with all todos from db.json.

To learn more about json-server, make sure to check out mock REST APIs using json-server.

Continue reading %Angular and RxJS: Adding a REST API Back End%

You must be logged in to post a comment.

blog