Angular Topic Outline

Our approximate class outline is shown here. This class covers a wide variety of Angular features; we start with the basics, and quickly increase in depth. We vary the agenda and order, and reallocate the time among the topics, to meet student needs.

Versions Covered

Our Angular class is updated frequently, and primarily covers the current version of Angular. We also have an AngularJS (v 1.x) curriculum for teams supporting older applications.

Most of the common Angular programming constructs are similar or the same between Angular versions 2 through 10. Therefore, much of the initial learning is the same regardless of the specific version project targets.

Introduction

  • Angular Boot Camp
    • Class objectives and roadmap
    • Oasis Digital background
    • Student experience and expectations
  • Preparation
    • Prerequisites review
    • What is Angular?
    • Brief comparison to AngularJS 1.x
    • Single page apps vs server-side web applications
    • Why Angular?
    • Where Angular fits

Starting with Angular

  • JavaScript, TypeScript, Angular
    • ES5
    • ES2015
    • ES.next
    • TypeScript
  • Simplest Angular application
    • Appearance of the in-class examples - 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
  • Multiple Components
    • Using inspector tooling to understand the component hierarchy
  • Multiple NgModules
    • Inter-module dependencies
    • Imports and Exports
    • entryComponents
  • Lazy loading
    • Routes as the unit of lazy loading
    • Preloading: eager lazy routes

Building with Components

  • Development tooling
    • Angular CLI - the powerful default choice
    • Webpack - for custom builds
    • SystemJS - for browser-only development
  • Starting a project with Angular CLI
    • Creating your component hierarchy
    • Visual wireframing
  • Essential built-in directives
    • Branching with `*ngIf`
    • Iteration with `*ngFor`
  • Pipes
    • Using the built-in pipes
    • When are pipes the right solution?
  • Class and style bindings
    • [class.x] bindings
    • [style.y] bindings
    • [ngClass] for more complex class selection
  • Component data binding
    • Bind data "downward" with @Input()
    • Use events to send data upward with @Output()

Services, reactivity, and HTTP

  • Dependency injection
    • Introducing injection with HTTP
    • Why dependency injection?
    • What can be injected?
  • Creating services
    • Making a service available for dependency injection
    • Inject HTTP into a service instead of a component
  • Observables
    • The least you need to know about Observables
    • Observables as the pipeline of data flow in Angular.
  • The async pipe
    • Observables as a source of tedium and boilerplate
    • Automatic subscription and unsubscription

Application state, forms, navigation, and data flow

  • Reactive forms
    • Control groups
    • FormBuilder
    • ngSubmit
  • Component-local State
    • Suitable uses for component-local state
    • Where component-local state becomes problematic
  • Route as navigational state
    • Nested routes
    • Routing to components
    • Configuring the router
    • HTML5 vs hash routes
    • Route parameters - navigational state to a specific entity
    • Route-driven observable data loading
  • Sharing state with a Service
    • Data fields in a Service
    • Observable data in a Service
  • NgRx Store - Elm/Redux Architecture
    • An industry-wide idea
    • History
    • Angular implementation
    • Immutable data with NgRx Store
    • Managing complexity and boilerplate
  • NgRx Effects
  • The smart/display component pattern
    • Motivations
    • Implementation
  • Observable composing and chaining
    • Interactive search with observability
  • Which Map Operator?
    • Loading data to the same display area
    • Saving data, when the save order doesn't matter
    • Saving data, when the save order DOES matter
    • Filtered list via Observables

Less-used Angular features (topics depend on time)

  • ng-container
    • Sentence example
    • "Glossary of Useful Terms" example
    • "Important Programming Languages" example
    • Resources
  • Complex forms
    • Custom validators
    • Custom async validators
  • Complex routing
    • Auxiliary routes
  • Route Guards
    • CanActivate
    • CanDeactivate
  • Other route guards
    • Route guards - protecting routes
    • Resolve - loading data during routing
    • Reusing Observable data
  • Reactive forms
    • Standalone reactive controls
    • 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
  • Custom pipes
  • Unit testing
    • Unit testing at the command line (already discussed)
    • Unit testing in the browser
  • More unit testing
    • Unit testing services
    • Asyncronous testing
    • Mocking HTTP responses
  • Component styling
    • Scoped CSS
    • ViewEncapsulation
    • Targeting the component itself

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

  • Upgrading from AngularJS 1.x
    • ngUpgrade
    • ngForward
    • Where did 1.x features go?
    • Additional Resources
    • Loading data with retry
  • Wrapping an API with observables
  • Dynamic Reactive Forms
    • Transclusion use case example
  • Centralized state management with hierarchical DI
    • State in observable in a service
  • Observable bindings
    • Observables in more depth
  • Promises - still available, still useful
  • HTTP API access via promises
  • Two-way binding with ngModel
    • ngModel with more control types
  • Template-driven forms
  • Observables with the older, pre-pipe() syntax
    • Advantages of Pipeable Operators
    • Advantages of Legacy Syntax
    • Conclusion

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.