Loading Events
  • Paid training

Angular Boot Camp

Angular Boot Camp is a live class for teams building complex applications, covering introductory topics through advanced solutions

  • Apr.15.2024
10AM – 4PM US/Central  | 4 days | $1,090


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

Registration closed

Registration for this course is now closed. Please visit our training resources to see what other courses are available.

Related resources

View all resources
Atlassian Intelligence

Empower your teams with Atlassian Intelligence: your AI-powered advantage

At Valiantys, we understand that the heart of every successful team is the power of collaboration and the continuous drive for efficiency. In our quest to empower your teams to reach their full potential, we are thrilled to introduce Atlassian Intelligence—your new virtual teammate designed to redefine the boundaries of teamwork and productivity.

Valiantys & Glintech

Valiantys expands global presence with acquisition of GLiNTECH, focusing on Asia-Pacific growth

Valiantys proudly announces the acquisition of GLiNTECH, an Atlassian Platinum Partner in Australia.

employer of the future

Unlocking Excellence: Valiantys GmbH’s Journey as an Employer of the Future

The German Innovation Institute for Sustainability and Digitalization proudly announces that Valiantys GmbH, the German subsidiary of Valiantys, has been honored with the prestigious “Employer of the Future” award following a comprehensive multi-stage analysis process.