Angular Projects - Third Edition

Angular Projects - Third Edition

by Aristeidis Bampakos
Released July 2023
Publisher(s): Packt Publishing
ISBN: 9781803239118

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Take Angular to the next level – build captivating real-world applications while exploring modern web technologies and best practices Purchase of the print or Kindle book includes a free PDF eBook

Key Features

  • Explore Angular's capabilities for cross-platform app development
  • Combine Angular with popular web technologies such as Nx monorepos, server-side rendering, and progressive web apps
  • Build your own libraries and schematics using Angular CDK and Angular CL

Book Description

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.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Creating Your First Web Application in Angular
    1. Essential background theory and context
    2. Introduction to the Angular CLI
    3. Exploring the rich ecosystem of Angular tooling in VS Code
      1. Nx Console
      2. Angular Language Service
      3. Angular Snippets
      4. Angular Evergreen
      5. Material Icon Theme
    4. Project overview
    5. Getting started
    6. Creating our first Angular application
    7. Interacting with the Angular framework
    8. Using Nx Console for automating Angular CLI commands
    9. Summary
    10. Practice questions
    11. Further reading
  3. Building an SPA Application with Scully and Angular Router
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Setting up routing in an Angular application
    5. Creating the basic layout of our blog
    6. Configuring routing for our application
      1. Creating the contact page
      2. Adding the articles page
    7. Adding blog capabilities with Scully
      1. Installing the Scully library
      2. Initializing our blog page
    8. Displaying blog posts on the home page
    9. Summary
    10. Practice questions
    11. Further reading
  4. Building an Issue Tracking System Using Reactive Forms
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Installing Clarity in an Angular application
    5. Displaying an overview of issues
      1. Fetching pending issues
      2. Visualizing issues in a data grid
    6. Reporting new issues
      1. Setting up reactive forms in an Angular application
      2. Creating the report issue form
      3. Displaying a new issue in the list
      4. Validating the details of an issue
    7. Resolving an issue
    8. Turning on suggestions for new issues
    9. Summary
    10. Exercise
    11. Further reading
  5. Building a PWA Weather Application Using Angular Service Worker
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Setting up the OpenWeather API
    5. Displaying weather data
      1. Setting up the Angular application
      2. Communicating with the OpenWeather API
      3. Displaying weather information for a city
    6. Enabling offline mode with the service worker
    7. Staying up to date with in-app notifications
    8. Deploying our app with Firebase Hosting
    9. Summary
    10. Exercise
    11. Further reading
  6. Building a WYSIWYG Editor for the Desktop Using Electron
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Adding a WYSIWYG editor library for Angular
    5. Integrating Electron in the workspace
    6. Communicating between Angular and Electron
      1. Configuring the Angular CLI workspace
      2. Interacting with the editor
      3. Interacting with the filesystem
    7. Packaging a desktop application
      1. Configuring webpack for production
      2. Using an Electron bundler
    8. Summary
    9. Practice questions
    10. Further reading
  7. Building a Mobile Photo Geotagging Application Using Capacitor and 3D Maps
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Creating a mobile application with Ionic
      1. Scaffolding the application
      2. Building the main menu
    5. Taking photos with Capacitor
      1. Creating the user interface
      2. Interacting with Capacitor
    6. Storing data in Firebase
      1. Creating a Firebase project
      2. Integrating the AngularFire library
    7. Previewing photos with CesiumJS
      1. Configuring CesiumJS
      2. Displaying photos on the viewer
    8. Summary
    9. Practice questions
    10. Further reading
  8. Building an SSR Application for a GitHub Portfolio Using Angular
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Building an Angular application with the GitHub API
      1. Building the dashboard
      2. Displaying personal information
      3. Listing user repositories
      4. Visualizing the organization membership
    5. Integrating Angular Universal
    6. Prerendering content during build
    7. Enhancing SEO capabilities
    8. Summary
    9. Practice questions
    10. Further reading
  9. Building an Enterprise Portal Using Nx Monorepo Tools and NgRx
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Creating a monorepo application using Nx
    5. Creating user-specific portals
      1. Building the visitor portal
      2. Building the administrator portal
    6. Managing application state with NgRx
      1. Configuring the state
      2. Interacting with the store
    7. Visualizing data with graphs
      1. Persisting visit data in the store
      2. Displaying visit statistics
    8. Summary
    9. Practice questions
    10. Further reading
  10. Building a Component UI Library Using Angular CLI and Angular CDK
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Creating a library with the Angular CLI
    5. Building a draggable card list
      1. Displaying card data
      2. Adding drag-and-drop functionality
    6. Interacting with the clipboard
    7. Publishing an Angular library to npm
    8. Using components as Angular elements
    9. Summary
    10. Practice questions
    11. Further reading
  11. Customizing Angular CLI Commands Using Schematics
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Installing the Schematics CLI
    5. Creating a Tailwind CSS component
    6. Creating an HTTP service
    7. Summary
    8. Exercise
    9. Further reading
  12. Other Books You May Enjoy
  13. Index

Product information

  • Title: Angular Projects - Third Edition
  • Author(s): Aristeidis Bampakos
  • Release date: July 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803239118