0%

Understand Angular web application development by building captivating real-world applications while exploring modern web technologies and best practices

Key Features

  • Explore Angular's capabilities for building applications across different platforms
  • Combine popular web technologies with Angular such as monorepo, Jamstack, and PWA
  • Build your own libraries and schematics using Angular CDK and Angular CLI

Book Description

Angular is a popular JavaScript framework that can run on a broad range of platforms including web, desktop, and mobile. It has an array of rich features right out of the box and a wide range of tools that makes it popular among developers. This updated second edition of Angular Projects will teach you how to build efficient and optimized web applications using Angular.

You will start by exploring 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. As you advance, you will understand how to implement popular technologies such as Angular Router, Scully, Electron, Angular service worker, Nx monorepo tools, NgRx, and more while building an issue tracking system, a PWA weather application, a mobile photo geotagging application, a component UI library, and many other exciting projects. Toward the concluding chapters, you'll get to grips with customizing Angular CLI commands using schematics.

By the end of this book, you will have the skills you need to be able 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 and SPA techniques
  • Build desktop applications with Angular and Electron
  • Enhance user experience (UX) in offline mode with PWA techniques
  • Make web pages SEO-friendly 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

If you are a developer who has beginner-level experience with Angular and are looking to become well-versed with essential tools and deal with the various use cases you may encounter with Angular, then this Angular development book is for you. Beginner-level knowledge of web application development and basic experience working with ES6 or TypeScript are assumed.

Table of Contents

  1. Angular Projects Second Edition
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  7. Chapter 1: Creating Your First Web Application in Angular
    1. Essential background theory and context
    2. Introduction to the Angular CLI
    3. Angular tooling in VSCode
    4. Project overview
    5. Getting started
    6. Creating our first Angular application
    7. Interacting with the Angular framework
    8. Building our application with Nx Console
    9. Summary
    10. Practice questions
    11. Further reading
  8. Chapter 2: 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
    7. Creating the contact page
    8. Adding the articles page
    9. Adding blog capabilities with Scully
    10. Installing the Scully library
    11. Initializing our blog page
    12. Displaying blog posts on the home page
    13. Summary
    14. Practice questions
    15. Further reading
  9. Chapter 3: Building an Issue Tracking System using Reactive Forms
    1. Essential background theory and context
    2. Project overview
    3. Getting started
    4. Installing Clarity to an Angular application
    5. Displaying an overview of issues
    6. Fetching pending issues
    7. Visualizing issues in a data grid
    8. Reporting new issues
    9. Setting up reactive forms in an Angular application
    10. Creating the report issue form
    11. Displaying a new issue in the list
    12. Validating the details of an issue
    13. Resolving an issue
    14. Turning on suggestions for new issues
    15. Summary
    16. Exercise
    17. Further reading
  10. Chapter 4: 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
    6. Setting up the Angular application
    7. Communicating with the OpenWeather API
    8. Displaying weather information for a city
    9. Enabling offline mode with the service worker
    10. Staying up to date with in-app notifications
    11. Deploying our app with Firebase hosting
    12. Summary
    13. Practice questions
    14. Further reading
  11. Chapter 5: 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
    7. Configuring the Angular CLI workspace
    8. Interacting with the editor
    9. Interacting with the filesystem
    10. Packaging a desktop application
    11. Configuring webpack for production
    12. Using an Electron bundler
    13. Summary
    14. Practice questions
    15. Further reading
  12. Chapter 6: 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
    5. Scaffolding the application
    6. Building the main menu
    7. Taking photos with Capacitor
    8. Creating the user interface
    9. Interacting with Capacitor
    10. Storing data in Firebase
    11. Creating a Firebase project
    12. Integrating the AngularFire library
    13. Previewing photos with CesiumJS
    14. Configuring CesiumJS
    15. Displaying photos on viewer
    16. Summary
    17. Practice questions
    18. Further reading
  13. Chapter 7: 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
    5. Building the dashboard
    6. Displaying personal information
    7. Listing user repositories
    8. Visualizing the organization membership
    9. Integrating Angular Universal
    10. Prerendering content during build
    11. Enhancing SEO capabilities
    12. Replaying events with preboot
    13. Summary
    14. Practice questions
    15. Further reading
  14. Chapter 8: 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
    6. Building the visitor portal
    7. Building the administrator portal
    8. Managing application state with NgRx
    9. Configuring the state
    10. Interacting with the store
    11. Visualizing data with graphs
    12. Persisting visit data in the store
    13. Displaying visit statistics
    14. Summary
    15. Practice questions
    16. Further reading
  15. Chapter 9: 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
    6. Displaying card data
    7. Adding drag-and-drop functionality
    8. Interacting with the clipboard
    9. Publishing an Angular library to npm
    10. Using components as Angular elements
    11. Summary
    12. Practice questions
    13. Further reading
  16. Chapter 10: 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 component
    6. Creating an HTTP service
    7. Summary
    8. Exercise
    9. Further reading
    10. Why subscribe?
  17. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts
34.205.246.61