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.

Related Content you might be interested in

Current Title:

Small book image
Learning Angular - Third Edition
Aristeidis Bampakos | Pablo Deeleman
Sep, 2020 | 430 pages
Small book image
Angular Projects
Aristeidis Bampakos
Jul, 2021 | 344 pages
Small book image
Angular Projects
Aristeidis Bampakos
Jul, 2023 | 312 pages
Small book image
Building Modern Web Applications Using Angular 4
Shravan Kumar Kasagoni
May, 2017 | 226 pages
Table of Contents (19 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Conventions used
Get in touch
Reviews
1
Section 1: Getting Started with Angular
Section 1: Getting Started with Angular
Free Chapter
2
Chapter 1: Building Your First Angular App
Chapter 1: Building Your First Angular App
Technical requirements
It's just Angular – introducing semantic versioning
Introducing Angular
Setting up our workspace with Angular CLI
Hello Angular
IDEs and plugins
Summary
3
Chapter 2: Introduction to TypeScript
Chapter 2: Introduction to TypeScript
The history of TypeScript
Types in TypeScript
Functions, lambdas, and execution flow
Common TypeScript features
Classes, interfaces, and inheritance
Decorators in TypeScript
Advanced types
Modules
Summary
4
Section 2: Components – the Basic Building Blocks of an Angular App
Section 2: Components – the Basic Building Blocks of an Angular App
5
Chapter 3: Component Interaction and Inter-Communication
Chapter 3: Component Interaction and Inter-Communication
Technical requirements
Creating our first component
Configuring a component
Interacting with the template
Communicating with other components
Encapsulating CSS styling
Change detection strategies
Introducing the component lifecycle
Summary
6
Chapter 4: Enhance Components with Pipes and Directives
Chapter 4: Enhance Components with Pipes and Directives
Technical requirements
Introducing directives
Transforming elements using directives
Manipulating data with pipes
Building custom pipes
Building custom directives
Summary
7
Chapter 5: Structure an Angular App
Chapter 5: Structure an Angular App
Technical requirements
Organizing components into modules
Configuring the application
How dependency injection works in Angular
Summary
8
Chapter 6: Enrich Components with Asynchronous Data Services
Chapter 6: Enrich Components with Asynchronous Data Services
Technical requirements
Strategies for handling asynchronous information
Reactive functional programming in Angular
Creating a backend API-the Angular way
Communicating data over HTTP
Authenticating with HTTP
Handling HTTP errors
Unsubscribing from observables
Summary
9
Section 3: User Experience and Testability
Section 3: User Experience and Testability
10
Chapter 7: Navigate through Components with Routing
Chapter 7: Navigate through Components with Routing
Technical requirements
Introducing the Angular router
Creating an Angular app with routing
Separating our app into feature routing modules
Passing parameters to routes
Enhancing navigation with advanced features
Summary
11
Chapter 8: Orchestrating Validation Experiences in Forms
Chapter 8: Orchestrating Validation Experiences in Forms
Technical requirements
Introducing forms to web apps
Data binding with template-driven forms
Using reactive patterns in Angular forms
Validating controls in a reactive way
Modifying forms dynamically
Creating elegant reactive forms
Building a custom validator
Manipulating form data
Watching state changes and being reactive
Summary
12
Chapter 9: Introduction to Angular Material
Chapter 9: Introduction to Angular Material
Technical requirements
Introducing Material Design
Introducing Angular Material
Adding core UI controls
Introducing the Angular CDK
Designing layouts using flexbox
Summary
13
Chapter 10: Giving Motion to Components with Animations
Chapter 10: Giving Motion to Components with Animations
Technical requirements
Creating animations with plain vanilla CSS
Introducing Angular animations
Animating components programmatically
Summary
14
Chapter 11: Unit test an Angular App
Chapter 11: Unit test an Angular App
Technical requirements
Why do we need tests?
The anatomy of a unit test
Introducing unit tests in Angular
Testing components
Testing services
Testing pipes
Testing routing
Testing directives
Testing reactive forms
Summary
15
Section 4: Deployment and Practice
Section 4: Deployment and Practice
16
Chapter 12: Bringing an Angular App to Production
Chapter 12: Bringing an Angular App to Production
Technical requirements
Building an Angular app
Limiting the application bundle size
Optimizing the application bundle
Deploying an Angular app
Summary
17
Chapter 13: Develop a Real-World Angular App
Chapter 13: Develop a Real-World Angular App
Technical requirements
Scaffolding the application structure
Implementing core features
Adding heroes functionality
Integrating the missions module
Summary
18
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Chapter 1: Building Your First Angular App

To better understand how to develop an Angular application, we need to learn some basic but essential things so that we can have a great experience on our journey with the Angular framework. One of the basic things that we should know is semantic versioning, which is the way that the Angular team has chosen to deal with changes between different versions of the framework. It will hopefully make it easier to find the right solutions to future app development challenges when you visit the official Angular documentation website (https://angular.io) or other sites (such as Stack Overflow) to search for solutions.

Another important but sometimes painful topic is that of project setup. It is a necessary evil that needs to be done at the beginning of a project, but getting this right early on can reduce a lot of friction as your application grows. Therefore, a large part of this chapter is dedicated to Angular CLI, a tool developed by the Angular team that provides scaffolding and automation tasks in an Angular app, demystifying the process and enabling you as a developer to save yourself from facing future frustrations and migraines. We will use the Angular CLI to create our first application from scratch, get a feel for the anatomy of an Angular application, and take a sneak peek at how Angular works under the hood.

Working with an Angular project without an Integrated Development Environment (IDE) can be painful. Our favorite code editor can provide us with an agile development workflow that includes TypeScript compilation at runtime, static type checking, and introspection, code completion, and visual assistance for debugging and building our app. We will highlight some popular code editors and take a bird's eye view of how each one of them can assist us when developing Angular applications.

To sum up, here are the main topics that we will explore in this chapter:

  • Semantic versioning, why it matters, and Angular's take on it
  • How to set up an Angular project using Angular CLI 10
  • How to use Angular CLI commands to accomplish certain tasks, such as building and serving an Angular app
  • How to create our first application and begin to understand the core concepts in Angular
  • The available tooling for Angular in popular IDEs
Previous Section
End of Section 1
Next Section