COURSE OUTLINE 

(THIS IS A 3 DAYS TRAINING PROGrAMME)

DAY 1

TypeScript essentials

• Getting started with TypeScript

• Functions

• Classes

• Inheritance and interfaces

Getting started with Angular

• Creating an Angular application

• Overview of Angular CLI

• Getting Angular CLI

• Angular CLI capabilities

• Creating an application

• Reviewing the application

• Serving the application

• Viewing the application

• Aside: Updating an existing app

Understanding the application

• Overview

• Key configuration files

• Application home page

• Main source file

• Module source file

• Component source files

• Additional techniques

• Additional info

Single-page applications

• Overview of SPAs

• What is an SPA?

• Angular and SPAs

• Demo application

• Creating an app with routing

• Creating components

• Creating artifacts using Angular CLI

• How to create a component

• Reviewing the component

• Summarising our app's components

• Reviewing the module code

• Aside: Defining global styles

• Angular routing

• Angular routing dependencies

• Defining a routing table

• Defining a base href

• Defining a router outlet

• Defining router links

• Running the application

DAY 2

Data binding

• Overview

• Data binding in detail


• Data binding syntax example

• TypeScript code

• Recap of {{ }} data binding

• Binding to computed values

• Binding target properties

• Binding events

• Safe navigation

• Additional data binding techniques

• Two-way binding

• 1-way data binding

• 2-way data binding

• Delaying data binding until "done"

• 2-way data binding example

• Supporting 2-way data binding

• Additional techniques

• Decisions and iteration

• If tests

• If-then-else tests

• For loops

• Switches

View techniques

• Pipes

• Overview

• Simple pipes

• Simple pipes locales

• Additional pipes

• Additional pipes

• Asynchronous data

• Overview

• Promises

• Observables

• How to display asynchronous data

• Asynchronous data example

• Custom pipes

• Overview

• Generating a custom pipe

• Implementing a custom pipe

• Bundling a custom pipe

• Using a custom pipe

• Running the demo application

• Forms

• Strategies for implementing forms

• Adding support for forms

• Examples

Component interactions

• Component hierarchies

• Overview

• Component hierarchy example

• Component code organization

• Low-level components

• High-level component

• Bundling components

• Component inputs

• Overview

• Component inputs example

• Specifying an input property

• Setting an input property

• Component outputs

• Overview

• Component outputs example

• Defining an event interface

• Emitting events

• Aside: Lifecycle hooks

• Handling events

Dependency injection

• Introduction to services and DI

• Dependency injection

• Services and DI example

• Generating a service

• Implementing the service

• Injecting the service

• Singleton service instance

• A hierarchy of injectors

• The story so far…

• Providing services explicitly

• Hierarchical injectors

• Hierarchical injectors example

• Defining the service

• Injecting the service

• Viewing the console output

• Injection into services

• Example

• Defining the services

• Providing the services

• Viewing the console output

• Provider techniques

• Full provider syntax

• Three ways to provide a service

• Example scenario

• Providing a class

• Providing a value

• Providing a factory 

• Viewing the application

DAY 3

A closer look at routing

• Recap Angular routing

• Defining a routing table

• Defining a base href

• Defining a router outlet

• Defining router links

• Route parameters and data

• Overview

• Example

• Specifying route params and data

• Passing-in route params

• Getting route params and data

• Master-detail router outlets

• Creating modular apps

• The need for modularity

• Generating a new module

• Tying modules together

• Adding a component to a module

• Defining routing for the component

• Viewing the application

Angular REST service clients

• Overview of REST

• The name "REST"

• What is a REST service?

• HTTP verbs

• HTTP response codes

• Calling REST services

• Overview

• REST service example

• Pinging the REST service

• Example Angular REST client

• Adding support for REST clients

• Calling a REST service

• Consuming the REST result

• Displaying the REST result

Consuming WebSockets

• Overview of WebSockets

• Traditional HTTP communication

• Polling

• Long polling

• Limitations of HTTP

• Defining a simple client

• The WebSocket interface

• Checking for WebSockets support

• Opening a connection

• Handling WebSockets events

• Sending data to the server

• Receiving data from the server

• Closing a connection

• Example Angular client

• Defining a better client

• Overview

• Wrapping data in an Observable

• Consuming the Observable

• Running the Angular client

Building Angular Applications

• Recap of serving Angular apps

• Building an Angular app

• Reviewing the built app

• Production vs. non-production builds

• Environment settings

• AOT vs. JIT compilation