Angular Projects: Build modern web apps in Angular 16 with 10 different projects and cutting-edge technologies. 3 Ed

Cover Page....2

Table of Contents....3

Preface....4

Creating Your First Web Application in Angular....13

Essential background theory and context....13

Introduction to the Angular CLI....16

Exploring the rich ecosystem of Angular tooling in VS Code....18

Project overview....24

Getting started....24

Creating our first Angular application....25

Interacting with the Angular framework....28

Using Nx Console for automating Angular CLI commands....32

Summary....35

Practice questions....36

Further reading....37

Building an SPA Application with Scully and Angular Router....38

Essential background theory and context....38

Project overview....39

Getting started....40

Setting up routing in an Angular application....40

Creating the basic layout of our blog....43

Configuring routing for our application....48

Adding blog capabilities with Scully....58

Displaying blog posts on the home page....63

Summary....71

Practice questions....71

Further reading....72

Building an Issue Tracking System Using Reactive Forms....73

Essential background theory and context....73

Project overview....74

Getting started....75

Installing Clarity in an Angular application....76

Displaying an overview of issues....77

Reporting new issues....83

Resolving an issue....96

Turning on suggestions for new issues....102

Summary....104

Exercise....105

Further reading....105

Building a PWA Weather Application Using Angular Service Worker....107

Essential background theory and context....107

Project overview....109

Getting started....109

Setting up the OpenWeather API....110

Displaying weather data....111

Enabling offline mode with the service worker....124

Staying up to date with in-app notifications....129

Deploying our app with Firebase Hosting....135

Summary....140

Exercise....141

Further reading....141

Building a WYSIWYG Editor for the Desktop Using Electron....142

Essential background theory and context....142

Project overview....143

Getting started....144

Adding a WYSIWYG editor library for Angular....145

Integrating Electron in the workspace....148

Communicating between Angular and Electron....156

Packaging a desktop application....163

Summary....168

Practice questions....169

Further reading....169

Building a Mobile Photo Geotagging Application Using Capacitor and 3D Maps....171

Essential background theory and context....171

Project overview....172

Getting started....174

Creating a mobile application with Ionic....174

Taking photos with Capacitor....178

Storing data in Firebase....184

Previewing photos with CesiumJS....194

Summary....208

Practice questions....208

Further reading....209

Building an SSR Application for a GitHub Portfolio Using Angular....211

Essential background theory and context....211

Project overview....212

Getting started....213

Building an Angular application with the GitHub API....214

Integrating Angular Universal....234

Prerendering content during build....237

Enhancing SEO capabilities....241

Summary....244

Practice questions....245

Further reading....245

Building an Enterprise Portal Using Nx Monorepo Tools and NgRx....247

Essential background theory and context....248

Project overview....249

Getting started....250

Creating a monorepo application using Nx....251

Creating user-specific portals....254

Managing application state with NgRx....265

Visualizing data with graphs....277

Summary....288

Practice questions....289

Further reading....289

Building a Component UI Library Using Angular CLI and Angular CDK....291

Essential background theory and context....292

Project overview....292

Getting started....293

Creating a library with the Angular CLI....294

Building a draggable card list....297

Interacting with the clipboard....306

Publishing an Angular library to npm....311

Using components as Angular elements....313

Summary....317

Practice questions....318

Further reading....318

Customizing Angular CLI Commands Using Schematics....320

Essential background theory and context....320

Project overview....321

Getting started....322

Installing the Schematics CLI....322

Creating a Tailwind CSS component....324

Creating an HTTP service....330

Summary....335

Exercise....336

Further reading....336

Other Books You May Enjoy....338

Index....342

Angular Projects isn't like other books on Angular - this is a project-based guide that helps budding Angular developers get hands-on experience while developing cutting-edge applications.

In this updated third edition, you'll master the essential features of the framework by creating ten different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool, giving you a 360-degree view of what the Angular ecosystem makes possible.

Updated to the newest version of Angular, the book has been revamped to keep up with the latest technologies. You'll work on a PWA weather application, a mobile photo geotagging application, a component UI library, and other exciting projects. In doing so, you'll implement popular technologies such as Angular Router, Scully, Electron, Angular service workers, Jamstack, NgRx, and more.

By the end of this book, you will have the skills you need to build Angular apps using a variety of different technologies according to your or your client's needs.

What You Will Learn:

• Set up Angular applications using Angular CLI and Nx Console
• Create a personal blog with Jamstack, Scully plugins, and SPA techniques
• Build an issue management system using typed reactive forms
• Use PWA techniques to enhance user experience
• Make SEO-friendly web pages with server-side rendering
• Create a monorepo application using Nx tools and NgRx for state management
• Focus on mobile application development using Ionic
• Develop custom schematics by extending Angular CLI

Who this book is for:

This book is for developers with beginner-level Angular experience who want to become proficient in using essential tools and dealing with the various use cases in Angular. Beginner-level knowledge of web application development and basic experience of working with ES6 or TypeScript is essential before you dive in.

This book focuses on practical applications of Angular. If you want to deepen your understanding of this framework, we recommend that you also look at Learning Angular from the same author.