Book Image

Learning Angular - Third Edition

By : Aristeidis Bampakos, Pablo Deeleman
Book Image

Learning Angular - Third Edition

By: Aristeidis Bampakos, Pablo Deeleman

Overview of this book

Angular, loved by millions of web developers around the world, continues to be one of the top JavaScript frameworks thanks to its regular updates and new features that enable fast, cross-platform, and secure frontend web development. With Angular, you can achieve high performance using the latest web techniques and extensive integration with web tools and integrated development environments (IDEs). Updated to Angular 10, this third edition of the Learning Angular book covers new features and modern web development practices to address the current frontend web development landscape. If you are new to Angular, this book will give you a comprehensive introduction to help you get you up and running in no time. You'll learn how to develop apps by harnessing the power of the Angular command-line interface (CLI), write unit tests, style your apps by following the Material Design guidelines, and finally deploy them to a hosting provider. The book is especially useful for beginners to get to grips with the bare bones of the framework needed to start developing Angular apps. By the end of this book, you’ll not only be able to create Angular applications with TypeScript from scratch but also enhance your coding skills with best practices.
Table of Contents (19 chapters)
1
Section 1: Getting Started with Angular
4
Section 2: Components – the Basic Building Blocks of an Angular App
9
Section 3: User Experience and Testability
15
Section 4: Deployment and Practice

What this book covers

Chapter 1, Building Your First Angular App, covers the setup of the development environment by installing Angular CLI 10 and explains how to use schematics (commands) to automate tasks such as code generation and application building. We create a new simple application using the Angular CLI 10 and build it. We also learn about how Angular tooling has been improved in some of the most widely known IDEs and emphasize the importance of Visual Studio Code.

Chapter 2, Introduction to TypeScript, explains what TypeScript is, the language that is used when creating Angular applications, and what the most basic building blocks are, such as types, template strings, lambdas, and classes. We learn to use the decorators that are widely used in Angular classes and ES6 modules and take a look at some of the advanced types available and the latest features of the language.

Chapter 3, Component Interaction and Inter-Communication, covers how a component is connected to its template and how we can use an Angular decorator to configure it. We take a look at how components communicate each other by passing data from one component to another using input and output bindings and learn about the different strategies to detect changes in a component. We will then see, what are some of the available ways to apply styles to a component. Finally, we investigate the hook events that are available in the life cycle of a component.

Chapter 4, Enhance Components with Pipes and Directives, covers the available built-in directives and pipes, and we build our own custom pipes and leverage them to a sample component that demonstrates their use. We learn the difference between attribute and structural directives.

Chapter 5, Structure an Angular App, explains how an Angular 10 application is organized into a tree of components, and how to group components into modules and use the dependency injection mechanism to create and use services in components. We find out about the different types of modules and their purpose as well as the different scopes for services.

Chapter 6, Enrich Components with Asynchronous Data Services, examines the RxJS library and observables that are fundamental to the HTTP client of Angular. We learn how to access a remote backend API, get some data and display it to the component, and how to overcome the problem of not having the actual backend API ready yet (how to design our application without a real API). We also investigate how to set additional headers to an HTTP request and intercept such a request to act before sending the request or upon completion.

Chapter 7, Navigate through Components with Routing, explains how to use the Angular router in order to activate different parts of an Angular 10 application from a URL. We find out how to pass parameters through the URL and what are the available events of the router that we can hook. We learn to break an application into routing modules that can be lazy loaded. We then learn how to guard against our components and how to prepare data prior to initialization of the component.

Chapter 8, Orchestrating Validation Experiences in Forms, explains how to use Angular reactive forms in order to integrate HTML forms and how to set them up using FormGroup and FormControl. We track the interaction of the user in the form and validate input fields, and then create a simple login form to illustrate the use of forms.

Chapter 9, Introduction to Angular Material, covers how to integrate Google Material Design guidelines in an Angular 10 application using a library called Angular Material that has been developed by the Angular team. We take a look at some of the core components of the library and their usage and discuss the available themes that are bundled with the library and how to install them.

Chapter 10, Give Motion to Components with Animations, explains how animation works with pure vanilla CSS and how to animate components of an Angular 10 application using the built-in AnimationBuilder or a custom directive.

Chapter 11, Unit Test an Angular App, covers how to test Angular 10 artifacts and override them in a test, what the different parts of a test are, and which parts of a component should be tested.

Chapter 12, Bringing an Angular App to Production, sets out the available hosting providers that are supported by the Angular CLI. We perform optimizations prior to deployment, and we use Angular CLI 10 to deploy to GitHub pages.

Chapter 13, Develop a Real-World Angular App, puts into practice many aspects of what we have learned in the previous chapters to create a full-blown, real-world Angular 10 application.