Angular Boot Camp

10AM – 4PM US/Central  | 4 days | $1,090

Register

Class starts with the basic Angular features then quickly increase in depth. We adjust the agenda to make the most of the time available to meet student needs.

Class outline

1. 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