Structural Directives

With structural directives you can change the flow in your HTML. For example, how do you generate HTML dynamically based upon your data without having to write HTML in your JavaScript?

Lessons

• What are Structural Directives?
• Built-in Structural Directives
• Templates
• Custom Structural Directives

After completing this module, students will be able to:

• Understand the role of structural directives.
• Use built-in structural directives.
• Create your own structural directives.

Dependency Injection and Providers

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.

Lessons

• Terminology
• Dependency Injection Basics
• Services
• Providers
• Factories
• Injection Tokens

Lab : Creating a Task Service

• Implementing the Service
• Providing the service
• Updating the AppComponent
• Replacing the mock service with a real service

After completing this module, students will be able to:

• Create their own services.
• Work with the various providers in Angular.
• Inject services into components and other services.

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.

Lessons

• Using a Pipe
• Built-in Pipes
• Custom Pipes
• Pure versus Impure

Lab : Temperature Pipe

• Create a pipe for displaying temperatures in Kelvin, Celsius and Farenheit
• Use your newly created pipe

After completing this module, students will be able to:

• Use built-in pipes.
• Create their own pipes.
• Understand the importance of pure pipes.

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.

Lessons

• What’s in a Form
• Responding to Changes
• FormBuilder
• Data Validation

Lab : Task Editor Form

• The TaskEditor component
• Basic Validation
• Multiple validators
• Custom validators

After completing this module, students will be able to:

• Choose between template-driven and model-driven forms.
• Create a form and submit the information.
• Add validation and visual feeback.

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’s Observables to get the job done.

Lessons

• Sending and Receiving Data
• HTTPClient Module
• HTTP Interceptors
• Observables versus Promises

Lab : Working with Observables

• Update Components wot work with observables

Lab : Talking to the Server

• Providing the HttpClient Module
• Implementing the HTTP service

After completing this module, students will be able to:

• Work with HttpClient to make rest calls.
• Process the result with observables.

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.

Lessons

• What is a SPA
• Router Module
• Route Configuration
• Parent-Child Navigation
• Route Guards

Lab : 7Building a SPA: Rabbit Rescue

• Replace static HTML with components and templates
• Set up routing per feature area
• Linking the feature area with with root area

After completing this module, students will be able to:

• Create a single page application.
• Create feature areas.
• Set up routing per feature.
• Intercept navigation with guards.