You will start by exploring the essential features of the framework by creating 10 different real-world web applications. Each application will demonstrate how to integrate Angular with a different library and tool. As you advance, you will learn how to implement popular technologies such as Angular Router, Scully, Electron, Angular's service worker, Nx's 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. In 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 build Angular apps using a variety of different technologies according to you or your client's needs.
If you are a developer who has beginner-level experience with Angular and you're looking to become well versed in the essential tools for dealing 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 of working with ES6 or TypeScript are assumed.
Chapter 1, Creating Your First Web Application in Angular, explores the main features of the Angular framework and teaches you about the basic building blocks that comprise a typical Angular application. You will investigate the different tools and IDE extensions that are available in the Angular ecosystem to enhance the developer's workflow and experience.
Chapter 2, Building an SPA Application with Scully and Angular Router, looks at how an Angular application is based on the Single Page Application (SPA) architecture, where typically we have multiple pages that are served by different URLs or routes. On the other hand, Jamstack is a hot technology that is emerging and allows you to build fast, static websites and serve them directly from a CDN.
In this chapter, we will use the Angular Router to implement routing functionality in an Angular application. We will also use Scully, the best static site generator for Angular, to create a personal blog that embraces the Jamstack architecture.
Chapter 3, Building an Issue Tracking System Using Reactive Forms, is where we build an issue tracking management system and use Angular reactive forms to add new issues to the system. We will design our forms using Clarity Components from VMware, and we will incorporate built-in and custom validations. We will also react to value changes in the forms and take actions accordingly.
Chapter 4, Building a PWA Weather Application Using Angular Service Worker, covers how the user experience of a web application is not the same for all users, especially in places with poor network coverage and connectivity. When we build a web application, we should take into account all sorts of network types.
In this chapter, we will create an application that uses the OpenWeather API to display the weather of a specified region. We will learn how to deploy the application to Firebase Hosting. We will also explore PWA techniques using the Angular service worker to provide a seamless user experience when offline.
In this chapter, we will create a WYSIWYG editor that can run on the desktop. We will build an Angular application and integrate it with ngx-wig, a popular WYSIWYG Angular library, and we will use Electron to package it as a desktop application. Data is persisted locally in the filesystem using a Node.js API.
In this chapter, we will use Capacitor to build a geotagging mobile application for our photos. We will use various Ionic plugins to take a photo in a specified location and persist it to Cloud Firestore. We will then display a list of all photos taken inside the Cesium 3D viewer.
Chapter 7, Building an SSR Application for a GitHub Portfolio Using Angular, dives into Search Engine Optimization (SEO), a critical aspect for any website nowadays. Who doesn't want their website to look good when sharing it via social media? The real challenge for client web applications is to optimize it, which can be accomplished by rendering content on the server.
In this chapter, we will learn how to create a GitHub portfolio application using the GitHub API. We will then render it on the server and learn how to transfer the state to the browser. We will also see how to set the page title and additional metadata dynamically and use preboot to manage page transitions.
Chapter 8, Building an Enterprise Portal Using Nx Monorepo Tools and NgRx, covers monorepo architecture, which is a popular technique for when working with multiple applications under a single repository, giving speed and flexibility to the development process.
In this chapter, we will use Nx monorepo development tools to create two portals: one for the end user, in which they will be able to select a Point of Interest (POI) and visit it on a map, and another for admins to check on visit statistics for a given POI. Application state is managed using NgRx.
Chapter 9, Building a Component UI Library Using Angular CLI and Angular CDK, addresses how enterprise organizations usually need custom UI libraries that can be used across different web applications. The Angular CDK provides a broad range of functionalities for creating accessible and high-performing UI components.
In this chapter, we will create two different components using the Angular CDK and the Bulma CSS framework. We will also package them as a single Angular library and learn how to publish them on npm, so that they can be re-used in different apps. We will also investigate how we can use each component as an Angular element.
Chapter 10, Customizing Angular CLI Commands Using Schematics, covers how organizations usually follow different guidelines when it comes to creating Angular entities such as components or services. Angular schematics can assist them by extending Angular CLI commands and providing custom automation.
In this chapter, we will learn how to use the Angular schematics API to build our own set of commands for generating components and services. We will build a schematic for creating an Angular component that contains the Tailwind CSS framework. We will also build an Angular service that uses the built-in HTTP client by default.
You will need a version of Angular 12 installed on your computer, preferably the latest minor one. All code examples have been tested using Angular 12.0.0 on Windows but they should work with any future release of Angular 12 as well.
If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Angular-Projects-Second-Edition. If there's an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800205260_ColorImages.pdf.
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "It will add all the necessary npm packages of the Clarity library to the dependencies section of the package.json file."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Any command-line input or output is written as follows:
ng add @angular/material --theme=indigo-pink --typography=true --animations=true
Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "Click on the ADD NEW ISSUE button and enter the details of a new issue."
Tips or important notes
Appear like this.
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Once you've read Angular Projects Second Edition, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.