Angular 12: Tutorial and Example (Bootstrap)

In this tutorial, we’ll quickly see how you can generate an Angular 12 project using the official CLI (Command-Line Interface) and then create an application for demonstrating basic concepts of Angular like importing and using built-in modules, creating components and services, and fetching data from a REST API server using HttpClient, the alternative/equivalent to Axios or the Fetch API for Angular developers.

Parts in this series:

Angular 12 app from scratch

Angular 12 app from scratch

Introducing Angular 12 and its New Features

Angular 12, which is an upgrade to Google’s popular TypeScript-based web framework, has reached a beta stage, at the time of writing this article, with a preliminary release now available.

Some features in the beta include:

You can consult the full list of changes on GitHub.

Angular 12 Prerequisites

Before start learning Angular, you need to have the following prerequisites:

  • Knowledge of JavaScript,
  • Familiarity with TypeScript (classes and decorators)
  • Node.js and npm installed on your development machine

We’ll be learning step by step how to build a working application that gets data from a third-party REST API. You’ll get articles including the term “frontend development” on the web and display them using Bootstrap 4.

You’ll learn to use Angular HttpClient to communicate with the API to fetch data and Bootstrap components to display data.

In the next part, we’ll learn how to generate a new Angular 12 project using the Angular CLI, then we’ll add Bootstrap 4 in the third part.

This post is originally published at WebTutPro

  • Author: Techiediaries Team