In this book, we will be covering different kinds of projects, from the basic Angular app to a server-rendered one, and a native app for Android and iOS. We will also look at how to create a component library for our enterprise applications and start testing our components. We will be using different Angular component libraries and tools and get a holistic view of Angular Framework and its capabilities.

Angular apps are written using web technologies. In order to run Angular apps, we need to install Node.js on our machine, which is what we will be doing in this first chapter.

Angular is a framework for building mobile and web applications. It uses TypeScript, which is a superscript of ECMAScript. It adds support for types in JavaScript, which makes the development of Angular apps easier at compile time. We will look into some basic concepts of TypeScript in this chapter, which will explain some of the syntax that we will be using in this book.

Another tool we will look at is Angular CLI, the command-line interface program that the Angular team has created to help with the development and maintenance of Angular apps.

We could write Angular apps using a simple text editor, but to get full productivity out of building our Angular application, we will be using VS Code. Instead of being an Integrated Development Environment (IDE), it's a code editor with rich extension support. In this chapter, we will use VS Code and install the required extensions to make Angular development faster.

The following topics will be covered in this chapter:

1. Installing Node.js
2. Understanding the basics of TypeScript
3. Introducing Angular CLI
4. Introducing Angular Console
5. Installing VS Code and installing various extensions
6. Installing Augury and looking at various sections that help us debug our application

In this chapter, we will develop a basic Angular app for a flashcard game. We will also introduce some of the built-in attributes and structural directives in the Angular framework and create a basic template-driven form so that we can add/edit the flashcards. We will be introduced to observables and learn how to use the async pipe to get observable data on the page. We will also create a basic FlashService to perform all the operations related to adding, editing, and deleting flashcards.

The following topics will be covered in this chapter:

1. Creating a new Angular project and a component
2. Introducing template-driven forms
3. Introducing services
4. Introducing observables

In this chapter, we will create a personal blog using Angular. We will create it as a singlepage application (SPA) using Angular Router. SPAs have the benefit of loading most of an application on their initial load, which is crucial when you are browsing a website. When going from one page to another, an SPA doesn't have to download the whole page; instead, it requests the required API for the page, which is way faster. You will also learn how to configure multiple environments for the project, optimize the SPA using lazy loading routes, and animate routes and elements in Angular applications.

The following topics will be covered in this chapter:

1. Setting up a WordPress server
2. Setting up an Angular project with the Angular CLI
3. Adding multiple routes to our application
4. Calling the WordPress API
5. Implementing the lazy loading route
6. Introducing pre-loading strategy
7. Adding animations

In this chapter, we will be creating an application for managing an inventory using one of the third-party component libraries that was created by VMware's team, known as the Clarity component. It follows the Clarity Design System, which has detailed UX/UI guidelines that need to be followed for using the components correctly. It also documents do's and don'ts for using each of the components. You can find the documentation at https:/ / clarity. design.

Throughout this chapter, we will be displaying products and performing Create, Read, Update, and Delete (CRUD) operations. In this project, we will also be using reactive forms and creating a complex form via a step-by-step workflow using Clarity's wizard component. We will be using some built-in validations from Angular and will also be creating a custom validator.

The following topics will be covered in this chapter:

1. Understanding reactive forms
2. Using reactive forms
3. Adding built-in and custom validations
4. Optimizing the bundle

In this chapter, we will be creating an e-commerce application for an electronic store, and then we will convert it into a Progressive Web App (PWA), add support for offline usage, and also add the web app as an application on the home screen on both Android and iOS. We will also set up a Nest.js application so that we can get data from MongoDB.

The following topics will be covered in this chapter:

1. We will create a Nest.js application for a backend service
2. We will use Angular Material to create a simple e-commerce application
3. We will use Lighthouse to measure and analyze our application for PWA
4. We will convert our application so that it scores a perfect 100 on the Lighthouse for PWA
5. We will make our application run offline
6. We will deploy our application on Firebase Hosting

In this chapter, we will be using the Firebase Realtime Database to create a Native application that runs on iOS and Android. This will use the Ionic 4 framework. We will also be using ngx-formly in order to create a dynamic form without having to write an HTML code for the whole form.

The following topics will be covered in this chapter:

1. Exploring the Ionic framework
2. Getting started with the Ionic CLI
3. Theming an Ionic application
4. Setting up Firebase
5. Getting data from the Firebase Realtime Database
6. Creating dynamic forms using ngx-formly
7. Using Ionic Native so that we can use a camera