Book Image

Angular Projects

By : Zama Khan Mohammed

Book Image

Angular Projects

By: Zama Khan Mohammed

Overview of this book

<p>Angular is one of the best frameworks, not only for building web applications, but also for building applications on other platforms such as desktop and mobile. It is packed with amazing web tools that allow developers to become more productive and make the development experience a happier one </p><p>This book will be your practical guide when it comes to building optimized web apps using Angular. The book explores a number of popular features, including the experimental Ivy rendered, lazy loading, and differential loading, among others, in the projects. It starts with the basics of Angular and its tools, which will help you to develop and debug Angular applications. You will learn how to create an SPA using Angular Router, and optimize it by code splitting and Preloading Routes. We will then build a form-heavy application and make forms reactive by using Reactive Forms. After that, we will learn how to build a Progressive Web App, and a server-side rendering app, as well as a MonoRepo app. Furthermore, we will also dive into building mobile apps using Ionic and NativeScript. Finally, we end the book by creating a component library for our application using Angular CDK and then testing it. </p><p>By the end of this book, you’ll have gained comprehensive insights into using Angular, along with hands-on experience in creating intuitive real-world applications.</p>

Title Page

Copyright and Credits

Copyright and Credits

Angular Projects

Dedication

About Packt

Foreword

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Setting Up the Development Environment

Setting Up the Development Environment

Installing Node.js

Introducing TypeScript

Introducing Angular CLI

Introducing Angular Console

Debugging Angular applications using Augury

Building a Flashcard Game Using Angular

Building a Flashcard Game Using Angular

Technical requirements

Creating a new project and a component

Introducing template-driven forms

Introducing services

Introducing observables

Further reading

Building a Personal Blog Using Angular Router and WordPress

Building a Personal Blog Using Angular Router and WordPress

Technical requirements

Understanding SPAs

Project overview

Setting up a WordPress server

Setting up an Angular project with the Angular CLI

Adding multiple routes to our application

Calling the WordPress API

Implementing lazy loading route

Introducing pre-loading strategy

Adding animations

Further reading

Building an Inventory Application Using Reactive Forms

Building an Inventory Application Using Reactive Forms

Technical requirements

Understanding reactive forms

Project overview

Getting started

Using reactive forms

Adding built-in and custom validations

Optimizing the bundle

Further reading

Building a PWA E-Commerce Application Using Angular Service Worker

Building a PWA E-Commerce Application Using Angular Service Worker

Technical requirements

Exploring Progressive Web Apps

Project overview

Setting up our Nest.js application

Setting up our Angular application

Auditing our application

Adding PWA capability

Deploying to Firebase

Further reading

Building an Auditing Application Using Angular and Ionic

Building an Auditing Application Using Angular and Ionic

Technical requirements

Exploring the Ionic framework

Project overview

Getting started with the Ionic CLI

Theming the Ionic application

Setting up Firebase

Getting data from the Firebase Realtime Database

Creating dynamic forms using ngx-formly

Using Ionic Native so that we can use a camera

Further reading

Building a Server-Side Rendering Application Using Angular

Building a Server-Side Rendering Application Using Angular

Technical requirements

Understanding Angular Universal

Deployment and performance analysis

Adding Universal support

Transferring state from the server to the client

Deployment and performance analysis of SSR

Understanding SEO optimizations

Social media scraping

Further reading

Building an Enterprise Portal Using Nx, NgRx, and Redux

Building an Enterprise Portal Using Nx, NgRx, and Redux

Technical requirements

Exploring the monorepo application

Redux using NgRx

Understanding token-based authentication

Project overview

Getting started

Adding an authentication library

Using ngx-charts for D3 visualizations

Further reading

Building a Multi-Language NativeScript Application with Angular

Building a Multi-Language NativeScript Application with Angular

Technical requirements

Introducing NativeScript Playground

Creating your first NativeScript with an Angular application

Exploring UI layout containers

Creating the application

Implementing internationalization using ngx-translate

Adding a NativeScript plugin to our application

Further reading

Building a Component Library Using Angular CDK and Elements

Building a Component Library Using Angular CDK and Elements

Technical requirements

Understanding the Angular CDK

Project overview

Getting started

Creating dropdown functionality

Adding accessibility support

Publishing a library on npm

Introducing Angular elements

Further reading

Testing an Angular Application Using Jasmine, Jest, and Protractor

Testing an Angular Application Using Jasmine, Jest, and Protractor

Technical requirements

Why test our web applications?

Project overview

Getting started

Isolated unit testing

Deep integration tests

Understanding code coverage

Using Jest with the Angular CLI

End-to-end testing

Custom error handling

Further reading

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Setting up an Angular project with the Angular CLI

In this section, we will start with scaffolding a simple Angular application with routing enabled using the Angular CLI and use some Angular generation schematics to create modules and components.

Let's get started and build a simple Angular application with routing and SCSS by using the Angular CLI. Here, we will use the prefix of pb so that our component tags are pb-root, pb-post, and so on:

> ng new personal-blog --routing --style scss --prefix pb

The ng new command is used for creating a new Angular app:

personal-blog is the name of the project, and so we will create a folder called personal-blog and include all the application files in it.
The routing flag is used to create an application with routing capability enabled. The routing flag creates an extra module called AppRoutingModule...