Building web apps with Angular and TypeScript

Introduction to Angular

This module gives you an introduction to modern web development. You will learn where Angular positions itself in this story and why it is a great choice for building the websites of the future using TypeScript.

• Evolution in Web App Development
• Introduction to Component-Based architecture
• What is Angular and why use it

Strongly Typed JavaScript with TypeScript

Let's face it: JavaScript was never designed for big applications. Many constructs to tame complex code like interfaces and strong typing are completely absent. TypeScript brings these features to the developer; allowing you to write modern, application-scale JavaScript.

• Writing Application-Scale JavaScript
• Type-Safe JavaScript Development with TypeScript
• Typescript configuration
• Implementing Types, Classes and Inheritance
• Namespaces and Modules
• LAB - Building a Web Shop with TypeScript

Core Concepts

In this module you'll get acquainted with the most important building blocks for any Angular application. This builds the foundation for all following chapters.

• Angular CLI and Versions
• Inspecting an Angular App
• Components
• Services
• Routing
• Modules
• LAB - Creating an Angular Application

Data Binding

Data binding allows you to forget about the HTML while writing TypeScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.

• The Importance of Binding
• Component to View
• Control Flow
• Value Conversion
• View to Component
• Two Way Binding
• Local Template Variables
• LAB - Data Binding

Components

In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to communicate between them. You'll also take a look at some component libraries like Angular Material and how they can make you more productive.

• Using Multiple Components
• Input and Output
• ViewChild and ContentChild
• Directive Life Cycle
• Inheriting a Component
• Component Libraries
• LAB - Building components

Directives

A component always has a view. But what if you just want to add custom behavior to an existing element? In this module you'll explore some existing directives, and learn how to build your own.

• What are Directives
• Built-in Directives
• Building a Custom Attribute Directives

Services

Services are the workhorses of your application. They contain the logic that isn't directly related to the UI, a.k.a. the business logic. This module will teach you how to build and use services in an Angular application. One big use case of services are state management. This module will also introduce the concept of state management and the need for reactivity.

• What are Services and why use them
• How to Configure a Service
• Introduction to State Management
• Introduction to Reactivity with Signals and Observables
• LAB - Building Services

Dependency Injection and Providers

To make use of services, you actually utilize the concept of Dependency Injection in Angular. Dependency Injection (DI) is the art of taking two strongly coupled objects and tearing them apart. This helps you write understandable, maintainable and testable code. It's not really a choice in Angular either: you have to do it. Angular has an entire mechanism based on Providers to support DI which you will explore in this module.

• Terminology
• Dependency Injection Basics
• Services
• Providers
• Factories
• Injection Tokens
• LAB - using Dependency Injection

Pipes

Pipes are a convenient way to make little changes to values in a view. This includes formatting and filtering of data. It's easy to use and to extend the possibilities of pipes.

• Using a Pipe
• Built-in Pipes
• Custom Pipes
• Pure versus Impure
• LAB - Build your own Conversion Pipe

Working with Forms

Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You need validation, automatic formatting, respond to data changes a so on. Angular provides two different approaches to dealing with this: Template-driven forms and Model-driven forms. This module will explore both.

• What's in a Form
• Responding to Changes
• FormBuilder
• Data Validation
• Working with Dynamic Forms
• LAB - Capturing and Validating Input with Forms

Talking to the Server

This module will teach you how to retrieve and send data to your backend. We will focus on REST and use RxJS Observables to get the job done.

• Sending and Receiving Data
• HttpClient
• Intercepting Http Requests
• Observables versus Promises
• LAB - Communication with REST Web Services

Building a Single Page Application

Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages, but are usually difficult to implement. This module will teach about the constructs available in Angular to build a SPA.

• What is a SPA
• Router Module
• Route Configuration
• Parent-Child Navigation
• Router Guards
• LAB - RECAP - Setting up a Complete Single Page Application with Routing

Managing an Angular App

• Structuring your Application
• Testing your Application
• Deploying you Application
• Updating the Angular version using the Angular CLI