Building Large-Scale Web Applications with Angular

coverpage

Title Page

Contributors

About the authors

About the reviewer

Packt is searching for authors like you

About Packt

Why subscribe?

PacktPub.com

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

Building Our First App - 7 Minute Workout

What is 7 Minute Workout?

Downloading the code base

Setting up the build

Angular CLI

Code transpiling

Organizing code

Feature folders

The 7 Minute Workout model

First feature module

App bootstrapping

Exploring Angular modules

Comprehending Angular modules

Our first component - WorkoutRunnerComponent

Component lifecycle hooks

Building the 7 Minute Workout view

The Angular binding infrastructure

Interpolations

Property binding

Property versus attribute

Property binding continued...

Interpolation syntactic sugar over property binding

Quick expression evaluation

Side effect-free binding expressions

Angular directives

Target selection for binding

Attribute binding

Style and class binding

Attribute directives

Styling HTML with ngClass and ngStyle

Learning more about an exercise

Adding descriptions and video panels

Component with inputs

Structural directives

The ever-so-useful NgForOf

Asterisk (*) in structural directives

NgForOf performance

Angular security

Trusting safe content

OnChange life cycle event

Formatting exercise steps with innerHTML binding

Displaying the remaining workout duration using pipes

Angular pipes

Pipe chaining

Implementing a custom pipe - SecondsToTimePipe

Adding the next exercise indicator using ngIf

Pausing an exercise

The Angular event binding infrastructure

Event bubbling

Event binding an $event object

Two-way binding with ngModel

Cross-component communication using Angular events

Tracking exercise progress with audio

Building Angular directives to wrap HTML audio

Creating WorkoutAudioComponent for audio support

Understanding template reference variables

Template variable assignment

Using the @ViewChild decorator

The @ViewChildren decorator

Integrating WorkoutAudioComponent

Exposing WorkoutRunnerComponent events

The @Output decorator

Eventing with EventEmitter

Raising events from WorkoutRunnerComponent

Component communication patterns

Injecting a parent component into a child component

Using component life cycle events

Sibling component interaction using events and template variables

Summary

Personal Trainer

Personal Trainer requirements

Getting started with the code for Personal Trainer

Using the Personal Trainer model in Workout Builder services

The Personal Trainer layout

Personal Trainer navigation with routes

Getting started with Personal Trainer navigation

Introducing child routes to Workout Builder

Adding the child routing component

Updating the WorkoutBuilder component

Updating the Workout Builder module

Updating App Routing module

Putting it all together

Lazy loading of routes