Introduction

We aim to teach you all you need to know about developing an Angular 13 CRUD example application, from creating and simulating a REST API to bootstrapping a new project, setting the appropriate APIs, and ultimately building and deploying your completed application to the cloud (firebase). Thanks to the angular platform; it is possible to create apps that are both efficient and scalable with the help of the angular cli which provides a set of commands that increase your development productivity.

Angular is unquestionably a superior version of AngularJS. It has taken up the mantle of a lot of the old unnecessary complexity that was present in AngularJS, and it also outperforms many other competing frameworks in terms of capabilities.

Angular, on the other hand, is an entirely different beast than AngularJS. Even though it is a completely different framework, it is built on the same principles that made AngularJS so successful in the first place, as well as some new concepts and technologies that have been developed in recent years.

Most tutorials presuppose that you are already familiar with all of the technologies that Angular relies on such as typescript and they neglect to provide links to the documentation and other important resources, which leaves you with a very limited understanding of the framework's capabilities. If you've attempted to learn how to utilize angular and come up with a sour expression, you're not alone in your frustration.

As a result of this, it is quite aggravating, and this was the fundamental purpose for the development of this tutorial series.

Web and mobile apps are used by billions of people across the globe for practically everything, from social networking to education, to ecommerce and online banking. These applications are useful and assist us in our everyday routines by providing smooth user experiences and interfaces. How are these applications designed to be so serviceable? Much of the appreciation belongs to commonly adopted technologies such as angular, which make it simple to build higher-quality applications.

So let's get to learn angular a little deeper!

Prerequisites

Before getting started you need a few prerequisites:

• Basic knowledge of typescript. Particularly the familiarity with object-oriented concepts such as classes and decorators.
• A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the angular cli like the most frontend tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don't want to install a local environment for angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for frontend development that you can use to create an angular project that is compatible with Angular CLI.

If you have the previous prerequisites, you are ready for the next steps of our angular 13 tutorial that will teach you by example how to use angular http client to send get requests for fetching json data and the various RxJS operators such as catchError(), tap(), retry(), and takeUntil() for implementing advanced features such as error handling, retrying failed HTTP requests and cancelling pending requests.

In the first step(s) of our tutorial, we'll see how to install angular cli v13 and create an example project from scratch.

Using angular with typescript

JavaScript is the most frequently used scripting language on the client side. It is embedded in HTML pages to allow a variety of unique experiences with web pages. As an easily-learnable language with widespread support, it is very well for developing sophisticated apps.

Is JavaScript, on the other hand, the optimal language for designing single-page apps that demand modularity, testability, and developer productivity? Possibly not.

That’s way, angular is built on typescript and is designed to work with typescript in the first place and then compiled to javascript to be processed on the client’s browser.

Nowadays, a plethora of frameworks and libraries are available to provide additional alternatives. In terms of front-end web development, angular resolves the most, if not all, of the challenges that developers have when utilizing javascript alone.

What exactly is angular?

Angular is a typescript-based open-source javascript platform. It is maintained by Google, and its principal objective is to build single-page apps. Angular offers significant benefits as a toolkit, while also offering a common architecture for developers to work with. It helps developers to develop complex, reliable applications.

Now that we know that angular is a complete framework, what is the purpose of a framework? Frameworks, in general, improve web development productivity by establishing a common foundation that reduces the necessity for developers to rewrite code from scratch by providing a plethora of additional functionality that can be integrated into applications with minimal efforts.

What we'll learn?

Throughout this tutorial, we'll cover the fundamentals of frontend web development with angular.

We'll see by example how to send GET requests with URL query strings and parameters and process HTTP responses from REST API servers in your angular 13 application using Httplient for fetching and consuming JSON data, how to do error handling for HTTP errors using the RxJS throwError() and catchError() operators, how to retry failed HTTP requests in poor network connections and cancel pending requests using the rxjs retry() and takeUntil() operators, and finally how to deploy the application to firebase hosting using the latest angular 8.3+ features.

We'll also look at how to leverage angular services and rxjs observables, as well as how to install angular material and design the user interface using material design components.

We'll look at how to leverage the new ng deploy capability in angular 8.3+ to simply deploy your angular 13 application to firebase hosting from the command line.

You can also check out how to use HttpClient with Angular 13 to build a news application that fetches JSON data from a third-party REST API in this tutorial.

Throughout this step by step angular 13 tutorial, we are going to see a practical crud example of how to use the httpclient that's available from the @angular/common/http package, to make http get requests using the get() method.

What we'll cover in this tutorial?

We'll cover:

• How to develop a fake and fully functional CRUD REST API,
• How to install the latest version of Angular CLI,
• How to use the Angular CLI to build an Angular 13 project,
• How to install and configure Angular Material, as well as how to style your application using Material Design,
• How to design Angular components, as well as their routing and navigation,
• Creating and injecting Angular services
• How to use HttpClient to send HTTP GET requests to servers
• How to add URL query strings to your HttpRequest using the HttpParams class,
• Subscribing to and unsubscribing from RxJS Observables returned by HttpClient
• How to handle HTTP failures using the operators throwError() and catchError(),
• How to use the RxJS retry() operator to retry unsuccessful HTTP requests
• When requests are cancelled, how to unsubscribe from RxJS Observables returned by HttpClient methods using the takeUntil() operator.
• How to build your application for production and deploy it to Firebase hosting using Angular 8.3+'s new ng deploy function.

The steps of this tutorial

The steps of this Angular 13 tutorial are as follows:

• Step 1 — Setting up Angular CLI 13
• Step 2 — Initializing a New Angular 13 Example Project
• Step 3 — Setting up a (Fake) JSON REST API
• Step 4 — Setting up Angular HttpClient 13 in our Example Project
• Step 5 — Creating Angular 13 Components
• Step 6 — Adding Angular 13 Routing
• Step 7 — Styling the UI with Angular Material 13
• Step 8 — Consuming the JSON REST API with Angular HttpClient 13
• Step 9 — Adding HTTP Error Handling with RxJS catchError() & HttpClient
• Step 10 — Retrying Failed HTTP Requests with RxJS retry() & HttpClient
• Step 11 — Unsubscribing from HttpClient Observables with RxJS takeUntil()
• Step 12 — Adding URL Query Parameters to the HttpClient get() Method
• Step 13 — Getting the Full HTTP Response with Angular HttpClient 13
• Step 14 — Requesting a Typed HTTP Response with Angular HttpClient 13
• Step 15 — Building and Deploying your Angular 13 Application to Firebase Hosting

Let's get started by introducing Angular HttpClient, its features and why using it.