Complete Angular Training for Enterprise Development

Introduction

• Angular Boot Camp
  • Class objectives and roadmap
  • Oasis Digital background
  • Student experience and expectations
• Preparation
  • Prerequisites review
  • What is Angular?
  • 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
• Routing & 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 control flow
  • Branching with `@if`
  • Iteration with `@for`
• 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
• 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

Time and interest permitting

• 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
• Introduction to third party NgRx state management package
  • NgRx Store
  • NgRx Effects

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