Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. A good of Angular in use is the gmail compose window.

WHO SHOULD ATTEND

Web-development staff

Software development teams

Anyone interested to make their own SPA

METHODOLOGY

This course is based around working examples to demonstrate common Angular techniques and APIs. There are practical exercises for most sections. The exercises give you an opportunity to put into practice what you've learnt in each chapter

Full solutions are provided for every exercise. You can take away all the code when we're done.

This course will consist of:

1. Training 

2. Workshops

3. Use cases & projects

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