Angular Boot Camp in-class examples

Welcome to the Angular Boot Camp Curriculum. This repository contains over half of the example code we use in teaching Angular Boot Camp, available here to use in class, or for the web at large to refer to as (hopefully) high quality examples of specific Angular topics.

Initially these examples contain very little explanation; we provide the explanation during Angular Boot Camp. In the future we hope to add more explanation text, but this material is fundamentally about supporting our class effort.

Topic list

Here are all the topics, in roughly the order we’ll use in class:

Step 101, data-binding (on StackBlitz)

Step 102, template-events (on StackBlitz)

Step 103, multiple-components (on StackBlitz)

Step 104, modules (on StackBlitz)

Step 105, routing-and-lazy-loading (on StackBlitz)

Step 201, component-hierarchy (on StackBlitz)

Step 202, template-conditionals-and-loops (on StackBlitz)

Step 203, built-in-pipes (on StackBlitz)

Step 204, class-and-style-bindings (on StackBlitz)

Step 205, component-inputs (on StackBlitz)

Step 206, component-events (on StackBlitz)

Step 300, dependency-injection-and-http (on StackBlitz)

Step 301, injecting-custom-services (on StackBlitz)

Step 302, observables (on StackBlitz)

Step 303, async-pipe (on StackBlitz)

Step 400, component-state (on StackBlitz)

Step 401, reactive-forms (on StackBlitz)

Step 402, smart-view-component-pattern (on StackBlitz)

Step 403, observable-composing-and-chaining (on StackBlitz)

Step 404, filtered-list-via-observable (on StackBlitz)

Step 500, nested-routing (on StackBlitz)

Step 501, route-parameters (on StackBlitz)

Step 502, query-parameters (on StackBlitz)

Step 503, route-driven-data-loading (on StackBlitz)

Step 504, route-guards (on StackBlitz)

Step 505, resolve-route-guard (on StackBlitz)

Step 600, state-with-services (on StackBlitz)

Step 601, ngrx-store (on StackBlitz)

Step 602, ngrx-store-immutability (on StackBlitz)

Step 603, ngrx-effects (on StackBlitz)

Step 700, ng-container (on StackBlitz)

Step 701, custom-validators (on StackBlitz)

Step 702, custom-async-validators (on StackBlitz)

Step 703, auxiliary-routes (on StackBlitz)

Step 704, reusing-observable-data (on StackBlitz)

Step 705, reactive-control (on StackBlitz)

Step 706, observable-error-handling (on StackBlitz)

Step 707, component-lifecycle (on StackBlitz)

Step 708, change-detection-strategies (on StackBlitz)

Step 709, directives (on StackBlitz)

Step 710, content-projection (on StackBlitz)

Step 711, multi-slot-projection (on StackBlitz)

Step 712, ng-switch (on StackBlitz)

Step 713, sanitization (on StackBlitz)

Step 714, component-inheritance (on StackBlitz)

Step 715, multiproviders (on StackBlitz)

Step 716, custom-pipes (on StackBlitz)

Step 717, unit-tests (on StackBlitz)

Step 718, unit-testing-mocks (on StackBlitz)

Step 719, unit-testing-testbed (on StackBlitz)

Step 720, unit-tests-http-mock (on StackBlitz)

Step 721, async-unit-tests (on StackBlitz)

Step 722, component-template-testing (on StackBlitz)

Step 723, component-css (on StackBlitz)

Step 724, template-if-else (on StackBlitz)

Step 801, example-load-http-with-retry (on StackBlitz)

Step 802, example-nested-api-via-observables (on StackBlitz)

Step 803, example-dynamic-reactive-form (on StackBlitz)

Step 804, example-content-projection-use-case (on StackBlitz)

Step 805, example-binding-to-svg (on StackBlitz)

Step 806, example-non-singleton-service (on StackBlitz)

Step 807, example-observable-behavior (on StackBlitz)

Step 808, library-firebase-weather (on StackBlitz)

Step 809, library-firebase-data-flow (on StackBlitz)

Step 810, legacy-promises (on StackBlitz)

Step 811, legacy-api-via-http-promises (on StackBlitz)

Step 812, legacy-ng-model-two-way-binding (on StackBlitz)

Step 813, legacy-more-ng-model (on StackBlitz)

Step 814, legacy-template-forms (on StackBlitz)

Step 815, legacy-observable-composing-and-chaining (on StackBlitz)

Step 816, legacy-ngrx-effects (on StackBlitz)

(There are additional examples and materials available for advanced topics in class, which don’t fit well into the format presented here; your instructor will direct you to the relevant materials as those topics come up in class.)

FAQs and resources

Frequently asked questions and answers are on our FAQ page

Numerous links and other resources are available in the resource directory.

Who?

This is maintained by the team at Oasis Digital to use in teaching Angular Boot Camp

We offer:

• Public Angular training, both in-person and online
• Private Angular training for your organization, both in-person and online
• Consulting and software development / assistance

Copyright 2018 Oasis Digital Solutions Inc.