Site Overlay

Angular 10/9 Tutorial: Build an Example App with Angular CLI, Angular Router, HttpClient & Angular Material


Throughout this Angular 10/9 tutorial, we’ll learn to build an example web application using APIs like HttpClient, Angular Router, and Material Design.

We’ll learn to generate components and services using Angular CLI v10 and deploy your final app to the cloud (Firebase).

This is what you’ll learn by following this tutorial:

  • You’ll learn to create a fake, but completely working REST API server from a JSON file using json-server.
  • You’ll learn to install Angular CLI v10 in your development machine.
  • You’ll learn to generate a new Angular 10 project.
  • You’ll learn to fetch data from the REST API by sending HTTP requests using Angular 10 Httplient.
  • You’ll learn to handle HTTP errors using various RxJS methods like throwError() and catchError().
  • You’ll learn to retry HTTP requests that fail in weak network conditions and cancel pending requests using various RxJS methods such as retry() and takeUntil().
  • You’ll learn to generate Angular 10 components and services and wire them together to create a working frontend application.
  • You’ll learn to add routing to your app to create multiple views and set up Angular Material 10 to design a professional UI.
  • You’ll learn to deploy the final application bundles to Firebase hosting using the ng deploy command.

These are the steps of this tutorial:

  • Step 1 — Setting up Angular CLI 10 in your Development Machine
  • Step 2 — Initializing your Angular 10 Project Using Angular CLI v10
  • Step 3 — Importing Angular HttpClient in your Angular 10 Project
  • Step 4 — Generating your App Components
  • Step 5 — Setting up Routing in your Anguar 10 Project
  • Step 6 — Styling the UI with Angular 10 Material Components
  • Step 7 — Simulating a Fully-Working REST API Using JSON-server
  • Step 8 — Sending HTTP Requests with Angular 10 HttpClient
  • Step 9 — Handling HTTP Errors in your App
  • Step 10 — Implementing Pagination in your App
  • Step 11 — Building the Production Bundles and Deploying your Angular 10 App to Firebase

The tutorial is divided into the following parts:

As always, let’s start with the prerequisites!

What are the Prerequisites?

Before proceeding with this tutorial, you’ll need to make sure you have the following prerequisites:

  • Familiarity with TypeScript. TS is a super-set of JavaScript that adds features like strong types and OOP concepts to the language and gets eventually compiled to JavaScript before it can be executed by the web browser.
  • Node 8.9+ and NPM 5.5.1+ installed on your system. Node is required by the Angular CLI but not your frontend app since it’s a server-side technology. You can go to the official web site and download the binaries for your target system. You can also use the Node Version Manager for quickly installing and working with multiple Node.js versions in your development machine.

If you have the prerequisites, let’s go ahead and dive into the steps to build an Angular 10 application that fetches data from a REST API server using Angular HttpClient and display them using Material Design.

Tutorial, Step 1 — Setting up Angular CLI 10 in your Development Machine

In this step, we’ll set up Angular CLI v10 in our development machine.

Angular CLI is built on top of Node.js so as mentioned before, make sure you have it installed on your machine together with npm.

Angular CLI is the official tool for initializing and working with Angular projects.

Open a new command-line interface and run the following command:

$ npm install -g @angular/cli@next

At the time of writing this tutorial, @angular/cli@10.0.0-next.0 gets installed on our development machine.

If you manage to get this step working, congratulations, you are ready for the next step.

Tutorial, Step 2 — Initializing Your Angular 10 Project Using Angular CLI v10

In this step, we’ll create a new Angular 10 with Angular CLI.

Head back to your command-line interface and run the following commands:

$ cd ~  
$ ng new first-angular-app

The CLI will prompt you if you would like to add Angular routing. Say Yes and which stylesheet format you would like to use. Choose CSS.

Angular CLI will set up a fully-working project with the necessary files and dependencies. No need to do complex configurations by yourself! All you need is to focus on your specific project requirements.

Navigate to your project’s folder and serve your app locally using a development server as follows:

$ cd first-angular-app  
$ ng serve

Your web application will be available from the http://localhost:4200/ address.

Go to web browser and navigate to the http://localhost:4200/ address to start playing with your web app.

If you are able to get your Angular app running in a web browser without any errors, congratulations! You are ready for the next step.

Wrap-up

In these first two steps of our tutorial, we have seen the prerequisites needed for building our example app with Angular 10 such as the knowledge of TypeScript, Node.js and NPM installed on your development machine. Next, we have installed Angular CLI 10 from npm in our machine using the npm install @angular/cli@next command, initialized a new project and served it locally using a live-reload development server.

In the next step(s), we’ll continue building our example app by setting up HttpClient.

Leave a Reply

Your email address will not be published. Required fields are marked *