Effective Angular

This is the code repository for the Effective Angular book, published by Packt.

Develop applications of any size by effectively using Angular with Nx, RxJS, NgRx, and Cypress

What is this book about?

Learn how to use the Angular framework effectively and develop scalable enterprise-ready applications using the latest techniques, such as standalone components, control flow, and Signals, implementing best practices and design patterns, and utilizing industry-standard libraries like NgRx, Nx, and Transloco. You will dive deep into the framework to learn about its features and master concepts like dependency injection, reactive programming, and state management. Starting with different front-end architecture designs and setting up a scalable environment for Angular applications and libraries using Nx, the book then takes you through the framework's newest and most powerful features. You’ll learn to manipulate the Document Object Model (DOM) with Angular directives, pipes, and animations, and build reusable components like a pro.

Effective Angular covers the following features:

Effectively using Nx to develop a monorepo ready to handle hundreds of Angular applications and libraries gracefully.
Explore Angular's features by reducing complexity using standalone components, injecting dependencies with the inject function, managing state with signals, controlling template rending with control flow, and guarding your routes with simple functions.
Manage application states using RxJS, Signals, and NgRx
Explore reactive programming using Signals and RxJS
Implement design patterns for scalable and maintainable Angular code
Build dynamic and reusable components with content projection, template references and deferrable views
Perform end-to-end, and unit testing in Angular with Cypress and Jest
Optimize the performance of your Angular applications by deeply understanding change detection, utilizing Signals and preventing bad practices that impact performance

If you feel Effective Angular is the book for you, get your copy today!

Technical requirements

Visual Studio Code (VS Code) as your integrated development environment (IDE)
Chrome web browser
Angular 17.1 or higher
NodeJS version v20.11.0 or higher
TypeScript version 5.3.3 or higher
Nx version v18.0.7 or higher

Cloning the repository

To run the examples, please first clone the repository, as follows:

git clone https://github.com/PacktPublishing/Effective-Angular.git

BusinessToolsMonorepo

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Start the app

To start the development server run nx serve finance-expenses-registration. Open your browser and navigate to http://localhost:4200/. Happy coding!

Branches per chapter

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Errata

If you have purchased the book, please note the following correction:

In some instances, where you see » in the code snippets, it should be replaced with " for correct syntax. We apologize for any confusion caused by this oversight.

NsdHSO/Effective-Angular