diff --git a/aio/content/examples/toh-1/app/app.component.1.ts b/aio/content/examples/toh-pt1/app/app.component.1.ts similarity index 100% rename from aio/content/examples/toh-1/app/app.component.1.ts rename to aio/content/examples/toh-pt1/app/app.component.1.ts diff --git a/aio/content/examples/toh-1/dart-snippets/app_component_snippets_pt1.dart b/aio/content/examples/toh-pt1/dart-snippets/app_component_snippets_pt1.dart similarity index 100% rename from aio/content/examples/toh-1/dart-snippets/app_component_snippets_pt1.dart rename to aio/content/examples/toh-pt1/dart-snippets/app_component_snippets_pt1.dart diff --git a/aio/content/examples/toh-1/e2e-spec.ts b/aio/content/examples/toh-pt1/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-1/e2e-spec.ts rename to aio/content/examples/toh-pt1/e2e-spec.ts diff --git a/aio/content/examples/toh-1/example-config.json b/aio/content/examples/toh-pt1/example-config.json similarity index 100% rename from aio/content/examples/toh-1/example-config.json rename to aio/content/examples/toh-pt1/example-config.json diff --git a/aio/content/examples/toh-1/plnkr.json b/aio/content/examples/toh-pt1/plnkr.json similarity index 100% rename from aio/content/examples/toh-1/plnkr.json rename to aio/content/examples/toh-pt1/plnkr.json diff --git a/aio/content/examples/toh-1/src/app/app.component.ts b/aio/content/examples/toh-pt1/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-1/src/app/app.component.ts rename to aio/content/examples/toh-pt1/src/app/app.component.ts diff --git a/aio/content/examples/toh-1/src/app/app.module.ts b/aio/content/examples/toh-pt1/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-1/src/app/app.module.ts rename to aio/content/examples/toh-pt1/src/app/app.module.ts diff --git a/aio/content/examples/toh-1/src/index.html b/aio/content/examples/toh-pt1/src/index.html similarity index 100% rename from aio/content/examples/toh-1/src/index.html rename to aio/content/examples/toh-pt1/src/index.html diff --git a/aio/content/examples/toh-1/src/main.ts b/aio/content/examples/toh-pt1/src/main.ts similarity index 100% rename from aio/content/examples/toh-1/src/main.ts rename to aio/content/examples/toh-pt1/src/main.ts diff --git a/aio/content/examples/toh-2/dart-snippets/app_component_snippets_pt2.dart b/aio/content/examples/toh-pt2/dart-snippets/app_component_snippets_pt2.dart similarity index 100% rename from aio/content/examples/toh-2/dart-snippets/app_component_snippets_pt2.dart rename to aio/content/examples/toh-pt2/dart-snippets/app_component_snippets_pt2.dart diff --git a/aio/content/examples/toh-2/e2e-spec.ts b/aio/content/examples/toh-pt2/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-2/e2e-spec.ts rename to aio/content/examples/toh-pt2/e2e-spec.ts diff --git a/aio/content/examples/toh-2/example-config.json b/aio/content/examples/toh-pt2/example-config.json similarity index 100% rename from aio/content/examples/toh-2/example-config.json rename to aio/content/examples/toh-pt2/example-config.json diff --git a/aio/content/examples/toh-2/plnkr.json b/aio/content/examples/toh-pt2/plnkr.json similarity index 100% rename from aio/content/examples/toh-2/plnkr.json rename to aio/content/examples/toh-pt2/plnkr.json diff --git a/aio/content/examples/toh-2/src/app/app.component.1.html b/aio/content/examples/toh-pt2/src/app/app.component.1.html similarity index 100% rename from aio/content/examples/toh-2/src/app/app.component.1.html rename to aio/content/examples/toh-pt2/src/app/app.component.1.html diff --git a/aio/content/examples/toh-2/src/app/app.component.ts b/aio/content/examples/toh-pt2/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-2/src/app/app.component.ts rename to aio/content/examples/toh-pt2/src/app/app.component.ts diff --git a/aio/content/examples/toh-2/src/app/app.module.ts b/aio/content/examples/toh-pt2/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-2/src/app/app.module.ts rename to aio/content/examples/toh-pt2/src/app/app.module.ts diff --git a/aio/content/examples/toh-2/src/index.html b/aio/content/examples/toh-pt2/src/index.html similarity index 100% rename from aio/content/examples/toh-2/src/index.html rename to aio/content/examples/toh-pt2/src/index.html diff --git a/aio/content/examples/toh-2/src/main.ts b/aio/content/examples/toh-pt2/src/main.ts similarity index 100% rename from aio/content/examples/toh-2/src/main.ts rename to aio/content/examples/toh-pt2/src/main.ts diff --git a/aio/content/examples/toh-3/app/app.component.1.html b/aio/content/examples/toh-pt3/app/app.component.1.html similarity index 100% rename from aio/content/examples/toh-3/app/app.component.1.html rename to aio/content/examples/toh-pt3/app/app.component.1.html diff --git a/aio/content/examples/toh-3/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt3/app/hero-detail.component.1.ts similarity index 100% rename from aio/content/examples/toh-3/app/hero-detail.component.1.ts rename to aio/content/examples/toh-pt3/app/hero-detail.component.1.ts diff --git a/aio/content/examples/toh-3/e2e-spec.ts b/aio/content/examples/toh-pt3/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-3/e2e-spec.ts rename to aio/content/examples/toh-pt3/e2e-spec.ts diff --git a/aio/content/examples/toh-3/example-config.json b/aio/content/examples/toh-pt3/example-config.json similarity index 100% rename from aio/content/examples/toh-3/example-config.json rename to aio/content/examples/toh-pt3/example-config.json diff --git a/aio/content/examples/toh-3/plnkr.json b/aio/content/examples/toh-pt3/plnkr.json similarity index 100% rename from aio/content/examples/toh-3/plnkr.json rename to aio/content/examples/toh-pt3/plnkr.json diff --git a/aio/content/examples/toh-3/src/app/app.component.ts b/aio/content/examples/toh-pt3/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-3/src/app/app.component.ts rename to aio/content/examples/toh-pt3/src/app/app.component.ts diff --git a/aio/content/examples/toh-3/src/app/app.module.ts b/aio/content/examples/toh-pt3/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-3/src/app/app.module.ts rename to aio/content/examples/toh-pt3/src/app/app.module.ts diff --git a/aio/content/examples/toh-3/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt3/src/app/hero-detail.component.ts similarity index 100% rename from aio/content/examples/toh-3/src/app/hero-detail.component.ts rename to aio/content/examples/toh-pt3/src/app/hero-detail.component.ts diff --git a/aio/content/examples/toh-3/src/app/hero.ts b/aio/content/examples/toh-pt3/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-3/src/app/hero.ts rename to aio/content/examples/toh-pt3/src/app/hero.ts diff --git a/aio/content/examples/toh-3/src/index.html b/aio/content/examples/toh-pt3/src/index.html similarity index 100% rename from aio/content/examples/toh-3/src/index.html rename to aio/content/examples/toh-pt3/src/index.html diff --git a/aio/content/examples/toh-3/src/main.ts b/aio/content/examples/toh-pt3/src/main.ts similarity index 100% rename from aio/content/examples/toh-3/src/main.ts rename to aio/content/examples/toh-pt3/src/main.ts diff --git a/aio/content/examples/toh-4/e2e-spec.ts b/aio/content/examples/toh-pt4/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-4/e2e-spec.ts rename to aio/content/examples/toh-pt4/e2e-spec.ts diff --git a/aio/content/examples/toh-4/example-config.json b/aio/content/examples/toh-pt4/example-config.json similarity index 100% rename from aio/content/examples/toh-4/example-config.json rename to aio/content/examples/toh-pt4/example-config.json diff --git a/aio/content/examples/toh-4/plnkr.json b/aio/content/examples/toh-pt4/plnkr.json similarity index 100% rename from aio/content/examples/toh-4/plnkr.json rename to aio/content/examples/toh-pt4/plnkr.json diff --git a/aio/content/examples/toh-4/src/app/app.component.1.ts b/aio/content/examples/toh-pt4/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/app.component.1.ts rename to aio/content/examples/toh-pt4/src/app/app.component.1.ts diff --git a/aio/content/examples/toh-4/src/app/app.component.ts b/aio/content/examples/toh-pt4/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/app.component.ts rename to aio/content/examples/toh-pt4/src/app/app.component.ts diff --git a/aio/content/examples/toh-4/src/app/app.module.ts b/aio/content/examples/toh-pt4/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/app.module.ts rename to aio/content/examples/toh-pt4/src/app/app.module.ts diff --git a/aio/content/examples/toh-4/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail.component.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/hero-detail.component.ts rename to aio/content/examples/toh-pt4/src/app/hero-detail.component.ts diff --git a/aio/content/examples/toh-4/src/app/hero.service.1.ts b/aio/content/examples/toh-pt4/src/app/hero.service.1.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/hero.service.1.ts rename to aio/content/examples/toh-pt4/src/app/hero.service.1.ts diff --git a/aio/content/examples/toh-4/src/app/hero.service.2.ts b/aio/content/examples/toh-pt4/src/app/hero.service.2.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/hero.service.2.ts rename to aio/content/examples/toh-pt4/src/app/hero.service.2.ts diff --git a/aio/content/examples/toh-4/src/app/hero.service.ts b/aio/content/examples/toh-pt4/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/hero.service.ts rename to aio/content/examples/toh-pt4/src/app/hero.service.ts diff --git a/aio/content/examples/toh-4/src/app/hero.ts b/aio/content/examples/toh-pt4/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/hero.ts rename to aio/content/examples/toh-pt4/src/app/hero.ts diff --git a/aio/content/examples/toh-4/src/app/mock-heroes.ts b/aio/content/examples/toh-pt4/src/app/mock-heroes.ts similarity index 100% rename from aio/content/examples/toh-4/src/app/mock-heroes.ts rename to aio/content/examples/toh-pt4/src/app/mock-heroes.ts diff --git a/aio/content/examples/toh-4/src/index.html b/aio/content/examples/toh-pt4/src/index.html similarity index 100% rename from aio/content/examples/toh-4/src/index.html rename to aio/content/examples/toh-pt4/src/index.html diff --git a/aio/content/examples/toh-4/src/main.1.ts b/aio/content/examples/toh-pt4/src/main.1.ts similarity index 100% rename from aio/content/examples/toh-4/src/main.1.ts rename to aio/content/examples/toh-pt4/src/main.1.ts diff --git a/aio/content/examples/toh-4/src/main.ts b/aio/content/examples/toh-pt4/src/main.ts similarity index 100% rename from aio/content/examples/toh-4/src/main.ts rename to aio/content/examples/toh-pt4/src/main.ts diff --git a/aio/content/examples/toh-5/e2e-spec.ts b/aio/content/examples/toh-pt5/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-5/e2e-spec.ts rename to aio/content/examples/toh-pt5/e2e-spec.ts diff --git a/aio/content/examples/toh-5/example-config.json b/aio/content/examples/toh-pt5/example-config.json similarity index 100% rename from aio/content/examples/toh-5/example-config.json rename to aio/content/examples/toh-pt5/example-config.json diff --git a/aio/content/examples/toh-5/plnkr.json b/aio/content/examples/toh-pt5/plnkr.json similarity index 100% rename from aio/content/examples/toh-5/plnkr.json rename to aio/content/examples/toh-pt5/plnkr.json diff --git a/aio/content/examples/toh-5/src/app/app-routing.module.ts b/aio/content/examples/toh-pt5/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app-routing.module.ts rename to aio/content/examples/toh-pt5/src/app/app-routing.module.ts diff --git a/aio/content/examples/toh-5/src/app/app.component.1.ts b/aio/content/examples/toh-pt5/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.component.1.ts rename to aio/content/examples/toh-pt5/src/app/app.component.1.ts diff --git a/aio/content/examples/toh-5/src/app/app.component.css b/aio/content/examples/toh-pt5/src/app/app.component.css similarity index 100% rename from aio/content/examples/toh-5/src/app/app.component.css rename to aio/content/examples/toh-pt5/src/app/app.component.css diff --git a/aio/content/examples/toh-5/src/app/app.component.ts b/aio/content/examples/toh-pt5/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.component.ts rename to aio/content/examples/toh-pt5/src/app/app.component.ts diff --git a/aio/content/examples/toh-5/src/app/app.module.1.ts b/aio/content/examples/toh-pt5/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.module.1.ts rename to aio/content/examples/toh-pt5/src/app/app.module.1.ts diff --git a/aio/content/examples/toh-5/src/app/app.module.2.ts b/aio/content/examples/toh-pt5/src/app/app.module.2.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.module.2.ts rename to aio/content/examples/toh-pt5/src/app/app.module.2.ts diff --git a/aio/content/examples/toh-5/src/app/app.module.3.ts b/aio/content/examples/toh-pt5/src/app/app.module.3.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.module.3.ts rename to aio/content/examples/toh-pt5/src/app/app.module.3.ts diff --git a/aio/content/examples/toh-5/src/app/app.module.ts b/aio/content/examples/toh-pt5/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/app.module.ts rename to aio/content/examples/toh-pt5/src/app/app.module.ts diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.1.html b/aio/content/examples/toh-pt5/src/app/dashboard.component.1.html similarity index 100% rename from aio/content/examples/toh-5/src/app/dashboard.component.1.html rename to aio/content/examples/toh-pt5/src/app/dashboard.component.1.html diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.1.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/dashboard.component.1.ts rename to aio/content/examples/toh-pt5/src/app/dashboard.component.1.ts diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.css b/aio/content/examples/toh-pt5/src/app/dashboard.component.css similarity index 100% rename from aio/content/examples/toh-5/src/app/dashboard.component.css rename to aio/content/examples/toh-pt5/src/app/dashboard.component.css diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.html b/aio/content/examples/toh-pt5/src/app/dashboard.component.html similarity index 100% rename from aio/content/examples/toh-5/src/app/dashboard.component.html rename to aio/content/examples/toh-pt5/src/app/dashboard.component.html diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.ts b/aio/content/examples/toh-pt5/src/app/dashboard.component.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/dashboard.component.ts rename to aio/content/examples/toh-pt5/src/app/dashboard.component.ts diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/hero-detail.component.1.ts rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.1.ts diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail.component.css similarity index 100% rename from aio/content/examples/toh-5/src/app/hero-detail.component.css rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.css diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.html b/aio/content/examples/toh-pt5/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/toh-5/src/app/hero-detail.component.html rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.html diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail.component.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/hero-detail.component.ts rename to aio/content/examples/toh-pt5/src/app/hero-detail.component.ts diff --git a/aio/content/examples/toh-5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/hero.service.ts rename to aio/content/examples/toh-pt5/src/app/hero.service.ts diff --git a/aio/content/examples/toh-5/src/app/hero.ts b/aio/content/examples/toh-pt5/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/hero.ts rename to aio/content/examples/toh-pt5/src/app/hero.ts diff --git a/aio/content/examples/toh-5/src/app/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes.component.css similarity index 100% rename from aio/content/examples/toh-5/src/app/heroes.component.css rename to aio/content/examples/toh-pt5/src/app/heroes.component.css diff --git a/aio/content/examples/toh-5/src/app/heroes.component.html b/aio/content/examples/toh-pt5/src/app/heroes.component.html similarity index 100% rename from aio/content/examples/toh-5/src/app/heroes.component.html rename to aio/content/examples/toh-pt5/src/app/heroes.component.html diff --git a/aio/content/examples/toh-5/src/app/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes.component.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/heroes.component.ts rename to aio/content/examples/toh-pt5/src/app/heroes.component.ts diff --git a/aio/content/examples/toh-5/src/app/mock-heroes.ts b/aio/content/examples/toh-pt5/src/app/mock-heroes.ts similarity index 100% rename from aio/content/examples/toh-5/src/app/mock-heroes.ts rename to aio/content/examples/toh-pt5/src/app/mock-heroes.ts diff --git a/aio/content/examples/toh-5/src/index.html b/aio/content/examples/toh-pt5/src/index.html similarity index 100% rename from aio/content/examples/toh-5/src/index.html rename to aio/content/examples/toh-pt5/src/index.html diff --git a/aio/content/examples/toh-5/src/main.ts b/aio/content/examples/toh-pt5/src/main.ts similarity index 100% rename from aio/content/examples/toh-5/src/main.ts rename to aio/content/examples/toh-pt5/src/main.ts diff --git a/aio/content/examples/toh-6/.gitignore b/aio/content/examples/toh-pt6/.gitignore similarity index 100% rename from aio/content/examples/toh-6/.gitignore rename to aio/content/examples/toh-pt6/.gitignore diff --git a/aio/content/examples/toh-6/aot/index.html b/aio/content/examples/toh-pt6/aot/index.html similarity index 100% rename from aio/content/examples/toh-6/aot/index.html rename to aio/content/examples/toh-pt6/aot/index.html diff --git a/aio/content/examples/toh-6/aot/styles.css b/aio/content/examples/toh-pt6/aot/styles.css similarity index 100% rename from aio/content/examples/toh-6/aot/styles.css rename to aio/content/examples/toh-pt6/aot/styles.css diff --git a/aio/content/examples/toh-6/bs-config.aot.json b/aio/content/examples/toh-pt6/bs-config.aot.json similarity index 100% rename from aio/content/examples/toh-6/bs-config.aot.json rename to aio/content/examples/toh-pt6/bs-config.aot.json diff --git a/aio/content/examples/toh-6/e2e-spec.ts b/aio/content/examples/toh-pt6/e2e-spec.ts similarity index 100% rename from aio/content/examples/toh-6/e2e-spec.ts rename to aio/content/examples/toh-pt6/e2e-spec.ts diff --git a/aio/content/examples/toh-6/example-config.json b/aio/content/examples/toh-pt6/example-config.json similarity index 100% rename from aio/content/examples/toh-6/example-config.json rename to aio/content/examples/toh-pt6/example-config.json diff --git a/aio/content/examples/toh-6/plnkr.json b/aio/content/examples/toh-pt6/plnkr.json similarity index 100% rename from aio/content/examples/toh-6/plnkr.json rename to aio/content/examples/toh-pt6/plnkr.json diff --git a/aio/content/examples/toh-6/rollup-config.js b/aio/content/examples/toh-pt6/rollup-config.js similarity index 100% rename from aio/content/examples/toh-6/rollup-config.js rename to aio/content/examples/toh-pt6/rollup-config.js diff --git a/aio/content/examples/toh-6/src/app/app-routing.module.ts b/aio/content/examples/toh-pt6/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/app-routing.module.ts rename to aio/content/examples/toh-pt6/src/app/app-routing.module.ts diff --git a/aio/content/examples/toh-6/src/app/app.component.css b/aio/content/examples/toh-pt6/src/app/app.component.css similarity index 100% rename from aio/content/examples/toh-6/src/app/app.component.css rename to aio/content/examples/toh-pt6/src/app/app.component.css diff --git a/aio/content/examples/toh-6/src/app/app.component.ts b/aio/content/examples/toh-pt6/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/app.component.ts rename to aio/content/examples/toh-pt6/src/app/app.component.ts diff --git a/aio/content/examples/toh-6/src/app/app.module.ts b/aio/content/examples/toh-pt6/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/app.module.ts rename to aio/content/examples/toh-pt6/src/app/app.module.ts diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.css b/aio/content/examples/toh-pt6/src/app/dashboard.component.css similarity index 100% rename from aio/content/examples/toh-6/src/app/dashboard.component.css rename to aio/content/examples/toh-pt6/src/app/dashboard.component.css diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.html b/aio/content/examples/toh-pt6/src/app/dashboard.component.html similarity index 100% rename from aio/content/examples/toh-6/src/app/dashboard.component.html rename to aio/content/examples/toh-pt6/src/app/dashboard.component.html diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.ts b/aio/content/examples/toh-pt6/src/app/dashboard.component.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/dashboard.component.ts rename to aio/content/examples/toh-pt6/src/app/dashboard.component.ts diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail.component.css similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-detail.component.css rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.css diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.html b/aio/content/examples/toh-pt6/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-detail.component.html rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.html diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail.component.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-detail.component.ts rename to aio/content/examples/toh-pt6/src/app/hero-detail.component.ts diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.css b/aio/content/examples/toh-pt6/src/app/hero-search.component.css similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-search.component.css rename to aio/content/examples/toh-pt6/src/app/hero-search.component.css diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.html b/aio/content/examples/toh-pt6/src/app/hero-search.component.html similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-search.component.html rename to aio/content/examples/toh-pt6/src/app/hero-search.component.html diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search.component.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-search.component.ts rename to aio/content/examples/toh-pt6/src/app/hero-search.component.ts diff --git a/aio/content/examples/toh-6/src/app/hero-search.service.ts b/aio/content/examples/toh-pt6/src/app/hero-search.service.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/hero-search.service.ts rename to aio/content/examples/toh-pt6/src/app/hero-search.service.ts diff --git a/aio/content/examples/toh-6/src/app/hero.service.ts b/aio/content/examples/toh-pt6/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/hero.service.ts rename to aio/content/examples/toh-pt6/src/app/hero.service.ts diff --git a/aio/content/examples/toh-6/src/app/hero.ts b/aio/content/examples/toh-pt6/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/hero.ts rename to aio/content/examples/toh-pt6/src/app/hero.ts diff --git a/aio/content/examples/toh-6/src/app/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes.component.css similarity index 100% rename from aio/content/examples/toh-6/src/app/heroes.component.css rename to aio/content/examples/toh-pt6/src/app/heroes.component.css diff --git a/aio/content/examples/toh-6/src/app/heroes.component.html b/aio/content/examples/toh-pt6/src/app/heroes.component.html similarity index 100% rename from aio/content/examples/toh-6/src/app/heroes.component.html rename to aio/content/examples/toh-pt6/src/app/heroes.component.html diff --git a/aio/content/examples/toh-6/src/app/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes.component.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/heroes.component.ts rename to aio/content/examples/toh-pt6/src/app/heroes.component.ts diff --git a/aio/content/examples/toh-6/src/app/in-memory-data.service.ts b/aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts similarity index 100% rename from aio/content/examples/toh-6/src/app/in-memory-data.service.ts rename to aio/content/examples/toh-pt6/src/app/in-memory-data.service.ts diff --git a/aio/content/examples/toh-6/src/index.html b/aio/content/examples/toh-pt6/src/index.html similarity index 100% rename from aio/content/examples/toh-6/src/index.html rename to aio/content/examples/toh-pt6/src/index.html diff --git a/aio/content/examples/toh-6/src/main-aot.ts b/aio/content/examples/toh-pt6/src/main-aot.ts similarity index 100% rename from aio/content/examples/toh-6/src/main-aot.ts rename to aio/content/examples/toh-pt6/src/main-aot.ts diff --git a/aio/content/examples/toh-6/src/main.ts b/aio/content/examples/toh-pt6/src/main.ts similarity index 100% rename from aio/content/examples/toh-6/src/main.ts rename to aio/content/examples/toh-pt6/src/main.ts diff --git a/aio/content/examples/toh-6/src/tsconfig.1.json b/aio/content/examples/toh-pt6/src/tsconfig.1.json similarity index 100% rename from aio/content/examples/toh-6/src/tsconfig.1.json rename to aio/content/examples/toh-pt6/src/tsconfig.1.json diff --git a/aio/content/examples/toh-6/tsconfig-aot.json b/aio/content/examples/toh-pt6/tsconfig-aot.json similarity index 100% rename from aio/content/examples/toh-6/tsconfig-aot.json rename to aio/content/examples/toh-pt6/tsconfig-aot.json diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index a5d4b211c1..5a6f83943c 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -621,11 +621,11 @@ Here they are for comparison: - + - + @@ -648,11 +648,11 @@ are evident in these `main` files which can and should reside in the same folder - + - + @@ -671,11 +671,11 @@ You'll need separate TypeScript configuration files such as these: - + - + @@ -713,7 +713,7 @@ Edit your `tsconfig-aot.json` to fit your project's file structure. Rollup does the tree shaking as before. - + @@ -747,19 +747,19 @@ Compiling with AOT presupposes certain supporting files, most of them discussed - + - + - + - + @@ -832,4 +832,4 @@ Here's the map for _Tour of Heroes_.
TOH-6-bundle
- \ No newline at end of file + diff --git a/aio/content/guide/server-communication.md b/aio/content/guide/server-communication.md index 0a4a795458..dd70b6a28d 100644 --- a/aio/content/guide/server-communication.md +++ b/aio/content/guide/server-communication.md @@ -264,7 +264,7 @@ With a basic understanding of the component, you're ready to look inside the `He In many of the previous samples the app faked the interaction with the server by returning mock heroes in a service like this one: - + @@ -1187,4 +1187,4 @@ the `XHRBackend` provider of the `InMemoryWebApiModule` supersedes all others. -See the full source code in the . \ No newline at end of file +See the full source code in the . diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 99859118be..f13f0d5bf7 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -109,7 +109,7 @@ Add two properties to the `AppComponent`: a `title` property for the app name an for a hero named "Windstorm." - + @@ -118,7 +118,7 @@ for a hero named "Windstorm." Now update the template in the `@Component` decorator with data bindings to these new properties. - + @@ -151,7 +151,7 @@ Create a `Hero` class with `id` and `name` properties. Add these properties near the top of the `app.component.ts` file, just below the import statement. - + @@ -161,7 +161,7 @@ In the `AppComponent` class, refactor the component's `hero` property to be of t then initialize it with an `id` of `1` and the name `Windstorm`. - + @@ -171,7 +171,7 @@ Because you changed the hero from a string to an object, update the binding in the template to refer to the hero's `name` property. - + @@ -191,7 +191,7 @@ thanks to the template literals feature in ES2015 and TypeScript. For mor - + @@ -210,7 +210,7 @@ You need a two-way binding between the `` form element and the `hero.name Refactor the hero name in the template so it looks like this: - + @@ -237,7 +237,7 @@ of external modules that the app uses. The updated `AppModule` looks like this: - + @@ -279,7 +279,7 @@ Your app should look like this . Here's the complete `app.component.ts` as it stands now: - + @@ -289,4 +289,4 @@ Here's the complete `app.component.ts` as it stands now: ## The road ahead In the [next tutorial page](tutorial/toh-pt2), you'll build on the Tour of Heroes app to display a list of heroes. You'll also allow the user to select heroes and display their details. -You'll learn more about how to retrieve lists and bind them to the template. \ No newline at end of file +You'll learn more about how to retrieve lists and bind them to the template. diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index a91e61e603..44366bbdf6 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -111,7 +111,7 @@ To display a list of heroes, you'll add heroes to the view's template. Create an array of ten heroes. - + @@ -126,7 +126,7 @@ Create a public property in `AppComponent` that exposes the heroes for binding. - + @@ -153,7 +153,7 @@ insert the following chunk of HTML below the title and above the hero details. - + @@ -169,7 +169,7 @@ and display them individually. Modify the `
  • ` tag by adding the built-in directive `*ngFor`. - + @@ -206,7 +206,7 @@ that uses the `hero` template variable to display the hero's properties. - + @@ -221,7 +221,7 @@ To add styles to your component, set the `styles` property on the `@Component` d to the following CSS classes: - + @@ -238,7 +238,7 @@ The template for displaying heroes should look like this: - + @@ -260,7 +260,7 @@ Add a click event binding to the `
  • ` like this: - + @@ -291,7 +291,7 @@ But the user will be able to select one of the heroes by clicking on it. So replace the `hero` property with this simple `selectedHero` property: - + @@ -302,7 +302,7 @@ you won't initialize the `selectedHero` as you did with `hero`. Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks. - + @@ -313,7 +313,7 @@ Bind to the new `selectedHero` property instead as follows: - + @@ -341,7 +341,7 @@ Wrap the HTML hero detail content of the template with a `
    `. Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component. - + @@ -401,7 +401,7 @@ like this: In the template, add the following `[class.selected]` binding to the `
  • `: - + @@ -425,7 +425,7 @@ Read more about the `[class]` binding in the [Template Syntax](guide/template-sy The final version of the `
  • ` looks like this: - + @@ -443,7 +443,7 @@ After clicking "Magneta", the list should look like this: Here's the complete `app.component.ts` as of now: - + @@ -463,4 +463,4 @@ Your app should look like this . ## The road ahead You've expanded the Tour of Heroes app, but it's far from complete. An app shouldn't be one monolithic component. -In the [next page](tutorial/toh-pt3), you'll split the app into subcomponents and make them work together. \ No newline at end of file +In the [next page](tutorial/toh-pt3), you'll split the app into subcomponents and make them work together. diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index 44f396ffd1..14a3f7ce92 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -113,7 +113,7 @@ The `HeroDetailComponent` class goes in the `hero-detail.component.ts` file. Start writing the `HeroDetailComponent` as follows: - + @@ -142,7 +142,7 @@ Replace the word, "selectedHero", with the word, "hero", everywhere in the templ When you're done, the new template should look like this: - + @@ -153,7 +153,7 @@ When you're done, the new template should look like this: The `HeroDetailComponent` template binds to the component's `hero` property. Add that property to the `HeroDetailComponent` class like this: - + @@ -167,7 +167,7 @@ The Angular [style guide](guide/style-guide#rule-of-one "Style guide: rule of on Move the `Hero` class from `app.component.ts` to its own `hero.ts` file. - + @@ -176,7 +176,7 @@ Move the `Hero` class from `app.component.ts` to its own `hero.ts` file. Now that the `Hero` class is in its own file, the `AppComponent` and the `HeroDetailComponent` have to import it. Add the following `import` statement near the top of _both_ the `app.component.ts` and the `hero-detail.component.ts` files. - + @@ -189,7 +189,7 @@ the parent `AppComponent` will tell the child `HeroDetailComponent` which hero t by binding its `selectedHero` to the `hero` property of the `HeroDetailComponent`. The binding will look like this: - + @@ -202,7 +202,7 @@ Otherwise, Angular rejects the binding and throws an error. First, amend the `@angular/core` import statement to include the `Input` symbol. - + @@ -211,7 +211,7 @@ First, amend the `@angular/core` import statement to include the `Input` symbol. Then declare that `hero` is an *input* property by preceding it with the `@Input` decorator that you imported earlier. - + @@ -231,7 +231,7 @@ Read more about _input_ properties in the That's it. The `hero` property is the only thing in the `HeroDetailComponent` class. - + @@ -241,7 +241,7 @@ All it does is receive a hero object through its `hero` input property and then Here's the complete `HeroDetailComponent`. - + @@ -253,7 +253,7 @@ Every component must be declared in one—and only one—Angular module. Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you can refer to it. - + @@ -262,7 +262,7 @@ Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you Add `HeroDetailComponent` to the module's `declarations` array. - + @@ -305,7 +305,7 @@ Coordinate the master `AppComponent` with the `HeroDetailComponent` by binding the `selectedHero` property of the `AppComponent` to the `hero` property of the `HeroDetailComponent`. - + @@ -316,7 +316,7 @@ Now every time the `selectedHero` changes, the `HeroDetailComponent` gets a new The revised `AppComponent` template should look like this: - + @@ -422,19 +422,19 @@ Here are the code files discussed in this page. - + - + - + - + @@ -464,4 +464,4 @@ That's not sustainable. Data access should be refactored to a separate service and shared among the components that need data. -You’ll learn to create services in the [next tutorial](tutorial/toh-pt4) page. \ No newline at end of file +You’ll learn to create services in the [next tutorial](tutorial/toh-pt4) page. diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index d461304b15..059e4365c8 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -147,7 +147,7 @@ For example, the filename for `SpecialSuperHeroService` is `special-super-hero.s Name the class `HeroService` and export it for others to import. - + @@ -178,7 +178,7 @@ consistency and future-proofing. Add a `getHeroes()` method stub. - + @@ -195,7 +195,7 @@ Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the Additionally, copy the `import {Hero} ...` statement because the heroes array uses the `Hero` class. - + @@ -206,7 +206,7 @@ The `HEROES` constant is exported so it can be imported elsewhere, such as the ` In `app.component.ts`, where you cut the `HEROES` array, add an uninitialized `heroes` property: - + @@ -216,7 +216,7 @@ add an uninitialized `heroes` property: Back in the `HeroService`, import the mock `HEROES` and return it from the `getHeroes()` method. The `HeroService` looks like this: - + @@ -227,7 +227,7 @@ You're ready to use the `HeroService` in other components, starting with `AppCom Import the `HeroService` so that you can reference it in the code. - + @@ -238,7 +238,7 @@ How should the `AppComponent` acquire a runtime concrete `HeroService` instance? You could create a new instance of the `HeroService` with `new` like this: - + @@ -267,7 +267,7 @@ Instead of using the *new* line, you'll add two lines. Add the constructor: - + @@ -304,7 +304,7 @@ in the `@Component` call. - + @@ -321,7 +321,7 @@ The service is in a `heroService` private variable. You could call the service and get the data in one line. - + @@ -330,7 +330,7 @@ You could call the service and get the data in one line. You don't really need a dedicated method to wrap one line. Write it anyway: - + @@ -362,7 +362,7 @@ Read more about lifecycle hooks in the [Lifecycle Hooks](guide/lifecycle-hooks) Here's the essential outline for the `OnInit` interface (don't copy this into your code): - + @@ -379,7 +379,7 @@ Add the implementation for the `OnInit` interface to your export statement: Write an `ngOnInit` method with the initialization logic inside. Angular will call it at the right time. In this case, initialize by calling `getHeroes()`. - + @@ -393,7 +393,7 @@ when you click on a hero name. The `HeroService` returns a list of mock heroes immediately; its `getHeroes()` signature is synchronous. - + @@ -429,7 +429,7 @@ This is a simplified explanation. Read more about ES2015 Promises in the Update the `HeroService` with this Promise-returning `getHeroes()` method: - + @@ -442,7 +442,7 @@ by returning an *immediately resolved Promise* with the mock heroes as the resul As a result of the change to `HeroService`, `this.heroes` is now set to a `Promise` rather than an array of heroes. - + @@ -453,7 +453,7 @@ When the `Promise` resolves successfully, you'll have heroes to display. Pass the callback function as an argument to the Promise's `then()` method: - + @@ -577,15 +577,15 @@ Here are the code files discussed in this page. - + - + - + @@ -617,7 +617,7 @@ Read about the Angular component router and navigation among the views in the [n To simulate a slow connection, import the `Hero` symbol and add the following `getHeroesSlowly()` method to the `HeroService`. - + @@ -627,4 +627,4 @@ Like `getHeroes()`, it also returns a `Promise`. But this Promise waits two seconds before resolving the Promise with mock heroes. Back in the `AppComponent`, replace `getHeroes()` with `getHeroesSlowly()` -and see how the app behaves. \ No newline at end of file +and see how the app behaves. diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index c2f6d12c88..f35fe92508 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -192,7 +192,7 @@ Do the following: * Rename the selector `my-app` as `my-heroes`. - + @@ -224,11 +224,11 @@ The first draft looks like this: - + - + @@ -260,7 +260,7 @@ Open `index.html` and ensure there is a `` element at the top of the `` section. - + @@ -299,7 +299,7 @@ pastes a URL into the browser address bar. Define the first route as a route to the heroes component. - + @@ -330,7 +330,7 @@ Read more about defining routes with `Routes` in the [Routing & Navigation](guid Import the `RouterModule` and add it to the `AppModule` imports array. - + @@ -366,7 +366,7 @@ Instead, add an anchor tag to the template that, when clicked, triggers navigati The revised template looks like this: - + @@ -414,7 +414,7 @@ and the list of heroes displays. `AppComponent` now looks like this: - + @@ -431,7 +431,7 @@ Routing only makes sense when multiple views exist. To add another view, create a placeholder `DashboardComponent`, which users can navigate to and from. - + @@ -446,7 +446,7 @@ import the dashboard component and add the following route definition to the `Routes` array of definitions. - + @@ -455,7 +455,7 @@ add the following route definition to the `Routes` array of definitions. Also import and add `DashboardComponent` to the `AppModule`'s `declarations`. - + @@ -472,7 +472,7 @@ To make this happen, use a redirect route. Add the following to the array of route definitions: - + @@ -495,7 +495,7 @@ of the [Routing & Navigation](guide/router) page. Add a dashboard navigation link to the template, just above the *Heroes* link. - + @@ -523,7 +523,7 @@ Replace the `template` metadata with a `templateUrl` property that points to a n template file. - + @@ -532,7 +532,7 @@ template file. Create that file with this content: - + @@ -555,7 +555,7 @@ Angular injects `HeroService` and you can use it in the `DashboardComponent`. In dashboard.component.ts, add the following `import` statements. - + @@ -564,7 +564,7 @@ In dashboard.component.ts, add the following `import` statements. Now create the `DashboardComponent` class like this: - + @@ -632,7 +632,7 @@ You need to represent the variable part of the route with a *parameter* (or *tok Use the following *route definition*. - + @@ -687,7 +687,7 @@ in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with Add the following imports: - + @@ -697,7 +697,7 @@ Inject the `ActivatedRoute`, `HeroService`, and `Location` services into the constructor, saving their values in private fields: - + @@ -706,7 +706,7 @@ into the constructor, saving their values in private fields: Import the `switchMap` operator to use later with the route parameters `Observable`. - + @@ -715,7 +715,7 @@ Import the `switchMap` operator to use later with the route parameters `Observab Tell the class to implement the `OnInit` interface. - + @@ -726,7 +726,7 @@ extract the `id` parameter value from the `ActivatedRoute` service and use the `HeroService` to fetch the hero with that `id`. - + @@ -766,7 +766,7 @@ In the previous code snippet, `HeroService` doesn't have a `getHero()` method. T open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`. - + @@ -781,7 +781,7 @@ Now add a third option, a `goBack()` method that navigates backward one step in using the `Location` service you injected previously. - + @@ -803,7 +803,7 @@ Read more on the [CanDeactivate](api/router/index/CanDeactivate-interface) page. You'll wire this method with an event binding to a *Back* button that you'll add to the component template. - + @@ -813,7 +813,7 @@ Migrate the template to its own file called hero-detail.component.html: - + @@ -823,7 +823,7 @@ Update the component metadata with a `templateUrl` pointing to the template file - + @@ -845,7 +845,7 @@ To achieve this effect, reopen `dashboard.component.html` and replace the repeat with `` tags. Change the opening `` tag to the following: - + @@ -865,7 +865,7 @@ token in the parameterized hero detail route definition that you added to `app.module.ts` earlier: - + @@ -898,7 +898,7 @@ Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents, extracted from the `AppModule` class: - + @@ -923,8 +923,8 @@ Use an ES `import` statement *and* add it to the `NgModule.imports` list. Here is the revised `AppModule`, compared to its pre-refactor state: - - + + The revised and simplified `AppModule` is focused on identifying the key pieces of the app. @@ -957,7 +957,7 @@ Instead, they'll see a mini detail on *this* page and have to click a button to Add the following HTML fragment at the bottom of the template where the `` used to be: - + @@ -978,7 +978,7 @@ The hero's name is displayed in capital letters because of the `uppercase` pipe that's included in the interpolation binding, right after the pipe operator ( | ). - + @@ -1020,11 +1020,11 @@ The two new files should look like this: - + - + @@ -1038,7 +1038,7 @@ delete `template` and `styles`, replacing them with Set their properties to refer to the new files. - + @@ -1069,7 +1069,7 @@ This approach requires the following changes to the component class: 1. Implement `gotoDetail()` by calling the router `navigate()` method. - + @@ -1082,7 +1082,7 @@ back in the `DashboardComponent`. Here's the revised `HeroesComponent` class: - + @@ -1110,7 +1110,7 @@ Add a dashboard.component.css file to the `app` folder and referenc that file in the component metadata's `styleUrls` array property like this: - + @@ -1131,11 +1131,11 @@ Here's the content for the component CSS files. - + - + @@ -1151,7 +1151,7 @@ You'll surround those links in `