Angular 2/4+ Topic Outline

Our approximate class outline is shown here. We vary the agenda and order, and reallocate the time among the topics, to meet student needs.

Versions Covered

Our Angular 2/4+ class is updated frequently, and primarily covers the current version of Angular. There are only minor differences in application code between Angular 2 and Angular 4.

Introduction

  • Angular Boot Camp
    • Oasis Digital background
    • Class objectives and roadmap
    • Student experience and expectations
  • Preparation
    • Prerequisites review
    • What is Angular?
    • Why AngularJS became Angular
    • Single page apps vs server-side web applications
    • Why Angular?
    • Where Angular fits
    • Our focus, Angular for complex, rich, enterprise application development

Starting with Angular

  • JavaScript, TypeScript, Angular
    • ES5
    • ES2016
    • ESnext
    • TypeScript
  • Simplest Angular application
    • What about CSS?
    • Development tooling for class use
  • The TypeScript module system
    • Dividing a program into modules / files
  • Templates and bindings
    • Template binding expressions
    • Null coalescing / safe traversal
    • Events and event bindings
  • Components nesting and isolation
    • In-browser inspector tooling
  • Routing introduction
    • Generations of Angular routing
    • Routing to components
    • Configuring the router
    • HTML5 vs hash routes

Building with Components

  • Development tooling
    • SystemJS, optionally with JSPM
    • WebPack
    • Angular CLI
    • Build tooling at the start versus tooling in a mature enterprise project
  • Starting a project with Angular CLI
  • Component hierarchy and wireframing
  • Essential built-in directives
    • Branching with ngIf
    • Iteration with ngFor
  • Angular pipe introduction
    • Using the built-in pipes
  • Class and style bindings
    • [class.x] bindings
    • [style.y] bindings
    • [ngClass] for more complex class selection
  • Component styling
    • Scoped CSS
    • ViewEncapsulation
    • Targeting the component itself
  • Component data dinding
    • Bind data “downward” with @Input()
    • Use events to send data upward with @Output()

Services, reactivity, and HTTP

  • Dependency injection
    • Injection introduction
    • Why dependency injection?
    • What can be injected?
    • Explaining DI
  • Creating services
    • Injecting services into services
  • Unit testing
    • Unit testing at the command line (already discussed)
    • Unit testing in the browser
  • Reactive forms
    • Standalone reactive controls
  • Observable form values – an introduction to Observables
  • The async pipe
    • Asynchronous data – almost automatic
    • Capturing the async pipe data?
  • Loading data via HTTP
    • Show async data via the async pipe
    • Inject HTTP in to a service, not in to a component
    • Setting request headers
    • CORS discussion
  • More unit testing
    • Unit testing services
    • Asyncronous testing
    • Mocking HTTP responses

Modules and routing

  • Multiple NgModules
    • Inter-module dependencies
    • entryComponents
  • Route parameters
    • Route-driven observable data loading
    • Route guards – protecting routes
    • Resolve – loading data during routing
  • The smart/display component pattern
    • Motivations
    • Implementation
  • ng-container
    • Sentence example
    • “Glossary of Useful Terms” example
    • “Important Programming Languages” example
    • Resources
  • Custom pipes

Data flow and state management

  • Observable Composing and Chaining
    • Interactive search with observability
    • Filtered list via Observables
  • Sharing data via binding
    • Bindings to adjacent component data
    • Bindings to data in a service
  • Centralized state management with hierarchical DI
    • State in observable in a service
  • NgRx/store – Elm/Redux Architecture
    • An industry-wide idea
    • History
    • Angular implementation

Other Angular features – extra material for Q&A

  • More with reactive forms
    • Control groups
    • FormBuilder
    • ngSubmit
  • Complex forms
    • Custom validators
    • Custom async validators
  • Nested routing
  • Lazy loading
    • Routes as the unit of lazy loading
    • Why?
    • How?
    • Preloading: eager lazy routes
  • Complex routing
    • Auxiliary routes
  • Route Guards
    • CanActivate
    • CanDeactivate
  • Other route guards
  • Observable bindings
    • Observables in more depth
    • Observable error handling
  • The component lifecycle
  • Change detection strategies – and why it matters
    • How change detection works
    • Change detection modes
    • Zone.JS
  • Decorator directives
    • Introduction
    • Examples
  • NgContent (was transclusion)
    • Multiple Ng-Content
  • ngSwitch
  • Sanitization – secure handling of user-provided data
  • Component Inheritance
    • Reusing code with a different template
  • Multi-providers

Upgrading, third-party code, examples, and legacy features – extra material for Q&A

  • Using Angular in ES5
  • Upgrading from AngularJS 1.x
    • ngUpgrade
    • ngForward
    • Where did 1.x features go?
    • Loading data with retry
  • Deeper with Observables
    • Wrap an API in Observables
  • Dynamic Reactive Forms
    • Transclusion use case example
  • ES2015 code
    • History of JS
  • TypeScript examples
    • TypeScript decorators
  • Promises – still available, still useful
  • HTTP API access via promises
  • Two-way binding with ngModel
    • ngModel with more control types
  • Template forms

This curriculum covers the basics well, and positions students to use Angular very effectively. We update and vary the topics, or reallocate the time among the topics, to meet student needs.

The contents from Other Angular features onward are used to answer questions that arise in class.