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>

Related Content you might be interested in

Current Title:

Small book image
Angular Projects
Zama Khan Mohammed
Sep, 2019 | 350 pages
No titles found
Table of Contents (19 chapters)
Title Page
Title Page
Copyright and Credits
Copyright and Credits
Angular Projects
Dedication
Dedication
About Packt
About Packt
Why subscribe?
Foreword
Foreword
Contributors
Contributors
About the author
About the reviewers
Packt is searching for authors like you
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Setting Up the Development Environment
Setting Up the Development Environment
Installing Node.js
Introducing TypeScript
Introducing Angular CLI
Introducing Angular Console
VS Code
Debugging Angular applications using Augury
Summary
2
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
Summary
Questions
Further reading
3
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
Summary
Questions
Further reading
4
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
Summary
Questions
Further reading
5
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
Summary
Questions
Further reading
6
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 
Summary
Questions
Further reading
7
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
Summary
Questions
Further reading
8
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
Summary
Questions
Further reading
9
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
Summary
Questions
Further reading
10
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
Summary
Questions
Further reading
11
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
Summary
Questions
Further reading
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

End-to-end testing

The Angular CLI also provides end-to-end testing for applications out of the box and uses Protractor to do so. e2e testing is used to test the application by running the application in a browser and testing whether everything works as expected end-to-end. Protractor uses Selenium behind the scenes to run the application and does testing by using JavaScript.

Let's run the e2e test case for the application using the Angular CLI command:

> ng e2e

This should open the browser and navigate to the home page. It should fail:

**************************************************
* Failures *
************************************************
1) workspace-project App should display welcome message
 - Failed: No element found using locator: By(css selector, app-root h1)
Executed 1 of 1 spec (1 FAILED) in 2 secs.
[23:35:36] I/launcher - 0 instance(s) of WebDriver still running...
Previous Section
End of Section 10
Next Section