1. Introduction

1.1 Introduction

Hi folks. Welcome to Hands-On Angular Connect to an API. In this course, we're going to see how we can quickly and easily connect to a backend API. We'll see how to make different types of request using Angular's HttpClient. How to handle responses from the server, and how to perform common tasks like setting request headers, and handling progress events for an upload. We'll also see how we can make use of Angulars's in-memory database, which we can use to simulate a backend API, even if we don't have one available. We'll learn how to create database, how to add an interceptor in order to manipulate the responses back to out app. And how we can override HTTP methods if we need to provide a custom implementation not supported by the database. Let's get started.

1.2 Setup

Hi, folks, in this lesson, we can get our development area setup ready to work through the coding examples. To follow along with the coding examples, which I'd strongly recommend, you'll need to have Node.js installed. So if you don't have that already, head on over to nodejs.org, and follow the installation instructions for your platform. Once Node is installed, make sure you have the latest version of the Angular CLI. We can install the CLI globally, so that we can run commands from any subdirectory on our system. You'll also need to have Git installed to be able to clone the starter repository. If you don't have this installed already, head on over to the downloads page at the git-scm site. And again, follow the appropriate installation instructions for your system. Once Git is installed, we can then clone the starter repository to our local machine, the repo can be found up on Github. To get the clone URL, we just need to find this Clone or Download button. And if you click that, it will give you the appropriate URL to install this repository. The command line should be focused on the directory way you would like the project installed, I'm putting it in my user directory. You can clone it from the command line using the git clone command in conjunction with the URL that we just obtained from GitHub. Once the project is cloned, we should then run an npm install, to install all of the project's dependencies. And before running the NPM install, we should move into the newly created project directory, which is called hands-on-http. So, let's open the projects up in an editor now, I'm using VS Code here. Most of the files that come with the starter repository should be familiar to anyone that has used Angular before. The project code itself resides in the SRC directory. And inside this is an app directory, this contains a simple component called app.component. The app.component file contains a very simple shell of a fake e-commerce store, let's open it up to take a look. It's all set up to display a table of fake products, and it's got a simple header, and a simple footer, and a main content area. The app also comes with some data, so, in the assets folder there is a file called products.json. And this contains a couple of fake products that will be listed in the product table. There's also some styling and what not to make the example site look acceptable. But that's not too important in the context of this course. To make sure that everything is hooked up and to get a quick preview of the application shell, we can just preview the app briefly. To do that, we can run the ng serve command, I'll do that down in the integrated terminal in VS Code here. And once the project has been built, there should be a URL that we can use to preview the site in our browser, let's open that up. And here we can see our fake e-commerce store. At the moment, it's not displaying any of the products, so we'll come back and hook that up very soon. As well as the code as it is at the start of the course, the repository also contains a branch called completed-solution. Containing the code as it will be at the end of the course. If you run into any difficulties during the course, you can try switching to this branch. And seeing if you can spot where things are going wrong. So in this lesson, we got our local development area setup ready for the coding examples, thanks for watching.