From 96c59ef8b59a74a3d5e70c7bcf2fa63d67668ca2 Mon Sep 17 00:00:00 2001 From: "Wortmann, Jan-Niklas" Date: Sat, 11 Aug 2018 11:16:52 +0200 Subject: [PATCH] docs(content): remove aio content --- docs_app/content/examples/.DS_Store | Bin 6148 -> 0 bytes docs_app/content/examples/.gitignore | 84 - .../ajs-quick-reference/.angular-cli.1.json | 62 - .../ajs-quick-reference/e2e/app.e2e-spec.ts | 115 - .../ajs-quick-reference/example-config.json | 0 .../src/app/app-routing.module.ts | 16 - .../src/app/app.component.css | 9 - .../src/app/app.component.html | 112 - .../src/app/app.component.ts | 32 - .../src/app/app.module.1.ts | 12 - .../ajs-quick-reference/src/app/app.module.ts | 22 - .../ajs-quick-reference/src/app/date.pipe.ts | 14 - .../src/app/movie-list.component.css | 57 - .../src/app/movie-list.component.html | 78 - .../src/app/movie-list.component.ts | 42 - .../src/app/movie.service.ts | 44 - .../ajs-quick-reference/src/app/movie.ts | 12 - .../src/assets/images/hero.png | Bin 7312 -> 0 bytes .../src/assets/images/ng-logo.png | Bin 7229 -> 0 bytes .../src/assets/images/villain.png | Bin 10914 -> 0 bytes .../ajs-quick-reference/src/index.html | 14 - .../examples/ajs-quick-reference/src/main.ts | 12 - .../ajs-quick-reference/stackblitz.json | 9 - .../examples/animations/e2e/app.e2e-spec.ts | 351 -- .../examples/animations/example-config.json | 0 .../examples/animations/src/app/app.module.ts | 43 - .../src/app/hero-list-auto.component.ts | 47 - .../src/app/hero-list-basic.component.ts | 70 - ...ero-list-combined-transitions.component.ts | 59 - .../hero-list-enter-leave-states.component.ts | 63 - .../app/hero-list-enter-leave.component.ts | 51 - .../src/app/hero-list-groups.component.ts | 80 - .../app/hero-list-inline-styles.component.ts | 60 - .../src/app/hero-list-multistep.component.ts | 71 - .../src/app/hero-list-timings.component.ts | 58 - .../src/app/hero-list-twoway.component.ts | 58 - .../src/app/hero-list.component.css | 27 - .../src/app/hero-team-builder.component.ts | 99 - .../animations/src/app/hero.service.ts | 54 - .../examples/animations/src/index.html | 19 - .../content/examples/animations/src/main.ts | 11 - .../examples/animations/stackblitz.json | 7 - .../examples/architecture/e2e/app.e2e-spec.ts | 100 - .../examples/architecture/example-config.json | 0 .../architecture/src/app/app.component.ts | 14 - .../architecture/src/app/app.module.ts | 36 - .../architecture/src/app/backend.service.ts | 25 - .../src/app/hero-detail.component.html | 10 - .../src/app/hero-detail.component.ts | 11 - .../src/app/hero-list.component.1.html | 9 - .../src/app/hero-list.component.html | 11 - .../src/app/hero-list.component.ts | 29 - .../architecture/src/app/hero.service.ts | 23 - .../examples/architecture/src/app/hero.ts | 10 - .../architecture/src/app/logger.service.ts | 9 - .../examples/architecture/src/app/mini-app.ts | 45 - .../src/app/sales-tax.component.ts | 25 - .../architecture/src/app/sales-tax.service.ts | 14 - .../architecture/src/app/tax-rate.service.ts | 6 - .../examples/architecture/src/index.html | 13 - .../content/examples/architecture/src/main.ts | 12 - .../examples/architecture/stackblitz.json | 9 - .../attribute-directives/e2e/app.e2e-spec.ts | 31 - .../attribute-directives/example-config.json | 0 .../src/app/app.component.1.html | 14 - .../src/app/app.component.1.ts | 10 - .../src/app/app.component.html | 24 - .../src/app/app.component.ts | 11 - .../src/app/app.module.ts | 16 - .../src/app/dummy.module.1.ts | 17 - .../src/app/highlight.directive.0.ts | 9 - .../src/app/highlight.directive.1.ts | 12 - .../src/app/highlight.directive.2.ts | 44 - .../src/app/highlight.directive.3.ts | 28 - .../src/app/highlight.directive.ts | 32 - .../attribute-directives/src/index.html | 13 - .../examples/attribute-directives/src/main.ts | 12 - .../attribute-directives/stackblitz.json | 9 - .../examples/bootstrapping/bs-config.1.json | 8 - .../bootstrapping/e2e/app.e2e-spec.ts | 14 - .../bootstrapping/example-config.json | 0 .../bootstrapping/src/app/app.component.css | 0 .../bootstrapping/src/app/app.component.html | 3 - .../src/app/app.component.spec.ts | 32 - .../bootstrapping/src/app/app.component.ts | 10 - .../bootstrapping/src/app/app.module.ts | 34 - .../src/app/item.directive.spec.ts | 8 - .../bootstrapping/src/app/item.directive.ts | 15 - .../examples/bootstrapping/src/index.html | 14 - .../examples/bootstrapping/src/main.ts | 11 - .../examples/bootstrapping/stackblitz.json | 10 - .../content/examples/cli-quickstart/README.md | 27 - .../cli-quickstart/bs-config.cli.json | 11 - .../cli-quickstart/e2e/app.e2e-spec.ts | 14 - .../cli-quickstart/example-config.json | 4 - .../cli-quickstart/src/app/app.component.css | 6 - .../cli-quickstart/src/app/app.component.html | 19 - .../src/app/app.component.spec.ts | 30 - .../cli-quickstart/src/app/app.component.ts | 16 - .../cli-quickstart/src/app/app.module.ts | 16 - .../examples/cli-quickstart/src/index.html | 14 - .../examples/cli-quickstart/src/main.ts | 11 - .../examples/cli-quickstart/zipper.json | 9 - .../component-interaction/e2e/app.e2e-spec.ts | 232 - .../component-interaction/example-config.json | 0 .../src/app/app.component.html | 51 - .../src/app/app.component.ts | 7 - .../src/app/app.module.ts | 54 - .../src/app/astronaut.component.ts | 46 - .../src/app/countdown-parent.component.ts | 57 - .../src/app/countdown-timer.component.ts | 37 - .../src/app/hero-child.component.ts | 17 - .../src/app/hero-parent.component.ts | 20 - .../component-interaction/src/app/hero.ts | 9 - .../src/app/mission.service.ts | 25 - .../src/app/missioncontrol.component.ts | 43 - .../src/app/name-child.component.ts | 18 - .../src/app/name-parent.component.ts | 15 - .../src/app/version-child.component.ts | 35 - .../src/app/version-parent.component.ts | 26 - .../src/app/voter.component.ts | 22 - .../src/app/votetaker.component.ts | 24 - .../component-interaction/src/assets/demo.css | 9 - .../component-interaction/src/index.html | 16 - .../component-interaction/src/main.ts | 11 - .../component-interaction/stackblitz.json | 8 - .../component-styles/e2e/app.e2e-spec.ts | 70 - .../component-styles/example-config.json | 0 .../component-styles/src/app/app.module.ts | 23 - .../src/app/hero-app-main.component.ts | 16 - .../src/app/hero-app.component.1.ts | 25 - .../src/app/hero-app.component.css | 3 - .../src/app/hero-app.component.ts | 25 - .../src/app/hero-controls.component.ts | 25 - .../src/app/hero-details-box.css | 3 - .../src/app/hero-details.component.css | 29 - .../src/app/hero-details.component.ts | 18 - .../src/app/hero-team.component.ts | 20 - .../examples/component-styles/src/app/hero.ts | 7 - .../src/app/quest-summary.component.css | 5 - .../src/app/quest-summary.component.html | 1 - .../src/app/quest-summary.component.ts | 20 - .../src/assets/hero-team.component.css | 3 - .../examples/component-styles/src/index.html | 19 - .../examples/component-styles/src/main.ts | 12 - .../examples/component-styles/stackblitz.json | 10 - .../e2e/app.e2e-spec.ts | 102 - .../example-config.json | 0 .../src/app/app-routing.module.ts | 11 - .../src/app/app.component.html | 38 - .../src/app/app.component.ts | 29 - .../src/app/app.module.ts | 74 - .../src/app/date-logger.service.ts | 19 - .../src/app/hero-bio.component.ts | 27 - .../src/app/hero-bios.component.ts | 48 - .../src/app/hero-cache.service.ts | 20 - .../src/app/hero-contact.component.ts | 40 - .../src/app/hero-data.ts | 14 - .../src/app/hero-of-the-month.component.1.ts | 26 - .../src/app/hero-of-the-month.component.html | 9 - .../src/app/hero-of-the-month.component.ts | 63 - .../src/app/hero.service.ts | 22 - .../src/app/hero.ts | 9 - .../src/app/highlight.directive.ts | 29 - .../src/app/logger.service.ts | 16 - .../src/app/minimal-logger.service.ts | 22 - .../src/app/parent-finder.component.ts | 215 - .../src/app/runners-up.ts | 26 - .../src/app/sorted-heroes.component.ts | 52 - .../src/app/user-context.service.ts | 33 - .../src/app/user.service.ts | 10 - .../src/assets/sample.css | 26 - .../src/index.html | 15 - .../src/main.ts | 12 - .../stackblitz.json | 9 - .../dependency-injection/e2e/app.e2e-spec.ts | 204 - .../dependency-injection/example-config.json | 0 .../src/app/app-config.ts | 10 - .../src/app/app.component.1.ts | 15 - .../src/app/app.component.2.ts | 26 - .../src/app/app.component.ts | 47 - .../src/app/app.config.ts | 14 - .../src/app/app.module.ts | 47 - .../src/app/car/car-creations.ts | 46 - .../src/app/car/car-factory.ts | 19 - .../src/app/car/car-injector.ts | 27 - .../src/app/car/car-no-di.ts | 24 - .../src/app/car/car.component.ts | 38 - .../dependency-injection/src/app/car/car.ts | 25 - .../src/app/dummy.module.ts | 25 - .../src/app/heroes/dummy.module.ts | 35 - .../src/app/heroes/hero-list.component.1.ts | 17 - .../src/app/heroes/hero-list.component.2.ts | 30 - .../src/app/heroes/hero-list.component.ts | 25 - .../src/app/heroes/hero.module.ts | 6 - .../src/app/heroes/hero.service.0.ts | 8 - .../src/app/heroes/hero.service.1.ts | 10 - .../src/app/heroes/hero.service.2.ts | 19 - .../src/app/heroes/hero.service.3.ts | 13 - .../src/app/heroes/hero.service.4.ts | 14 - .../src/app/heroes/hero.service.provider.ts | 19 - .../src/app/heroes/hero.service.ts | 25 - .../src/app/heroes/hero.ts | 6 - .../src/app/heroes/heroes-tsp.component.ts | 16 - .../src/app/heroes/heroes.component.1.ts | 18 - .../src/app/heroes/heroes.component.ts | 13 - .../src/app/heroes/mock-heroes.ts | 15 - .../src/app/injector.component.ts | 49 - .../src/app/logger.service.ts | 12 - .../src/app/providers.component.ts | 280 - .../src/app/providers.module.ts | 33 - .../src/app/test.component.ts | 57 - .../src/app/tree-shaking/app.module.ts | 15 - .../app/tree-shaking/service-and-module.ts | 14 - .../src/app/tree-shaking/service.0.ts | 11 - .../src/app/tree-shaking/service.ts | 8 - .../src/app/user.service.ts | 22 - .../dependency-injection/src/index.html | 15 - .../examples/dependency-injection/src/main.ts | 13 - .../dependency-injection/stackblitz.json | 10 - .../displaying-data/e2e/app.e2e-spec.ts | 29 - .../displaying-data/example-config.json | 0 .../src/app/app-ctor.component.ts | 19 - .../src/app/app.component.1.ts | 16 - .../src/app/app.component.2.ts | 26 - .../src/app/app.component.3.ts | 35 - .../displaying-data/src/app/app.component.ts | 32 - .../displaying-data/src/app/app.module.ts | 16 - .../examples/displaying-data/src/app/hero.ts | 9 - .../examples/displaying-data/src/index.html | 16 - .../examples/displaying-data/src/main.ts | 12 - .../examples/displaying-data/stackblitz.json | 10 - .../docs-style-guide/e2e/app.e2e-spec.ts | 15 - .../docs-style-guide/example-config.json | 0 .../examples/docs-style-guide/package.1.json | 7 - .../docs-style-guide/second.stackblitz.json | 8 - .../src/app/app.component.css | 51 - .../src/app/app.component.html | 21 - .../docs-style-guide/src/app/app.component.ts | 23 - .../docs-style-guide/src/app/app.module.ts | 15 - .../examples/docs-style-guide/src/app/hero.ts | 11 - .../docs-style-guide/src/index.2.html | 10 - .../examples/docs-style-guide/src/index.html | 15 - .../examples/docs-style-guide/src/main.ts | 12 - .../examples/docs-style-guide/stackblitz.json | 9 - .../e2e/app.e2e-spec.ts | 21 - .../example-config.json | 0 .../src/app/ad-banner.component.ts | 56 - .../src/app/ad-item.ts | 6 - .../src/app/ad.component.ts | 4 - .../src/app/ad.directive.ts | 10 - .../src/app/ad.service.ts | 23 - .../src/app/app.component.ts | 24 - .../src/app/app.module.ts | 27 - .../src/app/hero-job-ad.component.ts | 19 - .../src/app/hero-profile.component.ts | 22 - .../src/assets/sample.css | 23 - .../dynamic-component-loader/src/index.html | 14 - .../dynamic-component-loader/src/main.ts | 12 - .../dynamic-component-loader/stackblitz.json | 8 - .../examples/dynamic-form/e2e/app.e2e-spec.ts | 29 - .../examples/dynamic-form/example-config.json | 0 .../dynamic-form/src/app/app.component.ts | 22 - .../dynamic-form/src/app/app.module.ts | 18 - .../app/dynamic-form-question.component.html | 17 - .../app/dynamic-form-question.component.ts | 15 - .../src/app/dynamic-form.component.html | 17 - .../src/app/dynamic-form.component.ts | 28 - .../dynamic-form/src/app/question-base.ts | 25 - .../src/app/question-control.service.ts | 20 - .../dynamic-form/src/app/question-dropdown.ts | 12 - .../dynamic-form/src/app/question-textbox.ts | 12 - .../dynamic-form/src/app/question.service.ts | 47 - .../dynamic-form/src/assets/sample.css | 7 - .../examples/dynamic-form/src/index.html | 14 - .../content/examples/dynamic-form/src/main.ts | 12 - .../examples/dynamic-form/stackblitz.json | 9 - .../elements/src/app/app.component.ts | 26 - .../examples/elements/src/app/app.module.ts | 22 - .../elements/src/app/popup.component.ts | 58 - .../elements/src/app/popup.service.ts | 54 - .../feature-modules/e2e/app.e2e-spec.ts | 17 - .../feature-modules/example-config.json | 4 - .../feature-modules/src/app/app.component.css | 0 .../src/app/app.component.html | 9 - .../src/app/app.component.spec.ts | 32 - .../feature-modules/src/app/app.component.ts | 10 - .../feature-modules/src/app/app.module.ts | 27 - .../customer-dashboard.module.ts | 34 - .../customer-dashboard.component.css | 0 .../customer-dashboard.component.html | 7 - .../customer-dashboard.component.spec.ts | 25 - .../customer-dashboard.component.ts | 15 - .../examples/feature-modules/src/index.html | 14 - .../examples/feature-modules/src/main.ts | 11 - .../examples/feature-modules/stackblitz.json | 10 - .../form-validation/e2e/app.e2e-spec.ts | 174 - .../form-validation/example-config.json | 0 .../form-validation/src/app/app.component.ts | 10 - .../form-validation/src/app/app.module.ts | 26 - .../hero-form-reactive.component.html | 62 - .../reactive/hero-form-reactive.component.ts | 40 - .../app/shared/forbidden-name.directive.ts | 31 - .../hero-form-template.component.html | 66 - .../template/hero-form-template.component.ts | 16 - .../form-validation/src/assets/forms.css | 8 - .../examples/form-validation/src/index.html | 15 - .../examples/form-validation/src/main.ts | 12 - .../examples/form-validation/stackblitz.json | 7 - .../examples/forms/e2e/app.e2e-spec.ts | 62 - .../examples/forms/example-config.json | 0 .../examples/forms/src/app/app.component.css | 0 .../examples/forms/src/app/app.component.html | 1 - .../examples/forms/src/app/app.component.ts | 9 - .../examples/forms/src/app/app.module.ts | 21 - .../src/app/hero-form/hero-form.component.css | 0 .../app/hero-form/hero-form.component.html | 212 - .../src/app/hero-form/hero-form.component.ts | 60 - .../content/examples/forms/src/app/hero.ts | 11 - .../examples/forms/src/assets/forms.css | 9 - .../content/examples/forms/src/index.html | 23 - docs_app/content/examples/forms/src/main.ts | 12 - .../content/examples/forms/src/styles.1.css | 1 - .../content/examples/forms/stackblitz.json | 7 - .../e2e/app.e2e-spec.ts | 103 - .../example-config.json | 0 .../src/app/app.component.ts | 21 - .../src/app/app.module.ts | 33 - .../src/app/car.components.ts | 74 - .../src/app/car.services.ts | 95 - .../src/app/hero-tax-return.component.css | 22 - .../src/app/hero-tax-return.component.html | 20 - .../src/app/hero-tax-return.component.ts | 44 - .../src/app/hero-tax-return.service.ts | 30 - .../src/app/hero.ts | 31 - .../src/app/heroes-list.component.ts | 48 - .../src/app/heroes.service.ts | 46 - .../src/app/villains-list.component.html | 6 - .../src/app/villains-list.component.ts | 20 - .../src/app/villains.service.ts | 17 - .../src/index.html | 14 - .../src/main.ts | 12 - .../stackblitz.json | 8 - .../content/examples/http/e2e/app.e2e-spec.ts | 142 - .../content/examples/http/example-config.json | 3 - .../examples/http/specs.stackblitz.json | 18 - .../examples/http/src/app/app.component.html | 24 - .../examples/http/src/app/app.component.ts | 19 - .../examples/http/src/app/app.module.ts | 89 - .../examples/http/src/app/auth.service.ts | 9 - .../http/src/app/config/config.component.html | 18 - .../http/src/app/config/config.component.ts | 78 - .../http/src/app/config/config.service.ts | 99 - .../app/downloader/downloader.component.html | 4 - .../app/downloader/downloader.component.ts | 23 - .../src/app/downloader/downloader.service.ts | 39 - .../examples/http/src/app/heroes/hero.ts | 4 - .../http/src/app/heroes/heroes.component.css | 89 - .../http/src/app/heroes/heroes.component.html | 32 - .../http/src/app/heroes/heroes.component.ts | 76 - .../src/app/heroes/heroes.service.spec.ts | 156 - .../http/src/app/heroes/heroes.service.ts | 98 - .../src/app/http-error-handler.service.ts | 46 - .../app/http-interceptors/auth-interceptor.ts | 40 - .../http-interceptors/caching-interceptor.ts | 85 - .../ensure-https-interceptor.ts | 20 - .../http/src/app/http-interceptors/index.ts | 34 - .../http-interceptors/logging-interceptor.ts | 38 - .../app/http-interceptors/noop-interceptor.ts | 16 - .../trim-name-interceptor.ts | 24 - .../http-interceptors/upload-interceptor.ts | 61 - .../http/src/app/in-memory-data.service.ts | 13 - .../examples/http/src/app/message.service.ts | 14 - .../src/app/messages/messages.component.html | 8 - .../src/app/messages/messages.component.ts | 10 - .../package-search.component.html | 17 - .../package-search.component.ts | 38 - .../package-search/package-search.service.ts | 61 - .../http/src/app/request-cache.service.ts | 60 - .../src/app/uploader/uploader.component.html | 12 - .../src/app/uploader/uploader.component.ts | 25 - .../http/src/app/uploader/uploader.service.ts | 105 - .../examples/http/src/assets/config.json | 4 - .../examples/http/src/assets/textfile.txt | 1 - .../examples/http/src/index-specs.html | 4 - docs_app/content/examples/http/src/index.html | 14 - .../content/examples/http/src/main-specs.ts | 44 - docs_app/content/examples/http/src/main.ts | 5 - docs_app/content/examples/http/src/test.css | 1 - .../http/src/testing/global-jasmine.ts | 3 - .../http/src/testing/http-client.spec.ts | 192 - .../content/examples/http/stackblitz.json | 11 - .../i18n/doc-files/app.component.html | 31 - .../i18n/doc-files/app.locale_data.ts | 7 - .../i18n/doc-files/app.locale_data_extra.ts | 7 - .../examples/i18n/doc-files/app.module.ts | 13 - .../content/examples/i18n/doc-files/main.1.ts | 12 - .../content/examples/i18n/doc-files/main.2.ts | 22 - .../content/examples/i18n/doc-files/main.3.ts | 13 - .../i18n/doc-files/messages.fr.xlf.html | 74 - .../content/examples/i18n/e2e/app.e2e-spec.ts | 45 - .../content/examples/i18n/example-config.json | 3 - .../examples/i18n/src/app/app.component.html | 35 - .../examples/i18n/src/app/app.component.ts | 21 - .../examples/i18n/src/app/app.module.ts | 12 - docs_app/content/examples/i18n/src/index.html | 14 - .../examples/i18n/src/locale/messages.fr.xlf | 87 - .../examples/i18n/src/locale/messages.xlf | 75 - docs_app/content/examples/i18n/src/main.ts | 12 - docs_app/content/examples/i18n/zipper.json | 11 - .../e2e/app.e2e-spec.ts | 47 - .../example-config.json | 4 - .../src/app/app-routing.module.ts | 33 - .../src/app/app.component.css | 0 .../src/app/app.component.html | 13 - .../src/app/app.component.spec.ts | 36 - .../src/app/app.component.ts | 10 - .../src/app/app.module.ts | 22 - .../customer-list/customer-list.component.css | 0 .../customer-list.component.html | 3 - .../customer-list.component.spec.ts | 25 - .../customer-list/customer-list.component.ts | 15 - .../app/customers/customers-routing.module.ts | 21 - .../src/app/customers/customers.module.ts | 16 - .../order-list/order-list.component.css | 0 .../order-list/order-list.component.html | 3 - .../order-list/order-list.component.spec.ts | 25 - .../orders/order-list/order-list.component.ts | 15 - .../src/app/orders/orders-routing.module.ts | 22 - .../src/app/orders/orders.module.ts | 14 - .../lazy-loading-ngmodules/src/index.html | 14 - .../lazy-loading-ngmodules/src/main.ts | 11 - .../lazy-loading-ngmodules/stackblitz.json | 10 - .../lifecycle-hooks/e2e/app.e2e-spec.ts | 181 - .../lifecycle-hooks/example-config.json | 0 .../src/app/after-content.component.ts | 114 - .../src/app/after-view.component.ts | 116 - .../src/app/app.component.html | 37 - .../lifecycle-hooks/src/app/app.component.ts | 7 - .../lifecycle-hooks/src/app/app.module.ts | 67 - .../src/app/counter.component.ts | 84 - .../src/app/do-check-parent.component.html | 13 - .../src/app/do-check.component.ts | 95 - .../lifecycle-hooks/src/app/logger.service.ts | 26 - .../src/app/on-changes-parent.component.html | 13 - .../src/app/on-changes.component.ts | 73 - .../src/app/peek-a-boo-parent.component.ts | 53 - .../src/app/peek-a-boo.component.ts | 85 - .../src/app/spy.component.html | 16 - .../lifecycle-hooks/src/app/spy.component.ts | 38 - .../lifecycle-hooks/src/app/spy.directive.ts | 24 - .../lifecycle-hooks/src/assets/sample.css | 13 - .../examples/lifecycle-hooks/src/index.html | 16 - .../examples/lifecycle-hooks/src/main.ts | 11 - .../examples/lifecycle-hooks/stackblitz.json | 8 - .../examples/ngcontainer/example-config.json | 0 .../ngcontainer/src/app/app.component.css | 34 - .../ngcontainer/src/app/app.component.html | 279 - .../ngcontainer/src/app/app.component.ts | 24 - .../ngcontainer/src/app/app.module.ts | 19 - .../ngcontainer/src/app/content.component.ts | 16 - .../ngcontainer/src/app/hero.components.ts | 43 - .../examples/ngcontainer/src/app/hero.ts | 13 - .../examples/ngcontainer/src/index.html | 12 - .../content/examples/ngcontainer/src/main.ts | 12 - .../examples/ngcontainer/stackblitz.json | 10 - .../ngmodule-faq/contact.1b.stackblitz.json | 24 - .../ngmodule-faq/contact.2.stackblitz.json | 26 - .../examples/ngmodule-faq/e2e/app.e2e-spec.ts | 223 - .../examples/ngmodule-faq/example-config.json | 0 .../ngmodule-faq/minimal.0.stackblitz.json | 12 - .../ngmodule-faq/pre-shared.3.stackblitz.json | 40 - .../src/app/app-routing.module.3.ts | 19 - .../src/app/app-routing.module.ts | 30 - .../ngmodule-faq/src/app/app.component.0.ts | 10 - .../ngmodule-faq/src/app/app.component.1.ts | 17 - .../ngmodule-faq/src/app/app.component.1b.ts | 13 - .../ngmodule-faq/src/app/app.component.2.ts | 10 - .../ngmodule-faq/src/app/app.component.3.ts | 17 - .../ngmodule-faq/src/app/app.component.ts | 17 - .../ngmodule-faq/src/app/app.module.0.ts | 13 - .../ngmodule-faq/src/app/app.module.1.ts | 52 - .../ngmodule-faq/src/app/app.module.1b.ts | 46 - .../ngmodule-faq/src/app/app.module.2.ts | 36 - .../ngmodule-faq/src/app/app.module.3.ts | 41 - .../ngmodule-faq/src/app/app.module.ts | 39 - .../src/app/contact/awesome.pipe.ts | 10 - .../contact/contact-highlight.directive.ts | 20 - .../app/contact/contact-routing.module.3.ts | 14 - .../src/app/contact/contact-routing.module.ts | 16 - .../src/app/contact/contact.component.3.ts | 53 - .../src/app/contact/contact.component.css | 32 - .../src/app/contact/contact.component.html | 37 - .../src/app/contact/contact.component.ts | 54 - .../src/app/contact/contact.module.0.ts | 11 - .../src/app/contact/contact.module.2.ts | 37 - .../src/app/contact/contact.module.3.ts | 44 - .../src/app/contact/contact.module.ts | 19 - .../src/app/contact/contact.service.ts | 37 - .../ngmodule-faq/src/app/core/core.module.ts | 48 - .../src/app/core/title.component.html | 6 - .../src/app/core/title.component.ts | 16 - .../ngmodule-faq/src/app/core/user.service.ts | 32 - .../src/app/crisis/crisis-detail.component.ts | 19 - .../src/app/crisis/crisis-list.component.ts | 21 - .../src/app/crisis/crisis-routing.module.ts | 18 - .../src/app/crisis/crisis.module.ts | 14 - .../src/app/crisis/crisis.service.ts | 33 - .../src/app/hero/hero-detail.component.ts | 31 - .../src/app/hero/hero-list.component.ts | 20 - .../src/app/hero/hero-routing.module.3.ts | 23 - .../src/app/hero/hero-routing.module.ts | 23 - .../src/app/hero/hero.component.3.ts | 18 - .../src/app/hero/hero.component.ts | 19 - .../src/app/hero/hero.module.3.ts | 21 - .../ngmodule-faq/src/app/hero/hero.module.ts | 16 - .../ngmodule-faq/src/app/hero/hero.service.ts | 36 - .../src/app/hero/highlight.directive.ts | 14 - .../src/app/highlight.directive.ts | 15 - .../src/app/shared/awesome.pipe.ts | 10 - .../src/app/shared/highlight.directive.ts | 12 - .../src/app/shared/shared.module.ts | 18 - .../ngmodule-faq/src/app/title.component.html | 10 - .../ngmodule-faq/src/app/title.component.ts | 23 - .../ngmodule-faq/src/app/user.service.ts | 8 - .../examples/ngmodule-faq/src/index.0.html | 15 - .../examples/ngmodule-faq/src/index.1.html | 13 - .../examples/ngmodule-faq/src/index.1b.html | 13 - .../examples/ngmodule-faq/src/index.2.html | 13 - .../examples/ngmodule-faq/src/index.3.html | 13 - .../examples/ngmodule-faq/src/index.html | 13 - .../examples/ngmodule-faq/src/main-static.ts | 13 - .../examples/ngmodule-faq/src/main.0.ts | 11 - .../examples/ngmodule-faq/src/main.1.ts | 11 - .../examples/ngmodule-faq/src/main.1b.ts | 11 - .../examples/ngmodule-faq/src/main.2.ts | 11 - .../examples/ngmodule-faq/src/main.3.ts | 11 - .../content/examples/ngmodule-faq/src/main.ts | 12 - .../examples/ngmodule-faq/stackblitz.json | 40 - .../examples/ngmodules/e2e/app.e2e-spec.ts | 223 - .../examples/ngmodules/example-config.json | 4 - .../ngmodules/src/app/app-routing.module.ts | 14 - .../ngmodules/src/app/app.component.css | 0 .../ngmodules/src/app/app.component.html | 3 - .../ngmodules/src/app/app.component.spec.ts | 32 - .../ngmodules/src/app/app.component.ts | 16 - .../examples/ngmodules/src/app/app.module.ts | 36 - .../src/app/contact/contact-routing.module.ts | 15 - .../src/app/contact/contact.component.css | 0 .../src/app/contact/contact.component.html | 32 - .../src/app/contact/contact.component.spec.ts | 25 - .../src/app/contact/contact.component.ts | 54 - .../src/app/contact/contact.module.ts | 16 - .../src/app/contact/contact.service.ts | 35 - .../ngmodules/src/app/core/core.module.ts | 46 - .../src/app/core/title.component.html | 4 - .../ngmodules/src/app/core/title.component.ts | 15 - .../ngmodules/src/app/core/user.service.ts | 31 - .../customers/customers-detail.component.ts | 31 - .../app/customers/customers-list.component.ts | 22 - .../app/customers/customers-routing.module.ts | 23 - .../src/app/customers/customers.component.ts | 19 - .../src/app/customers/customers.module.ts | 19 - .../src/app/customers/customers.service.ts | 36 - .../src/app/items/items-detail.component.ts | 23 - .../src/app/items/items-list.component.ts | 23 - .../src/app/items/items-routing.module.ts | 19 - .../src/app/items/items.component.css | 0 .../src/app/items/items.component.html | 3 - .../src/app/items/items.component.spec.ts | 25 - .../src/app/items/items.component.ts | 15 - .../ngmodules/src/app/items/items.module.ts | 15 - .../ngmodules/src/app/items/items.service.ts | 36 - .../ngmodules/src/app/shared/awesome.pipe.ts | 9 - .../src/app/shared/highlight.directive.ts | 13 - .../ngmodules/src/app/shared/shared.module.ts | 14 - .../content/examples/ngmodules/src/index.html | 14 - .../content/examples/ngmodules/src/main.ts | 11 - .../examples/ngmodules/stackblitz.json | 10 - .../example-config.json | 0 .../observables-in-angular/src/main.ts | 131 - .../examples/observables/example-config.json | 0 .../examples/observables/src/creating.ts | 66 - .../examples/observables/src/geolocation.ts | 32 - .../content/examples/observables/src/main.ts | 5 - .../examples/observables/src/multicasting.ts | 155 - .../examples/observables/src/subscribing.ts | 32 - .../examples/pipes/e2e/app.e2e-spec.ts | 116 - .../examples/pipes/example-config.json | 0 .../examples/pipes/src/app/app.component.html | 83 - .../examples/pipes/src/app/app.component.ts | 10 - .../examples/pipes/src/app/app.module.ts | 48 - .../src/app/exponential-strength.pipe.ts | 18 - .../examples/pipes/src/app/fetch-json.pipe.ts | 25 - .../app/flying-heroes-impure.component.html | 38 - .../src/app/flying-heroes.component.html | 38 - .../pipes/src/app/flying-heroes.component.ts | 61 - .../pipes/src/app/flying-heroes.pipe.ts | 27 - .../src/app/hero-async-message.component.ts | 39 - .../pipes/src/app/hero-birthday1.component.ts | 12 - .../pipes/src/app/hero-birthday2.component.ts | 20 - .../pipes/src/app/hero-list.component.ts | 17 - .../content/examples/pipes/src/app/heroes.ts | 7 - .../app/power-boost-calculator.component.ts | 18 - .../pipes/src/app/power-booster.component.ts | 11 - .../examples/pipes/src/assets/heroes.json | 6 - .../content/examples/pipes/src/index.html | 14 - docs_app/content/examples/pipes/src/main.ts | 12 - .../content/examples/pipes/stackblitz.json | 7 - .../example-config.json | 0 .../practical-observable-usage/src/backoff.ts | 24 - .../practical-observable-usage/src/main.ts | 0 .../src/typeahead.ts | 18 - .../examples/providers/e2e/app.e2e-spec.ts | 37 - .../examples/providers/example-config.json | 4 - .../providers/src/app/app.component.css | 0 .../providers/src/app/app.component.html | 7 - .../providers/src/app/app.component.spec.ts | 32 - .../providers/src/app/app.component.ts | 25 - .../examples/providers/src/app/app.module.ts | 12 - .../examples/providers/src/app/user.module.ts | 9 - .../providers/src/app/user.service.0.ts | 7 - .../providers/src/app/user.service.1.ts | 8 - .../providers/src/app/user.service.spec.ts | 12 - .../providers/src/app/user.service.ts | 30 - .../content/examples/providers/src/index.html | 14 - .../content/examples/providers/src/main.ts | 11 - .../examples/providers/stackblitz.json | 10 - .../examples/quickstart/bs-config.1.json | 8 - .../content/examples/quickstart/e2e-spec.ts | 17 - .../examples/quickstart/example-config.json | 0 .../quickstart/src/app/app.component.ts | 8 - .../examples/quickstart/src/app/app.module.ts | 11 - .../examples/quickstart/src/index.html | 31 - .../content/examples/quickstart/src/main.ts | 5 - .../examples/quickstart/src/tsconfig.1.json | 13 - .../examples/quickstart/stackblitz.json | 11 - .../reactive-forms/e2e/app.e2e-spec.ts | 1020 ---- .../reactive-forms/example-config.json | 0 .../reactive-forms/final.stackblitz.json | 24 - .../src/app/app.component.1.html | 4 - .../reactive-forms/src/app/app.component.css | 0 .../reactive-forms/src/app/app.component.html | 4 - .../reactive-forms/src/app/app.component.ts | 9 - .../reactive-forms/src/app/app.module.ts | 45 - .../reactive-forms/src/app/data-model.ts | 40 - .../src/app/demo.component.html | 40 - .../reactive-forms/src/app/demo.component.ts | 49 - .../reactive-forms/src/app/demo.module.ts | 33 - .../hero-detail/hero-detail-1.component.html | 8 - .../hero-detail/hero-detail-1.component.ts | 15 - .../hero-detail/hero-detail-2.component.html | 18 - .../hero-detail/hero-detail-2.component.ts | 17 - .../hero-detail/hero-detail-3.component.html | 16 - .../hero-detail/hero-detail-3.component.ts | 27 - .../hero-detail/hero-detail-3a.component.ts | 25 - .../hero-detail/hero-detail-4.component.html | 46 - .../hero-detail/hero-detail-4.component.ts | 34 - .../hero-detail/hero-detail-5.component.html | 56 - .../hero-detail/hero-detail-5.component.ts | 35 - .../hero-detail/hero-detail-6.component.html | 46 - .../hero-detail/hero-detail-6.component.ts | 66 - .../hero-detail/hero-detail-7.component.html | 46 - .../hero-detail/hero-detail-7.component.ts | 68 - .../hero-detail/hero-detail-8.component.html | 72 - .../hero-detail/hero-detail-8.component.ts | 74 - .../app/hero-detail/hero-detail.component.css | 0 .../hero-detail/hero-detail.component.html | 73 - .../app/hero-detail/hero-detail.component.ts | 113 - .../app/hero-list/hero-list.component.1.html | 8 - .../src/app/hero-list/hero-list.component.css | 0 .../app/hero-list/hero-list.component.html | 17 - .../src/app/hero-list/hero-list.component.ts | 32 - .../reactive-forms/src/app/hero.service.ts | 25 - .../reactive-forms/src/index-final.html | 17 - .../examples/reactive-forms/src/index.html | 15 - .../examples/reactive-forms/src/main-final.ts | 13 - .../examples/reactive-forms/src/main.ts | 13 - .../examples/reactive-forms/src/styles.1.css | 1 - .../examples/reactive-forms/stackblitz.json | 14 - .../examples/router/e2e/app.e2e-spec.ts | 162 - .../examples/router/example-config.json | 0 .../app/admin/admin-dashboard.component.1.ts | 9 - .../app/admin/admin-dashboard.component.2.ts | 33 - .../app/admin/admin-dashboard.component.ts | 47 - .../src/app/admin/admin-routing.module.1.ts | 39 - .../src/app/admin/admin-routing.module.2.ts | 44 - .../src/app/admin/admin-routing.module.3.ts | 43 - .../src/app/admin/admin-routing.module.ts | 41 - .../router/src/app/admin/admin.component.ts | 17 - .../router/src/app/admin/admin.module.ts | 24 - .../src/app/admin/manage-crises.component.ts | 9 - .../src/app/admin/manage-heroes.component.ts | 9 - .../examples/router/src/app/animations.ts | 26 - .../router/src/app/app-routing.module.1.ts | 29 - .../router/src/app/app-routing.module.2.ts | 27 - .../router/src/app/app-routing.module.3.ts | 34 - .../router/src/app/app-routing.module.4.ts | 33 - .../router/src/app/app-routing.module.5.ts | 48 - .../router/src/app/app-routing.module.6.ts | 57 - .../router/src/app/app-routing.module.ts | 54 - .../router/src/app/app.component.1.ts | 18 - .../router/src/app/app.component.2.ts | 16 - .../router/src/app/app.component.3.ts | 48 - .../router/src/app/app.component.4.ts | 23 - .../router/src/app/app.component.5.ts | 20 - .../router/src/app/app.component.6.ts | 23 - .../examples/router/src/app/app.component.ts | 23 - .../examples/router/src/app/app.module.0.ts | 44 - .../examples/router/src/app/app.module.1.ts | 52 - .../examples/router/src/app/app.module.2.ts | 31 - .../examples/router/src/app/app.module.3.ts | 29 - .../examples/router/src/app/app.module.4.ts | 46 - .../examples/router/src/app/app.module.5.ts | 38 - .../examples/router/src/app/app.module.6.ts | 29 - .../examples/router/src/app/app.module.7.ts | 38 - .../examples/router/src/app/app.module.ts | 56 - .../router/src/app/auth-guard.service.1.ts | 11 - .../router/src/app/auth-guard.service.2.ts | 37 - .../router/src/app/auth-guard.service.3.ts | 39 - .../router/src/app/auth-guard.service.4.ts | 47 - .../router/src/app/auth-guard.service.ts | 56 - .../examples/router/src/app/auth.service.ts | 24 - .../src/app/can-deactivate-guard.service.1.ts | 32 - .../src/app/can-deactivate-guard.service.ts | 15 - .../src/app/compose-message.component.html | 17 - .../src/app/compose-message.component.ts | 43 - .../crisis-center-home.component.ts | 9 - .../crisis-center-routing.module.1.ts | 45 - .../crisis-center-routing.module.2.ts | 72 - .../crisis-center-routing.module.3.ts | 52 - .../crisis-center-routing.module.4.ts | 65 - .../crisis-center-routing.module.ts | 53 - .../crisis-center/crisis-center.component.ts | 10 - .../crisis-center/crisis-center.module.1.ts | 36 - .../app/crisis-center/crisis-center.module.ts | 35 - .../crisis-detail-resolver.service.ts | 29 - .../crisis-detail.component.1.ts | 90 - .../crisis-center/crisis-detail.component.ts | 87 - .../crisis-center/crisis-list.component.1.ts | 44 - .../crisis-center/crisis-list.component.ts | 42 - .../src/app/crisis-center/crisis.service.ts | 43 - .../router/src/app/crisis-list.component.ts | 10 - .../examples/router/src/app/dialog.service.ts | 21 - .../router/src/app/hero-list.component.ts | 13 - .../src/app/heroes/hero-detail.component.1.ts | 56 - .../src/app/heroes/hero-detail.component.2.ts | 46 - .../src/app/heroes/hero-detail.component.ts | 67 - .../src/app/heroes/hero-list.component.1.ts | 48 - .../src/app/heroes/hero-list.component.ts | 55 - .../router/src/app/heroes/hero.service.ts | 29 - .../src/app/heroes/heroes-routing.module.1.ts | 24 - .../src/app/heroes/heroes-routing.module.ts | 24 - .../router/src/app/heroes/heroes.module.ts | 33 - .../router/src/app/login-routing.module.ts | 24 - .../router/src/app/login.component.1.ts | 46 - .../router/src/app/login.component.ts | 56 - .../router/src/app/not-found.component.ts | 7 - .../src/app/selective-preloading-strategy.ts | 23 - .../examples/router/src/assets/app.css | 51 - .../content/examples/router/src/index.html | 20 - docs_app/content/examples/router/src/main.ts | 6 - .../content/examples/router/stackblitz.json | 11 - .../examples/rx-library/example-config.json | 0 .../examples/rx-library/src/error-handling.ts | 25 - .../content/examples/rx-library/src/main.ts | 0 .../rx-library/src/naming-convention.ts | 20 - .../examples/rx-library/src/operators.1.ts | 23 - .../examples/rx-library/src/operators.2.ts | 16 - .../examples/rx-library/src/operators.ts | 20 - .../examples/rx-library/src/retry-on-error.ts | 26 - .../rx-library/src/simple-creation.ts | 65 - .../examples/security/e2e/app.e2e-spec.ts | 37 - .../examples/security/example-config.json | 0 .../security/src/app/app.component.ts | 13 - .../examples/security/src/app/app.module.ts | 18 - .../src/app/bypass-security.component.html | 17 - .../src/app/bypass-security.component.ts | 38 - .../src/app/inner-html-binding.component.html | 6 - .../src/app/inner-html-binding.component.ts | 12 - .../content/examples/security/src/index.html | 14 - .../content/examples/security/src/main.ts | 13 - .../content/examples/security/stackblitz.json | 8 - .../e2e/app.e2e-spec.ts | 44 - .../example-config.json | 0 .../src/app/app.component.html | 27 - .../src/app/app.component.spec.ts | 27 - .../src/app/app.component.ts | 20 - .../src/app/app.module.ts | 31 - .../src/app/check-for-update.service.ts | 15 - .../src/app/log-update.service.ts | 19 - .../src/app/prompt-update.service.ts | 20 - .../src/index.html | 12 - .../src/main.ts | 12 - .../src/ngsw-config.json | 28 - .../set-document-title/e2e/app.e2e-spec.ts | 30 - .../set-document-title/example-config.json | 0 .../src/app/app.component.ts | 29 - .../set-document-title/src/app/app.module.ts | 19 - .../set-document-title/src/index.html | 21 - .../examples/set-document-title/src/main.ts | 12 - .../set-document-title/stackblitz.json | 9 - docs_app/content/examples/setup/e2e-spec.ts | 17 - .../examples/setup/example-config.json | 3 - .../examples/setup/non-essential-files.txt | 13 - .../setup/quickstart-specs.stackblitz.json | 12 - .../setup/src/app/app.component.spec.ts | 33 - .../examples/setup/src/app/app.component.ts | 8 - .../examples/setup/src/app/app.module.ts | 11 - .../content/examples/setup/src/index.html | 28 - docs_app/content/examples/setup/src/main.ts | 5 - .../examples/setup/src/quickstart-specs.html | 41 - .../setup/src/systemjs.config.extras.js | 11 - .../content/examples/setup/stackblitz.json | 12 - .../structural-directives/e2e/app.e2e-spec.ts | 58 - .../structural-directives/example-config.json | 0 .../src/app/app.component.css | 70 - .../src/app/app.component.html | 228 - .../src/app/app.component.ts | 23 - .../src/app/app.module.ts | 19 - .../src/app/hero-switch.components.ts | 43 - .../structural-directives/src/app/hero.ts | 13 - .../structural-directives/src/app/scrap.txt | 21 - .../src/app/unless.directive.ts | 50 - .../structural-directives/src/index.html | 15 - .../structural-directives/src/main.ts | 12 - .../structural-directives/stackblitz.json | 12 - .../examples/styleguide/e2e/app.e2e-spec.ts | 193 - .../examples/styleguide/example-config.json | 0 .../src/01-01/app/app.component.css | 0 .../styleguide/src/01-01/app/app.component.ts | 14 - .../styleguide/src/01-01/app/app.module.ts | 27 - .../01-01/app/heroes/hero.component.avoid.ts | 49 - .../src/01-01/app/heroes/heroes.component.ts | 21 - .../styleguide/src/01-01/app/heroes/index.ts | 2 - .../src/01-01/app/heroes/shared/hero.model.ts | 5 - .../01-01/app/heroes/shared/hero.service.ts | 11 - .../src/01-01/app/heroes/shared/index.ts | 3 - .../01-01/app/heroes/shared/mock-heroes.ts | 8 - .../styleguide/src/01-01/app/index.ts | 2 - .../examples/styleguide/src/01-01/main.ts | 6 - .../styleguide/src/02-05/app/app.component.ts | 10 - .../styleguide/src/02-05/app/app.module.ts | 23 - .../examples/styleguide/src/02-05/main.ts | 8 - .../styleguide/src/02-07/app/app.component.ts | 10 - .../styleguide/src/02-07/app/app.module.ts | 19 - .../02-07/app/heroes/hero.component.avoid.ts | 11 - .../src/02-07/app/heroes/hero.component.ts | 13 - .../styleguide/src/02-07/app/heroes/index.ts | 1 - .../styleguide/src/02-07/app/index.ts | 3 - .../styleguide/src/02-07/app/users/index.ts | 1 - .../02-07/app/users/users.component.avoid.ts | 11 - .../src/02-07/app/users/users.component.ts | 13 - .../styleguide/src/02-08/app/app.component.ts | 7 - .../styleguide/src/02-08/app/app.module.ts | 19 - .../styleguide/src/02-08/app/index.ts | 2 - .../styleguide/src/02-08/app/shared/index.ts | 2 - .../app/shared/input-highlight.directive.ts | 10 - .../app/shared/validate.directive.avoid.ts | 10 - .../02-08/app/shared/validate.directive.ts | 9 - .../styleguide/src/03-01/app/app.component.ts | 18 - .../styleguide/src/03-01/app/app.module.ts | 15 - .../03-01/app/core/exception.service.avoid.ts | 11 - .../src/03-01/app/core/exception.service.ts | 14 - .../styleguide/src/03-01/app/core/index.ts | 1 - .../styleguide/src/03-01/app/index.ts | 2 - .../styleguide/src/03-02/app/app.component.ts | 19 - .../styleguide/src/03-02/app/app.module.ts | 17 - .../src/03-02/app/core/data.service.ts | 4 - .../styleguide/src/03-02/app/core/index.ts | 1 - .../styleguide/src/03-02/app/index.ts | 2 - .../styleguide/src/03-03/app/app.component.ts | 18 - .../styleguide/src/03-03/app/app.module.ts | 15 - .../app/core/hero-collector.service.avoid.ts | 15 - .../03-03/app/core/hero-collector.service.ts | 25 - .../src/03-03/app/core/hero.model.avoid.ts | 14 - .../src/03-03/app/core/hero.model.ts | 7 - .../styleguide/src/03-03/app/core/index.ts | 2 - .../styleguide/src/03-03/app/index.ts | 2 - .../styleguide/src/03-04/app/app.component.ts | 27 - .../styleguide/src/03-04/app/app.module.ts | 17 - .../styleguide/src/03-04/app/core/index.ts | 1 - .../src/03-04/app/core/toast.service.avoid.ts | 27 - .../src/03-04/app/core/toast.service.ts | 32 - .../styleguide/src/03-04/app/index.ts | 2 - .../src/03-06/app/app.component.html | 6 - .../styleguide/src/03-06/app/app.component.ts | 21 - .../styleguide/src/03-06/app/app.module.ts | 17 - .../src/03-06/app/core/exception.service.ts | 4 - .../styleguide/src/03-06/app/core/index.ts | 6 - .../src/03-06/app/core/spinner/index.ts | 3 - .../app/core/spinner/spinner.component.ts | 16 - .../03-06/app/core/spinner/spinner.service.ts | 12 - .../src/03-06/app/core/toast/index.ts | 3 - .../03-06/app/core/toast/toast.component.ts | 13 - .../src/03-06/app/core/toast/toast.service.ts | 6 - .../styleguide/src/03-06/app/heroes/index.ts | 1 - .../src/03-06/app/heroes/shared/hero.model.ts | 7 - .../app/heroes/shared/hero.service.avoid.ts | 33 - .../03-06/app/heroes/shared/hero.service.ts | 33 - .../src/03-06/app/heroes/shared/index.ts | 2 - .../styleguide/src/03-06/app/index.ts | 3 - .../03-06/app/shared/toast/toast.component.ts | 13 - .../styleguide/src/04-08/app/app.component.ts | 8 - .../styleguide/src/04-08/app/app.module.ts | 28 - .../04-08/app/heroes/heroes.component.html | 1 - .../src/04-08/app/heroes/heroes.component.ts | 11 - .../styleguide/src/04-10/app/app.component.ts | 8 - .../styleguide/src/04-10/app/app.module.ts | 30 - .../04-10/app/heroes/heroes.component.html | 8 - .../src/04-10/app/heroes/heroes.component.ts | 27 - .../filter-text/filter-text.component.ts | 26 - .../shared/filter-text/filter-text.service.ts | 30 - .../src/04-10/app/shared/init-caps.pipe.ts | 7 - .../src/04-10/app/shared/shared.module.ts | 24 - .../styleguide/src/04-11/app/app.component.ts | 12 - .../styleguide/src/04-11/app/app.module.ts | 30 - .../src/04-11/app/core/core.module.ts | 19 - .../styleguide/src/04-11/app/core/index.ts | 4 - .../src/04-11/app/core/logger.service.ts | 13 - .../src/04-11/app/core/nav/nav.component.css | 56 - .../src/04-11/app/core/nav/nav.component.html | 14 - .../src/04-11/app/core/nav/nav.component.ts | 19 - .../app/core/spinner/spinner.component.css | 21 - .../app/core/spinner/spinner.component.html | 2 - .../app/core/spinner/spinner.component.ts | 35 - .../04-11/app/core/spinner/spinner.service.ts | 24 - .../04-11/app/heroes/heroes.component.html | 12 - .../src/04-11/app/heroes/heroes.component.ts | 32 - .../styleguide/src/04-12/app/app.component.ts | 11 - .../styleguide/src/04-12/app/app.module.ts | 30 - .../src/04-12/app/core/core.module.ts | 21 - .../styleguide/src/04-12/app/core/index.ts | 3 - .../src/04-12/app/core/logger.service.ts | 13 - .../src/04-12/app/core/module-import-guard.ts | 6 - .../src/04-12/app/core/nav/nav.component.css | 56 - .../src/04-12/app/core/nav/nav.component.html | 14 - .../src/04-12/app/core/nav/nav.component.ts | 19 - .../04-12/app/heroes/heroes.component.html | 12 - .../src/04-12/app/heroes/heroes.component.ts | 24 - .../src/05-02/app/app.component.html | 2 - .../styleguide/src/05-02/app/app.component.ts | 7 - .../styleguide/src/05-02/app/app.module.ts | 17 - .../styleguide/src/05-02/app/heroes/index.ts | 1 - .../hero-button.component.avoid.ts | 11 - .../hero-button/hero-button.component.html | 1 - .../hero-button/hero-button.component.ts | 9 - .../app/heroes/shared/hero-button/index.ts | 1 - .../src/05-02/app/heroes/shared/index.ts | 1 - .../styleguide/src/05-02/app/index.ts | 2 - .../src/05-03/app/app.component.avoid.html | 4 - .../src/05-03/app/app.component.html | 2 - .../styleguide/src/05-03/app/app.component.ts | 7 - .../styleguide/src/05-03/app/app.module.ts | 17 - .../styleguide/src/05-03/app/heroes/index.ts | 1 - .../hero-button.component.avoid.ts | 10 - .../hero-button/hero-button.component.html | 1 - .../hero-button/hero-button.component.ts | 9 - .../app/heroes/shared/hero-button/index.ts | 1 - .../src/05-03/app/heroes/shared/index.ts | 1 - .../styleguide/src/05-03/app/index.ts | 2 - .../styleguide/src/05-04/app/app.component.ts | 7 - .../styleguide/src/05-04/app/app.module.ts | 21 - .../app/heroes/heroes.component.avoid.ts | 64 - .../src/05-04/app/heroes/heroes.component.css | 28 - .../05-04/app/heroes/heroes.component.html | 12 - .../src/05-04/app/heroes/heroes.component.ts | 22 - .../styleguide/src/05-04/app/heroes/index.ts | 2 - .../src/05-04/app/heroes/shared/hero.model.ts | 5 - .../05-04/app/heroes/shared/hero.service.ts | 19 - .../src/05-04/app/heroes/shared/index.ts | 2 - .../styleguide/src/05-04/app/index.ts | 2 - .../styleguide/src/05-12/app/app.component.ts | 7 - .../styleguide/src/05-12/app/app.module.ts | 17 - .../styleguide/src/05-12/app/heroes/index.ts | 1 - .../hero-button.component.avoid.ts | 20 - .../hero-button/hero-button.component.ts | 13 - .../app/heroes/shared/hero-button/index.ts | 1 - .../src/05-12/app/heroes/shared/index.ts | 1 - .../styleguide/src/05-12/app/index.ts | 2 - .../src/05-13/app/app.component.avoid.html | 5 - .../src/05-13/app/app.component.html | 6 - .../styleguide/src/05-13/app/app.component.ts | 7 - .../styleguide/src/05-13/app/app.module.ts | 17 - .../styleguide/src/05-13/app/heroes/index.ts | 1 - .../hero-button.component.avoid.ts | 14 - .../hero-button/hero-button.component.ts | 14 - .../app/heroes/shared/hero-button/index.ts | 1 - .../heroes/shared/hero-highlight.directive.ts | 15 - .../src/05-13/app/heroes/shared/index.ts | 2 - .../styleguide/src/05-13/app/index.ts | 2 - .../styleguide/src/05-14/app/app.component.ts | 7 - .../styleguide/src/05-14/app/app.module.ts | 17 - .../styleguide/src/05-14/app/index.ts | 2 - .../styleguide/src/05-14/app/shared/index.ts | 1 - .../src/05-14/app/shared/toast/index.ts | 1 - .../app/shared/toast/toast.component.avoid.ts | 40 - .../05-14/app/shared/toast/toast.component.ts | 45 - .../styleguide/src/05-15/app/app.component.ts | 10 - .../styleguide/src/05-15/app/app.module.ts | 19 - .../hero-list/hero-list.component.avoid.ts | 37 - .../heroes/hero-list/hero-list.component.ts | 23 - .../src/05-15/app/heroes/hero-list/index.ts | 1 - .../styleguide/src/05-15/app/heroes/index.ts | 2 - .../src/05-15/app/heroes/shared/hero.model.ts | 5 - .../05-15/app/heroes/shared/hero.service.ts | 14 - .../src/05-15/app/heroes/shared/index.ts | 3 - .../styleguide/src/05-15/app/index.ts | 2 - .../src/05-16/app/app.component.avoid.html | 4 - .../src/05-16/app/app.component.html | 2 - .../styleguide/src/05-16/app/app.component.ts | 7 - .../styleguide/src/05-16/app/app.module.ts | 19 - .../05-16/app/heroes/hero.component.avoid.ts | 13 - .../src/05-16/app/heroes/hero.component.ts | 14 - .../styleguide/src/05-16/app/heroes/index.ts | 1 - .../styleguide/src/05-16/app/index.ts | 2 - .../styleguide/src/05-17/app/app.component.ts | 7 - .../styleguide/src/05-17/app/app.module.ts | 20 - .../hero-list/hero-list.component.avoid.ts | 24 - .../heroes/hero-list/hero-list.component.ts | 35 - .../src/05-17/app/heroes/hero-list/index.ts | 1 - .../05-17/app/heroes/hero/hero.component.ts | 13 - .../src/05-17/app/heroes/hero/index.ts | 1 - .../styleguide/src/05-17/app/heroes/index.ts | 3 - .../src/05-17/app/heroes/shared/hero.model.ts | 5 - .../src/05-17/app/heroes/shared/index.ts | 1 - .../styleguide/src/05-17/app/index.ts | 2 - .../src/06-01/app/app.component.html | 2 - .../styleguide/src/06-01/app/app.component.ts | 7 - .../styleguide/src/06-01/app/app.module.ts | 17 - .../styleguide/src/06-01/app/index.ts | 2 - .../06-01/app/shared/highlight.directive.ts | 13 - .../styleguide/src/06-01/app/shared/index.ts | 1 - .../styleguide/src/06-03/app/app.component.ts | 9 - .../styleguide/src/06-03/app/app.module.ts | 17 - .../styleguide/src/06-03/app/index.ts | 2 - .../styleguide/src/06-03/app/shared/index.ts | 2 - .../06-03/app/shared/validator.directive.ts | 12 - .../06-03/app/shared/validator2.directive.ts | 16 - .../src/07-01/app/app.component.html | 5 - .../styleguide/src/07-01/app/app.component.ts | 18 - .../styleguide/src/07-01/app/app.module.ts | 17 - .../styleguide/src/07-01/app/heroes/index.ts | 1 - .../src/07-01/app/heroes/shared/hero.model.ts | 5 - .../07-01/app/heroes/shared/hero.service.ts | 18 - .../src/07-01/app/heroes/shared/index.ts | 2 - .../styleguide/src/07-01/app/index.ts | 2 - .../styleguide/src/07-03/app/app.component.ts | 12 - .../styleguide/src/07-03/app/app.module.ts | 19 - .../heroes/hero-list/hero-list.component.ts | 20 - .../src/07-03/app/heroes/hero-list/index.ts | 1 - .../styleguide/src/07-03/app/heroes/index.ts | 2 - .../src/07-03/app/heroes/shared/hero.model.ts | 5 - .../07-03/app/heroes/shared/hero.service.ts | 16 - .../src/07-03/app/heroes/shared/index.ts | 3 - .../styleguide/src/07-03/app/index.ts | 2 - .../styleguide/src/07-04/app/app.component.ts | 19 - .../styleguide/src/07-04/app/app.module.ts | 17 - .../styleguide/src/07-04/app/heroes/index.ts | 1 - .../heroes/shared/hero-arena.service.avoid.ts | 14 - .../app/heroes/shared/hero-arena.service.ts | 21 - .../src/07-04/app/heroes/shared/hero.model.ts | 5 - .../07-04/app/heroes/shared/hero.service.ts | 14 - .../src/07-04/app/heroes/shared/index.ts | 4 - .../styleguide/src/07-04/app/index.ts | 2 - .../styleguide/src/09-01/app/app.component.ts | 7 - .../styleguide/src/09-01/app/app.module.ts | 17 - .../styleguide/src/09-01/app/heroes/index.ts | 1 - .../hero-button.component.avoid.ts | 15 - .../hero-button/hero-button.component.ts | 14 - .../app/heroes/shared/hero-button/index.ts | 1 - .../src/09-01/app/heroes/shared/index.ts | 1 - .../styleguide/src/09-01/app/index.ts | 2 - .../styleguide/src/app/app.component.html | 1 - .../styleguide/src/app/app.component.ts | 7 - .../examples/styleguide/src/app/app.module.ts | 89 - .../examples/styleguide/src/app/app.routes.ts | 8 - .../examples/styleguide/src/app/hero-data.ts | 11 - .../examples/styleguide/src/index.html | 17 - .../content/examples/styleguide/src/main.ts | 5 - .../template-syntax/e2e/app.e2e-spec.ts | 43 - .../template-syntax/example-config.json | 0 .../template-syntax/src/app/app.component.css | 17 - .../src/app/app.component.html | 859 --- .../template-syntax/src/app/app.component.ts | 184 - .../template-syntax/src/app/app.module.1.ts | 15 - .../template-syntax/src/app/app.module.ts | 29 - .../src/app/click.directive.ts | 41 - .../src/app/hero-detail.component.ts | 80 - .../src/app/hero-form.component.html | 15 - .../src/app/hero-form.component.ts | 30 - .../src/app/hero-switch.components.ts | 42 - .../examples/template-syntax/src/app/hero.ts | 34 - .../src/app/sizer.component.ts | 24 - .../src/assets/images/hero.png | Bin 7312 -> 0 bytes .../src/assets/images/ng-logo.png | Bin 7229 -> 0 bytes .../src/assets/images/villain.png | Bin 10914 -> 0 bytes .../examples/template-syntax/src/index.html | 14 - .../examples/template-syntax/src/main.ts | 11 - .../examples/template-syntax/stackblitz.json | 5 - .../examples/testing/example-config.json | 3 - .../examples/testing/specs.stackblitz.json | 25 - .../src/app/about/about.component.spec.ts | 26 - .../testing/src/app/about/about.component.ts | 10 - .../src/app/app-initial.component.spec.ts | 76 - .../testing/src/app/app-initial.component.ts | 11 - .../testing/src/app/app-routing.module.ts | 16 - .../testing/src/app/app.component.html | 11 - .../src/app/app.component.router.spec.ts | 186 - .../testing/src/app/app.component.spec.ts | 146 - .../examples/testing/src/app/app.component.ts | 7 - .../examples/testing/src/app/app.module.ts | 50 - .../app/banner/banner-external.component.css | 1 - .../app/banner/banner-external.component.html | 1 - .../banner/banner-external.component.spec.ts | 72 - .../app/banner/banner-external.component.ts | 14 - .../banner/banner-initial.component.spec.ts | 119 - .../app/banner/banner-initial.component.ts | 10 - .../banner.component.detect-changes.spec.ts | 51 - .../src/app/banner/banner.component.spec.ts | 56 - .../src/app/banner/banner.component.ts | 12 - .../dashboard/dashboard-hero.component.css | 28 - .../dashboard-hero.component.spec.ts | 163 - .../app/dashboard/dashboard-hero.component.ts | 21 - .../src/app/dashboard/dashboard.component.css | 35 - .../app/dashboard/dashboard.component.html | 9 - .../dashboard.component.no-testbed.spec.ts | 59 - .../app/dashboard/dashboard.component.spec.ts | 148 - .../src/app/dashboard/dashboard.component.ts | 41 - .../src/app/dashboard/dashboard.module.ts | 20 - .../testing/src/app/demo/async-helper.spec.ts | 69 - .../src/app/demo/demo-external-template.html | 1 - .../testing/src/app/demo/demo-main.ts | 5 - .../testing/src/app/demo/demo.spec.ts | 153 - .../testing/src/app/demo/demo.testbed.spec.ts | 706 --- .../examples/testing/src/app/demo/demo.ts | 439 -- .../examples/testing/src/app/dummy.module.ts | 15 - .../src/app/hero/hero-detail.component.css | 29 - .../src/app/hero/hero-detail.component.html | 12 - .../hero-detail.component.no-testbed.spec.ts | 57 - .../app/hero/hero-detail.component.spec.ts | 381 -- .../src/app/hero/hero-detail.component.ts | 62 - .../src/app/hero/hero-detail.service.ts | 32 - .../src/app/hero/hero-list.component.css | 59 - .../src/app/hero/hero-list.component.html | 8 - .../src/app/hero/hero-list.component.spec.ts | 143 - .../src/app/hero/hero-list.component.ts | 30 - .../src/app/hero/hero-routing.module.ts | 18 - .../testing/src/app/hero/hero.module.ts | 9 - .../testing/src/app/in-memory-data.service.ts | 26 - .../src/app/model/hero.service.spec.ts | 215 - .../testing/src/app/model/hero.service.ts | 97 - .../examples/testing/src/app/model/hero.ts | 8 - .../src/app/model/http-hero.service.spec.ts | 126 - .../src/app/model/http-hero.service.ts | 69 - .../examples/testing/src/app/model/index.ts | 3 - .../src/app/model/testing/http-client.spec.ts | 192 - .../testing/src/app/model/testing/index.ts | 1 - .../app/model/testing/test-hero.service.ts | 61 - .../src/app/model/testing/test-heroes.ts | 13 - .../testing/src/app/model/user.service.ts | 7 - .../app/shared/highlight.directive.spec.ts | 104 - .../src/app/shared/highlight.directive.ts | 20 - .../testing/src/app/shared/shared.module.ts | 19 - .../src/app/shared/title-case.pipe.spec.ts | 34 - .../testing/src/app/shared/title-case.pipe.ts | 11 - .../examples/testing/src/app/twain/quote.ts | 4 - .../app/twain/twain.component.marbles.spec.ts | 87 - .../src/app/twain/twain.component.spec.ts | 182 - .../testing/src/app/twain/twain.component.ts | 48 - .../testing/src/app/twain/twain.data.ts | 15 - .../testing/src/app/twain/twain.service.ts | 45 - .../src/app/welcome/welcome.component.spec.ts | 145 - .../src/app/welcome/welcome.component.ts | 20 - .../content/examples/testing/src/expected.ts | 1 - .../examples/testing/src/index-specs.html | 4 - .../content/examples/testing/src/index.html | 14 - .../examples/testing/src/main-specs.ts | 45 - docs_app/content/examples/testing/src/main.ts | 12 - .../content/examples/testing/src/test.css | 1 - .../src/testing/activated-route-stub.ts | 29 - .../src/testing/async-observable-helpers.ts | 29 - .../testing/src/testing/global-jasmine.ts | 3 - .../examples/testing/src/testing/index.ts | 45 - .../testing/src/testing/jasmine-matchers.d.ts | 5 - .../testing/src/testing/jasmine-matchers.ts | 45 - .../src/testing/router-link-directive-stub.ts | 30 - .../content/examples/testing/src/tests.html | 64 - .../content/examples/testing/src/tests.sb.ts | 26 - .../content/examples/testing/stackblitz.json | 19 - .../examples/toh-pt0/e2e/app.e2e-spec.ts | 14 - .../examples/toh-pt0/example-config.json | 0 .../toh-pt0/src/app/app.component.css | 0 .../toh-pt0/src/app/app.component.html | 1 - .../toh-pt0/src/app/app.component.spec.ts | 32 - .../examples/toh-pt0/src/app/app.component.ts | 12 - .../examples/toh-pt0/src/app/app.module.ts | 16 - .../content/examples/toh-pt0/src/index.html | 14 - docs_app/content/examples/toh-pt0/src/main.ts | 11 - .../content/examples/toh-pt0/src/styles.1.css | 22 - .../content/examples/toh-pt0/stackblitz.json | 9 - .../examples/toh-pt1/e2e/app.e2e-spec.ts | 70 - .../examples/toh-pt1/example-config.json | 0 .../toh-pt1/src/app/app.component.css | 0 .../toh-pt1/src/app/app.component.html | 2 - .../examples/toh-pt1/src/app/app.component.ts | 10 - .../examples/toh-pt1/src/app/app.module.ts | 30 - .../content/examples/toh-pt1/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.1.html | 17 - .../src/app/heroes/heroes.component.css | 0 .../src/app/heroes/heroes.component.html | 10 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 35 - .../content/examples/toh-pt1/src/index.html | 14 - docs_app/content/examples/toh-pt1/src/main.ts | 13 - .../content/examples/toh-pt1/stackblitz.json | 10 - .../examples/toh-pt2/e2e/app.e2e-spec.ts | 133 - .../examples/toh-pt2/example-config.json | 0 .../toh-pt2/src/app/app.component.css | 0 .../toh-pt2/src/app/app.component.html | 2 - .../examples/toh-pt2/src/app/app.component.ts | 10 - .../examples/toh-pt2/src/app/app.module.ts | 20 - .../content/examples/toh-pt2/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.1.html | 20 - .../src/app/heroes/heroes.component.css | 48 - .../src/app/heroes/heroes.component.html | 27 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 36 - .../examples/toh-pt2/src/app/mock-heroes.ts | 14 - .../content/examples/toh-pt2/src/index.html | 14 - docs_app/content/examples/toh-pt2/src/main.ts | 13 - .../content/examples/toh-pt2/stackblitz.json | 9 - .../examples/toh-pt3/e2e/app.e2e-spec.ts | 133 - .../examples/toh-pt3/example-config.json | 0 .../toh-pt3/src/app/app.component.css | 0 .../toh-pt3/src/app/app.component.html | 2 - .../examples/toh-pt3/src/app/app.component.ts | 10 - .../examples/toh-pt3/src/app/app.module.ts | 22 - .../app/hero-detail/hero-detail.component.css | 0 .../hero-detail/hero-detail.component.html | 11 - .../app/hero-detail/hero-detail.component.ts | 24 - .../content/examples/toh-pt3/src/app/hero.ts | 5 - .../src/app/heroes/heroes.component.css | 48 - .../src/app/heroes/heroes.component.html | 13 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 25 - .../examples/toh-pt3/src/app/mock-heroes.ts | 14 - .../content/examples/toh-pt3/src/index.html | 14 - docs_app/content/examples/toh-pt3/src/main.ts | 13 - .../content/examples/toh-pt3/stackblitz.json | 9 - .../examples/toh-pt4/e2e/app.e2e-spec.ts | 133 - .../examples/toh-pt4/example-config.json | 0 .../toh-pt4/src/app/app.component.css | 0 .../toh-pt4/src/app/app.component.html | 3 - .../examples/toh-pt4/src/app/app.component.ts | 10 - .../examples/toh-pt4/src/app/app.module.ts | 35 - .../app/hero-detail/hero-detail.component.css | 0 .../hero-detail/hero-detail.component.html | 9 - .../app/hero-detail/hero-detail.component.ts | 20 - .../toh-pt4/src/app/hero.service.1.ts | 24 - .../examples/toh-pt4/src/app/hero.service.ts | 34 - .../content/examples/toh-pt4/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.1.ts | 19 - .../src/app/heroes/heroes.component.css | 50 - .../src/app/heroes/heroes.component.html | 14 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 43 - .../toh-pt4/src/app/message.service.spec.ts | 15 - .../toh-pt4/src/app/message.service.ts | 14 - .../src/app/messages/messages.component.css | 35 - .../src/app/messages/messages.component.html | 8 - .../app/messages/messages.component.spec.ts | 25 - .../src/app/messages/messages.component.ts | 21 - .../examples/toh-pt4/src/app/mock-heroes.ts | 15 - .../content/examples/toh-pt4/src/index.html | 14 - docs_app/content/examples/toh-pt4/src/main.ts | 11 - .../content/examples/toh-pt4/stackblitz.json | 9 - .../examples/toh-pt5/e2e/app.e2e-spec.ts | 174 - .../examples/toh-pt5/example-config.json | 0 .../toh-pt5/src/app/app-routing.module.0.ts | 10 - .../toh-pt5/src/app/app-routing.module.ts | 45 - .../toh-pt5/src/app/app.component.css | 29 - .../toh-pt5/src/app/app.component.html | 14 - .../examples/toh-pt5/src/app/app.component.ts | 10 - .../examples/toh-pt5/src/app/app.module.ts | 38 - .../app/dashboard/dashboard.component.1.html | 8 - .../src/app/dashboard/dashboard.component.css | 62 - .../app/dashboard/dashboard.component.html | 11 - .../app/dashboard/dashboard.component.spec.ts | 25 - .../src/app/dashboard/dashboard.component.ts | 26 - .../app/hero-detail/hero-detail.component.css | 30 - .../hero-detail/hero-detail.component.html | 12 - .../app/hero-detail/hero-detail.component.ts | 49 - .../examples/toh-pt5/src/app/hero.service.ts | 27 - .../content/examples/toh-pt5/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.css | 51 - .../src/app/heroes/heroes.component.html | 10 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 26 - .../toh-pt5/src/app/message.service.spec.ts | 15 - .../toh-pt5/src/app/message.service.ts | 14 - .../src/app/messages/messages.component.css | 35 - .../src/app/messages/messages.component.html | 8 - .../app/messages/messages.component.spec.ts | 25 - .../src/app/messages/messages.component.ts | 16 - .../examples/toh-pt5/src/app/mock-heroes.ts | 15 - .../content/examples/toh-pt5/src/index.html | 16 - docs_app/content/examples/toh-pt5/src/main.ts | 11 - .../content/examples/toh-pt5/stackblitz.json | 9 - .../examples/toh-pt6/e2e/app.e2e-spec.ts | 310 - .../examples/toh-pt6/example-config.json | 0 .../toh-pt6/src/app/app-routing.module.ts | 19 - .../toh-pt6/src/app/app.component.css | 29 - .../toh-pt6/src/app/app.component.html | 7 - .../examples/toh-pt6/src/app/app.component.ts | 10 - .../examples/toh-pt6/src/app/app.module.ts | 56 - .../src/app/dashboard/dashboard.component.css | 62 - .../app/dashboard/dashboard.component.html | 11 - .../app/dashboard/dashboard.component.spec.ts | 25 - .../src/app/dashboard/dashboard.component.ts | 24 - .../app/hero-detail/hero-detail.component.css | 30 - .../hero-detail/hero-detail.component.html | 13 - .../app/hero-detail/hero-detail.component.ts | 42 - .../app/hero-search/hero-search.component.css | 39 - .../hero-search/hero-search.component.html | 17 - .../hero-search/hero-search.component.spec.ts | 25 - .../app/hero-search/hero-search.component.ts | 52 - .../examples/toh-pt6/src/app/hero.service.ts | 157 - .../content/examples/toh-pt6/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.css | 76 - .../src/app/heroes/heroes.component.html | 27 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 43 - .../toh-pt6/src/app/in-memory-data.service.ts | 20 - .../toh-pt6/src/app/message.service.spec.ts | 15 - .../toh-pt6/src/app/message.service.ts | 14 - .../src/app/messages/messages.component.css | 35 - .../src/app/messages/messages.component.html | 8 - .../app/messages/messages.component.spec.ts | 25 - .../src/app/messages/messages.component.ts | 16 - .../examples/toh-pt6/src/app/mock-heroes.ts | 15 - .../content/examples/toh-pt6/src/index.html | 14 - docs_app/content/examples/toh-pt6/src/main.ts | 12 - .../content/examples/toh-pt6/stackblitz.json | 9 - docs_app/content/examples/tsconfig.json | 21 - docs_app/content/examples/tslint.json | 94 - .../examples/universal/example-config.json | 3 - docs_app/content/examples/universal/server.ts | 61 - .../universal/src/app/app-routing.module.ts | 19 - .../universal/src/app/app.component.css | 29 - .../universal/src/app/app.component.html | 7 - .../universal/src/app/app.component.ts | 10 - .../examples/universal/src/app/app.module.ts | 60 - .../universal/src/app/app.server.module.ts | 19 - .../src/app/dashboard/dashboard.component.css | 62 - .../app/dashboard/dashboard.component.html | 11 - .../app/dashboard/dashboard.component.spec.ts | 25 - .../src/app/dashboard/dashboard.component.ts | 23 - .../app/hero-detail/hero-detail.component.css | 30 - .../hero-detail/hero-detail.component.html | 11 - .../app/hero-detail/hero-detail.component.ts | 40 - .../app/hero-search/hero-search.component.css | 39 - .../hero-search/hero-search.component.html | 13 - .../hero-search/hero-search.component.spec.ts | 25 - .../app/hero-search/hero-search.component.ts | 40 - .../universal/src/app/hero.service.ts | 128 - .../examples/universal/src/app/hero.ts | 4 - .../src/app/heroes/heroes.component.css | 74 - .../src/app/heroes/heroes.component.html | 21 - .../src/app/heroes/heroes.component.spec.ts | 25 - .../src/app/heroes/heroes.component.ts | 41 - .../src/app/in-memory-data.service.ts | 19 - .../universal/src/app/message.service.spec.ts | 15 - .../universal/src/app/message.service.ts | 14 - .../src/app/messages/messages.component.css | 35 - .../src/app/messages/messages.component.html | 8 - .../app/messages/messages.component.spec.ts | 25 - .../src/app/messages/messages.component.ts | 16 - .../examples/universal/src/app/mock-heroes.ts | 14 - .../content/examples/universal/src/index.html | 14 - .../examples/universal/src/main.server.ts | 1 - .../content/examples/universal/src/main.ts | 11 - .../universal/src/tsconfig.server.json | 16 - .../universal/webpack.server.config.js | 31 - .../content/examples/universal/zipper.json | 9 - .../examples/upgrade-module/.gitignore | 7 - .../examples/upgrade-module/e2e-spec.ts | 165 - .../upgrade-module/example-config.json | 3 - .../src/app/a-to-ajs-providers/app.module.ts | 35 - .../hero-detail.component.ts | 11 - .../src/app/a-to-ajs-providers/heroes.ts | 13 - .../app/a-to-ajs-transclusion/app.module.ts | 39 - .../container.component.ts | 16 - .../hero-detail.component.ts | 29 - .../app/ajs-a-hybrid-bootstrap/app.module.ts | 29 - .../src/app/ajs-bootstrap/app.module.ts | 12 - .../src/app/ajs-ng-app/app.module.ts | 4 - .../src/app/ajs-to-a-projection/app.module.ts | 36 - .../hero-detail.component.ts | 16 - .../ajs-to-a-projection/main.controller.ts | 5 - .../ajs-upgraded-providers.ts | 12 - .../src/app/ajs-to-a-providers/app.module.ts | 44 - .../hero-detail.component.ts | 17 - .../app/ajs-to-a-providers/heroes.service.ts | 11 - .../src/app/downgrade-io/app.module.ts | 39 - .../app/downgrade-io/hero-detail.component.ts | 19 - .../src/app/downgrade-io/main.controller.ts | 12 - .../src/app/downgrade-static/app.module.ts | 42 - .../downgrade-static/hero-detail.component.ts | 11 - .../src/app/hero-detail.directive.ts | 22 - .../examples/upgrade-module/src/app/hero.ts | 5 - .../src/app/upgrade-io/app.module.ts | 39 - .../src/app/upgrade-io/container.component.ts | 19 - .../app/upgrade-io/hero-detail.component.ts | 37 - .../src/app/upgrade-static/app.module.ts | 41 - .../app/upgrade-static/container.component.ts | 11 - .../upgrade-static/hero-detail.component.ts | 25 - .../upgrade-module/src/app/villain.ts | 5 - .../src/index-a-to-ajs-providers.html | 31 - .../src/index-a-to-ajs-transclusion.html | 30 - .../src/index-ajs-a-hybrid-bootstrap.html | 28 - .../src/index-ajs-to-a-projection.html | 37 - .../src/index-ajs-to-a-providers.html | 31 - .../upgrade-module/src/index-bootstrap.html | 13 - .../src/index-downgrade-io.html | 44 - .../src/index-downgrade-static.html | 32 - .../upgrade-module/src/index-ng-app.html | 15 - .../upgrade-module/src/index-upgrade-io.html | 30 - .../src/index-upgrade-static.html | 30 - .../upgrade-module/src/systemjs.config.1.js | 46 - .../upgrade-phonecat-1-typescript/README.md | 34 - .../app/app.animations.css | 67 - .../app/app.animations.ts | 43 - .../app/app.config.ts | 18 - .../upgrade-phonecat-1-typescript/app/app.css | 93 - .../app/app.module.ts | 10 - .../core/checkmark/checkmark.filter.spec.ts | 14 - .../app/core/checkmark/checkmark.filter.ts | 8 - .../app/core/core.module.ts | 4 - .../app/core/phone/phone.module.ts | 4 - .../app/core/phone/phone.service.spec.ts | 43 - .../app/core/phone/phone.service.ts | 14 - .../app/index.html | 35 - .../phone-detail.component.spec.ts | 38 - .../phone-detail/phone-detail.component.ts | 24 - .../app/phone-detail/phone-detail.module.ts | 7 - .../phone-detail/phone-detail.template.html | 117 - .../phone-list/phone-list.component.spec.ts | 36 - .../app/phone-list/phone-list.component.ts | 20 - .../app/phone-list/phone-list.module.ts | 4 - .../app/phone-list/phone-list.template.html | 36 - .../app/phones/dell-streak-7.json | 64 - .../app/phones/motorola-atrix-4g.json | 62 - .../app/phones/motorola-xoom-with-wi-fi.json | 65 - .../app/phones/motorola-xoom.json | 62 - .../app/phones/nexus-s.json | 69 - .../app/phones/phones.json | 155 - .../upgrade-phonecat-1-typescript/e2e-spec.ts | 107 - .../example-config.json | 5 - .../karma.conf.ajs.js | 32 - .../run-unit-tests.sh | 7 - .../tsconfig.ajs.json | 13 - .../upgrade-phonecat-2-hybrid/README.md | 32 - .../upgrade-phonecat-2-hybrid/aot/index.html | 40 - .../app/ajs-upgraded-providers.ts | 14 - .../app/app.animations.css | 67 - .../app/app.animations.ts | 43 - .../app/app.config.ts | 19 - .../upgrade-phonecat-2-hybrid/app/app.css | 93 - .../app/app.module.ajs.ts | 11 - .../app/app.module.ts | 76 - .../app/core/checkmark/checkmark.pipe.spec.ts | 11 - .../app/core/checkmark/checkmark.pipe.ts | 9 - .../app/core/core.module.ts | 4 - .../app/core/phone/phone.module.ts | 4 - .../app/core/phone/phone.service.spec.ts | 51 - .../app/core/phone/phone.service.ts | 43 - .../upgrade-phonecat-2-hybrid/app/main-aot.ts | 6 - .../upgrade-phonecat-2-hybrid/app/main.ts | 6 - .../phone-detail.component.ajs.ts | 28 - .../phone-detail.component.spec.ts | 59 - .../phone-detail/phone-detail.component.ts | 41 - .../app/phone-detail/phone-detail.module.ts | 7 - .../phone-detail/phone-detail.template.html | 120 - .../phone-list/phone-list.component.ajs.ts | 24 - .../phone-list/phone-list.component.spec.ts | 66 - .../app/phone-list/phone-list.component.ts | 72 - .../app/phone-list/phone-list.module.ts | 4 - .../app/phone-list/phone-list.template.html | 40 - .../app/phones/dell-streak-7.json | 64 - .../app/phones/motorola-atrix-4g.json | 62 - .../app/phones/motorola-xoom-with-wi-fi.json | 65 - .../app/phones/motorola-xoom.json | 62 - .../app/phones/nexus-s.json | 69 - .../app/phones/phones.json | 155 - .../bs-config.aot.json | 14 - .../copy-dist-files.js | 25 - .../upgrade-phonecat-2-hybrid/e2e-spec.ts | 103 - .../example-config.json | 5 - .../upgrade-phonecat-2-hybrid/index.html | 51 - .../karma-test-shim.1.js | 90 - .../karma-test-shim.js | 97 - .../karma.conf.ajs.js | 73 - .../upgrade-phonecat-2-hybrid/karma.conf.js | 100 - .../rollup-config.js | 21 - .../run-unit-tests.sh | 7 - .../systemjs.config.1.js | 59 - .../tsconfig-aot.json | 27 - .../upgrade-phonecat-3-final/README.md | 24 - .../app/app-routing.module.ts | 23 - .../app/app.component.ts | 8 - .../upgrade-phonecat-3-final/app/app.css | 93 - .../app/app.module.ts | 34 - .../app/core/checkmark/checkmark.pipe.spec.ts | 10 - .../app/core/checkmark/checkmark.pipe.ts | 9 - .../app/core/phone/phone.service.spec.ts | 49 - .../app/core/phone/phone.service.ts | 26 - .../upgrade-phonecat-3-final/app/main.ts | 10 - .../phone-detail.component.spec.ts | 59 - .../phone-detail/phone-detail.component.ts | 27 - .../phone-detail/phone-detail.template.html | 120 - .../phone-list/phone-list.component.spec.ts | 71 - .../app/phone-list/phone-list.component.ts | 53 - .../app/phone-list/phone-list.template.html | 40 - .../app/phones/dell-streak-7.json | 64 - .../app/phones/motorola-atrix-4g.json | 62 - .../app/phones/motorola-xoom-with-wi-fi.json | 65 - .../app/phones/motorola-xoom.json | 62 - .../app/phones/nexus-s.json | 69 - .../app/phones/phones.json | 155 - .../upgrade-phonecat-3-final/e2e-spec.ts | 109 - .../example-config.json | 5 - .../upgrade-phonecat-3-final/index.html | 36 - .../karma-test-shim.js | 96 - .../upgrade-phonecat-3-final/karma.conf.js | 96 - .../run-unit-tests.sh | 6 - .../systemjs.config.1.js | 57 - .../examples/user-input/e2e/app.e2e-spec.ts | 99 - .../examples/user-input/example-config.json | 0 .../user-input/src/app/app.component.html | 27 - .../user-input/src/app/app.component.ts | 8 - .../examples/user-input/src/app/app.module.ts | 37 - .../user-input/src/app/click-me.component.ts | 24 - .../user-input/src/app/click-me2.component.ts | 18 - .../user-input/src/app/keyup.components.ts | 88 - .../src/app/little-tour.component.ts | 25 - .../user-input/src/app/loop-back.component.ts | 12 - .../src/assets/user-input-styles.css | 9 - .../examples/user-input/src/index.html | 15 - .../content/examples/user-input/src/main.ts | 11 - .../examples/user-input/stackblitz.json | 8 - .../examples/webpack/config/helpers.js | 12 - .../webpack/config/karma-test-shim.js | 22 - .../examples/webpack/config/karma.conf.js | 39 - .../examples/webpack/config/webpack.common.js | 81 - .../examples/webpack/config/webpack.dev.js | 26 - .../examples/webpack/config/webpack.prod.js | 41 - .../examples/webpack/config/webpack.test.js | 55 - docs_app/content/examples/webpack/e2e-spec.ts | 21 - .../examples/webpack/example-config.json | 5 - .../examples/webpack/karma.webpack.conf.js | 2 - .../examples/webpack/package.webpack.json | 49 - .../webpack/src/app/app.component.css | 9 - .../webpack/src/app/app.component.html | 7 - .../webpack/src/app/app.component.spec.ts | 16 - .../examples/webpack/src/app/app.component.ts | 16 - .../examples/webpack/src/app/app.module.ts | 16 - .../webpack/src/assets/css/styles.css | 6 - .../webpack/src/assets/images/angular.png | Bin 2385 -> 0 bytes .../content/examples/webpack/src/index.html | 14 - docs_app/content/examples/webpack/src/main.ts | 14 - .../content/examples/webpack/src/polyfills.ts | 12 - .../examples/webpack/src/tsconfig.1.json | 13 - .../content/examples/webpack/src/vendor.ts | 18 - .../examples/webpack/webpack.config.js | 3 - docs_app/content/examples/webpack/zipper.json | 12 - docs_app/content/guide/ajs-quick-reference.md | 1276 ----- docs_app/content/guide/animations.md | 354 -- docs_app/content/guide/aot-compiler.md | 1293 ----- docs_app/content/guide/api-page-class.md | 175 - .../content/guide/architecture-components.md | 180 - .../content/guide/architecture-modules.md | 107 - .../content/guide/architecture-next-steps.md | 48 - .../content/guide/architecture-services.md | 76 - docs_app/content/guide/architecture.md | 137 - .../content/guide/attribute-directives.md | 385 -- docs_app/content/guide/bootstrapping.md | 180 - docs_app/content/guide/browser-support.md | 580 -- docs_app/content/guide/change-log.md | 221 - docs_app/content/guide/cheatsheet.md | 392 -- .../content/guide/comparing-observables.md | 315 -- .../content/guide/component-interaction.md | 442 -- docs_app/content/guide/component-styles.md | 355 -- .../guide/dependency-injection-in-action.md | 1303 ----- .../guide/dependency-injection-pattern.md | 167 - .../content/guide/dependency-injection.md | 776 --- docs_app/content/guide/deployment.md | 381 -- docs_app/content/guide/displaying-data.md | 395 -- docs_app/content/guide/docs-style-guide.md | 1280 ----- .../content/guide/dynamic-component-loader.md | 200 - docs_app/content/guide/dynamic-form.md | 212 - docs_app/content/guide/elements.md | 155 - docs_app/content/guide/entry-components.md | 113 - docs_app/content/guide/feature-modules.md | 128 - docs_app/content/guide/form-validation.md | 212 - docs_app/content/guide/forms.md | 787 --- docs_app/content/guide/frequent-ngmodules.md | 133 - docs_app/content/guide/glossary.md | 789 --- .../hierarchical-dependency-injection.md | 255 - docs_app/content/guide/http.md | 1039 ---- docs_app/content/guide/i18n.md | 746 --- docs_app/content/guide/language-service.md | 176 - .../content/guide/lazy-loading-ngmodules.md | 228 - docs_app/content/guide/lifecycle-hooks.md | 617 -- docs_app/content/guide/module-types.md | 191 - docs_app/content/guide/ngmodule-api.md | 242 - docs_app/content/guide/ngmodule-faq.md | 666 --- .../content/guide/ngmodule-vs-jsmodule.md | 74 - docs_app/content/guide/ngmodules.md | 75 - docs_app/content/guide/npm-packages.md | 173 - .../content/guide/observables-in-angular.md | 51 - docs_app/content/guide/observables.md | 114 - docs_app/content/guide/pipes.md | 637 --- .../guide/practical-observable-usage.md | 23 - docs_app/content/guide/providers.md | 78 - docs_app/content/guide/quickstart.md | 603 -- docs_app/content/guide/reactive-forms.md | 1385 ----- docs_app/content/guide/router.md | 4273 -------------- docs_app/content/guide/rx-library.md | 97 - docs_app/content/guide/security.md | 328 -- .../guide/service-worker-communications.md | 54 - .../content/guide/service-worker-config.md | 169 - .../content/guide/service-worker-devops.md | 333 -- .../guide/service-worker-getting-started.md | 203 - .../content/guide/service-worker-intro.md | 53 - docs_app/content/guide/set-document-title.md | 75 - .../content/guide/setup-systemjs-anatomy.md | 360 -- docs_app/content/guide/setup.md | 359 -- docs_app/content/guide/sharing-ngmodules.md | 75 - docs_app/content/guide/singleton-services.md | 180 - .../content/guide/structural-directives.md | 804 --- docs_app/content/guide/styleguide.md | 4988 ----------------- docs_app/content/guide/template-syntax.md | 2011 ------- docs_app/content/guide/testing-observables.md | 3 - docs_app/content/guide/testing.md | 3403 ----------- .../content/guide/typescript-configuration.md | 146 - docs_app/content/guide/universal.md | 527 -- docs_app/content/guide/upgrade.md | 1948 ------- docs_app/content/guide/user-input.md | 332 -- docs_app/content/guide/visual-studio-2015.md | 315 -- docs_app/content/guide/webpack.md | 801 --- docs_app/content/images/bios/_no-one.jpg | Bin 3476 -> 0 bytes docs_app/content/images/bios/alex-eagle.jpg | Bin 11660 -> 0 bytes .../content/images/bios/alex-rickabaugh.jpg | Bin 10679 -> 0 bytes docs_app/content/images/bios/alex-wolfe.jpg | Bin 8362 -> 0 bytes docs_app/content/images/bios/ali.jpg | Bin 12943 -> 0 bytes docs_app/content/images/bios/amcdnl.jpeg | Bin 25463 -> 0 bytes docs_app/content/images/bios/andrewseguin.jpg | Bin 7477 -> 0 bytes .../bios/angular-gde-bio-placeholder.jpg | Bin 5501 -> 0 bytes docs_app/content/images/bios/brad-green.jpg | Bin 8879 -> 0 bytes .../content/images/bios/brandonroberts.jpg | Bin 7192 -> 0 bytes docs_app/content/images/bios/chrisnoring.jpg | Bin 8315 -> 0 bytes .../content/images/bios/christianweyer.jpg | Bin 10438 -> 0 bytes docs_app/content/images/bios/chuckj.jpg | Bin 11888 -> 0 bytes docs_app/content/images/bios/cironunes.jpg | Bin 6538 -> 0 bytes docs_app/content/images/bios/crisbeto.jpg | Bin 12661 -> 0 bytes docs_app/content/images/bios/danwahlin.jpg | Bin 6124 -> 0 bytes docs_app/content/images/bios/david-east.jpg | Bin 9012 -> 0 bytes docs_app/content/images/bios/deborah.jpg | Bin 9425 -> 0 bytes docs_app/content/images/bios/devversion.jpg | Bin 12934 -> 0 bytes docs_app/content/images/bios/eladbezalel.jpg | Bin 13274 -> 0 bytes docs_app/content/images/bios/eric.jpg | Bin 7179 -> 0 bytes docs_app/content/images/bios/fatima.jpg | Bin 10598 -> 0 bytes docs_app/content/images/bios/filipbech.jpg | Bin 8765 -> 0 bytes docs_app/content/images/bios/filipe-silva.jpg | Bin 12708 -> 0 bytes docs_app/content/images/bios/gerardsans.jpg | Bin 90959 -> 0 bytes docs_app/content/images/bios/gkalpak.jpg | Bin 7458 -> 0 bytes docs_app/content/images/bios/hansl.jpg | Bin 9077 -> 0 bytes docs_app/content/images/bios/igor-minar.jpg | Bin 8917 -> 0 bytes docs_app/content/images/bios/jasonaden.jpg | Bin 11836 -> 0 bytes docs_app/content/images/bios/jbedard.jpg | Bin 10088 -> 0 bytes docs_app/content/images/bios/jecelynyeen.jpg | Bin 7242 -> 0 bytes docs_app/content/images/bios/jeff-cross.jpg | Bin 9436 -> 0 bytes docs_app/content/images/bios/jeffwhelpley.jpg | Bin 7578 -> 0 bytes docs_app/content/images/bios/jelbourn.jpg | Bin 8788 -> 0 bytes docs_app/content/images/bios/jeremywilken.jpg | Bin 7631 -> 0 bytes .../content/images/bios/jesus-rodriguez.jpg | Bin 12181 -> 0 bytes docs_app/content/images/bios/joeeames.jpg | Bin 9893 -> 0 bytes docs_app/content/images/bios/john-papa.jpg | Bin 7649 -> 0 bytes docs_app/content/images/bios/jorgeucano.jpg | Bin 7454 -> 0 bytes docs_app/content/images/bios/josue.jpg | Bin 7532 -> 0 bytes docs_app/content/images/bios/juleskremer.jpg | Bin 13637 -> 0 bytes docs_app/content/images/bios/julie-ralph.jpg | Bin 8403 -> 0 bytes .../content/images/bios/kapunahelewong.jpg | Bin 14164 -> 0 bytes .../content/images/bios/kara-erickson.jpg | Bin 10390 -> 0 bytes docs_app/content/images/bios/kathy.jpg | Bin 9276 -> 0 bytes docs_app/content/images/bios/lucas.jpg | Bin 8018 -> 0 bytes docs_app/content/images/bios/lukas.jpg | Bin 5584 -> 0 bytes docs_app/content/images/bios/marclaval.jpg | Bin 6671 -> 0 bytes docs_app/content/images/bios/marcy.jpg | Bin 8716 -> 0 bytes .../content/images/bios/martin-probst.jpg | Bin 14057 -> 0 bytes docs_app/content/images/bios/martinstaffa.jpg | Bin 7572 -> 0 bytes docs_app/content/images/bios/matias.jpg | Bin 10323 -> 0 bytes docs_app/content/images/bios/max-sills.jpg | Bin 9726 -> 0 bytes .../content/images/bios/maximsalnikov.jpg | Bin 7807 -> 0 bytes .../content/images/bios/michaelprentice.jpg | Bin 9779 -> 0 bytes docs_app/content/images/bios/michal.jpg | Bin 6628 -> 0 bytes docs_app/content/images/bios/mickey_mouse.jpg | Bin 12597 -> 0 bytes docs_app/content/images/bios/mike-brocchi.jpg | Bin 9046 -> 0 bytes docs_app/content/images/bios/mikeryan.jpg | Bin 7534 -> 0 bytes docs_app/content/images/bios/minko.jpg | Bin 6578 -> 0 bytes docs_app/content/images/bios/misko.jpg | Bin 8458 -> 0 bytes docs_app/content/images/bios/mmalerba.jpg | Bin 11652 -> 0 bytes docs_app/content/images/bios/naomi.jpg | Bin 10809 -> 0 bytes docs_app/content/images/bios/nirkaufman.jpg | Bin 35267 -> 0 bytes docs_app/content/images/bios/ocombe.jpg | Bin 9665 -> 0 bytes docs_app/content/images/bios/pascalprecht.jpg | Bin 10345 -> 0 bytes .../content/images/bios/patrick-stapleton.jpg | Bin 11267 -> 0 bytes docs_app/content/images/bios/pawel.jpg | Bin 7615 -> 0 bytes docs_app/content/images/bios/pete.jpg | Bin 11104 -> 0 bytes docs_app/content/images/bios/rado.jpg | Bin 12533 -> 0 bytes docs_app/content/images/bios/ralph.jpg | Bin 7224 -> 0 bytes docs_app/content/images/bios/raul.jpg | Bin 9115 -> 0 bytes docs_app/content/images/bios/rex.jpg | Bin 11047 -> 0 bytes docs_app/content/images/bios/rmesserle.jpg | Bin 9562 -> 0 bytes docs_app/content/images/bios/rob-wormald.jpg | Bin 7209 -> 0 bytes docs_app/content/images/bios/ryan.jpg | Bin 10354 -> 0 bytes docs_app/content/images/bios/sanderelias.jpg | Bin 9794 -> 0 bytes docs_app/content/images/bios/scott.jpg | Bin 11579 -> 0 bytes docs_app/content/images/bios/shahar.jpg | Bin 9480 -> 0 bytes docs_app/content/images/bios/shaireznik.jpg | Bin 9468 -> 0 bytes docs_app/content/images/bios/shannon.jpg | Bin 6605 -> 0 bytes .../images/bios/shield-bio-placeholder.jpg | Bin 5564 -> 0 bytes docs_app/content/images/bios/stephenfluin.jpg | Bin 8506 -> 0 bytes docs_app/content/images/bios/steyer.jpg | Bin 7056 -> 0 bytes docs_app/content/images/bios/teropa.jpg | Bin 11125 -> 0 bytes .../content/images/bios/thierrychatel.jpg | Bin 27078 -> 0 bytes docs_app/content/images/bios/thomas.jpg | Bin 8805 -> 0 bytes docs_app/content/images/bios/tobias.jpg | Bin 10629 -> 0 bytes docs_app/content/images/bios/toddmotto.jpg | Bin 8299 -> 0 bytes docs_app/content/images/bios/tonyc.jpg | Bin 7423 -> 0 bytes docs_app/content/images/bios/topherfangio.jpg | Bin 8934 -> 0 bytes .../content/images/bios/torgeirhelgevold.jpg | Bin 13680 -> 0 bytes docs_app/content/images/bios/urish.jpg | Bin 7161 -> 0 bytes docs_app/content/images/bios/victor.jpg | Bin 8132 -> 0 bytes docs_app/content/images/bios/vikram.jpg | Bin 7745 -> 0 bytes docs_app/content/images/bios/vincirufus.jpg | Bin 8198 -> 0 bytes docs_app/content/images/bios/wardbell.jpg | Bin 8983 -> 0 bytes docs_app/content/images/bios/wassim.jpg | Bin 16232 -> 0 bytes .../content/images/bios/willmendesneto.jpg | Bin 10169 -> 0 bytes docs_app/content/images/bios/xiaofei.jpg | Bin 9612 -> 0 bytes .../guide/animations/animation_auto.gif | Bin 10466 -> 0 bytes .../animations/animation_basic_click.gif | Bin 18107 -> 0 bytes .../animations/animation_enter_leave.gif | Bin 17495 -> 0 bytes .../animation_enter_leave_states.gif | Bin 55232 -> 0 bytes .../guide/animations/animation_groups.gif | Bin 72316 -> 0 bytes .../guide/animations/animation_multistep.gif | Bin 45512 -> 0 bytes .../guide/animations/animation_timings.gif | Bin 80822 -> 0 bytes ...ng_animate_transitions_inactive_active.png | Bin 18711 -> 0 bytes ...imate_transitions_inactive_active_void.png | Bin 32734 -> 0 bytes ..._transitions_inactive_active_wildcards.png | Bin 33839 -> 0 bytes .../ng_animate_transitions_void_in.png | Bin 23425 -> 0 bytes .../application-under-test/bongos-heroes.png | Bin 11563 -> 0 bytes .../images/guide/architecture/airplane.png | Bin 225355 -> 0 bytes .../architecture/compilation-context.png | Bin 48074 -> 0 bytes .../architecture/component-databinding.png | Bin 10152 -> 0 bytes .../guide/architecture/component-tree.png | Bin 30141 -> 0 bytes .../images/guide/architecture/databinding.png | Bin 16165 -> 0 bytes .../architecture/dependency-injection.png | Bin 10532 -> 0 bytes .../images/guide/architecture/directive.png | Bin 11632 -> 0 bytes .../guide/architecture/hero-component.png | Bin 9583 -> 0 bytes .../guide/architecture/injector-injects.png | Bin 17227 -> 0 bytes .../guide/architecture/library-module.png | Bin 19195 -> 0 bytes .../images/guide/architecture/metadata.png | Bin 2230 -> 0 bytes .../images/guide/architecture/module.png | Bin 14235 -> 0 bytes .../images/guide/architecture/modules.png | Bin 6791 -> 0 bytes .../images/guide/architecture/overview.png | Bin 21195 -> 0 bytes .../images/guide/architecture/overview2.png | Bin 85101 -> 0 bytes .../architecture/parent-child-binding.png | Bin 32116 -> 0 bytes .../images/guide/architecture/service.png | Bin 5931 -> 0 bytes .../template-metadata-component.png | Bin 12155 -> 0 bytes .../images/guide/architecture/template.png | Bin 7745 -> 0 bytes .../guide/architecture/view-hierarchy.png | Bin 78372 -> 0 bytes .../attribute-directives/first-highlight.png | Bin 3056 -> 0 bytes .../highlight-directive-anim.gif | Bin 74670 -> 0 bytes .../highlight-directive-final-anim.gif | Bin 499664 -> 0 bytes .../highlight-directive-v2-anim.gif | Bin 287087 -> 0 bytes .../images/guide/cli-quickstart/app-works.png | Bin 10172 -> 0 bytes .../guide/cli-quickstart/my-first-app.png | Bin 6454 -> 0 bytes .../quickstart-sourcemap-explorer.png | Bin 16283 -> 0 bytes .../bidirectional-service.gif | Bin 28013 -> 0 bytes .../component-interaction/child-to-parent.gif | Bin 18240 -> 0 bytes .../component-interaction/contentchildren.png | Bin 11352 -> 0 bytes .../countdown-timer-anim.gif | Bin 44274 -> 0 bytes .../parent-to-child-on-changes.gif | Bin 44131 -> 0 bytes .../component-interaction/parent-to-child.png | Bin 8801 -> 0 bytes .../guide/component-interaction/setter.png | Bin 11275 -> 0 bytes .../unrelated-service.gif | Bin 21830 -> 0 bytes .../dependency-injection-in-action/alex.png | Bin 12686 -> 0 bytes .../dependency-injection-in-action/alice.png | Bin 30124 -> 0 bytes .../date-logger-entry.png | Bin 6967 -> 0 bytes .../hero-bio-and-content.png | Bin 3153 -> 0 bytes .../hero-bio-contact-no-host.png | Bin 3967 -> 0 bytes .../hero-bios-and-contacts.png | Bin 9636 -> 0 bytes .../hero-bios.png | Bin 5351 -> 0 bytes .../hero-of-month.png | Bin 18131 -> 0 bytes .../highlight.png | Bin 11678 -> 0 bytes .../logged-in-user.png | Bin 3284 -> 0 bytes .../minimal-logger-intellisense.png | Bin 9598 -> 0 bytes .../sorted-heroes.png | Bin 3265 -> 0 bytes .../dependency-injection/car-components.png | Bin 2684 -> 0 bytes .../component-hierarchy.png | Bin 11219 -> 0 bytes .../dependency-injection/hid-heroes-anim.gif | Bin 130055 -> 0 bytes .../dependency-injection/injector-tree.png | Bin 12958 -> 0 bytes .../images/guide/displaying-data/final.png | Bin 5260 -> 0 bytes .../guide/displaying-data/hero-names-list.png | Bin 4774 -> 0 bytes .../guide/displaying-data/title-and-hero.png | Bin 3595 -> 0 bytes .../docs-style-guide-plunker.png | Bin 20799 -> 0 bytes .../guide/docs-style-guide/flying-hero.png | Bin 225355 -> 0 bytes .../docs-style-guide/toh-pt6-bundle-700w.png | Bin 98252 -> 0 bytes .../guide/docs-style-guide/toh-pt6-bundle.png | Bin 204871 -> 0 bytes .../guide/dynamic-component-loader/ads.gif | Bin 871000 -> 0 bytes .../guide/dynamic-form/dynamic-form.png | Bin 7389 -> 0 bytes .../images/guide/elements/createElement.png | Bin 79256 -> 0 bytes .../images/guide/elements/customElement1.png | Bin 83696 -> 0 bytes .../guide/feature-modules/feature-module.png | Bin 32645 -> 0 bytes .../Jasmine-not-running-tests.png | Bin 2491 -> 0 bytes .../passed-2-specs-0-failures.png | Bin 8149 -> 0 bytes .../test-passed-once-again.png | Bin 11415 -> 0 bytes .../images/guide/form-validation/plunker.png | Bin 21082 -> 0 bytes .../forms/control-state-transitions-anim.gif | Bin 226076 -> 0 bytes .../images/guide/forms/hero-form-1.png | Bin 7498 -> 0 bytes .../images/guide/forms/hero-form-2.png | Bin 14727 -> 0 bytes .../images/guide/forms/hero-form-3.png | Bin 10272 -> 0 bytes docs_app/content/images/guide/forms/hf-4.png | Bin 13869 -> 0 bytes docs_app/content/images/guide/forms/hf-5.png | Bin 5371 -> 0 bytes .../guide/forms/name-required-error.png | Bin 3989 -> 0 bytes .../guide/forms/ng-control-class-changes.png | Bin 41737 -> 0 bytes .../guide/forms/ng-model-in-action-2.png | Bin 13229 -> 0 bytes .../images/guide/forms/ng-model-in-action.png | Bin 6764 -> 0 bytes docs_app/content/images/guide/forms/tdf-1.png | Bin 20779 -> 0 bytes docs_app/content/images/guide/forms/tdf-2.png | Bin 23451 -> 0 bytes docs_app/content/images/guide/forms/tdf-3.png | Bin 16910 -> 0 bytes docs_app/content/images/guide/forms/tdf-4.png | Bin 20767 -> 0 bytes docs_app/content/images/guide/forms/tdf-5.png | Bin 25601 -> 0 bytes .../forms/validity-required-indicator.png | Bin 17644 -> 0 bytes .../browser-module-error.gif | Bin 21556 -> 0 bytes .../content/images/guide/http/hero-list.png | Bin 4036 -> 0 bytes .../content/images/guide/http/http-toh.gif | Bin 34409 -> 0 bytes docs_app/content/images/guide/http/wiki-1.gif | Bin 79804 -> 0 bytes docs_app/content/images/guide/http/wiki-2.gif | Bin 40325 -> 0 bytes .../content/images/guide/intro/people.png | Bin 16526 -> 0 bytes .../jasmine-1-spec-0-failures.png | Bin 8463 -> 0 bytes .../null-to-equal-undefined.png | Bin 51743 -> 0 bytes .../spec-list-2-specs-1-failure.png | Bin 4240 -> 0 bytes .../test-report-1-spec-0-failures.png | Bin 2885 -> 0 bytes .../test-report-2-specs-0-failures.png | Bin 3401 -> 0 bytes .../test-report-2-specs-1-failure.png | Bin 9796 -> 0 bytes .../language-service/language-completion.gif | Bin 134813 -> 0 bytes .../guide/language-service/language-error.gif | Bin 280904 -> 0 bytes .../language-service/language-navigation.gif | Bin 877954 -> 0 bytes .../lazy-loading-ngmodules/chunk-arrow.png | Bin 91165 -> 0 bytes .../guide/lazy-loading-ngmodules/chunk.png | Bin 147119 -> 0 bytes .../guide/lazy-loading-ngmodules/clear.gif | Bin 15720 -> 0 bytes .../guide/lazy-loading-ngmodules/clear.png | Bin 18478 -> 0 bytes .../lazy-load-relationship.jpg | Bin 78845 -> 0 bytes .../lazy-loading-ngmodules/network-tab.png | Bin 135861 -> 0 bytes .../lazy-loading-ngmodules/three-buttons.png | Bin 29775 -> 0 bytes .../guide/lifecycle-hooks/after-view-anim.gif | Bin 220724 -> 0 bytes .../guide/lifecycle-hooks/do-check-anim.gif | Bin 195114 -> 0 bytes .../guide/lifecycle-hooks/on-changes-anim.gif | Bin 98813 -> 0 bytes .../guide/lifecycle-hooks/peek-a-boo.gif | Bin 84694 -> 0 bytes .../guide/lifecycle-hooks/peek-a-boo.png | Bin 32371 -> 0 bytes .../lifecycle-hooks/projected-child-view.png | Bin 6682 -> 0 bytes .../guide/lifecycle-hooks/spy-directive.gif | Bin 90898 -> 0 bytes .../guide/ngcontainer/hero-traits-bad.png | Bin 1787 -> 0 bytes .../guide/ngcontainer/hero-traits-good.png | Bin 1881 -> 0 bytes .../guide/ngmodule/contact-1b-plunker.png | Bin 33226 -> 0 bytes .../guide/ngmodule/contact-2-plunker.png | Bin 23401 -> 0 bytes .../images/guide/ngmodule/final-plunker.png | Bin 22813 -> 0 bytes .../images/guide/ngmodule/minimal-plunker.png | Bin 20163 -> 0 bytes .../images/guide/ngmodule/v3-plunker.png | Bin 25574 -> 0 bytes .../guide/pipes/date-format-toggle-anim.gif | Bin 12118 -> 0 bytes .../images/guide/pipes/flying-heroes-anim.gif | Bin 54064 -> 0 bytes .../content/images/guide/pipes/hero-list.png | Bin 19223 -> 0 bytes .../pipes/power-boost-calculator-anim.gif | Bin 54689 -> 0 bytes .../guide/pipes/power-boost-calculator.png | Bin 11835 -> 0 bytes .../images/guide/pipes/power-booster.png | Bin 7290 -> 0 bytes .../images/guide/quickstart/hello-angular.png | Bin 2078 -> 0 bytes .../images/guide/quickstart/my-first-app.png | Bin 10061 -> 0 bytes .../guide/quickstart/quickstart-plnkr-big.png | Bin 20869 -> 0 bytes .../guide/quickstart/quickstart-plnkr.png | Bin 14674 -> 0 bytes .../guide/reactive-forms/address-group.png | Bin 6022 -> 0 bytes .../guide/reactive-forms/addresses-array.png | Bin 4692 -> 0 bytes .../guide/reactive-forms/hero-detail.png | Bin 4608 -> 0 bytes .../images/guide/reactive-forms/hero-list.png | Bin 5950 -> 0 bytes .../guide/reactive-forms/json-output.png | Bin 14427 -> 0 bytes .../guide/reactive-forms/just-formcontrol.png | Bin 8732 -> 0 bytes .../reactive-forms/save-revert-buttons.png | Bin 7023 -> 0 bytes .../reactive-forms/validators-json-output.png | Bin 24228 -> 0 bytes .../images/guide/router/component-tree.png | Bin 4394 -> 0 bytes .../images/guide/router/confirm-dialog.png | Bin 6466 -> 0 bytes .../images/guide/router/contact-popup.png | Bin 12888 -> 0 bytes .../guide/router/crisis-center-detail.png | Bin 27857 -> 0 bytes .../guide/router/crisis-center-list.png | Bin 22239 -> 0 bytes .../images/guide/router/hero-detail.png | Bin 9717 -> 0 bytes .../content/images/guide/router/hero-list.png | Bin 13775 -> 0 bytes .../images/guide/router/router-1-anim.gif | Bin 9971 -> 0 bytes .../images/guide/router/router-2-anim.gif | Bin 76833 -> 0 bytes .../images/guide/router/selected-crisis.png | Bin 8541 -> 0 bytes .../images/guide/router/selected-hero.png | Bin 4482 -> 0 bytes .../images/guide/router/shell-and-outlet.png | Bin 13133 -> 0 bytes .../guide/security/binding-inner-html.png | Bin 2401 -> 0 bytes .../security/bypass-security-component.png | Bin 7542 -> 0 bytes .../guide/service-worker/offline-checkbox.png | Bin 31623 -> 0 bytes .../images/guide/service-worker/sw-active.png | Bin 44890 -> 0 bytes .../guide/service-worker/welcome-msg-en.png | Bin 31035 -> 0 bytes .../guide/service-worker/welcome-msg-fr.png | Bin 28247 -> 0 bytes .../set-document-title/set-title-anim.gif | Bin 42842 -> 0 bytes .../structural-directives/bad-paragraph.png | Bin 2669 -> 0 bytes .../structural-directives/bad-select.png | Bin 2088 -> 0 bytes .../element-display-in-dom.png | Bin 6721 -> 0 bytes .../element-not-in-dom.png | Bin 4781 -> 0 bytes .../structural-directives/good-paragraph.png | Bin 2524 -> 0 bytes .../structural-directives/hero-div-in-dom.png | Bin 3537 -> 0 bytes .../select-ngcontainer-anim.gif | Bin 34430 -> 0 bytes .../template-rendering.png | Bin 5235 -> 0 bytes .../structural-directives/unless-anim.gif | Bin 17872 -> 0 bytes .../images/guide/styleguide/use-extension.gif | Bin 295479 -> 0 bytes .../guide/template-syntax/evil-title.png | Bin 8504 -> 0 bytes .../guide/template-syntax/input-output.png | Bin 8302 -> 0 bytes .../template-syntax/ng-for-track-by-anim.gif | Bin 120666 -> 0 bytes .../guide/template-syntax/ng-model-anim.gif | Bin 163868 -> 0 bytes .../guide/template-syntax/switch-anim.gif | Bin 76823 -> 0 bytes .../5-specs-0-failures.png | Bin 11764 -> 0 bytes .../big-time-fail-screen.png | Bin 1279 -> 0 bytes .../testing-an-angular-pipe/two-failures.png | Bin 1992 -> 0 bytes .../testing-an-angular-pipe/zero-failures.png | Bin 2923 -> 0 bytes .../images/guide/testing/app-plunker.png | Bin 20815 -> 0 bytes .../guide/testing/app-specs-plunker.png | Bin 26860 -> 0 bytes .../guide/testing/hero-detail.component.png | Bin 2746 -> 0 bytes .../testing/highlight-directive-spec.png | Bin 9874 -> 0 bytes .../testing/initial-jasmine-html-reporter.png | Bin 17717 -> 0 bytes .../guide/testing/karma-1st-spec-debug.png | Bin 42775 -> 0 bytes .../guide/testing/karma-1st-spec-output.png | Bin 22615 -> 0 bytes .../images/guide/testing/karma-browser.png | Bin 13706 -> 0 bytes .../images/guide/toh/dashboard-top-heroes.png | Bin 15383 -> 0 bytes .../images/guide/toh/hero-details-1.png | Bin 12991 -> 0 bytes .../guide/toh/hero-details-save-button.png | Bin 7704 -> 0 bytes .../images/guide/toh/heroes-dashboard-1.png | Bin 14460 -> 0 bytes .../images/guide/toh/heroes-list-1.png | Bin 23111 -> 0 bytes .../images/guide/toh/heroes-list-2.png | Bin 24342 -> 0 bytes .../guide/toh/heroes-list-delete-button.png | Bin 7257 -> 0 bytes .../images/guide/toh/heroes-list-selected.png | Bin 6154 -> 0 bytes .../content/images/guide/toh/nav-diagram.png | Bin 38982 -> 0 bytes .../content/images/guide/toh/toh-anim.gif | Bin 274826 -> 0 bytes .../images/guide/toh/toh-hero-search.png | Bin 4441 -> 0 bytes .../images/guide/toh/toh-http.anim.gif | Bin 128263 -> 0 bytes .../images/guide/unit-testing/spectrum.png | Bin 30822 -> 0 bytes .../upgrade/a-to-ajs-with-transclusion.png | Bin 4484 -> 0 bytes .../content/images/guide/upgrade/a-to-ajs.png | Bin 3474 -> 0 bytes .../upgrade/ajs-to-a-with-projection.png | Bin 4667 -> 0 bytes .../content/images/guide/upgrade/ajs-to-a.png | Bin 3497 -> 0 bytes .../images/guide/upgrade/change_detection.png | Bin 15369 -> 0 bytes docs_app/content/images/guide/upgrade/dom.png | Bin 17282 -> 0 bytes .../images/guide/upgrade/injectors-2.png | Bin 12187 -> 0 bytes .../images/guide/upgrade/injectors.png | Bin 28061 -> 0 bytes .../guide/user-input/keyup-loop-back-anim.gif | Bin 15276 -> 0 bytes .../images/guide/user-input/keyup1-anim.gif | Bin 5899 -> 0 bytes .../images/guide/user-input/keyup3-anim.gif | Bin 49179 -> 0 bytes .../guide/user-input/little-tour-anim.gif | Bin 68327 -> 0 bytes .../images/guide/user-input/little-tour.png | Bin 9378 -> 0 bytes .../marketing/features/feature-icon.svg | 1 - .../images/marketing/home/code-icon.svg | 1 - .../marketing/home/joyful-development.svg | 73 - .../marketing/home/loved-by-millions.svg | 571 -- .../marketing/home/responsive-framework.svg | 169 - .../marketing/home/speed-performance.svg | 279 - .../images/stackblitz/unused/click-to-run.png | Bin 4165 -> 0 bytes docs_app/content/marketing/about.html | 8 - docs_app/content/marketing/announcements.json | 9 - docs_app/content/marketing/contribute.html | 34 - docs_app/content/marketing/docs.md | 50 - docs_app/content/marketing/events.html | 66 - docs_app/content/marketing/features.html | 114 - docs_app/content/marketing/presskit.html | 195 - .../marketing/resources-contributing.md | 13 - docs_app/content/marketing/resources.html | 7 - docs_app/content/marketing/resources.json | 700 --- docs_app/content/marketing/team.html | 1 - docs_app/content/marketing/test.html | 122 - docs_app/content/tutorial/index.md | 70 - docs_app/content/tutorial/toh-pt0.md | 117 - docs_app/content/tutorial/toh-pt1.md | 256 - docs_app/content/tutorial/toh-pt2.md | 256 - docs_app/content/tutorial/toh-pt3.md | 157 - docs_app/content/tutorial/toh-pt4.md | 453 -- docs_app/content/tutorial/toh-pt5.md | 615 -- docs_app/content/tutorial/toh-pt6.md | 655 --- .../angular-content-package/index.js | 51 +- docs_app/tools/transforms/config.js | 3 +- 2001 files changed, 4 insertions(+), 94875 deletions(-) delete mode 100644 docs_app/content/examples/.DS_Store delete mode 100644 docs_app/content/examples/.gitignore delete mode 100644 docs_app/content/examples/ajs-quick-reference/.angular-cli.1.json delete mode 100644 docs_app/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/example-config.json delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app.component.css delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app.component.html delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app.component.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app.module.1.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/app.module.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/date.pipe.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.css delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.html delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/movie.service.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/app/movie.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/assets/images/hero.png delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/assets/images/villain.png delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/index.html delete mode 100644 docs_app/content/examples/ajs-quick-reference/src/main.ts delete mode 100644 docs_app/content/examples/ajs-quick-reference/stackblitz.json delete mode 100644 docs_app/content/examples/animations/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/animations/example-config.json delete mode 100644 docs_app/content/examples/animations/src/app/app.module.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-auto.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-basic.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-combined-transitions.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-enter-leave.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-groups.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-inline-styles.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-multistep.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-timings.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list-twoway.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero-list.component.css delete mode 100644 docs_app/content/examples/animations/src/app/hero-team-builder.component.ts delete mode 100644 docs_app/content/examples/animations/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/animations/src/index.html delete mode 100644 docs_app/content/examples/animations/src/main.ts delete mode 100644 docs_app/content/examples/animations/stackblitz.json delete mode 100644 docs_app/content/examples/architecture/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/architecture/example-config.json delete mode 100644 docs_app/content/examples/architecture/src/app/app.component.ts delete mode 100644 docs_app/content/examples/architecture/src/app/app.module.ts delete mode 100644 docs_app/content/examples/architecture/src/app/backend.service.ts delete mode 100644 docs_app/content/examples/architecture/src/app/hero-detail.component.html delete mode 100644 docs_app/content/examples/architecture/src/app/hero-detail.component.ts delete mode 100644 docs_app/content/examples/architecture/src/app/hero-list.component.1.html delete mode 100644 docs_app/content/examples/architecture/src/app/hero-list.component.html delete mode 100644 docs_app/content/examples/architecture/src/app/hero-list.component.ts delete mode 100644 docs_app/content/examples/architecture/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/architecture/src/app/hero.ts delete mode 100644 docs_app/content/examples/architecture/src/app/logger.service.ts delete mode 100644 docs_app/content/examples/architecture/src/app/mini-app.ts delete mode 100644 docs_app/content/examples/architecture/src/app/sales-tax.component.ts delete mode 100644 docs_app/content/examples/architecture/src/app/sales-tax.service.ts delete mode 100644 docs_app/content/examples/architecture/src/app/tax-rate.service.ts delete mode 100644 docs_app/content/examples/architecture/src/index.html delete mode 100644 docs_app/content/examples/architecture/src/main.ts delete mode 100644 docs_app/content/examples/architecture/stackblitz.json delete mode 100644 docs_app/content/examples/attribute-directives/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/attribute-directives/example-config.json delete mode 100644 docs_app/content/examples/attribute-directives/src/app/app.component.1.html delete mode 100644 docs_app/content/examples/attribute-directives/src/app/app.component.1.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/app.component.html delete mode 100644 docs_app/content/examples/attribute-directives/src/app/app.component.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/app.module.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/dummy.module.1.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/highlight.directive.0.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/highlight.directive.1.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/highlight.directive.2.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/highlight.directive.3.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/app/highlight.directive.ts delete mode 100644 docs_app/content/examples/attribute-directives/src/index.html delete mode 100644 docs_app/content/examples/attribute-directives/src/main.ts delete mode 100644 docs_app/content/examples/attribute-directives/stackblitz.json delete mode 100644 docs_app/content/examples/bootstrapping/bs-config.1.json delete mode 100644 docs_app/content/examples/bootstrapping/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/bootstrapping/example-config.json delete mode 100644 docs_app/content/examples/bootstrapping/src/app/app.component.css delete mode 100644 docs_app/content/examples/bootstrapping/src/app/app.component.html delete mode 100644 docs_app/content/examples/bootstrapping/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/bootstrapping/src/app/app.component.ts delete mode 100644 docs_app/content/examples/bootstrapping/src/app/app.module.ts delete mode 100644 docs_app/content/examples/bootstrapping/src/app/item.directive.spec.ts delete mode 100644 docs_app/content/examples/bootstrapping/src/app/item.directive.ts delete mode 100644 docs_app/content/examples/bootstrapping/src/index.html delete mode 100644 docs_app/content/examples/bootstrapping/src/main.ts delete mode 100644 docs_app/content/examples/bootstrapping/stackblitz.json delete mode 100644 docs_app/content/examples/cli-quickstart/README.md delete mode 100644 docs_app/content/examples/cli-quickstart/bs-config.cli.json delete mode 100644 docs_app/content/examples/cli-quickstart/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/cli-quickstart/example-config.json delete mode 100644 docs_app/content/examples/cli-quickstart/src/app/app.component.css delete mode 100644 docs_app/content/examples/cli-quickstart/src/app/app.component.html delete mode 100644 docs_app/content/examples/cli-quickstart/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/cli-quickstart/src/app/app.component.ts delete mode 100644 docs_app/content/examples/cli-quickstart/src/app/app.module.ts delete mode 100644 docs_app/content/examples/cli-quickstart/src/index.html delete mode 100644 docs_app/content/examples/cli-quickstart/src/main.ts delete mode 100644 docs_app/content/examples/cli-quickstart/zipper.json delete mode 100644 docs_app/content/examples/component-interaction/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/component-interaction/example-config.json delete mode 100644 docs_app/content/examples/component-interaction/src/app/app.component.html delete mode 100644 docs_app/content/examples/component-interaction/src/app/app.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/app.module.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/astronaut.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/countdown-parent.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/countdown-timer.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/hero-child.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/hero-parent.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/hero.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/mission.service.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/missioncontrol.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/name-child.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/name-parent.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/version-child.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/version-parent.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/voter.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/app/votetaker.component.ts delete mode 100644 docs_app/content/examples/component-interaction/src/assets/demo.css delete mode 100644 docs_app/content/examples/component-interaction/src/index.html delete mode 100644 docs_app/content/examples/component-interaction/src/main.ts delete mode 100644 docs_app/content/examples/component-interaction/stackblitz.json delete mode 100644 docs_app/content/examples/component-styles/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/component-styles/example-config.json delete mode 100644 docs_app/content/examples/component-styles/src/app/app.module.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-app-main.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-app.component.1.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-app.component.css delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-app.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-controls.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-details-box.css delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-details.component.css delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-details.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero-team.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/hero.ts delete mode 100644 docs_app/content/examples/component-styles/src/app/quest-summary.component.css delete mode 100644 docs_app/content/examples/component-styles/src/app/quest-summary.component.html delete mode 100644 docs_app/content/examples/component-styles/src/app/quest-summary.component.ts delete mode 100644 docs_app/content/examples/component-styles/src/assets/hero-team.component.css delete mode 100644 docs_app/content/examples/component-styles/src/index.html delete mode 100644 docs_app/content/examples/component-styles/src/main.ts delete mode 100644 docs_app/content/examples/component-styles/stackblitz.json delete mode 100644 docs_app/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/example-config.json delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/app.component.html delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/app.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/app.module.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-data.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/hero.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/logger.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/runners-up.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/index.html delete mode 100644 docs_app/content/examples/dependency-injection-in-action/src/main.ts delete mode 100644 docs_app/content/examples/dependency-injection-in-action/stackblitz.json delete mode 100644 docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/dependency-injection/example-config.json delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app-config.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app.component.1.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app.component.2.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app.config.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/app.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/car/car.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/dummy.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/injector.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/logger.service.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/providers.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/providers.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/test.component.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/app/user.service.ts delete mode 100644 docs_app/content/examples/dependency-injection/src/index.html delete mode 100644 docs_app/content/examples/dependency-injection/src/main.ts delete mode 100644 docs_app/content/examples/dependency-injection/stackblitz.json delete mode 100644 docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/displaying-data/example-config.json delete mode 100644 docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/app.component.1.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/app.component.2.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/app.component.3.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/app.component.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/app.module.ts delete mode 100644 docs_app/content/examples/displaying-data/src/app/hero.ts delete mode 100644 docs_app/content/examples/displaying-data/src/index.html delete mode 100644 docs_app/content/examples/displaying-data/src/main.ts delete mode 100644 docs_app/content/examples/displaying-data/stackblitz.json delete mode 100644 docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/docs-style-guide/example-config.json delete mode 100644 docs_app/content/examples/docs-style-guide/package.1.json delete mode 100644 docs_app/content/examples/docs-style-guide/second.stackblitz.json delete mode 100644 docs_app/content/examples/docs-style-guide/src/app/app.component.css delete mode 100644 docs_app/content/examples/docs-style-guide/src/app/app.component.html delete mode 100644 docs_app/content/examples/docs-style-guide/src/app/app.component.ts delete mode 100644 docs_app/content/examples/docs-style-guide/src/app/app.module.ts delete mode 100644 docs_app/content/examples/docs-style-guide/src/app/hero.ts delete mode 100644 docs_app/content/examples/docs-style-guide/src/index.2.html delete mode 100644 docs_app/content/examples/docs-style-guide/src/index.html delete mode 100644 docs_app/content/examples/docs-style-guide/src/main.ts delete mode 100644 docs_app/content/examples/docs-style-guide/stackblitz.json delete mode 100644 docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/example-config.json delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/assets/sample.css delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/index.html delete mode 100644 docs_app/content/examples/dynamic-component-loader/src/main.ts delete mode 100644 docs_app/content/examples/dynamic-component-loader/stackblitz.json delete mode 100644 docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/dynamic-form/example-config.json delete mode 100644 docs_app/content/examples/dynamic-form/src/app/app.component.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/app.module.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html delete mode 100644 docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html delete mode 100644 docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/question-base.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/question-control.service.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/question-textbox.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/app/question.service.ts delete mode 100644 docs_app/content/examples/dynamic-form/src/assets/sample.css delete mode 100644 docs_app/content/examples/dynamic-form/src/index.html delete mode 100644 docs_app/content/examples/dynamic-form/src/main.ts delete mode 100644 docs_app/content/examples/dynamic-form/stackblitz.json delete mode 100644 docs_app/content/examples/elements/src/app/app.component.ts delete mode 100644 docs_app/content/examples/elements/src/app/app.module.ts delete mode 100644 docs_app/content/examples/elements/src/app/popup.component.ts delete mode 100644 docs_app/content/examples/elements/src/app/popup.service.ts delete mode 100644 docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/feature-modules/example-config.json delete mode 100644 docs_app/content/examples/feature-modules/src/app/app.component.css delete mode 100644 docs_app/content/examples/feature-modules/src/app/app.component.html delete mode 100644 docs_app/content/examples/feature-modules/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/feature-modules/src/app/app.component.ts delete mode 100644 docs_app/content/examples/feature-modules/src/app/app.module.ts delete mode 100644 docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts delete mode 100644 docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css delete mode 100644 docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html delete mode 100644 docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts delete mode 100644 docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts delete mode 100644 docs_app/content/examples/feature-modules/src/index.html delete mode 100644 docs_app/content/examples/feature-modules/src/main.ts delete mode 100644 docs_app/content/examples/feature-modules/stackblitz.json delete mode 100644 docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/form-validation/example-config.json delete mode 100644 docs_app/content/examples/form-validation/src/app/app.component.ts delete mode 100644 docs_app/content/examples/form-validation/src/app/app.module.ts delete mode 100644 docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html delete mode 100644 docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts delete mode 100644 docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts delete mode 100644 docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html delete mode 100644 docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts delete mode 100644 docs_app/content/examples/form-validation/src/assets/forms.css delete mode 100644 docs_app/content/examples/form-validation/src/index.html delete mode 100644 docs_app/content/examples/form-validation/src/main.ts delete mode 100644 docs_app/content/examples/form-validation/stackblitz.json delete mode 100644 docs_app/content/examples/forms/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/forms/example-config.json delete mode 100644 docs_app/content/examples/forms/src/app/app.component.css delete mode 100644 docs_app/content/examples/forms/src/app/app.component.html delete mode 100644 docs_app/content/examples/forms/src/app/app.component.ts delete mode 100644 docs_app/content/examples/forms/src/app/app.module.ts delete mode 100644 docs_app/content/examples/forms/src/app/hero-form/hero-form.component.css delete mode 100644 docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html delete mode 100644 docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts delete mode 100644 docs_app/content/examples/forms/src/app/hero.ts delete mode 100644 docs_app/content/examples/forms/src/assets/forms.css delete mode 100644 docs_app/content/examples/forms/src/index.html delete mode 100644 docs_app/content/examples/forms/src/main.ts delete mode 100644 docs_app/content/examples/forms/src/styles.1.css delete mode 100644 docs_app/content/examples/forms/stackblitz.json delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/example-config.json delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/index.html delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/src/main.ts delete mode 100644 docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json delete mode 100644 docs_app/content/examples/http/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/http/example-config.json delete mode 100644 docs_app/content/examples/http/specs.stackblitz.json delete mode 100644 docs_app/content/examples/http/src/app/app.component.html delete mode 100644 docs_app/content/examples/http/src/app/app.component.ts delete mode 100644 docs_app/content/examples/http/src/app/app.module.ts delete mode 100644 docs_app/content/examples/http/src/app/auth.service.ts delete mode 100644 docs_app/content/examples/http/src/app/config/config.component.html delete mode 100644 docs_app/content/examples/http/src/app/config/config.component.ts delete mode 100644 docs_app/content/examples/http/src/app/config/config.service.ts delete mode 100644 docs_app/content/examples/http/src/app/downloader/downloader.component.html delete mode 100644 docs_app/content/examples/http/src/app/downloader/downloader.component.ts delete mode 100644 docs_app/content/examples/http/src/app/downloader/downloader.service.ts delete mode 100644 docs_app/content/examples/http/src/app/heroes/hero.ts delete mode 100644 docs_app/content/examples/http/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/http/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/http/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts delete mode 100644 docs_app/content/examples/http/src/app/heroes/heroes.service.ts delete mode 100644 docs_app/content/examples/http/src/app/http-error-handler.service.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/index.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts delete mode 100644 docs_app/content/examples/http/src/app/in-memory-data.service.ts delete mode 100644 docs_app/content/examples/http/src/app/message.service.ts delete mode 100644 docs_app/content/examples/http/src/app/messages/messages.component.html delete mode 100644 docs_app/content/examples/http/src/app/messages/messages.component.ts delete mode 100644 docs_app/content/examples/http/src/app/package-search/package-search.component.html delete mode 100644 docs_app/content/examples/http/src/app/package-search/package-search.component.ts delete mode 100644 docs_app/content/examples/http/src/app/package-search/package-search.service.ts delete mode 100644 docs_app/content/examples/http/src/app/request-cache.service.ts delete mode 100644 docs_app/content/examples/http/src/app/uploader/uploader.component.html delete mode 100644 docs_app/content/examples/http/src/app/uploader/uploader.component.ts delete mode 100644 docs_app/content/examples/http/src/app/uploader/uploader.service.ts delete mode 100644 docs_app/content/examples/http/src/assets/config.json delete mode 100644 docs_app/content/examples/http/src/assets/textfile.txt delete mode 100644 docs_app/content/examples/http/src/index-specs.html delete mode 100644 docs_app/content/examples/http/src/index.html delete mode 100644 docs_app/content/examples/http/src/main-specs.ts delete mode 100644 docs_app/content/examples/http/src/main.ts delete mode 100644 docs_app/content/examples/http/src/test.css delete mode 100644 docs_app/content/examples/http/src/testing/global-jasmine.ts delete mode 100644 docs_app/content/examples/http/src/testing/http-client.spec.ts delete mode 100644 docs_app/content/examples/http/stackblitz.json delete mode 100644 docs_app/content/examples/i18n/doc-files/app.component.html delete mode 100644 docs_app/content/examples/i18n/doc-files/app.locale_data.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/app.module.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/main.1.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/main.2.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/main.3.ts delete mode 100644 docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html delete mode 100644 docs_app/content/examples/i18n/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/i18n/example-config.json delete mode 100644 docs_app/content/examples/i18n/src/app/app.component.html delete mode 100644 docs_app/content/examples/i18n/src/app/app.component.ts delete mode 100644 docs_app/content/examples/i18n/src/app/app.module.ts delete mode 100644 docs_app/content/examples/i18n/src/index.html delete mode 100644 docs_app/content/examples/i18n/src/locale/messages.fr.xlf delete mode 100644 docs_app/content/examples/i18n/src/locale/messages.xlf delete mode 100644 docs_app/content/examples/i18n/src/main.ts delete mode 100644 docs_app/content/examples/i18n/zipper.json delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/example-config.json delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.css delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/index.html delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/src/main.ts delete mode 100644 docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json delete mode 100644 docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/example-config.json delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/app.component.html delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/assets/sample.css delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/index.html delete mode 100644 docs_app/content/examples/lifecycle-hooks/src/main.ts delete mode 100644 docs_app/content/examples/lifecycle-hooks/stackblitz.json delete mode 100644 docs_app/content/examples/ngcontainer/example-config.json delete mode 100644 docs_app/content/examples/ngcontainer/src/app/app.component.css delete mode 100644 docs_app/content/examples/ngcontainer/src/app/app.component.html delete mode 100644 docs_app/content/examples/ngcontainer/src/app/app.component.ts delete mode 100644 docs_app/content/examples/ngcontainer/src/app/app.module.ts delete mode 100644 docs_app/content/examples/ngcontainer/src/app/content.component.ts delete mode 100644 docs_app/content/examples/ngcontainer/src/app/hero.components.ts delete mode 100644 docs_app/content/examples/ngcontainer/src/app/hero.ts delete mode 100644 docs_app/content/examples/ngcontainer/src/index.html delete mode 100644 docs_app/content/examples/ngcontainer/src/main.ts delete mode 100644 docs_app/content/examples/ngcontainer/stackblitz.json delete mode 100644 docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json delete mode 100644 docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json delete mode 100644 docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/example-config.json delete mode 100644 docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json delete mode 100644 docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/app.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/title.component.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/title.component.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/app/user.service.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.0.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.1.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.1b.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.2.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.3.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/index.html delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main-static.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.0.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.1.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.1b.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.2.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.3.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/src/main.ts delete mode 100644 docs_app/content/examples/ngmodule-faq/stackblitz.json delete mode 100644 docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/ngmodules/example-config.json delete mode 100644 docs_app/content/examples/ngmodules/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/app.component.css delete mode 100644 docs_app/content/examples/ngmodules/src/app/app.component.html delete mode 100644 docs_app/content/examples/ngmodules/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/app.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/app.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.component.css delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.component.html delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/core/core.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/core/title.component.html delete mode 100644 docs_app/content/examples/ngmodules/src/app/core/title.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/core/user.service.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.component.css delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.component.html delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.component.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/items/items.service.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts delete mode 100644 docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts delete mode 100644 docs_app/content/examples/ngmodules/src/index.html delete mode 100644 docs_app/content/examples/ngmodules/src/main.ts delete mode 100644 docs_app/content/examples/ngmodules/stackblitz.json delete mode 100644 docs_app/content/examples/observables-in-angular/example-config.json delete mode 100644 docs_app/content/examples/observables-in-angular/src/main.ts delete mode 100644 docs_app/content/examples/observables/example-config.json delete mode 100644 docs_app/content/examples/observables/src/creating.ts delete mode 100644 docs_app/content/examples/observables/src/geolocation.ts delete mode 100644 docs_app/content/examples/observables/src/main.ts delete mode 100644 docs_app/content/examples/observables/src/multicasting.ts delete mode 100644 docs_app/content/examples/observables/src/subscribing.ts delete mode 100644 docs_app/content/examples/pipes/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/pipes/example-config.json delete mode 100644 docs_app/content/examples/pipes/src/app/app.component.html delete mode 100644 docs_app/content/examples/pipes/src/app/app.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/app.module.ts delete mode 100644 docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts delete mode 100644 docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts delete mode 100644 docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html delete mode 100644 docs_app/content/examples/pipes/src/app/flying-heroes.component.html delete mode 100644 docs_app/content/examples/pipes/src/app/flying-heroes.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts delete mode 100644 docs_app/content/examples/pipes/src/app/hero-async-message.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/hero-list.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/heroes.ts delete mode 100644 docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts delete mode 100644 docs_app/content/examples/pipes/src/app/power-booster.component.ts delete mode 100644 docs_app/content/examples/pipes/src/assets/heroes.json delete mode 100644 docs_app/content/examples/pipes/src/index.html delete mode 100644 docs_app/content/examples/pipes/src/main.ts delete mode 100644 docs_app/content/examples/pipes/stackblitz.json delete mode 100644 docs_app/content/examples/practical-observable-usage/example-config.json delete mode 100644 docs_app/content/examples/practical-observable-usage/src/backoff.ts delete mode 100644 docs_app/content/examples/practical-observable-usage/src/main.ts delete mode 100644 docs_app/content/examples/practical-observable-usage/src/typeahead.ts delete mode 100644 docs_app/content/examples/providers/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/providers/example-config.json delete mode 100644 docs_app/content/examples/providers/src/app/app.component.css delete mode 100644 docs_app/content/examples/providers/src/app/app.component.html delete mode 100644 docs_app/content/examples/providers/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/providers/src/app/app.component.ts delete mode 100644 docs_app/content/examples/providers/src/app/app.module.ts delete mode 100644 docs_app/content/examples/providers/src/app/user.module.ts delete mode 100644 docs_app/content/examples/providers/src/app/user.service.0.ts delete mode 100644 docs_app/content/examples/providers/src/app/user.service.1.ts delete mode 100644 docs_app/content/examples/providers/src/app/user.service.spec.ts delete mode 100644 docs_app/content/examples/providers/src/app/user.service.ts delete mode 100644 docs_app/content/examples/providers/src/index.html delete mode 100644 docs_app/content/examples/providers/src/main.ts delete mode 100644 docs_app/content/examples/providers/stackblitz.json delete mode 100644 docs_app/content/examples/quickstart/bs-config.1.json delete mode 100644 docs_app/content/examples/quickstart/e2e-spec.ts delete mode 100644 docs_app/content/examples/quickstart/example-config.json delete mode 100644 docs_app/content/examples/quickstart/src/app/app.component.ts delete mode 100644 docs_app/content/examples/quickstart/src/app/app.module.ts delete mode 100644 docs_app/content/examples/quickstart/src/index.html delete mode 100644 docs_app/content/examples/quickstart/src/main.ts delete mode 100644 docs_app/content/examples/quickstart/src/tsconfig.1.json delete mode 100644 docs_app/content/examples/quickstart/stackblitz.json delete mode 100644 docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/reactive-forms/example-config.json delete mode 100644 docs_app/content/examples/reactive-forms/final.stackblitz.json delete mode 100644 docs_app/content/examples/reactive-forms/src/app/app.component.1.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/app.component.css delete mode 100644 docs_app/content/examples/reactive-forms/src/app/app.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/app.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/app.module.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/data-model.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/demo.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/demo.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/demo.module.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.css delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/index-final.html delete mode 100644 docs_app/content/examples/reactive-forms/src/index.html delete mode 100644 docs_app/content/examples/reactive-forms/src/main-final.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/main.ts delete mode 100644 docs_app/content/examples/reactive-forms/src/styles.1.css delete mode 100644 docs_app/content/examples/reactive-forms/stackblitz.json delete mode 100644 docs_app/content/examples/router/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/router/example-config.json delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin-routing.module.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin.component.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/admin.module.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/manage-crises.component.ts delete mode 100644 docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts delete mode 100644 docs_app/content/examples/router/src/app/animations.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.2.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.3.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.4.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.5.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.6.ts delete mode 100644 docs_app/content/examples/router/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.2.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.3.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.4.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.5.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.6.ts delete mode 100644 docs_app/content/examples/router/src/app/app.component.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.0.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.2.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.3.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.4.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.5.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.6.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.7.ts delete mode 100644 docs_app/content/examples/router/src/app/app.module.ts delete mode 100644 docs_app/content/examples/router/src/app/auth-guard.service.1.ts delete mode 100644 docs_app/content/examples/router/src/app/auth-guard.service.2.ts delete mode 100644 docs_app/content/examples/router/src/app/auth-guard.service.3.ts delete mode 100644 docs_app/content/examples/router/src/app/auth-guard.service.4.ts delete mode 100644 docs_app/content/examples/router/src/app/auth-guard.service.ts delete mode 100644 docs_app/content/examples/router/src/app/auth.service.ts delete mode 100644 docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts delete mode 100644 docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts delete mode 100644 docs_app/content/examples/router/src/app/compose-message.component.html delete mode 100644 docs_app/content/examples/router/src/app/compose-message.component.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts delete mode 100644 docs_app/content/examples/router/src/app/crisis-list.component.ts delete mode 100644 docs_app/content/examples/router/src/app/dialog.service.ts delete mode 100644 docs_app/content/examples/router/src/app/hero-list.component.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero-list.component.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/hero.service.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts delete mode 100644 docs_app/content/examples/router/src/app/heroes/heroes.module.ts delete mode 100644 docs_app/content/examples/router/src/app/login-routing.module.ts delete mode 100644 docs_app/content/examples/router/src/app/login.component.1.ts delete mode 100644 docs_app/content/examples/router/src/app/login.component.ts delete mode 100644 docs_app/content/examples/router/src/app/not-found.component.ts delete mode 100644 docs_app/content/examples/router/src/app/selective-preloading-strategy.ts delete mode 100644 docs_app/content/examples/router/src/assets/app.css delete mode 100644 docs_app/content/examples/router/src/index.html delete mode 100644 docs_app/content/examples/router/src/main.ts delete mode 100644 docs_app/content/examples/router/stackblitz.json delete mode 100644 docs_app/content/examples/rx-library/example-config.json delete mode 100644 docs_app/content/examples/rx-library/src/error-handling.ts delete mode 100644 docs_app/content/examples/rx-library/src/main.ts delete mode 100644 docs_app/content/examples/rx-library/src/naming-convention.ts delete mode 100644 docs_app/content/examples/rx-library/src/operators.1.ts delete mode 100644 docs_app/content/examples/rx-library/src/operators.2.ts delete mode 100644 docs_app/content/examples/rx-library/src/operators.ts delete mode 100644 docs_app/content/examples/rx-library/src/retry-on-error.ts delete mode 100644 docs_app/content/examples/rx-library/src/simple-creation.ts delete mode 100644 docs_app/content/examples/security/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/security/example-config.json delete mode 100644 docs_app/content/examples/security/src/app/app.component.ts delete mode 100644 docs_app/content/examples/security/src/app/app.module.ts delete mode 100644 docs_app/content/examples/security/src/app/bypass-security.component.html delete mode 100644 docs_app/content/examples/security/src/app/bypass-security.component.ts delete mode 100644 docs_app/content/examples/security/src/app/inner-html-binding.component.html delete mode 100644 docs_app/content/examples/security/src/app/inner-html-binding.component.ts delete mode 100644 docs_app/content/examples/security/src/index.html delete mode 100644 docs_app/content/examples/security/src/main.ts delete mode 100644 docs_app/content/examples/security/stackblitz.json delete mode 100644 docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/example-config.json delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/app.component.html delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/index.html delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/main.ts delete mode 100644 docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json delete mode 100644 docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/set-document-title/example-config.json delete mode 100644 docs_app/content/examples/set-document-title/src/app/app.component.ts delete mode 100644 docs_app/content/examples/set-document-title/src/app/app.module.ts delete mode 100644 docs_app/content/examples/set-document-title/src/index.html delete mode 100644 docs_app/content/examples/set-document-title/src/main.ts delete mode 100644 docs_app/content/examples/set-document-title/stackblitz.json delete mode 100644 docs_app/content/examples/setup/e2e-spec.ts delete mode 100644 docs_app/content/examples/setup/example-config.json delete mode 100644 docs_app/content/examples/setup/non-essential-files.txt delete mode 100644 docs_app/content/examples/setup/quickstart-specs.stackblitz.json delete mode 100644 docs_app/content/examples/setup/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/setup/src/app/app.component.ts delete mode 100644 docs_app/content/examples/setup/src/app/app.module.ts delete mode 100644 docs_app/content/examples/setup/src/index.html delete mode 100644 docs_app/content/examples/setup/src/main.ts delete mode 100644 docs_app/content/examples/setup/src/quickstart-specs.html delete mode 100644 docs_app/content/examples/setup/src/systemjs.config.extras.js delete mode 100644 docs_app/content/examples/setup/stackblitz.json delete mode 100644 docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/structural-directives/example-config.json delete mode 100644 docs_app/content/examples/structural-directives/src/app/app.component.css delete mode 100644 docs_app/content/examples/structural-directives/src/app/app.component.html delete mode 100644 docs_app/content/examples/structural-directives/src/app/app.component.ts delete mode 100644 docs_app/content/examples/structural-directives/src/app/app.module.ts delete mode 100644 docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts delete mode 100644 docs_app/content/examples/structural-directives/src/app/hero.ts delete mode 100644 docs_app/content/examples/structural-directives/src/app/scrap.txt delete mode 100644 docs_app/content/examples/structural-directives/src/app/unless.directive.ts delete mode 100644 docs_app/content/examples/structural-directives/src/index.html delete mode 100644 docs_app/content/examples/structural-directives/src/main.ts delete mode 100644 docs_app/content/examples/structural-directives/stackblitz.json delete mode 100644 docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/styleguide/example-config.json delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/app.component.css delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/01-01/main.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-05/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-05/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-05/main.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/users/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-01/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-02/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-02/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-02/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-02/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-03/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-04/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-08/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-08/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-02/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-03/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-04/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-12/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-13/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-15/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-16/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/05-17/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-01/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-03/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/07-04/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/09-01/app/index.ts delete mode 100644 docs_app/content/examples/styleguide/src/app/app.component.html delete mode 100644 docs_app/content/examples/styleguide/src/app/app.component.ts delete mode 100644 docs_app/content/examples/styleguide/src/app/app.module.ts delete mode 100644 docs_app/content/examples/styleguide/src/app/app.routes.ts delete mode 100644 docs_app/content/examples/styleguide/src/app/hero-data.ts delete mode 100644 docs_app/content/examples/styleguide/src/index.html delete mode 100644 docs_app/content/examples/styleguide/src/main.ts delete mode 100644 docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/template-syntax/example-config.json delete mode 100644 docs_app/content/examples/template-syntax/src/app/app.component.css delete mode 100644 docs_app/content/examples/template-syntax/src/app/app.component.html delete mode 100644 docs_app/content/examples/template-syntax/src/app/app.component.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/app.module.1.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/app.module.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/click.directive.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/hero-form.component.html delete mode 100644 docs_app/content/examples/template-syntax/src/app/hero-form.component.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/hero.ts delete mode 100644 docs_app/content/examples/template-syntax/src/app/sizer.component.ts delete mode 100644 docs_app/content/examples/template-syntax/src/assets/images/hero.png delete mode 100644 docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png delete mode 100644 docs_app/content/examples/template-syntax/src/assets/images/villain.png delete mode 100644 docs_app/content/examples/template-syntax/src/index.html delete mode 100644 docs_app/content/examples/template-syntax/src/main.ts delete mode 100644 docs_app/content/examples/template-syntax/stackblitz.json delete mode 100644 docs_app/content/examples/testing/example-config.json delete mode 100644 docs_app/content/examples/testing/specs.stackblitz.json delete mode 100644 docs_app/content/examples/testing/src/app/about/about.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/about/about.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/app-initial.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/app-initial.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/app.component.html delete mode 100644 docs_app/content/examples/testing/src/app/app.component.router.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/app.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/app.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-external.component.css delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-external.component.html delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-external.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/banner/banner.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/demo/demo-external-template.html delete mode 100644 docs_app/content/examples/testing/src/app/demo/demo-main.ts delete mode 100644 docs_app/content/examples/testing/src/app/demo/demo.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/demo/demo.ts delete mode 100644 docs_app/content/examples/testing/src/app/dummy.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.component.css delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.component.html delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-list.component.css delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-list.component.html delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-list.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/hero/hero.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/in-memory-data.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/hero.service.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/hero.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/hero.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/http-hero.service.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/http-hero.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/index.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/testing/http-client.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/testing/index.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/testing/test-hero.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/testing/test-heroes.ts delete mode 100644 docs_app/content/examples/testing/src/app/model/user.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/shared/highlight.directive.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/shared/highlight.directive.ts delete mode 100644 docs_app/content/examples/testing/src/app/shared/shared.module.ts delete mode 100644 docs_app/content/examples/testing/src/app/shared/title-case.pipe.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/shared/title-case.pipe.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/quote.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/twain.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/twain.component.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/twain.data.ts delete mode 100644 docs_app/content/examples/testing/src/app/twain/twain.service.ts delete mode 100644 docs_app/content/examples/testing/src/app/welcome/welcome.component.spec.ts delete mode 100644 docs_app/content/examples/testing/src/app/welcome/welcome.component.ts delete mode 100644 docs_app/content/examples/testing/src/expected.ts delete mode 100644 docs_app/content/examples/testing/src/index-specs.html delete mode 100644 docs_app/content/examples/testing/src/index.html delete mode 100644 docs_app/content/examples/testing/src/main-specs.ts delete mode 100644 docs_app/content/examples/testing/src/main.ts delete mode 100644 docs_app/content/examples/testing/src/test.css delete mode 100644 docs_app/content/examples/testing/src/testing/activated-route-stub.ts delete mode 100644 docs_app/content/examples/testing/src/testing/async-observable-helpers.ts delete mode 100644 docs_app/content/examples/testing/src/testing/global-jasmine.ts delete mode 100644 docs_app/content/examples/testing/src/testing/index.ts delete mode 100644 docs_app/content/examples/testing/src/testing/jasmine-matchers.d.ts delete mode 100644 docs_app/content/examples/testing/src/testing/jasmine-matchers.ts delete mode 100644 docs_app/content/examples/testing/src/testing/router-link-directive-stub.ts delete mode 100644 docs_app/content/examples/testing/src/tests.html delete mode 100644 docs_app/content/examples/testing/src/tests.sb.ts delete mode 100644 docs_app/content/examples/testing/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt0/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt0/example-config.json delete mode 100644 docs_app/content/examples/toh-pt0/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt0/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt0/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt0/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt0/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt0/src/index.html delete mode 100644 docs_app/content/examples/toh-pt0/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt0/src/styles.1.css delete mode 100644 docs_app/content/examples/toh-pt0/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt1/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt1/example-config.json delete mode 100644 docs_app/content/examples/toh-pt1/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt1/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt1/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt1/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt1/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html delete mode 100644 docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt1/src/index.html delete mode 100644 docs_app/content/examples/toh-pt1/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt1/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt2/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt2/example-config.json delete mode 100644 docs_app/content/examples/toh-pt2/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt2/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt2/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html delete mode 100644 docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/toh-pt2/src/index.html delete mode 100644 docs_app/content/examples/toh-pt2/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt2/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt3/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt3/example-config.json delete mode 100644 docs_app/content/examples/toh-pt3/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt3/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt3/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/toh-pt3/src/index.html delete mode 100644 docs_app/content/examples/toh-pt3/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt3/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt4/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt4/example-config.json delete mode 100644 docs_app/content/examples/toh-pt4/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt4/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt4/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero.service.1.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/message.service.spec.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/message.service.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/messages/messages.component.css delete mode 100644 docs_app/content/examples/toh-pt4/src/app/messages/messages.component.html delete mode 100644 docs_app/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/messages/messages.component.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/toh-pt4/src/index.html delete mode 100644 docs_app/content/examples/toh-pt4/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt4/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt5/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt5/example-config.json delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app-routing.module.0.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css delete mode 100644 docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/message.service.spec.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/message.service.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/messages/messages.component.css delete mode 100644 docs_app/content/examples/toh-pt5/src/app/messages/messages.component.html delete mode 100644 docs_app/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/messages/messages.component.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/toh-pt5/src/index.html delete mode 100644 docs_app/content/examples/toh-pt5/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt5/stackblitz.json delete mode 100644 docs_app/content/examples/toh-pt6/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/example-config.json delete mode 100644 docs_app/content/examples/toh-pt6/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/app.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/app.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/app.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/app.module.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/hero.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/in-memory-data.service.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/message.service.spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/message.service.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/messages/messages.component.css delete mode 100644 docs_app/content/examples/toh-pt6/src/app/messages/messages.component.html delete mode 100644 docs_app/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/messages/messages.component.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/toh-pt6/src/index.html delete mode 100644 docs_app/content/examples/toh-pt6/src/main.ts delete mode 100644 docs_app/content/examples/toh-pt6/stackblitz.json delete mode 100644 docs_app/content/examples/tsconfig.json delete mode 100644 docs_app/content/examples/tslint.json delete mode 100644 docs_app/content/examples/universal/example-config.json delete mode 100644 docs_app/content/examples/universal/server.ts delete mode 100644 docs_app/content/examples/universal/src/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/universal/src/app/app.component.css delete mode 100644 docs_app/content/examples/universal/src/app/app.component.html delete mode 100644 docs_app/content/examples/universal/src/app/app.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/app.module.ts delete mode 100644 docs_app/content/examples/universal/src/app/app.server.module.ts delete mode 100644 docs_app/content/examples/universal/src/app/dashboard/dashboard.component.css delete mode 100644 docs_app/content/examples/universal/src/app/dashboard/dashboard.component.html delete mode 100644 docs_app/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts delete mode 100644 docs_app/content/examples/universal/src/app/dashboard/dashboard.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.css delete mode 100644 docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.html delete mode 100644 docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/hero-search/hero-search.component.css delete mode 100644 docs_app/content/examples/universal/src/app/hero-search/hero-search.component.html delete mode 100644 docs_app/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts delete mode 100644 docs_app/content/examples/universal/src/app/hero-search/hero-search.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/hero.service.ts delete mode 100644 docs_app/content/examples/universal/src/app/hero.ts delete mode 100644 docs_app/content/examples/universal/src/app/heroes/heroes.component.css delete mode 100644 docs_app/content/examples/universal/src/app/heroes/heroes.component.html delete mode 100644 docs_app/content/examples/universal/src/app/heroes/heroes.component.spec.ts delete mode 100644 docs_app/content/examples/universal/src/app/heroes/heroes.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/in-memory-data.service.ts delete mode 100644 docs_app/content/examples/universal/src/app/message.service.spec.ts delete mode 100644 docs_app/content/examples/universal/src/app/message.service.ts delete mode 100644 docs_app/content/examples/universal/src/app/messages/messages.component.css delete mode 100644 docs_app/content/examples/universal/src/app/messages/messages.component.html delete mode 100644 docs_app/content/examples/universal/src/app/messages/messages.component.spec.ts delete mode 100644 docs_app/content/examples/universal/src/app/messages/messages.component.ts delete mode 100644 docs_app/content/examples/universal/src/app/mock-heroes.ts delete mode 100644 docs_app/content/examples/universal/src/index.html delete mode 100644 docs_app/content/examples/universal/src/main.server.ts delete mode 100644 docs_app/content/examples/universal/src/main.ts delete mode 100644 docs_app/content/examples/universal/src/tsconfig.server.json delete mode 100644 docs_app/content/examples/universal/webpack.server.config.js delete mode 100644 docs_app/content/examples/universal/zipper.json delete mode 100644 docs_app/content/examples/upgrade-module/.gitignore delete mode 100644 docs_app/content/examples/upgrade-module/e2e-spec.ts delete mode 100644 docs_app/content/examples/upgrade-module/example-config.json delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/hero-detail.directive.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/hero.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/app/villain.ts delete mode 100644 docs_app/content/examples/upgrade-module/src/index-a-to-ajs-providers.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-ajs-to-a-projection.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-ajs-to-a-providers.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-bootstrap.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-downgrade-io.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-downgrade-static.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-ng-app.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-upgrade-io.html delete mode 100644 docs_app/content/examples/upgrade-module/src/index-upgrade-static.html delete mode 100644 docs_app/content/examples/upgrade-module/src/systemjs.config.1.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/README.md delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.css delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/index.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/example-config.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh delete mode 100644 docs_app/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/README.md delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/aot/index.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.css delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/example-config.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/index.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/README.md delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/app.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/app.css delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/app.module.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/main.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/app/phones/phones.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/e2e-spec.ts delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/example-config.json delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/index.html delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/karma-test-shim.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/karma.conf.js delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh delete mode 100644 docs_app/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js delete mode 100644 docs_app/content/examples/user-input/e2e/app.e2e-spec.ts delete mode 100644 docs_app/content/examples/user-input/example-config.json delete mode 100644 docs_app/content/examples/user-input/src/app/app.component.html delete mode 100644 docs_app/content/examples/user-input/src/app/app.component.ts delete mode 100644 docs_app/content/examples/user-input/src/app/app.module.ts delete mode 100644 docs_app/content/examples/user-input/src/app/click-me.component.ts delete mode 100644 docs_app/content/examples/user-input/src/app/click-me2.component.ts delete mode 100644 docs_app/content/examples/user-input/src/app/keyup.components.ts delete mode 100644 docs_app/content/examples/user-input/src/app/little-tour.component.ts delete mode 100644 docs_app/content/examples/user-input/src/app/loop-back.component.ts delete mode 100644 docs_app/content/examples/user-input/src/assets/user-input-styles.css delete mode 100644 docs_app/content/examples/user-input/src/index.html delete mode 100644 docs_app/content/examples/user-input/src/main.ts delete mode 100644 docs_app/content/examples/user-input/stackblitz.json delete mode 100644 docs_app/content/examples/webpack/config/helpers.js delete mode 100644 docs_app/content/examples/webpack/config/karma-test-shim.js delete mode 100644 docs_app/content/examples/webpack/config/karma.conf.js delete mode 100644 docs_app/content/examples/webpack/config/webpack.common.js delete mode 100644 docs_app/content/examples/webpack/config/webpack.dev.js delete mode 100644 docs_app/content/examples/webpack/config/webpack.prod.js delete mode 100644 docs_app/content/examples/webpack/config/webpack.test.js delete mode 100644 docs_app/content/examples/webpack/e2e-spec.ts delete mode 100644 docs_app/content/examples/webpack/example-config.json delete mode 100644 docs_app/content/examples/webpack/karma.webpack.conf.js delete mode 100644 docs_app/content/examples/webpack/package.webpack.json delete mode 100644 docs_app/content/examples/webpack/src/app/app.component.css delete mode 100644 docs_app/content/examples/webpack/src/app/app.component.html delete mode 100644 docs_app/content/examples/webpack/src/app/app.component.spec.ts delete mode 100644 docs_app/content/examples/webpack/src/app/app.component.ts delete mode 100644 docs_app/content/examples/webpack/src/app/app.module.ts delete mode 100644 docs_app/content/examples/webpack/src/assets/css/styles.css delete mode 100644 docs_app/content/examples/webpack/src/assets/images/angular.png delete mode 100644 docs_app/content/examples/webpack/src/index.html delete mode 100644 docs_app/content/examples/webpack/src/main.ts delete mode 100644 docs_app/content/examples/webpack/src/polyfills.ts delete mode 100644 docs_app/content/examples/webpack/src/tsconfig.1.json delete mode 100644 docs_app/content/examples/webpack/src/vendor.ts delete mode 100644 docs_app/content/examples/webpack/webpack.config.js delete mode 100644 docs_app/content/examples/webpack/zipper.json delete mode 100644 docs_app/content/guide/ajs-quick-reference.md delete mode 100644 docs_app/content/guide/animations.md delete mode 100644 docs_app/content/guide/aot-compiler.md delete mode 100644 docs_app/content/guide/api-page-class.md delete mode 100644 docs_app/content/guide/architecture-components.md delete mode 100644 docs_app/content/guide/architecture-modules.md delete mode 100644 docs_app/content/guide/architecture-next-steps.md delete mode 100644 docs_app/content/guide/architecture-services.md delete mode 100644 docs_app/content/guide/architecture.md delete mode 100644 docs_app/content/guide/attribute-directives.md delete mode 100644 docs_app/content/guide/bootstrapping.md delete mode 100644 docs_app/content/guide/browser-support.md delete mode 100644 docs_app/content/guide/change-log.md delete mode 100644 docs_app/content/guide/cheatsheet.md delete mode 100644 docs_app/content/guide/comparing-observables.md delete mode 100644 docs_app/content/guide/component-interaction.md delete mode 100644 docs_app/content/guide/component-styles.md delete mode 100644 docs_app/content/guide/dependency-injection-in-action.md delete mode 100644 docs_app/content/guide/dependency-injection-pattern.md delete mode 100644 docs_app/content/guide/dependency-injection.md delete mode 100644 docs_app/content/guide/deployment.md delete mode 100644 docs_app/content/guide/displaying-data.md delete mode 100644 docs_app/content/guide/docs-style-guide.md delete mode 100644 docs_app/content/guide/dynamic-component-loader.md delete mode 100644 docs_app/content/guide/dynamic-form.md delete mode 100644 docs_app/content/guide/elements.md delete mode 100644 docs_app/content/guide/entry-components.md delete mode 100644 docs_app/content/guide/feature-modules.md delete mode 100644 docs_app/content/guide/form-validation.md delete mode 100644 docs_app/content/guide/forms.md delete mode 100644 docs_app/content/guide/frequent-ngmodules.md delete mode 100644 docs_app/content/guide/glossary.md delete mode 100644 docs_app/content/guide/hierarchical-dependency-injection.md delete mode 100644 docs_app/content/guide/http.md delete mode 100644 docs_app/content/guide/i18n.md delete mode 100644 docs_app/content/guide/language-service.md delete mode 100644 docs_app/content/guide/lazy-loading-ngmodules.md delete mode 100644 docs_app/content/guide/lifecycle-hooks.md delete mode 100644 docs_app/content/guide/module-types.md delete mode 100644 docs_app/content/guide/ngmodule-api.md delete mode 100644 docs_app/content/guide/ngmodule-faq.md delete mode 100644 docs_app/content/guide/ngmodule-vs-jsmodule.md delete mode 100644 docs_app/content/guide/ngmodules.md delete mode 100644 docs_app/content/guide/npm-packages.md delete mode 100644 docs_app/content/guide/observables-in-angular.md delete mode 100644 docs_app/content/guide/observables.md delete mode 100644 docs_app/content/guide/pipes.md delete mode 100644 docs_app/content/guide/practical-observable-usage.md delete mode 100644 docs_app/content/guide/providers.md delete mode 100644 docs_app/content/guide/quickstart.md delete mode 100644 docs_app/content/guide/reactive-forms.md delete mode 100644 docs_app/content/guide/router.md delete mode 100644 docs_app/content/guide/rx-library.md delete mode 100644 docs_app/content/guide/security.md delete mode 100644 docs_app/content/guide/service-worker-communications.md delete mode 100644 docs_app/content/guide/service-worker-config.md delete mode 100644 docs_app/content/guide/service-worker-devops.md delete mode 100644 docs_app/content/guide/service-worker-getting-started.md delete mode 100644 docs_app/content/guide/service-worker-intro.md delete mode 100644 docs_app/content/guide/set-document-title.md delete mode 100644 docs_app/content/guide/setup-systemjs-anatomy.md delete mode 100644 docs_app/content/guide/setup.md delete mode 100644 docs_app/content/guide/sharing-ngmodules.md delete mode 100644 docs_app/content/guide/singleton-services.md delete mode 100644 docs_app/content/guide/structural-directives.md delete mode 100644 docs_app/content/guide/styleguide.md delete mode 100644 docs_app/content/guide/template-syntax.md delete mode 100644 docs_app/content/guide/testing-observables.md delete mode 100644 docs_app/content/guide/testing.md delete mode 100644 docs_app/content/guide/typescript-configuration.md delete mode 100644 docs_app/content/guide/universal.md delete mode 100644 docs_app/content/guide/upgrade.md delete mode 100644 docs_app/content/guide/user-input.md delete mode 100644 docs_app/content/guide/visual-studio-2015.md delete mode 100644 docs_app/content/guide/webpack.md delete mode 100644 docs_app/content/images/bios/_no-one.jpg delete mode 100644 docs_app/content/images/bios/alex-eagle.jpg delete mode 100644 docs_app/content/images/bios/alex-rickabaugh.jpg delete mode 100644 docs_app/content/images/bios/alex-wolfe.jpg delete mode 100644 docs_app/content/images/bios/ali.jpg delete mode 100644 docs_app/content/images/bios/amcdnl.jpeg delete mode 100644 docs_app/content/images/bios/andrewseguin.jpg delete mode 100644 docs_app/content/images/bios/angular-gde-bio-placeholder.jpg delete mode 100644 docs_app/content/images/bios/brad-green.jpg delete mode 100644 docs_app/content/images/bios/brandonroberts.jpg delete mode 100644 docs_app/content/images/bios/chrisnoring.jpg delete mode 100644 docs_app/content/images/bios/christianweyer.jpg delete mode 100644 docs_app/content/images/bios/chuckj.jpg delete mode 100644 docs_app/content/images/bios/cironunes.jpg delete mode 100644 docs_app/content/images/bios/crisbeto.jpg delete mode 100644 docs_app/content/images/bios/danwahlin.jpg delete mode 100644 docs_app/content/images/bios/david-east.jpg delete mode 100644 docs_app/content/images/bios/deborah.jpg delete mode 100644 docs_app/content/images/bios/devversion.jpg delete mode 100644 docs_app/content/images/bios/eladbezalel.jpg delete mode 100644 docs_app/content/images/bios/eric.jpg delete mode 100644 docs_app/content/images/bios/fatima.jpg delete mode 100644 docs_app/content/images/bios/filipbech.jpg delete mode 100644 docs_app/content/images/bios/filipe-silva.jpg delete mode 100644 docs_app/content/images/bios/gerardsans.jpg delete mode 100644 docs_app/content/images/bios/gkalpak.jpg delete mode 100644 docs_app/content/images/bios/hansl.jpg delete mode 100644 docs_app/content/images/bios/igor-minar.jpg delete mode 100644 docs_app/content/images/bios/jasonaden.jpg delete mode 100644 docs_app/content/images/bios/jbedard.jpg delete mode 100644 docs_app/content/images/bios/jecelynyeen.jpg delete mode 100644 docs_app/content/images/bios/jeff-cross.jpg delete mode 100644 docs_app/content/images/bios/jeffwhelpley.jpg delete mode 100644 docs_app/content/images/bios/jelbourn.jpg delete mode 100644 docs_app/content/images/bios/jeremywilken.jpg delete mode 100644 docs_app/content/images/bios/jesus-rodriguez.jpg delete mode 100644 docs_app/content/images/bios/joeeames.jpg delete mode 100644 docs_app/content/images/bios/john-papa.jpg delete mode 100644 docs_app/content/images/bios/jorgeucano.jpg delete mode 100644 docs_app/content/images/bios/josue.jpg delete mode 100644 docs_app/content/images/bios/juleskremer.jpg delete mode 100644 docs_app/content/images/bios/julie-ralph.jpg delete mode 100644 docs_app/content/images/bios/kapunahelewong.jpg delete mode 100644 docs_app/content/images/bios/kara-erickson.jpg delete mode 100644 docs_app/content/images/bios/kathy.jpg delete mode 100644 docs_app/content/images/bios/lucas.jpg delete mode 100644 docs_app/content/images/bios/lukas.jpg delete mode 100644 docs_app/content/images/bios/marclaval.jpg delete mode 100644 docs_app/content/images/bios/marcy.jpg delete mode 100644 docs_app/content/images/bios/martin-probst.jpg delete mode 100644 docs_app/content/images/bios/martinstaffa.jpg delete mode 100644 docs_app/content/images/bios/matias.jpg delete mode 100644 docs_app/content/images/bios/max-sills.jpg delete mode 100644 docs_app/content/images/bios/maximsalnikov.jpg delete mode 100644 docs_app/content/images/bios/michaelprentice.jpg delete mode 100644 docs_app/content/images/bios/michal.jpg delete mode 100644 docs_app/content/images/bios/mickey_mouse.jpg delete mode 100644 docs_app/content/images/bios/mike-brocchi.jpg delete mode 100644 docs_app/content/images/bios/mikeryan.jpg delete mode 100644 docs_app/content/images/bios/minko.jpg delete mode 100644 docs_app/content/images/bios/misko.jpg delete mode 100644 docs_app/content/images/bios/mmalerba.jpg delete mode 100644 docs_app/content/images/bios/naomi.jpg delete mode 100644 docs_app/content/images/bios/nirkaufman.jpg delete mode 100644 docs_app/content/images/bios/ocombe.jpg delete mode 100644 docs_app/content/images/bios/pascalprecht.jpg delete mode 100644 docs_app/content/images/bios/patrick-stapleton.jpg delete mode 100644 docs_app/content/images/bios/pawel.jpg delete mode 100644 docs_app/content/images/bios/pete.jpg delete mode 100644 docs_app/content/images/bios/rado.jpg delete mode 100644 docs_app/content/images/bios/ralph.jpg delete mode 100644 docs_app/content/images/bios/raul.jpg delete mode 100644 docs_app/content/images/bios/rex.jpg delete mode 100644 docs_app/content/images/bios/rmesserle.jpg delete mode 100644 docs_app/content/images/bios/rob-wormald.jpg delete mode 100644 docs_app/content/images/bios/ryan.jpg delete mode 100644 docs_app/content/images/bios/sanderelias.jpg delete mode 100644 docs_app/content/images/bios/scott.jpg delete mode 100644 docs_app/content/images/bios/shahar.jpg delete mode 100644 docs_app/content/images/bios/shaireznik.jpg delete mode 100644 docs_app/content/images/bios/shannon.jpg delete mode 100644 docs_app/content/images/bios/shield-bio-placeholder.jpg delete mode 100644 docs_app/content/images/bios/stephenfluin.jpg delete mode 100644 docs_app/content/images/bios/steyer.jpg delete mode 100644 docs_app/content/images/bios/teropa.jpg delete mode 100644 docs_app/content/images/bios/thierrychatel.jpg delete mode 100644 docs_app/content/images/bios/thomas.jpg delete mode 100644 docs_app/content/images/bios/tobias.jpg delete mode 100644 docs_app/content/images/bios/toddmotto.jpg delete mode 100644 docs_app/content/images/bios/tonyc.jpg delete mode 100644 docs_app/content/images/bios/topherfangio.jpg delete mode 100644 docs_app/content/images/bios/torgeirhelgevold.jpg delete mode 100644 docs_app/content/images/bios/urish.jpg delete mode 100644 docs_app/content/images/bios/victor.jpg delete mode 100644 docs_app/content/images/bios/vikram.jpg delete mode 100644 docs_app/content/images/bios/vincirufus.jpg delete mode 100644 docs_app/content/images/bios/wardbell.jpg delete mode 100644 docs_app/content/images/bios/wassim.jpg delete mode 100644 docs_app/content/images/bios/willmendesneto.jpg delete mode 100644 docs_app/content/images/bios/xiaofei.jpg delete mode 100644 docs_app/content/images/guide/animations/animation_auto.gif delete mode 100644 docs_app/content/images/guide/animations/animation_basic_click.gif delete mode 100644 docs_app/content/images/guide/animations/animation_enter_leave.gif delete mode 100644 docs_app/content/images/guide/animations/animation_enter_leave_states.gif delete mode 100644 docs_app/content/images/guide/animations/animation_groups.gif delete mode 100644 docs_app/content/images/guide/animations/animation_multistep.gif delete mode 100644 docs_app/content/images/guide/animations/animation_timings.gif delete mode 100644 docs_app/content/images/guide/animations/ng_animate_transitions_inactive_active.png delete mode 100644 docs_app/content/images/guide/animations/ng_animate_transitions_inactive_active_void.png delete mode 100644 docs_app/content/images/guide/animations/ng_animate_transitions_inactive_active_wildcards.png delete mode 100644 docs_app/content/images/guide/animations/ng_animate_transitions_void_in.png delete mode 100644 docs_app/content/images/guide/application-under-test/bongos-heroes.png delete mode 100644 docs_app/content/images/guide/architecture/airplane.png delete mode 100644 docs_app/content/images/guide/architecture/compilation-context.png delete mode 100644 docs_app/content/images/guide/architecture/component-databinding.png delete mode 100644 docs_app/content/images/guide/architecture/component-tree.png delete mode 100644 docs_app/content/images/guide/architecture/databinding.png delete mode 100644 docs_app/content/images/guide/architecture/dependency-injection.png delete mode 100644 docs_app/content/images/guide/architecture/directive.png delete mode 100644 docs_app/content/images/guide/architecture/hero-component.png delete mode 100644 docs_app/content/images/guide/architecture/injector-injects.png delete mode 100644 docs_app/content/images/guide/architecture/library-module.png delete mode 100644 docs_app/content/images/guide/architecture/metadata.png delete mode 100644 docs_app/content/images/guide/architecture/module.png delete mode 100644 docs_app/content/images/guide/architecture/modules.png delete mode 100644 docs_app/content/images/guide/architecture/overview.png delete mode 100644 docs_app/content/images/guide/architecture/overview2.png delete mode 100644 docs_app/content/images/guide/architecture/parent-child-binding.png delete mode 100644 docs_app/content/images/guide/architecture/service.png delete mode 100644 docs_app/content/images/guide/architecture/template-metadata-component.png delete mode 100644 docs_app/content/images/guide/architecture/template.png delete mode 100644 docs_app/content/images/guide/architecture/view-hierarchy.png delete mode 100644 docs_app/content/images/guide/attribute-directives/first-highlight.png delete mode 100644 docs_app/content/images/guide/attribute-directives/highlight-directive-anim.gif delete mode 100644 docs_app/content/images/guide/attribute-directives/highlight-directive-final-anim.gif delete mode 100644 docs_app/content/images/guide/attribute-directives/highlight-directive-v2-anim.gif delete mode 100644 docs_app/content/images/guide/cli-quickstart/app-works.png delete mode 100644 docs_app/content/images/guide/cli-quickstart/my-first-app.png delete mode 100644 docs_app/content/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png delete mode 100644 docs_app/content/images/guide/component-interaction/bidirectional-service.gif delete mode 100644 docs_app/content/images/guide/component-interaction/child-to-parent.gif delete mode 100644 docs_app/content/images/guide/component-interaction/contentchildren.png delete mode 100644 docs_app/content/images/guide/component-interaction/countdown-timer-anim.gif delete mode 100644 docs_app/content/images/guide/component-interaction/parent-to-child-on-changes.gif delete mode 100644 docs_app/content/images/guide/component-interaction/parent-to-child.png delete mode 100644 docs_app/content/images/guide/component-interaction/setter.png delete mode 100644 docs_app/content/images/guide/component-interaction/unrelated-service.gif delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/alex.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/alice.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/date-logger-entry.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/hero-bio-and-content.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/hero-bios.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/hero-of-month.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/highlight.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/logged-in-user.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png delete mode 100644 docs_app/content/images/guide/dependency-injection-in-action/sorted-heroes.png delete mode 100644 docs_app/content/images/guide/dependency-injection/car-components.png delete mode 100644 docs_app/content/images/guide/dependency-injection/component-hierarchy.png delete mode 100644 docs_app/content/images/guide/dependency-injection/hid-heroes-anim.gif delete mode 100644 docs_app/content/images/guide/dependency-injection/injector-tree.png delete mode 100644 docs_app/content/images/guide/displaying-data/final.png delete mode 100644 docs_app/content/images/guide/displaying-data/hero-names-list.png delete mode 100644 docs_app/content/images/guide/displaying-data/title-and-hero.png delete mode 100644 docs_app/content/images/guide/docs-style-guide/docs-style-guide-plunker.png delete mode 100644 docs_app/content/images/guide/docs-style-guide/flying-hero.png delete mode 100644 docs_app/content/images/guide/docs-style-guide/toh-pt6-bundle-700w.png delete mode 100644 docs_app/content/images/guide/docs-style-guide/toh-pt6-bundle.png delete mode 100644 docs_app/content/images/guide/dynamic-component-loader/ads.gif delete mode 100644 docs_app/content/images/guide/dynamic-form/dynamic-form.png delete mode 100644 docs_app/content/images/guide/elements/createElement.png delete mode 100644 docs_app/content/images/guide/elements/customElement1.png delete mode 100644 docs_app/content/images/guide/feature-modules/feature-module.png delete mode 100644 docs_app/content/images/guide/first-app-tests/Jasmine-not-running-tests.png delete mode 100644 docs_app/content/images/guide/first-app-tests/passed-2-specs-0-failures.png delete mode 100644 docs_app/content/images/guide/first-app-tests/test-passed-once-again.png delete mode 100644 docs_app/content/images/guide/form-validation/plunker.png delete mode 100644 docs_app/content/images/guide/forms/control-state-transitions-anim.gif delete mode 100644 docs_app/content/images/guide/forms/hero-form-1.png delete mode 100644 docs_app/content/images/guide/forms/hero-form-2.png delete mode 100644 docs_app/content/images/guide/forms/hero-form-3.png delete mode 100644 docs_app/content/images/guide/forms/hf-4.png delete mode 100644 docs_app/content/images/guide/forms/hf-5.png delete mode 100644 docs_app/content/images/guide/forms/name-required-error.png delete mode 100644 docs_app/content/images/guide/forms/ng-control-class-changes.png delete mode 100644 docs_app/content/images/guide/forms/ng-model-in-action-2.png delete mode 100644 docs_app/content/images/guide/forms/ng-model-in-action.png delete mode 100644 docs_app/content/images/guide/forms/tdf-1.png delete mode 100644 docs_app/content/images/guide/forms/tdf-2.png delete mode 100644 docs_app/content/images/guide/forms/tdf-3.png delete mode 100644 docs_app/content/images/guide/forms/tdf-4.png delete mode 100644 docs_app/content/images/guide/forms/tdf-5.png delete mode 100644 docs_app/content/images/guide/forms/validity-required-indicator.png delete mode 100644 docs_app/content/images/guide/frequent-ngmodules/browser-module-error.gif delete mode 100644 docs_app/content/images/guide/http/hero-list.png delete mode 100644 docs_app/content/images/guide/http/http-toh.gif delete mode 100644 docs_app/content/images/guide/http/wiki-1.gif delete mode 100644 docs_app/content/images/guide/http/wiki-2.gif delete mode 100644 docs_app/content/images/guide/intro/people.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/jasmine-1-spec-0-failures.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/null-to-equal-undefined.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/spec-list-2-specs-1-failure.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/test-report-1-spec-0-failures.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/test-report-2-specs-0-failures.png delete mode 100644 docs_app/content/images/guide/jasmine-testing-101/test-report-2-specs-1-failure.png delete mode 100644 docs_app/content/images/guide/language-service/language-completion.gif delete mode 100644 docs_app/content/images/guide/language-service/language-error.gif delete mode 100644 docs_app/content/images/guide/language-service/language-navigation.gif delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/chunk-arrow.png delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/chunk.png delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/clear.gif delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/clear.png delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/lazy-load-relationship.jpg delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/network-tab.png delete mode 100644 docs_app/content/images/guide/lazy-loading-ngmodules/three-buttons.png delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/after-view-anim.gif delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/do-check-anim.gif delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/on-changes-anim.gif delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/peek-a-boo.gif delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/peek-a-boo.png delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/projected-child-view.png delete mode 100644 docs_app/content/images/guide/lifecycle-hooks/spy-directive.gif delete mode 100644 docs_app/content/images/guide/ngcontainer/hero-traits-bad.png delete mode 100644 docs_app/content/images/guide/ngcontainer/hero-traits-good.png delete mode 100644 docs_app/content/images/guide/ngmodule/contact-1b-plunker.png delete mode 100644 docs_app/content/images/guide/ngmodule/contact-2-plunker.png delete mode 100644 docs_app/content/images/guide/ngmodule/final-plunker.png delete mode 100644 docs_app/content/images/guide/ngmodule/minimal-plunker.png delete mode 100644 docs_app/content/images/guide/ngmodule/v3-plunker.png delete mode 100644 docs_app/content/images/guide/pipes/date-format-toggle-anim.gif delete mode 100644 docs_app/content/images/guide/pipes/flying-heroes-anim.gif delete mode 100644 docs_app/content/images/guide/pipes/hero-list.png delete mode 100644 docs_app/content/images/guide/pipes/power-boost-calculator-anim.gif delete mode 100644 docs_app/content/images/guide/pipes/power-boost-calculator.png delete mode 100644 docs_app/content/images/guide/pipes/power-booster.png delete mode 100644 docs_app/content/images/guide/quickstart/hello-angular.png delete mode 100644 docs_app/content/images/guide/quickstart/my-first-app.png delete mode 100644 docs_app/content/images/guide/quickstart/quickstart-plnkr-big.png delete mode 100644 docs_app/content/images/guide/quickstart/quickstart-plnkr.png delete mode 100644 docs_app/content/images/guide/reactive-forms/address-group.png delete mode 100644 docs_app/content/images/guide/reactive-forms/addresses-array.png delete mode 100644 docs_app/content/images/guide/reactive-forms/hero-detail.png delete mode 100644 docs_app/content/images/guide/reactive-forms/hero-list.png delete mode 100644 docs_app/content/images/guide/reactive-forms/json-output.png delete mode 100644 docs_app/content/images/guide/reactive-forms/just-formcontrol.png delete mode 100644 docs_app/content/images/guide/reactive-forms/save-revert-buttons.png delete mode 100644 docs_app/content/images/guide/reactive-forms/validators-json-output.png delete mode 100644 docs_app/content/images/guide/router/component-tree.png delete mode 100644 docs_app/content/images/guide/router/confirm-dialog.png delete mode 100644 docs_app/content/images/guide/router/contact-popup.png delete mode 100644 docs_app/content/images/guide/router/crisis-center-detail.png delete mode 100644 docs_app/content/images/guide/router/crisis-center-list.png delete mode 100644 docs_app/content/images/guide/router/hero-detail.png delete mode 100644 docs_app/content/images/guide/router/hero-list.png delete mode 100644 docs_app/content/images/guide/router/router-1-anim.gif delete mode 100644 docs_app/content/images/guide/router/router-2-anim.gif delete mode 100644 docs_app/content/images/guide/router/selected-crisis.png delete mode 100644 docs_app/content/images/guide/router/selected-hero.png delete mode 100644 docs_app/content/images/guide/router/shell-and-outlet.png delete mode 100644 docs_app/content/images/guide/security/binding-inner-html.png delete mode 100644 docs_app/content/images/guide/security/bypass-security-component.png delete mode 100644 docs_app/content/images/guide/service-worker/offline-checkbox.png delete mode 100644 docs_app/content/images/guide/service-worker/sw-active.png delete mode 100644 docs_app/content/images/guide/service-worker/welcome-msg-en.png delete mode 100644 docs_app/content/images/guide/service-worker/welcome-msg-fr.png delete mode 100644 docs_app/content/images/guide/set-document-title/set-title-anim.gif delete mode 100644 docs_app/content/images/guide/structural-directives/bad-paragraph.png delete mode 100644 docs_app/content/images/guide/structural-directives/bad-select.png delete mode 100644 docs_app/content/images/guide/structural-directives/element-display-in-dom.png delete mode 100644 docs_app/content/images/guide/structural-directives/element-not-in-dom.png delete mode 100644 docs_app/content/images/guide/structural-directives/good-paragraph.png delete mode 100644 docs_app/content/images/guide/structural-directives/hero-div-in-dom.png delete mode 100644 docs_app/content/images/guide/structural-directives/select-ngcontainer-anim.gif delete mode 100644 docs_app/content/images/guide/structural-directives/template-rendering.png delete mode 100644 docs_app/content/images/guide/structural-directives/unless-anim.gif delete mode 100644 docs_app/content/images/guide/styleguide/use-extension.gif delete mode 100644 docs_app/content/images/guide/template-syntax/evil-title.png delete mode 100644 docs_app/content/images/guide/template-syntax/input-output.png delete mode 100644 docs_app/content/images/guide/template-syntax/ng-for-track-by-anim.gif delete mode 100644 docs_app/content/images/guide/template-syntax/ng-model-anim.gif delete mode 100644 docs_app/content/images/guide/template-syntax/switch-anim.gif delete mode 100644 docs_app/content/images/guide/testing-an-angular-pipe/5-specs-0-failures.png delete mode 100644 docs_app/content/images/guide/testing-an-angular-pipe/big-time-fail-screen.png delete mode 100644 docs_app/content/images/guide/testing-an-angular-pipe/two-failures.png delete mode 100644 docs_app/content/images/guide/testing-an-angular-pipe/zero-failures.png delete mode 100644 docs_app/content/images/guide/testing/app-plunker.png delete mode 100644 docs_app/content/images/guide/testing/app-specs-plunker.png delete mode 100644 docs_app/content/images/guide/testing/hero-detail.component.png delete mode 100644 docs_app/content/images/guide/testing/highlight-directive-spec.png delete mode 100644 docs_app/content/images/guide/testing/initial-jasmine-html-reporter.png delete mode 100644 docs_app/content/images/guide/testing/karma-1st-spec-debug.png delete mode 100644 docs_app/content/images/guide/testing/karma-1st-spec-output.png delete mode 100644 docs_app/content/images/guide/testing/karma-browser.png delete mode 100644 docs_app/content/images/guide/toh/dashboard-top-heroes.png delete mode 100644 docs_app/content/images/guide/toh/hero-details-1.png delete mode 100644 docs_app/content/images/guide/toh/hero-details-save-button.png delete mode 100644 docs_app/content/images/guide/toh/heroes-dashboard-1.png delete mode 100644 docs_app/content/images/guide/toh/heroes-list-1.png delete mode 100644 docs_app/content/images/guide/toh/heroes-list-2.png delete mode 100644 docs_app/content/images/guide/toh/heroes-list-delete-button.png delete mode 100644 docs_app/content/images/guide/toh/heroes-list-selected.png delete mode 100644 docs_app/content/images/guide/toh/nav-diagram.png delete mode 100644 docs_app/content/images/guide/toh/toh-anim.gif delete mode 100644 docs_app/content/images/guide/toh/toh-hero-search.png delete mode 100644 docs_app/content/images/guide/toh/toh-http.anim.gif delete mode 100644 docs_app/content/images/guide/unit-testing/spectrum.png delete mode 100644 docs_app/content/images/guide/upgrade/a-to-ajs-with-transclusion.png delete mode 100644 docs_app/content/images/guide/upgrade/a-to-ajs.png delete mode 100644 docs_app/content/images/guide/upgrade/ajs-to-a-with-projection.png delete mode 100644 docs_app/content/images/guide/upgrade/ajs-to-a.png delete mode 100644 docs_app/content/images/guide/upgrade/change_detection.png delete mode 100644 docs_app/content/images/guide/upgrade/dom.png delete mode 100644 docs_app/content/images/guide/upgrade/injectors-2.png delete mode 100644 docs_app/content/images/guide/upgrade/injectors.png delete mode 100644 docs_app/content/images/guide/user-input/keyup-loop-back-anim.gif delete mode 100644 docs_app/content/images/guide/user-input/keyup1-anim.gif delete mode 100644 docs_app/content/images/guide/user-input/keyup3-anim.gif delete mode 100644 docs_app/content/images/guide/user-input/little-tour-anim.gif delete mode 100644 docs_app/content/images/guide/user-input/little-tour.png delete mode 100644 docs_app/content/images/marketing/features/feature-icon.svg delete mode 100644 docs_app/content/images/marketing/home/code-icon.svg delete mode 100644 docs_app/content/images/marketing/home/joyful-development.svg delete mode 100644 docs_app/content/images/marketing/home/loved-by-millions.svg delete mode 100644 docs_app/content/images/marketing/home/responsive-framework.svg delete mode 100644 docs_app/content/images/marketing/home/speed-performance.svg delete mode 100644 docs_app/content/images/stackblitz/unused/click-to-run.png delete mode 100644 docs_app/content/marketing/about.html delete mode 100644 docs_app/content/marketing/announcements.json delete mode 100644 docs_app/content/marketing/contribute.html delete mode 100644 docs_app/content/marketing/docs.md delete mode 100644 docs_app/content/marketing/events.html delete mode 100644 docs_app/content/marketing/features.html delete mode 100644 docs_app/content/marketing/presskit.html delete mode 100644 docs_app/content/marketing/resources-contributing.md delete mode 100644 docs_app/content/marketing/resources.html delete mode 100644 docs_app/content/marketing/resources.json delete mode 100644 docs_app/content/marketing/team.html delete mode 100644 docs_app/content/marketing/test.html delete mode 100644 docs_app/content/tutorial/index.md delete mode 100644 docs_app/content/tutorial/toh-pt0.md delete mode 100644 docs_app/content/tutorial/toh-pt1.md delete mode 100644 docs_app/content/tutorial/toh-pt2.md delete mode 100644 docs_app/content/tutorial/toh-pt3.md delete mode 100644 docs_app/content/tutorial/toh-pt4.md delete mode 100644 docs_app/content/tutorial/toh-pt5.md delete mode 100644 docs_app/content/tutorial/toh-pt6.md diff --git a/docs_app/content/examples/.DS_Store b/docs_app/content/examples/.DS_Store deleted file mode 100644 index 55dd692a1cad00d879837390dddaea4656b88731..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%}(Pm5VlL%twBOri33O+EOFq{L;2aQxJBjXgajgp9{6b!C8Cj{q)JnIs47MK z0Q&&Tm7n(j9)cI)&W!CMsvh^*lz7m89*ZW&XJi1^uE<&}gJ1jY`g!dr>|~Y76E92^r@wtKi5Vfp zoDgSDE9p6zn{_)iH*Hu;PUr`oo7O`=YaIpgP83`Q@qW7JWG#4 z4QqZYi8D8hgH+YiHBRec>?gfi(vAI&iZ{iTec)y-s3Vr`X0Et|2WnUg{r=j|jk4UV zR0n0*uU0E%xv~ChFc6}&xUzeA-u?aO@749q?cM!@UI7k&RwX|S4&f1uS28Z0G>($^ z0(`^xVH_bbKnxHA6V8Cy)=IMz{vP!B!~iky{~5sjL4qRM26K&S>wpG7A91{hhypg= zB@m@S+hDE{MnJeu1=OkBTrs##2fs9Nw!vJZPG?-r40X)R+}u#OnjQR7g)?qzq?Q;U z21Xf}(p?MB|DAu||3{OkM+^`HUy1=<+;+BW@Ji-v9eX)EYb9tC6b0jQjjt(SsG}HS e@hDyZRRVsA2B2*)*9aaE`VdewP(uuSC<8C+ePIaz diff --git a/docs_app/content/examples/.gitignore b/docs_app/content/examples/.gitignore deleted file mode 100644 index fcc840006f..0000000000 --- a/docs_app/content/examples/.gitignore +++ /dev/null @@ -1,84 +0,0 @@ -# boilerplate files -**/src/environments/environment.prod.ts -**/src/environments/environment.ts -**/src/assets/.gitkeep -**/src/favicon.ico -**/src/styles.css -**/src/systemjs-angular-loader.js -**/src/systemjs.config.js -**/src/tsconfig.json -**/src/favicon.ico -**/src/polyfills.ts -**/src/test.ts -**/src/tsconfig.app.json -**/src/tsconfig.spec.json -**/src/typings.d.ts -**/e2e/app.po.ts -**/e2e/tsconfig.e2e.json -**/.angular-cli.json -**/.editorconfig -**/tsconfig.json -**/bs-config.e2e.json -**/bs-config.json -**/package.json -**/tslint.json -**/karma.conf.js -**/karma-test-shim.js -**/browser-test-shim.js -**/node_modules - -# built files -*.map -_test-output -**/*.js -dist/ - - -# special -!/* -!*.1.* -!*.2.* -!*.3.* -*.1.js -*.2.js -*.3.js -*.1.js.map -*.2.js.map -*.3.js.map -!systemjs.config.*.js -!karma-test-shim.*.js -!copy-dist-files.js - -# AngularJS files -!**/*.ajs.js -**/app/**/*.ajs.js - -# aot -**/*.ngsummary.json -!rollup-config.js -aot-compiler/**/*.d.ts -aot-compiler/**/*.factory.d.ts - -# i18n -!i18n/src/systemjs-text-plugin.js - -# testing -!testing/src/browser-test-shim.js - -# webpack -!webpack/**/config/*.js -!webpack/**/*webpack*.js -!webpack/src/polyfills.ts - -# styleguide -!styleguide/src/systemjs.custom.js - -# universal -!universal/webpack.server.config.js - -# stackblitz -*stackblitz.no-link.html - -# ngUpgrade testing -!upgrade-phonecat-*/**/karma.conf.js -!upgrade-phonecat-*/**/karma-test-shim.js diff --git a/docs_app/content/examples/ajs-quick-reference/.angular-cli.1.json b/docs_app/content/examples/ajs-quick-reference/.angular-cli.1.json deleted file mode 100644 index d4a67ca369..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/.angular-cli.1.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "project": { - "name": "angular.io-example" - }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": [ - "assets", - "favicon.ico" - ], - "index": "index.html", - "main": "main.ts", - "polyfills": "polyfills.ts", - "test": "test.ts", - "tsconfig": "tsconfig.app.json", - "testTsconfig": "tsconfig.spec.json", - "prefix": "app", - // #docregion styles - "styles": [ - "styles.css" - ], - // #enddocregion styles - "scripts": [], - "environmentSource": "environments/environment.ts", - "environments": { - "dev": "environments/environment.ts", - "prod": "environments/environment.prod.ts" - } - } - ], - "e2e": { - "protractor": { - "config": "./protractor.conf.js" - } - }, - "lint": [ - { - "project": "src/tsconfig.app.json", - "exclude": "**/node_modules/**" - }, - { - "project": "src/tsconfig.spec.json", - "exclude": "**/node_modules/**" - }, - { - "project": "e2e/tsconfig.e2e.json", - "exclude": "**/node_modules/**" - } - ], - "test": { - "karma": { - "config": "./karma.conf.js" - } - }, - "defaults": { - "styleExt": "css", - "component": {} - } -} diff --git a/docs_app/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts b/docs_app/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts deleted file mode 100644 index e27f56e68b..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,115 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('AngularJS to Angular Quick Reference Tests', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should display no poster images after bootstrap', function () { - testImagesAreDisplayed(false); - }); - - it('should display proper movie data', function () { - // We check only a few samples - let expectedSamples: any[] = [ - {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true}, - {row: 0, column: 2, value: 'Celeritas'}, - {row: 1, column: 3, matches: /Dec 1[678], 2015/}, // absorb timezone dif; we care about date format - {row: 1, column: 5, value: '$14.95'}, - {row: 2, column: 4, value: 'PG-13'}, - {row: 2, column: 7, value: '100%'}, - {row: 2, column: 0, element: 'img', attr: 'src', value: 'images/ng-logo.png', contains: true}, - ]; - - // Go through the samples - let movieRows = getMovieRows(); - for (let i = 0; i < expectedSamples.length; i++) { - let sample = expectedSamples[i]; - let tableCell = movieRows.get(sample.row) - .all(by.tagName('td')).get(sample.column); - // Check the cell or its nested element - let elementToCheck = sample.element - ? tableCell.element(by.tagName(sample.element)) - : tableCell; - - // Check element attribute or text - let valueToCheck = sample.attr - ? elementToCheck.getAttribute(sample.attr) - : elementToCheck.getText(); - - // Test for equals/contains/match - if (sample.contains) { - expect(valueToCheck).toContain(sample.value); - } else if (sample.matches) { - expect(valueToCheck).toMatch(sample.matches); - } else { - expect(valueToCheck).toEqual(sample.value); - } - } - }); - - it('should display images after Show Poster', function () { - testPosterButtonClick('Show Poster', true); - }); - - it('should hide images after Hide Poster', function () { - testPosterButtonClick('Hide Poster', false); - }); - - it('should display no movie when no favorite hero is specified', function () { - testFavoriteHero(null, 'Please enter your favorite hero.'); - }); - - it('should display no movie for Magneta', function () { - testFavoriteHero('Magneta', 'No movie, sorry!'); - }); - - it('should display a movie for Mr. Nice', function () { - testFavoriteHero('Mr. Nice', 'Excellent choice!'); - }); - - function testImagesAreDisplayed(isDisplayed: boolean) { - let expectedMovieCount = 3; - - let movieRows = getMovieRows(); - expect(movieRows.count()).toBe(expectedMovieCount); - for (let i = 0; i < expectedMovieCount; i++) { - let movieImage = movieRows.get(i).element(by.css('td > img')); - expect(movieImage.isDisplayed()).toBe(isDisplayed); - } - } - - function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) { - let posterButton = element(by.css('app-movie-list tr > th > button')); - expect(posterButton.getText()).toBe(expectedButtonText); - - posterButton.click().then(function () { - testImagesAreDisplayed(isDisplayed); - }); - } - - function getMovieRows() { - return element.all(by.css('app-movie-list tbody > tr')); - } - - function testFavoriteHero(heroName: string, expectedLabel: string) { - let movieListComp = element(by.tagName('app-movie-list')); - let heroInput = movieListComp.element(by.tagName('input')); - let favoriteHeroLabel = movieListComp.element(by.tagName('h3')); - let resultLabel = movieListComp.element(by.css('span > p')); - - heroInput.clear().then(function () { - heroInput.sendKeys(heroName || ''); - expect(resultLabel.getText()).toBe(expectedLabel); - if (heroName) { - expect(favoriteHeroLabel.isDisplayed()).toBe(true); - expect(favoriteHeroLabel.getText()).toContain(heroName); - } else { - expect(favoriteHeroLabel.isDisplayed()).toBe(false); - } - }); - } -}); diff --git a/docs_app/content/examples/ajs-quick-reference/example-config.json b/docs_app/content/examples/ajs-quick-reference/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app-routing.module.ts b/docs_app/content/examples/ajs-quick-reference/src/app/app-routing.module.ts deleted file mode 100644 index a7cbe8a74d..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { MovieListComponent } from './movie-list.component'; - -const routes: Routes = [ - { path: '', redirectTo: '/movies', pathMatch: 'full' }, - { path: 'movies', component: MovieListComponent } -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.css b/docs_app/content/examples/ajs-quick-reference/src/app/app.component.css deleted file mode 100644 index e454e9ea87..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.css +++ /dev/null @@ -1,9 +0,0 @@ -.active {font-style: italic;} -.shazam {font-weight: bold;} - -img {height: 100px;} - -table td { - padding: 4px; - border: 1px solid #e0e0e0; -} diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.html b/docs_app/content/examples/ajs-quick-reference/src/app/app.component.html deleted file mode 100644 index 82eaf9339b..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.html +++ /dev/null @@ -1,112 +0,0 @@ - -

{{title}}

- -

Routed Movies

- - - -
- -

Example Snippets

- - -
- - [ngClass] active -
- -
- - [ngClass] active and boldly important -
- -
- - [class.active] -
- -

- -Angular Docs - - -

-
- - - - -

Image toggle event type was {{eventType}}

-
- -

-
- - - -
- -

- -
- - color preference #1 -
- -
- - color preference #2 -
- -

Movie as JSON

- -
{{movie | json}}
- - -

Movie Titles via local variable

- - - - - - -
{{movie.title}}
- -

Sliced Movies with pipes

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{movie.title | uppercase}}{{movie.title | lowercase}}{{movie.releaseDate | date}}{{movie.price | currency:'USD':true}}{{movie.starRating | number}}{{movie.starRating | number:'1.1-2'}}{{movie.approvalRating | percent: '1.0-2'}}
diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.ts b/docs_app/content/examples/ajs-quick-reference/src/app/app.component.ts deleted file mode 100644 index 6c5de8624e..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from '@angular/core'; - -import { MovieService } from './movie.service'; -import { IMovie } from './movie'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ], - providers: [ MovieService ] -}) -export class AppComponent { - - angularDocsUrl = 'https://angular.io/'; - colorPreference = 'red'; - eventType = ''; - isActive = true; - isImportant = true; - movie: IMovie = null; - movies: IMovie[] = []; - showImage = true; - title = 'AngularJS to Angular Quick Ref Cookbook'; - toggleImage(event: UIEvent) { - this.showImage = !this.showImage; - this.eventType = (event && event.type) || 'not provided'; - } - - constructor(movieService: MovieService) { - this.movies = movieService.getMovies(); - this.movie = this.movies[0]; - } -} diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app.module.1.ts b/docs_app/content/examples/ajs-quick-reference/src/app/app.module.1.ts deleted file mode 100644 index 5b24020186..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app.module.1.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/app.module.ts b/docs_app/content/examples/ajs-quick-reference/src/app/app.module.ts deleted file mode 100644 index 1dc46ad17c..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/app.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { MovieListComponent } from './movie-list.component'; -import { AppRoutingModule } from './app-routing.module'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - MovieListComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/date.pipe.ts b/docs_app/content/examples/ajs-quick-reference/src/app/date.pipe.ts deleted file mode 100644 index e1421fa530..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/date.pipe.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable, Pipe, PipeTransform } from '@angular/core'; -import { DatePipe } from '@angular/common'; - -@Injectable() -// #docregion date-pipe -@Pipe({name: 'date', pure: true}) -export class StringSafeDatePipe extends DatePipe implements PipeTransform { - transform(value: any, format: string): string { - value = typeof value === 'string' ? - Date.parse(value) : value; - return super.transform(value, format); - } -} -// #enddocregion date-pipe diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.css b/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.css deleted file mode 100644 index a3d5bf8161..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.css +++ /dev/null @@ -1,57 +0,0 @@ -div { - font-family:Arial, Helvetica, sans-serif; - margin:20px; -} - -table { - font-family:Arial, Helvetica, sans-serif; - color:#666; - font-size:14px; - text-shadow: 1px 1px 0 #fff; - margin:20px; - border:#ccc 1px solid; - - -moz-border-radius:3px; - -webkit-border-radius:3px; - border-radius:3px; -} -table th { - padding:21px 25px 22px 25px; - border-top:1px solid #fafafa; - border-bottom:1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; - font-weight: bold; -} -table th:first-child { - text-align: left; - padding-left:20px; - border-left: 0; -} -table tr { - text-align: center; - padding-left:20px; -} -table td:first-child { - text-align: left; - padding-left:20px; - border-left: 0; -} -table td { - padding:18px; - border-top: 1px solid #ffffff; - border-bottom:1px solid #e0e0e0; - border-left: 1px solid #e0e0e0; -} -table tr:last-child td { - border-bottom:0; -} -table tr:last-child td:first-child { - -moz-border-radius-bottomleft:3px; - -webkit-border-bottom-left-radius:3px; - border-bottom-left-radius:3px; -} -table tr:last-child td:last-child { - -moz-border-radius-bottomright:3px; - -webkit-border-bottom-right-radius:3px; - border-bottom-right-radius:3px; -} diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.html b/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.html deleted file mode 100644 index 9de98806d7..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.html +++ /dev/null @@ -1,78 +0,0 @@ - -
-

Movie List

-
Who is your favorite hero?
-
- - - - - - -

- Excellent choice! -

-

- No movie, sorry! -

-

- Please enter your favorite hero. -

- - -
-
- - -

- - Your favorite hero is: {{favoriteHero}} - -

- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - TitleHeroRelease DateRatingPriceStar ratingApproval rating
- - {{movie.title}}{{movie.hero}}{{movie.releaseDate | date}}{{movie.mpaa | uppercase}}{{movie.price | currency:'USD':true}}{{movie.starRating | number:'1.1-2'}}{{movie.approvalRating | percent: '1.0-0'}}
-
diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.ts b/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.ts deleted file mode 100644 index 9955550c8d..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/movie-list.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* tslint:disable:no-unused-variable */ -// #docplaster -// #docregion import -import { Component } from '@angular/core'; -// #enddocregion import -import { IMovie } from './movie'; -import { MovieService } from './movie.service'; - -// #docregion component -@Component({ - selector: 'app-movie-list', - templateUrl: './movie-list.component.html', -// #docregion style-url - styleUrls: [ './movie-list.component.css' ], -// #enddocregion style-url -}) -// #enddocregion component -// #docregion class -export class MovieListComponent { -// #enddocregion class - favoriteHero: string; - showImage = false; - movies: IMovie[]; - -// #docregion di - constructor(movieService: MovieService) { -// #enddocregion di - this.movies = movieService.getMovies(); -// #docregion di - } -// #enddocregion di - - toggleImage(): void { - this.showImage = !this.showImage; - } - - checkMovieHero(value: string): boolean { - return this.movies.filter(movie => movie.hero === value).length > 0 ; - } -// #docregion class -} -// #enddocregion class diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/movie.service.ts b/docs_app/content/examples/ajs-quick-reference/src/app/movie.service.ts deleted file mode 100644 index 887774d570..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/movie.service.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { IMovie } from './movie'; - -@Injectable() -export class MovieService { - getMovies(): IMovie[] { - return [ - { - hero: 'Celeritas', - imageurl: 'assets/images/hero.png', - movieId: 1, - mpaa: 'pg-13', - releaseDate: '2015-12-19T00:00:00', - title: 'Celeritas Reigns', - price: 12.95, - starRating: 4.925, - approvalRating: .97 - }, - { - hero: 'Mr. Nice', - imageurl: 'assets/images/villain.png', - movieId: 2, - mpaa: 'pg-13', - releaseDate: '2015-12-18T00:00:00', - title: 'No More Mr. Nice Guy', - price: 14.95, - starRating: 4.6, - approvalRating: .94 - }, - { - hero: 'Angular', - imageurl: 'assets/images/ng-logo.png', - movieId: 3, - mpaa: 'pg-13', - releaseDate: '2015-12-17T00:00:00', - title: 'Angular to the Rescue', - price: 15.95, - starRating: 4.98, - approvalRating: .9995 - } - ]; - } -} diff --git a/docs_app/content/examples/ajs-quick-reference/src/app/movie.ts b/docs_app/content/examples/ajs-quick-reference/src/app/movie.ts deleted file mode 100644 index 0e6f321520..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/app/movie.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* Defines the movie entity */ -export interface IMovie { - approvalRating: number; - hero: string; - imageurl: string; - movieId: number; - mpaa: string; - price: number; - releaseDate: string; - starRating: number; - title: string; -} diff --git a/docs_app/content/examples/ajs-quick-reference/src/assets/images/hero.png b/docs_app/content/examples/ajs-quick-reference/src/assets/images/hero.png deleted file mode 100644 index 2a128ac3679a5001bf3373ac96ae841e78295ff8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7312 zcmeHs*wKOqouA{ zU5!(Sese&q#g{ZvN@rK&H6CkLuNarC!ru#0Maf$ zyfFpLbkbBNMd!2VqGcD(fMvO*CtcO4y_PZOy?N)POS5crQb)~EuJx=vp@daGhhPOUNgjkdr5jj3%s2 zA&I-AqgtK`el(#DgFC)L(Kk2yMz1a{*lu|Szjeb??4d8x`*Pbkh8Nc(eXeSA*}~7v zZXY{|DT*JnqHZdk%mtQ&yRG6ICNLewdrnBIQ2TBf)U31Q<>W@xd25$;Xq9{vCS$MK z_3DHCQrV=B1PgD28~*I>9=>=40b}?E%k)bJSE~NQS&i_^#Um+=0G%7>K}H4YSO%nsU?lrGY0)8ztudpMz9OC+ zyqNH_%^&boE`vfJ8RsG4kfcMZldz&1Ls6AGm2J}^-J~4MWT$~dgv=y!y@+4iCWsxs zwmAA8#eYzLo|V)7){izGPjW>9q#%>*>DA^pBt!k-RYtqWkz7^#jmXjepzBEJjZ=hX z(%@cQ^KGr{j!A5dMd`~cDj0R#nk)^KO1mLbDAJtQg>>aTAI5@)>YAlU)F2dIW={JQ z$Zb0y9a9A?*_|Xn)hp-k|2F1}BlzZ(6C#?pY1*<&<46=MD zDM3)-Nc}2-L-nD2x@0`L2~@%bvl|^XYi$1>IK0k|jwq9mz^6M<8H+Tq-5JZ1Djo;6 z@_$Zx9@g78oFmJkJ7r2hcc443WZ6NmBYLt1D4K4PP|}??$XAk7o91X~DlJy}N?ShN zR1os=J4%6Q!~w%cfpDF)&$LzeNxRwj)9bMsXGDPuKQM@XJuUD_h0cinTWu@27aQ;V zi$9e5C1+%$Z#6_sI#tZzzN}gjo)m>KG_>0`>guXkTQS77(aE-0A?*tSEjyxe3blX)N?!+!TJJb5i!*}?rEqilcvm1( zd0i-R;iNR3*5`07Qn&#RA=7Ba{Ufi=INZ!BIy$&ypd8#x?%JXn? z5V%sYK6?kDusjYBq}@UwI+%nq18!p;^N3Sa=*JN=w#F~@K<&{B6=&8^yy^F)lu9XzCLGp@Qn;PW@@0Ka0Nf2q{DzBRG;B~oFc ze)nT53@-+7cE(&b(k~1+0Y*_t(K~ms;2V$7=9*=yzWOs{!X1E6B#L^>vDcqftDFB3 z7Us?SZe+fpE*W1KG6dynw6YF*Mfkq_DtGnBjql61s~Vg&akXTJ7>zH_(Ss=5k)OX; z*{(owtP4rS#to0&;!t98w7+QD8;!D0iMzl0Iobd zxt_$cA(`p(yF5r7;WyIqA$O@02vML)RXs_6sS_?S`@sAt%bzJbdnu^yj&(=gC~dg2qrjIjpY$t0;5bx{x&OQf0w?bi!ud+ zc6LYQ=0o%LEdVyXOZ3Yd)pznE5#bOw3sZH61J3ZwH4A{3HLW1x!8I}ua@4TW7&)0cz~D~l0zGi8kD8Z z(IqDU2)3cMTcTu1>F=!G?hZd6K`c}}+kny9E>QyWg|nCwC5~4sr3GnNTa7uM5RGz8 zXyy~S*JRjstz^xIrfi=i&pQ2v@!s+FwqXg*0zCbC)-|||;9Lzb+WcKje4cnN`wX5} zHKp^;_zCDIfAr?12V0^ga7bH0mN;P8@@4zla}`;)%h%eB zho{nyDVU!Y!q`D>7glc1`R;tE>u^Gk^L=yZ4^!Uj;thiphE9}$RyxhE52)$uc!iai z=)}Z6Q>Mnn;BGpU1K?#&J&v%uWK|Hg{Xp65Vcmp0j#{-@&%)@nb^?f;>!sObZWS{F z&l3a?m0cI`;k7Akemr}T%97*xcdltZ8!1|9@w}qI zx2`FWB?pA^O+8-Y&fGsr6-mp?K8Q3=Apa41b-R*HtE|q5W`1vh)s9G~1p&z<7mu>yJ#TurSW&_EU3)TY{fr@N`DekjQPB?-=zHa86xv38&3n?M@eF|bfgc(gPMJx(C z6SFgQl7`C3gG#(Q_n&t?(}(d=Jky~<)84lkQBcHKU0r?s(L;HdpX#|jt+diRF>#XT zCWZ=|6v3wmpzGjE{}ohu?Hcn`N%{fGD+bLqb-nETx-&UPFgn?imNWtiv96W+;Tj~G zst*PXem{@&B;-pYd4-yOCioC+q~zavGiPUM%___R(&~22r^!oQtk{Fb&E46St>JPm5!z$tRqn(+jIw(p1tW%l<-(@nQEr(j-HaC`6jCU-<{XDNyRvRC` zd@;h}Gv&{;3bnn|E_|Vro`XHs$)6}9mM+_0RYk`u^gG@$1(suH(G*gRZ}IWJ)Ue0B zg$cCmpQb%+yE!j|?I#Df=4j6RJqV_ozK_PI@LcHltI)IVBfTnrm=zY%rVP%Y0&I^j z_Y5@)JpsfHR3G4y1KcST=)0iHv0q82wAPD~$g$p_{&gZrU=Mm5)wh0r)LQw*?iDdK zKp%W-K#YD5_Mp{z(Plx*m}Ho`?!nNo@CCw9M6HJMuk;3qP|9!NzRT|gv)Zq738msA zl?>W(!8tF_<-eZ9lb{i-n9Vtx)#u7h_AY)s9OwDx`x>>Eb-IWIC2Hag#YV?`^@XCm zT#n*uG;d0H)y4Rv#atW-zQoz}AO*8GEu&VQUoU!jM*D*u=$oq!EO%$V<9pJ|PVD&E zad1w*8Nv_~Ii>sCqcb}Bo;)!{E5R466>Jtc`R16*%R%STIzjIP<&#^0^VEIq8ZSa2 z)eui}h>Dx=;~#RfNJFkce~&F`%cPXb*hHm0#8aB`%qWe(uH03Wer|crzBb>KS z|6N?yM2m=)Q?C8)wNtd>o#tKZ&i%4c#`2(bDnnC`fh_-=w_N&nJVZ%9X;|I()6UCKd);N>R^k>ZpS_eAn#|nW%}p1?7ABy#eK`3dzB8Via(68D#rA05wos+}JDF z?~aKmBobNku<+MyDEsFGw>mC1vT$mM{9v@{7?UZZX zcjvcbqGM{2;G=OS49!w;%&71W-Kj=Xl47A|9-=cHf4xg>;GwRJSH8S|0)|2jxN4M_ z>3e$S_bDfZc_?uM;D?(g)EtZX^oDKx)D*acm=M>^ZYg*2I5xOGHJod|s1ye$^FNm{ zDte0XkC<}P4-=J@%)hV;A)!)sqC<#nTboyxtWS@3f91wr?#;MH@tmxzo+eYKE=W%IlZ@|NV^X;xv-Hm6_h&OAm!qu$4XpJLIQv#3qcf;X8 zUfJRi3wf%-;bVK!BG1+W#7yC^^N&nA4woWj-<^)af**l@mp%<^oMaqNBLaYVVg%o1 zAy_;s9dh(|TbRL%_!BiFSc*G%$tkYIv1jk>5Q}b|)%G68_mvaCGDT|*t9MC-o^k(u z;rnN+lz=^9$|gpYb;_d=z}p#R?v1VHHdB_~D2U_~49jkU4pwOgzxs{3y?9$bj%tLI zsgg)(T2JAmu~Kb%1$M4n=>Ht``|05Mu}k-Dczdh?oZx8{t!!PVkyP1;2~$`ce&P%D zOg=I`XP_!!>W)jV%QbHGDo*1Gzh6o?IQ1h1W2~iQxEky``K)dHR)`sTn6a2_KIpxjy8R+m*q(lyhkR@pu!cKmqNEO;VPTZ0z3SFZ zALjj?6{A$tITx~iwA)B3C`ib~{yxMWcA4X6IQiFVHQ&Vd5kblWFOuz)#N@~eD9%PV ztX#h3UwB$y_e~J~vErk?Z;dD2mju|!s?jHZ8L^FbR>Ot!Ar+!YTjZc~8)?kOyYwf< zrL3y+;$DY=r>~tSjf8)O0}MWeE)Y3fLoczLPa5;dO%Sr|} zhLs+f_GD|<4CZRI(wlZhay6A2yO}>B21}(@?34HI3d2!+#9^^ zWYt7ikM>#$XVtf=%Ew*2o7@<&)G&ec&2KDX4qwO`bcz(NsP%;Mnk60BMJP-OdALIw zY}hZog|I2j4Nj@UCS~!YdDadu^{`i)*E}KCRALk)QOPGx`ZZ%tMN36p95xJ2j!e-# z@7B-0Pkwd9*1Em*Taxi2d8!&36dHf@wO7(}D9e^R`q9SILRl|&x*D68%y{B?VtN&C zn6&voP1B7A9mQ9VE#oh+WAmY5rvnnMgP9l$aP&x+l9tfvtZr}Bxl}2NPnhpC{9RQ2 zQ7BNUfb40H_K2Nu`6X-P++Y!aqFTLQS5jbaYC7-1Z~A^)sKmvwGeYNK;&i5d2GJ|;V{5lR^7sB||; zPpCR3o3)>A_~4}?xHgqQkWv{V*Qx{JKh(+TWZL0D8+tu0tbr%VAe=0|3gBHpRfj(9 z?n(iH#D!a03PbsdR>UR@$0)xYGVvVIyOS;!F_QSa3)pKZg&HjFv!E@~oIC-5^5@A# zSdUTNSY}U77x`G`VVRBcARNkqB}gS&zB<_ONcWSpM~R9K;v7!?bRF$KyOwxiCBSGg zX997)Rpo<$rcWAmTjla{4g6?u@NMU2Gyb039}eiMR&EFd<>E|}((rJTjxwuPDzuHJ zcBcJa;{YH-q0%5cjK?UM`=iN-xMybs+t93lu6Sy^&A?GS_ym|8FuR3nWisg3BSP+s z&imVAz+^M(4OB4bEm^dhLo9BiW-HSfoF7pj<+`5;DGEO1AT6h3puL$G0*f^+9zYu3 zG>dYHaaM`GSq?Tw8|dKkh<~KPjmk|-S#Yxjwh@Pz>O|DF<%06}8EzUogK-jV<2NO( zHx!M@-f6%0?ff(t{?&L+2~*;YbqaG|>< zkPEETK?xTe&D-)Xh+i>|bS1PU@L(!Lomkq9is+z{R39jC#;wnnxQYmmHOjE#?u1zG z3#CP?_b;xq#a$4mu1eRWFn*hz{I}ZSz6k>_Imvw!3i}{B(_RSWSD!YXRSz%$He;ee zPdJVA^qhslBDf2yx~x4oMzj}i%N{ZxNKG~X1Wf5g zUaT|Z;dIjNCknG{f_vMm6NGi&LJu^hkDQXj{%c3s0tFcuZ%ug-lk~;0qO*O%##bmS z5xqeQyuFW887Jg-xppsXeJm+7B!q!aZ(d@`z7oQ92=<0uET600YLy-64x;e)VtqwF zKniCwS!P_d24B5vI{0Pu_21p=b3P#ak;YlBUcx|K7NjJ?N9c)qY`#r|Ez-7%zSs=} z&Ke@C!WD%zeZ4HoIK_EH@FgLLn z2@xYV@F@l!M2Q>y)9^OAg**b{QD=+X51=fj;KkrWeW{V_+!dl|^1%$!xhVYv43Kz^ z3Iq=OfHEYVyP$;=*F8@|O;Y2*)$5K@QKy`y?Xf)z)zyy36zJ?rhonegQVo}tG@L?fAKKF!H)h$NCw4r zO%cp47^s{7L;%PsiPL0)hU%n+Q2u#5fiMJ&`Lr2}U^ZdkBVyMYTjZGn77V~RM?yNZ z6~0Y+W=FMrv_`2Sh? zJm33b`cVZeL;V08r`o@VyW&k#z=XJx3BdBIXV75VX*$RcoX~%WT1W8mQ*X2<22Vx>9k^>RCCdfE=waNWIbFn-3hMgvW{M^wr#0uZ%17y z8}H84QO?47lRos+-qUvIg|Yu0Gs9G8D^4$N{bU<%$nHH55nNxQ2?TBrhUS;oeyJFE zgk1QxMA}@lqtPFL+jiaT0DPS9q;?^LcuI+GqgYCW0j&xSm@N?1DpoXF?rC5$7$ zek&Ci@#Z;R8zR0RtgeK8@=N<*cw**QG3AXeawKe`>8JI+stL!{sm#fCD3|vqnD5R* zWti1Y-OqrgUn)WQfaB}53A!@aa=_^#P!6v4=Fj2M!>`71)(P>4PDW9CpT*zH;$Q6a z@q8YKozv8^EOk52*Iax`3-*noXt@bnsJTFmJ=8t;yUWOF^x&mBEx6e%_v)vYex$Pi z2Q0h9!x{g`q;EdG{jgB>e9tA!7Mm3kwInBdGxU3Ew5;KS&fD;d3C&W z8{T-irDx5VRh5VuNiF%-xX76_YX6O)7;CFGP;sZS_AED%mlxhF*6k0;W#+oI^)-8I zER#FTkd&k~P@#S6*yo(dfHblUudx|;Psjhd%Cz1l97pYFe@^-8E9U?Ilr&ZKRBDu< Gk^c{49goZa diff --git a/docs_app/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png b/docs_app/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png deleted file mode 100644 index 1e488b1a4946d1684393920b7bca5fa3017365f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7229 zcmZX3cQjnz_qL2~^j@Pxmmws2jZTyx`h*Z76J4CrXMX-G&&=!^_?Er}LQ{IFCM z#MY5XifDMrjCAim3cj&bKpt?bgDF0o_1Q{XzZ2fLM$!G*|9g~rs~6s$O1quERW7j0 z<|(m8P3q41J71ty33EZbhaT_l-L0j|Ac@uzV5A}g{C_6R{h)dVt9DHRNE~{LZPli* zTF;SV#0qIwxqYLlLs84qc~;Jo`<|!V%uYUITtA!`7mK}4t;^`1XLm!iVT{`>(^S^0 zV#h^v@(vttd~#NcIr_ylY8GQxn$LKpIGd2{W#FCvGM^7Y-;p8^mW-v3#>WdBc>-zV zD1SFH+)bxkDQ0IPR~${k@`;{LRlZyn1Ro1iPYN<_rl;qn`xy&XQ9rLF^)NcG7q4%{ zQA}F<4VI^M_>@5f1ytQ6ip{2=V&=!5FBvl7+F5qmFi4{S?}pCF89esF$G@$O%`N`I zx#YNBK(4sSrmzzq1hsj!oAOmaI-GHGmDH9)UE zR9Anmj=eGIL28Mb^n!@7?ZZWnd_|9v#h={<`ee<Xqgpz|lqj0!ts?V_i^Oxw6tLC_f|p7y4$jrwGSf%kM6A-qJNKC#@P_&YytaFJv2M zWhnazm8+3Xi0{#52N#p3LlnCxXWyKCrpX7fxkZxjvKKzDD=D;`*7)wWp_s!>rZ}32 z%`y-Poq=Brz=DXruIXMh`h6^^3CC+b9hIi+Twd1>?kaaJoc`E;=c0{#GH0zCJ^WE) z1aaikXo*M?ipE)FhZpqEO}iKjXWeA0mR2>yd)Jq5Ri6+(gthRJA(&?+xsD{!Mdf-S zYS^1S@Keo!O(}|+gT7w4GF5xPp@84t(zKL!DaY~MjBjJR7vuf>>nN@NdXU;Ne9!wW zfW8mUo;j9uJNhgdZ)J1*I!guoRV8|Aj{Dc)Q`Z(XCn^>Gu95_EgX0H%o&m0G{&o? zV5giVW)K<%d^ebC+osPbaKqiUpS)1Joscx}xt5b}CmWg*saVvW)-c%7Iq-5dw%fH! zc4Kd(3B2Ji_U0FJ-PTev$3j(P1sZK=bNu#g#kRo`>5XrN?8Rnw(rT;Z_gHC0nqEiZ zBaZ#=?_a0$F|_bat#)L+d&d)-*tf>dj!?x8UfRtQ=J9^G?Tv=tZ~ZqFqb62rhtW*y z1j&9=Nd}nfZlA(nS z?>+9dXuJ{!KBTXkpM2jT-@R~O zsCGEM-qv?S#KxbciF9I|r|CE5NG2>-8hOQk#re98;ia{lq>rO+KSxeJ|IHXXelnL^ z9)1(%9D`(z3#c_4$CD@n5stS-UtG*NvSv(t^d+aE=UNk3^!_%%YLfSQ-}b&u(g~x+ zb0EJ)k5mxztE#-r{PdA3m20w5{a#Mb{=sL57a`4Ds`u@H!HiCQyhBSF2j%cM>lwEr zvt?*jpf2S6wxQH;PfmM=ex45hxe}FU^tR2>=8q9x>5#l?Ygx81wn)+9J;j09DX&P0 z1gT+cBRx07hd_v_X1AODb;iB&T;tYswY5Ejbq4*?W7k9f$^bYh&uE)^U>-t2XKHF8 zHF!Eq{iqeaNDC`RO zd_oLzPe{`k7%(yNY~>lKNSjg3>RU0E%Biz#_UYd%5~2LNzKg;s`b!3o=<%WBox6&g z=%OBih*EiMB!#X*2b8MrHeyxlIa?E&qw;YJTrQ z#&IH@{MpE5KrROnHB@l5fY5R~;69-}sMWLCbr*H->T1#vEm9WWdtn8em!nDND~aU} z&U~mR!McfCd1o@WCX1xzGBw!^6*yWXfQoXTI$zOHsY4TYo#l6XLpE^hN!0Ie2gm`* zI(g!2HUSBspm|HtKg0$2kn^*Xt-dqSfVs;h)fUuPzSYb19zQS>En3LhP@{1joJA!+ zqmTHlWDN9z=;e2r`6)h#wP)4v5;0-Pqk1nw<<#?BsTfC}7K+>~yk<^;|4$6lROnr? z&8B=2iq1@SW;G*5HAIImTTw&{-zDo3`;Mc&;(k#*hTyp|hxNo|C%bOH_&lkG9uf$a zyzUFRNRi?SjD$WvBf)|q=jGnWwn~C_>wmPy8_S2h=JZ_1jdKW|jW;%aPx0#D9Qhy( zUlq)Ty)5Jou6smRVDNR)Dm|-M_^c;BNhXx-@mKH$p0txoooYU_GWr0k5SsT&x6s(F zbH{sDKSy{`97Gl2)J*a7*7O$S@aZM{3<}&_@R+iw{xLoNLl|9wNBT4K^#WW>o)i@U zR3UOt_P);8*tOdZZpBgy(eA5Kg7!?i_WaxG30rRDjQmpe^B$KRsr>1J+;J zPxNK*!rT<}W9#k+5D@VzAGP0F;%{~G1Gszl-e@?sqTZ_4G%Ot%4FqtwFLcLttI?lt zh#j5ovKSYt9GI zyuv=6G2UF-4tf=BRkPbiNsEqK1+9N>YtCD8@~yyI%{^r3tf>Df*yZqoVw(iW|DwAq zd|f&;c&_&4Cjm1f<|k=+btd#xg24_D^TapZt_kaBpO zBjgJgTGo>BM2U&QOaxYg)8QI+R8gQ4Gw-zLU^`h~bzZb_m^vDRmOR6;=BUHUavU5g zUnqJDPDq3hNM)nDUp+{3gh;^KP{-yD6x-s!9rTtFtZezsD#-C*-zYWGuoS=$j;He} zDVfmhGYkH6pJGmS@ius=R_ymjq||%Vw*nQupBs;G)!BR0!BY6K;V-YEogo!6zQ|}* z-mnRL#bx>`NR|I&OmipBk(W96M0Lks3Pcn*yWf@nZ7Lam9CiGQEAG2jzVA_6VH=G* zuj_c3mAnG|C)*_d0JXRjS0GCi216<#vZQuLMu zY|y$tl%Hwqo``UleJYUm&vU^BF0L8l>HeF)a=Vyl3nWi)??k5jdJd58^H*9Rm>s%) z!Ny^4cHML0wF~YJJqldnT>l^GX~}Zjt#OIy?uO8CA8FL+n=Njc`FT9&i54+xbjJMH z`VNpBW=ErJT_J~n_>}W21D_JM$@$)tP?~Oxi?~DO?epNd(Nwp3ROUs?jsbNTN+j(b zE1RzrUXK&~(Zd|rVEV_0*QZJ4V>PlokFA`_5A&AX<0Bb;{_ZqCnJO%$P zCYvivjkW?Gd+i>czg-34!^EH+GKm-hSzOxZS~;JRhDn{559pB5Rt@0rdu}IuYEa05 zZ%)2gK|F_&*JyD+(HR`h68)6#-TN@!jDl^L>+mmwH#hlLr&4jGk@L(EnTC?PZJo9m zD+9(v4)BhjtS_l4t~4ph%qIQZ>0c~_Jm?Jay98y>@E*@3+morfK--Fv5hj}dUPebF z^zOi>kmVT3t9B8=hUvy``wU>%eD>coWFEIq2|2~~`Z-Hp^cV_E?zTq&QG*%#gCXZ3m@yNfl>IrtPFz#vJf?6v^LLqeQnY9BX z=!E;v#GTy*DvH$SO_r1AND*k;re8FF)4|Pv=!pGqlRv1#N^<5IglJnS)k#aCO_J`C z(A-?T>amPWQjZ04vyO)!s#K)#s9U}2uRU--8^K(pR==}QufM##cT`J#u@=tIHGKWG zW^}tjZr9~{<7?ktn3!YbBHfL?xBZU#y3AYkiV7Jsn?CJcfSgZS9U2HeDg6DICcP&( zmMu;t3MR{X@OrY;_+h(y=wm*}n-qVar;CPqCbTa%YwN~cOUQNY65VlVq!d4%;oB1E zwA!OYy;!ki`YvqhE7haHap7|6Ui<+vXikdQdFL6?wGsP5)=ZbMgtWz4gXxl-#GzJ^ z!hNhEisJ;Xc_~Rt+E)krxcnx%RfM0SqJB`Vt%Hg4gp-G2j&cz5#i6oxsI!6gzp0*= zTzV~G&viMKXqZMDz_|e6i~`i&PWL3>MG1N1b|dY~*{vA%VGP@pA9=_FjV%WVgW-3~ z9>|tr(8=Zi8Ac|BA3`3f_9$3|hYZ@z34~2Fj@}&2x7woxzd=f+ z3>*05pw!^6c3q~8TWmemqCIfI?3Jfauxrz^lF(CJk@j2$!=TMnMSJryKlN(_&KZ9 z{b+RgZ6t#(?nXyxVYm~M%~Z@w|0WEk?;jVM3}l*XBt=fg1>I}Rl^H*)h2cf3nx7mJ)zZ2YK36pTVyP3bv9Fq@yY1NPjE%V5nl&yK6rSmJmkSi z&yNnm{bO=z7b8ZK?LXc*vC)o4OG!^~hS5oyJC6rm%+>CBi5HZLM;C@&NU&GbV=(z- zx(OaQ%SNyW4{3(|kRvi;ziE+--jRtf1~n?}yzqiQ_zM-O!MMnSUw-bskU{HZH^@HH z+ueQF_lse)LHK?yna$M89Ac1cn645%5Qi+UQyHUSKR}Kr<#gq~VO2UYu7=Kc3lA48 zH!FtJ_v-A+!gP0Ca&qPgUdy0Z#9-*nhu<(R!>0K^v$EkyRX!iXXn9Bcj{cTWBWjT- zFExMmpH{@e%GqE2EQSB=Yv;(I{*E1R%4*-cNjD}y-{a%pz;#!*+fZu$oHxV-{PQ#D zhaIGl=iZj6DusrY!++_a_DZ|4CIj_75?p(0_aB3XHjGHl@(zsuHmOJTvhf))5`-@L zM5Kr(JCN?y#1}I&xIAgjoM;lH$@nh$N?qFjpklkbLGxmFe7uNz(Md>?w67kVd-2qs z==%4)kzhFym|aoq@70xsih3p{zcWmx7v~ApI+v343686zZp&Q|YJax3`jv%vMmT5A zG-tyRKVe#a6sc4i;9q`$qr*yn-yI-{k#T}}U_;)%GvJAP#tbb{zm3R-7a`#7N~8w2 zv@hI;UosRj%ql|@uhDLfxawTbKh54!_?g7_JN?5LS&*%c!JMT39P_nr2;q`gb&Z5> z8>EScRMaCFZicm8{HHAWWA+K8lGy6DdZf4E+KOt$pWl8+^YueTfAb4Wxhl$a*`t!M zcPXO>a0N&|R$xd%V%5~f)OW8~LNf1OoL+(A1Nj0aBkok*TSt@(?}k18;Ac!Fe*RB>{eP&adx91+3h9@v~ zV%!g7&3TGKW-K0I$$thR#)VpJJyg8e5OW$v2(8yj(bGlRp&9!N)h_n z9A!Omez;Pfa}6Pu$h?!yN>?uJL#|ma^(-x8Mq)hQj@JKID-+9Q;+vBH^7_%c<|7|( z(W;>4Ol8!D+HH@|k>UH-v(sXC?^G8*5d|@D=c8j>yUb{qOqa^C%4X89aJ@1-JqRus z1$avK)QtoB#J>|OY+>IzVs0lN4ufk%FdXJ2<1dVkF^rI|4(ue11Mjn075_f|8eR}grG%3&5QO-XXJ)tR!EBf|y zv)6o8bTo&C;@O)#$*;*PrA47n31sKO4*~Z93;u<;jShh zP_00A+jB4MXVlZ){e8EU_Ui5$t%gnuG?S@i!9?>_Lm>IC=z;6C# zAYp(7Tbh{Hlw1eZ^A$g2*7CqOng~>l*UCswtb;AUoA#eRC*^4`h`MrVTLp}4oBm5I z=rFkV8T**me#S9LlFX0Px8#*-NL-n{YN(jco@M2UAn6=;ppGbE!NzBYouuVYgIH1L zvfetY53}i+(Q)I4(DJ8mbOsi~(LCW%YJm0MY5lb#n3){ZV7O#iZ)%uGFGbNr)HnOX7Qpxar<%G zCIrJJo0|&1Bgy(#DT<44C$0H*Vl}FkjGbk1w<7AV#;>k+H6)|I%a0lTOdVCyu7%6k zl?CGWmhKo(qxb|%TcqmqRrQV}v=Bz8VD=G+JX4#>dljC#LfVsyS+3K)--e5{LTO{H zfG^ld5+2{zZuq@oPsGP3gRp5fKW=*xm0D$2VERLbTCV*jK!A~M5C48)=-8y=kL%-D z+LI%$e>o2_rcB4HYHp_)SC1?6FdO|#X!a~$X!KVst%)@jC!!96`Gi#b^+V4y5Syo^ zWeIY)6yTCPjb_R|Ej5=+A#gZOU!lO%--r-)5q8dHGEF>=BrabEuo~`Ianbaxh=T+F> z#H+_9%!Xd)U;G>Oe7~QCIh7{pFNc|F6>8t_xQ$e^Pgo<+qF;D?Ke_r2+tQ`pk|6WS ztGfYz3{bugICuUN;~lP1WuP10&1SLJtVF2Hig*_V6dH({|F9a_E|A;&`K*DfQ46pY zLRH*t27pXbml+9hmmBDcrSNx5Jk7l*!mbuEz^In2A(t+*vJoRHWXw-c?OG0kpPrg< zSnys}&CPeL_)m6ilC&M&h}Uu|{Mp`U0^QkIdOqtF%{%r20Le}m5c|X$kez^ZV^V)2 zUfn&|v{(wFQ;G{k5oo;$VgP$fs$$yXRx<%dCjk)a2n8H0%+w~Hq2@rV6ZzLN>M5GA z20Jvg7vP!a`Y4umOCs&|Co`c>+xohXeiuwzo@GOEp3&(!InxmX7)m;IV@;L za(FE^=SFi1k;scC4vy_D$3*hlK)pxgXHm?DD!KtORgqG%w3q3i8-1`HcBdWoKvdKg~}7V6=pr?2l*(c>-y)@PjvNm^-@l#F(d}#=Fw$I0Aw% zyW9MJB0HZ&d$}{=&!vR8pZi~2-vjGZ0rqM|tOX{meR}tE zxo{LX%)%tkMV$S`S)G4NGm@tl27Ud?)I*@8V8~$8uIQL6AaB@u_`}Z9p7)t+<4HRt zDsy4(=y7EV5C69O-lUh)1?}0Fj}uo_qb_R{H#(@h+b+BmWa>P0d2Ysi-Wdoq6$;

&nr2Koo_x(>IKF?Ga zVo(T(D&^y$!Z+v4cd+aqJ-XnWD2?~3cjHoArb(^845x8`Z<^0C54Cn2V3AK>>A qwf0?^$k)i=dN(#ssTHc`Z)_AT3TFCb))B7-NsRQ&bSt%=y!tt8LmG*ZqXfoC*(fP#rE}EiZjeS8vVkB1iVP+x2*{)nsW;uy z@Z0D6`|FFKNDFK@$_#=23drF*qKKfj_&SCX#VyAPPXd~5uWErX}8-{yR}q)}ZS4oi-o zF;W-w5IH#;4?vl;JoUVf(ABAG!`emYN(VmW?!BHaGL6$*+6p(F?&m_< zML_|Wf21co3`LkyI_T*G8$+o#jumAxho1hvaC2`~EODruhVqy>Ul$895k;J0efX#5 zvQjSizb?Y0r0L`miJ=Aq|2Z}WC>{M<2bU5k=1L20Zp?~h-a!h!mKxtZMiDlow?9zy zO8;GW@Rb=#M;TVv`ynuc$Sdn1Hxjcv?$P@}4nt3~=tKoxK9JujT(*0SxdOw@Wd!?yWrbt`3JcMOn~NvIP`u40+Qqx|96;W{-WvFnChinWSoc|+ z85ZpM(oEk0Aq2f-(^A@>zp?Mb2^;M5~-`l-TlavJdJbEyswZ3D)b%JQh@W`Xd zKW~eU3OxEVFBlN7Z#LC5XF=|kF7~FCVvhvBn1c{NeC_-Cv|K~E?>B9;S6s;XWlb>j zlD)CM|x2xJn#;vqr(S77Ci|{)N1XJeVO~xBR3{h4&?>ns&7*`n2G7l&n5H$5g4* zAirj1mZ)Lq?h|l|0y5O4~gzP_IeP4gO zFg~FdQ5)EnCy!o1iKd`@Q{0CSQ>z)QxhYmy=XMCb_LK#-sGjzwrlO9nBZjK}Fz%Nr zDmByG*(~(r%1L8}*qp2G)@)CM-K$fq_${|7p9E<<0V?-P-5|bl;(JByNorOCt@i^` z)4_ZpO`XWI;3nTso}WhbO9CUpBd!eLIT`?+Q`UwlmEFM4OFSFXhp&A)%ze9mFH%F- zC^;&aCcT?I-!@JHS^v}C30(4v{&+MW!i{8w@eGTT@k2WJjM~!r=RCAS8Xc-~RK9LD z;Mw!xsDU=m0Ty1D?Ew^L_1T1;Fm70n;mJ?zlpqTWO|+d8X5;f@{bKDafT@U60QCoY zwH}9j>8(z={kmiEKl%gT*juH(sV$kaX658f^(dv{-w)D^Sho+p418ZQqs=DBt95~0 z(qjigx}7;{T+~QK~4l|4pXb7{>j~FZ?+}_yf{b+D7b2~H~*4=a@uhQEv zZ?An7AHxy+sZfpMe`EbdF%4I0vH$AV4Iln@=6D!B%)}*6109e5-Apa)l>OGK!Eccgzu}g=$9hb(OtFZaIUAJ1D{(n+2^@PHvb?aPv(1+j&%CaqTj_I-zp1adP z^QAxBtINBqPpH7o;`wLI3A>P>DfaQL>#+43*OI#10jRHcQQ%v6&VA5oh;%bWi$ftv zm_5gvcXH$1ina54*G!^L4>%kHfVRh%7?!TZE2ZT8F#*Pe(_PD&~G&}>mTz%3t&xC7G z7_-_;wSJF4z34Yy?6Hxx2a}!nyR`SWU8PS=uocPiWAy0y5A~U+lPuq4{>Xh@o>kTP z0fD0KxktVNC>;?FROMJR4NVn0CUb6PZrPXA$7e~^6}=WjxzF)yFDMsP_+tmF6b#h` zbF_eiVIp@7(9?U9b^Tq6eY+|jFYNvpZ@!ng&YC4`=(L=I-cAKZDVlqp=<-1{l>4-M=+Tnyv~3pY~q&qaw+0Wr%tAO0e)6_0yNTJkYv zUmH?_nVKem(v&5m$PvTS$+pzE!y3Zvr};6q^k6?9_^Egxb&-UBuO2%MG$27y+<(&7 zFbOq_-9+~O^h{x8hngVVQQ8<7pC-i9TR<2ck73o)f;{gnz3YEQW%BQ(|i;v zj^XqlO0=Abh5>xEy2yrmCQ((9*b?Fgc?Q!Nq)y%Z0$oVtlnDUsH9{9+If2JalZw3^ z3>x)&&Izk(O6kR7pD%{v^PjFe=*-yNY6WBxoWEk;mU=m)|A$dzQSIGJQVWZgkOUa0#Ejr|NHZQvM2S75Hy zOC8LWkSKA(MGaqL)WY+qcX>|&hg-gxVJ5pKf(4aV9ActKFwfhks12QQiIV48^( zgM#-7w>{cmGjPxAD77z~$jO;xC)$6L-(Cg@-5}U-Nv=K3By+CzkH@OLOnNWxgF(}S zp`-XcKZ62e&67o85I;OYqNU(=6yvuSNYugZ-`D_Z7BmJ^mc)P?e$_)v@{C>#DUAAy zVap`&(XM^9mkUT(f&=}GdN44`VLbi?NV07v3&X}Qq z3k*y6VP4yn?4vGQXf@`ib+0SMF++7J#d#|zxYkIOcZ!*o(!QOC0cgYz;wMpwd3(f) z6UjFzFTK4W+a?~VL&g7Idxo@tImgc60XZB@D|QMr;tnwfd`~78>5{L768*+^vK+JE ziX>XpABG(<4etw-iD6^>9shDBLPgB)_myk4vCwyM*zpuKdf|94GgJIxX%%yD2GK6DRb}aWN zP0GojHKav6=;pek@lzksL>QF2c1;LyIi4_Bw8u^{@4$P~cXdRE`|R<3^~?9R&N=i% z*m6f`Yyg!={>Q`*&HgUBXR*K+Doi&9fw{Z8Y2+Du#0~P2M$nR;$DrA553iRkS{=e4 z589Ms1LTAyEFYFYLpqJsjcoF2QCj>Fdn$t>xv$IOb^c2P1`#*JRp%pDJiUI)gVc?X zYY@RS&|*w@#qKVaI(SPth}fN-Z(F$S(+bbYFR~!wZ9C8e6So zbJF3w$)oy^?w(bUe`R$iNL{k<0%nJ~l;GQ7oSQ>aXTIoySFLx#-g> zH?kY*tKzb$;*tYj1-w(BfG$MpGVOlJ-LoOmogF$pqQo_BvZwC(6v7=BCWj3d$J+ew zyc6J#p34_A6z&pyYs$HMTttJ`I!mBt141Tj+6}5`z3z9a7b-7_Cyy z!J!cuM3P?f?53Gu8Y(}kfGA05OM>a<##|Q?;hmnXJw5iRg$9?1>~{qDhUr4aGLMKF zjOeZ5Lq25c@&t4LvH3cRm}+JS^gV|gX)P{j zBsS<4)k>{!DDzdOS>(b`If>Xhfq@i?;wE!< z*hS@gx|zE#S?}H$xp%egF3g0rEm_aC;R|Qaxqqos%rdowy?bgcqa01#mFeas=0OdT z&;H)3^k5G(*WVYNIUf?b9MaN#ET`q#$(yski36_xgNh7zSj5Pf8h`6!%?>21Ps#FQ zLWX28Y52EM^B3N>rh}!niDk=)2;QYk`Y|8}*A3VGg?wtUYIbzng%#Y06%ri=5(mdgmv?i$!CVC%% zW$6L3vVIqAANtp1Kh5q++R2rTFlvwxkAP%l=#a;WTz73?v)9KAP_jK`iF@qt7zk>j zx(kVL&zud{x`fVVK#-Usp~ugO%^ z%z|8M`8kjKy85|a7T~3D@x}XF)=A~PfCD~kc=TyxL1UQLVAw4u!0Q7Yxq!oCVzXx) zCh1`)zQUQ=PmsNq�~oy*`*Cmw>T;kkYU{n)-B|+=$1hmqL_k+2P?RQ_Tvww}5=dX~7U0X2XVgiN&DTqh1M`8k4B$p{a zk4*|u=e});WzoCHt`>MohD?^kz~^O=%J7^-dRh9{0;_`bk8wBTYE1S7TV%3;J1?EK zOL@I23_e<(ccn^x>v7gwX8deagrf&L+fltgv<`={4|RGOKMtfQ@UENR0Md~NOJ!*W zUl;g{Xa~vAJ4L!lk!^c^9t+0|nTY^PWyzI>{kcvmiy?@=Ahl9-NrB?OU_lm~EN1A} zgEzE`C{dRqg2}qdssDU6;fDf-bVtcW=|qY{Vf3%qpiXwNjFN+rQ&zSGi&hHs{(*5i2HckUif4cZMGC@8z_kx|dr;m!Q--(Pxt=g;kZgL=Q+x zGOe@mh-0=rxdziL%S<$E^ewk04R&BzBb6mGz#?8j&^r0oxW+$ zS0w^NU)wOQQJD+mU7;3#8)vX>gQ3I>e9EQrBNuNqY@0M2Jp>=E`80w`Q8JAK@P<_t z?L-gDC1O)KHms|CHsd|j&x;5Ps%WwFO6DL;>p*hHNmN_wxJ`_%A>06!jwH1*VLI_GSe%2!IkRl(U=aE@f1jzJNS-MEX> zdWGCG`McMT)lZJ=4`>01I&Eh6>oBjQgO^%73l+jI^d7-vJ6CVG6jT)*qpT$ zq7Jt_%|`5alQs&dk!jfeQ~C9dv1ErIZZF+Rco=)Yj?~X^ZP?~nc>m<2>NT3*Zv@iU z1eBf5bIyKOG^fe+M!%g3Z2Bj(bVu8)*^RF!m?pLiyT;{r9Yd)10*Kb>yAse6V<6(3 zjv|EdxhH_4Wti{=8(gN>g<9EFDN7xmFvD{%cSgQPmG8AioINwtPy!X?v1P#60n$0+ zv`oN?Pe!r@^#_Z$M4aacfmWoLBnj@{i1xC}_y7WnPOiz4h zjSjh|Mx2NwzZY(9M*cqiSiwUzO8HvAG4!a{wYx_lM#b^DSZnC08mYl_(>cR;E)AqJ zj$sq^WXiw%5nHl@-*Vi8Qm8z_r03OL4|9B|JB-Uk(yAT$K(cRZg>pI7TrOT0;C~UZ zB`5#mbT=%QZ|B-d|D2S*f%{aa%sG^0<4A`1{0vzWbZ+5W|c) zHH0@hMmC?zMx8McDAA#MXKmN=!ZSH|4*o9701hy^S5P7c_vLc0&a>bDY9ajm>MzT! z@<4B?yke z^33N60dR3DeNzA`2e*l_x14NgmawgP>z_efh68^{55K2P)*cNe4 zlO`VW)Qs)d0YUr=9?5tcw2I&OyV=h#9Me==7@3^Dh)DwPTl?^;zR>4~sRV%5vDhv*)ZMsvaLt(i{=8o1pr~L)u~Rsp*zM)@+?mD*DWYffy>2Kw?9plQZ_Ev&4$`2%Dp^rN z8uS3%nQ_h4XRG{gs+*ef_A-*vnmrYLla22ar(%heqJ1$|1F2AA-0{gfH6R3-|BW`A z8+TYvL?16PwjwmxhEa{%KtV0X;5-o87qLp4%Vx_Qcg{pZRPG*-=m0`CzR|hh{uKci z(?Y&`Yv$8%RJ5K!L9fU+lg zn9@LS$e+MTo$$3Y6M_c%B!f(AJkoclkT;rOB>}~9R@?pV#UEe3j?`1&`gDquKrNE6 z5}5uj>Sc|Ga$0-0PoG3g4zMPWel34$a9=as-jp+t;B&jz&xg<~CO*kt>1;oo{Bj`p zoZa^@H(~kTF2PNxe#SxScpG#LyS+?^+Ze!}>5>$+*p#w=73p#?%B?JJ;fv*lybQX+ z9$FWgL{}>Ty8Z?^uJ!DAKiXz#DzcH!mCb8C7xw5SE+DMLP$KuKOlIF#)5*ID(k8ag zR`-n^zX{Eu^XwhU0$xj!_5?@0l`Gj5gem!cM3w7&&jP5;Ah9iJo{%8wwP|lQ$jv?Z zj`KVnt@|7kDb$*b+!HIjj%$OJ%fz@J0^gl5WWcUn->G_shZ*FP89Dq*@xqX+$#_<; z1hc?wpg<1@O!Xc`oiZ?#h43bD51Gwy=+a4PaMdQNkp#6nsCM98PHE!=A-%3AUqcF4 zUj6$@KPEgdR0NhKH9F@RpE94$khlHuWH!sluMfnY+IM^Jq~MTnd!e zdgO5MOgL2Jx`j;mX&PJ@QpVY@xy<1{9Y>e2k6&+RdZo>I|8g6YphC%}Mw^5G7^L*m3px^y!0R@03RPeM~n&d z4|tiq%MM~3HZ{P{nVIN5*t7j%6$vvv?|CvnJQ5m?2XbC`t%ow34-kX0D>diK@?h*gWh)xlNBDhyl4LsY&yk1`TE}xB{FVh`j$mUX|10bh+ z1^G%PB7o~X38{O)GVTi_JA3{^+|U>h6}L8`p8{dks(vDbq7vc9aWA4sO?rAG8 zNP!;K4kxaW=|_g|(a;XFOcavW;NJeGI@$> z+orHudx1R%BIVzAX=T$8bfU$B<6=XvCzhGa%GakIakZsWCWQ&+v7emZ%i^YPD6D+c zml?s>T-N^(l%j)t{b8KaJ^Gx!U**0tCD&hr`{?P+2RGXUBM3dDDqUYkvg}RKn~_5? zR%GI7<$3PT%-~(?VS4pb9M>k*#)mF)ET*nc$Vq<%=F@(@EvaGA=-^`pGxuu`K-=Z9 zdsDpqV5JQdDw=%v<_}>Wz8y{7E1*ogW9k|di`XIZ3si8O)tzR^PB*&l$o=mqw5IEX)duv zt7Nl#KC$2zo{5xBKtW%uN?#v^6T1ASY6-6~<|hV%aZs{8Kp$;9f8U9ZfM zA)6U0i)SN|t*k7|MsLHt%#l{3!)r~U~N-clnGdm31^Lfx7y5Ixkr1!A{&!Z z=^?O2!3EW8)LiIUZHM(Kso$o;K6v zK?SqjxYl+=NT1T{t5#lwz(ePxI0I@Ue~Nv$nAxdpSYB0xI^ zMS(g^nMnn__C44R5cs8CADkhv|KxRz#WzIKX$SJ_Z!W%2n`>@H_q#FdrR_hloZD3nmiRY6U4v^cWD+acD@kf5@?Nh7yF=;> zWEdt@9Eb~7MJS2j1om3QmSF|U4=e-nG(qjs5Bs*QN!lUKfx7>6yMp@QTXV(M`3v{~ z#3rhn2)!wHVd&t`5N83JDKNeKviVlVN+cCS5_>bniWiqlXztVMMZ7IFUbW_OF)Bfe`&?u!WVN*-JK9E2>iBU@{<#{ixT4LIs?Nn zp>;wjQ z3M~o86GF(FS^pRv$LUahNmytnnoG5%8DaK?jA@wY1>zx}4S=3f+3&?GJxl%cqY}Kg zfu@B`x7Wb5e)zj%6kcD^JmK+reC+kSzwgGS}@mSr>%cU1)VK|X1Feb`33CsmQ z(oJr-fZQz|5G{esUuJGY?c7;}>Ov2|Hb^U7gO`Pp^)GKOd$5uirHZk?od$wpJUX9$ z;ng@&2D4wIL^auO6Vm*^0qA7!s;U|B!d(NwGX1&m)TDr>SAAZ*rbB5HvWaW3uyPOC z=?$?*AAK^DoV286j6Ff`SqojAeDJ3}$03klYR#(QSECCQhIs<<$XkhUArJ zA{J%We|f4IIY!_uD4u8%8>h}Hk{A|^Bk*uCC^l4rww!{bI2%np*8I#|haHrVC zr${yicZ0a9<(T}*iB|AFY`5Q0S6P+W&(0`aJekY}pxD7;W2Zm3K;3%ckA{7FQW5-G zd_7b@`}pcPs|`|VoN);Hy?6;R+l~(t^t-aELMo3^M0tT4auuHn1+LUTo{2bd6zYyW z$0u0*tIqbQ#qU*4nZ;%85VXD6IQ6S;vto*mK3z$4Bp>L_v%Czg#4dX5eqj*=UP<*A zqs1RB&-Uxt7`ES<$cPmhNn20wm*%sL>WMCv z5d{Mv8BrB63n?kOzcZ3AraJL6S@7w&xk4ozCPbJT7`5;l>2a#CVn)(D+~J$yajU3J zqI+mZGxY*$SpV6-v7o>f$#~FEm#gGA(E?PR@#}y*Ue(`T%FnXnR}d;&!b)n0F>AIe zIgAE(zXEzv;SXte{H572?>cf!--QYI1hIM$qV$}VVm!8rI>G?z&an3LTjpQVopv#OZ)kBZVK4Zb!IOUZcS z_Z?LG_!Y@o=-`@%PT99#D=<$ip$S_zR;Tk=`pal@Nzbn%mNYa2325%G4bs%{EoB5V z_ihi|^&6y6U|D0-@pQA5XBnm}+OSfN|BbM0YwWPBJ!`k-?onsbX$dk_%Ax9u5YAEk z;YHV|2|#fL;fF?OnkT#DF}m(^YC2LknjOekw4h-D!`ON{bBTm0yge7j%uS^GnD&a8 zrBIZfWE@amk@y*AuwlgG|4j}*EB7eW;EvTO8d5Z9H&LIM^S0pbbKidykBxsA%@3!R zyb{7-73^>x0;#Im13JtCe+*LfxAu~gP8ro^*jsx|ZTg*cBNl&PFYUnCrl_62FuG32 zBr8Kw>95a_Np=QzCM#Q{Yg$rk)=t3MKS0tN%vPbdC9OIUrm_kElRDBdZ2w?VSij({iJ^MfDEzL;s(dXzrZ?p=(rlTaD7qZ{z_hWSaF-dgG6WH=! z<9ROAs+S@gsY&Jwn}r%uyrGy2q(M{U{eCP=&FXgFFZAiu^+?!G-+WY{oG6Yy`F3L? zkUO>uON6BKuAyhxrY$_r-JY3O?JtQqV8}JMCW0;x<>LQ6y{8K_)cl}sAN~IT;aCjk diff --git a/docs_app/content/examples/ajs-quick-reference/src/index.html b/docs_app/content/examples/ajs-quick-reference/src/index.html deleted file mode 100644 index 5aafc885c9..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - AngularJS to Angular Quick Reference - - - - - - - - diff --git a/docs_app/content/examples/ajs-quick-reference/src/main.ts b/docs_app/content/examples/ajs-quick-reference/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ajs-quick-reference/stackblitz.json b/docs_app/content/examples/ajs-quick-reference/stackblitz.json deleted file mode 100644 index 6b91b367d2..0000000000 --- a/docs_app/content/examples/ajs-quick-reference/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "AngularJS to Angular Quick Reference", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags":["cookbook", "angularjs"] -} diff --git a/docs_app/content/examples/animations/e2e/app.e2e-spec.ts b/docs_app/content/examples/animations/e2e/app.e2e-spec.ts deleted file mode 100644 index 524335223d..0000000000 --- a/docs_app/content/examples/animations/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,351 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { logging, promise } from 'selenium-webdriver'; - -/** - * The tests here basically just checking that the end styles - * of each animation are in effect. - * - * Relies on the Angular testability only becoming stable once - * animation(s) have finished. - * - * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations - * but they're not supported in Chrome at the moment. The upcoming nganimate polyfill - * may also add some introspection support. - */ -describe('Animation Tests', () => { - - const INACTIVE_COLOR = 'rgba(238, 238, 238, 1)'; - const ACTIVE_COLOR = 'rgba(207, 216, 220, 1)'; - const NO_TRANSFORM_MATRIX_REGEX = /matrix\(1,\s*0,\s*0,\s*1,\s*0,\s*0\)/; - - beforeEach(() => { - browser.get(''); - }); - - describe('basic states', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-basic')); - }); - - it('animates between active and inactive', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.1); - expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - }); - - }); - - describe('styles inline in transitions', () => { - - let host: ElementFinder; - - beforeEach(function() { - host = element(by.css('app-hero-list-inline-styles')); - }); - - it('are not kept after animation', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - }); - - }); - - describe('combined transition syntax', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-combined-transitions')); - }); - - it('animates between active and inactive', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.1); - expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - }); - - }); - - describe('two-way transition syntax', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-twoway')); - }); - - it('animates between active and inactive', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.1); - expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - }); - - }); - - describe('enter & leave', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-enter-leave')); - }); - - it('adds and removes element', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - - removeHero(); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('enter & leave & states', () => { - - let host: ElementFinder; - - beforeEach(function() { - host = element(by.css('app-hero-list-enter-leave-states')); - }); - - it('adds and removes and animates between active and inactive', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.1); - - li.click(); - browser.driver.sleep(300); - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - - removeHero(); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('auto style calc', () => { - - let host: ElementFinder; - - beforeEach(function() { - host = element(by.css('app-hero-list-auto')); - }); - - it('adds and removes element', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - expect(li.getCssValue('height')).toBe('50px'); - - removeHero(); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('different timings', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-timings')); - }); - - it('adds and removes element', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - expect(li.getCssValue('opacity')).toMatch('1'); - - removeHero(); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('multiple keyframes', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-multistep')); - }); - - it('adds and removes element', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - expect(li.getCssValue('opacity')).toMatch('1'); - - removeHero(); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('parallel groups', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-groups')); - }); - - it('adds and removes element', () => { - addInactiveHero(); - - let li = host.element(by.css('li')); - expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX); - expect(li.getCssValue('opacity')).toMatch('1'); - - removeHero(700); - expect(li.isPresent()).toBe(false); - }); - - }); - - describe('adding active heroes', () => { - - let host: ElementFinder; - - beforeEach(() => { - host = element(by.css('app-hero-list-basic')); - }); - - it('animates between active and inactive', () => { - addActiveHero(); - - let li = host.element(by.css('li')); - - expect(getScaleX(li)).toBe(1.1); - expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.0); - expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR); - - li.click(); - browser.driver.sleep(300); - expect(getScaleX(li)).toBe(1.1); - expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR); - }); - }); - - describe('callbacks', () => { - it('fires a callback on start and done', () => { - addActiveHero(); - browser.manage().logs().get(logging.Type.BROWSER) - .then((logs: logging.Entry[]) => { - const animationMessages = logs.filter((log) => { - return log.message.indexOf('Animation') !== -1 ? true : false; - }); - - expect(animationMessages.length).toBeGreaterThan(0); - }); - }); - }); - - function addActiveHero(sleep?: number) { - sleep = sleep || 500; - element(by.buttonText('Add active hero')).click(); - browser.driver.sleep(sleep); - } - - function addInactiveHero(sleep?: number) { - sleep = sleep || 500; - element(by.buttonText('Add inactive hero')).click(); - browser.driver.sleep(sleep); - } - - function removeHero(sleep?: number) { - sleep = sleep || 500; - element(by.buttonText('Remove hero')).click(); - browser.driver.sleep(sleep); - } - - function getScaleX(el: ElementFinder) { - return Promise.all([ - getBoundingClientWidth(el), - getOffsetWidth(el) - ]).then(function(promiseResolutions) { - let clientWidth = promiseResolutions[0]; - let offsetWidth = promiseResolutions[1]; - return clientWidth / offsetWidth; - }); - } - - function getBoundingClientWidth(el: ElementFinder) { - return browser.executeScript( - 'return arguments[0].getBoundingClientRect().width', - el.getWebElement() - ) as PromiseLike; - } - - function getOffsetWidth(el: ElementFinder) { - return browser.executeScript( - 'return arguments[0].offsetWidth', - el.getWebElement() - ) as PromiseLike; - } -}); diff --git a/docs_app/content/examples/animations/example-config.json b/docs_app/content/examples/animations/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/animations/src/app/app.module.ts b/docs_app/content/examples/animations/src/app/app.module.ts deleted file mode 100644 index b1ac87cca2..0000000000 --- a/docs_app/content/examples/animations/src/app/app.module.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -import { NgModule } from '@angular/core'; -// #docregion animations-module -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -// #enddocregion animations-module - -import { HeroTeamBuilderComponent } from './hero-team-builder.component'; -import { HeroListBasicComponent } from './hero-list-basic.component'; -import { HeroListInlineStylesComponent } from './hero-list-inline-styles.component'; -import { HeroListEnterLeaveComponent } from './hero-list-enter-leave.component'; -import { HeroListEnterLeaveStatesComponent } from './hero-list-enter-leave-states.component'; -import { HeroListCombinedTransitionsComponent } from './hero-list-combined-transitions.component'; -import { HeroListTwowayComponent } from './hero-list-twoway.component'; -import { HeroListAutoComponent } from './hero-list-auto.component'; -import { HeroListGroupsComponent } from './hero-list-groups.component'; -import { HeroListMultistepComponent } from './hero-list-multistep.component'; -import { HeroListTimingsComponent } from './hero-list-timings.component'; -// #docregion animations-module - -@NgModule({ - imports: [ BrowserModule, BrowserAnimationsModule ], - // ... more stuff ... -// #enddocregion animations-module - declarations: [ - HeroTeamBuilderComponent, - HeroListBasicComponent, - HeroListInlineStylesComponent, - HeroListCombinedTransitionsComponent, - HeroListTwowayComponent, - HeroListEnterLeaveComponent, - HeroListEnterLeaveStatesComponent, - HeroListAutoComponent, - HeroListTimingsComponent, - HeroListMultistepComponent, - HeroListGroupsComponent - ], - bootstrap: [ HeroTeamBuilderComponent ] -// #docregion animations-module -}) -export class AppModule { } -// #enddocregion animations-module - diff --git a/docs_app/content/examples/animations/src/app/hero-list-auto.component.ts b/docs_app/content/examples/animations/src/app/hero-list-auto.component.ts deleted file mode 100644 index 97a5ff99de..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-auto.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-auto', - // #docregion template - template: ` -

- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - - /* When the element leaves (transition "in => void" occurs), - * get the element's current computed height and animate - * it down to 0. - */ - // #docregion animationdef - animations: [ - trigger('shrinkOut', [ - state('in', style({height: '*'})), - transition('* => void', [ - style({height: '*'}), - animate(250, style({height: 0})) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListAutoComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-basic.component.ts b/docs_app/content/examples/animations/src/app/hero-list-basic.component.ts deleted file mode 100644 index ce23628d6f..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-basic.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -// #docplaster -// #docregion -// #docregion imports -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; -// #enddocregion imports - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-basic', - // #enddocregion - /* The click event calls hero.toggleState(), which - * causes the state of that hero to switch from - * active to inactive or vice versa. - */ - // #docregion - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - // #enddocregion - /** - * Define two states, "inactive" and "active", and the end - * styles that apply whenever the element is in those states. - * Then define animations for transitioning between the states, - * one in each direction - */ - // #docregion - // #docregion animationdef - animations: [ - trigger('heroState', [ - // #docregion states - state('inactive', style({ - backgroundColor: '#eee', - transform: 'scale(1)' - })), - state('active', style({ - backgroundColor: '#cfd8dc', - transform: 'scale(1.1)' - })), - // #enddocregion states - // #docregion transitions - transition('inactive => active', animate('100ms ease-in')), - transition('active => inactive', animate('100ms ease-out')) - // #enddocregion transitions - ]) - ] - // #enddocregion animationdef -}) -export class HeroListBasicComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-combined-transitions.component.ts b/docs_app/content/examples/animations/src/app/hero-list-combined-transitions.component.ts deleted file mode 100644 index 2811254c81..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-combined-transitions.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; -// #enddocregion imports - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-combined-transitions', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /* - * Define two states, "inactive" and "active", and the end - * styles that apply whenever the element is in those states. - * Then define an animated transition between these two - * states, in *both* directions. - */ - // #docregion animationdef - animations: [ - trigger('heroState', [ - state('inactive', style({ - backgroundColor: '#eee', - transform: 'scale(1)' - })), - state('active', style({ - backgroundColor: '#cfd8dc', - transform: 'scale(1.1)' - })), - // #docregion transitions - transition('inactive => active, active => inactive', - animate('100ms ease-out')) - // #enddocregion transitions - ]) - ] - // #enddocregion animationdef -}) -export class HeroListCombinedTransitionsComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts b/docs_app/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts deleted file mode 100644 index 291234dab9..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-enter-leave-states', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /* The elements here have two possible states based - * on the hero state, "active", or "inactive". We animate - * six transitions: Between the two states in both directions, - * and between each state and void. With this we can animate - * the enter and leave of elements differently based on which - * state they are in when they are added and removed. - */ - // #docregion animationdef - animations: [ - trigger('heroState', [ - state('inactive', style({transform: 'translateX(0) scale(1)'})), - state('active', style({transform: 'translateX(0) scale(1.1)'})), - transition('inactive => active', animate('100ms ease-in')), - transition('active => inactive', animate('100ms ease-out')), - transition('void => inactive', [ - style({transform: 'translateX(-100%) scale(1)'}), - animate(100) - ]), - transition('inactive => void', [ - animate(100, style({transform: 'translateX(100%) scale(1)'})) - ]), - transition('void => active', [ - style({transform: 'translateX(0) scale(0)'}), - animate(200) - ]), - transition('active => void', [ - animate(200, style({transform: 'translateX(0) scale(0)'})) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListEnterLeaveStatesComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/docs_app/content/examples/animations/src/app/hero-list-enter-leave.component.ts deleted file mode 100644 index 0a888698c3..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-enter-leave.component.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-enter-leave', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /* The element here always has the state "in" when it - * is present. We animate two transitions: From void - * to in and from in to void, to achieve an animated - * enter and leave transition. The element enters from - * the left and leaves to the right using translateX. - */ - // #docregion animationdef - animations: [ - trigger('flyInOut', [ - state('in', style({transform: 'translateX(0)'})), - transition('void => *', [ - style({transform: 'translateX(-100%)'}), - animate(100) - ]), - transition('* => void', [ - animate(100, style({transform: 'translateX(100%)'})) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListEnterLeaveComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-groups.component.ts b/docs_app/content/examples/animations/src/app/hero-list-groups.component.ts deleted file mode 100644 index d17b47d213..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-groups.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition, - group -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-groups', - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - styleUrls: ['./hero-list.component.css'], - styles: [` - li { - padding: 0 !important; - text-align: center; - } - `], - /* The element here always has the state "in" when it - * is present. We animate two transitions: From void - * to in and from in to void, to achieve an animated - * enter and leave transition. - * - * The transitions have *parallel group* that allow - * animating several properties at the same time but - * with different timing configurations. On enter - * (void => *) we start the opacity animation 0.1s - * earlier than the translation/width animation. - * On leave (* => void) we do the opposite - - * the translation/width animation begins immediately - * and the opacity animation 0.1s later. - */ - // #docregion animationdef - animations: [ - trigger('flyInOut', [ - state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})), - transition('void => *', [ - style({width: 10, transform: 'translateX(50px)', opacity: 0}), - group([ - animate('0.3s 0.1s ease', style({ - transform: 'translateX(0)', - width: 120 - })), - animate('0.3s ease', style({ - opacity: 1 - })) - ]) - ]), - transition('* => void', [ - group([ - animate('0.3s ease', style({ - transform: 'translateX(50px)', - width: 10 - })), - animate('0.3s 0.2s ease', style({ - opacity: 0 - })) - ]) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListGroupsComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-inline-styles.component.ts b/docs_app/content/examples/animations/src/app/hero-list-inline-styles.component.ts deleted file mode 100644 index 43fe2b7ce3..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-inline-styles.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input, -} from '@angular/core'; -import { - trigger, - style, - animate, - transition -} from '@angular/animations'; -// #enddocregion imports - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-inline-styles', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /** - * Define two states, "inactive" and "active", and the end - * styles that apply whenever the element is in those states. - * Then define an animation for the inactive => active transition. - * This animation has no end styles, but only styles that are - * defined inline inside the transition and thus are only kept - * as long as the animation is running. - */ - // #docregion animationdef - animations: [ - trigger('heroState', [ - // #docregion transitions - transition('inactive => active', [ - style({ - backgroundColor: '#cfd8dc', - transform: 'scale(1.3)' - }), - animate('80ms ease-in', style({ - backgroundColor: '#eee', - transform: 'scale(1)' - })) - ]), - // #enddocregion transitions - ]) - ] - // #enddocregion animationdef -}) -export class HeroListInlineStylesComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-multistep.component.ts b/docs_app/content/examples/animations/src/app/hero-list-multistep.component.ts deleted file mode 100644 index 7e77bff1a4..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-multistep.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { - Component, - Input, -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition, - keyframes, - AnimationEvent -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-multistep', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /* The element here always has the state "in" when it - * is present. We animate two transitions: From void - * to in and from in to void, to achieve an animated - * enter and leave transition. Each transition is - * defined in terms of multiple keyframes, to give it - * a bounce effect. - */ - // #docregion animationdef - animations: [ - trigger('flyInOut', [ - state('in', style({transform: 'translateX(0)'})), - transition('void => *', [ - animate(300, keyframes([ - style({opacity: 0, transform: 'translateX(-100%)', offset: 0}), - style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}), - style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) - ])) - ]), - transition('* => void', [ - animate(300, keyframes([ - style({opacity: 1, transform: 'translateX(0)', offset: 0}), - style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}), - style({opacity: 0, transform: 'translateX(100%)', offset: 1.0}) - ])) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListMultistepComponent { - @Input() heroes: Hero[]; - - animationStarted(event: AnimationEvent) { - console.warn('Animation started: ', event); - } - - animationDone(event: AnimationEvent) { - console.warn('Animation done: ', event); - } -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-timings.component.ts b/docs_app/content/examples/animations/src/app/hero-list-timings.component.ts deleted file mode 100644 index b410c22cb9..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-timings.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-timings', - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - styleUrls: ['./hero-list.component.css'], - /* The element here always has the state "in" when it - * is present. We animate two transitions: From void - * to in and from in to void, to achieve an animated - * enter and leave transition. The element enters from - * the left and leaves to the right using translateX, - * and fades in/out using opacity. We use different easings - * for enter and leave. - */ - // #docregion animationdef - animations: [ - trigger('flyInOut', [ - state('in', style({opacity: 1, transform: 'translateX(0)'})), - transition('void => *', [ - style({ - opacity: 0, - transform: 'translateX(-100%)' - }), - animate('0.2s ease-in') - ]), - transition('* => void', [ - animate('0.2s 0.1s ease-out', style({ - opacity: 0, - transform: 'translateX(100%)' - })) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListTimingsComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list-twoway.component.ts b/docs_app/content/examples/animations/src/app/hero-list-twoway.component.ts deleted file mode 100644 index ef0be5fce7..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list-twoway.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input -} from '@angular/core'; -import { - trigger, - state, - style, - animate, - transition -} from '@angular/animations'; -// #enddocregion imports - -import { Hero } from './hero.service'; - -@Component({ - selector: 'app-hero-list-twoway', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
    • -
- `, - // #enddocregion template - styleUrls: ['./hero-list.component.css'], - /* - * Define two states, "inactive" and "active", and the end - * styles that apply whenever the element is in those states. - * Then define an animated transition between these two - * states, in *both* directions. - */ - // #docregion animationdef - animations: [ - trigger('heroState', [ - state('inactive', style({ - backgroundColor: '#eee', - transform: 'scale(1)' - })), - state('active', style({ - backgroundColor: '#cfd8dc', - transform: 'scale(1.1)' - })), - // #docregion transitions - transition('inactive <=> active', animate('100ms ease-out')) - // #enddocregion transitions - ]) - ] - // #enddocregion animationdef -}) -export class HeroListTwowayComponent { - @Input() heroes: Hero[]; -} diff --git a/docs_app/content/examples/animations/src/app/hero-list.component.css b/docs_app/content/examples/animations/src/app/hero-list.component.css deleted file mode 100644 index b256521e49..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-list.component.css +++ /dev/null @@ -1,27 +0,0 @@ -ul { - list-style-type: none; - padding: 0; -} - -li { - display: block; - width: 120px; - line-height: 50px; - padding: 0 10px; - box-sizing: border-box; - background-color: #eee; - border-radius: 4px; - margin: 10px; - cursor: pointer; - overflow: hidden; - white-space: nowrap; -} - -.active { - background-color: #cfd8dc; - transform: scale(1.1); -} -.inactive { - background-color: #eee; - transform: scale(1); -} diff --git a/docs_app/content/examples/animations/src/app/hero-team-builder.component.ts b/docs_app/content/examples/animations/src/app/hero-team-builder.component.ts deleted file mode 100644 index 8a1904ea4f..0000000000 --- a/docs_app/content/examples/animations/src/app/hero-team-builder.component.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { Component } from '@angular/core'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - selector: 'app-root', - template: ` -
- - - -
- -
-
-

Basic State

-

Switch between active/inactive on click.

- -
-
-

Styles inline in transitions

-

Animated effect on click, no persistend end styles.

- -
-
-

Combined transition syntax

-

Switch between active/inactive on click. Define just one transition used in both directions.

- -
-
-

Two-way transition syntax

-

Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.

- -
-
-

Enter & Leave

-

Enter and leave animations using the void state.

- -
-
-
-
-

Enter & Leave & States

-

- Enter and leave animations combined with active/inactive state animations. - Different enter and leave transitions depending on state. -

- -
-
-

Auto Style Calc

-

Leave animation from the current computed height using the auto-style value *.

- -
-
-

Different Timings

-

Enter and leave animations with different easings, ease-in for enter, ease-out for leave.

- -
-
-

Multiple Keyframes

-

Enter and leave animations with three keyframes in each, to give the transition some bounce.

- -
-
-

Parallel Groups

-

Enter and leave animations with multiple properties animated in parallel with different timings.

- -
-
- `, - styles: [` - .buttons { - text-align: center; - } - button { - padding: 1.5em 3em; - } - .columns { - display: flex; - flex-direction: row; - } - .column { - flex: 1; - padding: 10px; - } - .column p { - min-height: 6em; - } - `], - providers: [HeroService] -}) -export class HeroTeamBuilderComponent { - heroes: Hero[]; - - constructor(private heroService: HeroService) { - this.heroes = heroService.heroes; - } -} diff --git a/docs_app/content/examples/animations/src/app/hero.service.ts b/docs_app/content/examples/animations/src/app/hero.service.ts deleted file mode 100644 index c0053d0185..0000000000 --- a/docs_app/content/examples/animations/src/app/hero.service.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Injectable } from '@angular/core'; - -// #docregion hero -export class Hero { - constructor(public name: string, public state = 'inactive') { } - - toggleState() { - this.state = this.state === 'active' ? 'inactive' : 'active'; - } -} -// #enddocregion hero - -const ALL_HEROES = [ - 'Windstorm', - 'RubberMan', - 'Bombasto', - 'Magneta', - 'Dynama', - 'Narco', - 'Celeritas', - 'Dr IQ', - 'Magma', - 'Tornado', - 'Mr. Nice' -].map(name => new Hero(name)); - -@Injectable() -export class HeroService { - - heroes: Hero[] = []; - - canAdd() { - return this.heroes.length < ALL_HEROES.length; - } - - canRemove() { - return this.heroes.length > 0; - } - - addActive(active = true) { - let hero = ALL_HEROES[this.heroes.length]; - hero.state = active ? 'active' : 'inactive'; - this.heroes.push(hero); - } - - addInactive() { - this.addActive(false); - } - - remove() { - this.heroes.length -= 1; - } - -} diff --git a/docs_app/content/examples/animations/src/index.html b/docs_app/content/examples/animations/src/index.html deleted file mode 100644 index fcd0ca2a3c..0000000000 --- a/docs_app/content/examples/animations/src/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Animations - - - - - -

External H1 Title for E2E test

- - -
    -
  • External list for E2E test
    • -
- - - diff --git a/docs_app/content/examples/animations/src/main.ts b/docs_app/content/examples/animations/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/animations/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/animations/stackblitz.json b/docs_app/content/examples/animations/stackblitz.json deleted file mode 100644 index 4fface319e..0000000000 --- a/docs_app/content/examples/animations/stackblitz.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "description": "Angular Animations", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ] -} diff --git a/docs_app/content/examples/architecture/e2e/app.e2e-spec.ts b/docs_app/content/examples/architecture/e2e/app.e2e-spec.ts deleted file mode 100644 index 8ad5c9ab74..0000000000 --- a/docs_app/content/examples/architecture/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,100 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { protractor, browser, element, by, ElementFinder } from 'protractor'; - -const nameSuffix = 'X'; - -class Hero { - id: number; - name: string; -} - -describe('Architecture', () => { - - const expectedTitle = 'Architecture of Angular'; - const expectedH2 = ['Hero List', 'Sales Tax Calculator']; - - beforeAll(() => browser.get('')); - - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h2 '${expectedH2}'`, () => { - let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText()); - expect(h2).toEqual(expectedH2); - }); - - describe('Hero', heroTests); - describe('Salex tax', salesTaxTests); -}); - -function heroTests() { - - const targetHero: Hero = { id: 2, name: 'Mr. Nice' }; - - it('has the right number of heroes', () => { - let page = getPageElts(); - expect(page.heroes.count()).toEqual(3); - }); - - it('has no hero details initially', function () { - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); - }); - - it('shows selected hero details', async () => { - await element(by.cssContainingText('li', targetHero.name)).click(); - let page = getPageElts(); - let hero = await heroFromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name); - }); - - it(`shows updated hero name in details`, async () => { - let input = element.all(by.css('input')).first(); - input.sendKeys(nameSuffix); - let page = getPageElts(); - let hero = await heroFromDetail(page.heroDetail); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName); - }); -} - -function salesTaxTests() { - it('has no sales tax initially', function () { - let page = getPageElts(); - expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info'); - }); - - it('shows sales tax', async function () { - let page = getPageElts(); - page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER); - expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00'); - }); -} - -// Helper functions - -function getPageElts() { - return { - heroes: element.all(by.css('app-root li')), - heroDetail: element(by.css('app-root app-hero-detail')), - salesTaxAmountInput: element(by.css('app-root app-sales-tax input')), - salesTaxDetail: element(by.css('app-root app-sales-tax div')) - }; -} - -async function heroFromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
- // let _id = await detail.all(by.css('div')).first().getText(); - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - // let _name = await detail.element(by.css('h4')).getText(); - let _name = await detail.element(by.css('h4')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; -} diff --git a/docs_app/content/examples/architecture/example-config.json b/docs_app/content/examples/architecture/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/architecture/src/app/app.component.ts b/docs_app/content/examples/architecture/src/app/app.component.ts deleted file mode 100644 index b250b678a2..0000000000 --- a/docs_app/content/examples/architecture/src/app/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion import -import { Component } from '@angular/core'; -// #enddocregion import - -@Component({ - selector: 'app-root', - template: ` - - - ` -}) -// #docregion export -export class AppComponent { } -// #enddocregion export diff --git a/docs_app/content/examples/architecture/src/app/app.module.ts b/docs_app/content/examples/architecture/src/app/app.module.ts deleted file mode 100644 index f6e64beecd..0000000000 --- a/docs_app/content/examples/architecture/src/app/app.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -// #docregion imports -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; -// #enddocregion imports -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { SalesTaxComponent } from './sales-tax.component'; -import { HeroService } from './hero.service'; -import { BackendService } from './backend.service'; -import { Logger } from './logger.service'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - HeroDetailComponent, - HeroListComponent, - SalesTaxComponent - ], -// #docregion providers - providers: [ - BackendService, - HeroService, - Logger - ], -// #enddocregion providers - bootstrap: [ AppComponent ] -}) -// #docregion export -export class AppModule { } -// #enddocregion export diff --git a/docs_app/content/examples/architecture/src/app/backend.service.ts b/docs_app/content/examples/architecture/src/app/backend.service.ts deleted file mode 100644 index e3e21a6ff4..0000000000 --- a/docs_app/content/examples/architecture/src/app/backend.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Injectable, Type } from '@angular/core'; - -import { Logger } from './logger.service'; -import { Hero } from './hero'; - -const HEROES = [ - new Hero('Windstorm', 'Weather mastery'), - new Hero('Mr. Nice', 'Killing them with kindness'), - new Hero('Magneta', 'Manipulates metallic objects') - ]; - -@Injectable() -export class BackendService { - constructor(private logger: Logger) {} - - getAll(type: Type): PromiseLike { - if (type === Hero) { - // TODO get from the database - return Promise.resolve(HEROES); - } - let err = new Error('Cannot get object of this type'); - this.logger.error(err); - throw err; - } -} diff --git a/docs_app/content/examples/architecture/src/app/hero-detail.component.html b/docs_app/content/examples/architecture/src/app/hero-detail.component.html deleted file mode 100644 index 8216ffb4f0..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero-detail.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
-

{{hero.name}} Detail

-
Id: {{hero.id}}
- -
- diff --git a/docs_app/content/examples/architecture/src/app/hero-detail.component.ts b/docs_app/content/examples/architecture/src/app/hero-detail.component.ts deleted file mode 100644 index 349c118bf1..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero-detail.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html' -}) -export class HeroDetailComponent { - @Input() hero: Hero; -} diff --git a/docs_app/content/examples/architecture/src/app/hero-list.component.1.html b/docs_app/content/examples/architecture/src/app/hero-list.component.1.html deleted file mode 100644 index 9533a287bc..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero-list.component.1.html +++ /dev/null @@ -1,9 +0,0 @@ - -
  • {{hero.name}}
    • - -
  • - - - -
  • - diff --git a/docs_app/content/examples/architecture/src/app/hero-list.component.html b/docs_app/content/examples/architecture/src/app/hero-list.component.html deleted file mode 100644 index 8f0433fe54..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero-list.component.html +++ /dev/null @@ -1,11 +0,0 @@ - -

    Hero List

    - -

    Pick a hero from the list

    -
      -
    • - {{hero.name}} -
      • -
    - - diff --git a/docs_app/content/examples/architecture/src/app/hero-list.component.ts b/docs_app/content/examples/architecture/src/app/hero-list.component.ts deleted file mode 100644 index 4dc0b8e2f3..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero-list.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -// #docregion metadata, providers -@Component({ - selector: 'app-hero-list', - templateUrl: './hero-list.component.html', - providers: [ HeroService ] -}) -// #enddocregion providers -// #docregion class -export class HeroListComponent implements OnInit { - // #enddocregion metadata - heroes: Hero[]; - selectedHero: Hero; - - // #docregion ctor - constructor(private service: HeroService) { } - // #enddocregion ctor - - ngOnInit() { - this.heroes = this.service.getHeroes(); - } - - selectHero(hero: Hero) { this.selectedHero = hero; } - // #docregion metadata -} diff --git a/docs_app/content/examples/architecture/src/app/hero.service.ts b/docs_app/content/examples/architecture/src/app/hero.service.ts deleted file mode 100644 index 493f064e40..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Hero } from './hero'; -import { BackendService } from './backend.service'; -import { Logger } from './logger.service'; - -@Injectable() -// #docregion class -export class HeroService { - private heroes: Hero[] = []; - - constructor( - private backend: BackendService, - private logger: Logger) { } - - getHeroes() { - this.backend.getAll(Hero).then( (heroes: Hero[]) => { - this.logger.log(`Fetched ${heroes.length} heroes.`); - this.heroes.push(...heroes); // fill cache - }); - return this.heroes; - } -} diff --git a/docs_app/content/examples/architecture/src/app/hero.ts b/docs_app/content/examples/architecture/src/app/hero.ts deleted file mode 100644 index b89557aa71..0000000000 --- a/docs_app/content/examples/architecture/src/app/hero.ts +++ /dev/null @@ -1,10 +0,0 @@ -let nextId = 1; - -export class Hero { - id: number; - constructor( - public name: string, - public power?: string) { - this.id = nextId++; - } -} diff --git a/docs_app/content/examples/architecture/src/app/logger.service.ts b/docs_app/content/examples/architecture/src/app/logger.service.ts deleted file mode 100644 index 9277ee8bc0..0000000000 --- a/docs_app/content/examples/architecture/src/app/logger.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -// #docregion class -export class Logger { - log(msg: any) { console.log(msg); } - error(msg: any) { console.error(msg); } - warn(msg: any) { console.warn(msg); } -} diff --git a/docs_app/content/examples/architecture/src/app/mini-app.ts b/docs_app/content/examples/architecture/src/app/mini-app.ts deleted file mode 100644 index b064428be3..0000000000 --- a/docs_app/content/examples/architecture/src/app/mini-app.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docplaster -// A mini-application -import { Injectable } from '@angular/core'; - -@Injectable() -export class Logger { - log(message: string) { console.log(message); } -} - -// #docregion import-core-component -import { Component } from '@angular/core'; -// #enddocregion import-core-component - -@Component({ - selector: 'my-app', - template: 'Welcome to Angular' -}) -export class AppComponent { - constructor(logger: Logger) { - logger.log('Let the fun begin!'); - } -} - -// #docregion module -import { NgModule } from '@angular/core'; -// #docregion import-browser-module -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion import-browser-module -@NgModule({ -// #docregion ngmodule-imports - imports: [ BrowserModule ], -// #enddocregion ngmodule-imports - providers: [ Logger ], - declarations: [ AppComponent ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -// #docregion export -export class AppModule { } -// #enddocregion export -// #enddocregion module - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/architecture/src/app/sales-tax.component.ts b/docs_app/content/examples/architecture/src/app/sales-tax.component.ts deleted file mode 100644 index 2d33398f4c..0000000000 --- a/docs_app/content/examples/architecture/src/app/sales-tax.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from '@angular/core'; - -import { SalesTaxService } from './sales-tax.service'; -import { TaxRateService } from './tax-rate.service'; - -@Component({ - selector: 'app-sales-tax', - template: ` -

    Sales Tax Calculator

    - - -
    - The sales tax is - {{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }} -
    - `, - providers: [SalesTaxService, TaxRateService] -}) -export class SalesTaxComponent { - constructor(private salesTaxService: SalesTaxService) { } - - getTax(value: string | number) { - return this.salesTaxService.getVAT(value); - } -} diff --git a/docs_app/content/examples/architecture/src/app/sales-tax.service.ts b/docs_app/content/examples/architecture/src/app/sales-tax.service.ts deleted file mode 100644 index d859dc1595..0000000000 --- a/docs_app/content/examples/architecture/src/app/sales-tax.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { TaxRateService } from './tax-rate.service'; - -@Injectable() -export class SalesTaxService { - constructor(private rateService: TaxRateService) { } - - getVAT(value: string | number) { - let amount = (typeof value === 'string') ? - parseFloat(value) : value; - return (amount || 0) * this.rateService.getRate('VAT'); - } -} diff --git a/docs_app/content/examples/architecture/src/app/tax-rate.service.ts b/docs_app/content/examples/architecture/src/app/tax-rate.service.ts deleted file mode 100644 index fff2f4df8f..0000000000 --- a/docs_app/content/examples/architecture/src/app/tax-rate.service.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class TaxRateService { - getRate(rateName: string) { return 0.10; } // 10% everywhere -} diff --git a/docs_app/content/examples/architecture/src/index.html b/docs_app/content/examples/architecture/src/index.html deleted file mode 100644 index 93ea2e27dc..0000000000 --- a/docs_app/content/examples/architecture/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - Architecture of Angular - - - - - - - - - diff --git a/docs_app/content/examples/architecture/src/main.ts b/docs_app/content/examples/architecture/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/architecture/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/architecture/stackblitz.json b/docs_app/content/examples/architecture/stackblitz.json deleted file mode 100644 index c2d31783ea..0000000000 --- a/docs_app/content/examples/architecture/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Intro to Angular", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "file": "src/app/app.module.ts" -} diff --git a/docs_app/content/examples/attribute-directives/e2e/app.e2e-spec.ts b/docs_app/content/examples/attribute-directives/e2e/app.e2e-spec.ts deleted file mode 100644 index fd033ce32f..0000000000 --- a/docs_app/content/examples/attribute-directives/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Attribute directives', function () { - - let _title = 'My First Attribute Directive'; - - beforeAll(function () { - browser.get(''); - }); - - it(`should display correct title: ${_title}`, function () { - expect(element(by.css('h1')).getText()).toEqual(_title); - }); - - it('should be able to select green highlight', function () { - let highlightedEle = element(by.cssContainingText('p', 'Highlight me!')); - let lightGreen = 'rgba(144, 238, 144, 1)'; - - expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); - // let greenRb = element(by.cssContainingText('input', 'Green')); - let greenRb = element.all(by.css('input')).get(0); - greenRb.click().then(function() { - // TypeScript Todo: find the right type for highlightedEle - browser.actions().mouseMove(highlightedEle as any).perform(); - expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen); - }); - - }); -}); diff --git a/docs_app/content/examples/attribute-directives/example-config.json b/docs_app/content/examples/attribute-directives/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/attribute-directives/src/app/app.component.1.html b/docs_app/content/examples/attribute-directives/src/app/app.component.1.html deleted file mode 100644 index 4422c83ead..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/app.component.1.html +++ /dev/null @@ -1,14 +0,0 @@ - -

    My First Attribute Directive

    - -

    Highlight me!

    - - - -

    Highlighted in yellow

    -

    Highlighted in orange

    - - - -

    Highlighted with parent component's color

    - diff --git a/docs_app/content/examples/attribute-directives/src/app/app.component.1.ts b/docs_app/content/examples/attribute-directives/src/app/app.component.1.ts deleted file mode 100644 index 7924a2366a..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/app.component.1.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.1.html' -}) -// #docregion class -export class AppComponent { - color = 'yellow'; -} diff --git a/docs_app/content/examples/attribute-directives/src/app/app.component.html b/docs_app/content/examples/attribute-directives/src/app/app.component.html deleted file mode 100644 index c361f11287..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/app.component.html +++ /dev/null @@ -1,24 +0,0 @@ - -

    My First Attribute Directive

    - -

    Pick a highlight color

    -
    - Green - Yellow - Cyan -
    - -

    Highlight me!

    - - - -

    - Highlight me too! -

    - - -
    -

    Mouse over the following lines to see fixed highlights

    - -

    Highlighted in yellow

    -

    Highlighted in orange

    diff --git a/docs_app/content/examples/attribute-directives/src/app/app.component.ts b/docs_app/content/examples/attribute-directives/src/app/app.component.ts deleted file mode 100644 index 01d0dd5b5f..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -// #docregion class -export class AppComponent { - color: string; -} diff --git a/docs_app/content/examples/attribute-directives/src/app/app.module.ts b/docs_app/content/examples/attribute-directives/src/app/app.module.ts deleted file mode 100644 index ca35d560fb..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { HighlightDirective } from './highlight.directive'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - HighlightDirective - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/attribute-directives/src/app/dummy.module.1.ts b/docs_app/content/examples/attribute-directives/src/app/dummy.module.1.ts deleted file mode 100644 index 14f0216f05..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/dummy.module.1.ts +++ /dev/null @@ -1,17 +0,0 @@ -// Not used. Keep away from stackblitz -// Keeps ATLS from complaining about undeclared directives. -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component.1'; -import { HighlightDirective as HLD1 } from './highlight.directive.1'; -import { HighlightDirective as HLD2 } from './highlight.directive.2'; -import { HighlightDirective as HLD3 } from './highlight.directive.3'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, HLD1, HLD2, HLD3 - ] -}) -export class DummyModule { } diff --git a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.0.ts b/docs_app/content/examples/attribute-directives/src/app/highlight.directive.0.ts deleted file mode 100644 index a15f757cf5..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.0.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - constructor() { } -} diff --git a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.1.ts b/docs_app/content/examples/attribute-directives/src/app/highlight.directive.1.ts deleted file mode 100644 index 1ce9949ec0..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.1.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* tslint:disable:no-unused-variable */ -// #docregion -import { Directive, ElementRef } from '@angular/core'; - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'yellow'; - } -} diff --git a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/docs_app/content/examples/attribute-directives/src/app/highlight.directive.2.ts deleted file mode 100644 index fdf8ba0c85..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.2.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* tslint:disable:no-unused-variable member-ordering */ -// #docplaster -// #docregion imports, -import { Directive, ElementRef, HostListener } from '@angular/core'; -// #enddocregion imports, -import { Input } from '@angular/core'; -// #docregion - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - // #docregion ctor - constructor(private el: ElementRef) { } - // #enddocregion ctor - - // #docregion mouse-methods, host - @HostListener('mouseenter') onMouseEnter() { - // #enddocregion host - this.highlight('yellow'); - // #docregion host - } - - @HostListener('mouseleave') onMouseLeave() { - // #enddocregion host - this.highlight(null); - // #docregion host - } - // #enddocregion host - - private highlight(color: string) { - this.el.nativeElement.style.backgroundColor = color; - } - // #enddocregion mouse-methods, - - // #docregion color - @Input() highlightColor: string; - // #enddocregion color - - // #docregion color-2 - @Input() appHighlight: string; - // #enddocregion color-2 -} - diff --git a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/docs_app/content/examples/attribute-directives/src/app/highlight.directive.3.ts deleted file mode 100644 index 01c7cb679c..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.3.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* tslint:disable:member-ordering */ -// #docregion, imports -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; -// #enddocregion imports - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - - constructor(private el: ElementRef) { } - - @Input('appHighlight') highlightColor: string; - - // #docregion mouse-enter - @HostListener('mouseenter') onMouseEnter() { - this.highlight(this.highlightColor || 'red'); - } - // #enddocregion mouse-enter - - @HostListener('mouseleave') onMouseLeave() { - this.highlight(null); - } - - private highlight(color: string) { - this.el.nativeElement.style.backgroundColor = color; - } -} diff --git a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.ts b/docs_app/content/examples/attribute-directives/src/app/highlight.directive.ts deleted file mode 100644 index dd138ae09d..0000000000 --- a/docs_app/content/examples/attribute-directives/src/app/highlight.directive.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* tslint:disable:member-ordering */ -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - - constructor(private el: ElementRef) { } - - // #docregion defaultColor - @Input() defaultColor: string; - // #enddocregion defaultColor - - // #docregion color - @Input('appHighlight') highlightColor: string; - // #enddocregion color - - // #docregion mouse-enter - @HostListener('mouseenter') onMouseEnter() { - this.highlight(this.highlightColor || this.defaultColor || 'red'); - } - // #enddocregion mouse-enter - - @HostListener('mouseleave') onMouseLeave() { - this.highlight(null); - } - - private highlight(color: string) { - this.el.nativeElement.style.backgroundColor = color; - } -} diff --git a/docs_app/content/examples/attribute-directives/src/index.html b/docs_app/content/examples/attribute-directives/src/index.html deleted file mode 100644 index 12cabb6362..0000000000 --- a/docs_app/content/examples/attribute-directives/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Attribute Directives - - - - - - - diff --git a/docs_app/content/examples/attribute-directives/src/main.ts b/docs_app/content/examples/attribute-directives/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/attribute-directives/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/attribute-directives/stackblitz.json b/docs_app/content/examples/attribute-directives/stackblitz.json deleted file mode 100644 index 32e9661d60..0000000000 --- a/docs_app/content/examples/attribute-directives/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Attribute Directive", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2,3].*" - ], - "tags": ["attribute", "directive"] -} diff --git a/docs_app/content/examples/bootstrapping/bs-config.1.json b/docs_app/content/examples/bootstrapping/bs-config.1.json deleted file mode 100644 index 4e58595267..0000000000 --- a/docs_app/content/examples/bootstrapping/bs-config.1.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "server": { - "baseDir": "src", - "routes": { - "/node_modules": "node_modules" - } - } -} diff --git a/docs_app/content/examples/bootstrapping/e2e/app.e2e-spec.ts b/docs_app/content/examples/bootstrapping/e2e/app.e2e-spec.ts deleted file mode 100644 index cd4922ccd3..0000000000 --- a/docs_app/content/examples/bootstrapping/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { AppPage } from './app.po'; - -describe('feature-modules App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('app works!'); - }); -}); diff --git a/docs_app/content/examples/bootstrapping/example-config.json b/docs_app/content/examples/bootstrapping/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/bootstrapping/src/app/app.component.css b/docs_app/content/examples/bootstrapping/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/bootstrapping/src/app/app.component.html b/docs_app/content/examples/bootstrapping/src/app/app.component.html deleted file mode 100644 index b6931b538a..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/app.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    - {{title}} -

    diff --git a/docs_app/content/examples/bootstrapping/src/app/app.component.spec.ts b/docs_app/content/examples/bootstrapping/src/app/app.component.spec.ts deleted file mode 100644 index 13c632d676..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }); - TestBed.compileComponents(); - }); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/docs_app/content/examples/bootstrapping/src/app/app.component.ts b/docs_app/content/examples/bootstrapping/src/app/app.component.ts deleted file mode 100644 index ff63e05048..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'app works!'; -} diff --git a/docs_app/content/examples/bootstrapping/src/app/app.module.ts b/docs_app/content/examples/bootstrapping/src/app/app.module.ts deleted file mode 100644 index 58c78b33ac..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/app.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion whole-ngmodule - -// imports -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -import { AppComponent } from './app.component'; -// #docregion directive-import -import { ItemDirective } from './item.directive'; -// #enddocregion directive-import - - -// @NgModule decorator with its metadata -@NgModule({ -// #docregion declarations - declarations: [ - AppComponent, - ItemDirective - ], - // #enddocregion declarations - imports: [ - BrowserModule, - FormsModule, - HttpModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } - -// #enddocregion whole-ngmodule diff --git a/docs_app/content/examples/bootstrapping/src/app/item.directive.spec.ts b/docs_app/content/examples/bootstrapping/src/app/item.directive.spec.ts deleted file mode 100644 index 0c184d30da..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/item.directive.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ItemDirective } from './item.directive'; - -describe('ItemDirective', () => { - it('should create an instance', () => { - const directive = new ItemDirective(); - expect(directive).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/bootstrapping/src/app/item.directive.ts b/docs_app/content/examples/bootstrapping/src/app/item.directive.ts deleted file mode 100644 index e8083bb05e..0000000000 --- a/docs_app/content/examples/bootstrapping/src/app/item.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docplaster -// #docregion directive - - -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[appItem]' -}) -export class ItemDirective { -// code goes here - constructor() { } - -} -// #enddocregion directive diff --git a/docs_app/content/examples/bootstrapping/src/index.html b/docs_app/content/examples/bootstrapping/src/index.html deleted file mode 100644 index a0df7beafe..0000000000 --- a/docs_app/content/examples/bootstrapping/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - NgmoduleDemo - - - - - - - Loading... - - diff --git a/docs_app/content/examples/bootstrapping/src/main.ts b/docs_app/content/examples/bootstrapping/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/bootstrapping/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/bootstrapping/stackblitz.json b/docs_app/content/examples/bootstrapping/stackblitz.json deleted file mode 100644 index 3167ca8387..0000000000 --- a/docs_app/content/examples/bootstrapping/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Bootstrapping", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "file": "src/app/app.component.ts", - "tags": ["ngmodules"] -} diff --git a/docs_app/content/examples/cli-quickstart/README.md b/docs_app/content/examples/cli-quickstart/README.md deleted file mode 100644 index efe9ec67ae..0000000000 --- a/docs_app/content/examples/cli-quickstart/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# MasterProject - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.0. - -## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). -Before running the tests make sure you are serving the app via `ng serve`. - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/docs_app/content/examples/cli-quickstart/bs-config.cli.json b/docs_app/content/examples/cli-quickstart/bs-config.cli.json deleted file mode 100644 index ac61d35f83..0000000000 --- a/docs_app/content/examples/cli-quickstart/bs-config.cli.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "open": false, - "logLevel": "silent", - "port": 8080, - "server": { - "baseDir": "dist", - "middleware": { - "0": null - } - } -} diff --git a/docs_app/content/examples/cli-quickstart/e2e/app.e2e-spec.ts b/docs_app/content/examples/cli-quickstart/e2e/app.e2e-spec.ts deleted file mode 100644 index 3f0760b56e..0000000000 --- a/docs_app/content/examples/cli-quickstart/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('cli-quickstart App', () => { - beforeEach(() => { - return browser.get('/'); - }); - - it('should display message saying app works', () => { - let pageTitle = element(by.css('app-root h1')).getText(); - expect(pageTitle).toEqual('Welcome to My First Angular App!!'); - }); -}); diff --git a/docs_app/content/examples/cli-quickstart/example-config.json b/docs_app/content/examples/cli-quickstart/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/docs_app/content/examples/cli-quickstart/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/docs_app/content/examples/cli-quickstart/src/app/app.component.css b/docs_app/content/examples/cli-quickstart/src/app/app.component.css deleted file mode 100644 index a2b21fae82..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/app/app.component.css +++ /dev/null @@ -1,6 +0,0 @@ -/* #docregion */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} diff --git a/docs_app/content/examples/cli-quickstart/src/app/app.component.html b/docs_app/content/examples/cli-quickstart/src/app/app.component.html deleted file mode 100644 index 24c56edee4..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/app/app.component.html +++ /dev/null @@ -1,19 +0,0 @@ - -
    -

    - Welcome to {{ title }}! -

    - Angular Logo -
    -

    Here are some links to help you start:

    -     diff --git a/docs_app/content/examples/cli-quickstart/src/app/app.component.spec.ts b/docs_app/content/examples/cli-quickstart/src/app/app.component.spec.ts deleted file mode 100644 index 1f5da50d19..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/app/app.component.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toMatch(/app/i); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toMatch(/app/i); - })); -}); diff --git a/docs_app/content/examples/cli-quickstart/src/app/app.component.ts b/docs_app/content/examples/cli-quickstart/src/app/app.component.ts deleted file mode 100644 index d977bbe40a..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion import -import { Component } from '@angular/core'; -// #enddocregion import - -// #docregion metadata -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -// #enddocregion metadata -// #docregion title, class -export class AppComponent { - title = 'My First Angular App!'; -} -// #enddocregion title, class diff --git a/docs_app/content/examples/cli-quickstart/src/app/app.module.ts b/docs_app/content/examples/cli-quickstart/src/app/app.module.ts deleted file mode 100644 index f65716351a..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/cli-quickstart/src/index.html b/docs_app/content/examples/cli-quickstart/src/index.html deleted file mode 100644 index 0450fa57c3..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - MyApp - - - - - - - - - diff --git a/docs_app/content/examples/cli-quickstart/src/main.ts b/docs_app/content/examples/cli-quickstart/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/cli-quickstart/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/cli-quickstart/zipper.json b/docs_app/content/examples/cli-quickstart/zipper.json deleted file mode 100644 index 7e4bda5d9f..0000000000 --- a/docs_app/content/examples/cli-quickstart/zipper.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0-9].*", - ".angular-cli.json", - "protractor.conf.js" - ] -} diff --git a/docs_app/content/examples/component-interaction/e2e/app.e2e-spec.ts b/docs_app/content/examples/component-interaction/e2e/app.e2e-spec.ts deleted file mode 100644 index 7637a6affc..0000000000 --- a/docs_app/content/examples/component-interaction/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,232 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Component Communication Cookbook Tests', function () { - - // Note: '?e2e' which app can read to know it is running in protractor - // e.g. `if (!/e2e/.test(location.search)) { ...` - beforeAll(function () { - browser.get('?e2e'); - }); - - describe('Parent-to-child communication', function() { - // #docregion parent-to-child - // ... - let _heroNames = ['Mr. IQ', 'Magneta', 'Bombasto']; - let _masterName = 'Master'; - - it('should pass properties to children properly', function () { - let parent = element.all(by.tagName('app-hero-parent')).get(0); - let heroes = parent.all(by.tagName('app-hero-child')); - - for (let i = 0; i < _heroNames.length; i++) { - let childTitle = heroes.get(i).element(by.tagName('h3')).getText(); - let childDetail = heroes.get(i).element(by.tagName('p')).getText(); - expect(childTitle).toEqual(_heroNames[i] + ' says:'); - expect(childDetail).toContain(_masterName); - } - }); - // ... - // #enddocregion parent-to-child - }); - - describe('Parent-to-child communication with setter', function() { - // #docregion parent-to-child-setter - // ... - it('should display trimmed, non-empty names', function () { - let _nonEmptyNameIndex = 0; - let _nonEmptyName = '"Mr. IQ"'; - let parent = element.all(by.tagName('app-name-parent')).get(0); - let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex); - - let displayName = hero.element(by.tagName('h3')).getText(); - expect(displayName).toEqual(_nonEmptyName); - }); - - it('should replace empty name with default name', function () { - let _emptyNameIndex = 1; - let _defaultName = '""'; - let parent = element.all(by.tagName('app-name-parent')).get(0); - let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex); - - let displayName = hero.element(by.tagName('h3')).getText(); - expect(displayName).toEqual(_defaultName); - }); - // ... - // #enddocregion parent-to-child-setter - }); - - describe('Parent-to-child communication with ngOnChanges', function() { - // #docregion parent-to-child-onchanges - // ... - // Test must all execute in this exact order - it('should set expected initial values', function () { - let actual = getActual(); - - let initialLabel = 'Version 1.23'; - let initialLog = 'Initial value of major set to 1, Initial value of minor set to 23'; - - expect(actual.label).toBe(initialLabel); - expect(actual.count).toBe(1); - expect(actual.logs.get(0).getText()).toBe(initialLog); - }); - - it('should set expected values after clicking \'Minor\' twice', function () { - let repoTag = element(by.tagName('app-version-parent')); - let newMinorButton = repoTag.all(by.tagName('button')).get(0); - - newMinorButton.click().then(function() { - newMinorButton.click().then(function() { - let actual = getActual(); - - let labelAfter2Minor = 'Version 1.25'; - let logAfter2Minor = 'minor changed from 24 to 25'; - - expect(actual.label).toBe(labelAfter2Minor); - expect(actual.count).toBe(3); - expect(actual.logs.get(2).getText()).toBe(logAfter2Minor); - }); - }); - }); - - it('should set expected values after clicking \'Major\' once', function () { - let repoTag = element(by.tagName('app-version-parent')); - let newMajorButton = repoTag.all(by.tagName('button')).get(1); - - newMajorButton.click().then(function() { - let actual = getActual(); - - let labelAfterMajor = 'Version 2.0'; - let logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; - - expect(actual.label).toBe(labelAfterMajor); - expect(actual.count).toBe(4); - expect(actual.logs.get(3).getText()).toBe(logAfterMajor); - }); - }); - - function getActual() { - let versionTag = element(by.tagName('app-version-child')); - let label = versionTag.element(by.tagName('h3')).getText(); - let ul = versionTag.element((by.tagName('ul'))); - let logs = ul.all(by.tagName('li')); - - return { - label: label, - logs: logs, - count: logs.count() - }; - } - // ... - // #enddocregion parent-to-child-onchanges - - }); - - describe('Child-to-parent communication', function() { - // #docregion child-to-parent - // ... - it('should not emit the event initially', function () { - let voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 0, Disagree: 0'); - }); - - it('should process Agree vote', function () { - let agreeButton1 = element.all(by.tagName('app-voter')).get(0) - .all(by.tagName('button')).get(0); - agreeButton1.click().then(function() { - let voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 1, Disagree: 0'); - }); - }); - - it('should process Disagree vote', function () { - let agreeButton1 = element.all(by.tagName('app-voter')).get(1) - .all(by.tagName('button')).get(1); - agreeButton1.click().then(function() { - let voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 1, Disagree: 1'); - }); - }); - // ... - // #enddocregion child-to-parent - }); - - // Can't run timer tests in protractor because - // interaction w/ zones causes all tests to freeze & timeout. - xdescribe('Parent calls child via local var', function() { - countDownTimerTests('countdown-parent-lv'); - }); - - xdescribe('Parent calls ViewChild', function() { - countDownTimerTests('countdown-parent-vc'); - }); - - function countDownTimerTests(parentTag: string) { - // #docregion countdown-timer-tests - // ... - it('timer and parent seconds should match', function () { - let parent = element(by.tagName(parentTag)); - let message = parent.element(by.tagName('app-countdown-timer')).getText(); - browser.sleep(10); // give `seconds` a chance to catchup with `message` - let seconds = parent.element(by.className('seconds')).getText(); - expect(message).toContain(seconds); - }); - - it('should stop the countdown', function () { - let parent = element(by.tagName(parentTag)); - let stopButton = parent.all(by.tagName('button')).get(1); - - stopButton.click().then(function() { - let message = parent.element(by.tagName('app-countdown-timer')).getText(); - expect(message).toContain('Holding'); - }); - }); - // ... - // #enddocregion countdown-timer-tests - } - - - describe('Parent and children communicate via a service', function() { - // #docregion bidirectional-service - // ... - it('should announce a mission', function () { - let missionControl = element(by.tagName('app-mission-control')); - let announceButton = missionControl.all(by.tagName('button')).get(0); - announceButton.click().then(function () { - let history = missionControl.all(by.tagName('li')); - expect(history.count()).toBe(1); - expect(history.get(0).getText()).toMatch(/Mission.* announced/); - }); - }); - - it('should confirm the mission by Lovell', function () { - testConfirmMission(1, 2, 'Lovell'); - }); - - it('should confirm the mission by Haise', function () { - testConfirmMission(3, 3, 'Haise'); - }); - - it('should confirm the mission by Swigert', function () { - testConfirmMission(2, 4, 'Swigert'); - }); - - function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) { - let _confirmedLog = ' confirmed the mission'; - let missionControl = element(by.tagName('app-mission-control')); - let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); - confirmButton.click().then(function () { - let history = missionControl.all(by.tagName('li')); - expect(history.count()).toBe(expectedLogCount); - expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + _confirmedLog); - }); - } - // ... - // #enddocregion bidirectional-service - }); - -}); diff --git a/docs_app/content/examples/component-interaction/example-config.json b/docs_app/content/examples/component-interaction/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/component-interaction/src/app/app.component.html b/docs_app/content/examples/component-interaction/src/app/app.component.html deleted file mode 100644 index 907e0181fa..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/app.component.html +++ /dev/null @@ -1,51 +0,0 @@ -

    Component Communication Cookbook

    - -Pass data from parent to child with input binding ("Heroes")
    -Intercept input property changes with a setter ("Master")
    -Intercept input property changes with ngOnChanges ("Source code version")
    -Parent listens for child event ("Colonize Universe")
    -Parent to child via local variable("Countdown to Liftoff")
    -Parent calls ViewChild("Countdown to Liftoff")
    -Parent and children communicate via a service ("Mission Control")
    - -
    - -
    -Back to Top - -
    -
    - -
    -Back to Top - -
    -
    - -
    -Back to Top - -
    -
    - -
    -Back to Top -
    - -
    - -
    -Back to Top -
    - -
    - -
    -Back to Top -
    - -
    - -
    -Back to Top -
    diff --git a/docs_app/content/examples/component-interaction/src/app/app.component.ts b/docs_app/content/examples/component-interaction/src/app/app.component.ts deleted file mode 100644 index 968036cb8c..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/component-interaction/src/app/app.module.ts b/docs_app/content/examples/component-interaction/src/app/app.module.ts deleted file mode 100644 index 7a27465ff8..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/app.module.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { AstronautComponent } from './astronaut.component'; -import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component'; -import { CountdownTimerComponent } from './countdown-timer.component'; -import { HeroChildComponent } from './hero-child.component'; -import { HeroParentComponent } from './hero-parent.component'; -import { MissionControlComponent } from './missioncontrol.component'; -import { NameChildComponent } from './name-child.component'; -import { NameParentComponent } from './name-parent.component'; -import { VersionChildComponent } from './version-child.component'; -import { VersionParentComponent } from './version-parent.component'; -import { VoterComponent } from './voter.component'; -import { VoteTakerComponent } from './votetaker.component'; - -let directives: any[] = [ - AppComponent, - AstronautComponent, - CountdownTimerComponent, - HeroChildComponent, - HeroParentComponent, - MissionControlComponent, - NameChildComponent, - NameParentComponent, - VersionChildComponent, - VersionParentComponent, - VoterComponent, - VoteTakerComponent - ]; - -let schemas: any[] = []; - -// Include Countdown examples -// unless in e2e tests which they break. -if (!/e2e/.test(location.search)) { - console.log('adding countdown timer examples'); - directives.push(CountdownLocalVarParentComponent); - directives.push(CountdownViewChildParentComponent); -} else { - // In e2e test use CUSTOM_ELEMENTS_SCHEMA to suppress unknown element errors - schemas.push(CUSTOM_ELEMENTS_SCHEMA); -} - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: directives, - bootstrap: [ AppComponent ], - schemas: schemas -}) -export class AppModule { } diff --git a/docs_app/content/examples/component-interaction/src/app/astronaut.component.ts b/docs_app/content/examples/component-interaction/src/app/astronaut.component.ts deleted file mode 100644 index 9bd4c9d78c..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/astronaut.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docregion -import { Component, Input, OnDestroy } from '@angular/core'; - -import { MissionService } from './mission.service'; -import { Subscription } from 'rxjs'; - -@Component({ - selector: 'app-astronaut', - template: ` -

    - {{astronaut}}: {{mission}} - -

    - ` -}) -export class AstronautComponent implements OnDestroy { - @Input() astronaut: string; - mission = ''; - confirmed = false; - announced = false; - subscription: Subscription; - - constructor(private missionService: MissionService) { - this.subscription = missionService.missionAnnounced$.subscribe( - mission => { - this.mission = mission; - this.announced = true; - this.confirmed = false; - }); - } - - confirm() { - this.confirmed = true; - this.missionService.confirmMission(this.astronaut); - } - - ngOnDestroy() { - // prevent memory leak when component destroyed - this.subscription.unsubscribe(); - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/countdown-parent.component.ts b/docs_app/content/examples/component-interaction/src/app/countdown-parent.component.ts deleted file mode 100644 index 9f4e5bd4df..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/countdown-parent.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -// #docplaster -// #docregion vc -import { AfterViewInit, ViewChild } from '@angular/core'; -// #docregion lv -import { Component } from '@angular/core'; -import { CountdownTimerComponent } from './countdown-timer.component'; - -// #enddocregion lv -// #enddocregion vc - -//// Local variable, #timer, version -// #docregion lv -@Component({ - selector: 'app-countdown-parent-lv', - template: ` -

    Countdown to Liftoff (via local variable)

    - - -
    {{timer.seconds}}
    - - `, - styleUrls: ['../assets/demo.css'] -}) -export class CountdownLocalVarParentComponent { } -// #enddocregion lv - -//// View Child version -// #docregion vc -@Component({ - selector: 'app-countdown-parent-vc', - template: ` -

    Countdown to Liftoff (via ViewChild)

    - - -
    {{ seconds() }}
    - - `, - styleUrls: ['../assets/demo.css'] -}) -export class CountdownViewChildParentComponent implements AfterViewInit { - - @ViewChild(CountdownTimerComponent) - private timerComponent: CountdownTimerComponent; - - seconds() { return 0; } - - ngAfterViewInit() { - // Redefine `seconds()` to get from the `CountdownTimerComponent.seconds` ... - // but wait a tick first to avoid one-time devMode - // unidirectional-data-flow-violation error - setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0); - } - - start() { this.timerComponent.start(); } - stop() { this.timerComponent.stop(); } -} -// #enddocregion vc diff --git a/docs_app/content/examples/component-interaction/src/app/countdown-timer.component.ts b/docs_app/content/examples/component-interaction/src/app/countdown-timer.component.ts deleted file mode 100644 index dcc88334d0..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/countdown-timer.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docregion -import { Component, OnDestroy, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-countdown-timer', - template: '

    {{message}}

    ' -}) -export class CountdownTimerComponent implements OnInit, OnDestroy { - - intervalId = 0; - message = ''; - seconds = 11; - - clearTimer() { clearInterval(this.intervalId); } - - ngOnInit() { this.start(); } - ngOnDestroy() { this.clearTimer(); } - - start() { this.countDown(); } - stop() { - this.clearTimer(); - this.message = `Holding at T-${this.seconds} seconds`; - } - - private countDown() { - this.clearTimer(); - this.intervalId = window.setInterval(() => { - this.seconds -= 1; - if (this.seconds === 0) { - this.message = 'Blast off!'; - } else { - if (this.seconds < 0) { this.seconds = 10; } // reset - this.message = `T-${this.seconds} seconds and counting`; - } - }, 1000); - } -} diff --git a/docs_app/content/examples/component-interaction/src/app/hero-child.component.ts b/docs_app/content/examples/component-interaction/src/app/hero-child.component.ts deleted file mode 100644 index 4a0b8d4229..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/hero-child.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - selector: 'app-hero-child', - template: ` -

    {{hero.name}} says:

    -

    I, {{hero.name}}, am at your service, {{masterName}}.

    - ` -}) -export class HeroChildComponent { - @Input() hero: Hero; - @Input('master') masterName: string; -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/hero-parent.component.ts b/docs_app/content/examples/component-interaction/src/app/hero-parent.component.ts deleted file mode 100644 index 949c649c82..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/hero-parent.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { HEROES } from './hero'; - -@Component({ - selector: 'app-hero-parent', - template: ` -

    {{master}} controls {{heroes.length}} heroes

    - - - ` -}) -export class HeroParentComponent { - heroes = HEROES; - master = 'Master'; -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/hero.ts b/docs_app/content/examples/component-interaction/src/app/hero.ts deleted file mode 100644 index a7b70f48e8..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/hero.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class Hero { - name: string; -} - -export const HEROES = [ - {name: 'Mr. IQ'}, - {name: 'Magneta'}, - {name: 'Bombasto'} -]; diff --git a/docs_app/content/examples/component-interaction/src/app/mission.service.ts b/docs_app/content/examples/component-interaction/src/app/mission.service.ts deleted file mode 100644 index e8f4a42667..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/mission.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; - -@Injectable() -export class MissionService { - - // Observable string sources - private missionAnnouncedSource = new Subject(); - private missionConfirmedSource = new Subject(); - - // Observable string streams - missionAnnounced$ = this.missionAnnouncedSource.asObservable(); - missionConfirmed$ = this.missionConfirmedSource.asObservable(); - - // Service message commands - announceMission(mission: string) { - this.missionAnnouncedSource.next(mission); - } - - confirmMission(astronaut: string) { - this.missionConfirmedSource.next(astronaut); - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/missioncontrol.component.ts b/docs_app/content/examples/component-interaction/src/app/missioncontrol.component.ts deleted file mode 100644 index 4c1f539b59..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/missioncontrol.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { MissionService } from './mission.service'; - -@Component({ - selector: 'app-mission-control', - template: ` -

    Mission Control

    - - - -

    History

    -
      -
    • {{event}}
      • -
    - `, - providers: [MissionService] -}) -export class MissionControlComponent { - astronauts = ['Lovell', 'Swigert', 'Haise']; - history: string[] = []; - missions = ['Fly to the moon!', - 'Fly to mars!', - 'Fly to Vegas!']; - nextMission = 0; - - constructor(private missionService: MissionService) { - missionService.missionConfirmed$.subscribe( - astronaut => { - this.history.push(`${astronaut} confirmed the mission`); - }); - } - - announce() { - let mission = this.missions[this.nextMission++]; - this.missionService.announceMission(mission); - this.history.push(`Mission "${mission}" announced`); - if (this.nextMission >= this.missions.length) { this.nextMission = 0; } - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/name-child.component.ts b/docs_app/content/examples/component-interaction/src/app/name-child.component.ts deleted file mode 100644 index 8393e21ebd..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/name-child.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'app-name-child', - template: '

    "{{name}}"

    ' -}) -export class NameChildComponent { - private _name = ''; - - @Input() - set name(name: string) { - this._name = (name && name.trim()) || ''; - } - - get name(): string { return this._name; } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/name-parent.component.ts b/docs_app/content/examples/component-interaction/src/app/name-parent.component.ts deleted file mode 100644 index 2c8c23b781..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/name-parent.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-name-parent', - template: ` -

    Master controls {{names.length}} names

    - - ` -}) -export class NameParentComponent { - // Displays 'Mr. IQ', '', 'Bombasto' - names = ['Mr. IQ', ' ', ' Bombasto ']; -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/version-child.component.ts b/docs_app/content/examples/component-interaction/src/app/version-child.component.ts deleted file mode 100644 index 1f3da880f4..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/version-child.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* tslint:disable:forin */ -// #docregion -import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; - -@Component({ - selector: 'app-version-child', - template: ` -

    Version {{major}}.{{minor}}

    -

    Change log:

    -
      -
    • {{change}}
      • -
    - ` -}) -export class VersionChildComponent implements OnChanges { - @Input() major: number; - @Input() minor: number; - changeLog: string[] = []; - - ngOnChanges(changes: {[propKey: string]: SimpleChange}) { - let log: string[] = []; - for (let propName in changes) { - let changedProp = changes[propName]; - let to = JSON.stringify(changedProp.currentValue); - if (changedProp.isFirstChange()) { - log.push(`Initial value of ${propName} set to ${to}`); - } else { - let from = JSON.stringify(changedProp.previousValue); - log.push(`${propName} changed from ${from} to ${to}`); - } - } - this.changeLog.push(log.join(', ')); - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/version-parent.component.ts b/docs_app/content/examples/component-interaction/src/app/version-parent.component.ts deleted file mode 100644 index 0e9476b3c6..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/version-parent.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-version-parent', - template: ` -

    Source code version

    - - - - ` -}) -export class VersionParentComponent { - major = 1; - minor = 23; - - newMinor() { - this.minor++; - } - - newMajor() { - this.major++; - this.minor = 0; - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/voter.component.ts b/docs_app/content/examples/component-interaction/src/app/voter.component.ts deleted file mode 100644 index 9583e74466..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/voter.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -@Component({ - selector: 'app-voter', - template: ` -

    {{name}}

    - - - ` -}) -export class VoterComponent { - @Input() name: string; - @Output() onVoted = new EventEmitter(); - voted = false; - - vote(agreed: boolean) { - this.onVoted.emit(agreed); - this.voted = true; - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/app/votetaker.component.ts b/docs_app/content/examples/component-interaction/src/app/votetaker.component.ts deleted file mode 100644 index 564cb93261..0000000000 --- a/docs_app/content/examples/component-interaction/src/app/votetaker.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-vote-taker', - template: ` -

    Should mankind colonize the Universe?

    -

    Agree: {{agreed}}, Disagree: {{disagreed}}

    - - - ` -}) -export class VoteTakerComponent { - agreed = 0; - disagreed = 0; - voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto']; - - onVoted(agreed: boolean) { - agreed ? this.agreed++ : this.disagreed++; - } -} -// #enddocregion diff --git a/docs_app/content/examples/component-interaction/src/assets/demo.css b/docs_app/content/examples/component-interaction/src/assets/demo.css deleted file mode 100644 index b63a8b38dd..0000000000 --- a/docs_app/content/examples/component-interaction/src/assets/demo.css +++ /dev/null @@ -1,9 +0,0 @@ -/* Component Communication cookbook specific styles */ -.seconds { - background-color: black; - color: red; - font-size: 3em; - margin: 0.3em 0; - text-align: center; - width: 1.5em; -} diff --git a/docs_app/content/examples/component-interaction/src/index.html b/docs_app/content/examples/component-interaction/src/index.html deleted file mode 100644 index cb5f519b8c..0000000000 --- a/docs_app/content/examples/component-interaction/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Passing information from parent to child - - - - - - - - - diff --git a/docs_app/content/examples/component-interaction/src/main.ts b/docs_app/content/examples/component-interaction/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/component-interaction/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/component-interaction/stackblitz.json b/docs_app/content/examples/component-interaction/stackblitz.json deleted file mode 100644 index 421ac6f973..0000000000 --- a/docs_app/content/examples/component-interaction/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Component Communication Cookbook samples", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags":["cookbook", "component"] -} diff --git a/docs_app/content/examples/component-styles/e2e/app.e2e-spec.ts b/docs_app/content/examples/component-styles/e2e/app.e2e-spec.ts deleted file mode 100644 index 910f9351d4..0000000000 --- a/docs_app/content/examples/component-styles/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Component Style Tests', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('scopes component styles to component view', function() { - let componentH1 = element(by.css('app-root > h1')); - let externalH1 = element(by.css('body > h1')); - - // Note: sometimes webdriver returns the fontWeight as "normal", - // other times as "400", both of which are equal in CSS terms. - expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/); - expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/); - }); - - - it('allows styling :host element', function() { - let host = element(by.css('app-hero-details')); - - expect(host.getCssValue('borderWidth')).toEqual('1px'); - }); - - it('supports :host() in function form', function() { - let host = element(by.css('app-hero-details')); - - host.element(by.buttonText('Activate')).click(); - expect(host.getCssValue('borderWidth')).toEqual('3px'); - }); - - it('allows conditional :host-context() styling', function() { - let h2 = element(by.css('app-hero-details h2')); - - expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff - }); - - it('styles both view and content children with /deep/', function() { - let viewH3 = element(by.css('app-hero-team h3')); - let contentH3 = element(by.css('app-hero-controls h3')); - - expect(viewH3.getCssValue('fontStyle')).toEqual('italic'); - expect(contentH3.getCssValue('fontStyle')).toEqual('italic'); - }); - - it('includes styles loaded with CSS @import', function() { - let host = element(by.css('app-hero-details')); - - expect(host.getCssValue('padding')).toEqual('10px'); - }); - - it('processes template inline styles', function() { - let button = element(by.css('app-hero-controls button')); - let externalButton = element(by.css('body > button')); - expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff - expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); - }); - - it('processes template s', function() { - let li = element(by.css('app-hero-team li:first-child')); - let externalLi = element(by.css('body > ul li')); - - expect(li.getCssValue('listStyleType')).toEqual('square'); - expect(externalLi.getCssValue('listStyleType')).not.toEqual('square'); - }); - -}); diff --git a/docs_app/content/examples/component-styles/example-config.json b/docs_app/content/examples/component-styles/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/component-styles/src/app/app.module.ts b/docs_app/content/examples/component-styles/src/app/app.module.ts deleted file mode 100644 index 31c72cbbf2..0000000000 --- a/docs_app/content/examples/component-styles/src/app/app.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { HeroAppComponent } from './hero-app.component'; -import { HeroAppMainComponent } from './hero-app-main.component'; -import { HeroDetailsComponent } from './hero-details.component'; -import { HeroControlsComponent } from './hero-controls.component'; -import { QuestSummaryComponent } from './quest-summary.component'; -import { HeroTeamComponent } from './hero-team.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - HeroAppComponent, - HeroAppMainComponent, - HeroDetailsComponent, - HeroControlsComponent, - QuestSummaryComponent, - HeroTeamComponent - ], - bootstrap: [ HeroAppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/component-styles/src/app/hero-app-main.component.ts b/docs_app/content/examples/component-styles/src/app/hero-app-main.component.ts deleted file mode 100644 index efecea0b42..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-app-main.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - selector: 'app-hero-main', - template: ` - - - - - ` -}) -export class HeroAppMainComponent { - @Input() hero: Hero; -} diff --git a/docs_app/content/examples/component-styles/src/app/hero-app.component.1.ts b/docs_app/content/examples/component-styles/src/app/hero-app.component.1.ts deleted file mode 100644 index a89786c5d3..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-app.component.1.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; -import { Hero } from './hero'; - -// #docregion -@Component({ - selector: 'app-root', - template: ` -

    Tour of Heroes

    - - `, - styleUrls: ['./hero-app.component.css'] -}) -export class HeroAppComponent { -// #enddocregion - hero = new Hero( - 'Human Torch', - ['Mister Fantastic', 'Invisible Woman', 'Thing'] - ); - - @HostBinding('class') get themeClass() { - return 'theme-light'; - } -// #docregion -} -// #enddocregion diff --git a/docs_app/content/examples/component-styles/src/app/hero-app.component.css b/docs_app/content/examples/component-styles/src/app/hero-app.component.css deleted file mode 100644 index 39671e32a9..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-app.component.css +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - font-weight: normal; -} diff --git a/docs_app/content/examples/component-styles/src/app/hero-app.component.ts b/docs_app/content/examples/component-styles/src/app/hero-app.component.ts deleted file mode 100644 index dd72cc5dfc..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-app.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, HostBinding } from '@angular/core'; -import { Hero } from './hero'; - -// #docregion -@Component({ - selector: 'app-root', - template: ` -

    Tour of Heroes

    - - `, - styles: ['h1 { font-weight: normal; }'] -}) -export class HeroAppComponent { -// #enddocregion - hero = new Hero( - 'Human Torch', - ['Mister Fantastic', 'Invisible Woman', 'Thing'] - ); - - @HostBinding('class') get themeClass() { - return 'theme-light'; - } -// #docregion -} -// #enddocregion diff --git a/docs_app/content/examples/component-styles/src/app/hero-controls.component.ts b/docs_app/content/examples/component-styles/src/app/hero-controls.component.ts deleted file mode 100644 index 2b6ad84aa0..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-controls.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -// #docregion inlinestyles -@Component({ - selector: 'app-hero-controls', - template: ` - -

    Controls

    - - ` -}) -// #enddocregion inlinestyles -export class HeroControlsComponent { - @Input() hero: Hero; - - activate() { - this.hero.active = true; - } -} diff --git a/docs_app/content/examples/component-styles/src/app/hero-details-box.css b/docs_app/content/examples/component-styles/src/app/hero-details-box.css deleted file mode 100644 index f240073005..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-details-box.css +++ /dev/null @@ -1,3 +0,0 @@ -:host { - padding: 10px; -} diff --git a/docs_app/content/examples/component-styles/src/app/hero-details.component.css b/docs_app/content/examples/component-styles/src/app/hero-details.component.css deleted file mode 100644 index 7c381aa8d2..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-details.component.css +++ /dev/null @@ -1,29 +0,0 @@ -/* #docregion import */ -/* The AOT compiler needs the `./` to show that this is local */ -@import './hero-details-box.css'; -/* #enddocregion import */ - -/* #docregion host */ -:host { - display: block; - border: 1px solid black; -} -/* #enddocregion host */ - -/* #docregion hostfunction */ -:host(.active) { - border-width: 3px; -} -/* #enddocregion hostfunction */ - -/* #docregion hostcontext */ -:host-context(.theme-light) h2 { - background-color: #eef; -} -/* #enddocregion hostcontext */ - -/* #docregion deep */ -:host /deep/ h3 { - font-style: italic; -} -/* #enddocregion deep */ diff --git a/docs_app/content/examples/component-styles/src/app/hero-details.component.ts b/docs_app/content/examples/component-styles/src/app/hero-details.component.ts deleted file mode 100644 index 3a249b753a..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-details.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -// #docregion styleurls -@Component({ - selector: 'app-hero-details', - template: ` -

    {{hero.name}}

    - - - `, - styleUrls: ['./hero-details.component.css'] -}) -export class HeroDetailsComponent { - // #enddocregion styleurls - @Input() hero: Hero; - // #docregion styleurls -} diff --git a/docs_app/content/examples/component-styles/src/app/hero-team.component.ts b/docs_app/content/examples/component-styles/src/app/hero-team.component.ts deleted file mode 100644 index 62b4ff5abc..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero-team.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -// #docregion stylelink -@Component({ - selector: 'app-hero-team', - template: ` - - -

    Team

    -
      -
    • - {{member}} -
      • -
    ` -}) -// #enddocregion stylelink -export class HeroTeamComponent { - @Input() hero: Hero; -} diff --git a/docs_app/content/examples/component-styles/src/app/hero.ts b/docs_app/content/examples/component-styles/src/app/hero.ts deleted file mode 100644 index 7f8969e682..0000000000 --- a/docs_app/content/examples/component-styles/src/app/hero.ts +++ /dev/null @@ -1,7 +0,0 @@ -export class Hero { - active: boolean; - - constructor(public name: string, - public team: string[]) { - } -} diff --git a/docs_app/content/examples/component-styles/src/app/quest-summary.component.css b/docs_app/content/examples/component-styles/src/app/quest-summary.component.css deleted file mode 100644 index 207fa981dd..0000000000 --- a/docs_app/content/examples/component-styles/src/app/quest-summary.component.css +++ /dev/null @@ -1,5 +0,0 @@ -:host { - display: block; - background-color: green; - color: white; -} diff --git a/docs_app/content/examples/component-styles/src/app/quest-summary.component.html b/docs_app/content/examples/component-styles/src/app/quest-summary.component.html deleted file mode 100644 index ace27d2a1c..0000000000 --- a/docs_app/content/examples/component-styles/src/app/quest-summary.component.html +++ /dev/null @@ -1 +0,0 @@ -

    No quests in progress

    diff --git a/docs_app/content/examples/component-styles/src/app/quest-summary.component.ts b/docs_app/content/examples/component-styles/src/app/quest-summary.component.ts deleted file mode 100644 index 25765ed16d..0000000000 --- a/docs_app/content/examples/component-styles/src/app/quest-summary.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* tslint:disable:no-unused-variable */ -// #docplaster -import { Component, ViewEncapsulation } from '@angular/core'; - -// #docregion -@Component({ - selector: 'app-quest-summary', - // #docregion urls - templateUrl: './quest-summary.component.html', - styleUrls: ['./quest-summary.component.css'] - // #enddocregion urls -}) -export class QuestSummaryComponent { } -// #enddocregion -/* - // #docregion encapsulation.native - // warning: few browsers support shadow DOM encapsulation at this time - encapsulation: ViewEncapsulation.Native - // #enddocregion encapsulation.native -*/ diff --git a/docs_app/content/examples/component-styles/src/assets/hero-team.component.css b/docs_app/content/examples/component-styles/src/assets/hero-team.component.css deleted file mode 100644 index b87679886b..0000000000 --- a/docs_app/content/examples/component-styles/src/assets/hero-team.component.css +++ /dev/null @@ -1,3 +0,0 @@ -li { - list-style-type: square; -} diff --git a/docs_app/content/examples/component-styles/src/index.html b/docs_app/content/examples/component-styles/src/index.html deleted file mode 100644 index ec478bd8ef..0000000000 --- a/docs_app/content/examples/component-styles/src/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Component Styles - - - - - -

    External H1 Title for E2E test

    - - -
      -
    • External list for E2E test
      • -
    - - - diff --git a/docs_app/content/examples/component-styles/src/main.ts b/docs_app/content/examples/component-styles/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/component-styles/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/component-styles/stackblitz.json b/docs_app/content/examples/component-styles/stackblitz.json deleted file mode 100644 index 53c9360839..0000000000 --- a/docs_app/content/examples/component-styles/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Component Styles", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.native.*", - "!**/*.[1].*" - ], - "tags": ["CSS"] -} diff --git a/docs_app/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts b/docs_app/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts deleted file mode 100644 index 07ab501be7..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,102 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Dependency Injection Cookbook', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should render Logged in User example', function () { - let loggedInUser = element.all(by.xpath('//h3[text()="Logged in user"]')).get(0); - expect(loggedInUser).toBeDefined(); - }); - - it('"Bombasto" should be the logged in user', function () { - let loggedInUser = element.all(by.xpath('//div[text()="Name: Bombasto"]')).get(0); - expect(loggedInUser).toBeDefined(); - }); - - it('should render sorted heroes', function () { - let sortedHeroes = element.all(by.xpath('//h3[text()="Sorted Heroes" and position()=1]')).get(0); - expect(sortedHeroes).toBeDefined(); - }); - - it('Mr. Nice should be in sorted heroes', function () { - let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Mr. Nice" and position()=2]')).get(0); - expect(sortedHero).toBeDefined(); - }); - - it('RubberMan should be in sorted heroes', function () { - let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="RubberMan" and position()=3]')).get(0); - expect(sortedHero).toBeDefined(); - }); - - it('Magma should be in sorted heroes', function () { - let sortedHero = element.all(by.xpath('//sorted-heroes/[text()="Magma"]')).get(0); - expect(sortedHero).toBeDefined(); - }); - - it('should render Hero of the Month', function () { - let heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0); - expect(heroOfTheMonth).toBeDefined(); - }); - - it('should render Hero Bios', function () { - let heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0); - expect(heroBios).toBeDefined(); - }); - - it('should render Magma\'s description in Hero Bios', function () { - let magmaText = element.all(by.xpath('//textarea[text()="Hero of all trades"]')).get(0); - expect(magmaText).toBeDefined(); - }); - - it('should render Magma\'s phone in Hero Bios and Contacts', function () { - let magmaPhone = element.all(by.xpath('//div[text()="Phone #: 555-555-5555"]')).get(0); - expect(magmaPhone).toBeDefined(); - }); - - it('should render Hero-of-the-Month runner-ups', function () { - let runnersUp = element(by.id('rups1')).getText(); - expect(runnersUp).toContain('RubberMan, Mr. Nice'); - }); - - it('should render DateLogger log entry in Hero-of-the-Month', function () { - let logs = element.all(by.id('logs')).get(0).getText(); - expect(logs).toContain('INFO: starting up at'); - }); - - it('should highlight Hero Bios and Contacts container when mouseover', function () { - let target = element(by.css('div[appHighlight="yellow"]')); - let yellow = 'rgba(255, 255, 0, 1)'; - - expect(target.getCssValue('background-color')).not.toEqual(yellow); - browser.actions().mouseMove(target.getWebElement()).perform(); - expect(target.getCssValue('background-color')).toEqual(yellow); - }); - - describe('in Parent Finder', function () { - let cathy1 = element(by.css('alex cathy')); - let craig1 = element(by.css('alex craig')); - let carol1 = element(by.css('alex carol p')); - let carol2 = element(by.css('barry carol p')); - - it('"Cathy" should find "Alex" via the component class', function () { - expect(cathy1.getText()).toContain('Found Alex via the component'); - }); - - it('"Craig" should not find "Alex" via the base class', function () { - expect(craig1.getText()).toContain('Did not find Alex via the base'); - }); - - it('"Carol" within "Alex" should have "Alex" parent', function () { - expect(carol1.getText()).toContain('Alex'); - }); - - it('"Carol" within "Barry" should have "Barry" parent', function () { - expect(carol2.getText()).toContain('Barry'); - }); - }); -}); diff --git a/docs_app/content/examples/dependency-injection-in-action/example-config.json b/docs_app/content/examples/dependency-injection-in-action/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts deleted file mode 100644 index 09a0592d00..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/app-routing.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - providers: [], - exports: [RouterModule] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.html b/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.html deleted file mode 100644 index 45cc12bc2d..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.html +++ /dev/null @@ -1,38 +0,0 @@ -

    DI Cookbook

    -
    -

    Logged in user

    -
    Name: {{userContext.name}}
    -
    Role: {{userContext.role}}
    -
    - -
    -

    Hero Bios

    - -
    - - -
    -

    Hero Bios and Contacts

    -
    - -
    -
    - - -
    - -
    - -
    -

    Unsorted Heroes

    - -
    - -
    -

    Sorted Heroes

    - -
    - -
    - -
    diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.ts deleted file mode 100644 index b29f3b4126..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/app.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -// #docregion import-services -import { LoggerService } from './logger.service'; -import { UserContextService } from './user-context.service'; -import { UserService } from './user.service'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', -// #docregion providers - providers: [ LoggerService, UserContextService, UserService ] -// #enddocregion providers -}) -export class AppComponent { -// #enddocregion import-services - - private userId = 1; - - // #docregion ctor - constructor(logger: LoggerService, public userContext: UserContextService) { - userContext.loadUser(this.userId); - logger.logInfo('AppComponent initialized'); - } - // #enddocregion ctor -// #docregion import-services -} -// #enddocregion import-services diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/app.module.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/app.module.ts deleted file mode 100644 index a240e21f7c..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/app.module.ts +++ /dev/null @@ -1,74 +0,0 @@ -// #docregion -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -// import { AppRoutingModule } from './app-routing.module'; -import { LocationStrategy, - HashLocationStrategy } from '@angular/common'; -import { NgModule } from '@angular/core'; - -import { HeroData } from './hero-data'; -import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; - - -import { AppComponent } from './app.component'; -import { HeroBioComponent } from './hero-bio.component'; -import { HeroBiosComponent, - HeroBiosAndContactsComponent } from './hero-bios.component'; -import { HeroOfTheMonthComponent } from './hero-of-the-month.component'; -import { HeroContactComponent } from './hero-contact.component'; -import { HeroesBaseComponent, - SortedHeroesComponent } from './sorted-heroes.component'; -import { HighlightDirective } from './highlight.directive'; -import { ParentFinderComponent, - AlexComponent, - AliceComponent, - CarolComponent, - ChrisComponent, - CraigComponent, - CathyComponent, - BarryComponent, - BethComponent, - BobComponent } from './parent-finder.component'; - -const declarations = [ - AppComponent, - HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent, - HeroesBaseComponent, SortedHeroesComponent, - HeroOfTheMonthComponent, HeroContactComponent, - HighlightDirective, - ParentFinderComponent, -]; - -const a_components = [AliceComponent, AlexComponent ]; - -const b_components = [ BarryComponent, BethComponent, BobComponent ]; - -const c_components = [ - CarolComponent, ChrisComponent, CraigComponent, - CathyComponent -]; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpModule, - InMemoryWebApiModule.forRoot(HeroData) - // AppRoutingModule TODO: add routes - ], - declarations: [ - declarations, - a_components, - b_components, - c_components, - ], - bootstrap: [ AppComponent ], - // #docregion providers - providers: [ - { provide: LocationStrategy, useClass: HashLocationStrategy } - ] - // #enddocregion providers -}) -export class AppModule { } diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts deleted file mode 100644 index 465e16cf9b..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/date-logger.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* tslint:disable:one-line*/ -// #docregion -import { Injectable } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -// #docregion date-logger-service -@Injectable() -// #docregion date-logger-service-signature -export class DateLoggerService extends LoggerService -// #enddocregion date-logger-service-signature -{ - logInfo(msg: any) { super.logInfo(stamp(msg)); } - logDebug(msg: any) { super.logInfo(stamp(msg)); } - logError(msg: any) { super.logError(stamp(msg)); } -} - -function stamp(msg: any) { return msg + ' at ' + new Date(); } -// #enddocregion date-logger-service diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts deleted file mode 100644 index 1e573e6acd..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { Component, Input, OnInit } from '@angular/core'; - -import { HeroCacheService } from './hero-cache.service'; - -// #docregion component -@Component({ - selector: 'app-hero-bio', - // #docregion template - template: ` -

    {{hero.name}}

    - - `, - // #enddocregion template - providers: [HeroCacheService] -}) - -export class HeroBioComponent implements OnInit { - @Input() heroId: number; - - constructor(private heroCache: HeroCacheService) { } - - ngOnInit() { this.heroCache.fetchCachedHero(this.heroId); } - - get hero() { return this.heroCache.hero; } -} -// #enddocregion component diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts deleted file mode 100644 index 07f9a85d6b..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -import { HeroService } from './hero.service'; -import { LoggerService } from './logger.service'; - -//////// HeroBiosComponent //// -// #docregion simple -@Component({ - selector: 'app-hero-bios', - template: ` - - - `, - providers: [HeroService] -}) -export class HeroBiosComponent { -// #enddocregion simple -// #docregion ctor - constructor(logger: LoggerService) { - logger.logInfo('Creating HeroBiosComponent'); - } -// #enddocregion ctor -// #docregion simple -} -// #enddocregion simple - -//////// HeroBiosAndContactsComponent //// -// #docregion hero-bios-and-contacts -@Component({ - selector: 'app-hero-bios-and-contacts', - // #docregion template - template: ` - - - `, - // #enddocregion template - // #docregion class-provider - providers: [HeroService] - // #enddocregion class-provider -}) -export class HeroBiosAndContactsComponent { - constructor(logger: LoggerService) { - logger.logInfo('Creating HeroBiosAndContactsComponent'); - } -} -// #enddocregion hero-bios-and-contacts diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts deleted file mode 100644 index 6dbc7a0c4f..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -// #docregion service -@Injectable() -export class HeroCacheService { - hero: Hero; - constructor(private heroService: HeroService) {} - - fetchCachedHero(id: number) { - if (!this.hero) { - this.hero = this.heroService.getHeroById(id); - } - return this.hero; - } -} -// #enddocregion service diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts deleted file mode 100644 index 205e1f9335..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docplaster -// #docregion -import { Component, Host, Optional } from '@angular/core'; - -import { HeroCacheService } from './hero-cache.service'; -import { LoggerService } from './logger.service'; - -// #docregion component -@Component({ - selector: 'app-hero-contact', - template: ` -
    Phone #: {{phoneNumber}} - !!!
    ` -}) -export class HeroContactComponent { - - hasLogger = false; - - constructor( - // #docregion ctor-params - @Host() // limit to the host component's instance of the HeroCacheService - private heroCache: HeroCacheService, - - @Host() // limit search for logger; hides the application-wide logger - @Optional() // ok if the logger doesn't exist - private loggerService: LoggerService - // #enddocregion ctor-params - ) { - if (loggerService) { - this.hasLogger = true; - loggerService.logInfo('HeroContactComponent can log!'); - } - // #docregion ctor - } - // #enddocregion ctor - - get phoneNumber() { return this.heroCache.hero.phone; } - -} -// #enddocregion component diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-data.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-data.ts deleted file mode 100644 index 10cdbcaab1..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-data.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Hero } from './hero'; - -export class HeroData { - createDb() { - let heroes = [ - new Hero(1, 'Windstorm'), - new Hero(2, 'Bombasto'), - new Hero(3, 'Magneta'), - new Hero(4, 'Tornado') - ]; - return {heroes}; - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts deleted file mode 100644 index beaa35c53a..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts +++ /dev/null @@ -1,26 +0,0 @@ -// Illustrative (not used), mini-version of the actual HeroOfTheMonthComponent -// Injecting with the MinimalLogger "interface-class" -import { Component, NgModule } from '@angular/core'; -import { LoggerService } from './logger.service'; -import { MinimalLogger } from './minimal-logger.service'; - -// #docregion -@Component({ - selector: 'app-hero-of-the-month', - templateUrl: './hero-of-the-month.component.html', - // Todo: move this aliasing, `useExisting` provider to the AppModule - providers: [{ provide: MinimalLogger, useExisting: LoggerService }] -}) -export class HeroOfTheMonthComponent { - logs: string[] = []; - constructor(logger: MinimalLogger) { - logger.logInfo('starting up'); - } -} -// #enddocregion - -// This NgModule exists only to avoid the Angular language service's "undeclared component" error -@NgModule({ - declarations: [ HeroOfTheMonthComponent ] -}) -class NoopModule {} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html deleted file mode 100644 index f0ae619d6a..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.html +++ /dev/null @@ -1,9 +0,0 @@ -

    {{title}}

    -
    Winner: {{heroOfTheMonth.name}}
    -
    Reason for award: {{heroOfTheMonth.description}}
    -
    Runners-up: {{runnersUp}}
    - -

    Logs:

    -
    -
    {{log}}
    -
    diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts deleted file mode 100644 index 2b44cdfe70..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -/* tslint:disable:one-line*/ -// #docplaster -// #docregion injection-token -import { InjectionToken } from '@angular/core'; - -export const TITLE = new InjectionToken('title'); -// #enddocregion injection-token - -// #docregion hero-of-the-month -import { Component, Inject } from '@angular/core'; - -import { DateLoggerService } from './date-logger.service'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -import { LoggerService } from './logger.service'; -import { MinimalLogger } from './minimal-logger.service'; -import { RUNNERS_UP, - runnersUpFactory } from './runners-up'; - -// #enddocregion hero-of-the-month -// #docregion some-hero -const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555'); -// #enddocregion some-hero - -// #docregion hero-of-the-month -@Component({ - selector: 'app-hero-of-the-month', - templateUrl: './hero-of-the-month.component.html', - providers: [ - // #docregion use-value - { provide: Hero, useValue: someHero }, - // #docregion provide-injection-token - { provide: TITLE, useValue: 'Hero of the Month' }, - // #enddocregion provide-injection-token - // #enddocregion use-value - // #docregion use-class - { provide: HeroService, useClass: HeroService }, - { provide: LoggerService, useClass: DateLoggerService }, - // #enddocregion use-class - // #docregion use-existing - { provide: MinimalLogger, useExisting: LoggerService }, - // #enddocregion use-existing - // #docregion provide-injection-token, use-factory - { provide: RUNNERS_UP, useFactory: runnersUpFactory(2), deps: [Hero, HeroService] } - // #enddocregion provide-injection-token, use-factory - ] -}) -export class HeroOfTheMonthComponent { - logs: string[] = []; - -// #docregion ctor-signature - constructor( - logger: MinimalLogger, - public heroOfTheMonth: Hero, - @Inject(RUNNERS_UP) public runnersUp: string, - @Inject(TITLE) public title: string) -// #enddocregion ctor-signature - { - this.logs = logger.logs; - logger.logInfo('starting up'); - } -} -// #enddocregion hero-of-the-month diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero.service.ts deleted file mode 100644 index 2063c30d7a..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero.service.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Hero } from './hero'; - -@Injectable() -export class HeroService { - - // TODO move to database - private heroes: Array = [ - new Hero(1, 'RubberMan', 'Hero of many talents', '123-456-7899'), - new Hero(2, 'Magma', 'Hero of all trades', '555-555-5555'), - new Hero(3, 'Mr. Nice', 'The name says it all', '111-222-3333') - ]; - - getHeroById(id: number): Hero { - return this.heroes.find(hero => hero.id === id); - } - - getAllHeroes(): Array { - return this.heroes; - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/hero.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/hero.ts deleted file mode 100644 index c17069e727..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/hero.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -export class Hero { - constructor( - public id: number, - public name: string, - public description?: string, - public phone?: string) { - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts deleted file mode 100644 index 94b4e0b7fe..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docplaster -// #docregion -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; - -@Directive({ - selector: '[appHighlight]' -}) -export class HighlightDirective { - - @Input('appHighlight') highlightColor: string; - - private el: HTMLElement; - - constructor(el: ElementRef) { - this.el = el.nativeElement; - } - - @HostListener('mouseenter') onMouseEnter() { - this.highlight(this.highlightColor || 'cyan'); - } - - @HostListener('mouseleave') onMouseLeave() { - this.highlight(null); - } - - private highlight(color: string) { - this.el.style.backgroundColor = color; - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/logger.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/logger.service.ts deleted file mode 100644 index df8ee6b9c7..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/logger.service.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class LoggerService { - logs: string[] = []; - - logInfo(msg: any) { this.log(`INFO: ${msg}`); } - logDebug(msg: any) { this.log(`DEBUG: ${msg}`); } - logError(msg: any) { this.log(`ERROR: ${msg}`, true); } - - private log(msg: any, isErr = false) { - this.logs.push(msg); - isErr ? console.error(msg) : console.log(msg); - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts deleted file mode 100644 index d87fa594d1..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -// Class used as a "narrowing" interface that exposes a minimal logger -// Other members of the actual implementation are invisible -export abstract class MinimalLogger { - logs: string[]; - logInfo: (msg: string) => void; -} -// #enddocregion - -/* -// Transpiles to: -// #docregion minimal-logger-transpiled - var MinimalLogger = (function () { - function MinimalLogger() {} - return MinimalLogger; - }()); - exports("MinimalLogger", MinimalLogger); -// #enddocregion minimal-logger-transpiled -*/ - -// See http://stackoverflow.com/questions/43154832/unexpected-token-export-in-angular-app-with-systemjs-and-typescript/ -export const _ = 0; diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts deleted file mode 100644 index aa2d71d61c..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts +++ /dev/null @@ -1,215 +0,0 @@ -/* tslint:disable:no-unused-variable component-selector-name one-line check-open-brace */ -/* tslint:disable:*/ -// #docplaster -// #docregion -import { Component, forwardRef, Optional, SkipSelf } from '@angular/core'; - -// A component base class (see AlexComponent) -export abstract class Base { name = 'Count Basie'; } - -// Marker class, used as an interface -// #docregion parent -export abstract class Parent { name: string; } -// #enddocregion parent - -const DifferentParent = Parent; - -// #docregion provide-parent, provide-the-parent -// Helper method to provide the current component instance in the name of a `parentType`. -// #enddocregion provide-the-parent -// The `parentType` defaults to `Parent` when omitting the second parameter. -// #docregion provide-the-parent -const provideParent = -// #enddocregion provide-parent, provide-the-parent -// #docregion provide-parent - (component: any, parentType?: any) => { - return { provide: parentType || Parent, useExisting: forwardRef(() => component) }; - }; -// #enddocregion provide-parent - -// Simpler syntax version that always provides the component in the name of `Parent`. -const provideTheParent = -// #docregion provide-the-parent - (component: any) => { - return { provide: Parent, useExisting: forwardRef(() => component) }; - }; -// #enddocregion provide-the-parent - - -///////// C - Child ////////// -// #docregion carol -const templateC = ` -
    -

    {{name}}

    -

    My parent is {{parent?.name}}

    -
    `; - -@Component({ - selector: 'carol', - template: templateC -}) -// #docregion carol-class -export class CarolComponent { - name = 'Carol'; - // #docregion carol-ctor - constructor( @Optional() public parent: Parent ) { } - // #enddocregion carol-ctor -} -// #enddocregion carol-class -// #enddocregion carol - -@Component({ - selector: 'chris', - template: templateC -}) -export class ChrisComponent { - name = 'Chris'; - constructor( @Optional() public parent: Parent ) { } -} - -////// Craig /////////// -/** - * Show we cannot inject a parent by its base class. - */ -// #docregion craig -@Component({ - selector: 'craig', - template: ` -
    -

    Craig

    - {{alex ? 'Found' : 'Did not find'}} Alex via the base class. -
    ` -}) -export class CraigComponent { - constructor( @Optional() public alex: Base ) { } -} -// #enddocregion craig - -//////// B - Parent ///////// -// #docregion barry -const templateB = ` -
    -
    -

    {{name}}

    -

    My parent is {{parent?.name}}

    -
    - - -
    `; - -@Component({ - selector: 'barry', - template: templateB, - providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }] -}) -export class BarryComponent implements Parent { - name = 'Barry'; -// #docregion barry-ctor - constructor( @SkipSelf() @Optional() public parent: Parent ) { } -// #enddocregion barry-ctor -} -// #enddocregion barry - -@Component({ - selector: 'bob', - template: templateB, - providers: [ provideParent(BobComponent) ] -}) -export class BobComponent implements Parent { - name = 'Bob'; - constructor( @SkipSelf() @Optional() public parent: Parent ) { } -} - -@Component({ - selector: 'beth', - template: templateB, -// #docregion beth-providers - providers: [ provideParent(BethComponent, DifferentParent) ] -// #enddocregion beth-providers -}) -export class BethComponent implements Parent { - name = 'Beth'; - constructor( @SkipSelf() @Optional() public parent: Parent ) { } -} - -///////// A - Grandparent ////// - -// #docregion alex, alex-1 -@Component({ - selector: 'alex', - template: ` -
    -

    {{name}}

    - - - -
    `, -// #enddocregion alex-1 -// #docregion alex-providers - providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }], -// #enddocregion alex-providers -// #docregion alex-1 -}) -// #enddocregion alex-1 -// Todo: Add `... implements Parent` to class signature -// #docregion alex-1 -// #docregion alex-class-signature -export class AlexComponent extends Base -// #enddocregion alex-class-signature -{ - name = 'Alex'; -} -// #enddocregion alex, alex-1 - -///// - -// #docregion alice -@Component({ - selector: 'alice', - template: ` -
    -

    {{name}}

    - - - - -
    `, -// #docregion alice-providers - providers: [ provideParent(AliceComponent) ] -// #enddocregion alice-providers -}) -// #docregion alice-class-signature -export class AliceComponent implements Parent -// #enddocregion alice-class-signature -{ - name = 'Alice'; -} -// #enddocregion alice - -////// Cathy /////////// -/** - * Show we can inject a parent by component type - */ -// #docregion cathy -@Component({ - selector: 'cathy', - template: ` -
    -

    Cathy

    - {{alex ? 'Found' : 'Did not find'}} Alex via the component class.
    -
    ` -}) -export class CathyComponent { - constructor( @Optional() public alex: AlexComponent ) { } -} -// #enddocregion cathy - -///////// ParentFinder ////// -@Component({ - selector: 'app-parent-finder', - template: ` -

    Parent Finder

    - - ` -}) -export class ParentFinderComponent { } diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/runners-up.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/runners-up.ts deleted file mode 100644 index 0ce81ca55c..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/runners-up.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docplaster -// #docregion -import { InjectionToken } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -// #docregion runners-up -export const RUNNERS_UP = new InjectionToken('RunnersUp'); -// #enddocregion runners-up - -// #docregion factory-synopsis -export function runnersUpFactory(take: number) { - return (winner: Hero, heroService: HeroService): string => { - /* ... */ -// #enddocregion factory-synopsis - return heroService - .getAllHeroes() - .filter((hero) => hero.name !== winner.name) - .map(hero => hero.name) - .slice(0, Math.max(0, take)) - .join(', '); -// #docregion factory-synopsis - }; -}; -// #enddocregion factory-synopsis diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts deleted file mode 100644 index f5100dddef..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -/////// HeroesBaseComponent ///// -// #docregion heroes-base, injection -@Component({ - selector: 'app-unsorted-heroes', - template: `
    {{hero.name}}
    `, - providers: [HeroService] -}) -export class HeroesBaseComponent implements OnInit { - constructor(private heroService: HeroService) { } -// #enddocregion injection - - heroes: Array; - - ngOnInit() { - this.heroes = this.heroService.getAllHeroes(); - this.afterGetHeroes(); - } - - // Post-process heroes in derived class override. - protected afterGetHeroes() {} - -// #docregion injection -} -// #enddocregion heroes-base,injection - -/////// SortedHeroesComponent ///// -// #docregion sorted-heroes -@Component({ - selector: 'app-sorted-heroes', - template: `
    {{hero.name}}
    `, - providers: [HeroService] -}) -export class SortedHeroesComponent extends HeroesBaseComponent { - constructor(heroService: HeroService) { - super(heroService); - } - - protected afterGetHeroes() { - this.heroes = this.heroes.sort((h1, h2) => { - return h1.name < h2.name ? -1 : - (h1.name > h2.name ? 1 : 0); - }); - } -} -// #enddocregion sorted-heroes diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts deleted file mode 100644 index ed394fc734..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; - -import { LoggerService } from './logger.service'; -import { UserService } from './user.service'; - -// #docregion injectables, injectable -@Injectable() -export class UserContextService { -// #enddocregion injectables, injectable - name: string; - role: string; - loggedInSince: Date; - - // #docregion ctor, injectables - constructor(private userService: UserService, private loggerService: LoggerService) { - // #enddocregion ctor, injectables - this.loggedInSince = new Date(); - // #docregion ctor, injectables - } - // #enddocregion ctor, injectables - - loadUser(userId: number) { - let user = this.userService.getUserById(userId); - this.name = user.name; - this.role = user.role; - - this.loggerService.logDebug('loaded User'); - } -// #docregion injectables, injectable -} -// #enddocregion injectables, injectable diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts deleted file mode 100644 index c48b025a08..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class UserService { - - getUserById(userId: number): any { - return {name: 'Bombasto', role: 'Admin'}; - } -} diff --git a/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css b/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css deleted file mode 100644 index a8b59efd05..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css +++ /dev/null @@ -1,26 +0,0 @@ -.di-component{ - padding: 10px; - width:300px; - margin-bottom: 10px; -} -div[myHighlight] { - padding: 2px 8px; -} - -/* Parent Finder */ -.a, .b, .c { - margin: 6px 2px 6px; - padding: 4px 6px; -} -.a { - border: solid 2px black; -} -.b { - background: lightblue; - border: solid 1px darkblue; - display: flex; -} -.c { - background: pink; - border: solid 1px red; -} \ No newline at end of file diff --git a/docs_app/content/examples/dependency-injection-in-action/src/index.html b/docs_app/content/examples/dependency-injection-in-action/src/index.html deleted file mode 100644 index 8b36042f0c..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - Dependency Injection - - - - - - - - - diff --git a/docs_app/content/examples/dependency-injection-in-action/src/main.ts b/docs_app/content/examples/dependency-injection-in-action/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/dependency-injection-in-action/stackblitz.json b/docs_app/content/examples/dependency-injection-in-action/stackblitz.json deleted file mode 100644 index 20569051c1..0000000000 --- a/docs_app/content/examples/dependency-injection-in-action/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Dependency Injection", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags":["cookbook"] -} diff --git a/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts b/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts deleted file mode 100644 index 12fe6ae474..0000000000 --- a/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,204 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; - -describe('Dependency Injection Tests', function () { - - let expectedMsg: string; - let expectedMsgRx: RegExp; - - beforeAll(function () { - browser.get(''); - }); - - describe('Cars:', function() { - - it('DI car displays as expected', function () { - expectedMsg = 'DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#di')).getText()).toEqual(expectedMsg); - }); - - it('No DI car displays as expected', function () { - expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg); - }); - - it('Injector car displays as expected', function () { - expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#injector')).getText()).toEqual(expectedMsg); - }); - - it('Factory car displays as expected', function () { - expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#factory')).getText()).toEqual(expectedMsg); - }); - - it('Simple car displays as expected', function () { - expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#simple')).getText()).toEqual(expectedMsg); - }); - - it('Super car displays as expected', function () { - expectedMsg = 'Super car with 12 cylinders and Flintstone tires.'; - expect(element(by.css('#super')).getText()).toEqual(expectedMsg); - }); - - it('Test car displays as expected', function () { - expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.'; - expect(element(by.css('#test')).getText()).toEqual(expectedMsg); - }); - }); - - describe('Other Injections:', function() { - it('DI car displays as expected', function () { - expectedMsg = 'DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#car')).getText()).toEqual(expectedMsg); - }); - - it('Hero displays as expected', function () { - expectedMsg = 'Mr. Nice'; - expect(element(by.css('#hero')).getText()).toEqual(expectedMsg); - }); - - it('Optional injection displays as expected', function () { - expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!'; - expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg); - }); - }); - - describe('Tests:', function() { - - it('Tests display as expected', function () { - expectedMsgRx = /Tests passed/; - expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx); - }); - - }); - - describe('Provider variations:', function() { - - it('P1 (class) displays as expected', function () { - expectedMsg = 'Hello from logger provided with Logger class'; - expect(element(by.css('#p1')).getText()).toEqual(expectedMsg); - }); - - it('P3 (provide) displays as expected', function () { - expectedMsg = 'Hello from logger provided with useClass:Logger'; - expect(element(by.css('#p3')).getText()).toEqual(expectedMsg); - }); - - it('P4 (useClass:BetterLogger) displays as expected', function () { - expectedMsg = 'Hello from logger provided with useClass:BetterLogger'; - expect(element(by.css('#p4')).getText()).toEqual(expectedMsg); - }); - - it('P5 (useClass:EvenBetterLogger - dependency) displays as expected', function () { - expectedMsg = 'Message to Bob: Hello from EvenBetterlogger'; - expect(element(by.css('#p5')).getText()).toEqual(expectedMsg); - }); - - it('P6a (no alias) displays as expected', function () { - expectedMsg = 'Hello OldLogger (but we want NewLogger)'; - expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg); - }); - - it('P6b (alias) displays as expected', function () { - expectedMsg = 'Hello from NewLogger (via aliased OldLogger)'; - expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg); - }); - - it('P7 (useValue) displays as expected', function () { - expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"'; - expect(element(by.css('#p7')).getText()).toEqual(expectedMsg); - }); - - it('P8 (useFactory) displays as expected', function () { - expectedMsg = 'Hero service injected successfully via heroServiceProvider'; - expect(element(by.css('#p8')).getText()).toEqual(expectedMsg); - }); - - it('P9 (InjectionToken) displays as expected', function () { - expectedMsg = 'APP_CONFIG Application title is Dependency Injection'; - expect(element(by.css('#p9')).getText()).toEqual(expectedMsg); - }); - - it('P10 (optional dependency) displays as expected', function () { - expectedMsg = 'Optional logger was not available'; - expect(element(by.css('#p10')).getText()).toEqual(expectedMsg); - }); - }); - - describe('User/Heroes:', function() { - it('User is Bob - unauthorized', function () { - expectedMsgRx = /Bob, is not authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); - }); - - it('should have button', function () { - expect(element.all(by.cssContainingText('button', 'Next User')) - .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed'); - }); - - it('unauthorized user should have multiple unauthorized heroes', function () { - let heroes = element.all(by.css('#unauthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - }); - - it('unauthorized user should have no secret heroes', function () { - let heroes = element.all(by.css('#unauthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - - let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => { - return elem.getText().then((text: string) => { - return /secret/.test(text); - }); - }); - - expect(filteredHeroes.count()).toEqual(0); - }); - - it('unauthorized user should have no authorized heroes listed', function () { - expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0); - }); - - describe('after button click', function() { - - beforeAll(function (done: any) { - let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0); - buttonEle.click().then(done, done); - }); - - it('User is Alice - authorized', function () { - expectedMsgRx = /Alice, is authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); - }); - - it('authorized user should have multiple authorized heroes ', function () { - let heroes = element.all(by.css('#authorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - }); - - it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () { - let heroes = element.all(by.css('#tspAuthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - }); - - it('authorized user should have secret heroes', function () { - let heroes = element.all(by.css('#authorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - - let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) { - return elem.getText().then(function(text: string) { - return /secret/.test(text); - }); - }); - - expect(filteredHeroes.count()).toBeGreaterThan(0); - }); - - it('authorized user should have no unauthorized heroes listed', function () { - expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0); - }); - }); - }); -}); diff --git a/docs_app/content/examples/dependency-injection/example-config.json b/docs_app/content/examples/dependency-injection/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/dependency-injection/src/app/app-config.ts b/docs_app/content/examples/dependency-injection/src/app/app-config.ts deleted file mode 100644 index 81c0479ffd..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app-config.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - Must put this interface in its own file instead of app.config.ts - or else TypeScript gives a (bogus) warning: - WARNING in ./src/app/... .ts - "export 'AppConfig' was not found in './app.config' -*/ -export interface AppConfig { - apiEndpoint: string; - title: string; -} diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts deleted file mode 100644 index a33782dc90..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` -

    {{title}}

    - - - ` -}) - -export class AppComponent { - title = 'Dependency Injection'; -} diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts deleted file mode 100644 index c8a2c996b2..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -// #docregion imports -import { Component, Inject } from '@angular/core'; - -import { APP_CONFIG, AppConfig } from './app.config'; -// #enddocregion imports - -@Component({ - selector: 'app-root', - template: ` -

    {{title}}

    - - - ` -}) -export class AppComponent { - title: string; - - // #docregion ctor - constructor(@Inject(APP_CONFIG) config: AppConfig) { - this.title = config.title; - } - // #enddocregion ctor -} -// #enddocregion - diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.ts deleted file mode 100644 index b69856fa0a..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docplaster -// #docregion -// #docregion imports -import { Component, Inject } from '@angular/core'; - -import { APP_CONFIG, AppConfig } from './app.config'; -import { UserService } from './user.service'; -// #enddocregion imports - -@Component({ - selector: 'app-root', - template: ` -

    {{title}}

    - - - -

    User

    -

    - {{userInfo}} - -

    - - - - - ` -}) -export class AppComponent { - title: string; - - // #docregion ctor - constructor( - @Inject(APP_CONFIG) config: AppConfig, - private userService: UserService) { - this.title = config.title; - } - // #enddocregion ctor - - get isAuthorized() { return this.user.isAuthorized; } - nextUser() { this.userService.getNewUser(); } - get user() { return this.userService.user; } - - get userInfo() { - return `Current user, ${this.user.name}, is ` + - `${this.isAuthorized ? '' : 'not'} authorized. `; - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/app.config.ts b/docs_app/content/examples/dependency-injection/src/app/app.config.ts deleted file mode 100644 index 74af1cb194..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app.config.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { AppConfig } from './app-config'; -export { AppConfig } from './app-config'; - -// #docregion token -import { InjectionToken } from '@angular/core'; - -export const APP_CONFIG = new InjectionToken('app.config'); -// #enddocregion token - -// #docregion config -export const HERO_DI_CONFIG: AppConfig = { - apiEndpoint: 'api.heroes.com', - title: 'Dependency Injection' -}; diff --git a/docs_app/content/examples/dependency-injection/src/app/app.module.ts b/docs_app/content/examples/dependency-injection/src/app/app.module.ts deleted file mode 100644 index 85becdb3b9..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/app.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docplaster -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { APP_CONFIG, HERO_DI_CONFIG } from './app.config'; -import { AppComponent } from './app.component'; -import { CarComponent } from './car/car.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroesTspComponent } from './heroes/heroes-tsp.component'; -import { HeroListComponent } from './heroes/hero-list.component'; -import { InjectorComponent } from './injector.component'; -import { Logger } from './logger.service'; -import { TestComponent } from './test.component'; -import { UserService } from './user.service'; - -import { ProvidersModule } from './providers.module'; - -// #docregion ngmodule -@NgModule({ - imports: [ - BrowserModule, - ProvidersModule - ], - declarations: [ - AppComponent, - CarComponent, - HeroesComponent, - // #enddocregion ngmodule - HeroesTspComponent, - HeroListComponent, - InjectorComponent, - TestComponent - // #docregion ngmodule - ], - // #docregion providers, providers-2 - providers: [ - // #enddocregion providers - Logger, - // #docregion providers - UserService, - { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } - ], - // #enddocregion providers, providers-2 - exports: [ CarComponent, HeroesComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts deleted file mode 100644 index c758c72951..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts +++ /dev/null @@ -1,46 +0,0 @@ -// Examples with car and engine variations - -// #docplaster -import { Car, Engine, Tires } from './car'; - -///////// example 1 //////////// -export function simpleCar() { - // #docregion car-ctor-instantiation - // Simple car with 4 cylinders and Flintstone tires. - let car = new Car(new Engine(), new Tires()); - // #enddocregion car-ctor-instantiation - car.description = 'Simple'; - return car; -} - - -///////// example 2 //////////// -// #docregion car-ctor-instantiation-with-param - class Engine2 { - constructor(public cylinders: number) { } - } -// #enddocregion car-ctor-instantiation-with-param -export function superCar() { -// #docregion car-ctor-instantiation-with-param - // Super car with 12 cylinders and Flintstone tires. - let bigCylinders = 12; - let car = new Car(new Engine2(bigCylinders), new Tires()); -// #enddocregion car-ctor-instantiation-with-param - car.description = 'Super'; - return car; -} - -/////////// example 3 ////////// - // #docregion car-ctor-instantiation-with-mocks - class MockEngine extends Engine { cylinders = 8; } - class MockTires extends Tires { make = 'YokoGoodStone'; } - - // #enddocregion car-ctor-instantiation-with-mocks -export function testCar() { - // #docregion car-ctor-instantiation-with-mocks - // Test car with 8 cylinders and YokoGoodStone tires. - let car = new Car(new MockEngine(), new MockTires()); - // #enddocregion car-ctor-instantiation-with-mocks - car.description = 'Test'; - return car; -} diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts deleted file mode 100644 index 06daafe63b..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Engine, Tires, Car } from './car'; - -// BAD pattern! -export class CarFactory { - createCar() { - let car = new Car(this.createEngine(), this.createTires()); - car.description = 'Factory'; - return car; - } - - createEngine() { - return new Engine(); - } - - createTires() { - return new Tires(); - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts deleted file mode 100644 index 4f7498ee4e..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { ReflectiveInjector } from '@angular/core'; - -import { Car, Engine, Tires } from './car'; -import { Logger } from '../logger.service'; - -// #docregion injector -export function useInjector() { - let injector: ReflectiveInjector; - // #enddocregion injector - /* - // #docregion injector-no-new - // Cannot instantiate an ReflectiveInjector like this! - let injector = new ReflectiveInjector([Car, Engine, Tires]); - // #enddocregion injector-no-new - */ - // #docregion injector, injector-create-and-call - injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]); - // #docregion injector-call - let car = injector.get(Car); - // #enddocregion injector-call, injector-create-and-call - car.description = 'Injector'; - - injector = ReflectiveInjector.resolveAndCreate([Logger]); - let logger = injector.get(Logger); - logger.log('Injector car.drive() said: ' + car.drive()); - return car; -} diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts deleted file mode 100644 index 9026edebc2..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts +++ /dev/null @@ -1,24 +0,0 @@ -// Car without DI -import { Engine, Tires } from './car'; - -// #docregion car -export class Car { - - // #docregion car-ctor - public engine: Engine; - public tires: Tires; - public description = 'No DI'; - - constructor() { - this.engine = new Engine(); - this.tires = new Tires(); - } - // #enddocregion car-ctor - - // Method using the engine and tires - drive() { - return `${this.description} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; - } -} -// #enddocregion car diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts b/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts deleted file mode 100644 index 481ccd6cee..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Car, Engine, Tires } from './car'; -import { Car as CarNoDi } from './car-no-di'; -import { CarFactory } from './car-factory'; - -import { testCar, - simpleCar, - superCar } from './car-creations'; - -import { useInjector } from './car-injector'; - - -@Component({ - selector: 'app-car', - template: ` -

    Cars

    -
    {{car.drive()}}
    -
    {{noDiCar.drive()}}
    -
    {{injectorCar.drive()}}
    -
    {{factoryCar.drive()}}
    -
    {{simpleCar.drive()}}
    -
    {{superCar.drive()}}
    -
    {{testCar.drive()}}
    - `, - providers: [Car, Engine, Tires] -}) -export class CarComponent { - factoryCar = (new CarFactory).createCar(); - injectorCar = useInjector(); - noDiCar = new CarNoDi; - simpleCar = simpleCar(); - superCar = superCar(); - testCar = testCar(); - - constructor(public car: Car) {} -} diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car.ts b/docs_app/content/examples/dependency-injection/src/app/car/car.ts deleted file mode 100644 index 37162c570b..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/car/car.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Injectable } from '@angular/core'; - -export class Engine { - public cylinders = 4; -} - -export class Tires { - public make = 'Flintstone'; - public model = 'Square'; -} - -@Injectable() -export class Car { - // #docregion car-ctor - public description = 'DI'; - - constructor(public engine: Engine, public tires: Tires) { } - // #enddocregion car-ctor - - // Method using the engine and tires - drive() { - return `${this.description} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts b/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts deleted file mode 100644 index e65fdf3c46..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts +++ /dev/null @@ -1,25 +0,0 @@ - -/// Dummy modules to satisfy Angular Language Service -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { AppModule } from './app.module'; - -//////// - -import { AppComponent as AppComponent1 } from './app.component.1'; - -@NgModule({ - imports: [ CommonModule, AppModule ], - declarations: [ AppComponent1 ] -}) -export class DummyModule1 {} - -///////// - -import { AppComponent as AppComponent2 } from './app.component.2'; - -@NgModule({ - imports: [ CommonModule, AppModule ], - declarations: [ AppComponent2 ] -}) -export class DummyModule2 {} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts deleted file mode 100644 index 2e1f001771..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts +++ /dev/null @@ -1,35 +0,0 @@ - -/// Dummy modules to satisfy Angular Language Service -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -//////// - -import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1'; - -@NgModule({ - imports: [ CommonModule ], - declarations: [ HeroListComponent1 ], - exports: [ HeroListComponent1 ] -}) -export class DummyModule1 {} - -///////// - -import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2'; - -@NgModule({ - imports: [ CommonModule ], - declarations: [ HeroListComponent2 ] -}) -export class DummyModule2 {} - -///////// - -import { HeroesComponent as HeroesComponent1 } from './heroes.component.1'; - -@NgModule({ - imports: [ CommonModule, DummyModule1 ], - declarations: [ HeroesComponent1 ] -}) -export class DummyModule3 {} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts deleted file mode 100644 index 5c216f4d03..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { HEROES } from './mock-heroes'; - -@Component({ - selector: 'app-hero-list', - template: ` -
    - {{hero.id}} - {{hero.name}} -
    - ` -}) -// #docregion class -export class HeroListComponent { - heroes = HEROES; -} -// #enddocregion class diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts deleted file mode 100644 index 11f27ed4b1..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { Hero } from './hero'; -// #enddocregion -import { HeroService } from './hero.service.1'; -/* -// #docregion -import { HeroService } from './hero.service'; -// #enddocregion -*/ -// #docregion - -@Component({ - selector: 'app-hero-list', - template: ` -
    - {{hero.id}} - {{hero.name}} -
    - ` -}) -export class HeroListComponent { - heroes: Hero[]; - - // #docregion ctor - constructor(heroService: HeroService) { - this.heroes = heroService.getHeroes(); - } - // #enddocregion ctor -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts deleted file mode 100644 index 4536a04489..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* tslint:disable:one-line */ -// #docregion -import { Component } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -@Component({ - selector: 'app-hero-list', - template: ` -
    - {{hero.id}} - {{hero.name}} - ({{hero.isSecret ? 'secret' : 'public'}}) -
    - `, -}) -export class HeroListComponent { - heroes: Hero[]; - - // #docregion ctor-signature - constructor(heroService: HeroService) - // #enddocregion ctor-signature - { - this.heroes = heroService.getHeroes(); - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts deleted file mode 100644 index 7f422d5d79..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; - -@NgModule({}) -export class HeroModule { -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts deleted file mode 100644 index c8136b7db5..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root', -}) -export class HeroService { - constructor() { } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts deleted file mode 100644 index 908d75ee65..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; - -@Injectable({ - providedIn: 'root', -}) -export class HeroService { - getHeroes() { return HEROES; } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts deleted file mode 100644 index a4c1adcd1b..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { Logger } from '../logger.service'; - -@Injectable({ - providedIn: 'root', -}) -export class HeroService { - - // #docregion ctor - constructor(private logger: Logger) { } - // #enddocregion ctor - - getHeroes() { - this.logger.log('Getting heroes ...'); - return HEROES; - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts deleted file mode 100644 index 2d43704de0..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; - -@Injectable({ - // we declare that this service should be created - // by the root application injector. - - providedIn: 'root', -}) -export class HeroService { - getHeroes() { return HEROES; } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts deleted file mode 100644 index 0b77c78545..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HeroModule } from './hero.module'; -import { HEROES } from './mock-heroes'; - -@Injectable({ - // we declare that this service should be created - // by any injector that includes HeroModule. - - providedIn: HeroModule, -}) -export class HeroService { - getHeroes() { return HEROES; } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts deleted file mode 100644 index 6de4ebee90..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* tslint:disable:one-line */ -// #docregion -import { HeroService } from './hero.service'; -import { Logger } from '../logger.service'; -import { UserService } from '../user.service'; - -// #docregion factory -let heroServiceFactory = (logger: Logger, userService: UserService) => { - return new HeroService(logger, userService.user.isAuthorized); -}; -// #enddocregion factory - -// #docregion provider -export let heroServiceProvider = - { provide: HeroService, - useFactory: heroServiceFactory, - deps: [Logger, UserService] - }; -// #enddocregion provider diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts deleted file mode 100644 index 6c6fc27037..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HEROES } from './mock-heroes'; -import { Logger } from '../logger.service'; -import { UserService } from '../user.service'; - -@Injectable({ - providedIn: 'root', - useFactory: (logger: Logger, userService: UserService) => - new HeroService(logger, userService.user.isAuthorized), - deps: [Logger, UserService], -}) -export class HeroService { - // #docregion internals - constructor( - private logger: Logger, - private isAuthorized: boolean) { } - - getHeroes() { - let auth = this.isAuthorized ? 'authorized ' : 'unauthorized'; - this.logger.log(`Getting heroes for ${auth} user.`); - return HEROES.filter(hero => this.isAuthorized || !hero.isSecret); - } - // #enddocregion internals -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts deleted file mode 100644 index 5c49328241..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; - isSecret = false; -} diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts deleted file mode 100644 index 4d6c01b231..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; - -/** - * A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its - * `Injectable`-declared provider) in order to function. - * - * TSP stands for Tree-Shakeable Provider. - */ -@Component({ - selector: 'app-heroes-tsp', - template: ` -

    Heroes

    - - ` -}) -export class HeroesTspComponent { } diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts deleted file mode 100644 index 962f95fcb3..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docplaster -// #docregion, v1 -import { Component } from '@angular/core'; -// #enddocregion v1 -import { HeroService } from './hero.service'; - -// #docregion v1 -@Component({ - selector: 'app-heroes', - // #enddocregion v1 - providers: [ HeroService ], - // #docregion v1 - template: ` -

    Heroes

    - - ` -}) -export class HeroesComponent { } diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts deleted file mode 100644 index 97040c09f0..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { heroServiceProvider } from './hero.service.provider'; - -@Component({ - selector: 'app-heroes', - providers: [ heroServiceProvider ], - template: ` -

    Heroes

    - - ` -}) -export class HeroesComponent { } diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts deleted file mode 100644 index a836faa1bd..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, isSecret: false, name: 'Mr. Nice' }, - { id: 12, isSecret: false, name: 'Narco' }, - { id: 13, isSecret: false, name: 'Bombasto' }, - { id: 14, isSecret: false, name: 'Celeritas' }, - { id: 15, isSecret: false, name: 'Magneta' }, - { id: 16, isSecret: false, name: 'RubberMan' }, - { id: 17, isSecret: false, name: 'Dynama' }, - { id: 18, isSecret: true, name: 'Dr IQ' }, - { id: 19, isSecret: true, name: 'Magma' }, - { id: 20, isSecret: true, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/dependency-injection/src/app/injector.component.ts b/docs_app/content/examples/dependency-injection/src/app/injector.component.ts deleted file mode 100644 index 403a6c427b..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/injector.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -// #docplaster -// #docregion -import { Component, Injector, OnInit } from '@angular/core'; - -import { Car, Engine, Tires } from './car/car'; -import { Hero } from './heroes/hero'; -import { HeroService } from './heroes/hero.service'; -import { heroServiceProvider } from './heroes/hero.service.provider'; -import { Logger } from './logger.service'; - -// #docregion injector -@Component({ - selector: 'app-injectors', - template: ` -

    Other Injections

    -
    {{car.drive()}}
    -
    {{hero.name}}
    -
    {{rodent}}
    - `, - providers: [Car, Engine, Tires, heroServiceProvider, Logger] -}) -export class InjectorComponent implements OnInit { - car: Car; - - // #docregion get-hero-service - heroService: HeroService; - // #enddocregion get-hero-service - hero: Hero; - - constructor(private injector: Injector) { } - - ngOnInit() { - this.car = this.injector.get(Car); - this.heroService = this.injector.get(HeroService); - this.hero = this.heroService.getHeroes()[0]; - } - - get rodent() { - let rousDontExist = `R.O.U.S.'s? I don't think they exist!`; - return this.injector.get(ROUS, rousDontExist); - } -} -// #enddocregion injector - -/** - * R.O.U.S. - Rodents Of Unusual Size - * // https://www.youtube.com/watch?v=BOv5ZjAOpC8 - */ -class ROUS { } diff --git a/docs_app/content/examples/dependency-injection/src/app/logger.service.ts b/docs_app/content/examples/dependency-injection/src/app/logger.service.ts deleted file mode 100644 index e943523ad2..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/logger.service.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class Logger { - logs: string[] = []; // capture logs for testing - - log(message: string) { - this.logs.push(message); - console.log(message); - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/providers.component.ts b/docs_app/content/examples/dependency-injection/src/app/providers.component.ts deleted file mode 100644 index 6b40f04787..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/providers.component.ts +++ /dev/null @@ -1,280 +0,0 @@ -/* - * A collection of demo components showing different ways to provide services - * in @Component metadata - */ -import { Component, Inject, Injectable, OnInit } from '@angular/core'; - -import { - APP_CONFIG, - AppConfig, - HERO_DI_CONFIG } from './app.config'; - -import { HeroService } from './heroes/hero.service'; -import { heroServiceProvider } from './heroes/hero.service.provider'; -import { Logger } from './logger.service'; -import { UserService } from './user.service'; - -const template = '{{log}}'; - -@Component({ - selector: 'provider-1', - template: template, - // #docregion providers-1, providers-logger - providers: [Logger] - // #enddocregion providers-1, providers-logger -}) -export class Provider1Component { - log: string; - constructor(logger: Logger) { - logger.log('Hello from logger provided with Logger class'); - this.log = logger.logs[0]; - } -} - -////////////////////////////////////////// - -@Component({ - selector: 'provider-3', - template: template, - providers: - // #docregion providers-3 - [{ provide: Logger, useClass: Logger }] - // #enddocregion providers-3 -}) -export class Provider3Component { - log: string; - constructor(logger: Logger) { - logger.log('Hello from logger provided with useClass:Logger'); - this.log = logger.logs[0]; - } -} - -////////////////////////////////////////// -export class BetterLogger extends Logger {} - -@Component({ - selector: 'provider-4', - template: template, - providers: - // #docregion providers-4 - [{ provide: Logger, useClass: BetterLogger }] - // #enddocregion providers-4 -}) -export class Provider4Component { - log: string; - constructor(logger: Logger) { - logger.log('Hello from logger provided with useClass:BetterLogger'); - this.log = logger.logs[0]; - } -} - -////////////////////////////////////////// - -// #docregion EvenBetterLogger -@Injectable() -export class EvenBetterLogger extends Logger { - constructor(private userService: UserService) { super(); } - - log(message: string) { - let name = this.userService.user.name; - super.log(`Message to ${name}: ${message}`); - } -} -// #enddocregion EvenBetterLogger - -@Component({ - selector: 'provider-5', - template: template, - providers: - // #docregion providers-5 - [ UserService, - { provide: Logger, useClass: EvenBetterLogger }] - // #enddocregion providers-5 -}) -export class Provider5Component { - log: string; - constructor(logger: Logger) { - logger.log('Hello from EvenBetterlogger'); - this.log = logger.logs[0]; - } -} - -////////////////////////////////////////// - -export class NewLogger extends Logger {} - -export class OldLogger { - logs: string[] = []; - log(message: string) { - throw new Error('Should not call the old logger!'); - }; -} - -@Component({ - selector: 'provider-6a', - template: template, - providers: - // #docregion providers-6a - [ NewLogger, - // Not aliased! Creates two instances of `NewLogger` - { provide: OldLogger, useClass: NewLogger}] - // #enddocregion providers-6a -}) -export class Provider6aComponent { - log: string; - constructor(newLogger: NewLogger, oldLogger: OldLogger) { - if (newLogger === oldLogger) { - throw new Error('expected the two loggers to be different instances'); - } - oldLogger.log('Hello OldLogger (but we want NewLogger)'); - // The newLogger wasn't called so no logs[] - // display the logs of the oldLogger. - this.log = newLogger.logs[0] || oldLogger.logs[0]; - } -} - -@Component({ - selector: 'provider-6b', - template: template, - providers: - // #docregion providers-6b - [ NewLogger, - // Alias OldLogger w/ reference to NewLogger - { provide: OldLogger, useExisting: NewLogger}] - // #enddocregion providers-6b -}) -export class Provider6bComponent { - log: string; - constructor(newLogger: NewLogger, oldLogger: OldLogger) { - if (newLogger !== oldLogger) { - throw new Error('expected the two loggers to be the same instance'); - } - oldLogger.log('Hello from NewLogger (via aliased OldLogger)'); - this.log = newLogger.logs[0]; - } -} - -////////////////////////////////////////// - -// #docregion silent-logger -// An object in the shape of the logger service -export function SilentLoggerFn() {} - -const silentLogger = { - logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'], - log: SilentLoggerFn -}; -// #enddocregion silent-logger - -@Component({ - selector: 'provider-7', - template: template, - providers: - // #docregion providers-7 - [{ provide: Logger, useValue: silentLogger }] - // #enddocregion providers-7 -}) -export class Provider7Component { - log: string; - constructor(logger: Logger) { - logger.log('Hello from logger provided with useValue'); - this.log = logger.logs[0]; - } -} - -///////////////// - -@Component({ - selector: 'provider-8', - template: template, - providers: [heroServiceProvider, Logger, UserService] -}) -export class Provider8Component { - // must be true else this component would have blown up at runtime - log = 'Hero service injected successfully via heroServiceProvider'; - - // #docregion provider-8-ctor - constructor(heroService: HeroService) { } - // #enddocregion provider-8-ctor -} - -///////////////// - -@Component({ - selector: 'provider-9', - template: template, - /* - // #docregion providers-9-interface - // FAIL! Can't use interface as provider token - [{ provide: AppConfig, useValue: HERO_DI_CONFIG })] - // #enddocregion providers-9-interface - */ - // #docregion providers-9 - providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }] - // #enddocregion providers-9 -}) -export class Provider9Component implements OnInit { - log: string; - /* - // #docregion provider-9-ctor-interface - // FAIL! Can't inject using the interface as the parameter type - constructor(private config: AppConfig){ } - // #enddocregion provider-9-ctor-interface - */ - // #docregion provider-9-ctor - constructor(@Inject(APP_CONFIG) private config: AppConfig) { } - // #enddocregion provider-9-ctor - - ngOnInit() { - this.log = 'APP_CONFIG Application title is ' + this.config.title; - } -} - -////////////////////////////////////////// -// Sample providers 1 to 7 illustrate a required logger dependency. -// Optional logger, can be null -// #docregion import-optional -import { Optional } from '@angular/core'; -// #enddocregion import-optional - -let some_message = 'Hello from the injected logger'; - -@Component({ - selector: 'provider-10', - template: template, - providers: [{ provide: Logger, useValue: null }] -}) -export class Provider10Component implements OnInit { - log: string; - // #docregion provider-10-ctor - constructor(@Optional() private logger: Logger) { - if (this.logger) { - this.logger.log(some_message); - } - } - // #enddocregion provider-10-ctor - - ngOnInit() { - this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available'; - } -} - -///////////////// - -@Component({ - selector: 'app-providers', - template: ` -

    Provider variations

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - ` -}) -export class ProvidersComponent { } diff --git a/docs_app/content/examples/dependency-injection/src/app/providers.module.ts b/docs_app/content/examples/dependency-injection/src/app/providers.module.ts deleted file mode 100644 index 5dc27192a8..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/providers.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { - Provider1Component, - Provider3Component, - Provider4Component, - Provider5Component, - Provider6aComponent, - Provider6bComponent, - Provider7Component, - Provider8Component, - Provider9Component, - Provider10Component, - ProvidersComponent, -} from './providers.component'; - -@NgModule({ - declarations: [ - Provider1Component, - Provider3Component, - Provider4Component, - Provider5Component, - Provider6aComponent, - Provider6bComponent, - Provider7Component, - Provider8Component, - Provider9Component, - Provider10Component, - ProvidersComponent, - ], - exports: [ ProvidersComponent ] - }) - export class ProvidersModule {} diff --git a/docs_app/content/examples/dependency-injection/src/app/test.component.ts b/docs_app/content/examples/dependency-injection/src/app/test.component.ts deleted file mode 100644 index fcc7b5cc1d..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/test.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -/* tslint:disable */ -// Simulate a simple test -// Reader should look to the testing chapter for the real thing - -import { Component } from '@angular/core'; - -import { Hero } from './heroes/hero'; -import { HeroService } from './heroes/hero.service'; -import { HeroListComponent } from './heroes/hero-list.component'; - -@Component({ - selector: 'app-tests', - template: ` -

    Tests

    -

    Tests {{results.pass}}: {{results.message}}

    - ` -}) -export class TestComponent { - results = runTests(); -} - -///////////////////////////////////// -function runTests() { - - // #docregion spec - const expectedHeroes = [{name: 'A'}, {name: 'B'}] - const mockService = {getHeroes: () => expectedHeroes } - - it('should have heroes when HeroListComponent created', () => { - // Pass the mock to the constructor as the Angular injector would - const component = new HeroListComponent(mockService); - expect(component.heroes.length).toEqual(expectedHeroes.length); - }); - // #enddocregion spec - - return testResults; -} - -////////////////////////////////// -// Fake Jasmine infrastructure -var testName: string; -var testResults: {pass: string; message: string}; - -function expect(actual: any) { - return { - toEqual: function(expected: any){ - testResults = actual === expected ? - {pass: 'passed', message: testName} : - {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`}; - } - }; -} - -function it(label: string, test: () => void) { - testName = label; - test(); -} diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts deleted file mode 100644 index 31d79ffc23..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; -import { ServiceModule } from './service-and-module'; - -// #docregion -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forRoot([]), - ServiceModule, - ], -}) -export class AppModule { -} diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts deleted file mode 100644 index 11100e3ffe..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Injectable, NgModule } from '@angular/core'; - -@Injectable() -export class Service { - doSomething(): void { - } -} - -@NgModule({ - providers: [Service], -}) -export class ServiceModule { -} diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts deleted file mode 100644 index 50607d7375..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Injectable } from '@angular/core'; - -// #docregion -@Injectable({ - providedIn: 'root', - useFactory: () => new Service('dependency'), -}) -export class Service { - constructor(private dep: string) { - } -} diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts deleted file mode 100644 index 2013120432..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Injectable } from '@angular/core'; - -// #docregion -@Injectable({ - providedIn: 'root', -}) -export class Service { -} diff --git a/docs_app/content/examples/dependency-injection/src/app/user.service.ts b/docs_app/content/examples/dependency-injection/src/app/user.service.ts deleted file mode 100644 index 8fdda925db..0000000000 --- a/docs_app/content/examples/dependency-injection/src/app/user.service.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -export class User { - constructor( - public name: string, - public isAuthorized = false) { } -} - -// Todo: get the user; don't 'new' it. -let alice = new User('Alice', true); -let bob = new User('Bob', false); - -@Injectable() -export class UserService { - user = bob; // initial user is Bob - - // swap users - getNewUser() { - return this.user = this.user === bob ? alice : bob; - } -} diff --git a/docs_app/content/examples/dependency-injection/src/index.html b/docs_app/content/examples/dependency-injection/src/index.html deleted file mode 100644 index 4736378237..0000000000 --- a/docs_app/content/examples/dependency-injection/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Dependency Injection - - - - - - - - - - diff --git a/docs_app/content/examples/dependency-injection/src/main.ts b/docs_app/content/examples/dependency-injection/src/main.ts deleted file mode 100644 index bf6732fff7..0000000000 --- a/docs_app/content/examples/dependency-injection/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -// #docregion bootstrap -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion bootstrap diff --git a/docs_app/content/examples/dependency-injection/stackblitz.json b/docs_app/content/examples/dependency-injection/stackblitz.json deleted file mode 100644 index 131d2a671c..0000000000 --- a/docs_app/content/examples/dependency-injection/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Dependency Injection", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0,1,2,3,4].*", - "!**/dummy.module.ts" - ], - "tags": ["dependency", "di"] -} diff --git a/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts b/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts deleted file mode 100644 index 96c52c5d00..0000000000 --- a/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Displaying Data Tests', function () { - let _title = 'Tour of Heroes'; - let _defaultHero = 'Windstorm'; - - beforeAll(function () { - browser.get(''); - }); - - it('should display correct title: ' + _title, function () { - expect(element(by.css('h1')).getText()).toEqual(_title); - }); - - it('should have correct default hero: ' + _defaultHero, function () { - expect(element(by.css('h2')).getText()).toContain(_defaultHero); - }); - - it('should have heroes', function () { - let heroEls = element.all(by.css('li')); - expect(heroEls.count()).not.toBe(0, 'should have heroes'); - }); - - it('should display "there are many heroes!"', function () { - expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!'); - }); -}); diff --git a/docs_app/content/examples/displaying-data/example-config.json b/docs_app/content/examples/displaying-data/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts b/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts deleted file mode 100644 index 5fd9d45073..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-ctor', - template: ` -

    {{title}} [Ctor version]

    -

    My favorite hero is: {{myHero}}

    - ` -}) -// #docregion class -export class AppCtorComponent { - title: string; - myHero: string; - - constructor() { - this.title = 'Tour of Heroes'; - this.myHero = 'Windstorm'; - } -} diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.1.ts b/docs_app/content/examples/displaying-data/src/app/app.component.1.ts deleted file mode 100644 index 674ac5622b..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app.component.1.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    {{title}}

    -

    My favorite hero is: {{myHero}}

    - ` - // #enddocregion template -}) -export class AppComponent { - title = 'Tour of Heroes'; - myHero = 'Windstorm'; -} diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.2.ts b/docs_app/content/examples/displaying-data/src/app/app.component.2.ts deleted file mode 100644 index 4d4e2d50e5..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app.component.2.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    {{title}}

    -

    My favorite hero is: {{myHero}}

    -

    Heroes:

    -
      - // #docregion li -
    • - {{ hero }} -
      • - // #enddocregion li -
    - ` - // #enddocregion template -}) -// #docregion class -export class AppComponent { - title = 'Tour of Heroes'; - heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; - myHero = this.heroes[0]; -} diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.3.ts b/docs_app/content/examples/displaying-data/src/app/app.component.3.ts deleted file mode 100644 index 435a9be767..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app.component.3.ts +++ /dev/null @@ -1,35 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -// #docregion import -import { Hero } from './hero'; -// #enddocregion import - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    {{title}}

    -

    My favorite hero is: {{myHero.name}}

    -

    Heroes:

    -
      -
    • - {{ hero.name }} -
      • -
    - ` - // #enddocregion template -}) -// #docregion class -export class AppComponent { - title = 'Tour of Heroes'; - // #docregion heroes - heroes = [ - new Hero(1, 'Windstorm'), - new Hero(13, 'Bombasto'), - new Hero(15, 'Magneta'), - new Hero(20, 'Tornado') - ]; - myHero = this.heroes[0]; - // #enddocregion heroes -} diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.ts b/docs_app/content/examples/displaying-data/src/app/app.component.ts deleted file mode 100644 index a03f3de1dd..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docplaster -// #docregion final -import { Component } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - selector: 'app-root', - template: ` -

    {{title}}

    -

    My favorite hero is: {{myHero.name}}

    -

    Heroes:

    -
      -
    • - {{ hero.name }} -
      • -
    - // #docregion message -

    There are many heroes!

    - // #enddocregion message -` -}) -export class AppComponent { - title = 'Tour of Heroes'; - heroes = [ - new Hero(1, 'Windstorm'), - new Hero(13, 'Bombasto'), - new Hero(15, 'Magneta'), - new Hero(20, 'Tornado') - ]; - myHero = this.heroes[0]; -} diff --git a/docs_app/content/examples/displaying-data/src/app/app.module.ts b/docs_app/content/examples/displaying-data/src/app/app.module.ts deleted file mode 100644 index 362f3401fa..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/displaying-data/src/app/hero.ts b/docs_app/content/examples/displaying-data/src/app/hero.ts deleted file mode 100644 index f89d26ad63..0000000000 --- a/docs_app/content/examples/displaying-data/src/app/hero.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -export class Hero { - constructor( - // #docregion id - public id: number, - // #enddocregion id - public name: string) { } -} -// #enddocregion diff --git a/docs_app/content/examples/displaying-data/src/index.html b/docs_app/content/examples/displaying-data/src/index.html deleted file mode 100644 index 3e5cbf7bea..0000000000 --- a/docs_app/content/examples/displaying-data/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - Displaying Data - - - - - - - - - - - - diff --git a/docs_app/content/examples/displaying-data/src/main.ts b/docs_app/content/examples/displaying-data/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/displaying-data/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/displaying-data/stackblitz.json b/docs_app/content/examples/displaying-data/stackblitz.json deleted file mode 100644 index 9f2f816f14..0000000000 --- a/docs_app/content/examples/displaying-data/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Displaying Data", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/app-ctor.component.ts", - "!**/*.[1,2,3].*" - ], - "tags": ["Template"] -} diff --git a/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts b/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts deleted file mode 100644 index 68cf02313b..0000000000 --- a/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Docs Style Guide', function () { - let _title = 'Authors Style Guide Sample'; - - beforeAll(function () { - browser.get(''); - }); - - it('should display correct title: ' + _title, function () { - expect(element(by.css('h1')).getText()).toEqual(_title); - }); -}); diff --git a/docs_app/content/examples/docs-style-guide/example-config.json b/docs_app/content/examples/docs-style-guide/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/docs-style-guide/package.1.json b/docs_app/content/examples/docs-style-guide/package.1.json deleted file mode 100644 index 8e5d6c6ec3..0000000000 --- a/docs_app/content/examples/docs-style-guide/package.1.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "scripts": { - "start": "concurrently \"npm run build:watch\" \"npm run serve\"", - "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", - "lint": "tslint ./src/**/*.ts -t verbose" - } -} diff --git a/docs_app/content/examples/docs-style-guide/second.stackblitz.json b/docs_app/content/examples/docs-style-guide/second.stackblitz.json deleted file mode 100644 index ca2bfdaf3b..0000000000 --- a/docs_app/content/examples/docs-style-guide/second.stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Second authors style guide stackblitz (non-executing)", - "files": [ - "src/index.2.html" - ], - "main": "src/index.2.html", - "tags": ["author", "style guide"] -} diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.css b/docs_app/content/examples/docs-style-guide/src/app/app.component.css deleted file mode 100644 index cc999f8458..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/app/app.component.css +++ /dev/null @@ -1,51 +0,0 @@ -/* #docregion heroes */ -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -/* #enddocregion heroes */ - -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; -} -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes .text { - position: relative; - top: -3px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} - -.selected { - background-color: #CFD8DC !important; - color: white; -} diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.html b/docs_app/content/examples/docs-style-guide/src/app/app.component.html deleted file mode 100644 index 924599f6e9..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/app/app.component.html +++ /dev/null @@ -1,21 +0,0 @@ - - -

    {{title}}

    -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    -
    -

    {{selectedHero.name}} details!

    -
    {{selectedHero.id}}
    -
    - - - - -
    -
    diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.ts b/docs_app/content/examples/docs-style-guide/src/app/app.component.ts deleted file mode 100644 index bc2667c804..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/app/app.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { Hero, HEROES } from './hero'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -// #docregion class, class-skeleton -export class AppComponent { -// #enddocregion class-skeleton - title = 'Authors Style Guide Sample'; - heroes = HEROES; - selectedHero: Hero; - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } -// #docregion class-skeleton -} -// #enddocregion class, class-skeleton diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.module.ts b/docs_app/content/examples/docs-style-guide/src/app/app.module.ts deleted file mode 100644 index cbcb090547..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/app/app.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; - -// #docregion class -@NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion class diff --git a/docs_app/content/examples/docs-style-guide/src/app/hero.ts b/docs_app/content/examples/docs-style-guide/src/app/hero.ts deleted file mode 100644 index fadbdbf9ed..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/app/hero.ts +++ /dev/null @@ -1,11 +0,0 @@ -export class Hero { - id: number; - name: string; -} - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' } -]; diff --git a/docs_app/content/examples/docs-style-guide/src/index.2.html b/docs_app/content/examples/docs-style-guide/src/index.2.html deleted file mode 100644 index a85f58e57e..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/index.2.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - Second Authors Style Guide - - -

    Second Authors Style Guide

    -

    Placeholder. Does nothing at all.

    - - diff --git a/docs_app/content/examples/docs-style-guide/src/index.html b/docs_app/content/examples/docs-style-guide/src/index.html deleted file mode 100644 index 2705e7ee96..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Docs Style Guide - - - - - - - - - - diff --git a/docs_app/content/examples/docs-style-guide/src/main.ts b/docs_app/content/examples/docs-style-guide/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/docs-style-guide/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/docs-style-guide/stackblitz.json b/docs_app/content/examples/docs-style-guide/stackblitz.json deleted file mode 100644 index f19943ee1e..0000000000 --- a/docs_app/content/examples/docs-style-guide/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Authors style guide", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2,3].*" - ], - "tags": ["author", "style guide"] -} diff --git a/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts b/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts deleted file mode 100644 index b04412c28b..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -/* tslint:disable:quotemark */ -describe('Dynamic Component Loader', function () { - - beforeEach(function () { - browser.get(''); - }); - - it('should load ad banner', function () { - let headline = element(by.xpath("//h4[text()='Featured Hero Profile']")); - let name = element(by.xpath("//h3[text()='Bombasto']")); - let bio = element(by.xpath("//p[text()='Brave as they come']")); - - expect(name).toBeDefined(); - expect(headline).toBeDefined(); - expect(bio).toBeDefined(); - }); -}); diff --git a/docs_app/content/examples/dynamic-component-loader/example-config.json b/docs_app/content/examples/dynamic-component-loader/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts deleted file mode 100644 index ec86f69349..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docregion -import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core'; - -import { AdDirective } from './ad.directive'; -import { AdItem } from './ad-item'; -import { AdComponent } from './ad.component'; - -@Component({ - selector: 'app-ad-banner', - // #docregion ad-host - template: ` -
    -

    Advertisements

    - -
    - ` - // #enddocregion ad-host -}) -// #docregion class -export class AdBannerComponent implements OnInit, OnDestroy { - @Input() ads: AdItem[]; - currentAdIndex = -1; - @ViewChild(AdDirective) adHost: AdDirective; - interval: any; - - constructor(private componentFactoryResolver: ComponentFactoryResolver) { } - - ngOnInit() { - this.loadComponent(); - this.getAds(); - } - - ngOnDestroy() { - clearInterval(this.interval); - } - - loadComponent() { - this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length; - let adItem = this.ads[this.currentAdIndex]; - - let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component); - - let viewContainerRef = this.adHost.viewContainerRef; - viewContainerRef.clear(); - - let componentRef = viewContainerRef.createComponent(componentFactory); - (componentRef.instance).data = adItem.data; - } - - getAds() { - this.interval = setInterval(() => { - this.loadComponent(); - }, 3000); - } -} -// #enddocregion class diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts deleted file mode 100644 index ef8ca70577..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -import { Type } from '@angular/core'; - -export class AdItem { - constructor(public component: Type, public data: any) {} -} diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts deleted file mode 100644 index dee3b47953..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts +++ /dev/null @@ -1,4 +0,0 @@ -// #docregion -export interface AdComponent { - data: any; -} diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts deleted file mode 100644 index 312e605228..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Directive, ViewContainerRef } from '@angular/core'; - -@Directive({ - selector: '[ad-host]', -}) -export class AdDirective { - constructor(public viewContainerRef: ViewContainerRef) { } -} - diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts deleted file mode 100644 index 91b0758771..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { HeroJobAdComponent } from './hero-job-ad.component'; -import { HeroProfileComponent } from './hero-profile.component'; -import { AdItem } from './ad-item'; - -@Injectable() -export class AdService { - getAds() { - return [ - new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}), - - new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}), - - new AdItem(HeroJobAdComponent, {headline: 'Hiring for several positions', - body: 'Submit your resume today!'}), - - new AdItem(HeroJobAdComponent, {headline: 'Openings in all departments', - body: 'Apply today'}), - ]; - } -} diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts deleted file mode 100644 index 1a5fa94dbc..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { AdService } from './ad.service'; -import { AdItem } from './ad-item'; - -@Component({ - selector: 'app-root', - template: ` -
    - -
    - ` -}) -export class AppComponent implements OnInit { - ads: AdItem[]; - - constructor(private adService: AdService) {} - - ngOnInit() { - this.ads = this.adService.getAds(); - } -} - diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts b/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts deleted file mode 100644 index a65d394709..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; -import { HeroJobAdComponent } from './hero-job-ad.component'; -import { AdBannerComponent } from './ad-banner.component'; -import { HeroProfileComponent } from './hero-profile.component'; -import { AdDirective } from './ad.directive'; -import { AdService } from './ad.service'; - -@NgModule({ - imports: [ BrowserModule ], - providers: [AdService], - declarations: [ AppComponent, - AdBannerComponent, - HeroJobAdComponent, - HeroProfileComponent, - AdDirective ], - // #docregion entry-components - entryComponents: [ HeroJobAdComponent, HeroProfileComponent ], - // #enddocregion entry-components - bootstrap: [ AppComponent ] -}) -export class AppModule { - constructor() {} -} - diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts deleted file mode 100644 index 762b815872..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; - -import { AdComponent } from './ad.component'; - -@Component({ - template: ` -
    -

    {{data.headline}}

    - - {{data.body}} -
    - ` -}) -export class HeroJobAdComponent implements AdComponent { - @Input() data: any; - -} - diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts deleted file mode 100644 index d543683d8c..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; - -import { AdComponent } from './ad.component'; - -@Component({ - template: ` -
    -

    Featured Hero Profile

    -

    {{data.name}}

    - -

    {{data.bio}}

    - - Hire this hero today! -
    - ` -}) -export class HeroProfileComponent implements AdComponent { - @Input() data: any; -} - - diff --git a/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css b/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css deleted file mode 100644 index 7a2ca1f2dc..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css +++ /dev/null @@ -1,23 +0,0 @@ -.hero-profile { - border: 1px solid gray; - padding: 5px; - padding-bottom: 20px; - padding-left: 20px; - border-radius: 10px; - background-color: lightgreen; - color: black; -} - -.job-ad { - border: 1px solid gray; - padding: 5px; - padding-bottom: 20px; - padding-left: 20px; - border-radius: 10px; - background-color: lightblue; - color: black; -} - -.ad-banner { - width: 400px; -} \ No newline at end of file diff --git a/docs_app/content/examples/dynamic-component-loader/src/index.html b/docs_app/content/examples/dynamic-component-loader/src/index.html deleted file mode 100644 index 67c9b6c221..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Dynamic Component Loader - - - - - - - - diff --git a/docs_app/content/examples/dynamic-component-loader/src/main.ts b/docs_app/content/examples/dynamic-component-loader/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/dynamic-component-loader/stackblitz.json b/docs_app/content/examples/dynamic-component-loader/stackblitz.json deleted file mode 100644 index 2b6c153129..0000000000 --- a/docs_app/content/examples/dynamic-component-loader/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Dynamic Component Loader", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags":["cookbook component"] -} diff --git a/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts b/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts deleted file mode 100644 index 49eaba3f9c..0000000000 --- a/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -/* tslint:disable:quotemark */ -describe('Dynamic Form', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should submit form', function () { - let firstNameElement = element.all(by.css('input[id=firstName]')).get(0); - expect(firstNameElement.getAttribute('value')).toEqual('Bombasto'); - - let emailElement = element.all(by.css('input[id=emailAddress]')).get(0); - let email = 'test@test.com'; - emailElement.sendKeys(email); - expect(emailElement.getAttribute('value')).toEqual(email); - - element(by.css('select option[value="solid"]')).click(); - - let saveButton = element.all(by.css('button')).get(0); - saveButton.click().then(function() { - expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true); - }); - }); - -}); diff --git a/docs_app/content/examples/dynamic-form/example-config.json b/docs_app/content/examples/dynamic-form/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/dynamic-form/src/app/app.component.ts b/docs_app/content/examples/dynamic-form/src/app/app.component.ts deleted file mode 100644 index 51d154cc78..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/app.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { QuestionService } from './question.service'; - -@Component({ - selector: 'app-root', - template: ` -
    -

    Job Application for Heroes

    - -
    - `, - providers: [QuestionService] -}) -export class AppComponent { - questions: any[]; - - constructor(service: QuestionService) { - this.questions = service.getQuestions(); - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/app.module.ts b/docs_app/content/examples/dynamic-form/src/app/app.module.ts deleted file mode 100644 index 7a68e45a92..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { BrowserModule } from '@angular/platform-browser'; -import { ReactiveFormsModule } from '@angular/forms'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; -import { DynamicFormComponent } from './dynamic-form.component'; -import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; - -@NgModule({ - imports: [ BrowserModule, ReactiveFormsModule ], - declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { - constructor() { - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html b/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html deleted file mode 100644 index 9f1b8cd4a6..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -
    - - -
    - - - - - -
    - -
    {{question.label}} is required
    -
    diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts b/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts deleted file mode 100644 index 9a4c25829f..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -import { QuestionBase } from './question-base'; - -@Component({ - selector: 'app-question', - templateUrl: './dynamic-form-question.component.html' -}) -export class DynamicFormQuestionComponent { - @Input() question: QuestionBase; - @Input() form: FormGroup; - get isValid() { return this.form.controls[this.question.key].valid; } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html b/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html deleted file mode 100644 index 33c8f0bb51..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -
    -
    - -
    - -
    - -
    - -
    -
    - -
    - Saved the following values
    {{payLoad}} -
    -
    diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts deleted file mode 100644 index 4167b4617f..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// #docregion -import { Component, Input, OnInit } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -import { QuestionBase } from './question-base'; -import { QuestionControlService } from './question-control.service'; - -@Component({ - selector: 'app-dynamic-form', - templateUrl: './dynamic-form.component.html', - providers: [ QuestionControlService ] -}) -export class DynamicFormComponent implements OnInit { - - @Input() questions: QuestionBase[] = []; - form: FormGroup; - payLoad = ''; - - constructor(private qcs: QuestionControlService) { } - - ngOnInit() { - this.form = this.qcs.toFormGroup(this.questions); - } - - onSubmit() { - this.payLoad = JSON.stringify(this.form.value); - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/question-base.ts b/docs_app/content/examples/dynamic-form/src/app/question-base.ts deleted file mode 100644 index 8249a38bee..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/question-base.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -export class QuestionBase { - value: T; - key: string; - label: string; - required: boolean; - order: number; - controlType: string; - - constructor(options: { - value?: T, - key?: string, - label?: string, - required?: boolean, - order?: number, - controlType?: string - } = {}) { - this.value = options.value; - this.key = options.key || ''; - this.label = options.label || ''; - this.required = !!options.required; - this.order = options.order === undefined ? 1 : options.order; - this.controlType = options.controlType || ''; - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts b/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts deleted file mode 100644 index 1378ba8490..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; - -import { QuestionBase } from './question-base'; - -@Injectable() -export class QuestionControlService { - constructor() { } - - toFormGroup(questions: QuestionBase[] ) { - let group: any = {}; - - questions.forEach(question => { - group[question.key] = question.required ? new FormControl(question.value || '', Validators.required) - : new FormControl(question.value || ''); - }); - return new FormGroup(group); - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts b/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts deleted file mode 100644 index 35a9074c74..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { QuestionBase } from './question-base'; - -export class DropdownQuestion extends QuestionBase { - controlType = 'dropdown'; - options: {key: string, value: string}[] = []; - - constructor(options: {} = {}) { - super(options); - this.options = options['options'] || []; - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts b/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts deleted file mode 100644 index aaa7edf267..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { QuestionBase } from './question-base'; - -export class TextboxQuestion extends QuestionBase { - controlType = 'textbox'; - type: string; - - constructor(options: {} = {}) { - super(options); - this.type = options['type'] || ''; - } -} diff --git a/docs_app/content/examples/dynamic-form/src/app/question.service.ts b/docs_app/content/examples/dynamic-form/src/app/question.service.ts deleted file mode 100644 index bb452cf5e6..0000000000 --- a/docs_app/content/examples/dynamic-form/src/app/question.service.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { DropdownQuestion } from './question-dropdown'; -import { QuestionBase } from './question-base'; -import { TextboxQuestion } from './question-textbox'; - -@Injectable() -export class QuestionService { - - // Todo: get from a remote source of question metadata - // Todo: make asynchronous - getQuestions() { - - let questions: QuestionBase[] = [ - - new DropdownQuestion({ - key: 'brave', - label: 'Bravery Rating', - options: [ - {key: 'solid', value: 'Solid'}, - {key: 'great', value: 'Great'}, - {key: 'good', value: 'Good'}, - {key: 'unproven', value: 'Unproven'} - ], - order: 3 - }), - - new TextboxQuestion({ - key: 'firstName', - label: 'First name', - value: 'Bombasto', - required: true, - order: 1 - }), - - new TextboxQuestion({ - key: 'emailAddress', - label: 'Email', - type: 'email', - order: 2 - }) - ]; - - return questions.sort((a, b) => a.order - b.order); - } -} diff --git a/docs_app/content/examples/dynamic-form/src/assets/sample.css b/docs_app/content/examples/dynamic-form/src/assets/sample.css deleted file mode 100644 index fe2cc28481..0000000000 --- a/docs_app/content/examples/dynamic-form/src/assets/sample.css +++ /dev/null @@ -1,7 +0,0 @@ -.errorMessage{ - color:red; -} - -.form-row{ - margin-top: 10px; -} \ No newline at end of file diff --git a/docs_app/content/examples/dynamic-form/src/index.html b/docs_app/content/examples/dynamic-form/src/index.html deleted file mode 100644 index 20688f2405..0000000000 --- a/docs_app/content/examples/dynamic-form/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Dynamic Form - - - - - - - - diff --git a/docs_app/content/examples/dynamic-form/src/main.ts b/docs_app/content/examples/dynamic-form/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/dynamic-form/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/dynamic-form/stackblitz.json b/docs_app/content/examples/dynamic-form/stackblitz.json deleted file mode 100644 index 9dd6ff0236..0000000000 --- a/docs_app/content/examples/dynamic-form/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Dynamic Form", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags":["cookbook"] -} diff --git a/docs_app/content/examples/elements/src/app/app.component.ts b/docs_app/content/examples/elements/src/app/app.component.ts deleted file mode 100644 index 092a8c8ba2..0000000000 --- a/docs_app/content/examples/elements/src/app/app.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Component, Injector } from '@angular/core'; -import { createNgElementConstructor } from '../elements-dist'; -import { PopupService } from './popup.service'; -import { PopupComponent } from './popup.component'; - -@Component({ - selector: 'app-root', - template: ` - - - - ` -}) - -export class AppComponent { - constructor(private injector: Injector, public popup: PopupService) { - // on init, convert PopupComponent to a custom element - const PopupElement = -createNgElementConstructor(PopupComponent, {injector: this.injector}); - // register the custom element with the browser. - customElements.define('popup-element', PopupElement); - } -} diff --git a/docs_app/content/examples/elements/src/app/app.module.ts b/docs_app/content/examples/elements/src/app/app.module.ts deleted file mode 100644 index 0c2eec1938..0000000000 --- a/docs_app/content/examples/elements/src/app/app.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; -import { PopupService } from './popup.service'; -import { PopupComponent } from './popup.component'; - -// include the PopupService provider, -// but exclude PopupComponent from compilation, -// because it will be added dynamically - -@NgModule({ - declarations: [AppComponent, PopupComponent], - imports: [BrowserModule, BrowserAnimationsModule], - providers: [PopupService], - bootstrap: [AppComponent], - entryComponents: [PopupComponent], -}) - -export class AppModule {} diff --git a/docs_app/content/examples/elements/src/app/popup.component.ts b/docs_app/content/examples/elements/src/app/popup.component.ts deleted file mode 100644 index 8272c37234..0000000000 --- a/docs_app/content/examples/elements/src/app/popup.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { AnimationEvent } from '@angular/animations'; -import { animate, state, style, transition, trigger } from '@angular/animations'; - -@Component({ - selector: 'my-popup', - template: 'Popup: {{message}}', - host: { - '[@state]': 'state', - '(@state.done)': 'onAnimationDone($event)', - }, - animations: [ - trigger('state', [ - state('opened', style({transform: 'translateY(0%)'})), - state('void, closed', style({transform: 'translateY(100%)', opacity: 0})), - transition('* => *', animate('100ms ease-in')), - ]) - ], - styles: [` - :host { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: #009cff; - height: 48px; - padding: 16px; - display: flex; - align-items: center; - border-top: 1px solid black; - font-size: 24px; - } - `] -}) - -export class PopupComponent { - private state: 'opened' | 'closed' = 'closed'; - - @Input() - set message(message: string) { - this._message = message; - this.state = 'opened'; - - setTimeout(() => this.state = 'closed', 2000); - } - get message(): string { return this._message; } - _message: string; - - @Output() - closed = new EventEmitter(); - - onAnimationDone(e: AnimationEvent) { - if (e.toState === 'closed') { - this.closed.next(); - } - } -} diff --git a/docs_app/content/examples/elements/src/app/popup.service.ts b/docs_app/content/examples/elements/src/app/popup.service.ts deleted file mode 100644 index 0c44615e84..0000000000 --- a/docs_app/content/examples/elements/src/app/popup.service.ts +++ /dev/null @@ -1,54 +0,0 @@ - -// #docregion -import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core'; - -import { PopupComponent } from './popup.component'; -import { NgElementConstructor } from '../elements-dist'; - -@Injectable() -export class PopupService { - constructor(private injector: Injector, - private applicationRef: ApplicationRef, - private componentFactoryResolver: ComponentFactoryResolver) {} - - // Previous dynamic-loading method required you to set up infrastructure - // before adding the popup to the DOM. - showAsComponent(message: string) { - // Create element - const popup = document.createElement('popup-component'); - - // Create the component and wire it up with the element - const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent); - const popupComponentRef = factory.create(this.injector, [], popup); - - // Attach to the view so that the change detector knows to run - this.applicationRef.attachView(popupComponentRef.hostView); - - // Listen to the close event - popupComponentRef.instance.closed.subscribe(() => { - document.body.removeChild(popup); - this.applicationRef.detachView(popupComponentRef.hostView); - }); - - // Set the message - popupComponentRef.instance.message = message; - - // Add to the DOM - document.body.appendChild(popup); - } - - // This uses the new custom-element method to add the popup to the DOM. - showAsElement(message: string) { - // Create element - const popupEl = document.createElement('popup-element'); - - // Listen to the close event - popupEl.addEventListener('closed', () => document.body.removeChild(popupEl)); - - // Set the message - popupEl.message = message; - - // Add to the DOM - document.body.appendChild(popupEl); - } -} diff --git a/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts b/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts deleted file mode 100644 index 899a1ad037..0000000000 --- a/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { AppPage } from './app.po'; - -describe('feature-modules App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('app works!'); - }); -}); - - - diff --git a/docs_app/content/examples/feature-modules/example-config.json b/docs_app/content/examples/feature-modules/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/docs_app/content/examples/feature-modules/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.css b/docs_app/content/examples/feature-modules/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.html b/docs_app/content/examples/feature-modules/src/app/app.component.html deleted file mode 100644 index ecfd45507b..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/app.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - -

    - {{title}} -

    - - - - diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts b/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts deleted file mode 100644 index 13c632d676..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }); - TestBed.compileComponents(); - }); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.ts b/docs_app/content/examples/feature-modules/src/app/app.component.ts deleted file mode 100644 index ff63e05048..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'app works!'; -} diff --git a/docs_app/content/examples/feature-modules/src/app/app.module.ts b/docs_app/content/examples/feature-modules/src/app/app.module.ts deleted file mode 100644 index 503d6a46a1..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docplaster -// #docregion app-module -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -import { AppComponent } from './app.component'; -// import the feature module here so you can add it to the imports array below -import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module'; - - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule, - CustomerDashboardModule // add the feature module here - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } -// #enddocregion app-module diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts deleted file mode 100644 index 4df17d96c4..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion customer-dashboard -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -// #enddocregion customer-dashboard -// #docregion customer-dashboard-component -// import the new component -import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component'; -// #enddocregion customer-dashboard-component - - -// #docregion customer-dashboard-component -@NgModule({ - imports: [ - CommonModule - ], - declarations: [ - CustomerDashboardComponent - ], - // #enddocregion customer-dashboard-component - // #docregion component-exports - exports: [ - CustomerDashboardComponent - ] - // #enddocregion component-exports - // #docregion customer-dashboard-component -}) - -// #enddocregion customer-dashboard-component - -// #docregion customer-dashboard -export class CustomerDashboardModule { } - -// #enddocregion customer-dashboard diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html deleted file mode 100644 index e3e295f5c7..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - -

    - customer-dashboard works! -

    - diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts deleted file mode 100644 index 2420d05521..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CustomerDashboardComponent } from './customer-dashboard.component'; - -describe('CustomerDashboardComponent', () => { - let component: CustomerDashboardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CustomerDashboardComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CustomerDashboardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts deleted file mode 100644 index b4dcf2e8fe..0000000000 --- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-customer-dashboard', - templateUrl: './customer-dashboard.component.html', - styleUrls: ['./customer-dashboard.component.css'] -}) -export class CustomerDashboardComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/feature-modules/src/index.html b/docs_app/content/examples/feature-modules/src/index.html deleted file mode 100644 index 6e42a2c5d5..0000000000 --- a/docs_app/content/examples/feature-modules/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Feature Modules - - - - - - - Loading... - - diff --git a/docs_app/content/examples/feature-modules/src/main.ts b/docs_app/content/examples/feature-modules/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/feature-modules/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/feature-modules/stackblitz.json b/docs_app/content/examples/feature-modules/stackblitz.json deleted file mode 100644 index e0cbd2e29d..0000000000 --- a/docs_app/content/examples/feature-modules/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Feature Modules", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "file": "src/app/app.component.ts", - "tags": ["feature modules"] -} diff --git a/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts b/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts deleted file mode 100644 index 8956ace183..0000000000 --- a/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,174 +0,0 @@ -'use strict'; // necessary for node! - -import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor'; - -// THESE TESTS ARE INCOMPLETE -describe('Form Validation Tests', function () { - - beforeAll(function () { - browser.get(''); - }); - - describe('Template-driven form', () => { - beforeAll(() => { - getPage('app-hero-form-template'); - }); - - tests('Template-Driven Form'); - bobTests(); - }); - - describe('Reactive form', () => { - beforeAll(() => { - getPage('app-hero-form-reactive'); - }); - - tests('Reactive Form'); - bobTests(); - }); -}); - -////////// - -const testName = 'Test Name'; - -let page: { - section: ElementFinder, - form: ElementFinder, - title: ElementFinder, - nameInput: ElementFinder, - alterEgoInput: ElementFinder, - powerSelect: ElementFinder, - powerOption: ElementFinder, - errorMessages: ElementArrayFinder, - heroFormButtons: ElementArrayFinder, - heroSubmitted: ElementFinder -}; - -function getPage(sectionTag: string) { - let section = element(by.css(sectionTag)); - let buttons = section.all(by.css('button')); - - page = { - section: section, - form: section.element(by.css('form')), - title: section.element(by.css('h1')), - nameInput: section.element(by.css('#name')), - alterEgoInput: section.element(by.css('#alterEgo')), - powerSelect: section.element(by.css('#power')), - powerOption: section.element(by.css('#power option')), - errorMessages: section.all(by.css('div.alert')), - heroFormButtons: buttons, - heroSubmitted: section.element(by.css('.submitted-message')) - }; -} - -function tests(title: string) { - - it('should display correct title', function () { - expect(page.title.getText()).toContain(title); - }); - - it('should not display submitted message before submit', function () { - expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false); - }); - - it('should have form buttons', function () { - expect(page.heroFormButtons.count()).toEqual(2); - }); - - it('should have error at start', function () { - expectFormIsInvalid(); - }); - - // it('showForm', function () { - // page.form.getInnerHtml().then(html => console.log(html)); - // }); - - it('should have disabled submit button', function () { - expect(page.heroFormButtons.get(0).isEnabled()).toBe(false); - }); - - it('resetting name to valid name should clear errors', function () { - const ele = page.nameInput; - expect(ele.isPresent()).toBe(true, 'nameInput should exist'); - ele.clear(); - ele.sendKeys(testName); - expectFormIsValid(); - }); - - it('should produce "required" error after clearing name', function () { - page.nameInput.clear(); - // page.alterEgoInput.click(); // to blur ... didn't work - page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh! - expect(page.form.getAttribute('class')).toMatch('ng-invalid'); - expect(page.errorMessages.get(0).getText()).toContain('required'); - }); - - it('should produce "at least 4 characters" error when name="x"', function () { - page.nameInput.clear(); - page.nameInput.sendKeys('x'); // too short - expectFormIsInvalid(); - expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters'); - }); - - it('resetting name to valid name again should clear errors', function () { - page.nameInput.sendKeys(testName); - expectFormIsValid(); - }); - - it('should have enabled submit button', function () { - const submitBtn = page.heroFormButtons.get(0); - expect(submitBtn.isEnabled()).toBe(true); - }); - - it('should hide form after submit', function () { - page.heroFormButtons.get(0).click(); - expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false); - }); - - it('submitted form should be displayed', function () { - expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true); - }); - - it('submitted form should have new hero name', function () { - expect(page.heroSubmitted.getText()).toContain(testName); - }); - - it('clicking edit button should reveal form again', function () { - const newFormBtn = page.heroSubmitted.element(by.css('button')); - newFormBtn.click(); - expect(page.heroSubmitted.isElementPresent(by.css('p'))) - .toBe(false, 'submitted hidden again'); - expect(page.title.isDisplayed()).toBe(true, 'can see form title'); - }); -} - -function expectFormIsValid() { - expect(page.form.getAttribute('class')).toMatch('ng-valid'); -} - -function expectFormIsInvalid() { - expect(page.form.getAttribute('class')).toMatch('ng-invalid'); -} - -function bobTests() { - const emsg = 'Name cannot be Bob.'; - - it('should produce "no bob" error after setting name to "Bobby"', function () { - // Re-populate select element - page.powerSelect.click(); - page.powerOption.click(); - - page.nameInput.clear(); - page.nameInput.sendKeys('Bobby'); - expectFormIsInvalid(); - expect(page.errorMessages.get(0).getText()).toBe(emsg); - }); - - it('should be ok again with valid name', function () { - page.nameInput.clear(); - page.nameInput.sendKeys(testName); - expectFormIsValid(); - }); -} diff --git a/docs_app/content/examples/form-validation/example-config.json b/docs_app/content/examples/form-validation/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/form-validation/src/app/app.component.ts b/docs_app/content/examples/form-validation/src/app/app.component.ts deleted file mode 100644 index dd7141f45e..0000000000 --- a/docs_app/content/examples/form-validation/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` -
    - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/form-validation/src/app/app.module.ts b/docs_app/content/examples/form-validation/src/app/app.module.ts deleted file mode 100644 index 0a5d1cf455..0000000000 --- a/docs_app/content/examples/form-validation/src/app/app.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { HeroFormTemplateComponent } from './template/hero-form-template.component'; -import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component'; -import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive'; - - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - ReactiveFormsModule - ], - declarations: [ - AppComponent, - HeroFormTemplateComponent, - HeroFormReactiveComponent, - ForbiddenValidatorDirective - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html b/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html deleted file mode 100644 index 36cebbaca4..0000000000 --- a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html +++ /dev/null @@ -1,62 +0,0 @@ - -
    - -

    Reactive Form

    - -
    - -
    - -
    - - - - - -
    - -
    - Name is required. -
    -
    - Name must be at least 4 characters long. -
    -
    - Name cannot be Bob. -
    -
    - -
    - -
    - - -
    - -
    - - - -
    -
    Power is required.
    -
    -
    - - - -
    -
    - -
    -

    You've submitted your hero, {{ heroForm.value.name }}!

    - -
    -
    diff --git a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts b/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts deleted file mode 100644 index e1b3d6bc8b..0000000000 --- a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* tslint:disable: member-ordering forin */ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; -import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; - -@Component({ - selector: 'app-hero-form-reactive', - templateUrl: './hero-form-reactive.component.html' -}) -export class HeroFormReactiveComponent implements OnInit { - - powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; - - hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]}; - - heroForm: FormGroup; - - // #docregion form-group - ngOnInit(): void { - // #docregion custom-validator - this.heroForm = new FormGroup({ - 'name': new FormControl(this.hero.name, [ - Validators.required, - Validators.minLength(4), - forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator. - ]), - 'alterEgo': new FormControl(this.hero.alterEgo), - 'power': new FormControl(this.hero.power, Validators.required) - }); - // #enddocregion custom-validator - } - - get name() { return this.heroForm.get('name'); } - - get power() { return this.heroForm.get('power'); } - // #enddocregion form-group -} -// #enddocregion diff --git a/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts deleted file mode 100644 index 277a31bd33..0000000000 --- a/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts +++ /dev/null @@ -1,31 +0,0 @@ -// #docregion -import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms'; - -// #docregion custom-validator -/** A hero's name can't match the given regular expression */ -export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { - return (control: AbstractControl): {[key: string]: any} => { - const forbidden = nameRe.test(control.value); - return forbidden ? {'forbiddenName': {value: control.value}} : null; - }; -} -// #enddocregion custom-validator - -// #docregion directive -@Directive({ - selector: '[appForbiddenName]', - // #docregion directive-providers - providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}] - // #enddocregion directive-providers -}) -export class ForbiddenValidatorDirective implements Validator { - @Input('appForbiddenName') forbiddenName: string; - - validate(control: AbstractControl): {[key: string]: any} { - return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) - : null; - } -} -// #enddocregion directive - diff --git a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html b/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html deleted file mode 100644 index c695abaa26..0000000000 --- a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html +++ /dev/null @@ -1,66 +0,0 @@ - -
    - -

    Template-Driven Form

    - -
    - -
    - -
    - - - - - - -
    - -
    - Name is required. -
    -
    - Name must be at least 4 characters long. -
    -
    - Name cannot be Bob. -
    - -
    - -
    - -
    - - -
    - -
    - - - -
    -
    Power is required.
    -
    -
    - - - -
    - -
    -

    You've submitted your hero, {{ heroForm.value.name }}!

    - -
    -
    - -
    diff --git a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts b/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts deleted file mode 100644 index cc8bd0b30f..0000000000 --- a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* tslint:disable: member-ordering */ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-hero-form-template', - templateUrl: './hero-form-template.component.html' -}) -export class HeroFormTemplateComponent { - - powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; - - hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]}; - -} diff --git a/docs_app/content/examples/form-validation/src/assets/forms.css b/docs_app/content/examples/form-validation/src/assets/forms.css deleted file mode 100644 index 1d388f656d..0000000000 --- a/docs_app/content/examples/form-validation/src/assets/forms.css +++ /dev/null @@ -1,8 +0,0 @@ - -.ng-valid[required], .ng-valid.required { - border-left: 5px solid #42A948; /* green */ -} - -.ng-invalid:not(form) { - border-left: 5px solid #a94442; /* red */ -} diff --git a/docs_app/content/examples/form-validation/src/index.html b/docs_app/content/examples/form-validation/src/index.html deleted file mode 100644 index 859ac12299..0000000000 --- a/docs_app/content/examples/form-validation/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - Hero Form with Validation - - - - - - - - - - - - diff --git a/docs_app/content/examples/form-validation/src/main.ts b/docs_app/content/examples/form-validation/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/form-validation/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/form-validation/stackblitz.json b/docs_app/content/examples/form-validation/stackblitz.json deleted file mode 100644 index 4871b07c6e..0000000000 --- a/docs_app/content/examples/form-validation/stackblitz.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "description": "Validation", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ] -} diff --git a/docs_app/content/examples/forms/e2e/app.e2e-spec.ts b/docs_app/content/examples/forms/e2e/app.e2e-spec.ts deleted file mode 100644 index d3d3cff970..0000000000 --- a/docs_app/content/examples/forms/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { browser, element, by } from 'protractor'; - -describe('Forms Tests', function () { - - beforeEach(function () { - browser.get(''); - }); - - it('should display correct title', function () { - expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form'); - }); - - - it('should not display message before submit', function () { - let ele = element(by.css('h2')); - expect(ele.isDisplayed()).toBe(false); - }); - - it('should hide form after submit', function () { - let ele = element.all(by.css('h1')).get(0); - expect(ele.isDisplayed()).toBe(true); - let b = element.all(by.css('button[type=submit]')).get(0); - b.click().then(function() { - expect(ele.isDisplayed()).toBe(false); - }); - }); - - it('should display message after submit', function () { - let b = element.all(by.css('button[type=submit]')).get(0); - b.click().then(function() { - expect(element(by.css('h2')).getText()).toContain('You submitted the following'); - }); - }); - - it('should hide form after submit', function () { - let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0); - expect(alterEgoEle.isDisplayed()).toBe(true); - let submitButtonEle = element.all(by.css('button[type=submit]')).get(0); - submitButtonEle.click().then(function() { - expect(alterEgoEle.isDisplayed()).toBe(false); - }); - }); - - it('should reflect submitted data after submit', function () { - let test = 'testing 1 2 3'; - let newValue: string; - let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0); - alterEgoEle.getAttribute('value').then(function(value: string) { - alterEgoEle.sendKeys(test); - newValue = value + test; - expect(alterEgoEle.getAttribute('value')).toEqual(newValue); - let b = element.all(by.css('button[type=submit]')).get(0); - return b.click(); - }).then(function() { - let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego')); - expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label'); - let divEle = element(by.cssContainingText('div', newValue)); - expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue); - }); - }); -}); - diff --git a/docs_app/content/examples/forms/example-config.json b/docs_app/content/examples/forms/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/forms/src/app/app.component.css b/docs_app/content/examples/forms/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/forms/src/app/app.component.html b/docs_app/content/examples/forms/src/app/app.component.html deleted file mode 100644 index 84d14ff8f6..0000000000 --- a/docs_app/content/examples/forms/src/app/app.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs_app/content/examples/forms/src/app/app.component.ts b/docs_app/content/examples/forms/src/app/app.component.ts deleted file mode 100644 index f7baece9b5..0000000000 --- a/docs_app/content/examples/forms/src/app/app.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { } diff --git a/docs_app/content/examples/forms/src/app/app.module.ts b/docs_app/content/examples/forms/src/app/app.module.ts deleted file mode 100644 index 51b9b9afe2..0000000000 --- a/docs_app/content/examples/forms/src/app/app.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { HeroFormComponent } from './hero-form/hero-form.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - HeroFormComponent - ], - providers: [], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.css b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html deleted file mode 100644 index 73b703f789..0000000000 --- a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html +++ /dev/null @@ -1,212 +0,0 @@ - - -
    - -
    -

    Hero Form

    - -
    - -
    - - - - -
    - - Name is required -
    - -
    - -
    - - -
    - -
    - - -
    - Power is required -
    -
    - - - - - - - - - with reset - -    - - - - without reset - - -
    -
    - Name via form.controls = {{showFormControls(heroForm)}} -
    - - -
    -
    - - -
    -

    You submitted the following:

    -
    -
    Name
    -
    {{ model.name }}
    -
    -
    -
    Alter Ego
    -
    {{ model.alterEgo }}
    -
    -
    -
    Power
    -
    {{ model.power }}
    -
    -
    - -
    - -
    - - - -
    -
    - - - - -
    -
    - - - -
    - - -
    - -
    -

    Hero Form

    -
    -
    - - -
    - -
    - - -
    - - - -
    - - -
    - - - - - -
    -
    - - - - -
    - -
    -

    Hero Form

    - -
    - - - {{diagnostic}} -
    - - -
    - -
    - - -
    - -
    - - -
    - - - - -
    -
    - - - -
    - - - TODO: remove this: {{model.name}} - -
    - - - TODO: remove this: {{model.name}} - -
    - - -
    TODO: remove this: {{spy.className}} - - -
    diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts deleted file mode 100644 index bc5fe12ef8..0000000000 --- a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -// #docplaster -// #docregion , v1, final -import { Component } from '@angular/core'; - -import { Hero } from '../hero'; - -@Component({ - selector: 'app-hero-form', - templateUrl: './hero-form.component.html', - styleUrls: ['./hero-form.component.css'] -}) -export class HeroFormComponent { - - powers = ['Really Smart', 'Super Flexible', - 'Super Hot', 'Weather Changer']; - - model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); - - // #docregion submitted - submitted = false; - - onSubmit() { this.submitted = true; } - // #enddocregion submitted - - // #enddocregion final - // TODO: Remove this when we're done - get diagnostic() { return JSON.stringify(this.model); } - // #enddocregion v1 - - // #docregion final, new-hero - newHero() { - this.model = new Hero(42, '', ''); - } - // #enddocregion final, new-hero - - skyDog(): Hero { - // #docregion SkyDog - let myHero = new Hero(42, 'SkyDog', - 'Fetch any object at any distance', - 'Leslie Rollover'); - console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog" - // #enddocregion SkyDog - return myHero; - } - - //////// NOT SHOWN IN DOCS //////// - - // Reveal in html: - // Name via form.controls = {{showFormControls(heroForm)}} - showFormControls(form: any) { - return form && form.controls['name'] && - // #docregion form-controls - form.controls['name'].value; // Dr. IQ - // #enddocregion form-controls - } - - ///////////////////////////// - - // #docregion v1, final -} diff --git a/docs_app/content/examples/forms/src/app/hero.ts b/docs_app/content/examples/forms/src/app/hero.ts deleted file mode 100644 index c128626452..0000000000 --- a/docs_app/content/examples/forms/src/app/hero.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -export class Hero { - - constructor( - public id: number, - public name: string, - public power: string, - public alterEgo?: string - ) { } - -} diff --git a/docs_app/content/examples/forms/src/assets/forms.css b/docs_app/content/examples/forms/src/assets/forms.css deleted file mode 100644 index 13ffbe1203..0000000000 --- a/docs_app/content/examples/forms/src/assets/forms.css +++ /dev/null @@ -1,9 +0,0 @@ -/* #docregion */ -.ng-valid[required], .ng-valid.required { - border-left: 5px solid #42A948; /* green */ -} - -.ng-invalid:not(form) { - border-left: 5px solid #a94442; /* red */ -} -/* #enddocregion */ diff --git a/docs_app/content/examples/forms/src/index.html b/docs_app/content/examples/forms/src/index.html deleted file mode 100644 index 44a5c33b05..0000000000 --- a/docs_app/content/examples/forms/src/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Hero Form - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/forms/src/main.ts b/docs_app/content/examples/forms/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/forms/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/forms/src/styles.1.css b/docs_app/content/examples/forms/src/styles.1.css deleted file mode 100644 index 167a66be4f..0000000000 --- a/docs_app/content/examples/forms/src/styles.1.css +++ /dev/null @@ -1 +0,0 @@ -@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css'); diff --git a/docs_app/content/examples/forms/stackblitz.json b/docs_app/content/examples/forms/stackblitz.json deleted file mode 100644 index 9e0797f0e9..0000000000 --- a/docs_app/content/examples/forms/stackblitz.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "description": "Forms", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ] -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts b/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts deleted file mode 100644 index 09a4f3d27b..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,103 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, by, element } from 'protractor'; - -describe('Hierarchical dependency injection', () => { - - beforeAll(() => { - browser.get(''); - }); - - describe('Heroes Scenario', () => { - let page = { - heroName: '', - income: '', - - // queries - heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero - heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return - taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0), - incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0), - cancelButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel')), - closeButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close')), - saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save')) - }; - - it('should list multiple heroes', () => { - expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1); - }); - - it('should show no hero tax-returns at the start', () => { - expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); - }); - - it('should open first hero in app-hero-tax-return view after click', () => { - page.heroEl.getText() - .then(val => { - page.heroName = val; - }) - .then(() => page.heroEl.click()) - .then(() => { - expect(page.heroCardEl.isDisplayed()).toBe(true); - }); - }); - - it('hero tax-return should have first hero\'s name', () => { - // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential - expect(page.taxReturnNameEl.getText()).toEqual(page.heroName); - }); - - it('should be able to cancel change', () => { - page.incomeInputEl.clear() - .then(() => page.incomeInputEl.sendKeys('777')) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777'); - return page.cancelButtonEl.click(); - }) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777'); - }); - }); - - it('should be able to save change', () => { - page.incomeInputEl.clear() - .then(() => page.incomeInputEl.sendKeys('999')) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999'); - return page.saveButtonEl.click(); - }) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999'); - }); - }); - - it('should be able to close tax-return', () => { - page.saveButtonEl.click() - .then(() => { - expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); - }); - }); - - }); - - describe('Villains Scenario', () => { - it('should list multiple villains', () => { - expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1); - }); - }); - - describe('Cars Scenario', () => { - - it('A-component should use expected services', () => { - expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1'); - }); - - it('B-component should use expected services', () => { - expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1'); - }); - - it('C-component should use expected services', () => { - expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1'); - }); - }); -}); diff --git a/docs_app/content/examples/hierarchical-dependency-injection/example-config.json b/docs_app/content/examples/hierarchical-dependency-injection/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts deleted file mode 100644 index ad9d08fa64..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` - - - - -

    Hierarchical Dependency Injection

    - - - - - ` -}) -export class AppComponent { - showCars = true; - showHeroes = true; - showVillains = true; -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts deleted file mode 100644 index 6ea18655af..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { HeroTaxReturnComponent } from './hero-tax-return.component'; -import { HeroesListComponent } from './heroes-list.component'; -import { HeroesService } from './heroes.service'; -import { VillainsListComponent } from './villains-list.component'; - -import { carComponents, carServices } from './car.components'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - providers: [ - carServices, - HeroesService - ], - declarations: [ - AppComponent, - carComponents, - HeroesListComponent, - HeroTaxReturnComponent, - VillainsListComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } - diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts deleted file mode 100644 index 259f54b9a4..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { Component } from '@angular/core'; - -import { - CarService, CarService2, CarService3, - EngineService, EngineService2, TiresService -} from './car.services'; - -////////// CCarComponent //////////// -@Component({ - selector: 'c-car', - template: `
    C: {{description}}
    `, - providers: [ - { provide: CarService, useClass: CarService3 } - ] -}) -export class CCarComponent { - description: string; - constructor(carService: CarService) { - this.description = `${carService.getCar().description} (${carService.name})`; - } -} - -////////// BCarComponent //////////// -@Component({ - selector: 'b-car', - template: ` -
    B: {{description}}
    - - `, - providers: [ - { provide: CarService, useClass: CarService2 }, - { provide: EngineService, useClass: EngineService2 } - ] -}) -export class BCarComponent { - description: string; - constructor(carService: CarService) { - this.description = `${carService.getCar().description} (${carService.name})`; - } -} - -////////// ACarComponent //////////// -@Component({ - selector: 'a-car', - template: ` -
    A: {{description}}
    - ` -}) -export class ACarComponent { - description: string; - constructor(carService: CarService) { - this.description = `${carService.getCar().description} (${carService.name})`; - } -} -////////// CarsComponent //////////// -@Component({ - selector: 'app-cars', - template: ` -

    Cars

    - ` -}) -export class CarsComponent { } - -//////////////// - -export const carComponents = [ - CarsComponent, - ACarComponent, BCarComponent, CCarComponent -]; - -// generic car-related services -export const carServices = [ - CarService, EngineService, TiresService -]; diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts deleted file mode 100644 index 03c79270b0..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { Injectable } from '@angular/core'; - -/// Model /// -export class Car { - name = 'Avocado Motors'; - constructor(public engine: Engine, public tires: Tires) { } - - get description() { - return `${this.name} car with ` + - `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; - } -} - -export class Engine { - cylinders = 4; -} - -export class Tires { - make = 'Flintstone'; - model = 'Square'; -} - -//// Engine services /// -@Injectable() -export class EngineService { - id = 'E1'; - getEngine() { return new Engine(); } -} - -@Injectable() -export class EngineService2 { - id = 'E2'; - getEngine() { - const eng = new Engine(); - eng.cylinders = 8; - return eng; - } -} - -//// Tire services /// -@Injectable() -export class TiresService { - id = 'T1'; - getTires() { return new Tires(); } -} - -/// Car Services /// -@Injectable() -export class CarService { - id = 'C1'; - constructor( - protected engineService: EngineService, - protected tiresService: TiresService) { } - - getCar() { - return new Car( - this.engineService.getEngine(), - this.tiresService.getTires()); - } - - get name() { - return `${this.id}-${this.engineService.id}-${this.tiresService.id}`; - } -} - -@Injectable() -export class CarService2 extends CarService { - id = 'C2'; - constructor( - protected engineService: EngineService, - protected tiresService: TiresService) { - super(engineService, tiresService); - } - getCar() { - const car = super.getCar(); - car.name = 'BamBam Motors, BroVan 2000'; - return car; - } -} - -@Injectable() -export class CarService3 extends CarService2 { - id = 'C3'; - constructor( - protected engineService: EngineService, - protected tiresService: TiresService) { - super(engineService, tiresService); - } - getCar() { - const car = super.getCar(); - car.name = 'Chizzamm Motors, Calico UltraMax Supreme'; - return car; - } -} - diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css deleted file mode 100644 index 1d29a1d168..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css +++ /dev/null @@ -1,22 +0,0 @@ -.tax-return { border: thin dashed green; margin: 1em; padding: 1em; width: 18em; position: relative } -#name { font-weight: bold;} -#tid { float: right; } -input { font-size: 100%; padding-left: 2px; width: 6em; } -input.num { text-align: right; padding-left: 0; padding-right: 4px; width: 4em;} -fieldset { border: 0 none;} - -.msg { - color: white; - font-size: 150%; - position: absolute; - /*opacity: 0.3;*/ - left: 2px; - top: 3em; - width: 98%; - background-color: green; - text-align: center; -} -.msg.canceled { - color: white; - background-color: red; -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html deleted file mode 100644 index ebf2dcbaaa..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
    -
    {{message}}
    -
    - {{taxReturn.name}} - -
    -
    - -
    -
    - -
    -
    - - - -
    -
    diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts deleted file mode 100644 index 0696e5f96b..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { HeroTaxReturn } from './hero'; -import { HeroTaxReturnService } from './hero-tax-return.service'; - -@Component({ - selector: 'app-hero-tax-return', - templateUrl: './hero-tax-return.component.html', - styleUrls: [ './hero-tax-return.component.css' ], - // #docregion providers - providers: [ HeroTaxReturnService ] - // #enddocregion providers -}) -export class HeroTaxReturnComponent { - message = ''; - @Output() close = new EventEmitter(); - - get taxReturn(): HeroTaxReturn { - return this.heroTaxReturnService.taxReturn; - } - @Input() - set taxReturn (htr: HeroTaxReturn) { - this.heroTaxReturnService.taxReturn = htr; - } - - constructor(private heroTaxReturnService: HeroTaxReturnService ) { } - - onCanceled() { - this.flashMessage('Canceled'); - this.heroTaxReturnService.restoreTaxReturn(); - }; - - onClose() { this.close.emit(); }; - - onSaved() { - this.flashMessage('Saved'); - this.heroTaxReturnService.saveTaxReturn(); - } - - flashMessage(msg: string) { - this.message = msg; - setTimeout(() => this.message = '', 500); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts deleted file mode 100644 index d6ff0f7fff..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { HeroTaxReturn } from './hero'; -import { HeroesService } from './heroes.service'; - -@Injectable() -export class HeroTaxReturnService { - private currentTaxReturn: HeroTaxReturn; - private originalTaxReturn: HeroTaxReturn; - - constructor(private heroService: HeroesService) { } - - set taxReturn (htr: HeroTaxReturn) { - this.originalTaxReturn = htr; - this.currentTaxReturn = htr.clone(); - } - - get taxReturn (): HeroTaxReturn { - return this.currentTaxReturn; - } - - restoreTaxReturn() { - this.taxReturn = this.originalTaxReturn; - } - - saveTaxReturn() { - this.taxReturn = this.currentTaxReturn; - this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe(); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts deleted file mode 100644 index 4ad6ccd8eb..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts +++ /dev/null @@ -1,31 +0,0 @@ -// #docregion - -export class Hero { - id: number; - name: string; - tid: string; // tax id -} - -//// HeroTaxReturn //// -let nextId = 100; - -export class HeroTaxReturn { - constructor( - public id = nextId++, - public hero: Hero, - public income = 0 ) { - if (id === 0) { id = nextId++; } - } - - get name() { return this.hero.name; } - get tax() { return this.income ? .10 * this.income : 0; } - get tid() { return this.hero.tid; } - - toString() { - return `${this.hero.name}`; - } - - clone() { - return new HeroTaxReturn(this.id, this.hero, this.income); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts deleted file mode 100644 index 7e598a8038..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Hero, HeroTaxReturn } from './hero'; -import { HeroesService } from './heroes.service'; - -@Component({ - selector: 'app-heroes-list', - template: ` -
    -

    Hero Tax Returns

    -
      -
    • {{hero.name}} -
      • -
    - - -
    - `, - styles: [ 'li {cursor: pointer;}' ] -}) -export class HeroesListComponent { - heroes: Observable; - selectedTaxReturns: HeroTaxReturn[] = []; - - constructor(private heroesService: HeroesService) { - this.heroes = heroesService.getHeroes(); - } - - showTaxReturn(hero: Hero) { - this.heroesService.getTaxReturn(hero) - .subscribe(htr => { - // show if not currently shown - if (!this.selectedTaxReturns.find(tr => tr.id === htr.id)) { - this.selectedTaxReturns.push(htr); - } - }); - } - - closeTaxReturn(ix: number) { - this.selectedTaxReturns.splice(ix, 1); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts deleted file mode 100644 index c4d08c7b8f..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Observable, Observer } from 'rxjs'; - -import { Hero, HeroTaxReturn } from './hero'; - -@Injectable() -export class HeroesService { - heroes: Hero[] = [ - { id: 1, name: 'RubberMan', tid: '082-27-5678'}, - { id: 2, name: 'Tornado', tid: '099-42-4321'} - ]; - - heroTaxReturns: HeroTaxReturn[] = [ - new HeroTaxReturn(10, this.heroes[0], 35000), - new HeroTaxReturn(20, this.heroes[1], 1250000) - ]; - - getHeroes(): Observable { - return new Observable((observer: Observer) => { - observer.next(this.heroes); - observer.complete(); - }); - } - - getTaxReturn(hero: Hero): Observable { - return new Observable((observer: Observer) => { - const htr = this.heroTaxReturns.find(t => t.hero.id === hero.id); - observer.next(htr || new HeroTaxReturn(0, hero)); - observer.complete(); - }); - } - - saveTaxReturn(heroTaxReturn: HeroTaxReturn): Observable { - return new Observable((observer: Observer) => { - const htr = this.heroTaxReturns.find(t => t.id === heroTaxReturn.id); - if (htr) { - heroTaxReturn = Object.assign(htr, heroTaxReturn); // demo: mutate - } else { - this.heroTaxReturns.push(heroTaxReturn); - } - observer.next(heroTaxReturn); - observer.complete(); - }); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html deleted file mode 100644 index 75e5ba3237..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
    -

    Villains

    -
      -
    • {{villain.name}}
      • -
    -
    diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts deleted file mode 100644 index aa70bdf3cb..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Villain, VillainsService } from './villains.service'; - -// #docregion metadata -@Component({ - selector: 'app-villains-list', - templateUrl: './villains-list.component.html', - providers: [ VillainsService ] -}) -// #enddocregion metadata -export class VillainsListComponent { - villains: Observable; - - constructor(private villainsService: VillainsService) { - this.villains = villainsService.getVillains(); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts deleted file mode 100644 index a8605bd11d..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { of } from 'rxjs'; - -export interface Villain { id: number; name: string; } - -@Injectable() -export class VillainsService { - villains: Villain[] = [ - { id: 1, name: 'Dr. Evil'}, - { id: 2, name: 'Moriarty'} - ]; - - getVillains() { - return of(this.villains); - } -} diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/index.html b/docs_app/content/examples/hierarchical-dependency-injection/src/index.html deleted file mode 100644 index dd35fec6ae..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Hierarchical Injectors - - - - - - - - - - diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json b/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json deleted file mode 100644 index 7bb2331163..0000000000 --- a/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Hierarchical Dependency Injection", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["dependency", "injection"] -} diff --git a/docs_app/content/examples/http/e2e/app.e2e-spec.ts b/docs_app/content/examples/http/e2e/app.e2e-spec.ts deleted file mode 100644 index d0a77b5239..0000000000 --- a/docs_app/content/examples/http/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { browser, element, by, ElementFinder } from 'protractor'; -import { resolve } from 'path'; - -const page = { - configClearButton: element.all(by.css('app-config > div button')).get(2), - configErrorButton: element.all(by.css('app-config > div button')).get(3), - configErrorMessage: element(by.css('app-config p')), - configGetButton: element.all(by.css('app-config > div button')).get(0), - configGetResponseButton: element.all(by.css('app-config > div button')).get(1), - configSpan: element(by.css('app-config span')), - downloadButton: element.all(by.css('app-downloader button')).get(0), - downloadClearButton: element.all(by.css('app-downloader button')).get(1), - downloadMessage: element(by.css('app-downloader p')), - heroesListAddButton: element.all(by.css('app-heroes > div button')).get(0), - heroesListInput: element(by.css('app-heroes > div input')), - heroesListSearchButton: element.all(by.css('app-heroes > div button')).get(1), - heroesListItems: element.all(by.css('app-heroes ul li')), - logClearButton: element(by.css('app-messages button')), - logList: element(by.css('app-messages ol')), - logListItems: element.all(by.css('app-messages ol li')), - searchInput: element(by.css('app-package-search input#name')), - searchListItems: element.all(by.css('app-package-search li')), - uploadInput: element(by.css('app-uploader input')), - uploadMessage: element(by.css('app-uploader p')) -}; - -let checkLogForMessage = (message: string) => { - expect(page.logList.getText()).toContain(message); -}; - -// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet -// and we don't have the backwards compatibility package yet. -// Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6 -xdescribe('Http Tests', function() { - beforeEach(() => { - browser.get(''); - }); - - describe('Heroes', () => { - it('retrieves the list of heroes at startup', () => { - expect(page.heroesListItems.count()).toBe(4); - expect(page.heroesListItems.get(0).getText()).toContain('Mr. Nice'); - checkLogForMessage('GET "api/heroes"'); - }); - - it('makes a POST to add a new hero', () => { - page.heroesListInput.sendKeys('Magneta'); - page.heroesListAddButton.click(); - expect(page.heroesListItems.count()).toBe(5); - checkLogForMessage('POST "api/heroes"'); - }); - - it('makes a GET to search for a hero', () => { - page.heroesListInput.sendKeys('Celeritas'); - page.heroesListSearchButton.click(); - checkLogForMessage('GET "api/heroes?name=Celeritas"'); - }); - }); - - describe('Messages', () => { - it('can clear the logs', () => { - expect(page.logListItems.count()).toBe(1); - page.logClearButton.click(); - expect(page.logListItems.count()).toBe(0); - }); - }); - - describe('Configuration', () => { - it('can fetch the configuration JSON file', () => { - page.configGetButton.click(); - checkLogForMessage('GET "assets/config.json"'); - expect(page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"'); - expect(page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"'); - }); - - it('can fetch the configuration JSON file with headers', () => { - page.configGetResponseButton.click(); - checkLogForMessage('GET "assets/config.json"'); - expect(page.configSpan.getText()).toContain('Response headers:'); - expect(page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8'); - }); - - it('can clear the configuration log', () => { - page.configGetResponseButton.click(); - expect(page.configSpan.getText()).toContain('Response headers:'); - page.configClearButton.click(); - expect(page.configSpan.isPresent()).toBeFalsy(); - }); - - it('throws an error for a non valid url', () => { - page.configErrorButton.click(); - checkLogForMessage('GET "not/a/real/url"'); - expect(page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."'); - }); - }); - - describe('Download', () => { - it('can download a txt file and show it', () => { - page.downloadButton.click(); - checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"'); - checkLogForMessage('GET "assets/textfile.txt"'); - expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); - }); - - it('can clear the log of the download', () => { - page.downloadButton.click(); - expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); - page.downloadClearButton.click(); - expect(page.downloadMessage.isPresent()).toBeFalsy(); - }); - }); - - describe('Upload', () => { - it('can upload a file', () => { - const filename = 'app.po.ts'; - const url = resolve(__dirname, filename); - page.uploadInput.sendKeys(url); - checkLogForMessage('POST "/upload/file" succeeded in'); - expect(page.uploadMessage.getText()).toContain( - `File "${filename}" was completely uploaded!`); - }); - }); - - describe('PackageSearch', () => { - it('can search for npm package and find in cache', () => { - const packageName = 'angular'; - page.searchInput.sendKeys(packageName); - checkLogForMessage( - 'Caching response from "https://npmsearch.com/query?q=angular"'); - expect(page.searchListItems.count()).toBeGreaterThan(1, 'angular items'); - - page.searchInput.clear(); - page.searchInput.sendKeys(' '); - expect(page.searchListItems.count()).toBe(0, 'search empty'); - - page.searchInput.clear(); - page.searchInput.sendKeys(packageName); - checkLogForMessage( - 'Found cached response for "https://npmsearch.com/query?q=angular"'); - }); - }); -}); diff --git a/docs_app/content/examples/http/example-config.json b/docs_app/content/examples/http/example-config.json deleted file mode 100644 index 317e9458f3..0000000000 --- a/docs_app/content/examples/http/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "projectType": "testing" -} diff --git a/docs_app/content/examples/http/specs.stackblitz.json b/docs_app/content/examples/http/specs.stackblitz.json deleted file mode 100644 index 1442c98f3a..0000000000 --- a/docs_app/content/examples/http/specs.stackblitz.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "description": "Http Guide Testing", - "files":[ - "src/app/heroes/heroes.service.ts", - "src/app/heroes/heroes.service.spec.ts", - - "src/app/http-error-handler.service.ts", - "src/app/message.service.ts", - "src/testing/*.ts", - - "src/styles.css", - "src/test.css", - "src/main-specs.ts", - "src/index-specs.html" - ], - "main": "src/index-specs.html", - "tags": ["http", "testing"] -} diff --git a/docs_app/content/examples/http/src/app/app.component.html b/docs_app/content/examples/http/src/app/app.component.html deleted file mode 100644 index e5d5dec909..0000000000 --- a/docs_app/content/examples/http/src/app/app.component.html +++ /dev/null @@ -1,24 +0,0 @@ -

    HTTP Sample

    -
    - - - - - - - - - - - - - - -
    - - - - - - - diff --git a/docs_app/content/examples/http/src/app/app.component.ts b/docs_app/content/examples/http/src/app/app.component.ts deleted file mode 100644 index 655b550276..0000000000 --- a/docs_app/content/examples/http/src/app/app.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { - showHeroes = true; - showConfig = true; - showDownloader = true; - showUploader = true; - showSearch = true; - - toggleHeroes() { this.showHeroes = !this.showHeroes; } - toggleConfig() { this.showConfig = !this.showConfig; } - toggleDownloader() { this.showDownloader = !this.showDownloader; } - toggleUploader() { this.showUploader = !this.showUploader; } - toggleSearch() { this.showSearch = !this.showSearch; } - } diff --git a/docs_app/content/examples/http/src/app/app.module.ts b/docs_app/content/examples/http/src/app/app.module.ts deleted file mode 100644 index 0929ec3a9b..0000000000 --- a/docs_app/content/examples/http/src/app/app.module.ts +++ /dev/null @@ -1,89 +0,0 @@ -// #docplaster -// #docregion sketch -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion sketch -import { FormsModule } from '@angular/forms'; -// #docregion sketch -import { HttpClientModule } from '@angular/common/http'; -// #enddocregion sketch -import { HttpClientXsrfModule } from '@angular/common/http'; - -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; - -import { RequestCache, RequestCacheWithMap } from './request-cache.service'; - -import { AppComponent } from './app.component'; -import { AuthService } from './auth.service'; -import { ConfigComponent } from './config/config.component'; -import { DownloaderComponent } from './downloader/downloader.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HttpErrorHandler } from './http-error-handler.service'; -import { MessageService } from './message.service'; -import { MessagesComponent } from './messages/messages.component'; -import { PackageSearchComponent } from './package-search/package-search.component'; -import { UploaderComponent } from './uploader/uploader.component'; - -import { httpInterceptorProviders } from './http-interceptors/index'; -// #docregion sketch - -@NgModule({ -// #docregion xsrf - imports: [ -// #enddocregion xsrf - BrowserModule, -// #enddocregion sketch - FormsModule, -// #docregion sketch - // import HttpClientModule after BrowserModule. -// #docregion xsrf - HttpClientModule, -// #enddocregion sketch - HttpClientXsrfModule.withOptions({ - cookieName: 'My-Xsrf-Cookie', - headerName: 'My-Xsrf-Header', - }), -// #enddocregion xsrf - - // The HttpClientInMemoryWebApiModule module intercepts HTTP requests - // and returns simulated server responses. - // Remove it when a real server is ready to receive requests. - HttpClientInMemoryWebApiModule.forRoot( - InMemoryDataService, { - dataEncapsulation: false, - passThruUnknownUrl: true, - put204: false // return entity after PUT/update - } - ) -// #docregion sketch, xsrf - ], -// #enddocregion xsrf - declarations: [ - AppComponent, -// #enddocregion sketch - ConfigComponent, - DownloaderComponent, - HeroesComponent, - MessagesComponent, - UploaderComponent, - PackageSearchComponent, -// #docregion sketch - ], -// #enddocregion sketch -// #docregion interceptor-providers - providers: [ - // #enddocregion interceptor-providers - AuthService, - HttpErrorHandler, - MessageService, - { provide: RequestCache, useClass: RequestCacheWithMap }, - // #docregion interceptor-providers - httpInterceptorProviders - ], -// #enddocregion interceptor-providers -// #docregion sketch - bootstrap: [ AppComponent ] -}) -export class AppModule {} -// #enddocregion sketch diff --git a/docs_app/content/examples/http/src/app/auth.service.ts b/docs_app/content/examples/http/src/app/auth.service.ts deleted file mode 100644 index 67a4eb4dc5..0000000000 --- a/docs_app/content/examples/http/src/app/auth.service.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Injectable } from '@angular/core'; - -/** Mock client-side authentication/authorization service */ -@Injectable() -export class AuthService { - getAuthorizationToken() { - return 'some-auth-token'; - } -} diff --git a/docs_app/content/examples/http/src/app/config/config.component.html b/docs_app/content/examples/http/src/app/config/config.component.html deleted file mode 100644 index e17e9bc109..0000000000 --- a/docs_app/content/examples/http/src/app/config/config.component.html +++ /dev/null @@ -1,18 +0,0 @@ -

    Get configuration from JSON file

    -
    - - - - - -

    Heroes API URL is "{{config.heroesUrl}}"

    -

    Textfile URL is "{{config.textfile}}"

    -
    - Response headers: -
      -
    • {{header}}
      • -
    -
    -     -
    -

    {{error | json}}

    diff --git a/docs_app/content/examples/http/src/app/config/config.component.ts b/docs_app/content/examples/http/src/app/config/config.component.ts deleted file mode 100644 index c082e81030..0000000000 --- a/docs_app/content/examples/http/src/app/config/config.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { Config, ConfigService } from './config.service'; -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-config', - templateUrl: './config.component.html', - providers: [ ConfigService ], - styles: ['.error {color: red;}'] -}) -export class ConfigComponent { - error: any; - headers: string[]; - // #docregion v2 - config: Config; - - // #enddocregion v2 - constructor(private configService: ConfigService) {} - - clear() { - this.config = undefined; - this.error = undefined; - this.headers = undefined; - } - - // #docregion v1, v2, v3 - showConfig() { - this.configService.getConfig() - // #enddocregion v1, v2 - .subscribe( - (data: Config) => this.config = { ...data }, // success path - error => this.error = error // error path - ); - } - // #enddocregion v3 - - showConfig_v1() { - this.configService.getConfig_1() - // #docregion v1, v1_callback - .subscribe((data: Config) => this.config = { - heroesUrl: data['heroesUrl'], - textfile: data['textfile'] - }); - // #enddocregion v1_callback - } - // #enddocregion v1 - - showConfig_v2() { - this.configService.getConfig() - // #docregion v2, v2_callback - // clone the data object, using its known Config shape - .subscribe((data: Config) => this.config = { ...data }); - // #enddocregion v2_callback - } - // #enddocregion v2 - -// #docregion showConfigResponse - showConfigResponse() { - this.configService.getConfigResponse() - // resp is of type `HttpResponse` - .subscribe(resp => { - // display its headers - const keys = resp.headers.keys(); - this.headers = keys.map(key => - `${key}: ${resp.headers.get(key)}`); - - // access the body directly, which is typed as `Config`. - this.config = { ... resp.body }; - }); - } -// #enddocregion showConfigResponse - makeError() { - this.configService.makeIntentionalError().subscribe(null, error => this.error = error ); - } -} -// #enddocregion diff --git a/docs_app/content/examples/http/src/app/config/config.service.ts b/docs_app/content/examples/http/src/app/config/config.service.ts deleted file mode 100644 index 4dd71c69ab..0000000000 --- a/docs_app/content/examples/http/src/app/config/config.service.ts +++ /dev/null @@ -1,99 +0,0 @@ -// #docplaster -// #docregion , proto -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -// #enddocregion proto -import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; - -// #docregion rxjs-imports -import { Observable, throwError } from 'rxjs'; -import { catchError, retry } from 'rxjs/operators'; -// #enddocregion rxjs-imports - -// #docregion config-interface -export interface Config { - heroesUrl: string; - textfile: string; -} -// #enddocregion config-interface -// #docregion proto - -@Injectable() -export class ConfigService { - // #enddocregion proto - // #docregion getConfig_1 - configUrl = 'assets/config.json'; - - // #enddocregion getConfig_1 - // #docregion proto - constructor(private http: HttpClient) { } - // #enddocregion proto - - // #docregion getConfig, getConfig_1, getConfig_2, getConfig_3 - getConfig() { - // #enddocregion getConfig_1, getConfig_2, getConfig_3 - return this.http.get(this.configUrl) - .pipe( - retry(3), // retry a failed request up to 3 times - catchError(this.handleError) // then handle the error - ); - } - // #enddocregion getConfig - - getConfig_1() { - // #docregion getConfig_1 - return this.http.get(this.configUrl); - } - // #enddocregion getConfig_1 - - getConfig_2() { - // #docregion getConfig_2 - // now returns an Observable of Config - return this.http.get(this.configUrl); - } - // #enddocregion getConfig_2 - - getConfig_3() { - // #docregion getConfig_3 - return this.http.get(this.configUrl) - .pipe( - catchError(this.handleError) - ); - } - // #enddocregion getConfig_3 - - // #docregion getConfigResponse - getConfigResponse(): Observable> { - return this.http.get( - this.configUrl, { observe: 'response' }); - } - // #enddocregion getConfigResponse - - // #docregion handleError - private handleError(error: HttpErrorResponse) { - if (error.error instanceof ErrorEvent) { - // A client-side or network error occurred. Handle it accordingly. - console.error('An error occurred:', error.error.message); - } else { - // The backend returned an unsuccessful response code. - // The response body may contain clues as to what went wrong, - console.error( - `Backend returned code ${error.status}, ` + - `body was: ${error.error}`); - } - // return an observable with a user-facing error message - return throwError( - 'Something bad happened; please try again later.'); - }; - // #enddocregion handleError - - makeIntentionalError() { - return this.http.get('not/a/real/url') - .pipe( - catchError(this.handleError) - ); - } - -// #docregion proto -} -// #enddocregion proto diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.component.html b/docs_app/content/examples/http/src/app/downloader/downloader.component.html deleted file mode 100644 index 3eb9516472..0000000000 --- a/docs_app/content/examples/http/src/app/downloader/downloader.component.html +++ /dev/null @@ -1,4 +0,0 @@ -

    Download the textfile

    - - -

    Contents: "{{contents}}"

    diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.component.ts b/docs_app/content/examples/http/src/app/downloader/downloader.component.ts deleted file mode 100644 index 21216d1c63..0000000000 --- a/docs_app/content/examples/http/src/app/downloader/downloader.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component } from '@angular/core'; -import { DownloaderService } from './downloader.service'; - -@Component({ - selector: 'app-downloader', - templateUrl: './downloader.component.html', - providers: [ DownloaderService ] -}) -export class DownloaderComponent { - contents: string; - constructor(private downloaderService: DownloaderService) {} - - clear() { - this.contents = undefined; - } - - // #docregion download - download() { - this.downloaderService.getTextFile('assets/textfile.txt') - .subscribe(results => this.contents = results); - } - // #enddocregion download -} diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.service.ts b/docs_app/content/examples/http/src/app/downloader/downloader.service.ts deleted file mode 100644 index e10a4f2b35..0000000000 --- a/docs_app/content/examples/http/src/app/downloader/downloader.service.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; - -import { tap } from 'rxjs/operators'; - -import { MessageService } from '../message.service'; - -@Injectable() -export class DownloaderService { - constructor( - private http: HttpClient, - private messageService: MessageService) { } - - // #docregion getTextFile - getTextFile(filename: string) { - // The Observable returned by get() is of type Observable - // because a text response was specified. - // There's no need to pass a type parameter to get(). - return this.http.get(filename, {responseType: 'text'}) - .pipe( - tap( // Log the result or error - data => this.log(filename, data), - error => this.logError(filename, error) - ) - ); - } - // #enddocregion getTextFile - - private log(filename: string, data: string) { - const message = `DownloaderService downloaded "${filename}" and got "${data}".`; - this.messageService.add(message); - } - - private logError(filename: string, error: any) { - const message = `DownloaderService failed to download "${filename}"; got error "${error.message}".`; - console.error(message); - this.messageService.add(message); - } -} diff --git a/docs_app/content/examples/http/src/app/heroes/hero.ts b/docs_app/content/examples/http/src/app/heroes/hero.ts deleted file mode 100644 index a61b497759..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.css b/docs_app/content/examples/http/src/app/heroes/heroes.component.css deleted file mode 100644 index 89a07c17bf..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,89 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - position: relative; - cursor: pointer; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; - width: 19em; -} - -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} - -.heroes a { - color: #888; - text-decoration: none; - position: relative; - display: block; - width: 250px; -} - -.heroes a:hover { - color:#607D8B; -} - -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - min-width: 16px; - text-align: right; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} - -.button { - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; - font-family: Arial; -} - -button:hover { - background-color: #cfd8dc; -} - -button.delete { - position: relative; - left: 24em; - top: -32px; - background-color: gray !important; - color: white; - display: inherit; - padding: 5px 8px; - width: 2em; -} - -input { - font-size: 100%; - margin-bottom: 2px; - width: 11em; -} - -.heroes input { - position: relative; - top: -3px; - width: 12em; -} diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.html b/docs_app/content/examples/http/src/app/heroes/heroes.component.html deleted file mode 100644 index 4bb3597a71..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,32 +0,0 @@ -

    Heroes

    - -
    - - - - -
    - - - - - diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.ts b/docs_app/content/examples/http/src/app/heroes/heroes.component.ts deleted file mode 100644 index d44f80e9ff..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroesService } from './heroes.service'; - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - providers: [ HeroesService ], - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - heroes: Hero[]; - editHero: Hero; // the hero currently being edited - - constructor(private heroesService: HeroesService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroesService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } - - add(name: string): void { - this.editHero = undefined; - name = name.trim(); - if (!name) { return; } - - // The server will generate the id for this new hero - const newHero: Hero = { name } as Hero; - // #docregion add-hero-subscribe - this.heroesService.addHero(newHero) - .subscribe(hero => this.heroes.push(hero)); - // #enddocregion add-hero-subscribe - } - - delete(hero: Hero): void { - this.heroes = this.heroes.filter(h => h !== hero); - // #docregion delete-hero-subscribe - this.heroesService.deleteHero(hero.id).subscribe(); - // #enddocregion delete-hero-subscribe - /* - // #docregion delete-hero-no-subscribe - // oops ... subscribe() is missing so nothing happens - this.heroesService.deleteHero(hero.id); - // #enddocregion delete-hero-no-subscribe - */ - } - - edit(hero) { - this.editHero = hero; - } - - search(searchTerm: string) { - this.editHero = undefined; - if (searchTerm) { - this.heroesService.searchHeroes(searchTerm) - .subscribe(heroes => this.heroes = heroes); - } - } - - update() { - if (this.editHero) { - this.heroesService.updateHero(this.editHero) - .subscribe(hero => { - // replace the hero in the heroes list with update from server - const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1; - if (ix > -1) { this.heroes[ix] = hero; } - }); - this.editHero = undefined; - } - } -} diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts b/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts deleted file mode 100644 index bfc204b4ad..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts +++ /dev/null @@ -1,156 +0,0 @@ -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -// Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpResponse } from '@angular/common/http'; - -import { Hero } from './hero'; -import { HeroesService } from './heroes.service'; -import { HttpErrorHandler } from '../http-error-handler.service'; -import { MessageService } from '../message.service'; - -describe('HeroesService', () => { - let httpClient: HttpClient; - let httpTestingController: HttpTestingController; - let heroService: HeroesService; - - beforeEach(() => { - TestBed.configureTestingModule({ - // Import the HttpClient mocking services - imports: [ HttpClientTestingModule ], - // Provide the service-under-test and its dependencies - providers: [ - HeroesService, - HttpErrorHandler, - MessageService - ] - }); - - // Inject the http, test controller, and service-under-test - // as they will be referenced by each test. - httpClient = TestBed.get(HttpClient); - httpTestingController = TestBed.get(HttpTestingController); - heroService = TestBed.get(HeroesService); - }); - - afterEach(() => { - // After every test, assert that there are no more pending requests. - httpTestingController.verify(); - }); - - /// HeroService method tests begin /// - - describe('#getHeroes', () => { - let expectedHeroes: Hero[]; - - beforeEach(() => { - heroService = TestBed.get(HeroesService); - expectedHeroes = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ] as Hero[]; - }); - - it('should return expected heroes (called once)', () => { - - heroService.getHeroes().subscribe( - heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'), - fail - ); - - // HeroService should have made one request to GET heroes from expected URL - const req = httpTestingController.expectOne(heroService.heroesUrl); - expect(req.request.method).toEqual('GET'); - - // Respond with the mock heroes - req.flush(expectedHeroes); - }); - - it('should be OK returning no heroes', () => { - - heroService.getHeroes().subscribe( - heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'), - fail - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - req.flush([]); // Respond with no heroes - }); - - // This service reports the error but finds a way to let the app keep going. - it('should turn 404 into an empty heroes result', () => { - - heroService.getHeroes().subscribe( - heroes => expect(heroes.length).toEqual(0, 'should return empty heroes array'), - fail - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - - // respond with a 404 and the error message in the body - const msg = 'deliberate 404 error'; - req.flush(msg, {status: 404, statusText: 'Not Found'}); - }); - - it('should return expected heroes (called multiple times)', () => { - - heroService.getHeroes().subscribe(); - heroService.getHeroes().subscribe(); - heroService.getHeroes().subscribe( - heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'), - fail - ); - - const requests = httpTestingController.match(heroService.heroesUrl); - expect(requests.length).toEqual(3, 'calls to getHeroes()'); - - // Respond to each request with different mock hero results - requests[0].flush([]); - requests[1].flush([{id: 1, name: 'bob'}]); - requests[2].flush(expectedHeroes); - }); - }); - - describe('#updateHero', () => { - // Expecting the query form of URL so should not 404 when id not found - const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`; - - it('should update a hero and return it', () => { - - const updateHero: Hero = { id: 1, name: 'A' }; - - heroService.updateHero(updateHero).subscribe( - data => expect(data).toEqual(updateHero, 'should return the hero'), - fail - ); - - // HeroService should have made one request to PUT hero - const req = httpTestingController.expectOne(heroService.heroesUrl); - expect(req.request.method).toEqual('PUT'); - expect(req.request.body).toEqual(updateHero); - - // Expect server to return the hero after PUT - const expectedResponse = new HttpResponse( - { status: 200, statusText: 'OK', body: updateHero }); - req.event(expectedResponse); - }); - - // This service reports the error but finds a way to let the app keep going. - it('should turn 404 error into return of the update hero', () => { - const updateHero: Hero = { id: 1, name: 'A' }; - - heroService.updateHero(updateHero).subscribe( - data => expect(data).toEqual(updateHero, 'should return the update hero'), - fail - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - - // respond with a 404 and the error message in the body - const msg = 'deliberate 404 error'; - req.flush(msg, {status: 404, statusText: 'Not Found'}); - }); - }); - - // TODO: test other HeroService methods -}); diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.service.ts b/docs_app/content/examples/http/src/app/heroes/heroes.service.ts deleted file mode 100644 index a0c079027f..0000000000 --- a/docs_app/content/examples/http/src/app/heroes/heroes.service.ts +++ /dev/null @@ -1,98 +0,0 @@ -// #docplaster -import { Injectable } from '@angular/core'; -import { HttpClient, HttpParams } from '@angular/common/http'; -// #docregion http-options -import { HttpHeaders } from '@angular/common/http'; - -// #enddocregion http-options - -import { Observable } from 'rxjs'; -import { catchError } from 'rxjs/operators'; - -import { Hero } from './hero'; -import { HttpErrorHandler, HandleError } from '../http-error-handler.service'; - -// #docregion http-options -const httpOptions = { - headers: new HttpHeaders({ - 'Content-Type': 'application/json', - 'Authorization': 'my-auth-token' - }) -}; -// #enddocregion http-options - -@Injectable() -export class HeroesService { - heroesUrl = 'api/heroes'; // URL to web api - private handleError: HandleError; - - constructor( - private http: HttpClient, - httpErrorHandler: HttpErrorHandler) { - this.handleError = httpErrorHandler.createHandleError('HeroesService'); - } - - /** GET heroes from the server */ - getHeroes (): Observable { - return this.http.get(this.heroesUrl) - .pipe( - catchError(this.handleError('getHeroes', [])) - ); - } - - // #docregion searchHeroes - /* GET heroes whose name contains search term */ - searchHeroes(term: string): Observable { - term = term.trim(); - - // Add safe, URL encoded search parameter if there is a search term - const options = term ? - { params: new HttpParams().set('name', term) } : {}; - - return this.http.get(this.heroesUrl, options) - .pipe( - catchError(this.handleError('searchHeroes', [])) - ); - } - // #enddocregion searchHeroes - - //////// Save methods ////////// - - // #docregion addHero - /** POST: add a new hero to the database */ - addHero (hero: Hero): Observable { - return this.http.post(this.heroesUrl, hero, httpOptions) - .pipe( - catchError(this.handleError('addHero', hero)) - ); - } - // #enddocregion addHero - - // #docregion deleteHero - /** DELETE: delete the hero from the server */ - deleteHero (id: number): Observable<{}> { - const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42 - return this.http.delete(url, httpOptions) - .pipe( - catchError(this.handleError('deleteHero')) - ); - } - // #enddocregion deleteHero - - // #docregion updateHero - /** PUT: update the hero on the server. Returns the updated hero upon success. */ - updateHero (hero: Hero): Observable { - // #enddocregion updateHero - // #docregion update-headers - httpOptions.headers = - httpOptions.headers.set('Authorization', 'my-new-auth-token'); - // #enddocregion update-headers - - // #docregion updateHero - return this.http.put(this.heroesUrl, hero, httpOptions) - .pipe( - catchError(this.handleError('updateHero', hero)) - ); - } - // #enddocregion updateHero -} diff --git a/docs_app/content/examples/http/src/app/http-error-handler.service.ts b/docs_app/content/examples/http/src/app/http-error-handler.service.ts deleted file mode 100644 index c7d0926fbd..0000000000 --- a/docs_app/content/examples/http/src/app/http-error-handler.service.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpErrorResponse } from '@angular/common/http'; - -import { Observable, of } from 'rxjs'; - -import { MessageService } from './message.service'; - -/** Type of the handleError function returned by HttpErrorHandler.createHandleError */ -export type HandleError = - (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable; - -/** Handles HttpClient errors */ -@Injectable() -export class HttpErrorHandler { - constructor(private messageService: MessageService) { } - - /** Create curried handleError function that already knows the service name */ - createHandleError = (serviceName = '') => - (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result); - - /** - * Returns a function that handles Http operation failures. - * This error handler lets the app continue to run as if no error occurred. - * @param serviceName = name of the data service that attempted the operation - * @param operation - name of the operation that failed - * @param result - optional value to return as the observable result - */ - handleError (serviceName = '', operation = 'operation', result = {} as T) { - - return (error: HttpErrorResponse): Observable => { - // TODO: send the error to remote logging infrastructure - console.error(error); // log to console instead - - const message = (error.error instanceof ErrorEvent) ? - error.error.message : - `server returned code ${error.status} with body "${error.error}"`; - - // TODO: better job of transforming error for user consumption - this.messageService.add(`${serviceName}: ${operation} failed: ${message}`); - - // Let the app keep running by returning a safe result. - return of( result ); - }; - - } -} diff --git a/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts deleted file mode 100644 index 85fb760450..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docplaster -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, HttpRequest -} from '@angular/common/http'; - -// #docregion -import { AuthService } from '../auth.service'; - -@Injectable() -export class AuthInterceptor implements HttpInterceptor { - - constructor(private auth: AuthService) {} - - intercept(req: HttpRequest, next: HttpHandler) { - // Get the auth token from the service. - const authToken = this.auth.getAuthorizationToken(); - - // #enddocregion - /* - * The verbose way: - // #docregion - // Clone the request and replace the original headers with - // cloned headers, updated with the authorization. - const authReq = req.clone({ - headers: req.headers.set('Authorization', authToken) - }); - // #enddocregion - */ - // #docregion set-header-shortcut - // Clone the request and set the new header in one step. - const authReq = req.clone({ setHeaders: { Authorization: authToken } }); - // #enddocregion set-header-shortcut - // #docregion - - // send cloned request with header to the next handler. - return next.handle(authReq); - } -} -// #enddocregion diff --git a/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts deleted file mode 100644 index 5ebb631ac2..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts +++ /dev/null @@ -1,85 +0,0 @@ -// #docplaster -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpHeaders, HttpRequest, HttpResponse, - HttpInterceptor, HttpHandler -} from '@angular/common/http'; - -import { Observable, of } from 'rxjs'; -import { startWith, tap } from 'rxjs/operators'; - -import { RequestCache } from '../request-cache.service'; -import { searchUrl } from '../package-search/package-search.service'; - - -/** - * If request is cachable (e.g., package search) and - * response is in cache return the cached response as observable. - * If has 'x-refresh' header that is true, - * then also re-run the package search, using response from next(), - * returning an observable that emits the cached response first. - * - * If not in cache or not cachable, - * pass request through to next() - */ -// #docregion v1 -@Injectable() -export class CachingInterceptor implements HttpInterceptor { - constructor(private cache: RequestCache) {} - - intercept(req: HttpRequest, next: HttpHandler) { - // continue if not cachable. - if (!isCachable(req)) { return next.handle(req); } - - const cachedResponse = this.cache.get(req); - // #enddocregion v1 - // #docregion intercept-refresh - // cache-then-refresh - if (req.headers.get('x-refresh')) { - const results$ = sendRequest(req, next, this.cache); - return cachedResponse ? - results$.pipe( startWith(cachedResponse) ) : - results$; - } - // cache-or-fetch - // #docregion v1 - return cachedResponse ? - of(cachedResponse) : sendRequest(req, next, this.cache); - // #enddocregion intercept-refresh - } -} -// #enddocregion v1 - - -/** Is this request cachable? */ -function isCachable(req: HttpRequest) { - // Only GET requests are cachable - return req.method === 'GET' && - // Only npm package search is cachable in this app - -1 < req.url.indexOf(searchUrl); -} - -// #docregion send-request -/** - * Get server response observable by sending request to `next()`. - * Will add the response to the cache on the way out. - */ -function sendRequest( - req: HttpRequest, - next: HttpHandler, - cache: RequestCache): Observable> { - - // No headers allowed in npm search request - const noHeaderReq = req.clone({ headers: new HttpHeaders() }); - - return next.handle(noHeaderReq).pipe( - tap(event => { - // There may be other events besides the response. - if (event instanceof HttpResponse) { - cache.put(req, event); // Update the cache. - } - }) - ); -} -// #enddocregion send-request - diff --git a/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts deleted file mode 100644 index ad6c9f6281..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, HttpRequest -} from '@angular/common/http'; - -import { Observable } from 'rxjs'; - -@Injectable() -export class EnsureHttpsInterceptor implements HttpInterceptor { - intercept(req: HttpRequest, next: HttpHandler): Observable> { - // #docregion excerpt - // clone request and replace 'http://' with 'https://' at the same time - const secureReq = req.clone({ - url: req.url.replace('http://', 'https://') - }); - // send the cloned, "secure" request to the next handler. - return next.handle(secureReq); - // #enddocregion excerpt - } -} diff --git a/docs_app/content/examples/http/src/app/http-interceptors/index.ts b/docs_app/content/examples/http/src/app/http-interceptors/index.ts deleted file mode 100644 index a44f18f5f9..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion interceptor-providers -/* "Barrel" of Http Interceptors */ -import { HTTP_INTERCEPTORS } from '@angular/common/http'; - -// #enddocregion interceptor-providers -import { AuthInterceptor } from './auth-interceptor'; -import { CachingInterceptor } from './caching-interceptor'; -import { EnsureHttpsInterceptor } from './ensure-https-interceptor'; -import { LoggingInterceptor } from './logging-interceptor'; -// #docregion interceptor-providers -import { NoopInterceptor } from './noop-interceptor'; -// #enddocregion interceptor-providers -import { TrimNameInterceptor } from './trim-name-interceptor'; -import { UploadInterceptor } from './upload-interceptor'; - -// #docregion interceptor-providers - -/** Http interceptor providers in outside-in order */ -export const httpInterceptorProviders = [ - // #docregion noop-provider - { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true }, - // #enddocregion noop-provider, interceptor-providers - - { provide: HTTP_INTERCEPTORS, useClass: EnsureHttpsInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: TrimNameInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: UploadInterceptor, multi: true }, - { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true }, - - // #docregion interceptor-providers -]; -// #enddocregion interceptor-providers diff --git a/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts deleted file mode 100644 index d5fc1bb65c..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, - HttpRequest, HttpResponse -} from '@angular/common/http'; - -// #docregion excerpt -import { finalize, tap } from 'rxjs/operators'; -import { MessageService } from '../message.service'; - -@Injectable() -export class LoggingInterceptor implements HttpInterceptor { - constructor(private messenger: MessageService) {} - - intercept(req: HttpRequest, next: HttpHandler) { - const started = Date.now(); - let ok: string; - - // extend server response observable with logging - return next.handle(req) - .pipe( - tap( - // Succeeds when there is a response; ignore other events - event => ok = event instanceof HttpResponse ? 'succeeded' : '', - // Operation failed; error is an HttpErrorResponse - error => ok = 'failed' - ), - // Log when response observable either completes or errors - finalize(() => { - const elapsed = Date.now() - started; - const msg = `${req.method} "${req.urlWithParams}" - ${ok} in ${elapsed} ms.`; - this.messenger.add(msg); - }) - ); - } -} -// #enddocregion excerpt diff --git a/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts deleted file mode 100644 index 51d4020804..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, HttpRequest -} from '@angular/common/http'; - -import { Observable } from 'rxjs'; - -/** Pass untouched request through to the next request handler. */ -@Injectable() -export class NoopInterceptor implements HttpInterceptor { - - intercept(req: HttpRequest, next: HttpHandler): - Observable> { - return next.handle(req); - } -} diff --git a/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts deleted file mode 100644 index 23858ebdd2..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, HttpRequest -} from '@angular/common/http'; - -import { Observable } from 'rxjs'; - -@Injectable() -export class TrimNameInterceptor implements HttpInterceptor { - intercept(req: HttpRequest, next: HttpHandler): Observable> { - const body = req.body; - if (!body || !body.name ) { - return next.handle(req); - } - // #docregion excerpt - // copy the body and trim whitespace from the name property - const newBody = { ...body, name: body.name.trim() }; - // clone request and set its body - const newReq = req.clone({ body: newBody }); - // send the cloned request to the next handler. - return next.handle(newReq); - // #enddocregion excerpt - } -} diff --git a/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts deleted file mode 100644 index 6acb5d0cdb..0000000000 --- a/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpEvent, HttpInterceptor, HttpHandler, - HttpRequest, HttpResponse, - HttpEventType, HttpProgressEvent -} from '@angular/common/http'; - -import { Observable } from 'rxjs'; - -/** Simulate server replying to file upload request */ -@Injectable() -export class UploadInterceptor implements HttpInterceptor { - intercept(req: HttpRequest, next: HttpHandler): Observable> { - if (req.url.indexOf('/upload/file') === -1) { - return next.handle(req); - } - const delay = 300; // Todo: inject delay? - return createUploadEvents(delay); - } -} - -/** Create simulation of upload event stream */ -function createUploadEvents(delay: number) { - // Simulate XHR behavior which would provide this information in a ProgressEvent - const chunks = 5; - const total = 12345678; - const chunkSize = Math.ceil(total / chunks); - - return new Observable>(observer => { - // notify the event stream that the request was sent. - observer.next({type: HttpEventType.Sent}); - - uploadLoop(0); - - function uploadLoop(loaded: number) { - // N.B.: Cannot use setInterval or rxjs delay (which uses setInterval) - // because e2e test won't complete. A zone thing? - // Use setTimeout and tail recursion instead. - setTimeout(() => { - loaded += chunkSize; - - if (loaded >= total) { - const doneResponse = new HttpResponse({ - status: 201, // OK but no body; - }); - observer.next(doneResponse); - observer.complete(); - return; - } - - const progressEvent: HttpProgressEvent = { - type: HttpEventType.UploadProgress, - loaded, - total - }; - observer.next(progressEvent); - uploadLoop(loaded); - }, delay); - } - }); -} diff --git a/docs_app/content/examples/http/src/app/in-memory-data.service.ts b/docs_app/content/examples/http/src/app/in-memory-data.service.ts deleted file mode 100644 index 606e77f8f5..0000000000 --- a/docs_app/content/examples/http/src/app/in-memory-data.service.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { InMemoryDbService } from 'angular-in-memory-web-api'; - -export class InMemoryDataService implements InMemoryDbService { - createDb() { - const heroes = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - ]; - return {heroes}; - } -} diff --git a/docs_app/content/examples/http/src/app/message.service.ts b/docs_app/content/examples/http/src/app/message.service.ts deleted file mode 100644 index 1c56a49e70..0000000000 --- a/docs_app/content/examples/http/src/app/message.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class MessageService { - messages: string[] = []; - - add(message: string) { - this.messages.push(message); - } - - clear() { - this.messages = []; - } -} diff --git a/docs_app/content/examples/http/src/app/messages/messages.component.html b/docs_app/content/examples/http/src/app/messages/messages.component.html deleted file mode 100644 index d17b895692..0000000000 --- a/docs_app/content/examples/http/src/app/messages/messages.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
    -

    Messages

    - -
    -
      -
    1. {{message}}
      2. -
    -
    diff --git a/docs_app/content/examples/http/src/app/messages/messages.component.ts b/docs_app/content/examples/http/src/app/messages/messages.component.ts deleted file mode 100644 index d54a121665..0000000000 --- a/docs_app/content/examples/http/src/app/messages/messages.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-messages', - templateUrl: './messages.component.html' -}) -export class MessagesComponent { - constructor(public messageService: MessageService) {} -} diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.component.html b/docs_app/content/examples/http/src/app/package-search/package-search.component.html deleted file mode 100644 index b1bd56d561..0000000000 --- a/docs_app/content/examples/http/src/app/package-search/package-search.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -

    Search Npm Packages

    -

    Searches when typing stops. Caches for 30 seconds.

    - - - - - - - -
      -
    • - {{package.name}} v.{{package.version}} - - {{package.description}} -
      • -
    - diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.component.ts b/docs_app/content/examples/http/src/app/package-search/package-search.component.ts deleted file mode 100644 index f020da50c2..0000000000 --- a/docs_app/content/examples/http/src/app/package-search/package-search.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Observable, Subject } from 'rxjs'; -import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; - -import { NpmPackageInfo, PackageSearchService } from './package-search.service'; - -@Component({ - selector: 'app-package-search', - templateUrl: './package-search.component.html', - providers: [ PackageSearchService ] -}) -export class PackageSearchComponent implements OnInit { - // #docregion debounce - withRefresh = false; - packages$: Observable; - private searchText$ = new Subject(); - - search(packageName: string) { - this.searchText$.next(packageName); - } - - ngOnInit() { - this.packages$ = this.searchText$.pipe( - debounceTime(500), - distinctUntilChanged(), - switchMap(packageName => - this.searchService.search(packageName, this.withRefresh)) - ); - } - - constructor(private searchService: PackageSearchService) { } - - // #enddocregion debounce - - toggleRefresh() { this.withRefresh = ! this.withRefresh; } - -} diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.service.ts b/docs_app/content/examples/http/src/app/package-search/package-search.service.ts deleted file mode 100644 index b026e03e06..0000000000 --- a/docs_app/content/examples/http/src/app/package-search/package-search.service.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; - -import { Observable, of } from 'rxjs'; -import { catchError, map } from 'rxjs/operators'; - -import { HttpErrorHandler, HandleError } from '../http-error-handler.service'; - -export interface NpmPackageInfo { - name: string; - version: string; - description: string; -} - -export const searchUrl = 'https://npmsearch.com/query'; - -const httpOptions = { - headers: new HttpHeaders({ - 'x-refresh': 'true' - }) -}; - -function createHttpOptions(packageName: string, refresh = false) { - // npm package name search api - // e.g., http://npmsearch.com/query?q=dom' - const params = new HttpParams({ fromObject: { q: packageName } }); - const headerMap = refresh ? {'x-refresh': 'true'} : {}; - const headers = new HttpHeaders(headerMap) ; - return { headers, params }; -} - -@Injectable() -export class PackageSearchService { - private handleError: HandleError; - - constructor( - private http: HttpClient, - httpErrorHandler: HttpErrorHandler) { - this.handleError = httpErrorHandler.createHandleError('HeroesService'); - } - - search (packageName: string, refresh = false): Observable { - // clear if no pkg name - if (!packageName.trim()) { return of([]); } - - const options = createHttpOptions(packageName, refresh); - - // TODO: Add error handling - return this.http.get(searchUrl, options).pipe( - map((data: any) => { - return data.results.map(entry => ({ - name: entry.name[0], - version: entry.version[0], - description: entry.description[0] - } as NpmPackageInfo ) - ); - }), - catchError(this.handleError('search', [])) - ); - } -} diff --git a/docs_app/content/examples/http/src/app/request-cache.service.ts b/docs_app/content/examples/http/src/app/request-cache.service.ts deleted file mode 100644 index a055a74d75..0000000000 --- a/docs_app/content/examples/http/src/app/request-cache.service.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpRequest, HttpResponse } from '@angular/common/http'; - -import { MessageService } from './message.service'; - -export interface RequestCacheEntry { - url: string; - response: HttpResponse; - lastRead: number; -} - -// #docregion request-cache -export abstract class RequestCache { - abstract get(req: HttpRequest): HttpResponse | undefined; - abstract put(req: HttpRequest, response: HttpResponse): void -} -// #enddocregion request-cache - -const maxAge = 30000; // maximum cache age (ms) - -@Injectable() -export class RequestCacheWithMap implements RequestCache { - - cache = new Map(); - - constructor(private messenger: MessageService) { } - - get(req: HttpRequest): HttpResponse | undefined { - const url = req.urlWithParams; - const cached = this.cache.get(url); - - if (!cached) { - return undefined; - } - - const isExpired = cached.lastRead < (Date.now() - maxAge); - const expired = isExpired ? 'expired ' : ''; - this.messenger.add( - `Found ${expired}cached response for "${url}".`); - return isExpired ? undefined : cached.response; - } - - put(req: HttpRequest, response: HttpResponse): void { - const url = req.urlWithParams; - this.messenger.add(`Caching response from "${url}".`); - - const entry = { url, response, lastRead: Date.now() }; - this.cache.set(url, entry); - - // remove expired cache entries - const expired = Date.now() - maxAge; - this.cache.forEach(entry => { - if (entry.lastRead < expired) { - this.cache.delete(entry.url); - } - }); - - this.messenger.add(`Request cache size: ${this.cache.size}.`); - } -} diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.component.html b/docs_app/content/examples/http/src/app/uploader/uploader.component.html deleted file mode 100644 index 2f477ef110..0000000000 --- a/docs_app/content/examples/http/src/app/uploader/uploader.component.html +++ /dev/null @@ -1,12 +0,0 @@ -

    Upload file

    -
    -
    - -
    - -
    -
    -

    {{message}}

    -
    diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.component.ts b/docs_app/content/examples/http/src/app/uploader/uploader.component.ts deleted file mode 100644 index f4d2427813..0000000000 --- a/docs_app/content/examples/http/src/app/uploader/uploader.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from '@angular/core'; -import { UploaderService } from './uploader.service'; - -@Component({ - selector: 'app-uploader', - templateUrl: './uploader.component.html', - providers: [ UploaderService ] -}) -export class UploaderComponent { - message: string; - - constructor(private uploaderService: UploaderService) {} - - onPicked(input: HTMLInputElement) { - const file = input.files[0]; - if (file) { - this.uploaderService.upload(file).subscribe( - msg => { - input.value = null; - this.message = msg; - } - ); - } - } -} diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.service.ts b/docs_app/content/examples/http/src/app/uploader/uploader.service.ts deleted file mode 100644 index 8bc659f26f..0000000000 --- a/docs_app/content/examples/http/src/app/uploader/uploader.service.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - HttpClient, HttpEvent, HttpEventType, HttpProgressEvent, - HttpRequest, HttpResponse, HttpErrorResponse -} from '@angular/common/http'; - -import { of } from 'rxjs'; -import { catchError, last, map, tap } from 'rxjs/operators'; - -import { MessageService } from '../message.service'; - -@Injectable() -export class UploaderService { - constructor( - private http: HttpClient, - private messenger: MessageService) {} - - // If uploading multiple files, change to: - // upload(files: FileList) { - // const formData = new FormData(); - // files.forEach(f => formData.append(f.name, f)); - // new HttpRequest('POST', '/upload/file', formData, {reportProgress: true}); - // ... - // } - - upload(file: File) { - if (!file) { return; } - - // COULD HAVE WRITTEN: - // return this.http.post('/upload/file', file, { - // reportProgress: true, - // observe: 'events' - // }).pipe( - - // Create the request object that POSTs the file to an upload endpoint. - // The `reportProgress` option tells HttpClient to listen and return - // XHR progress events. - // #docregion upload-request - const req = new HttpRequest('POST', '/upload/file', file, { - reportProgress: true - }); - // #enddocregion upload-request - - // #docregion upload-body - // The `HttpClient.request` API produces a raw event stream - // which includes start (sent), progress, and response events. - return this.http.request(req).pipe( - map(event => this.getEventMessage(event, file)), - tap(message => this.showProgress(message)), - last(), // return last (completed) message to caller - catchError(this.handleError(file)) - ); - // #enddocregion upload-body - } - - // #docregion getEventMessage - /** Return distinct message for sent, upload progress, & response events */ - private getEventMessage(event: HttpEvent, file: File) { - switch (event.type) { - case HttpEventType.Sent: - return `Uploading file "${file.name}" of size ${file.size}.`; - - case HttpEventType.UploadProgress: - // Compute and show the % done: - const percentDone = Math.round(100 * event.loaded / event.total); - return `File "${file.name}" is ${percentDone}% uploaded.`; - - case HttpEventType.Response: - return `File "${file.name}" was completely uploaded!`; - - default: - return `File "${file.name}" surprising upload event: ${event.type}.`; - } - } - // #enddocregion getEventMessage - - /** - * Returns a function that handles Http upload failures. - * @param file - File object for file being uploaded - * - * When no `UploadInterceptor` and no server, - * you'll end up here in the error handler. - */ - private handleError(file: File) { - const userMessage = `${file.name} upload failed.`; - - return (error: HttpErrorResponse) => { - // TODO: send the error to remote logging infrastructure - console.error(error); // log to console instead - - const message = (error.error instanceof Error) ? - error.error.message : - `server returned code ${error.status} with body "${error.error}"`; - - this.messenger.add(`${userMessage} ${message}`); - - // Let app keep running but indicate failure. - return of(userMessage); - }; - } - - private showProgress(message: string) { - this.messenger.add(message); - } -} diff --git a/docs_app/content/examples/http/src/assets/config.json b/docs_app/content/examples/http/src/assets/config.json deleted file mode 100644 index a6f2505140..0000000000 --- a/docs_app/content/examples/http/src/assets/config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "heroesUrl": "api/heroes", - "textfile": "assets/textfile.txt" -} diff --git a/docs_app/content/examples/http/src/assets/textfile.txt b/docs_app/content/examples/http/src/assets/textfile.txt deleted file mode 100644 index 282575a15a..0000000000 --- a/docs_app/content/examples/http/src/assets/textfile.txt +++ /dev/null @@ -1 +0,0 @@ -This is the downloaded text file diff --git a/docs_app/content/examples/http/src/index-specs.html b/docs_app/content/examples/http/src/index-specs.html deleted file mode 100644 index 26286a5083..0000000000 --- a/docs_app/content/examples/http/src/index-specs.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/docs_app/content/examples/http/src/index.html b/docs_app/content/examples/http/src/index.html deleted file mode 100644 index 5e56060366..0000000000 --- a/docs_app/content/examples/http/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - HttpClient Demo - - - - - - - - - diff --git a/docs_app/content/examples/http/src/main-specs.ts b/docs_app/content/examples/http/src/main-specs.ts deleted file mode 100644 index c54ce8da2e..0000000000 --- a/docs_app/content/examples/http/src/main-specs.ts +++ /dev/null @@ -1,44 +0,0 @@ -import './testing/global-jasmine'; -import 'jasmine-core/lib/jasmine-core/jasmine-html.js'; -import 'jasmine-core/lib/jasmine-core/boot.js'; - -declare var jasmine; - -import './polyfills'; - -import 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; -import 'zone.js/dist/long-stack-trace-zone'; -import 'zone.js/dist/proxy.js'; -import 'zone.js/dist/sync-test'; -import 'zone.js/dist/jasmine-patch'; - -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -// Import spec files individually for Stackblitz -import './app/heroes/heroes.service.spec.ts'; -import './testing/http-client.spec.ts'; - -// -bootstrap(); - -// -function bootstrap () { - if (window['jasmineRef']) { - location.reload(); - return; - } else { - window.onload(undefined); - window['jasmineRef'] = jasmine.getEnv(); - } - - // First, initialize the Angular testing environment. - getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() - ); -} diff --git a/docs_app/content/examples/http/src/main.ts b/docs_app/content/examples/http/src/main.ts deleted file mode 100644 index 6b6532d428..0000000000 --- a/docs_app/content/examples/http/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/http/src/test.css b/docs_app/content/examples/http/src/test.css deleted file mode 100644 index 6010a5d9ba..0000000000 --- a/docs_app/content/examples/http/src/test.css +++ /dev/null @@ -1 +0,0 @@ -@import "~jasmine-core/lib/jasmine-core/jasmine.css" diff --git a/docs_app/content/examples/http/src/testing/global-jasmine.ts b/docs_app/content/examples/http/src/testing/global-jasmine.ts deleted file mode 100644 index 560ff97d66..0000000000 --- a/docs_app/content/examples/http/src/testing/global-jasmine.ts +++ /dev/null @@ -1,3 +0,0 @@ -import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js'; - -window['jasmineRequire'] = jasmineRequire; diff --git a/docs_app/content/examples/http/src/testing/http-client.spec.ts b/docs_app/content/examples/http/src/testing/http-client.spec.ts deleted file mode 100644 index 2c5b5ffd46..0000000000 --- a/docs_app/content/examples/http/src/testing/http-client.spec.ts +++ /dev/null @@ -1,192 +0,0 @@ -// #docplaster -// #docregion imports -// Http testing module and mocking controller -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -// Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; - -// #enddocregion imports -import { HttpHeaders } from '@angular/common/http'; - -interface Data { - name: string; -} - -const testUrl = '/data'; - -// #docregion setup -describe('HttpClient testing', () => { - let httpClient: HttpClient; - let httpTestingController: HttpTestingController; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ HttpClientTestingModule ] - }); - - // Inject the http service and test controller for each test - httpClient = TestBed.get(HttpClient); - httpTestingController = TestBed.get(HttpTestingController); - }); - // #enddocregion setup - // #docregion afterEach - afterEach(() => { - // After every test, assert that there are no more pending requests. - httpTestingController.verify(); - }); - // #enddocregion afterEach - // #docregion setup - /// Tests begin /// - // #enddocregion setup - // #docregion get-test - it('can test HttpClient.get', () => { - const testData: Data = {name: 'Test Data'}; - - // Make an HTTP GET request - httpClient.get(testUrl) - .subscribe(data => - // When observable resolves, result should match test data - expect(data).toEqual(testData) - ); - - // The following `expectOne()` will match the request's URL. - // If no requests or multiple requests matched that URL - // `expectOne()` would throw. - const req = httpTestingController.expectOne('/data'); - - // Assert that the request is a GET. - expect(req.request.method).toEqual('GET'); - - // Respond with mock data, causing Observable to resolve. - // Subscribe callback asserts that correct data was returned. - req.flush(testData); - - // Finally, assert that there are no outstanding requests. - httpTestingController.verify(); - }); - // #enddocregion get-test - it('can test HttpClient.get with matching header', () => { - const testData: Data = {name: 'Test Data'}; - - // Make an HTTP GET request with specific header - httpClient.get(testUrl, { - headers: new HttpHeaders({'Authorization': 'my-auth-token'}) - }) - .subscribe(data => - expect(data).toEqual(testData) - ); - - // Find request with a predicate function. - // #docregion predicate - // Expect one request with an authorization header - const req = httpTestingController.expectOne( - req => req.headers.has('Authorization') - ); - // #enddocregion predicate - req.flush(testData); - }); - - it('can test multiple requests', () => { - let testData: Data[] = [ - { name: 'bob' }, { name: 'carol' }, - { name: 'ted' }, { name: 'alice' } - ]; - - // Make three requests in a row - httpClient.get(testUrl) - .subscribe(d => expect(d.length).toEqual(0, 'should have no data')); - - httpClient.get(testUrl) - .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array')); - - httpClient.get(testUrl) - .subscribe(d => expect(d).toEqual(testData, 'should be expected data')); - - // #docregion multi-request - // get all pending requests that match the given URL - const requests = httpTestingController.match(testUrl); - expect(requests.length).toEqual(3); - - // Respond to each request with different results - requests[0].flush([]); - requests[1].flush([testData[0]]); - requests[2].flush(testData); - // #enddocregion multi-request - }); - - // #docregion 404 - it('can test for 404 error', () => { - const emsg = 'deliberate 404 error'; - - httpClient.get(testUrl).subscribe( - data => fail('should have failed with the 404 error'), - (error: HttpErrorResponse) => { - expect(error.status).toEqual(404, 'status'); - expect(error.error).toEqual(emsg, 'message'); - } - ); - - const req = httpTestingController.expectOne(testUrl); - - // Respond with mock error - req.flush(emsg, { status: 404, statusText: 'Not Found' }); - }); - // #enddocregion 404 - - // #docregion network-error - it('can test for network error', () => { - const emsg = 'simulated network error'; - - httpClient.get(testUrl).subscribe( - data => fail('should have failed with the network error'), - (error: HttpErrorResponse) => { - expect(error.error.message).toEqual(emsg, 'message'); - } - ); - - const req = httpTestingController.expectOne(testUrl); - - // Create mock ErrorEvent, raised when something goes wrong at the network level. - // Connection timeout, DNS error, offline, etc - const errorEvent = new ErrorEvent('so sad', { - message: emsg, - // #enddocregion network-error - // The rest of this is optional and not used. - // Just showing that you could provide this too. - filename: 'HeroService.ts', - lineno: 42, - colno: 21 - // #docregion network-error - }); - - // Respond with mock error - req.error(errorEvent); - }); - // #enddocregion network-error - - it('httpTestingController.verify should fail if HTTP response not simulated', () => { - // Sends request - httpClient.get('some/api').subscribe(); - - // verify() should fail because haven't handled the pending request. - expect(() => httpTestingController.verify()).toThrow(); - - // Now get and flush the request so that afterEach() doesn't fail - const req = httpTestingController.expectOne('some/api'); - req.flush(null); - }); - - // Proves that verify in afterEach() really would catch error - // if test doesn't simulate the HTTP response. - // - // Must disable this test because can't catch an error in an afterEach(). - // Uncomment if you want to confirm that afterEach() does the job. - // it('afterEach() should fail when HTTP response not simulated',() => { - // // Sends request which is never handled by this test - // httpClient.get('some/api').subscribe(); - // }); -// #docregion setup -}); -// #enddocregion setup diff --git a/docs_app/content/examples/http/stackblitz.json b/docs_app/content/examples/http/stackblitz.json deleted file mode 100644 index 6ef625c1a0..0000000000 --- a/docs_app/content/examples/http/stackblitz.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "description": "Http", - "files":[ - "!**/*.d.ts", - "!**/*.js", - - "!src/testing/*.*", - "!src/index-specs.html" - ], - "tags": ["http"] -} diff --git a/docs_app/content/examples/i18n/doc-files/app.component.html b/docs_app/content/examples/i18n/doc-files/app.component.html deleted file mode 100644 index 98daded79e..0000000000 --- a/docs_app/content/examples/i18n/doc-files/app.component.html +++ /dev/null @@ -1,31 +0,0 @@ - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - -

    Hello i18n!

    - - - - - diff --git a/docs_app/content/examples/i18n/doc-files/app.locale_data.ts b/docs_app/content/examples/i18n/doc-files/app.locale_data.ts deleted file mode 100644 index 05c83be034..0000000000 --- a/docs_app/content/examples/i18n/doc-files/app.locale_data.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion import-locale -import { registerLocaleData } from '@angular/common'; -import localeFr from '@angular/common/locales/fr'; - -// the second parameter 'fr' is optional -registerLocaleData(localeFr, 'fr'); -// #enddocregion import-locale diff --git a/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts b/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts deleted file mode 100644 index 05b7b80d53..0000000000 --- a/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion import-locale-extra -import { registerLocaleData } from '@angular/common'; -import localeFr from '@angular/common/locales/fr'; -import localeFrExtra from '@angular/common/locales/extra/fr'; - -registerLocaleData(localeFr, 'fr-FR', localeFrExtra); -// #enddocregion import-locale-extra diff --git a/docs_app/content/examples/i18n/doc-files/app.module.ts b/docs_app/content/examples/i18n/doc-files/app.module.ts deleted file mode 100644 index 0f5d2d7e9f..0000000000 --- a/docs_app/content/examples/i18n/doc-files/app.module.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { LOCALE_ID, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from '../src/app/app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - providers: [ { provide: LOCALE_ID, useValue: 'fr' } ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/i18n/doc-files/main.1.ts b/docs_app/content/examples/i18n/doc-files/main.1.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/i18n/doc-files/main.1.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/i18n/doc-files/main.2.ts b/docs_app/content/examples/i18n/doc-files/main.2.ts deleted file mode 100644 index 0b68bc10fe..0000000000 --- a/docs_app/content/examples/i18n/doc-files/main.2.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -// use the require method provided by webpack -declare const require; -// we use the webpack raw-loader to return the content as a string -const translations = require(`raw-loader!./locale/messages.fr.xlf`); - -platformBrowserDynamic().bootstrapModule(AppModule, { - providers: [ - {provide: TRANSLATIONS, useValue: translations}, - {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'} - ] -}); diff --git a/docs_app/content/examples/i18n/doc-files/main.3.ts b/docs_app/content/examples/i18n/doc-files/main.3.ts deleted file mode 100644 index dc5f919e1f..0000000000 --- a/docs_app/content/examples/i18n/doc-files/main.3.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { MissingTranslationStrategy } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -// ... - -platformBrowserDynamic().bootstrapModule(AppModule, { - missingTranslation: MissingTranslationStrategy.Error, - providers: [ - // ... - ] -}); diff --git a/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html b/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html deleted file mode 100644 index 03635103b7..0000000000 --- a/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - Hello i18n! - An introduction header for this sample - User welcome - - - - - - - Hello i18n! - Bonjour i18n ! - An introduction header for this sample - User welcome - - - - - - - I don't output any element - Je n'affiche aucun élément - - - Angular logo - Logo d'Angular - - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} } - {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes} } - - - - - - - The author is - L'auteur est - - - - - {VAR_SELECT, select, male {male} female {female} other {other} } - {VAR_SELECT, select, male {un homme} female {une femme} other {autre} } - - - - - - - Updated: - Mis à jour: - - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} } - {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} } - - - - - - - diff --git a/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts b/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts deleted file mode 100644 index ebafb55f96..0000000000 --- a/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { browser, element, by } from 'protractor'; - -describe('i18n E2E Tests', () => { - - beforeEach(function () { - browser.get(''); - }); - - it('should display i18n translated welcome: Bonjour !', function () { - expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !'); - }); - - it('should display the node texts without elements', function () { - expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`); - }); - - it('should display the translated title attribute', function () { - const title = element(by.css('img')).getAttribute('title'); - expect(title).toBe(`Logo d'Angular`); - }); - - it('should display the ICU plural expression', function () { - expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`); - }); - - it('should display the ICU select expression', function () { - const selectIcuExp = element.all(by.css('span')).get(1); - expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`); - element.all(by.css('button')).get(2).click(); - expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`); - }); - - it('should display the nested expression', function() { - const nestedExp = element.all(by.css('span')).get(2); - const incBtn = element.all(by.css('button')).get(0); - expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`); - incBtn.click(); - expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`); - incBtn.click(); - incBtn.click(); - element.all(by.css('button')).get(4).click(); - expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`); - }); - -}); diff --git a/docs_app/content/examples/i18n/example-config.json b/docs_app/content/examples/i18n/example-config.json deleted file mode 100644 index 1188a704a3..0000000000 --- a/docs_app/content/examples/i18n/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "projectType": "i18n" -} diff --git a/docs_app/content/examples/i18n/src/app/app.component.html b/docs_app/content/examples/i18n/src/app/app.component.html deleted file mode 100644 index b9512dfc00..0000000000 --- a/docs_app/content/examples/i18n/src/app/app.component.html +++ /dev/null @@ -1,35 +0,0 @@ - - -

    - Hello i18n! -

    - - - -I don't output any element - - -
    - - - - -
    - - -Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}} - -({{minutes}}) -

    - - -The author is {gender, select, male {male} female {female} other {other}} - -

    - -Updated: {minutes, plural, - =0 {just now} - =1 {one minute ago} - other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}} - - diff --git a/docs_app/content/examples/i18n/src/app/app.component.ts b/docs_app/content/examples/i18n/src/app/app.component.ts deleted file mode 100644 index d8e79acf50..0000000000 --- a/docs_app/content/examples/i18n/src/app/app.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { - minutes = 0; - gender = 'female'; - fly = true; - logo = 'https://angular.io/assets/images/logos/angular/angular.png'; - heroes: string[] = ['Magneta', 'Celeritas', 'Dynama']; - inc(i: number) { - this.minutes = Math.min(5, Math.max(0, this.minutes + i)); - } - male() { this.gender = 'male'; } - female() { this.gender = 'female'; } - other() { this.gender = 'other'; } -} - diff --git a/docs_app/content/examples/i18n/src/app/app.module.ts b/docs_app/content/examples/i18n/src/app/app.module.ts deleted file mode 100644 index 530cd295e7..0000000000 --- a/docs_app/content/examples/i18n/src/app/app.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/i18n/src/index.html b/docs_app/content/examples/i18n/src/index.html deleted file mode 100644 index 6b26810c50..0000000000 --- a/docs_app/content/examples/i18n/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Angular i18n example - - - - - Loading... - - - diff --git a/docs_app/content/examples/i18n/src/locale/messages.fr.xlf b/docs_app/content/examples/i18n/src/locale/messages.fr.xlf deleted file mode 100644 index 464488a8c1..0000000000 --- a/docs_app/content/examples/i18n/src/locale/messages.fr.xlf +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - Hello i18n! - - - Bonjour i18n ! - - - app\app.component.ts - 4 - - An introduction header for this sample - User welcome - - - I don't output any element - Je n'affiche aucun élément - - app\app.component.ts - 10 - - - - Angular logo - Logo d'Angular - - app\app.component.ts - 16 - - - - Updated - Mis à jour - - app\app.component.ts - 21 - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} } - {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes} } - - app\app.component.ts - 21 - - - - The author is - L'auteur est - - app\app.component.ts - 27 - - - - {VAR_SELECT, select, male {male} female {female} other {other} } - {VAR_SELECT, select, male {un homme} female {une femme} other {autre} } - - app\app.component.ts - 27 - - - - Updated: - - Mis à jour: - - - app\app.component.ts - 31 - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} } - {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} } - - app\app.component.ts - 31 - - - - - diff --git a/docs_app/content/examples/i18n/src/locale/messages.xlf b/docs_app/content/examples/i18n/src/locale/messages.xlf deleted file mode 100644 index c4e45e5b87..0000000000 --- a/docs_app/content/examples/i18n/src/locale/messages.xlf +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - Hello i18n! - - - app/app.component.ts - 3 - - An introduction header for this sample - User welcome - - - I don't output any element - - app/app.component.ts - 9 - - - - Angular logo - - app/app.component.ts - 15 - - - - Updated - - app/app.component.ts - 20 - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} } - - app/app.component.ts - 20 - - - - The author is - - app/app.component.ts - 26 - - - - {VAR_SELECT, select, male {male} female {female} other {other} } - - app/app.component.ts - 26 - - - - Updated: - - - app/app.component.ts - 30 - - - - {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} } - - app/app.component.ts - 30 - - - - - diff --git a/docs_app/content/examples/i18n/src/main.ts b/docs_app/content/examples/i18n/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/i18n/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/i18n/zipper.json b/docs_app/content/examples/i18n/zipper.json deleted file mode 100644 index 7f9c0a43cc..0000000000 --- a/docs_app/content/examples/i18n/zipper.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "files":[ - "!dist/", - "!**/*.d.ts", - "!src/**/*.js", - "!doc-files/**/*", - "**/*.xlf" - ], - "removeSystemJsConfig": true, - "type": "i18n" -} diff --git a/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts deleted file mode 100644 index 121d100ccb..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; - - -describe('providers App', () => { - let page: AppPage; - const buttons = element.all(by.css('button')); - const customersButton = buttons.get(0); - const ordersButton = buttons.get(1); - const homeButton = buttons.get(2); - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('Lazy loading feature modules'); - }); - - describe('Customers list', function() { - beforeEach(function() { - customersButton.click(); - }); - - it('should show customers list when the button is clicked', function() { - let customersMessage = element(by.css('app-customer-list > p')); - expect(customersMessage.getText()).toBe('customer-list works!'); - }); - - }); - - describe('Orders list', function() { - beforeEach(function() { - ordersButton.click(); - }); - - it('should show orders list when the button is clicked', function() { - let ordersMessage = element(by.css('app-order-list > p')); - expect(ordersMessage.getText()).toBe('order-list works!'); - }); - - }); - -}); - - diff --git a/docs_app/content/examples/lazy-loading-ngmodules/example-config.json b/docs_app/content/examples/lazy-loading-ngmodules/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts deleted file mode 100644 index dc2f71be29..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docplaster -// #docregion app-routing-module -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - - -// #docregion const-routes -const routes: Routes = [ - { - path: 'customers', - loadChildren: 'app/customers/customers.module#CustomersModule' - }, - { - path: 'orders', - loadChildren: 'app/orders/orders.module#OrdersModule' - }, - { - path: '', - redirectTo: '', - pathMatch: 'full' - } -]; -// #enddocregion const-routes - -@NgModule({ - imports: [ - RouterModule.forRoot(routes) - ], - exports: [RouterModule], - providers: [] -}) -export class AppRoutingModule { } -// #enddocregion app-routing-module diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html deleted file mode 100644 index 329739edf6..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - -

    - {{title}} -

    - - - - - - - - diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts deleted file mode 100644 index 41967875b6..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }); - TestBed.compileComponents(); - }); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts deleted file mode 100644 index 665b2ef095..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Lazy loading feature modules'; -} diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts deleted file mode 100644 index fa3ee4def3..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; -import { AppRoutingModule } from './app-routing.module'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule, - AppRoutingModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html deleted file mode 100644 index 125b263925..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    - customer-list works! -

    diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts deleted file mode 100644 index c34e342ba0..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CustomerListComponent } from './customer-list.component'; - -describe('CustomerListComponent', () => { - let component: CustomerListComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CustomerListComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CustomerListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts deleted file mode 100644 index e3b118ff80..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-customer-list', - templateUrl: './customer-list.component.html', - styleUrls: ['./customer-list.component.css'] -}) -export class CustomerListComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts deleted file mode 100644 index 2c7e16b4f4..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docplaster -// #docregion customers-routing-module -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { CustomerListComponent } from './customer-list/customer-list.component'; - - -const routes: Routes = [ - { - path: '', - component: CustomerListComponent - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class CustomersRoutingModule { } -// #enddocregion customers-routing-module diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts deleted file mode 100644 index db6909da9b..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docplaster -// #docregion customers-module -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { CustomersRoutingModule } from './customers-routing.module'; -import { CustomerListComponent } from './customer-list/customer-list.component'; - -@NgModule({ - imports: [ - CommonModule, - CustomersRoutingModule - ], - declarations: [CustomerListComponent] -}) -export class CustomersModule { } -// #enddocregion customers-module diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html deleted file mode 100644 index ec99b36fea..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    - order-list works! -

    diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts deleted file mode 100644 index 2688bcf420..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OrderListComponent } from './order-list.component'; - -describe('OrderListComponent', () => { - let component: OrderListComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ OrderListComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(OrderListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts deleted file mode 100644 index 33b31ce8cc..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-order-list', - templateUrl: './order-list.component.html', - styleUrls: ['./order-list.component.css'] -}) -export class OrderListComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts deleted file mode 100644 index 4ebb23615f..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docplaster -// #docregion orders-routing-module -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -// #docregion orders-routing-module-detail -import { OrderListComponent } from './order-list/order-list.component'; - -const routes: Routes = [ - { - path: '', - component: OrderListComponent - } -]; -// #enddocregion orders-routing-module-detail - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class OrdersRoutingModule { } -// #enddocregion orders-routing-module diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts deleted file mode 100644 index a349d46898..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { OrdersRoutingModule } from './orders-routing.module'; -import { OrderListComponent } from './order-list/order-list.component'; - -@NgModule({ - imports: [ - CommonModule, - OrdersRoutingModule - ], - declarations: [OrderListComponent] -}) -export class OrdersModule { } diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/index.html b/docs_app/content/examples/lazy-loading-ngmodules/src/index.html deleted file mode 100644 index a0b9bc029a..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Lazy loading feature modules - - - - - - - Loading... - - diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json b/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json deleted file mode 100644 index e6ee97e1cf..0000000000 --- a/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Lazy Loading Feature Modules", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "file": "src/app/app.component.ts", - "tags": ["lazy loading"] -} diff --git a/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts b/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts deleted file mode 100644 index 80649e801f..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,181 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Lifecycle hooks', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should open correctly', function () { - expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo'); - }); - - it('should support peek-a-boo', function () { - let pabComp = element(by.css('peek-a-boo-parent peek-a-boo')); - expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component'); - let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0); - let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1); - expect(pabButton.getText()).toContain('Create Peek'); - pabButton.click().then(function () { - expect(pabButton.getText()).toContain('Destroy Peek'); - expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component'); - expect(pabComp.getText()).toContain('Windstorm'); - expect(pabComp.getText()).not.toContain('Windstorm!'); - expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button'); - return updateHeroButton.click(); - }).then(function () { - expect(pabComp.getText()).toContain('Windstorm!'); - return pabButton.click(); - }).then(function () { - expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component'); - }); - }); - - it('should support OnChanges hook', function () { - let onChangesViewEle = element.all(by.css('on-changes div')).get(0); - let inputEles = element.all(by.css('on-changes-parent input')); - let heroNameInputEle = inputEles.get(1); - let powerInputEle = inputEles.get(0); - let titleEle = onChangesViewEle.element(by.css('p')); - let changeLogEles = onChangesViewEle.all(by.css('div')); - - expect(titleEle.getText()).toContain('Windstorm can sing'); - expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages'); - heroNameInputEle.sendKeys('-foo-'); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); - expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages'); - powerInputEle.sendKeys('-bar-'); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); - // 7 == 2 previously + length of '-bar-' - expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now'); - }); - - it('should support DoCheck hook', function () { - let doCheckViewEle = element.all(by.css('do-check div')).get(0); - let inputEles = element.all(by.css('do-check-parent input')); - let heroNameInputEle = inputEles.get(1); - let powerInputEle = inputEles.get(0); - let titleEle = doCheckViewEle.element(by.css('p')); - let changeLogEles = doCheckViewEle.all(by.css('div')); - let logCount: number; - - expect(titleEle.getText()).toContain('Windstorm can sing'); - changeLogEles.count().then(function(count: number) { - // 3 messages to start - expect(count).toEqual(3, 'should start with 3 messages'); - logCount = count; - return heroNameInputEle.sendKeys('-foo-'); - }).then(function () { - expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); - return changeLogEles.count(); - }).then(function(count: number) { - // one more for each keystroke - expect(count).toEqual(logCount + 5, 'should add 5 more messages'); - logCount = count; - return powerInputEle.sendKeys('-bar-'); - }).then(function () { - expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); - expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages'); - }); - }); - - it('should support AfterView hooks', function () { - let parentEle = element(by.tagName('after-view-parent')); - let buttonEle = parentEle.element(by.tagName('button')); // Reset - let commentEle = parentEle.element(by.className('comment')); - let logEles = parentEle.all(by.css('h4 ~ div')); - let childViewInputEle = parentEle.element(by.css('app-child-view input')); - let logCount: number; - - expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); - expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); - - logEles.count().then(function(count: number) { - logCount = count; - return childViewInputEle.sendKeys('-test-'); - }).then(function() { - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); - return logEles.count(); - }).then(function(count: number) { - expect(logCount + 7).toBeGreaterThan(count - 3, - '7 additional log messages should have been added'); - expect(logCount + 7).toBeLessThan(count + 3, - '7 additional log messages should have been added'); - logCount = count; - return buttonEle.click(); - }).then(function() { - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); - }); - }); - - - it('should support AfterContent hooks', function () { - let parentEle = element(by.tagName('after-content-parent')); - let buttonEle = parentEle.element(by.tagName('button')); // Reset - let commentEle = parentEle.element(by.className('comment')); - let logEles = parentEle.all(by.css('h4 ~ div')); - let childViewInputEle = parentEle.element(by.css('app-child input')); - let logCount: number; - - expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); - expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); - - logEles.count().then(function(count: number) { - logCount = count; - return childViewInputEle.sendKeys('-test-'); - }).then(function() { - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); - return logEles.count(); - }).then(function(count: number) { - expect(logCount + 5).toEqual(count, '5 additional log messages should have been added'); - logCount = count; - return buttonEle.click(); - }).then(function() { - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); - }); - }); - - it('should support spy\'s OnInit & OnDestroy hooks', function () { - let inputEle = element(by.css('spy-parent input')); - let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero')); - let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes')); - let heroEles = element.all(by.css('spy-parent div[mySpy')); - let logEles = element.all(by.css('spy-parent h4 ~ div')); - expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); - expect(logEles.count()).toBe(2, 'should have two log entries'); - inputEle.sendKeys('-test-').then(function() { - return addHeroButtonEle.click(); - }).then(function() { - expect(heroEles.count()).toBe(3, 'should have added one hero'); - expect(heroEles.get(2).getText()).toContain('-test-'); - expect(logEles.count()).toBe(3, 'should now have 3 log entries'); - return resetHeroesButtonEle.click(); - }).then(function() { - expect(heroEles.count()).toBe(0, 'should no longer have any heroes'); - expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall'); - }); - }); - - it('should support "spy counter"', function () { - let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update')); - let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset')); - let textEle = element(by.css('counter-parent app-counter > div')); - let logEles = element.all(by.css('counter-parent h4 ~ div')); - expect(textEle.getText()).toContain('Counter = 0'); - expect(logEles.count()).toBe(2, 'should start with two log entries'); - updateCounterButtonEle.click().then(function() { - expect(textEle.getText()).toContain('Counter = 1'); - expect(logEles.count()).toBe(3, 'should now have 3 log entries'); - return resetCounterButtonEle.click(); - }).then(function() { - expect(textEle.getText()).toContain('Counter = 0'); - expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init'); - }); - }); -}); diff --git a/docs_app/content/examples/lifecycle-hooks/example-config.json b/docs_app/content/examples/lifecycle-hooks/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts deleted file mode 100644 index 36d2cff20f..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts +++ /dev/null @@ -1,114 +0,0 @@ -// #docplaster -// #docregion -import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -////////////////// -@Component({ - selector: 'app-child', - template: '' -}) -export class ChildComponent { - hero = 'Magneta'; -} - -////////////////////// -@Component({ - selector: 'after-content', -// #docregion template - template: ` -
    -- projected content begins --
    - -
    -- projected content ends --
    ` -// #enddocregion template - + ` -

    - {{comment}} -

    - ` -}) -// #docregion hooks -export class AfterContentComponent implements AfterContentChecked, AfterContentInit { - private prevHero = ''; - comment = ''; - - // Query for a CONTENT child of type `ChildComponent` - @ContentChild(ChildComponent) contentChild: ChildComponent; - -// #enddocregion hooks - constructor(private logger: LoggerService) { - this.logIt('AfterContent constructor'); - } - -// #docregion hooks - ngAfterContentInit() { - // contentChild is set after the content has been initialized - this.logIt('AfterContentInit'); - this.doSomething(); - } - - ngAfterContentChecked() { - // contentChild is updated after the content has been checked - if (this.prevHero === this.contentChild.hero) { - this.logIt('AfterContentChecked (no change)'); - } else { - this.prevHero = this.contentChild.hero; - this.logIt('AfterContentChecked'); - this.doSomething(); - } - } -// #enddocregion hooks -// #docregion do-something - - // This surrogate for real business logic sets the `comment` - private doSomething() { - this.comment = this.contentChild.hero.length > 10 ? `That's a long name` : ''; - } - - private logIt(method: string) { - let child = this.contentChild; - let message = `${method}: ${child ? child.hero : 'no'} child content`; - this.logger.log(message); - } -// #docregion hooks - // ... -} -// #enddocregion hooks - -////////////// -@Component({ - selector: 'after-content-parent', - template: ` -
    -

    AfterContent

    - -
    ` + -// #docregion parent-template - ` - - ` -// #enddocregion parent-template -+ `
    - -

    -- AfterContent Logs --

    -

    -
    {{msg}}
    -
    - `, - styles: ['.parent {background: burlywood}'], - providers: [LoggerService] -}) -export class AfterContentParentComponent { - show = true; - - constructor(public logger: LoggerService) { - } - - reset() { - this.logger.clear(); - // quickly remove and reload AfterContentComponent which recreates it - this.show = false; - this.logger.tick_then(() => this.show = true); - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts deleted file mode 100644 index fd09962406..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts +++ /dev/null @@ -1,116 +0,0 @@ -// #docplaster -// #docregion -import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -////////////////// -// #docregion child-view -@Component({ - selector: 'app-child-view', - template: '' -}) -export class ChildViewComponent { - hero = 'Magneta'; -} -// #enddocregion child-view - -////////////////////// -@Component({ - selector: 'after-view', -// #docregion template - template: ` -
    -- child view begins --
    - -
    -- child view ends --
    ` -// #enddocregion template - + ` -

    - {{comment}} -

    - ` -}) -// #docregion hooks -export class AfterViewComponent implements AfterViewChecked, AfterViewInit { - private prevHero = ''; - - // Query for a VIEW child of type `ChildViewComponent` - @ViewChild(ChildViewComponent) viewChild: ChildViewComponent; - -// #enddocregion hooks - constructor(private logger: LoggerService) { - this.logIt('AfterView constructor'); - } - -// #docregion hooks - ngAfterViewInit() { - // viewChild is set after the view has been initialized - this.logIt('AfterViewInit'); - this.doSomething(); - } - - ngAfterViewChecked() { - // viewChild is updated after the view has been checked - if (this.prevHero === this.viewChild.hero) { - this.logIt('AfterViewChecked (no change)'); - } else { - this.prevHero = this.viewChild.hero; - this.logIt('AfterViewChecked'); - this.doSomething(); - } - } -// #enddocregion hooks - - comment = ''; - -// #docregion do-something - // This surrogate for real business logic sets the `comment` - private doSomething() { - let c = this.viewChild.hero.length > 10 ? `That's a long name` : ''; - if (c !== this.comment) { - // Wait a tick because the component's view has already been checked - this.logger.tick_then(() => this.comment = c); - } - } -// #enddocregion do-something - - private logIt(method: string) { - let child = this.viewChild; - let message = `${method}: ${child ? child.hero : 'no'} child view`; - this.logger.log(message); - } -// #docregion hooks - // ... -} -// #enddocregion hooks - -////////////// -@Component({ - selector: 'after-view-parent', - template: ` -
    -

    AfterView

    - - - -

    -- AfterView Logs --

    -

    -
    {{msg}}
    -
    - `, - styles: ['.parent {background: burlywood}'], - providers: [LoggerService] -}) -export class AfterViewParentComponent { - show = true; - - constructor(public logger: LoggerService) { - } - - reset() { - this.logger.clear(); - // quickly remove and reload AfterViewComponent which recreates it - this.show = false; - this.logger.tick_then(() => this.show = true); - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html deleted file mode 100644 index d0692e28ac..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html +++ /dev/null @@ -1,37 +0,0 @@ - -

    Component Lifecycle Hooks

    -Peek-a-boo: (most) lifecycle hooks
    -OnChanges
    -DoCheck
    -AfterViewInit & AfterViewChecked
    -AfterContentInit & AfterContentChecked
    -Spy: directive with OnInit & OnDestroy
    -Counter: OnChanges + Spy directive
    - - - -back to top - - - -back to top - - - -back to top - - - -back to top - - - -back to top - - - -back to top - - - -back to top diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts deleted file mode 100644 index 7b3cf496f1..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts b/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts deleted file mode 100644 index 4d9cabf218..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts +++ /dev/null @@ -1,67 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; - -import { - AfterContentParentComponent, - AfterContentComponent, - ChildComponent -} from './after-content.component'; - -import { - AfterViewParentComponent, - AfterViewComponent, - ChildViewComponent -} from './after-view.component'; - -import { - CounterParentComponent, - MyCounterComponent -} from './counter.component'; - -import { - DoCheckParentComponent, - DoCheckComponent -} from './do-check.component'; - -import { - OnChangesParentComponent, - OnChangesComponent -} from './on-changes.component'; - -import { PeekABooParentComponent } from './peek-a-boo-parent.component'; -import { PeekABooComponent } from './peek-a-boo.component'; - -import { SpyParentComponent } from './spy.component'; -import { SpyDirective } from './spy.directive'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - AfterContentParentComponent, - AfterContentComponent, - ChildComponent, - AfterViewParentComponent, - AfterViewComponent, - ChildViewComponent, - CounterParentComponent, - MyCounterComponent, - DoCheckParentComponent, - DoCheckComponent, - OnChangesParentComponent, - OnChangesComponent, - PeekABooParentComponent, - PeekABooComponent, - SpyParentComponent, - SpyDirective - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts deleted file mode 100644 index f9783b844e..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts +++ /dev/null @@ -1,84 +0,0 @@ -// #docregion -import { - Component, Input, - OnChanges, SimpleChanges, -} from '@angular/core'; - -import { LoggerService } from './logger.service'; - -@Component({ - selector: 'app-counter', - template: ` -
    - Counter = {{counter}} - -
    -- Counter Change Log --
    -
    {{chg}}
    -
    - `, - styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'] -}) -export class MyCounterComponent implements OnChanges { - @Input() counter: number; - changeLog: string[] = []; - - ngOnChanges(changes: SimpleChanges) { - - // Empty the changeLog whenever counter goes to zero - // hint: this is a way to respond programmatically to external value changes. - if (this.counter === 0) { - this.changeLog = []; - } - - // A change to `counter` is the only change we care about - let chng = changes['counter']; - let cur = chng.currentValue; - let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer - this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`); - } -} - -/***************************************/ - -@Component({ - selector: 'counter-parent', - template: ` -
    -

    Counter Spy

    - - - - - - -

    -- Spy Lifecycle Hook Log --

    -
    {{msg}}
    -
    - `, - styles: ['.parent {background: gold;}'], - providers: [LoggerService] -}) -export class CounterParentComponent { - value: number; - spyLog: string[] = []; - - private logger: LoggerService; - - constructor(logger: LoggerService) { - this.logger = logger; - this.spyLog = logger.logs; - this.reset(); - } - - updateCounter() { - this.value += 1; - this.logger.tick(); - } - - reset() { - this.logger.log('-- reset --'); - this.value = 0; - this.logger.tick(); - } -} - diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html deleted file mode 100644 index cf7c2b91ce..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
    -

    {{title}}

    - - - - -
    Power:
    Hero.name:
    -

    - - - - -
    diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts deleted file mode 100644 index d46b362ab0..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -/* tslint:disable:forin */ -// #docregion -import { Component, DoCheck, Input, ViewChild } from '@angular/core'; - -class Hero { - constructor(public name: string) {} -} - -@Component({ - selector: 'do-check', - template: ` -
    -

    {{hero.name}} can {{power}}

    - -

    -- Change Log --

    -
    {{chg}}
    -
    - `, - styles: [ - '.hero {background: LightYellow; padding: 8px; margin-top: 8px}', - 'p {background: Yellow; padding: 8px; margin-top: 8px}' - ] -}) -export class DoCheckComponent implements DoCheck { - @Input() hero: Hero; - @Input() power: string; - - changeDetected = false; - changeLog: string[] = []; - oldHeroName = ''; - oldPower = ''; - oldLogLength = 0; - noChangeCount = 0; - - // #docregion ng-do-check - ngDoCheck() { - - if (this.hero.name !== this.oldHeroName) { - this.changeDetected = true; - this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`); - this.oldHeroName = this.hero.name; - } - - if (this.power !== this.oldPower) { - this.changeDetected = true; - this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`); - this.oldPower = this.power; - } - - if (this.changeDetected) { - this.noChangeCount = 0; - } else { - // log that hook was called when there was no relevant change. - let count = this.noChangeCount += 1; - let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`; - if (count === 1) { - // add new "no change" message - this.changeLog.push(noChangeMsg); - } else { - // update last "no change" message - this.changeLog[this.changeLog.length - 1] = noChangeMsg; - } - } - - this.changeDetected = false; - } - // #enddocregion ng-do-check - - reset() { - this.changeDetected = true; - this.changeLog = []; - } -} - -/***************************************/ - -@Component({ - selector: 'do-check-parent', - templateUrl: './do-check-parent.component.html', - styles: ['.parent {background: Lavender}'] -}) -export class DoCheckParentComponent { - hero: Hero; - power: string; - title = 'DoCheck'; - @ViewChild(DoCheckComponent) childView: DoCheckComponent; - - constructor() { this.reset(); } - - reset() { - this.hero = new Hero('Windstorm'); - this.power = 'sing'; - if (this.childView) { this.childView.reset(); } - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts b/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts deleted file mode 100644 index 312b785707..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class LoggerService { - logs: string[] = []; - prevMsg = ''; - prevMsgCount = 1; - - log(msg: string) { - if (msg === this.prevMsg) { - // Repeat message; update last log entry with count. - this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`; - } else { - // New message; log it. - this.prevMsg = msg; - this.prevMsgCount = 1; - this.logs.push(msg); - } - } - - clear() { this.logs = []; } - - // schedules a view refresh to ensure display catches up - tick() { this.tick_then(() => { }); } - tick_then(fn: () => any) { setTimeout(fn, 0); } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html deleted file mode 100644 index a0fd404931..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
    -

    {{title}}

    - - - - -
    Power:
    Hero.name:
    -

    - - - - -
    diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts deleted file mode 100644 index e580fffd39..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* tslint:disable:forin */ -// #docregion -import { - Component, Input, OnChanges, - SimpleChanges, ViewChild -} from '@angular/core'; - -class Hero { - constructor(public name: string) {} -} - -@Component({ - selector: 'on-changes', - template: ` -
    -

    {{hero.name}} can {{power}}

    - -

    -- Change Log --

    -
    {{chg}}
    -
    - `, - styles: [ - '.hero {background: LightYellow; padding: 8px; margin-top: 8px}', - 'p {background: Yellow; padding: 8px; margin-top: 8px}' - ] -}) -export class OnChangesComponent implements OnChanges { -// #docregion inputs - @Input() hero: Hero; - @Input() power: string; -// #enddocregion inputs - - changeLog: string[] = []; - - // #docregion ng-on-changes - ngOnChanges(changes: SimpleChanges) { - for (let propName in changes) { - let chng = changes[propName]; - let cur = JSON.stringify(chng.currentValue); - let prev = JSON.stringify(chng.previousValue); - this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); - } - } - // #enddocregion ng-on-changes - - reset() { this.changeLog = []; } -} - -/***************************************/ - -@Component({ - selector: 'on-changes-parent', - templateUrl: './on-changes-parent.component.html', - styles: ['.parent {background: Lavender;}'] -}) -export class OnChangesParentComponent { - hero: Hero; - power: string; - title = 'OnChanges'; - @ViewChild(OnChangesComponent) childView: OnChangesComponent; - - constructor() { - this.reset(); - } - - reset() { - // new Hero object every time; triggers onChanges - this.hero = new Hero('Windstorm'); - // setting power only triggers onChanges if this value is different - this.power = 'sing'; - if (this.childView) { this.childView.reset(); } - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts deleted file mode 100644 index 3f2bd8585d..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -@Component({ - selector: 'peek-a-boo-parent', - template: ` -
    -

    Peek-A-Boo

    - - - - - - - -

    -- Lifecycle Hook Log --

    -
    {{msg}}
    -
    - `, - styles: ['.parent {background: moccasin}'], - providers: [ LoggerService ] -}) -export class PeekABooParentComponent { - - hasChild = false; - hookLog: string[]; - - heroName = 'Windstorm'; - private logger: LoggerService; - - constructor(logger: LoggerService) { - this.logger = logger; - this.hookLog = logger.logs; - } - - toggleChild() { - this.hasChild = !this.hasChild; - if (this.hasChild) { - this.heroName = 'Windstorm'; - this.logger.clear(); // clear log on create - } - this.logger.tick(); - } - - updateHero() { - this.heroName += '!'; - this.logger.tick(); - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts deleted file mode 100644 index dcee428753..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { - AfterContentChecked, - AfterContentInit, - AfterViewChecked, - AfterViewInit, - DoCheck, - OnChanges, - OnDestroy, - OnInit, - SimpleChanges -} from '@angular/core'; -import { Component, Input } from '@angular/core'; -import { LoggerService } from './logger.service'; - -let nextId = 1; - -// #docregion ngOnInit -export class PeekABoo implements OnInit { - constructor(private logger: LoggerService) { } - - // implement OnInit's `ngOnInit` method - ngOnInit() { this.logIt(`OnInit`); } - - logIt(msg: string) { - this.logger.log(`#${nextId++} ${msg}`); - } -} -// #enddocregion ngOnInit - -@Component({ - selector: 'peek-a-boo', - template: '

    Now you see my hero, {{name}}

    ', - styles: ['p {background: LightYellow; padding: 8px}'] -}) -// Don't HAVE to mention the Lifecycle Hook interfaces -// unless we want typing and tool support. -export class PeekABooComponent extends PeekABoo implements - OnChanges, OnInit, DoCheck, - AfterContentInit, AfterContentChecked, - AfterViewInit, AfterViewChecked, - OnDestroy { - @Input() name: string; - - private verb = 'initialized'; - - constructor(logger: LoggerService) { - super(logger); - - let is = this.name ? 'is' : 'is not'; - this.logIt(`name ${is} known at construction`); - } - - // only called for/if there is an @input variable set by parent. - ngOnChanges(changes: SimpleChanges) { - let changesMsgs: string[] = []; - for (let propName in changes) { - if (propName === 'name') { - let name = changes['name'].currentValue; - changesMsgs.push(`name ${this.verb} to "${name}"`); - } else { - changesMsgs.push(propName + ' ' + this.verb); - } - } - this.logIt(`OnChanges: ${changesMsgs.join('; ')}`); - this.verb = 'changed'; // next time it will be a change - } - - // Beware! Called frequently! - // Called in every change detection cycle anywhere on the page - ngDoCheck() { this.logIt(`DoCheck`); } - - ngAfterContentInit() { this.logIt(`AfterContentInit`); } - - // Beware! Called frequently! - // Called in every change detection cycle anywhere on the page - ngAfterContentChecked() { this.logIt(`AfterContentChecked`); } - - ngAfterViewInit() { this.logIt(`AfterViewInit`); } - - // Beware! Called frequently! - // Called in every change detection cycle anywhere on the page - ngAfterViewChecked() { this.logIt(`AfterViewChecked`); } - - ngOnDestroy() { this.logIt(`OnDestroy`); } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html deleted file mode 100644 index f7deae9448..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html +++ /dev/null @@ -1,16 +0,0 @@ -
    -

    Spy Directive

    - - - - - -

    - -
    - {{hero}} -
    - -

    -- Spy Lifecycle Hook Log --

    -
    {{msg}}
    -
    diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts deleted file mode 100644 index 08fc0ee8a0..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -@Component({ - selector: 'spy-parent', - templateUrl: './spy.component.html', - styles: [ - '.parent {background: khaki;}', - '.heroes {background: LightYellow; padding: 0 8px}' - ], - providers: [LoggerService] -}) -export class SpyParentComponent { - newName = 'Herbie'; - heroes: string[] = ['Windstorm', 'Magneta']; - - constructor(public logger: LoggerService) { - } - - addHero() { - if (this.newName.trim()) { - this.heroes.push(this.newName.trim()); - this.newName = ''; - this.logger.tick(); - } - } - removeHero(hero: string) { - this.heroes.splice(this.heroes.indexOf(hero), 1); - this.logger.tick(); - } - reset() { - this.logger.log('-- reset --'); - this.heroes = []; - this.logger.tick(); - } -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts deleted file mode 100644 index 01f3f95880..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Directive, OnInit, OnDestroy } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -let nextId = 1; - -// #docregion spy-directive -// Spy on any element to which it is applied. -// Usage:
    ...
    -@Directive({selector: '[mySpy]'}) -export class SpyDirective implements OnInit, OnDestroy { - - constructor(private logger: LoggerService) { } - - ngOnInit() { this.logIt(`onInit`); } - - ngOnDestroy() { this.logIt(`onDestroy`); } - - private logIt(msg: string) { - this.logger.log(`Spy #${nextId++} ${msg}`); - } -} -// #enddocregion spy-directive diff --git a/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css b/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css deleted file mode 100644 index df17c897c6..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css +++ /dev/null @@ -1,13 +0,0 @@ -.parent { - color: #666; - margin: 14px 0; - padding: 8px; -} -input { - margin: 4px; - padding: 4px; -} -.comment { - color: red; - font-style: italic; -} diff --git a/docs_app/content/examples/lifecycle-hooks/src/index.html b/docs_app/content/examples/lifecycle-hooks/src/index.html deleted file mode 100644 index 7446c1feb5..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Angular Lifecycle Hooks - - - - - - - - - - - diff --git a/docs_app/content/examples/lifecycle-hooks/src/main.ts b/docs_app/content/examples/lifecycle-hooks/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/lifecycle-hooks/stackblitz.json b/docs_app/content/examples/lifecycle-hooks/stackblitz.json deleted file mode 100644 index be2e1f757b..0000000000 --- a/docs_app/content/examples/lifecycle-hooks/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Lifecycle Hooks", - "files":["!**/*.d.ts", "!**/*.js"], - "tags": ["lifecycle", "hooks", - "OnInit", "OnDestroy", "OnChange", "DoCheck", - "AfterContentInit", "AfterContentChecked", - "AfterViewInit", "AfterViewChecked"] -} diff --git a/docs_app/content/examples/ngcontainer/example-config.json b/docs_app/content/examples/ngcontainer/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.css b/docs_app/content/examples/ngcontainer/src/app/app.component.css deleted file mode 100644 index cdb6631713..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/app.component.css +++ /dev/null @@ -1,34 +0,0 @@ -/* #docregion */ -button { - min-width: 100px; - font-size: 100%; -} - -code, .code { - background-color: #eee; - color: black; - font-family: Courier, sans-serif; - font-size: 85%; -} - -div.code { - width: 400px; -} - -.heroic { - font-size: 150%; - font-weight: bold; -} - -hr { - margin: 40px 0 -} - -td, th { - text-align: left; - vertical-align: top; -} - -/* #docregion p-span */ -p span { color: red; font-size: 70%; } -/* #enddocregion p-span */ diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.html b/docs_app/content/examples/ngcontainer/src/app/app.component.html deleted file mode 100644 index 33a68fecaf..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/app.component.html +++ /dev/null @@ -1,279 +0,0 @@ - - -

    <ng-container>

    - - -
    {{hero.name}}
    - - -
    - -

    <ng-container> and CSS

    -

    Examples demonstrating issues with rigid CSS styles.

    - - - -

    #1 <ng-container> and <p>

    - -

    - I turned the corner - - and saw {{hero.name}}. I waved - - and continued on my way. -

    - - -

    - I turned the corner - - and saw {{hero.name}}. I waved - - and continued on my way. -

    - - -

    #2 <ng-container> and <p>

    - -
    - -

    - {{hero.name}} is - - , - and - {{trait}} - . -

    - - - -

    - {{hero.name}} is - - , - and - {{trait}} - . -

    - - -
    - -

    #3 <ng-container> and <p>

    - -

    - -

    - - -
    - The hero.id in the <span> - is caught by the p-span CSS: - -

    - - Id: ({{hero.id}}) - - Name: {{hero.name}} -

    - -
    - -
    - The hero.id in the <ng-container> - is unaffected by the p-span CSS: -

    - - Id: ({{hero.id}}) - - Name: {{hero.name}} -

    -
    - -
    - The hero.id in the <ng-template *ngIf> disappears: -

    - - Id: ({{hero.id}}) - - Name: {{hero.name}} -

    -
    - -
    - The hero.id in the <ng-template [ngIf]> - is unaffected by the p-span CSS: -

    - - Id: ({{hero.id}}) - - Name: {{hero.name}} -

    -
    - -
    - -
    - -

    <ng-container> and layout-sensitive elements

    -

    - Examples demonstrating issues with layout-sensitive elements - such as <select> and <table>. -

    - -

    #1 <ng-container> and <options>

    - -

    <select> with <span>

    -
    - Pick your favorite hero - () -
    - - - - -

    <select> with <ng-container>

    -
    - Pick your favorite hero - () -
    - - - - -



    - -

    #2 <ng-container> and <options>

    -

    - -

    - -

    Options with <ng-container>

    - - - - -

    Options with <span>

    - - - - -
    - -

    <ng-container> and <table>

    -

    - - - -

    - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    DirectiveTypeDescription
    NgClassAAdd or remove multiple CSS classes.
    xxxSdiv with *ngIf formats crazy.
    yyySdiv with *ngIf formats crazy.
    NgForSRepeat the template for each item in a list.
    NgIfSAdd or remove DOM elements.
    NgStyleAAdd or remove multiple style attributes.
    NgSwitchSInclude in DOM if case matches the switch value.
    - -
    - -

    Do not confuse <ng-container> with <ng-content>

    - -

    <ng-container>Inside ng-container</ng-container>

    - -Inside ng-container - - -

    <ng-content>this is an Angular parse error</ng-content>

    - - - -
    Template parse errors:
    -<ng-content> element cannot have content.
    - -

    Demo of </ng-content>

    - - - Projected content - - diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.ts b/docs_app/content/examples/ngcontainer/src/app/app.component.ts deleted file mode 100644 index 65c511acd2..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/app.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { heroes } from './hero'; - -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] -}) -export class AppComponent { - heroes = heroes; - hero = this.heroes[0]; - heroTraits = [ 'honest', 'brave', 'considerate' ]; - - // flags for the table - attrDirs = true; - strucDirs = true; - divNgIf = false; - - showId = true; - showDefaultTraits = true; - showSad = true; -} diff --git a/docs_app/content/examples/ngcontainer/src/app/app.module.ts b/docs_app/content/examples/ngcontainer/src/app/app.module.ts deleted file mode 100644 index 57ac92f518..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ContentComponent } from './content.component'; -import { heroComponents } from './hero.components'; - -@NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ - AppComponent, - ContentComponent, - heroComponents - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngcontainer/src/app/content.component.ts b/docs_app/content/examples/ngcontainer/src/app/content.component.ts deleted file mode 100644 index a2580b0dee..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/content.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'content-comp', - // #docregion template - template: - `
    - -
    `, - // #enddocregion template - styles: [ ` - div { border: medium dashed green; padding: 1em; width: 150px; text-align: center} - `] -}) -export class ContentComponent { } diff --git a/docs_app/content/examples/ngcontainer/src/app/hero.components.ts b/docs_app/content/examples/ngcontainer/src/app/hero.components.ts deleted file mode 100644 index 77920ebdf9..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/hero.components.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -@Component({ - selector: 'happy-hero', - template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.` -}) -export class HappyHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'sad-hero', - template: `You like {{hero.name}}? Such a sad hero. Are you sad too?` -}) -export class SadHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'confused-hero', - template: `Are you as confused as {{hero.name}}?` -}) -export class ConfusedHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'unknown-hero', - template: `{{message}}` -}) -export class UnknownHeroComponent { - @Input() hero: Hero; - get message() { - return this.hero && this.hero.name ? - `${this.hero.name} is strange and mysterious.` : - 'Are you feeling indecisive?'; - } -} - -export const heroComponents = - [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ]; diff --git a/docs_app/content/examples/ngcontainer/src/app/hero.ts b/docs_app/content/examples/ngcontainer/src/app/hero.ts deleted file mode 100644 index 89f0cbfdf8..0000000000 --- a/docs_app/content/examples/ngcontainer/src/app/hero.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; - emotion?: string; -} - -export const heroes: Hero[] = [ - { id: 1, name: 'Mr. Nice', emotion: 'happy'}, - { id: 2, name: 'Narco', emotion: 'sad' }, - { id: 3, name: 'Windstorm', emotion: 'confused' }, - { id: 4, name: 'Magneta'} -]; diff --git a/docs_app/content/examples/ngcontainer/src/index.html b/docs_app/content/examples/ngcontainer/src/index.html deleted file mode 100644 index 38a7c1dff1..0000000000 --- a/docs_app/content/examples/ngcontainer/src/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Angular <ng-container> - - - - Loading... - - - diff --git a/docs_app/content/examples/ngcontainer/src/main.ts b/docs_app/content/examples/ngcontainer/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/ngcontainer/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngcontainer/stackblitz.json b/docs_app/content/examples/ngcontainer/stackblitz.json deleted file mode 100644 index c4cae8f663..0000000000 --- a/docs_app/content/examples/ngcontainer/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "", - "files": [ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": [ - "ngcontainer", "structural", "directives" - ] -} diff --git a/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json b/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json deleted file mode 100644 index 2946183c0d..0000000000 --- a/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "description": "Contact NgModule v.1", - "files": [ - "src/app/app.component.1b.ts", - "src/app/app.module.1b.ts", - "src/app/highlight.directive.ts", - "src/app/title.component.html", - "src/app/title.component.ts", - "src/app/user.service.ts", - - "src/app/contact/awesome.pipe.ts", - "src/app/contact/contact.component.css", - "src/app/contact/contact.component.html", - "src/app/contact/contact.component.3.ts", - "src/app/contact/contact.service.ts", - "src/app/contact/contact-highlight.directive.ts", - - "src/main.1b.ts", - "src/styles.css", - "src/index.1b.html" - ], - "main": "src/index.1b.html", - "tags": ["NgModule"] -} diff --git a/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json b/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json deleted file mode 100644 index 3aaf1474a6..0000000000 --- a/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "description": "Contact NgModule v.2", - "files": [ - "src/app/app.component.2.ts", - "src/app/app.module.2.ts", - "src/app/highlight.directive.ts", - "src/app/title.component.html", - "src/app/title.component.ts", - "src/app/user.service.ts", - - "src/app/contact/contact.component.css", - "src/app/contact/contact.component.html", - "src/app/contact/contact.service.ts", - - "src/app/contact/awesome.pipe.ts", - "src/app/contact/contact.component.3.ts", - "src/app/contact/contact.module.2.ts", - "src/app/contact/contact-highlight.directive.ts", - - "src/main.2.ts", - "src/styles.css", - "src/index.2.html" - ], - "main": "src/index.2.html", - "tags": ["NgModule"] -} diff --git a/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts b/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts deleted file mode 100644 index 72d1ca9214..0000000000 --- a/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,223 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('NgModule', function () { - - // helpers - const gold = 'rgba(255, 215, 0, 1)'; - const powderblue = 'rgba(176, 224, 230, 1)'; - const lightgray = 'rgba(211, 211, 211, 1)'; - const white = 'rgba(0, 0, 0, 0)'; - - function getCommonsSectionStruct() { - const buttons = element.all(by.css('nav a')); - - return { - title: element.all(by.tagName('h1')).get(0), - welcome: element.all(by.css('app-title p i')).get(0), - contactButton: buttons.get(0), - crisisButton: buttons.get(1), - heroesButton: buttons.get(2) - }; - } - - function getContactSectionStruct() { - const buttons = element.all(by.css('app-contact form button')); - - return { - header: element.all(by.css('app-contact h2')).get(0), - popupMessage: element.all(by.css('app-contact div')).get(0), - contactNameHeader: element.all(by.css('app-contact form h3')).get(0), - input: element.all(by.css('app-contact form input')).get(0), - validationError: element.all(by.css('app-contact form .alert')).get(0), - saveButton: buttons.get(0), // can't be tested - nextContactButton: buttons.get(1), - newContactButton: buttons.get(2) - }; - } - - function getCrisisSectionStruct() { - return { - title: element.all(by.css('ng-component h3')).get(0), - items: element.all(by.css('ng-component a')), - itemId: element.all(by.css('ng-component div')).get(0), - listLink: element.all(by.css('ng-component a')).get(0), - }; - } - - function getHeroesSectionStruct() { - return { - header: element.all(by.css('ng-component h2')).get(0), - title: element.all(by.css('ng-component h3')).get(0), - items: element.all(by.css('ng-component a')), - itemId: element.all(by.css('ng-component ng-component div div')).get(0), - itemInput: element.all(by.css('ng-component ng-component input')).get(0), - listLink: element.all(by.css('ng-component ng-component a')).get(0), - }; - } - - // tests - function appTitleTests(color: string, name?: string) { - return function() { - it('should have a gray header', function() { - const commons = getCommonsSectionStruct(); - expect(commons.title.getCssValue('backgroundColor')).toBe(color); - }); - - it('should welcome us', function () { - const commons = getCommonsSectionStruct(); - expect(commons.welcome.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes')); - }); - }; - } - - function contactTests(color: string, name?: string) { - return function() { - it('shows the contact\'s owner', function() { - const contacts = getContactSectionStruct(); - expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes')); - }); - - it('can cycle between contacts', function () { - const contacts = getContactSectionStruct(); - const nextButton = contacts.nextContactButton; - expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade'); - expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color); - nextButton.click().then(function () { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger'); - return nextButton.click(); - }).then(function () { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew'); - }); - }); - - it('can change an existing contact', function () { - const contacts = getContactSectionStruct(); - contacts.input.sendKeys('a'); - expect(contacts.input.getCssValue('backgroundColor')).toBe(color); - expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea'); - }); - - it('can create a new contact', function () { - const contacts = getContactSectionStruct(); - const newContactButton = contacts.newContactButton; - newContactButton.click().then(function () { - expect(contacts.validationError.getText()).toBe('Name is required'); - contacts.input.sendKeys('John Doe'); - expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe'); - expect(contacts.validationError.getText()).toBe(''); - }); - }); - }; - } - - describe('index.html', function () { - beforeEach(function () { - browser.get(''); - }); - - describe('app-title', appTitleTests(white, 'Miss Marple')); - - describe('contact', contactTests(lightgray, 'Miss Marple')); - - describe('crisis center', function () { - beforeEach(function () { - getCommonsSectionStruct().crisisButton.click(); - }); - - it('shows a list of crisis', function () { - const crisis = getCrisisSectionStruct(); - expect(crisis.title.getText()).toBe('Crisis List'); - expect(crisis.items.count()).toBe(4); - expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities'); - }); - - it('can navigate to one crisis details', function () { - const crisis = getCrisisSectionStruct(); - crisis.items.get(0).click().then(function() { - expect(crisis.itemId.getText()).toBe('Crisis id: 1'); - return crisis.listLink.click(); - }).then(function () { - // We are back to the list - expect(crisis.items.count()).toBe(4); - }); - }); - }); - - describe('heroes', function () { - beforeEach(function () { - getCommonsSectionStruct().heroesButton.click(); - }); - - it('shows a list of heroes', function() { - const heroes = getHeroesSectionStruct(); - expect(heroes.header.getText()).toBe('Heroes of Miss Marple'); - expect(heroes.title.getText()).toBe('Hero List'); - expect(heroes.items.count()).toBe(6); - expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice'); - }); - - it('can navigate and edit one hero details', function () { - const heroes = getHeroesSectionStruct(); - heroes.items.get(0).click().then(function () { - expect(heroes.itemId.getText()).toBe('Id: 11'); - heroes.itemInput.sendKeys(' try'); - return heroes.listLink.click(); - }).then(function () { - // We are back to the list - expect(heroes.items.count()).toBe(6); - expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try'); - }); - }); - }); - }); - - // describe('index.0.html', function() { - // beforeEach(function () { - // browser.get('index.0.html'); - // }); - - // it('has a title', function () { - // const title = element.all(by.tagName('h1')).get(0); - // expect(title.getText()).toBe('Minimal NgModule'); - // }); - // }); - - // describe('index.1.html', function () { - // beforeEach(function () { - // browser.get('index.1.html'); - // }); - - // describe('app-title', appTitleTests(powderblue)); - // }); - - // describe('index.1b.html', function () { - // beforeEach(function () { - // browser.get('index.1b.html'); - // }); - - // describe('app-title', appTitleTests(powderblue)); - - // describe('contact', contactTests(powderblue)); - // }); - - // describe('index.2.html', function () { - // beforeEach(function () { - // browser.get('index.2.html'); - // }); - - // describe('app-title', appTitleTests(gold)); - - // describe('contact', contactTests(powderblue)); - // }); - - // describe('index.3.html', function () { - // beforeEach(function () { - // browser.get('index.3.html'); - // }); - - // describe('app-title', appTitleTests(gold)); - // }); - -}); diff --git a/docs_app/content/examples/ngmodule-faq/example-config.json b/docs_app/content/examples/ngmodule-faq/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json b/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json deleted file mode 100644 index c1835325d8..0000000000 --- a/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "description": "Minimal NgModule", - "files": [ - "src/app/app.component.0.ts", - "src/app/app.module.0.ts", - "src/main.0.ts", - "src/styles.css", - "src/index.0.html" - ], - "main": "src/index.0.html", - "tags": ["NgModule"] -} diff --git a/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json b/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json deleted file mode 100644 index 39faaf229e..0000000000 --- a/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "description": "NgModule v.3", - "files": [ - "src/app/app.component.3.ts", - "src/app/app.module.3.ts", - "src/app/app-routing.module.3.ts", - - "src/app/highlight.directive.ts", - "src/app/title.component.html", - "src/app/title.component.ts", - "src/app/user.service.ts", - - "src/app/contact/contact.component.css", - "src/app/contact/contact.component.html", - "src/app/contact/contact.service.ts", - - "src/app/contact/awesome.pipe.ts", - "src/app/contact/contact.component.3.ts", - "src/app/contact/contact.module.3.ts", - "src/app/contact/contact-routing.module.3.ts", - "src/app/contact/contact-highlight.directive.ts", - - "src/app/crisis/*.ts", - - "src/app/hero/hero-detail.component.ts", - "src/app/hero/hero-list.component.ts", - "src/app/hero/hero.service.ts", - - "src/app/hero/hero.component.3.ts", - "src/app/hero/hero.module.3.ts", - "src/app/hero/hero-routing.module.3.ts", - "src/app/hero/highlight.directive.ts", - - "src/main.3.ts", - "src/styles.css", - "src/index.3.html" - ], - "main": "src/index.3.html", - "tags": ["NgModule"] -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts deleted file mode 100644 index f3c68f5050..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { ContactModule } from './contact/contact.module.3'; - -const routes: Routes = [ - { path: '', redirectTo: 'contact', pathMatch: 'full'}, - { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, - { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' } -]; - -@NgModule({ - imports: [ - ContactModule, - RouterModule.forRoot(routes) - ], - exports: [RouterModule] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts deleted file mode 100644 index 4ce7438bc4..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { ContactModule } from './contact/contact.module'; - -// #docregion routes -const routes: Routes = [ - { path: '', redirectTo: 'contact', pathMatch: 'full'}, - // #docregion lazy-routes - { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, - { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' } - // #enddocregion lazy-routes -]; -// #enddocregion routes - -@NgModule({ - // #docregion imports - imports: [ - ContactModule, - // #docregion forRoot - RouterModule.forRoot(routes), - // #enddocregion forRoot - ], - // #enddocregion imports - // #docregion exports - exports: [RouterModule] - // #enddocregion exports -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts deleted file mode 100644 index 9aac868764..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: '

    {{title}}

    ', -}) -export class AppComponent { - title = 'Angular Modules'; -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts deleted file mode 100644 index 6cdf540f0e..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', -// #enddocregion - /* - // #docregion template - template: '

    {{title}}

    ' - // #enddocregion template - */ -// #docregion - template: '' -}) -export class AppComponent {} -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts deleted file mode 100644 index 36e3005e0a..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` - - - ` - // #enddocregion template -}) -export class AppComponent {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts deleted file mode 100644 index f28e4526e9..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` - - - ` -}) -export class AppComponent {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts deleted file mode 100644 index cab904e656..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` - - - - ` - // #enddocregion template -}) -export class AppComponent {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts deleted file mode 100644 index 4011f82b0c..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` - - - - ` -}) -export class AppComponent {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts deleted file mode 100644 index 4cce82ffcf..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component.0'; - -@NgModule({ -// #docregion imports - imports: [ BrowserModule ], -// #enddocregion imports - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts deleted file mode 100644 index bb0f7ec6f9..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -/* Angular Imports */ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -/* App Imports */ -// #enddocregion -import { AppComponent } from './app.component.1'; -/* -// #docregion -import { AppComponent } from './app.component'; -// #enddocregion -*/ -// #docregion -import { HighlightDirective } from './highlight.directive'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; - -/* Contact Related Imports */ -import { FormsModule } from '@angular/forms'; - -import { AwesomePipe } from './contact/awesome.pipe'; -import { ContactComponent } from './contact/contact.component.3'; -import { - ContactHighlightDirective as ContactHighlightDirective -} from './contact/contact-highlight.directive'; - -@NgModule({ -// #docregion imports - imports: [ BrowserModule, FormsModule ], -// #enddocregion imports -// #docregion declarations, directive, component - declarations: [ - AppComponent, - HighlightDirective, -// #enddocregion directive - TitleComponent, -// #enddocregion component - - AwesomePipe, - ContactComponent, - ContactHighlightDirective -// #docregion directive, component - ], -// #enddocregion declarations, directive, component -// #docregion providers - providers: [ UserService ], -// #enddocregion providers - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts deleted file mode 100644 index 9c848aec30..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docplaster -// #docregion -/* Angular Imports */ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -/* App Imports */ -// #enddocregion -import { AppComponent } from './app.component.1b'; -/* -// #docregion -import { AppComponent } from './app.component'; -// #enddocregion -*/ -// #docregion -import { HighlightDirective } from './highlight.directive'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; - -/* Contact Imports */ -// #enddocregion -import { ContactComponent } from './contact/contact.component.3'; -/* -// #docregion -import { ContactComponent } from './contact/contact.component'; -// #enddocregion -*/ -// #docregion -import { AwesomePipe } from './contact/awesome.pipe'; -import { ContactService } from './contact/contact.service'; -import { ContactHighlightDirective } from './contact/contact-highlight.directive'; - -@NgModule({ - imports: [ BrowserModule, FormsModule ], -// #docregion declarations - declarations: [ - AppComponent, HighlightDirective, TitleComponent, - AwesomePipe, ContactComponent, ContactHighlightDirective - ], -// #docregion providers - providers: [ ContactService, UserService ], -// #enddocregion providers - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts deleted file mode 100644 index 0da0fe334f..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts +++ /dev/null @@ -1,36 +0,0 @@ -// #docplaster -// #docregion -/* Angular Imports */ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -/* App Imports */ -// #enddocregion -import { AppComponent } from './app.component.2'; -/* -// #docregion -import { AppComponent } from './app.component'; -// #enddocregion -*/ -// #docregion -import { HighlightDirective } from './highlight.directive'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; - -/* Contact Imports */ -// #enddocregion -import { ContactModule } from './contact/contact.module.2'; -/* -// #docregion -import { ContactModule } from './contact/contact.module'; -// #enddocregion -*/ -// #docregion - -@NgModule({ - imports: [ BrowserModule, ContactModule ], - declarations: [ AppComponent, HighlightDirective, TitleComponent ], - providers: [ UserService ], - bootstrap: [ AppComponent ], -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts deleted file mode 100644 index 6fef183d9c..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docplaster -// #docregion -/* Angular Imports */ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -/* App Imports */ -// #enddocregion -import { AppComponent } from './app.component.3'; -/* -// #docregion -import { AppComponent } from './app.component'; -// #enddocregion -*/ -// #docregion -import { HighlightDirective } from './highlight.directive'; -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; - -/* Routing Module */ -// #enddocregion -import { AppRoutingModule } from './app-routing.module.3'; -/* -// #docregion -import { AppRoutingModule } from './app-routing.module'; -// #enddocregion -*/ -// #docregion - -@NgModule({ -// #docregion imports - imports: [ - BrowserModule, - AppRoutingModule - ], -// #enddocregion imports - providers: [ UserService ], - declarations: [ AppComponent, HighlightDirective, TitleComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts deleted file mode 100644 index c75c445a58..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docplaster -// #docregion -// #docregion v4 -/* Angular Imports */ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -/* App Imports */ -import { AppComponent } from './app.component'; - -/* Core Modules */ -import { CoreModule } from './core/core.module'; - -/* Routing Module */ -import { AppRoutingModule } from './app-routing.module'; - -@NgModule({ - // #docregion import-for-root - imports: [ - BrowserModule, -// #enddocregion v4 -// #enddocregion import-for-root -/* -// #docregion v4 - CoreModule, -// #enddocregion v4 -*/ -// #docregion import-for-root - CoreModule.forRoot({userName: 'Miss Marple'}), -// #docregion v4 - AppRoutingModule - ], - // #enddocregion import-for-root - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion v4 -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts deleted file mode 100644 index d6dce99901..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'awesome' }) -/** Precede the input string with the word "Awesome " */ -export class AwesomePipe implements PipeTransform { - transform(phrase: string) { - return phrase ? 'Awesome ' + phrase : ''; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts deleted file mode 100644 index a71dac6742..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docplaster -// Same directive name and selector as -// HighlightDirective in parent AppModule -// It selects for both input boxes and 'highlight' attr -// and it highlights in blue instead of gold - -// #docregion -import { Directive, ElementRef } from '@angular/core'; - -// Highlight the host element or any InputElement in blue -@Directive({ selector: '[highlight], input' }) -export class ContactHighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'powderblue'; - // #enddocregion - console.log(`* Contact highlight called for ${el.nativeElement.tagName}`); - // #docregion - } -} -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts deleted file mode 100644 index d89119a156..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { ContactComponent } from './contact.component.3'; - -const routes = [ - { path: 'contact', component: ContactComponent} -]; - -@NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ] -}) -export class ContactRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts deleted file mode 100644 index 46dd15867e..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { ContactComponent } from './contact.component'; - -// #docregion routing -const routes = [ - { path: 'contact', component: ContactComponent} -]; - -@NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ] -}) -export class ContactRoutingModule {} -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts deleted file mode 100644 index e674ec1323..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts +++ /dev/null @@ -1,53 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Contact, ContactService } from './contact.service'; -import { UserService } from '../user.service'; - -@Component({ - selector: 'app-contact', - templateUrl: './contact.component.html', - styleUrls: [ './contact.component.css' ] -}) -export class ContactComponent implements OnInit { - contact: Contact; - contacts: Contact[]; - - msg = 'Loading contacts ...'; - userName = ''; - - constructor(private contactService: ContactService, userService: UserService) { - this.userName = userService.userName; - } - - ngOnInit() { - this.contactService.getContacts().subscribe(contacts => { - this.msg = ''; - this.contacts = contacts; - this.contact = contacts[0]; - }); - } - - next() { - let ix = 1 + this.contacts.indexOf(this.contact); - if (ix >= this.contacts.length) { ix = 0; } - this.contact = this.contacts[ix]; - } - - onSubmit() { - // POST-DEMO TODO: do something like save it - this.displayMessage('Saved ' + this.contact.name); - } - - newContact() { - this.displayMessage('New contact'); - this.contact = {id: 42, name: ''}; - this.contacts.push(this.contact); - } - - /** Display a message briefly, then remove it. */ - displayMessage(msg: string) { - this.msg = msg; - setTimeout(() => this.msg = '', 1500); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css deleted file mode 100644 index d5bd954dde..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css +++ /dev/null @@ -1,32 +0,0 @@ -/* #docregion */ -.ng-valid[required] { - border-left: 5px solid #42A948; /* green */ -} - -.ng-invalid { - border-left: 5px solid #a94442; /* red */ -} - -.alert { - padding: 15px; - margin: 8px 0; - border: 1px solid transparent; - border-radius: 4px; -} -.alert-danger { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; -} - -.msg { - color: blue; - background-color: whitesmoke; - border: 1px solid transparent; - border-radius: 4px; - margin-bottom: 20px; -} - -.button-group { - padding-top: 12px; -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html deleted file mode 100644 index ecd5e62169..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html +++ /dev/null @@ -1,37 +0,0 @@ - -

    Contact of {{userName}}

    -
    {{msg}}
    - -
    - -

    {{ contact.name | awesome }}

    - - -
    - - - - - - -
    - Name is required -
    -
    - -
    - - - - - -
    -
    - diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts deleted file mode 100644 index 7fa44eebe5..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -// Exact copy except import UserService from core -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Contact, ContactService } from './contact.service'; -import { UserService } from '../core/user.service'; - -@Component({ - selector: 'app-contact', - templateUrl: './contact.component.html', - styleUrls: [ './contact.component.css' ] -}) -export class ContactComponent implements OnInit { - contact: Contact; - contacts: Contact[]; - - msg = 'Loading contacts ...'; - userName = ''; - - constructor(private contactService: ContactService, userService: UserService) { - this.userName = userService.userName; - } - - ngOnInit() { - this.contactService.getContacts().subscribe(contacts => { - this.msg = ''; - this.contacts = contacts; - this.contact = contacts[0]; - }); - } - - next() { - let ix = 1 + this.contacts.indexOf(this.contact); - if (ix >= this.contacts.length) { ix = 0; } - this.contact = this.contacts[ix]; - } - - onSubmit() { - // POST-DEMO TODO: do something like save it - this.displayMessage('Saved ' + this.contact.name); - } - - newContact() { - this.displayMessage('New contact'); - this.contact = {id: 42, name: ''}; - this.contacts.push(this.contact); - } - - /** Display a message briefly, then remove it. */ - displayMessage(msg: string) { - this.msg = msg; - setTimeout(() => this.msg = '', 1500); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts deleted file mode 100644 index fe2a756bd4..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - imports: [ - CommonModule - ], - declarations: [] -}) -export class ContactModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts deleted file mode 100644 index d83a26cd78..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AwesomePipe } from './awesome.pipe'; -// #enddocregion -import { ContactComponent } from './contact.component.3'; -/* -// #docregion -import { ContactComponent } from './contact.component'; -// #enddocregion -*/ -// #docregion -import { ContactHighlightDirective } from './contact-highlight.directive'; -import { ContactService } from './contact.service'; - -// #docregion class -@NgModule({ - imports: [ - CommonModule, - FormsModule - ], - declarations: [ - AwesomePipe, - ContactComponent, - ContactHighlightDirective - ], - // #docregion exports - exports: [ ContactComponent ], - // #enddocregion exports - providers: [ ContactService ] -}) -export class ContactModule { } -// #enddocregion class -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts deleted file mode 100644 index 3af9732e76..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AwesomePipe } from './awesome.pipe'; -// #enddocregion -import { ContactComponent } from './contact.component.3'; -/* -// #docregion -import { ContactComponent } from './contact.component'; -// #enddocregion -*/ -// #docregion -import { ContactHighlightDirective } from './contact-highlight.directive'; -import { ContactService } from './contact.service'; - -// #enddocregion -import { ContactRoutingModule } from './contact-routing.module.3'; -/* -// #docregion -import { ContactRoutingModule } from './contact-routing.module'; -// #enddocregion -*/ -// #docregion - -// #docregion class -@NgModule({ - imports: [ - CommonModule, - FormsModule, - ContactRoutingModule - ], - declarations: [ - AwesomePipe, - ContactComponent, - ContactHighlightDirective - ], - providers: [ ContactService ] -}) -export class ContactModule { } -// #enddocregion class -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts deleted file mode 100644 index 883331dfba..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; - -import { ContactComponent } from './contact.component'; -import { ContactService } from './contact.service'; -import { ContactRoutingModule } from './contact-routing.module'; - -// #docregion class -@NgModule({ - imports: [ - SharedModule, - ContactRoutingModule - ], - declarations: [ ContactComponent ], - providers: [ ContactService ] -}) -export class ContactModule { } -// #enddocregion class diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts deleted file mode 100644 index ff21a65bce..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docplaster -// #docregion -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Contact { - constructor(public id: number, public name: string) { } -} - -const CONTACTS: Contact[] = [ - new Contact(21, 'Sam Spade'), - new Contact(22, 'Nick Danger'), - new Contact(23, 'Nancy Drew') -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves contacts from a server */ -@Injectable() -export class ContactService implements OnDestroy { -// #enddocregion - constructor() { console.log('ContactService instance created.'); } - ngOnDestroy() { console.log('ContactService instance destroyed.'); } - -// #docregion - getContacts(): Observable { - return of(CONTACTS).pipe(delay(FETCH_LATENCY)); - } - - getContact(id: number | string): Observable { - return of(CONTACTS.find(contact => contact.id === +id)) - .pipe(delay(FETCH_LATENCY)); - } -} -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts deleted file mode 100644 index 27cb9a2193..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable:member-ordering no-unused-variable */ -// #docplaster -// #docregion -// #docregion v4 -import { - ModuleWithProviders, NgModule, - Optional, SkipSelf } from '@angular/core'; - -import { CommonModule } from '@angular/common'; - -import { TitleComponent } from './title.component'; -import { UserService } from './user.service'; -// #enddocregion -import { UserServiceConfig } from './user.service'; - -// #docregion v4 -@NgModule({ - imports: [ CommonModule ], - declarations: [ TitleComponent ], - exports: [ TitleComponent ], - providers: [ UserService ] -}) -export class CoreModule { -// #enddocregion v4 - - // #docregion ctor - constructor (@Optional() @SkipSelf() parentModule: CoreModule) { - if (parentModule) { - throw new Error( - 'CoreModule is already loaded. Import it in the AppModule only'); - } - } - // #enddocregion ctor - - // #docregion for-root - static forRoot(config: UserServiceConfig): ModuleWithProviders { - return { - ngModule: CoreModule, - providers: [ - {provide: UserServiceConfig, useValue: config } - ] - }; - } - // #enddocregion for-root -// #docregion v4 -} -// #enddocregion v4 -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html b/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html deleted file mode 100644 index be114caa73..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html +++ /dev/null @@ -1,6 +0,0 @@ - -

    {{title}}

    -

    - Welcome, {{user}} -

    - diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts deleted file mode 100644 index 51d9c242db..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// Exact copy of app/title.component.ts except import UserService from shared -import { Component, Input } from '@angular/core'; -import { UserService } from '../core/user.service'; - -@Component({ - selector: 'app-title', - templateUrl: './title.component.html', -}) -export class TitleComponent { - title = 'Angular Modules'; - user = ''; - - constructor(userService: UserService) { - this.user = userService.userName; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts deleted file mode 100644 index 8fe839075e..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -// Crazy copy of the app/user.service -// Proves that UserService is an app-wide singleton and only instantiated once -// IFF shared.module follows the `forRoot` pattern -// -// If it didn't, a new instance of UserService would be created -// after each lazy load and the userName would double up. - -import { Injectable, Optional } from '@angular/core'; - -let nextId = 1; - -export class UserServiceConfig { - userName = 'Philip Marlowe'; -} - -@Injectable() -export class UserService { - id = nextId++; - private _userName = 'Sherlock Holmes'; - - // #docregion ctor - constructor(@Optional() config: UserServiceConfig) { - if (config) { this._userName = config.userName; } - } - // #enddocregion ctor - - get userName() { - // Demo: add a suffix if this service has been created more than once - const suffix = this.id > 1 ? ` times ${this.id}` : ''; - return this._userName + suffix; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts deleted file mode 100644 index 30a1d0e7bf..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -@Component({ - template: ` -

    Crisis Detail

    -
    Crisis id: {{id}}
    -
    - Crisis List - ` -}) -export class CrisisDetailComponent implements OnInit { - id: number; - constructor(private route: ActivatedRoute) { } - - ngOnInit() { - this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts deleted file mode 100644 index 858f749416..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Crisis, - CrisisService } from './crisis.service'; - -@Component({ - template: ` -

    Crisis List

    - - ` -}) -export class CrisisListComponent { - crises: Observable; - - constructor(private crisisService: CrisisService) { - this.crises = this.crisisService.getCrises(); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts deleted file mode 100644 index c60efa8cb4..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; - -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -const routes: Routes = [ - { path: '', redirectTo: 'list', pathMatch: 'full'}, - { path: 'list', component: CrisisListComponent }, - { path: ':id', component: CrisisDetailComponent } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class CrisisRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts deleted file mode 100644 index f557bd6423..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; -import { CrisisService } from './crisis.service'; -import { CrisisRoutingModule } from './crisis-routing.module'; - -@NgModule({ - imports: [ CommonModule, CrisisRoutingModule ], - declarations: [ CrisisDetailComponent, CrisisListComponent ], - providers: [ CrisisService ] -}) -export class CrisisModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts deleted file mode 100644 index f91eb995ea..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Crisis { - constructor(public id: number, public name: string) { } -} - -const CRISES: Crisis[] = [ - new Crisis(1, 'Dragon Burning Cities'), - new Crisis(2, 'Sky Rains Great White Sharks'), - new Crisis(3, 'Giant Asteroid Heading For Earth'), - new Crisis(4, 'Procrastinators Meeting Delayed Again'), -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves crises from a server */ -@Injectable() -export class CrisisService implements OnDestroy { - constructor() { console.log('CrisisService instance created.'); } - ngOnDestroy() { console.log('CrisisService instance destroyed.'); } - - getCrises(): Observable { - return of(CRISES).pipe(delay(FETCH_LATENCY)); - } - - getCrisis(id: number | string): Observable { - return of(CRISES.find(crisis => crisis.id === +id)) - .pipe(delay(FETCH_LATENCY)); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts deleted file mode 100644 index 2c46622bc4..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { Hero, - HeroService } from './hero.service'; - -@Component({ - template: ` -

    Hero Detail

    -
    -
    Id: {{hero.id}}

    - -
    -
    - Hero List - ` -}) -export class HeroDetailComponent implements OnInit { - hero: Hero; - - constructor( - private route: ActivatedRoute, - private heroService: HeroService) { } - - ngOnInit() { - let id = parseInt(this.route.snapshot.paramMap.get('id'), 10); - this.heroService.getHero(id).subscribe(hero => this.hero = hero); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts deleted file mode 100644 index 8ac492403e..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Hero, - HeroService } from './hero.service'; - -@Component({ - template: ` -

    Hero List

    - - ` -}) -export class HeroListComponent { - heroes: Observable; - constructor(private heroService: HeroService) { - this.heroes = this.heroService.getHeroes(); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts deleted file mode 100644 index 588ffd94be..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; - -import { HeroComponent } from './hero.component.3'; -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -const routes: Routes = [ - { path: '', - component: HeroComponent, - children: [ - { path: '', component: HeroListComponent }, - { path: ':id', component: HeroDetailComponent } - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class HeroRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts deleted file mode 100644 index d97aab3beb..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; - -import { HeroComponent } from './hero.component'; -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -const routes: Routes = [ - { path: '', - component: HeroComponent, - children: [ - { path: '', component: HeroListComponent }, - { path: ':id', component: HeroDetailComponent } - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class HeroRoutingModule {} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts deleted file mode 100644 index d52bc253df..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; - -import { HeroService } from './hero.service'; -import { UserService } from '../user.service'; - -@Component({ - template: ` -

    Heroes of {{userName}}

    - - `, - providers: [ HeroService ] -}) -export class HeroComponent { - userName = ''; - constructor(userService: UserService) { - this.userName = userService.userName; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts deleted file mode 100644 index 86338fb0ae..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// Exact copy except import UserService from core -import { Component } from '@angular/core'; - -import { HeroService } from './hero.service'; -import { UserService } from '../core/user.service'; - -@Component({ - template: ` -

    Heroes of {{userName}}

    - - `, - providers: [ HeroService ] -}) -export class HeroComponent { - userName = ''; - constructor(userService: UserService) { - this.userName = userService.userName; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts deleted file mode 100644 index acd5e28b15..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { HeroComponent } from './hero.component.3'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { HeroRoutingModule } from './hero-routing.module.3'; - -import { HighlightDirective } from './highlight.directive'; - -// #docregion class -@NgModule({ - imports: [ CommonModule, FormsModule, HeroRoutingModule ], - declarations: [ - HeroComponent, HeroDetailComponent, HeroListComponent, - HighlightDirective - ] -}) -export class HeroModule { } -// #enddocregion class diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts deleted file mode 100644 index 98d7b76b00..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { SharedModule } from '../shared/shared.module'; - -import { HeroComponent } from './hero.component'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroListComponent } from './hero-list.component'; -import { HeroRoutingModule } from './hero-routing.module'; - -@NgModule({ - imports: [ SharedModule, HeroRoutingModule ], - declarations: [ - HeroComponent, HeroDetailComponent, HeroListComponent, - ] -}) -export class HeroModule { } diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts deleted file mode 100644 index da3677845f..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Hero { - constructor(public id: number, public name: string) { } -} - -const HEROES: Hero[] = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan') -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves heroes from a server */ -@Injectable() -export class HeroService implements OnDestroy { - - constructor() { console.log('HeroService instance created.'); } - ngOnDestroy() { console.log('HeroService instance destroyed.'); } - - getHeroes(): Observable { - return of(HEROES).pipe(delay(FETCH_LATENCY)); - } - - getHero(id: number | string): Observable { - return of(HEROES.find(hero => hero.id === +id)) - .pipe(delay(FETCH_LATENCY)); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts deleted file mode 100644 index d7e39afd05..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Directive, ElementRef } from '@angular/core'; - -// Same directive name and selector as -// HighlightDirective in parent AppRootModule -// It selects for both input boxes and 'highlight' attr -// and it highlights in beige instead of yellow -@Directive({ selector: '[highlight]' }) -export class HighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'beige'; - console.log(`* Hero highlight called for ${el.nativeElement.tagName}`); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts deleted file mode 100644 index cf6b75ebfa..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docplaster -// #docregion -import { Directive, ElementRef } from '@angular/core'; - -// Highlight the host element in gold -@Directive({ selector: '[highlight]' }) -export class HighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'gold'; - // #enddocregion - console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`); - // #docregion - } -} -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts deleted file mode 100644 index a1a0001d24..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts +++ /dev/null @@ -1,10 +0,0 @@ -// Exact copy of contact.awesome.pipe -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'awesome' }) -/** Precede the input string with the word "Awesome " */ -export class AwesomePipe implements PipeTransform { - transform(phrase: string) { - return phrase ? 'Awesome ' + phrase : ''; - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts deleted file mode 100644 index ee874fa536..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts +++ /dev/null @@ -1,12 +0,0 @@ -// Exact copy of contact/highlight.directive except for color and message -import { Directive, ElementRef } from '@angular/core'; - -@Directive({ selector: '[highlight], input' }) -// Highlight the host element or any InputElement in gray -export class HighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'lightgray'; - console.log( - `* Shared highlight called for ${el.nativeElement.tagName}`); - } -} diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts deleted file mode 100644 index 2da7d7b2a5..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AwesomePipe } from './awesome.pipe'; -import { HighlightDirective } from './highlight.directive'; - -// #docregion module -@NgModule({ - imports: [ CommonModule ], - declarations: [ AwesomePipe, HighlightDirective ], - exports: [ AwesomePipe, HighlightDirective, - CommonModule, FormsModule ] -}) -export class SharedModule { } -// #enddocregion module -// #enddocregion diff --git a/docs_app/content/examples/ngmodule-faq/src/app/title.component.html b/docs_app/content/examples/ngmodule-faq/src/app/title.component.html deleted file mode 100644 index fa8989ac6c..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/title.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - -

    {{title}}

    - - -

    - Welcome, {{user}} -

    - - diff --git a/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts deleted file mode 100644 index b0761208a0..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docplaster -// #docregion -// #docregion v1 -import { Component } from '@angular/core'; -// #enddocregion v1 -import { UserService } from './user.service'; -// #docregion v1 - -@Component({ - selector: 'app-title', - templateUrl: './title.component.html' -}) -export class TitleComponent { - title = 'Angular Modules'; -// #enddocregion v1 - user = ''; - - constructor(userService: UserService) { - this.user = userService.userName; - } -// #docregion v1 -} -// #enddocregion v1 diff --git a/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts deleted file mode 100644 index 7d996b26fa..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -/** Dummy version of an authenticated user service */ -export class UserService { - userName = 'Sherlock Holmes'; -} diff --git a/docs_app/content/examples/ngmodule-faq/src/index.0.html b/docs_app/content/examples/ngmodule-faq/src/index.0.html deleted file mode 100644 index 4802670310..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.0.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - NgModule Minimal - - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/index.1.html b/docs_app/content/examples/ngmodule-faq/src/index.1.html deleted file mode 100644 index 2da2e67b4b..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.1.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - NgModule Minimal - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/index.1b.html b/docs_app/content/examples/ngmodule-faq/src/index.1b.html deleted file mode 100644 index 2da2e67b4b..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.1b.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - NgModule Minimal - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/index.2.html b/docs_app/content/examples/ngmodule-faq/src/index.2.html deleted file mode 100644 index 2da2e67b4b..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.2.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - NgModule Minimal - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/index.3.html b/docs_app/content/examples/ngmodule-faq/src/index.3.html deleted file mode 100644 index 2da2e67b4b..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.3.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - NgModule Minimal - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/index.html b/docs_app/content/examples/ngmodule-faq/src/index.html deleted file mode 100644 index cb62943973..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - NgModule Deluxe - - - - - - - - diff --git a/docs_app/content/examples/ngmodule-faq/src/main-static.ts b/docs_app/content/examples/ngmodule-faq/src/main-static.ts deleted file mode 100644 index a1bcf466d2..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main-static.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docplaster -/* -// #docregion -// The browser platform without a compiler -import { platformBrowser } from '@angular/platform-browser'; - -// The app module factory produced by the static offline compiler -import { AppModuleNgFactory } from './app/app.module.ngfactory'; - -// Launch with the app module factory. -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); -// #enddocregion -*/ diff --git a/docs_app/content/examples/ngmodule-faq/src/main.0.ts b/docs_app/content/examples/ngmodule-faq/src/main.0.ts deleted file mode 100644 index ed431adb1a..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.0.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module.0'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/src/main.1.ts b/docs_app/content/examples/ngmodule-faq/src/main.1.ts deleted file mode 100644 index 1b8a770526..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.1.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module.1'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/src/main.1b.ts b/docs_app/content/examples/ngmodule-faq/src/main.1b.ts deleted file mode 100644 index a0095ac64d..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.1b.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module.1b'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/src/main.2.ts b/docs_app/content/examples/ngmodule-faq/src/main.2.ts deleted file mode 100644 index 4349ed7403..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.2.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module.2'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/src/main.3.ts b/docs_app/content/examples/ngmodule-faq/src/main.3.ts deleted file mode 100644 index 633b21147f..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.3.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module.3'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/src/main.ts b/docs_app/content/examples/ngmodule-faq/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/ngmodule-faq/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodule-faq/stackblitz.json b/docs_app/content/examples/ngmodule-faq/stackblitz.json deleted file mode 100644 index b56eaeebf8..0000000000 --- a/docs_app/content/examples/ngmodule-faq/stackblitz.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "description": "NgModule Final", - "files": [ - "src/app/app.component.ts", - "src/app/app.module.ts", - "src/app/app-routing.module.ts", - - "src/app/contact/contact.component.css", - "src/app/contact/contact.component.html", - "src/app/contact/contact.service.ts", - - "src/app/contact/contact.component.ts", - "src/app/contact/contact.module.ts", - "src/app/contact/contact-routing.module.ts", - - "src/app/crisis/*.ts", - - "src/app/hero/hero-detail.component.ts", - "src/app/hero/hero-list.component.ts", - "src/app/hero/hero.service.ts", - - "src/app/hero/hero.component.ts", - "src/app/hero/hero.module.ts", - "src/app/hero/hero-routing.module.ts", - - "src/app/core/*.css", - "src/app/core/*.html", - "src/app/core/*.ts", - - "src/app/shared/*.css", - "src/app/shared/*.html", - "src/app/shared/*.ts", - - "src/main.ts", - "src/styles.css", - "src/index.html" - ], - "main": "src/index.html", - "tags": ["NgModule"] -} diff --git a/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts b/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts deleted file mode 100644 index e0f080e70f..0000000000 --- a/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,223 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('NgModule-example', function () { - - // helpers - const gold = 'rgba(255, 215, 0, 1)'; - const powderblue = 'rgba(176, 224, 230, 1)'; - const lightgray = 'rgba(239, 238, 237, 1)'; - const white = 'rgba(0, 0, 0, 0)'; - - function getCommonsSectionStruct() { - const buttons = element.all(by.css('nav a')); - - return { - title: element.all(by.tagName('h1')).get(0), - subtitle: element.all(by.css('app-title p i')).get(0), - contactButton: buttons.get(0), - itemButton: buttons.get(1), - customersButton: buttons.get(2) - }; - } - - function getContactSectionStruct() { - const buttons = element.all(by.css('app-contact form button')); - - return { - header: element.all(by.css('app-contact h2')).get(0), - popupMessage: element.all(by.css('app-contact div')).get(0), - contactNameHeader: element.all(by.css('app-contact form h3')).get(0), - input: element.all(by.css('app-contact form input')).get(0), - validationError: element.all(by.css('app-contact form .alert')).get(0), - saveButton: buttons.get(0), // can't be tested - nextContactButton: buttons.get(1), - newContactButton: buttons.get(2) - }; - } - - function getItemSectionStruct() { - return { - title: element.all(by.css('ng-component h3')).get(0), - items: element.all(by.css('ng-component a')), - itemId: element.all(by.css('ng-component div')).get(0), - listLink: element.all(by.css('ng-component a')).get(0), - }; - } - - function getCustomersSectionStruct() { - return { - header: element.all(by.css('ng-component h2')).get(0), - title: element.all(by.css('ng-component h3')).get(0), - items: element.all(by.css('ng-component a')), - itemId: element.all(by.css('ng-component ng-component div div')).get(0), - itemInput: element.all(by.css('ng-component ng-component input')).get(0), - listLink: element.all(by.css('ng-component ng-component a')).get(0), - }; - } - - // tests - function appTitleTests(color: string, name?: string) { - return function() { - it('should have a gray header', function() { - const commons = getCommonsSectionStruct(); - expect(commons.title.getCssValue('backgroundColor')).toBe(color); - }); - - it('should welcome us', function () { - const commons = getCommonsSectionStruct(); - expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes')); - }); - }; - } - - function contactTests(color: string, name?: string) { - return function() { - it('shows the contact\'s owner', function() { - const contacts = getContactSectionStruct(); - expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes')); - }); - - it('can cycle between contacts', function () { - const contacts = getContactSectionStruct(); - const nextButton = contacts.nextContactButton; - expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha'); - expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color); - nextButton.click().then(function () { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia'); - return nextButton.click(); - }).then(function () { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina'); - }); - }); - - it('can change an existing contact', function () { - const contacts = getContactSectionStruct(); - contacts.input.sendKeys('a'); - expect(contacts.input.getCssValue('backgroundColor')).toBe(color); - expect(contacts.contactNameHeader.getText()).toBe('Awesome Yashaa'); - }); - - it('can create a new contact', function () { - const contacts = getContactSectionStruct(); - const newContactButton = contacts.newContactButton; - newContactButton.click().then(function () { - expect(contacts.validationError.getText()).toBe('Name is required'); - contacts.input.sendKeys('John Doe'); - expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe'); - expect(contacts.validationError.getText()).toBe(''); - }); - }); - }; - } - - describe('index.html', function () { - beforeEach(function () { - browser.get(''); - }); - - describe('app-title', appTitleTests(white, 'Miss Marple')); - - describe('contact', contactTests(lightgray, 'Miss Marple')); - - describe('item center', function () { - beforeEach(function () { - getCommonsSectionStruct().itemButton.click(); - }); - - it('shows a list of items', function () { - const item = getItemSectionStruct(); - expect(item.title.getText()).toBe('Items List'); - expect(item.items.count()).toBe(4); - expect(item.items.get(0).getText()).toBe('1 - Sticky notes'); - }); - - it('can navigate to one item details', function () { - const item = getItemSectionStruct(); - item.items.get(0).click().then(function() { - expect(item.itemId.getText()).toBe('Item id: 1'); - return item.listLink.click(); - }).then(function () { - // We are back to the list - expect(item.items.count()).toBe(4); - }); - }); - }); - - describe('customers', function () { - beforeEach(function () { - getCommonsSectionStruct().customersButton.click(); - }); - - it('shows a list of customers', function() { - const customers = getCustomersSectionStruct(); - expect(customers.header.getText()).toBe('Customers of Miss Marple times 2'); - expect(customers.title.getText()).toBe('Customer List'); - expect(customers.items.count()).toBe(6); - expect(customers.items.get(0).getText()).toBe('11 - Julian'); - }); - - it('can navigate and edit one customer details', function () { - const customers = getCustomersSectionStruct(); - customers.items.get(0).click().then(function () { - expect(customers.itemId.getText()).toBe('Id: 11'); - customers.itemInput.sendKeys(' try'); - return customers.listLink.click(); - }).then(function () { - // We are back to the list - expect(customers.items.count()).toBe(6); - expect(customers.items.get(0).getText()).toBe('11 - Julian try'); - }); - }); - }); - }); - - // describe('index.0.html', function() { - // beforeEach(function () { - // browser.get('index.0.html'); - // }); - - // it('has a title', function () { - // const title = element.all(by.tagName('h1')).get(0); - // expect(title.getText()).toBe('Minimal NgModule'); - // }); - // }); - - // describe('index.1.html', function () { - // beforeEach(function () { - // browser.get('index.1.html'); - // }); - - // describe('app-title', appTitleTests(powderblue)); - // }); - - // describe('index.1b.html', function () { - // beforeEach(function () { - // browser.get('index.1b.html'); - // }); - - // describe('app-title', appTitleTests(powderblue)); - - // describe('contact', contactTests(powderblue)); - // }); - - // describe('index.2.html', function () { - // beforeEach(function () { - // browser.get('index.2.html'); - // }); - - // describe('app-title', appTitleTests(gold)); - - // describe('contact', contactTests(powderblue)); - // }); - - // describe('index.3.html', function () { - // beforeEach(function () { - // browser.get('index.3.html'); - // }); - - // describe('app-title', appTitleTests(gold)); - // }); - -}); diff --git a/docs_app/content/examples/ngmodules/example-config.json b/docs_app/content/examples/ngmodules/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/docs_app/content/examples/ngmodules/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts deleted file mode 100644 index f4cd4ba03a..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -export const routes: Routes = [ - { path: '', redirectTo: 'contact', pathMatch: 'full'}, - { path: 'items', loadChildren: 'app/items/items.module#ItemsModule' }, - { path: 'customers', loadChildren: 'app/customers/customers.module#CustomersModule' } -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.css b/docs_app/content/examples/ngmodules/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.html b/docs_app/content/examples/ngmodules/src/app/app.component.html deleted file mode 100644 index b6931b538a..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/app.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    - {{title}} -

    diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts deleted file mode 100644 index 13c632d676..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }); - TestBed.compileComponents(); - }); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.ts b/docs_app/content/examples/ngmodules/src/app/app.component.ts deleted file mode 100644 index 41c28b9ed6..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` - - - - ` -}) -export class AppComponent { -} diff --git a/docs_app/content/examples/ngmodules/src/app/app.module.ts b/docs_app/content/examples/ngmodules/src/app/app.module.ts deleted file mode 100644 index a19fbbae52..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/app.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -/* App Root */ -import { AppComponent } from './app.component'; - -/* Feature Modules */ -import { ContactModule } from './contact/contact.module'; -// #docregion import-for-root -import { CoreModule } from './core/core.module'; -// #enddocregion import-for-root - -/* Routing Module */ -import { AppRoutingModule } from './app-routing.module'; - - -// #docregion import-for-root -@NgModule({ - imports: [ - BrowserModule, - ContactModule, - CoreModule.forRoot({userName: 'Miss Marple'}), - AppRoutingModule - ], - // #enddocregion import-for-root - providers: [], - declarations: [ - AppComponent - ], - bootstrap: [AppComponent] - // #docregion import-for-root -}) -export class AppModule { } -// #enddocregion import-for-root diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts deleted file mode 100644 index 1bd2521873..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { ContactComponent } from './contact.component'; - -const routes = [ - { path: 'contact', component: ContactComponent} -]; - -@NgModule({ - imports: [ RouterModule.forChild(routes) ], - exports: [ RouterModule ] -}) -export class ContactRoutingModule {} - diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.css b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html deleted file mode 100644 index bd5edd904c..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html +++ /dev/null @@ -1,32 +0,0 @@ - -

    Contact of {{userName}}

    -
    {{msg}}
    - -
    -

    {{ contact.name | awesome }}

    - -
    - - - - -
    - Name is required -
    -
    - -
    - - - - - -
    -
    diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts deleted file mode 100644 index 427633e0a0..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ContactComponent } from './contact.component'; - -describe('ContactComponent', () => { - let component: ContactComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ContactComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ContactComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts deleted file mode 100644 index 2c4c083ba2..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -// Exact copy except import UserService from core -import { Component, OnInit } from '@angular/core'; - -import { Contact, ContactService } from './contact.service'; -import { UserService } from '../core/user.service'; - -@Component({ - selector: 'app-contact', - templateUrl: './contact.component.html', - styleUrls: [ './contact.component.css' ] -}) -export class ContactComponent implements OnInit { - contact: Contact; - contacts: Contact[]; - - msg = 'Loading contacts ...'; - userName = ''; - - constructor(private contactService: ContactService, userService: UserService) { - this.userName = userService.userName; - } - - ngOnInit() { - this.contactService.getContacts().subscribe(contacts => { - this.msg = ''; - this.contacts = contacts; - this.contact = contacts[0]; - }); - } - - next() { - let ix = 1 + this.contacts.indexOf(this.contact); - if (ix >= this.contacts.length) { ix = 0; } - this.contact = this.contacts[ix]; - } - - onSubmit() { - // POST-DEMO TODO: do something like save it - this.displayMessage('Saved ' + this.contact.name); - } - - newContact() { - this.displayMessage('New contact'); - this.contact = {id: 42, name: ''}; - this.contacts.push(this.contact); - } - - /** Display a message briefly, then remove it. */ - displayMessage(msg: string) { - this.msg = msg; - setTimeout(() => this.msg = '', 1500); - } -} - diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts deleted file mode 100644 index 008f82433a..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; - -import { ContactComponent } from './contact.component'; -import { ContactService } from './contact.service'; -import { ContactRoutingModule } from './contact-routing.module'; - -@NgModule({ - imports: [ - SharedModule, - ContactRoutingModule - ], - declarations: [ ContactComponent ], - providers: [ ContactService ] -}) -export class ContactModule { } diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts deleted file mode 100644 index a140538ad9..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Contact { - constructor(public id: number, public name: string) { } -} - -const CONTACTS: Contact[] = [ - new Contact(21, 'Yasha'), - new Contact(22, 'Iulia'), - new Contact(23, 'Karina') -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves contacts from a server */ -@Injectable() -export class ContactService implements OnDestroy { - - constructor() { console.log('ContactService instance created.'); } - ngOnDestroy() { console.log('ContactService instance destroyed.'); } - - getContacts(): Observable { - return of(CONTACTS).pipe(delay(FETCH_LATENCY)); - } - - getContact(id: number | string): Observable { - const contact$ = of(CONTACTS.find(contact => contact.id === +id)); - return contact$.pipe(delay(FETCH_LATENCY)); - } -} - - diff --git a/docs_app/content/examples/ngmodules/src/app/core/core.module.ts b/docs_app/content/examples/ngmodules/src/app/core/core.module.ts deleted file mode 100644 index 0d4c80fe74..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/core/core.module.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docregion whole-core-module -import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core'; - -import { CommonModule } from '@angular/common'; - -import { TitleComponent } from './title.component'; -// #docregion user-service -import { UserService } from './user.service'; -// #enddocregion user-service -import { UserServiceConfig } from './user.service'; - - -// #docregion user-service -@NgModule({ - // #enddocregion user-service - imports: [ CommonModule ], - declarations: [ TitleComponent ], - exports: [ TitleComponent ], - // #docregion user-service - providers: [ UserService ] -}) -export class CoreModule { - // #enddocregion user-service - // #docregion ctor - constructor (@Optional() @SkipSelf() parentModule: CoreModule) { - if (parentModule) { - throw new Error( - 'CoreModule is already loaded. Import it in the AppModule only'); - } - } - // #enddocregion ctor - - // #docregion for-root - static forRoot(config: UserServiceConfig): ModuleWithProviders { - return { - ngModule: CoreModule, - providers: [ - {provide: UserServiceConfig, useValue: config } - ] - }; - } - // #enddocregion for-root - // #docregion user-service -} -// #enddocregion user-service -// #enddocregion whole-core-module diff --git a/docs_app/content/examples/ngmodules/src/app/core/title.component.html b/docs_app/content/examples/ngmodules/src/app/core/title.component.html deleted file mode 100644 index ff1975fd68..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/core/title.component.html +++ /dev/null @@ -1,4 +0,0 @@ -

    {{title}}

    -

    - Welcome, {{user}} -

    diff --git a/docs_app/content/examples/ngmodules/src/app/core/title.component.ts b/docs_app/content/examples/ngmodules/src/app/core/title.component.ts deleted file mode 100644 index 979a5803ab..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/core/title.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { UserService } from '../core/user.service'; - -@Component({ - selector: 'app-title', - templateUrl: './title.component.html', -}) -export class TitleComponent { - title = 'NgModules'; - user = ''; - - constructor(userService: UserService) { - this.user = userService.userName; - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/core/user.service.ts b/docs_app/content/examples/ngmodules/src/app/core/user.service.ts deleted file mode 100644 index d1ab1cd6b3..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/core/user.service.ts +++ /dev/null @@ -1,31 +0,0 @@ -// Proves that UserService is an app-wide singleton and only instantiated once -// IFF shared.module follows the `forRoot` pattern. -// -// If it didn't, a new instance of UserService would be created -// after each lazy load and the userName would double up. - -import { Injectable, Optional } from '@angular/core'; - -let nextId = 1; - -export class UserServiceConfig { - userName = 'Philip Marlowe'; -} - -@Injectable() -export class UserService { - id = nextId++; - private _userName = 'Sherlock Holmes'; - - // #docregion ctor - constructor(@Optional() config: UserServiceConfig) { - if (config) { this._userName = config.userName; } - } - // #enddocregion ctor - - get userName() { - // Demo: add a suffix if this service has been created more than once - const suffix = this.id > 1 ? ` times ${this.id}` : ''; - return this._userName + suffix; - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts deleted file mode 100644 index 11683c9d68..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { Customer, - CustomersService } from './customers.service'; - -@Component({ - template: ` -

    Customer Detail

    -
    -
    Id: {{customer.id}}

    - -
    -
    - Customer List - ` -}) -export class CustomersDetailComponent implements OnInit { - customer: Customer; - - constructor( - private route: ActivatedRoute, - private customersService: CustomersService) { } - - ngOnInit() { - let id = parseInt(this.route.snapshot.paramMap.get('id'), 10); - this.customersService.getCustomer(id).subscribe(customer => this.customer = customer); - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts deleted file mode 100644 index d29ef6dcfd..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Customer, - CustomersService } from './customers.service'; - -@Component({ - template: ` -

    Customer List

    - - ` -}) - -export class CustomersListComponent { - customers: Observable; - constructor(private customersService: CustomersService) { - this.customers = this.customersService.getCustomers(); - } -} - diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts deleted file mode 100644 index 3d268d46b6..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; - -import { CustomersComponent } from './customers.component'; -import { CustomersListComponent } from './customers-list.component'; -import { CustomersDetailComponent } from './customers-detail.component'; - -const routes: Routes = [ - { path: '', - component: CustomersComponent, - children: [ - { path: '', component: CustomersListComponent }, - { path: ':id', component: CustomersDetailComponent } - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class CustomersRoutingModule {} diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts deleted file mode 100644 index a32ea88712..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -import { CustomersService } from './customers.service'; -import { UserService } from '../core/user.service'; - -@Component({ - template: ` -

    Customers of {{userName}}

    - - `, - providers: [ UserService ] -}) -export class CustomersComponent { - userName = ''; - constructor(userService: UserService) { - this.userName = userService.userName; - } -} - diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts deleted file mode 100644 index 3249b16ac7..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { SharedModule } from '../shared/shared.module'; - -import { CustomersComponent } from './customers.component'; -import { CustomersDetailComponent } from './customers-detail.component'; -import { CustomersListComponent } from './customers-list.component'; -import { CustomersRoutingModule } from './customers-routing.module'; -import { CustomersService } from './customers.service'; - - -@NgModule({ - imports: [ SharedModule, CustomersRoutingModule ], - declarations: [ - CustomersComponent, CustomersDetailComponent, CustomersListComponent, - ], - providers: [CustomersService] -}) -export class CustomersModule { } diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts deleted file mode 100644 index 0e4d50960b..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Customer { - constructor(public id: number, public name: string) { } -} - -const CUSTOMERS: Customer[] = [ - new Customer(11, 'Julian'), - new Customer(12, 'Eric'), - new Customer(13, 'Momi'), - new Customer(14, 'Madeleine'), - new Customer(15, 'Seth'), - new Customer(16, 'Teresa') -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves heroes from a server */ -@Injectable() -export class CustomersService implements OnDestroy { - - constructor() { console.log('CustomersService instance created.'); } - ngOnDestroy() { console.log('CustomersService instance destroyed.'); } - - getCustomers(): Observable { - return of(CUSTOMERS).pipe(delay(FETCH_LATENCY)); - } - - getCustomer(id: number | string): Observable { - const customer$ = of(CUSTOMERS.find(customer => customer.id === +id)); - return customer$.pipe(delay(FETCH_LATENCY)); - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts deleted file mode 100644 index a4580ad234..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { Item, - ItemService } from './items.service'; - -@Component({ - template: ` -

    Item Detail

    -
    Item id: {{id}}
    -
    - Items List - ` -}) -export class ItemsDetailComponent implements OnInit { - id: number; - constructor(private route: ActivatedRoute) { } - - ngOnInit() { - this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10); - } -} - diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts deleted file mode 100644 index c4859c93cb..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable }from 'rxjs'; - -import { Item, - ItemService } from './items.service'; - -@Component({ - template: ` -

    Items List

    - - ` -}) -export class ItemsListComponent { - items: Observable; - - constructor(private itemService: ItemService) { - this.items = this.itemService.getItems(); - } - -} - diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts deleted file mode 100644 index 55f0947a23..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, - RouterModule } from '@angular/router'; - -import { ItemsListComponent } from './items-list.component'; -import { ItemsDetailComponent } from './items-detail.component'; - -const routes: Routes = [ - { path: '', redirectTo: 'list', pathMatch: 'full'}, - { path: 'list', component: ItemsListComponent }, - { path: ':id', component: ItemsDetailComponent } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ItemsRoutingModule {} - diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.css b/docs_app/content/examples/ngmodules/src/app/items/items.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.html b/docs_app/content/examples/ngmodules/src/app/items/items.component.html deleted file mode 100644 index c919a92a2a..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    - items works! -

    diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts deleted file mode 100644 index b77cce74ec..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItemsComponent } from './items.component'; - -describe('ItemsComponent', () => { - let component: ItemsComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ItemsComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items.component.ts deleted file mode 100644 index 26696de194..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-items', - templateUrl: './items.component.html', - styleUrls: ['./items.component.css'] -}) -export class ItemsComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.module.ts b/docs_app/content/examples/ngmodules/src/app/items/items.module.ts deleted file mode 100644 index bc749b582a..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { ItemsComponent } from './items.component'; -import { ItemsListComponent } from './items-list.component'; -import { ItemsDetailComponent } from './items-detail.component'; -import { ItemService } from './items.service'; -import { ItemsRoutingModule } from './items-routing.module'; - -@NgModule({ - imports: [ CommonModule, ItemsRoutingModule ], - declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ], - providers: [ ItemService ] -}) -export class ItemsModule {} diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.service.ts b/docs_app/content/examples/ngmodules/src/app/items/items.service.ts deleted file mode 100644 index 39968b452f..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/items/items.service.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Injectable, OnDestroy } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -export class Item { - constructor(public id: number, public name: string) { } -} - -const ITEMS: Item[] = [ - new Item(1, 'Sticky notes'), - new Item(2, 'Dry erase markers'), - new Item(3, 'Erasers'), - new Item(4, 'Whiteboard cleaner'), -]; - -const FETCH_LATENCY = 500; - -/** Simulate a data service that retrieves crises from a server */ -@Injectable() -export class ItemService implements OnDestroy { - - constructor() { console.log('ItemService instance created.'); } - ngOnDestroy() { console.log('ItemService instance destroyed.'); } - - getItems(): Observable { - return of(ITEMS).pipe(delay(FETCH_LATENCY)); - } - - getItem(id: number | string): Observable { - const item$ = of(ITEMS.find(item => item.id === +id)); - return item$.pipe(delay(FETCH_LATENCY)); - } -} - - diff --git a/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts b/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts deleted file mode 100644 index ffe4949f21..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'awesome' }) -/** Precede the input string with the word "Awesome " */ -export class AwesomePipe implements PipeTransform { - transform(phrase: string) { - return phrase ? 'Awesome ' + phrase : ''; - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts b/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts deleted file mode 100644 index 7210ddbf16..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* tslint:disable */ -// Exact copy of contact/highlight.directive except for color and message -import { Directive, ElementRef } from '@angular/core'; - -@Directive({ selector: '[highlight], input' }) -/** Highlight the attached element or an InputElement in gray */ -export class HighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = '#efeeed'; - console.log( - `* Shared highlight called for ${el.nativeElement.tagName}`); - } -} diff --git a/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts b/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts deleted file mode 100644 index 477f170c12..0000000000 --- a/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AwesomePipe } from './awesome.pipe'; -import { HighlightDirective } from './highlight.directive'; - -@NgModule({ - imports: [ CommonModule ], - declarations: [ AwesomePipe, HighlightDirective ], - exports: [ AwesomePipe, HighlightDirective, - CommonModule, FormsModule ] -}) -export class SharedModule { } diff --git a/docs_app/content/examples/ngmodules/src/index.html b/docs_app/content/examples/ngmodules/src/index.html deleted file mode 100644 index 5e908028fe..0000000000 --- a/docs_app/content/examples/ngmodules/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - NgmodulesExample - - - - - - - Loading... - - diff --git a/docs_app/content/examples/ngmodules/src/main.ts b/docs_app/content/examples/ngmodules/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/ngmodules/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/ngmodules/stackblitz.json b/docs_app/content/examples/ngmodules/stackblitz.json deleted file mode 100644 index 6bc4252b82..0000000000 --- a/docs_app/content/examples/ngmodules/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "NgModules", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "file": "src/app/app.component.ts", - "tags": ["NgModules"] -} diff --git a/docs_app/content/examples/observables-in-angular/example-config.json b/docs_app/content/examples/observables-in-angular/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/observables-in-angular/src/main.ts b/docs_app/content/examples/observables-in-angular/src/main.ts deleted file mode 100644 index c5e95560f5..0000000000 --- a/docs_app/content/examples/observables-in-angular/src/main.ts +++ /dev/null @@ -1,131 +0,0 @@ - -import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core'; -import { Observable } from 'rxjs'; - -// #docregion eventemitter - -@Component({ - selector: 'zippy', - template: ` -
    -
    Toggle
    -
    - -
    -
    `}) - -export class ZippyComponent { - visible = true; - @Output() open = new EventEmitter(); - @Output() close = new EventEmitter(); - - toggle() { - this.visible = !this.visible; - if (this.visible) { - this.open.emit(null); - } else { - this.close.emit(null); - } - } -} - -// #enddocregion eventemitter - -// #docregion pipe - -@Component({ - selector: 'async-observable-pipe', - template: `
    observable|async: - Time: {{ time | async }}
    ` -}) -export class AsyncObservablePipeComponent { - time = new Observable(observer => - setInterval(() => observer.next(new Date().toString()), 1000) - ); -} - -// #enddocregion pipe - -// #docregion router - -import { Router, NavigationStart } from '@angular/router'; -import { filter } from 'rxjs/operators'; - -@Component({ - selector: 'app-routable', - templateUrl: './routable.component.html', - styleUrls: ['./routable.component.css'] -}) -export class Routable1Component implements OnInit { - - navStart: Observable; - - constructor(private router: Router) { - // Create a new Observable the publishes only the NavigationStart event - this.navStart = router.events.pipe( - filter(evt => evt instanceof NavigationStart) - ) as Observable; - } - - ngOnInit() { - this.navStart.subscribe(evt => console.log('Navigation Started!')); - } -} - -// #enddocregion router - - -// #docregion activated_route - -import { ActivatedRoute } from '@angular/router'; - -@Component({ - selector: 'app-routable', - templateUrl: './routable.component.html', - styleUrls: ['./routable.component.css'] -}) -export class Routable2Component implements OnInit { - constructor(private activatedRoute: ActivatedRoute) {} - - ngOnInit() { - this.activatedRoute.url - .subscribe(url => console.log('The URL changed to: ' + url)); - } -} - -// #enddocregion activated_route - - -// #docregion forms - -import { FormGroup } from '@angular/forms'; - -@Component({ - selector: 'my-component', - template: 'MyComponent Template' -}) -export class MyComponent implements OnInit { - nameChangeLog: string[] = []; - heroForm: FormGroup; - - ngOnInit() { - this.logNameChange(); - } - logNameChange() { - const nameControl = this.heroForm.get('name'); - nameControl.valueChanges.forEach( - (value: string) => this.nameChangeLog.push(value) - ); - } -} - -// #enddocregion forms - - - -@NgModule({ - declarations: - [ZippyComponent, AsyncObservablePipeComponent, Routable1Component, Routable2Component, MyComponent] -}) -export class AppModule { -} diff --git a/docs_app/content/examples/observables/example-config.json b/docs_app/content/examples/observables/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/observables/src/creating.ts b/docs_app/content/examples/observables/src/creating.ts deleted file mode 100644 index 83003b99bf..0000000000 --- a/docs_app/content/examples/observables/src/creating.ts +++ /dev/null @@ -1,66 +0,0 @@ - -import { Observable } from 'rxjs'; - -// #docregion subscriber - -// This function runs when subscribe() is called -function sequenceSubscriber(observer) { - // synchronously deliver 1, 2, and 3, then complete - observer.next(1); - observer.next(2); - observer.next(3); - observer.complete(); - - // unsubscribe function doesn't need to do anything in this - // because values are delivered synchronously - return {unsubscribe() {}}; -} - -// Create a new Observable that will deliver the above sequence -const sequence = new Observable(sequenceSubscriber); - -// execute the Observable and print the result of each notification -sequence.subscribe({ - next(num) { console.log(num); }, - complete() { console.log('Finished sequence'); } -}); - -// Logs: -// 1 -// 2 -// 3 -// Finished sequence - -// #enddocregion subscriber - -// #docregion fromevent - -function fromEvent(target, eventName) { - return new Observable((observer) => { - const handler = (e) => observer.next(e); - - // Add the event handler to the target - target.addEventListener(eventName, handler); - - return () => { - // Detach the event handler from the target - target.removeEventListener(eventName, handler); - }; - }); -} - -// #enddocregion fromevent - -// #docregion fromevent_use - -const ESC_KEY = 27; -const nameInput = document.getElementById('name') as HTMLInputElement; - -const subscription = fromEvent(nameInput, 'keydown') - .subscribe((e: KeyboardEvent) => { - if (e.keyCode === ESC_KEY) { - nameInput.value = ''; - } - }); - -// #enddocregion fromevent_use diff --git a/docs_app/content/examples/observables/src/geolocation.ts b/docs_app/content/examples/observables/src/geolocation.ts deleted file mode 100644 index 7210a51e1d..0000000000 --- a/docs_app/content/examples/observables/src/geolocation.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Observable } from 'rxjs'; - -// #docregion - -// Create an Observable that will start listening to geolocation updates -// when a consumer subscribes. -const locations = new Observable((observer) => { - // Get the next and error callbacks. These will be passed in when - // the consumer subscribes. - const {next, error} = observer; - let watchId; - - // Simple geolocation API check provides values to publish - if ('geolocation' in navigator) { - watchId = navigator.geolocation.watchPosition(next, error); - } else { - error('Geolocation not available'); - } - - // When the consumer unsubscribes, clean up data ready for next subscription. - return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }}; -}); - -// Call subscribe() to start listening for updates. -const locationsSubscription = locations.subscribe({ - next(position) { console.log('Current Position: ', position); }, - error(msg) { console.log('Error Getting Location: ', msg); } -}); - -// Stop listening for location after 10 seconds -setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000); -// #enddocregion diff --git a/docs_app/content/examples/observables/src/main.ts b/docs_app/content/examples/observables/src/main.ts deleted file mode 100644 index 31bacebf11..0000000000 --- a/docs_app/content/examples/observables/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ - -import './geolocation'; -import './subscribing'; -import './creating'; -import './multicasting'; diff --git a/docs_app/content/examples/observables/src/multicasting.ts b/docs_app/content/examples/observables/src/multicasting.ts deleted file mode 100644 index 449f7b73c7..0000000000 --- a/docs_app/content/examples/observables/src/multicasting.ts +++ /dev/null @@ -1,155 +0,0 @@ - -import { Observable } from 'rxjs'; - -// #docregion delay_sequence - -function sequenceSubscriber(observer) { - const seq = [1, 2, 3]; - let timeoutId; - - // Will run through an array of numbers, emitting one value - // per second until it gets to the end of the array. - function doSequence(arr, idx) { - timeoutId = setTimeout(() => { - observer.next(arr[idx]); - if (idx === arr.length - 1) { - observer.complete(); - } else { - doSequence(arr, idx++); - } - }, 1000); - } - - doSequence(seq, 0); - - // Unsubscribe should clear the timeout to stop execution - return {unsubscribe() { - clearTimeout(timeoutId); - }}; -} - -// Create a new Observable that will deliver the above sequence -const sequence = new Observable(sequenceSubscriber); - -sequence.subscribe({ - next(num) { console.log(num); }, - complete() { console.log('Finished sequence'); } -}); - -// Logs: -// (at 1 second): 1 -// (at 2 seconds): 2 -// (at 3 seconds): 3 -// (at 3 seconds): Finished sequence - -// #enddocregion delay_sequence - -// #docregion subscribe_twice - -// Subscribe starts the clock, and will emit after 1 second -sequence.subscribe({ - next(num) { console.log('1st subscribe: ' + num); }, - complete() { console.log('1st sequence finished.'); } -}); - -// After 1/2 second, subscribe again. -setTimeout(() => { - sequence.subscribe({ - next(num) { console.log('2nd subscribe: ' + num); }, - complete() { console.log('2nd sequence finished.'); } - }); -}, 500); - -// Logs: -// (at 1 second): 1st subscribe: 1 -// (at 1.5 seconds): 2nd subscribe: 1 -// (at 2 seconds): 1st subscribe: 2 -// (at 2.5 seconds): 2nd subscribe: 2 -// (at 3 seconds): 1st subscribe: 3 -// (at 3 seconds): 1st sequence finished -// (at 3.5 seconds): 2nd subscribe: 3 -// (at 3.5 seconds): 2nd sequence finished - -// #enddocregion subscribe_twice - -// #docregion multicast_sequence - -function multicastSequenceSubscriber() { - const seq = [1, 2, 3]; - // Keep track of each observer (one for every active subscription) - const observers = []; - // Still a single timeoutId because there will only ever be one - // set of values being generated, multicasted to each subscriber - let timeoutId; - - // Return the subscriber function (runs when subscribe() - // function is invoked) - return (observer) => { - observers.push(observer); - // When this is the first subscription, start the sequence - if (observers.length === 1) { - timeoutId = doSequence({ - next(val) { - // Iterate through observers and notify all subscriptions - observers.forEach(obs => obs.next(val)); - }, - complete() { - // Notify all complete callbacks - observers.forEach(obs => obs.complete()); - } - }, seq, 0); - } - - return { - unsubscribe() { - // Remove from the observers array so it's no longer notified - observers.splice(observers.indexOf(observer), 1); - // If there's no more listeners, do cleanup - if (observers.length === 0) { - clearTimeout(timeoutId); - } - } - }; - }; -} - -// Run through an array of numbers, emitting one value -// per second until it gets to the end of the array. -function doSequence(observer, arr, idx) { - return setTimeout(() => { - observer.next(arr[idx]); - if (idx === arr.length - 1) { - observer.complete(); - } else { - doSequence(observer, arr, idx++); - } - }, 1000); -} - -// Create a new Observable that will deliver the above sequence -const multicastSequence = new Observable(multicastSequenceSubscriber); - -// Subscribe starts the clock, and begins to emit after 1 second -multicastSequence.subscribe({ - next(num) { console.log('1st subscribe: ' + num); }, - complete() { console.log('1st sequence finished.'); } -}); - -// After 1 1/2 seconds, subscribe again (should "miss" the first value). -setTimeout(() => { - multicastSequence.subscribe({ - next(num) { console.log('2nd subscribe: ' + num); }, - complete() { console.log('2nd sequence finished.'); } - }); -}, 1500); - -// Logs: -// (at 1 second): 1st subscribe: 1 -// (at 2 seconds): 1st subscribe: 2 -// (at 2 seconds): 2nd subscribe: 2 -// (at 3 seconds): 1st subscribe: 3 -// (at 3 seconds): 1st sequence finished -// (at 3 seconds): 2nd subscribe: 3 -// (at 3 seconds): 2nd sequence finished - -// #enddocregion multicast_sequence diff --git a/docs_app/content/examples/observables/src/subscribing.ts b/docs_app/content/examples/observables/src/subscribing.ts deleted file mode 100644 index 4712580b33..0000000000 --- a/docs_app/content/examples/observables/src/subscribing.ts +++ /dev/null @@ -1,32 +0,0 @@ - -import { Observable, of } from 'rxjs'; - -// #docregion observer - -// Create simple observable that emits three values -const myObservable = Observable.of(1, 2, 3); - -// Create observer object -const myObserver = { - next: x => console.log('Observer got a next value: ' + x), - error: err => console.error('Observer got an error: ' + err), - complete: () => console.log('Observer got a complete notification'), -}; - -// Execute with the observer object -myObservable.subscribe(myObserver); -// Logs: -// Observer got a next value: 1 -// Observer got a next value: 2 -// Observer got a next value: 3 -// Observer got a complete notification - -// #enddocregion observer - -// #docregion sub_fn -myObservable.subscribe( - x => console.log('Observer got a next value: ' + x), - err => console.error('Observer got an error: ' + err), - () => console.log('Observer got a complete notification') -); -// #enddocregion sub_fn diff --git a/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts b/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts deleted file mode 100644 index ec9d15cbdf..0000000000 --- a/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,116 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; -const { version: angularVersion } = require('@angular/core/package.json'); - -describe('Pipes', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should open correctly', function () { - expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes'); - expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`); - }); - - it('should show 4 heroes', function () { - expect(element.all(by.css('app-hero-list div')).count()).toEqual(4); - }); - - it('should show a familiar hero in json', function () { - expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto'); - }); - - it('should show alternate birthday formats', function () { - expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true); - expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true); - }); - - it('should be able to toggle birthday formats', function () { - let birthDayEle = element(by.css('app-hero-birthday2 > p')); - if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884) - expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`); - } else { - expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`); - } - let buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format')); - expect(buttonEle.isDisplayed()).toBe(true); - buttonEle.click().then(function() { - expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`); - }); - }); - - it('should be able to chain and compose pipes', function () { - let chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`)); - expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples'); - expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988'); - expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988'); - expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988'); - }); - - it('should be able to use ExponentialStrengthPipe pipe', function () { - let ele = element(by.css('app-power-booster p')); - expect(ele.getText()).toContain('Super power boost: 1024'); - }); - - it('should be able to use the exponential calculator', function () { - let eles = element.all(by.css('app-power-boost-calculator input')); - let baseInputEle = eles.get(0); - let factorInputEle = eles.get(1); - let outputEle = element(by.css('app-power-boost-calculator p')); - baseInputEle.clear().then(function() { - baseInputEle.sendKeys('7'); - return factorInputEle.clear(); - }).then(function() { - factorInputEle.sendKeys('3'); - expect(outputEle.getText()).toContain('343'); - }); - }); - - - it('should support flying heroes (pure) ', function () { - let nameEle = element(by.css('app-flying-heroes input[type="text"]')); - let canFlyCheckEle = element(by.css('app-flying-heroes #can-fly')); - let mutateCheckEle = element(by.css('app-flying-heroes #mutate')); - let resetEle = element(by.css('app-flying-heroes button')); - let flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div')); - - expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); - expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); - - nameEle.sendKeys('test1\n'); - expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array'); - mutateCheckEle.click().then(function() { - nameEle.sendKeys('test2\n'); - expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds'); - expect(flyingHeroesEle.get(2).getText()).toContain('test1'); - expect(flyingHeroesEle.get(3).getText()).toContain('test2'); - return resetEle.click(); - }) - .then(function() { - expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes'); - }); - }); - - - it('should support flying heroes (impure) ', function () { - let nameEle = element(by.css('app-flying-heroes-impure input[type="text"]')); - let canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly')); - let mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate')); - let flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div')); - - expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); - expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); - - nameEle.sendKeys('test1\n'); - expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array'); - }); - - it('should show an async hero message', function () { - expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero'); - }); - -}); diff --git a/docs_app/content/examples/pipes/example-config.json b/docs_app/content/examples/pipes/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/pipes/src/app/app.component.html b/docs_app/content/examples/pipes/src/app/app.component.html deleted file mode 100644 index b03b8251bc..0000000000 --- a/docs_app/content/examples/pipes/src/app/app.component.html +++ /dev/null @@ -1,83 +0,0 @@ - -

    Pipes

    -Happy Birthday v1
    -Birthday DatePipe
    -Happy Birthday v2
    -Birthday Pipe Chaining
    -Power Booster custom pipe
    -Power Boost Calculator custom pipe with params
    -Flying Heroes filter pipe (pure)
    -Flying Heroes filter pipe (impure)
    -Async Hero Message and AsyncPipe
    -Hero List with caching FetchJsonPipe
    - - -
    - -

    Hero Birthday v1

    - - -
    - -

    Birthday DatePipe

    - -

    The hero's birthday is {{ birthday | date }}

    - - - -

    The hero's birthday is {{ birthday | date:"MM/dd/yy" }}

    - - -
    - -

    Hero Birthday v2

    - - -
    - -

    Birthday Pipe Chaining

    -

    - - The chained hero's birthday is - {{ birthday | date | uppercase}} - -

    - -

    - - The chained hero's birthday is - {{ birthday | date:'fullDate' | uppercase}} - -

    -

    - - The chained hero's birthday is - {{ ( birthday | date:'fullDate' ) | uppercase}} - -

    -
    - - - -
    - -loading - -
    - - - -
    - - - -
    - - - - -
    - - - -
    diff --git a/docs_app/content/examples/pipes/src/app/app.component.ts b/docs_app/content/examples/pipes/src/app/app.component.ts deleted file mode 100644 index 2b739ed2a0..0000000000 --- a/docs_app/content/examples/pipes/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { - birthday = new Date(1988, 3, 15); // April 15, 1988 -} diff --git a/docs_app/content/examples/pipes/src/app/app.module.ts b/docs_app/content/examples/pipes/src/app/app.module.ts deleted file mode 100644 index 325a32e4b2..0000000000 --- a/docs_app/content/examples/pipes/src/app/app.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular//common/http'; - -import { AppComponent } from './app.component'; -import { - FlyingHeroesComponent, - FlyingHeroesImpureComponent -} from './flying-heroes.component'; -import { HeroAsyncMessageComponent } from './hero-async-message.component'; -import { HeroBirthdayComponent } from './hero-birthday1.component'; -import { HeroBirthday2Component } from './hero-birthday2.component'; -import { HeroListComponent } from './hero-list.component'; -import { PowerBoosterComponent } from './power-booster.component'; -import { PowerBoostCalculatorComponent } from './power-boost-calculator.component'; -import { - FlyingHeroesPipe, - FlyingHeroesImpurePipe -} from './flying-heroes.pipe'; -import { FetchJsonPipe } from './fetch-json.pipe'; -import { ExponentialStrengthPipe } from './exponential-strength.pipe'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpClientModule - ], - declarations: [ - AppComponent, - FlyingHeroesComponent, - FlyingHeroesImpureComponent, - HeroAsyncMessageComponent, - HeroBirthdayComponent, - HeroBirthday2Component, - HeroListComponent, - PowerBoosterComponent, - PowerBoostCalculatorComponent, - FlyingHeroesPipe, - FlyingHeroesImpurePipe, - FetchJsonPipe, - ExponentialStrengthPipe - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts b/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts deleted file mode 100644 index d277483853..0000000000 --- a/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; -/* - * Raise the value exponentially - * Takes an exponent argument that defaults to 1. - * Usage: - * value | exponentialStrength:exponent - * Example: - * {{ 2 | exponentialStrength:10 }} - * formats to: 1024 -*/ -@Pipe({name: 'exponentialStrength'}) -export class ExponentialStrengthPipe implements PipeTransform { - transform(value: number, exponent: string): number { - let exp = parseFloat(exponent); - return Math.pow(value, isNaN(exp) ? 1 : exp); - } -} diff --git a/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts b/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts deleted file mode 100644 index 9fcdf341e1..0000000000 --- a/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -// #docregion pipe-metadata -@Pipe({ - name: 'fetch', - pure: false -}) -// #enddocregion pipe-metadata -export class FetchJsonPipe implements PipeTransform { - private cachedData: any = null; - private cachedUrl = ''; - - constructor(private http: HttpClient) { } - - transform(url: string): any { - if (url !== this.cachedUrl) { - this.cachedData = null; - this.cachedUrl = url; - this.http.get(url).subscribe( result => this.cachedData = result ); - } - - return this.cachedData; - } -} diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html b/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html deleted file mode 100644 index 66bd86f81c..0000000000 --- a/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html +++ /dev/null @@ -1,38 +0,0 @@ - - -

    {{title}}

    -

    - -New hero: - - - can fly -

    -

    - Mutate array - - - -

    - -

    Heroes who fly (piped)

    -
    - -
    - {{hero.name}} -
    - -
    - -

    All Heroes (no pipe)

    -
    - - -
    - {{hero.name}} -
    - - -
    diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.component.html b/docs_app/content/examples/pipes/src/app/flying-heroes.component.html deleted file mode 100644 index 93e635b662..0000000000 --- a/docs_app/content/examples/pipes/src/app/flying-heroes.component.html +++ /dev/null @@ -1,38 +0,0 @@ - - -

    {{title}}

    -

    - -New hero: - - - can fly -

    -

    - Mutate array - - - -

    - -

    Heroes who fly (piped)

    -
    - -
    - {{hero.name}} -
    - -
    - -

    All Heroes (no pipe)

    -
    - - -
    - {{hero.name}} -
    - - -
    diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts b/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts deleted file mode 100644 index 43474c5ba8..0000000000 --- a/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -import { HEROES } from './heroes'; - -@Component({ - selector: 'app-flying-heroes', - templateUrl: './flying-heroes.component.html', - styles: ['#flyers, #all {font-style: italic}'] -}) -// #docregion v1 -export class FlyingHeroesComponent { - heroes: any[] = []; - canFly = true; -// #enddocregion v1 - mutate = true; - title = 'Flying Heroes (pure pipe)'; - -// #docregion v1 - constructor() { this.reset(); } - - addHero(name: string) { - name = name.trim(); - if (!name) { return; } - let hero = {name, canFly: this.canFly}; -// #enddocregion v1 - if (this.mutate) { - // Pure pipe won't update display because heroes array reference is unchanged - // Impure pipe will display -// #docregion v1 -// #docregion push - this.heroes.push(hero); -// #enddocregion push -// #enddocregion v1 - } else { - // Pipe updates display because heroes array is a new object -// #docregion concat - this.heroes = this.heroes.concat(hero); -// #enddocregion concat - } -// #docregion v1 - } - - reset() { this.heroes = HEROES.slice(); } -} -// #enddocregion v1 - -////// Identical except for impure pipe ////// -// #docregion impure-component -@Component({ - selector: 'app-flying-heroes-impure', - templateUrl: './flying-heroes-impure.component.html', -// #enddocregion impure-component - styles: ['.flyers, .all {font-style: italic}'], -// #docregion impure-component -}) -export class FlyingHeroesImpureComponent extends FlyingHeroesComponent { - title = 'Flying Heroes (impure pipe)'; -} -// #enddocregion impure-component diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts b/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts deleted file mode 100644 index 87db9c277e..0000000000 --- a/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* tslint:disable use-pipe-transform-interface */ -// #docregion -// #docregion pure -import { Pipe, PipeTransform } from '@angular/core'; - -import { Flyer } from './heroes'; - -@Pipe({ name: 'flyingHeroes' }) -export class FlyingHeroesPipe implements PipeTransform { - transform(allHeroes: Flyer[]) { - // #docregion filter - return allHeroes.filter(hero => hero.canFly); - // #enddocregion filter - } -} -// #enddocregion pure - -/////// Identical except for the pure flag -// #docregion impure -// #docregion pipe-decorator -@Pipe({ - name: 'flyingHeroesImpure', - pure: false -}) -// #enddocregion pipe-decorator -export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {} -// #enddocregion impure diff --git a/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts b/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts deleted file mode 100644 index 558e916f53..0000000000 --- a/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Observable, interval } from 'rxjs'; -import { map, take } from 'rxjs/operators'; - -@Component({ - selector: 'app-hero-message', - template: ` -

    Async Hero Message and AsyncPipe

    -

    Message: {{ message$ | async }}

    - `, -}) -export class HeroAsyncMessageComponent { - message$: Observable; - - private messages = [ - 'You are my hero!', - 'You are the best hero!', - 'Will you be my hero?' - ]; - - constructor() { this.resend(); } - - resend() { - this.message$ = interval(500).pipe( - map(i => this.messages[i]), - take(this.messages.length) - ); - } -} -// #enddocregion - -// Alternative message$ formula: -// this.message$ = fromArray(this.messages).pipe( -// map(message => timer(500), -// map(() => message)), -// concatAll() -// ); diff --git a/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts b/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts deleted file mode 100644 index d51914550f..0000000000 --- a/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-hero-birthday', - // #docregion hero-birthday-template - template: `

    The hero's birthday is {{ birthday | date }}

    ` - // #enddocregion hero-birthday-template -}) -export class HeroBirthdayComponent { - birthday = new Date(1988, 3, 15); // April 15, 1988 -} diff --git a/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts b/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts deleted file mode 100644 index ce71c2ab1e..0000000000 --- a/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-hero-birthday2', - // #docregion template - template: ` -

    The hero's birthday is {{ birthday | date:format }}

    - - ` - // #enddocregion template -}) -// #docregion class -export class HeroBirthday2Component { - birthday = new Date(1988, 3, 15); // April 15, 1988 - toggle = true; // start with true == shortDate - - get format() { return this.toggle ? 'shortDate' : 'fullDate'; } - toggleFormat() { this.toggle = !this.toggle; } -} diff --git a/docs_app/content/examples/pipes/src/app/hero-list.component.ts b/docs_app/content/examples/pipes/src/app/hero-list.component.ts deleted file mode 100644 index ead6e74d57..0000000000 --- a/docs_app/content/examples/pipes/src/app/hero-list.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-hero-list', - template: ` -

    Heroes from JSON File

    - -
    - {{hero.name}} -
    - -

    Heroes as JSON: - {{'assets/heroes.json' | fetch | json}} -

    ` -}) -export class HeroListComponent { } diff --git a/docs_app/content/examples/pipes/src/app/heroes.ts b/docs_app/content/examples/pipes/src/app/heroes.ts deleted file mode 100644 index b2edabe0da..0000000000 --- a/docs_app/content/examples/pipes/src/app/heroes.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface Flyer { canFly: boolean; } -export const HEROES = [ - {name: 'Windstorm', canFly: true}, - {name: 'Bombasto', canFly: false}, - {name: 'Magneto', canFly: false}, - {name: 'Tornado', canFly: true} -]; diff --git a/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts b/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts deleted file mode 100644 index 5092e18893..0000000000 --- a/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-power-boost-calculator', - template: ` -

    Power Boost Calculator

    -
    Normal power:
    -
    Boost factor:
    -

    - Super Hero Power: {{power | exponentialStrength: factor}} -

    - ` -}) -export class PowerBoostCalculatorComponent { - power = 5; - factor = 1; -} diff --git a/docs_app/content/examples/pipes/src/app/power-booster.component.ts b/docs_app/content/examples/pipes/src/app/power-booster.component.ts deleted file mode 100644 index b8d395db0f..0000000000 --- a/docs_app/content/examples/pipes/src/app/power-booster.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-power-booster', - template: ` -

    Power Booster

    -

    Super power boost: {{2 | exponentialStrength: 10}}

    - ` -}) -export class PowerBoosterComponent { } diff --git a/docs_app/content/examples/pipes/src/assets/heroes.json b/docs_app/content/examples/pipes/src/assets/heroes.json deleted file mode 100644 index e5f0b77262..0000000000 --- a/docs_app/content/examples/pipes/src/assets/heroes.json +++ /dev/null @@ -1,6 +0,0 @@ -[ - {"name": "Windstorm", "canFly": true}, - {"name": "Bombasto", "canFly": false}, - {"name": "Magneto", "canFly": false}, - {"name": "Tornado", "canFly": true} -] diff --git a/docs_app/content/examples/pipes/src/index.html b/docs_app/content/examples/pipes/src/index.html deleted file mode 100644 index 3500263895..0000000000 --- a/docs_app/content/examples/pipes/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Pipes - - - - - - - - - - diff --git a/docs_app/content/examples/pipes/src/main.ts b/docs_app/content/examples/pipes/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/pipes/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/pipes/stackblitz.json b/docs_app/content/examples/pipes/stackblitz.json deleted file mode 100644 index a27408cfec..0000000000 --- a/docs_app/content/examples/pipes/stackblitz.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "description": "Pipes", - "files":[ - "!**/*.d.ts", - "!**/*.js"], - "tags": ["pipe"] -} diff --git a/docs_app/content/examples/practical-observable-usage/example-config.json b/docs_app/content/examples/practical-observable-usage/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/practical-observable-usage/src/backoff.ts b/docs_app/content/examples/practical-observable-usage/src/backoff.ts deleted file mode 100644 index 97b53845f1..0000000000 --- a/docs_app/content/examples/practical-observable-usage/src/backoff.ts +++ /dev/null @@ -1,24 +0,0 @@ - -import { pipe, range, timer, zip } from 'rxjs'; -import { ajax } from 'rxjs/ajax'; -import { retryWhen, map, mergeMap } from 'rxjs/operators'; - -function backoff(maxTries, ms) { - return pipe( - retryWhen(attempts => range(1, maxTries) - .pipe( - zip(attempts, (i) => i), - map(i => i * i), - mergeMap(i => timer(i * ms)) - ) - ) - ); -} - -ajax('/api/endpoint') - .pipe(backoff(3, 250)) - .subscribe(data => handleData(data)); - -function handleData(data) { - // ... -} diff --git a/docs_app/content/examples/practical-observable-usage/src/main.ts b/docs_app/content/examples/practical-observable-usage/src/main.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/practical-observable-usage/src/typeahead.ts b/docs_app/content/examples/practical-observable-usage/src/typeahead.ts deleted file mode 100644 index 4bde2c66d0..0000000000 --- a/docs_app/content/examples/practical-observable-usage/src/typeahead.ts +++ /dev/null @@ -1,18 +0,0 @@ - -import { fromEvent } from 'rxjs'; -import { ajax } from 'rxjs/ajax'; -import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; - -const searchBox = document.getElementById('search-box'); - -const typeahead = fromEvent(searchBox, 'input').pipe( - map((e: KeyboardEvent) => e.target.value), - filter(text => text.length > 2), - debounceTime(10), - distinctUntilChanged(), - switchMap(() => ajax('/api/endpoint')) -); - -typeahead.subscribe(data => { - // Handle the data from the API -}); diff --git a/docs_app/content/examples/providers/e2e/app.e2e-spec.ts b/docs_app/content/examples/providers/e2e/app.e2e-spec.ts deleted file mode 100644 index 46108fd9dc..0000000000 --- a/docs_app/content/examples/providers/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; - -describe('providers App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - function getUsersStruct() { - return { - user: element.all(by.css('ng-component li')).get(0), - userId: element.all(by.css('ng-component span')).get(0) - }; - } - - function getListSectionStruct() { - return { - items: element.all(by.css('app-root li')) - }; - } - - it('should display header that says Users list', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('Users list'); - }); - - - it('shows a list of customers', function() { - const list = getListSectionStruct(); - expect(list.items.count()).toBe(10); - expect(list.items.get(0).getText()).toBe('1 Maria'); - expect(list.items.get(9).getText()).toBe('10 Seth'); - }); - -}); diff --git a/docs_app/content/examples/providers/example-config.json b/docs_app/content/examples/providers/example-config.json deleted file mode 100644 index 313764c3c6..0000000000 --- a/docs_app/content/examples/providers/example-config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "build": "build:cli", - "run": "serve:cli" -} diff --git a/docs_app/content/examples/providers/src/app/app.component.css b/docs_app/content/examples/providers/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/providers/src/app/app.component.html b/docs_app/content/examples/providers/src/app/app.component.html deleted file mode 100644 index 7763b93ba8..0000000000 --- a/docs_app/content/examples/providers/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ -

    - {{title}} -

    - -
  • -{{user.id}} {{user.name}} -
    • diff --git a/docs_app/content/examples/providers/src/app/app.component.spec.ts b/docs_app/content/examples/providers/src/app/app.component.spec.ts deleted file mode 100644 index 13c632d676..0000000000 --- a/docs_app/content/examples/providers/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }); - TestBed.compileComponents(); - }); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/docs_app/content/examples/providers/src/app/app.component.ts b/docs_app/content/examples/providers/src/app/app.component.ts deleted file mode 100644 index 37c8e53586..0000000000 --- a/docs_app/content/examples/providers/src/app/app.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { User, UserService } from './user.service'; - -// #docregion component-providers -@Component({ - // #enddocregion component-providers - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], - // #docregion component-providers - providers: [UserService] -}) -// #enddocregion component-providers -export class AppComponent implements OnInit { - title = 'Users list'; - users: User[]; - - constructor(private userService: UserService) { } - - ngOnInit(): void { - this.userService.getUsers().then(users => this.users = users); - } - -} diff --git a/docs_app/content/examples/providers/src/app/app.module.ts b/docs_app/content/examples/providers/src/app/app.module.ts deleted file mode 100644 index 7152c203c8..0000000000 --- a/docs_app/content/examples/providers/src/app/app.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { UserService } from './user.service'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/providers/src/app/user.module.ts b/docs_app/content/examples/providers/src/app/user.module.ts deleted file mode 100644 index 0b3b67514b..0000000000 --- a/docs_app/content/examples/providers/src/app/user.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { UserService } from './user.service'; - -@NgModule({ - providers: [UserService], -}) -export class UserModule { -} diff --git a/docs_app/content/examples/providers/src/app/user.service.0.ts b/docs_app/content/examples/providers/src/app/user.service.0.ts deleted file mode 100644 index 8988a99309..0000000000 --- a/docs_app/content/examples/providers/src/app/user.service.0.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable({ - providedIn: 'root', -}) -export class UserService { -} diff --git a/docs_app/content/examples/providers/src/app/user.service.1.ts b/docs_app/content/examples/providers/src/app/user.service.1.ts deleted file mode 100644 index 64ee94b72d..0000000000 --- a/docs_app/content/examples/providers/src/app/user.service.1.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Injectable } from '@angular/core'; -import { UserModule } from './user.module'; - -@Injectable({ - providedIn: UserModule, -}) -export class UserService { -} diff --git a/docs_app/content/examples/providers/src/app/user.service.spec.ts b/docs_app/content/examples/providers/src/app/user.service.spec.ts deleted file mode 100644 index dcf5565717..0000000000 --- a/docs_app/content/examples/providers/src/app/user.service.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; -import { UserService } from './user.service'; - -describe('UserService', () => { - beforeEach(() => { - TestBed.configureTestingModule({}); - }); - - it('should ...', inject([UserService], (service: UserService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/docs_app/content/examples/providers/src/app/user.service.ts b/docs_app/content/examples/providers/src/app/user.service.ts deleted file mode 100644 index 096d1c8fb1..0000000000 --- a/docs_app/content/examples/providers/src/app/user.service.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Injectable } from '@angular/core'; - -export class User { - id: number; - name: string; -} - -@Injectable({ - providedIn: 'root', -}) -export class UserService { - - constructor() { } - - getUsers(): Promise { - return Promise.resolve([ - { id: 1, name: 'Maria' }, - { id: 2, name: 'Alex' }, - { id: 3, name: 'Chuntao' }, - { id: 4, name: 'Béatrice' }, - { id: 5, name: 'Sarah' }, - { id: 6, name: 'Andrés' }, - { id: 7, name: 'Abdul' }, - { id: 8, name: 'Pierre' }, - { id: 9, name: 'Jiao' }, - { id: 10, name: 'Seth' } - ]); - } - -} diff --git a/docs_app/content/examples/providers/src/index.html b/docs_app/content/examples/providers/src/index.html deleted file mode 100644 index 15d46bb0a7..0000000000 --- a/docs_app/content/examples/providers/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Providers - - - - - - - Loading... - - diff --git a/docs_app/content/examples/providers/src/main.ts b/docs_app/content/examples/providers/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/providers/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/providers/stackblitz.json b/docs_app/content/examples/providers/stackblitz.json deleted file mode 100644 index 9f21337a05..0000000000 --- a/docs_app/content/examples/providers/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Providers", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0,1,2].*" - ], - "file": "src/app/app.component.ts", - "tags": ["providers"] -} diff --git a/docs_app/content/examples/quickstart/bs-config.1.json b/docs_app/content/examples/quickstart/bs-config.1.json deleted file mode 100644 index 4e58595267..0000000000 --- a/docs_app/content/examples/quickstart/bs-config.1.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "server": { - "baseDir": "src", - "routes": { - "/node_modules": "node_modules" - } - } -} diff --git a/docs_app/content/examples/quickstart/e2e-spec.ts b/docs_app/content/examples/quickstart/e2e-spec.ts deleted file mode 100644 index 73921707ee..0000000000 --- a/docs_app/content/examples/quickstart/e2e-spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('QuickStart E2E Tests', function () { - - let expectedMsg = 'Hello Angular'; - - beforeEach(function () { - browser.get(''); - }); - - it(`should display: ${expectedMsg}`, function () { - expect(element(by.css('h1')).getText()).toEqual(expectedMsg); - }); - -}); diff --git a/docs_app/content/examples/quickstart/example-config.json b/docs_app/content/examples/quickstart/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/quickstart/src/app/app.component.ts b/docs_app/content/examples/quickstart/src/app/app.component.ts deleted file mode 100644 index 1ef28fc5c4..0000000000 --- a/docs_app/content/examples/quickstart/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - template: `

    Hello {{name}}

    ` -}) -export class AppComponent { name = 'Angular'; } diff --git a/docs_app/content/examples/quickstart/src/app/app.module.ts b/docs_app/content/examples/quickstart/src/app/app.module.ts deleted file mode 100644 index 50a0e6eb47..0000000000 --- a/docs_app/content/examples/quickstart/src/app/app.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/quickstart/src/index.html b/docs_app/content/examples/quickstart/src/index.html deleted file mode 100644 index 21fb56edb9..0000000000 --- a/docs_app/content/examples/quickstart/src/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Angular Quickstart - - - - - - - - - - - - - - - - - - - Loading AppComponent content here ... - - - - diff --git a/docs_app/content/examples/quickstart/src/main.ts b/docs_app/content/examples/quickstart/src/main.ts deleted file mode 100644 index 311c44b76d..0000000000 --- a/docs_app/content/examples/quickstart/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/quickstart/src/tsconfig.1.json b/docs_app/content/examples/quickstart/src/tsconfig.1.json deleted file mode 100644 index 2c7260d1bc..0000000000 --- a/docs_app/content/examples/quickstart/src/tsconfig.1.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ "es2015", "dom" ], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true - } -} diff --git a/docs_app/content/examples/quickstart/stackblitz.json b/docs_app/content/examples/quickstart/stackblitz.json deleted file mode 100644 index fd606e2ab9..0000000000 --- a/docs_app/content/examples/quickstart/stackblitz.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "description": "QuickStart", - "files": [ - "src/app/app.component.ts", - "src/app/app.module.ts", - "src/main.ts", - "src/index.html" - ], - "file": "src/app/app.component.ts", - "tags": ["quickstart"] -} diff --git a/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts b/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts deleted file mode 100644 index 59c1ea797d..0000000000 --- a/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,1020 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -function finalDemoAddressForm(element: any, index: number) { - let form = { - street: element.all(by.css('input[formcontrolname=street]')).get(index).getAttribute('value'), - city: element.all(by.css('input[formcontrolname=city]')).get(index).getAttribute('value'), - state: element.all(by.css('select[formcontrolname=state]')).get(index).getAttribute('value'), - zip: element.all(by.css('input[formcontrolname=zip]')).get(index).getAttribute('value') - }; - return form; -} - -describe('Reactive forms', function() { - let select: any; - - beforeEach(function() { - browser.get(''); - select = element(by.css('.container > h4 > select')); - }); - - describe('navigation', function() { - it('should display the title', function() { - let title = element(by.css('.container > h1')); - expect(title.getText()).toBe('Reactive Forms'); - }); - - it('should contain a dropdown with each example', function() { - expect(select.isDisplayed()).toBe(true); - }); - - it('should have 9 options for different demos', function() { - let options = select.all(by.tagName('option')); - expect(options.count()).toBe(9); - }); - - it('should start with Final Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('Final Demo'); - }); - }); - }); - -// *************Begin Final Demo test******************************* - - describe('final demo', function() { - it('does not select any hero by default', function() { - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - it('refreshes the page upon button click', function() { - // We move to another page... - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - let refresh = element(by.css('button')); - refresh.click(); - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - describe('Whirlwind form', function() { - beforeEach(function() { - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwind'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Whirlwind'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('123 Main'); - expect(address1.state).toBe('CA'); - expect(address1.zip).toBe('94801'); - expect(address1.city).toBe('Anywhere'); - let address2 = finalDemoAddressForm(element, 1); - expect(address2.street).toBe('456 Maple'); - expect(address2.state).toBe('VA'); - expect(address2.zip).toBe('23226'); - expect(address2.city).toBe('Somewhere'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail > p')); - expect(json.getText()).toContain('Whirlwind'); - expect(json.getText()).toContain('Anywhere'); - expect(json.getText()).toContain('Somewhere'); - expect(json.getText()).toContain('VA'); - }); - - it('has two disabled buttons by default', function() { - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBe('true'); - expect(buttons.get(1).getAttribute('disabled')).toBe('true'); - }); - - it('enables the buttons after we edit the form', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBeNull(); - expect(buttons.get(1).getAttribute('disabled')).toBeNull(); - }); - - it('saves the changes when the save button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let save = element.all(by.css('app-hero-detail > form > div > button')).get(0); - save.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwinda'); - }); - - it('reverts the changes when the revert button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1); - revert.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwind'); - expect(nameInput.getAttribute('value')).toBe('Whirlwind'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(3); - newLairButton.click(); - let address3 = finalDemoAddressForm(element, 2); - expect(address3.street).toBe(''); - expect(address3.state).toBe(''); - expect(address3.zip).toBe(''); - expect(address3.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - }); - - describe('Bombastic form', function() { - beforeEach(function() { - let bombastaButton = element.all(by.css('nav a')).get(1); - bombastaButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Bombastic'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Bombastic'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('789 Elm'); - // expect(address1.state).toBe('OH'); - expect(address1.zip).toBe('04501'); - expect(address1.city).toBe('Smallville'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail > p')); - expect(json.getText()).toContain('Bombastic'); - expect(json.getText()).toContain('Smallville'); - expect(json.getText()).toContain('OH'); - expect(json.getText()).toContain('04501'); - }); - - it('has two disabled buttons by default', function() { - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBe('true'); - expect(buttons.get(1).getAttribute('disabled')).toBe('true'); - }); - - it('enables the buttons after we edit the form', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBeNull(); - expect(buttons.get(1).getAttribute('disabled')).toBeNull(); - }); - - it('saves the changes when the save button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let save = element.all(by.css('app-hero-detail > form > div > button')).get(0); - save.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Bombastica'); - }); - - it('reverts the changes when the revert button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1); - revert.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Bombastic'); - expect(nameInput.getAttribute('value')).toBe('Bombastic'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(3); - newLairButton.click(); - let address2 = finalDemoAddressForm(element, 1); - expect(address2.street).toBe(''); - expect(address2.state).toBe(''); - expect(address2.zip).toBe(''); - expect(address2.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - }); - - describe('Magneta form', function() { - - beforeEach(function() { - let magnetaButton = element.all(by.css('nav a')).get(2); - magnetaButton.click(); - }); - - it('should show hero information when the button is clicked', function() { - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Magneta'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Magneta'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail > p')); - expect(json.getText()).toContain('Magneta'); - }); - - it('has two disabled buttons by default', function() { - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBe('true'); - expect(buttons.get(1).getAttribute('disabled')).toBe('true'); - }); - - it('enables the buttons after we edit the form', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let buttons = element.all(by.css('app-hero-detail > form > div > button')); - expect(buttons.get(0).getAttribute('disabled')).toBeNull(); - expect(buttons.get(1).getAttribute('disabled')).toBeNull(); - }); - - it('saves the changes when the save button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let save = element.all(by.css('app-hero-detail > form > div > button')).get(0); - save.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Magnetaa'); - }); - - it('reverts the changes when the revert button is clicked', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - nameInput.sendKeys('a'); - let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1); - revert.click(); - let editMessage = element(by.css('app-hero-list > div > h3')); - expect(editMessage.getText()).toBe('Editing: Magneta'); - expect(nameInput.getAttribute('value')).toBe('Magneta'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(3); - newLairButton.click(); - let address = finalDemoAddressForm(element, 0); - expect(address.street).toBe(''); - expect(address.state).toBe(''); - expect(address.zip).toBe(''); - expect(address.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - }); - }); // final demo - -// *************Begin FormArray Demo test******************************* - - - describe('formArray demo', function() { - beforeEach(function() { - let FormArrayOption = element.all(by.css('select option')).get(7); - FormArrayOption.click(); - }); - - it('should show FormArray Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('FormArray Demo'); - }); - }); - - it('does not select any hero by default', function() { - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - it('refreshes the page upon button click', function() { - // We move to another page... - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - let refresh = element(by.css('button')); - refresh.click(); - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - describe('Whirlwind form', function() { - beforeEach(function() { - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - }); - - it('should show hero information when the button is clicked', function() { - let editMessage = element(by.css('div.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwind'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Whirlwind'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('123 Main'); - expect(address1.state).toBe('CA'); - expect(address1.zip).toBe('94801'); - expect(address1.city).toBe('Anywhere'); - let address2 = finalDemoAddressForm(element, 1); - expect(address2.street).toBe('456 Maple'); - expect(address2.state).toBe('VA'); - expect(address2.zip).toBe('23226'); - expect(address2.city).toBe('Somewhere'); - }); - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-8 > p')); - expect(json.getText()).toContain('Whirlwind'); - expect(json.getText()).toContain('Anywhere'); - expect(json.getText()).toContain('Somewhere'); - expect(json.getText()).toContain('VA'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(1); - newLairButton.click(); - let address2 = finalDemoAddressForm(element, 2); - expect(address2.street).toBe(''); - expect(address2.state).toBe(''); - expect(address2.zip).toBe(''); - expect(address2.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - }); // Whirlwind form - - describe('Bombastic FormArray form', function() { - beforeEach(function() { - let bombasticButton = element.all(by.css('nav a')).get(1); - bombasticButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('div.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Bombastic'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - // nameInput.getAttribute('value').then(function(name: string) { - // expect(name).toBe('Whirlwind'); - // }); - expect(nameInput.getAttribute('value')).toBe('Bombastic'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('789 Elm'); - // expect(address1.state).toBe('OH'); - // This select should be OH not CA, which it shows in the UI, the JSON shows OH. - expect(address1.zip).toBe('04501'); - expect(address1.city).toBe('Smallville'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-8 > p')); - expect(json.getText()).toContain('Bombastic'); - expect(json.getText()).toContain('Smallville'); - expect(json.getText()).toContain('04501'); - expect(json.getText()).toContain('789 Elm'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(1); - newLairButton.click(); - let address1 = finalDemoAddressForm(element, 1); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - }); // Bombastic FormArray form - - describe('Magneta FormArray form', function() { - beforeEach(function() { - let magnetaButton = element.all(by.css('nav a')).get(2); - magnetaButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('div.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Magneta'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Magneta'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-8 > p')); - expect(json.getText()).toContain('Magneta'); - }); - - it('is able to add a new empty address', function() { - let newLairButton = element.all(by.css('button')).get(1); - newLairButton.click(); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - }); // Magneta FormArray form - - }); // formArray demo - - -// *************Begin SetValue Demo test******************************* - - describe('SetValue demo', function() { - beforeEach(function() { - let SetValueOption = element.all(by.css('select option')).get(6); - SetValueOption.click(); - }); - - it('should show SetValue Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('SetValue Demo'); - }); - }); - - it('does not select any hero by default', function() { - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - it('refreshes the page upon button click', function() { - // We move to another page... - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - let refresh = element(by.css('button')); - refresh.click(); - let heroSection = element(by.css('app-hero-list > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - describe('Whirlwind setValue form', function() { - beforeEach(function() { - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwind'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Whirlwind'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('123 Main'); - expect(address1.state).toBe('CA'); - expect(address1.zip).toBe('94801'); - expect(address1.city).toBe('Anywhere'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-7 > p')); - expect(json.getText()).toContain('Whirlwind'); - expect(json.getText()).toContain('Anywhere'); - let nameOutput = element(by.css('app-hero-detail-7 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Whirlwind'); - let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value: 123 Main'); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - }); // Whirlwind setValue form - - describe('Bombastic setValue form', function() { - beforeEach(function() { - let bombasticButton = element.all(by.css('nav a')).get(1); - bombasticButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Bombastic'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Bombastic'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe('789 Elm'); - expect(address1.state).toBe('OH'); - expect(address1.zip).toBe('04501'); - expect(address1.city).toBe('Smallville'); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-7 > p')); - expect(json.getText()).toContain('Bombastic'); - expect(json.getText()).toContain('Smallville'); - expect(json.getText()).toContain('04501'); - expect(json.getText()).toContain('789 Elm'); - let nameOutput = element(by.css('app-hero-detail-7 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Bombastic'); - let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value: 789 Elm'); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - }); // Bombastic setValue form - - describe('Magneta setValue form', function() { - beforeEach(function() { - let magnetaButton = element.all(by.css('nav a')).get(2); - magnetaButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('.demo > div > div > h3')); - expect(editMessage.getText()).toBe('Editing: Magneta'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Magneta'); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-7 > p')); - expect(json.getText()).toContain('Magneta'); - let nameOutput = element(by.css('app-hero-detail-7 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Magneta'); - let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value:'); - }); - - }); // Magneta setValue form - }); // SetValue demo - -// *************Begin patchValue Demo test******************************* - - describe('patchValue demo', function() { - beforeEach(function() { - let SetValueOption = element.all(by.css('select option')).get(5); - SetValueOption.click(); - }); - - it('should show patchValue Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('PatchValue Demo'); - }); - }); - - it('does not select any hero by default', function() { - let heroSection = element(by.css('.demo > div > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - it('refreshes the page upon button click', function() { - // We move to another page... - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - let refresh = element(by.css('button')); - refresh.click(); - let heroSection = element(by.css('.demo > div > div')); - expect(heroSection.isPresent()).toBe(false); - }); - - describe('Whirlwind patchValue form', function() { - beforeEach(function() { - let whirlwindButton = element.all(by.css('nav a')).get(0); - whirlwindButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('h2 ~ h3')); - expect(editMessage.getText()).toBe('Editing: Whirlwind'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Whirlwind'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-6 > p')); - expect(json.getText()).toContain('Whirlwind'); - let nameOutput = element(by.css('app-hero-detail-6 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Whirlwind'); - let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value:'); - }); - - - }); // Bombastic patchValue form - describe('Bombastic patchValue form', function() { - beforeEach(function() { - let bombasticButton = element.all(by.css('nav a')).get(1); - bombasticButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('h2 ~ h3')); - expect(editMessage.getText()).toBe('Editing: Bombastic'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Bombastic'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-6 > p')); - expect(json.getText()).toContain('Bombastic'); - let nameOutput = element(by.css('app-hero-detail-6 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Bombastic'); - let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value:'); - }); - }); // Bombastic patchValue form - - describe('Magneta patchValue form', function() { - beforeEach(function() { - let magnetaButton = element.all(by.css('nav a')).get(2); - magnetaButton.click(); - }); - - it('should show a hero information when the button is clicked', function() { - let editMessage = element(by.css('h2 ~ h3')); - expect(editMessage.getText()).toBe('Editing: Magneta'); - }); - - it('should show a form with the selected hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe('Magneta'); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-6 > p')); - expect(json.getText()).toContain('Magneta'); - let nameOutput = element(by.css('app-hero-detail-6 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value: Magneta'); - let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value:'); - }); - - }); // Magneta patchValue form - }); // PatchValue demo - - - -// *************Begin Nested FormBuilder Demo test******************************* - - describe('Nested FormBuilder demo', function() { - beforeEach(function() { - let NestedFormBuilderOption = element.all(by.css('select option')).get(4); - NestedFormBuilderOption.click(); - }); - - it('should show Nested FormBuilder Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('Nested FormBuilder group Demo'); - }); - }); - - it('should show a form for hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe(''); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-5 > p')); - expect(json.getText()).toContain('address'); - let nameOutput = element(by.css('app-hero-detail-5 > p ~ p')); - expect(nameOutput.getText()).toContain('Name value:'); - let streetOutput = element(by.css('app-hero-detail-5 > p ~ p ~ p')); - expect(streetOutput.getText()).toContain('Street value:'); - }); - - }); // Nested FormBuilder demo - -// *************Begin Group with multiple controls Demo test******************************* - - describe('Group with multiple controls demo', function() { - beforeEach(function() { - let NestedFormBuilderOption = element.all(by.css('select option')).get(3); - NestedFormBuilderOption.click(); - }); - - it('should show Group with multiple controls Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('Group with multiple controls Demo'); - }); - }); - - it('should show header', function() { - let header = element(by.css('app-hero-detail-4 > h3')); - expect(header.getText()).toBe('A FormGroup with multiple FormControls'); - }); - - it('should show a form for hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe(''); - let address1 = finalDemoAddressForm(element, 0); - expect(address1.street).toBe(''); - expect(address1.state).toBe(''); - expect(address1.zip).toBe(''); - expect(address1.city).toBe(''); - }); - - it('should show three radio buttons', function() { - let radioButtons = element.all(by.css('input[formcontrolname=power]')); - expect(radioButtons.get(0).getAttribute('value')).toBe('flight'); - expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision'); - expect(radioButtons.get(2).getAttribute('value')).toBe('strength'); - }); - it('should show a checkbox', function() { - let checkbox = element(by.css('input[formcontrolname=sidekick]')); - expect(checkbox.getAttribute('checked')).toBe(null); - }); - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-4 > p')); - expect(json.getText()).toContain('power'); - }); - -}); // Group with multiple controls demo - - - -// *************Begin Group with multiple controls Demo test******************************* - - describe('Simple FormBuilder Group demo', function() { - beforeEach(function() { - let SimpleFormBuilderOption = element.all(by.css('select option')).get(2); - SimpleFormBuilderOption.click(); - }); - - it('should show Simple FormBuilder group Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('Simple FormBuilder group Demo'); - }); - }); - - it('should show header', function() { - let header = element(by.css('app-hero-detail-3 > h3')); - expect(header.getText()).toBe('A FormGroup with a single FormControl using FormBuilder'); - }); - - it('should show a form for hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe(''); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-3 > p')); - expect(json.getText()).toContain('name'); - let validStatus = element(by.css('app-hero-detail-3 > p ~ p')); - expect(validStatus.getText()).toContain('INVALID'); - }); - -}); // Group with multiple controls demo - - -// *************Begin FormControl in a FormGroup Demo test******************************* - - describe('FormControl in a FormGroup demo', function() { - beforeEach(function() { - let SimpleFormBuilderOption = element.all(by.css('select option')).get(1); - SimpleFormBuilderOption.click(); - }); - - it('should show FormControl in a FormGroup Demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('FormControl in a FormGroup Demo'); - }); - }); - - it('should show header', function() { - let header = element(by.css('app-hero-detail-2 > h3')); - expect(header.getText()).toBe('FormControl in a FormGroup'); - }); - - it('should show a form for hero information', function() { - let nameInput = element(by.css('input[formcontrolname=name]')); - expect(nameInput.getAttribute('value')).toBe(''); - }); - - it('shows a json output from the form', function() { - let json = element(by.css('app-hero-detail-2 > p')); - expect(json.getText()).toContain('name'); - }); - -}); // Group with multiple controls demo - -// *************Begin Just A FormControl Demo test******************************* - - describe('Just a FormControl demo', function() { - beforeEach(function() { - let FormControlOption = element.all(by.css('select option')).get(0); - FormControlOption.click(); - }); - - it('should show Just a FormControl demo', function() { - select.getAttribute('value').then(function(demo: string) { - expect(demo).toBe('Just a FormControl Demo'); - }); - }); - - it('should show header', function() { - let header = element(by.css('app-hero-detail-1 > h3')); - expect(header.getText()).toBe('Just a FormControl'); - }); - - it('should show a form for hero information', function() { - let nameInput = element(by.css('input')); - expect(nameInput.getAttribute('value')).toBe(''); - }); - - }); // Just a FormControl demo test - - -}); // reactive forms diff --git a/docs_app/content/examples/reactive-forms/example-config.json b/docs_app/content/examples/reactive-forms/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/reactive-forms/final.stackblitz.json b/docs_app/content/examples/reactive-forms/final.stackblitz.json deleted file mode 100644 index f789236245..0000000000 --- a/docs_app/content/examples/reactive-forms/final.stackblitz.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "description": "Angular Reactive Forms (final)", - "files":[ - "src/styles.css", - - "src/app/app.component.ts", - "src/app/app.component.html", - "src/app/app.component.css", - "src/app/app.module.ts", - "src/app/data-model.ts", - "src/app/hero.service.ts", - "src/app/hero-detail/hero-detail.component.html", - "src/app/hero-detail/hero-detail.component.ts", - "src/app/hero-detail/hero-detail.component.css", - "src/app/hero-list/hero-list.component.html", - "src/app/hero-list/hero-list.component.ts", - "src/app/hero-list/hero-list.component.css", - - "src/main-final.ts", - "src/index-final.html" - ], - "main": "src/index-final.html", - "tags": ["reactive", "forms"] -} diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.1.html b/docs_app/content/examples/reactive-forms/src/app/app.component.1.html deleted file mode 100644 index 14316fbe62..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/app.component.1.html +++ /dev/null @@ -1,4 +0,0 @@ -
    -

    Reactive Forms

    - -
    diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.css b/docs_app/content/examples/reactive-forms/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.html b/docs_app/content/examples/reactive-forms/src/app/app.component.html deleted file mode 100644 index b7d0e6d580..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/app.component.html +++ /dev/null @@ -1,4 +0,0 @@ -
    -

    Reactive Forms

    - -
    diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.ts b/docs_app/content/examples/reactive-forms/src/app/app.component.ts deleted file mode 100644 index f7baece9b5..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/app.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { } diff --git a/docs_app/content/examples/reactive-forms/src/app/app.module.ts b/docs_app/content/examples/reactive-forms/src/app/app.module.ts deleted file mode 100644 index 39b074c178..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/app.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docplaster -// #docregion -// #docregion v1 -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import module - -import { AppComponent } from './app.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -// #enddocregion v1 -// #docregion hero-service-list -// add JavaScript imports -import { HeroListComponent } from './hero-list/hero-list.component'; -import { HeroService } from './hero.service'; -// #docregion v1 - -@NgModule({ - declarations: [ - AppComponent, - HeroDetailComponent, -// #enddocregion v1 - HeroListComponent // <--declare HeroListComponent -// #docregion v1 - ], - // #enddocregion hero-service-list - imports: [ - BrowserModule, - ReactiveFormsModule // <-- #2 add to @NgModule imports - ], - // #enddocregion v1 - // export for the DemoModule - // #docregion hero-service-list - // ... - exports: [ - AppComponent, - HeroDetailComponent, - HeroListComponent // <-- export HeroListComponent - ], - providers: [ HeroService ], // <-- provide HeroService -// #enddocregion hero-service-list -// #docregion v1 - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion v1 diff --git a/docs_app/content/examples/reactive-forms/src/app/data-model.ts b/docs_app/content/examples/reactive-forms/src/app/data-model.ts deleted file mode 100644 index ad01ddee56..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/data-model.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docregion -// #docregion model-classes -export class Hero { - id = 0; - name = ''; - addresses: Address[]; -} - -export class Address { - street = ''; - city = ''; - state = ''; - zip = ''; -} -// #enddocregion model-classes - -export const heroes: Hero[] = [ - { - id: 1, - name: 'Whirlwind', - addresses: [ - {street: '123 Main', city: 'Anywhere', state: 'CA', zip: '94801'}, - {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'}, - ] - }, - { - id: 2, - name: 'Bombastic', - addresses: [ - {street: '789 Elm', city: 'Smallville', state: 'OH', zip: '04501'}, - ] - }, - { - id: 3, - name: 'Magneta', - addresses: [ ] - }, -]; - -export const states = ['CA', 'MD', 'OH', 'VA']; diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.component.html b/docs_app/content/examples/reactive-forms/src/app/demo.component.html deleted file mode 100644 index 369427a739..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/demo.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
    -

    Reactive Forms

    -

    Pick a demo: - -

    - -
    - -
    - - - - - - - -
    - -

    Loading heroes ...

    -

    Select a hero:

    - - - -
    -
    -

    Hero Detail

    -

    Editing: {{selectedHero.name}}

    - - - - -
    -
    -
    -
    diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.component.ts b/docs_app/content/examples/reactive-forms/src/app/demo.component.ts deleted file mode 100644 index 71658e7b6b..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/demo.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -/* tslint:disable:member-ordering */ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; -import { finalize } from 'rxjs/operators'; - -import { Hero } from './data-model'; -import { HeroService } from './hero.service'; - -@Component({ - selector: 'app-root', - templateUrl: './demo.component.html' -}) -export class DemoComponent { - - demos: string[] = [ - 'Just a FormControl', - 'FormControl in a FormGroup', - 'Simple FormBuilder group', - 'Group with multiple controls', - 'Nested FormBuilder group', - 'PatchValue', - 'SetValue', - 'FormArray', - 'Final'].map(n => n + ' Demo'); - - final = this.demos.length; - demo = this.final; // current demo - - heroes: Observable; - isLoading = false; - selectedHero: Hero; - - constructor(private heroService: HeroService) { } - - getHeroes() { - this.isLoading = true; - this.heroes = this.heroService.getHeroes().pipe( - finalize(() => this.isLoading = false) - ); - this.selectedHero = undefined; - } - - select(hero: Hero) { this.selectedHero = hero; } - - selectDemo(demo: number) { - this.demo = demo + 1; - this.getHeroes(); - } -} diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.module.ts b/docs_app/content/examples/reactive-forms/src/app/demo.module.ts deleted file mode 100644 index a8b71ab5b6..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/demo.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { ReactiveFormsModule } from '@angular/forms'; - -import { AppModule } from './app.module'; -import { DemoComponent } from './demo.component'; -import { HeroDetailComponent1 } from './hero-detail/hero-detail-1.component'; -import { HeroDetailComponent2 } from './hero-detail/hero-detail-2.component'; -import { HeroDetailComponent3 } from './hero-detail/hero-detail-3.component'; -import { HeroDetailComponent4 } from './hero-detail/hero-detail-4.component'; -import { HeroDetailComponent5 } from './hero-detail/hero-detail-5.component'; -import { HeroDetailComponent6 } from './hero-detail/hero-detail-6.component'; -import { HeroDetailComponent7 } from './hero-detail/hero-detail-7.component'; -import { HeroDetailComponent8 } from './hero-detail/hero-detail-8.component'; - -@NgModule({ - imports: [ - BrowserModule, - ReactiveFormsModule, - AppModule, - ], - declarations: [ DemoComponent, - HeroDetailComponent1, - HeroDetailComponent2, - HeroDetailComponent3, - HeroDetailComponent4, - HeroDetailComponent5, - HeroDetailComponent6, - HeroDetailComponent7, - HeroDetailComponent8], - bootstrap: [ DemoComponent ] -}) -export class DemoModule { } diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html deleted file mode 100644 index 7217708d22..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html +++ /dev/null @@ -1,8 +0,0 @@ - -

    Hero Detail

    -

    Just a FormControl

    - - - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts deleted file mode 100644 index 7ce88f3522..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* tslint:disable:component-class-suffix */ - -import { Component } from '@angular/core'; -// #docregion import -import { FormControl } from '@angular/forms'; -// #enddocregion import - -@Component({ - selector: 'app-hero-detail-1', - templateUrl: './hero-detail-1.component.html' -}) -// #docregion v1 -export class HeroDetailComponent1 { - name = new FormControl(); -} diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html deleted file mode 100644 index 79410c4a6d..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html +++ /dev/null @@ -1,18 +0,0 @@ - -

    Hero Detail

    -

    FormControl in a FormGroup

    -
    -
    - -
    -
    - - - -

    Form value: {{ heroForm.value | json }}

    - - - - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts deleted file mode 100644 index 6508904ffa..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-2', - templateUrl: './hero-detail-2.component.html' -}) -// #docregion v2 -export class HeroDetailComponent2 { - heroForm = new FormGroup ({ - name: new FormControl() - }); -} -// #enddocregion v2 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html deleted file mode 100644 index 89c5513566..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html +++ /dev/null @@ -1,16 +0,0 @@ - -

    Hero Detail

    -

    A FormGroup with a single FormControl using FormBuilder

    -
    -
    - -
    -
    - - - -

    Form value: {{ heroForm.value | json }}

    -

    Form status: {{ heroForm.status | json }}

    - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts deleted file mode 100644 index 81388c8faa..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-3', - templateUrl: './hero-detail-3.component.html' -}) -// #docregion v3 -export class HeroDetailComponent3 { - heroForm: FormGroup; // <--- heroForm is of type FormGroup - - constructor(private fb: FormBuilder) { // <--- inject FormBuilder - this.createForm(); - } - - createForm() { - // #docregion required - this.heroForm = this.fb.group({ - name: ['', Validators.required ], - }); - // #enddocregion required - } -} -// #enddocregion v3 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts deleted file mode 100644 index 7cc0b1ca8f..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-3', - templateUrl: './hero-detail-3.component.html' -}) -// #docregion v3a -export class HeroDetailComponent3 { - heroForm: FormGroup; // <--- heroForm is of type FormGroup - - constructor(private fb: FormBuilder) { // <--- inject FormBuilder - this.createForm(); - } - - createForm() { - this.heroForm = this.fb.group({ - name: '', // <--- the FormControl called "name" - }); - } -} -// #enddocregion v3a diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html deleted file mode 100644 index 8702eeb540..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html +++ /dev/null @@ -1,46 +0,0 @@ - -

    Hero Detail

    -

    A FormGroup with multiple FormControls

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -

    Super power:

    - - - -
    -
    - -
    -
    - - -

    Form value: {{ heroForm.value | json }}

    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts deleted file mode 100644 index b9a61aa1ea..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -import { states } from '../data-model'; -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-4', - templateUrl: './hero-detail-4.component.html' -}) -// #docregion v4 -export class HeroDetailComponent4 { - heroForm: FormGroup; - states = states; - - constructor(private fb: FormBuilder) { - this.createForm(); - } - - createForm() { - this.heroForm = this.fb.group({ - name: ['', Validators.required ], - street: '', - city: '', - state: '', - zip: '', - power: '', - sidekick: '' - }); - } -} -// #enddocregion v4 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html deleted file mode 100644 index bc73ce006e..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html +++ /dev/null @@ -1,56 +0,0 @@ - -
    -
    - -
    - -
    -

    Secret Lair

    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -

    Super power:

    - - - -
    -
    - -
    -
    - -

    heroForm value: {{ heroForm.value | json}}

    -

    Extra info for the curious:

    - -

    Name value: {{ heroForm.get('name').value }}

    - - - -

    Street value: {{ heroForm.get('address.street').value}}

    - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts deleted file mode 100644 index 1193265c5b..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* tslint:disable:component-class-suffix */ -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -import { states } from '../data-model'; - -@Component({ - selector: 'app-hero-detail-5', - templateUrl: './hero-detail-5.component.html' -}) -// #docregion v5 -export class HeroDetailComponent5 { - heroForm: FormGroup; - states = states; - - constructor(private fb: FormBuilder) { - this.createForm(); - } - - createForm() { - this.heroForm = this.fb.group({ // <-- the parent FormGroup - name: ['', Validators.required ], - address: this.fb.group({ // <-- the child FormGroup - street: '', - city: '', - state: '', - zip: '' - }), - power: '', - sidekick: '' - }); - } -} -// #enddocregion v5 - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html deleted file mode 100644 index a6f352a9b9..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html +++ /dev/null @@ -1,46 +0,0 @@ - -

    Hero Detail

    -

    PatchValue to initialize a value

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -

    Super power:

    - - - -
    -
    - -
    -
    - - -

    Form value: {{ heroForm.value | json }}

    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts deleted file mode 100644 index 042b21aaf7..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion import-input -import { Component, Input, OnChanges } from '@angular/core'; -// #enddocregion import-input -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -// #docregion import-hero -import { Hero, states } from '../data-model'; -// #enddocregion import-hero - -////////// 6 //////////////////// - -@Component({ - selector: 'app-hero-detail-6', - templateUrl: './hero-detail-5.component.html' -}) -// #docregion v6 -export class HeroDetailComponent6 implements OnChanges { - // #docregion hero - @Input() hero: Hero; - // #enddocregion hero - - heroForm: FormGroup; - states = states; - - constructor(private fb: FormBuilder) { - this.createForm(); - } - - createForm() { - // #docregion hero-form-model - this.heroForm = this.fb.group({ - name: ['', Validators.required ], - address: this.fb.group({ - street: '', - city: '', - state: '', - zip: '' - }), - power: '', - sidekick: '' - }); - // #enddocregion hero-form-model - } - - // #docregion patch-value-on-changes - ngOnChanges() { // <-- call rebuildForm in ngOnChanges - this.rebuildForm(); - } - // #enddocregion patch-value-on-changes - - // #docregion patch-value-rebuildform - rebuildForm() { // <-- wrap patchValue in rebuildForm - this.heroForm.reset(); - // #docregion patch-value - this.heroForm.patchValue({ - name: this.hero.name - }); - // #enddocregion patch-value - } - // #enddocregion patch-value-rebuildform -} - - - -// #enddocregion v6 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html deleted file mode 100644 index 57b00ca92c..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html +++ /dev/null @@ -1,46 +0,0 @@ - -

    Hero Detail

    -

    A FormGroup with multiple FormControls

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -

    Super power:

    - - - -
    -
    - -
    -
    - - -

    Form value: {{ heroForm.value | json }}

    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts deleted file mode 100644 index b70b2e879d..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docplaster -// #docregion imports -import { Component, Input, OnChanges } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -// #docregion import-address -import { Address, Hero, states } from '../data-model'; -// #enddocregion import-address - -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-7', - templateUrl: './hero-detail-5.component.html' -}) -// #docregion v7 -export class HeroDetailComponent7 implements OnChanges { - @Input() hero: Hero; - - heroForm: FormGroup; - states = states; - - constructor(private fb: FormBuilder) { - this.createForm(); - } - - createForm() { - // #docregion address-form-group - this.heroForm = this.fb.group({ - name: ['', Validators.required ], - address: this.fb.group(new Address()), // <-- a FormGroup with a new address - power: '', - sidekick: '' - }); - // #enddocregion address-form-group - } - - // #docregion ngOnChanges - ngOnChanges() { - this.rebuildForm(); - } - // #enddocregion ngOnChanges - - // #docregion rebuildForm - rebuildForm() { - this.heroForm.reset({ - name: this.hero.name, - // #docregion set-value-address - address: this.hero.addresses[0] || new Address() - // #enddocregion set-value-address - }); - } - // #enddocregion rebuildForm - - /* First version of rebuildForm */ - rebuildForm1() { - // #docregion reset - this.heroForm.reset(); - // #enddocregion reset - // #docregion set-value - this.heroForm.setValue({ - name: this.hero.name, - address: this.hero.addresses[0] || new Address() - }); - // #enddocregion set-value - } -} diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html deleted file mode 100644 index bfb591551e..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html +++ /dev/null @@ -1,72 +0,0 @@ - -

    Using FormArray to add groups

    - -
    -

    Form Changed: {{ heroForm.dirty }}

    - -
    - -
    - - - -
    - -
    - - -

    Address #{{i + 1}}

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - - -
    - - - - - - - -
    - - -
    -

    Super power:

    - - - -
    -
    - -
    -
    - -

    heroForm value: {{ heroForm.value | json}}

    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts deleted file mode 100644 index f3e09df7fe..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts +++ /dev/null @@ -1,74 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component, Input, OnChanges } from '@angular/core'; -import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; - -import { Address, Hero, states } from '../data-model'; -// #enddocregion imports - -@Component({ - selector: 'app-hero-detail-8', - templateUrl: './hero-detail-8.component.html' -}) -// #docregion v8 -export class HeroDetailComponent8 implements OnChanges { - @Input() hero: Hero; - - heroForm: FormGroup; - states = states; - - // #docregion ctor - constructor(private fb: FormBuilder) { - this.createForm(); - this.logNameChange(); - } - // #enddocregion ctor - - createForm() { - // #docregion secretLairs-form-array - this.heroForm = this.fb.group({ - name: ['', Validators.required ], - secretLairs: this.fb.array([]), // <-- secretLairs as an empty FormArray - power: '', - sidekick: '' - }); - // #enddocregion secretLairs-form-array - } - - logNameChange() {/* Coming soon */} - - // #docregion onchanges - ngOnChanges() { - this.rebuildForm(); - } - // #enddocregion onchanges - - // #docregion rebuildform - rebuildForm() { - this.heroForm.reset({ - name: this.hero.name - }); - this.setAddresses(this.hero.addresses); - } -// #enddocregion rebuildform - - // #docregion get-secret-lairs - get secretLairs(): FormArray { - return this.heroForm.get('secretLairs') as FormArray; - }; - // #enddocregion get-secret-lairs - - // #docregion set-addresses - setAddresses(addresses: Address[]) { - const addressFGs = addresses.map(address => this.fb.group(address)); - const addressFormArray = this.fb.array(addressFGs); - this.heroForm.setControl('secretLairs', addressFormArray); - } - // #enddocregion set-addresses - - // #docregion add-lair - addLair() { - this.secretLairs.push(this.fb.group(new Address())); - } - // #enddocregion add-lair -} diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index c5e77ba43d..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,73 +0,0 @@ - - - -
    -
    -   - -
    - - - -
    - -
    - -
    -
    - -

    Address #{{i + 1}}

    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - -
    - -
    - -
    -

    Super power:

    - - - -
    -
    - -
    -
    - - -

    heroForm value: {{ heroForm.value | json}}

    - - -

    Name change log

    -
    {{name}}
    - diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index 13ef66b0f9..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,113 +0,0 @@ -// #docplaster -// #docregion -import { Component, Input, OnChanges } from '@angular/core'; -import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; - -import { Address, Hero, states } from '../data-model'; -// #docregion import-service -import { HeroService } from '../hero.service'; -// #enddocregion import-service - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] -}) - -// #docregion onchanges-implementation -export class HeroDetailComponent implements OnChanges { -// #enddocregion onchanges-implementation - @Input() hero: Hero; - - heroForm: FormGroup; - // #docregion log-name-change - nameChangeLog: string[] = []; - // #enddocregion log-name-change - states = states; - - // #docregion ctor - constructor( - private fb: FormBuilder, - private heroService: HeroService) { - - this.createForm(); - this.logNameChange(); - } - // #enddocregion ctor - - createForm() { - this.heroForm = this.fb.group({ - name: '', - secretLairs: this.fb.array([]), - power: '', - sidekick: '' - }); - } - - ngOnChanges() { - this.rebuildForm(); - } - - rebuildForm() { - this.heroForm.reset({ - name: this.hero.name - }); - this.setAddresses(this.hero.addresses); - } - - get secretLairs(): FormArray { - return this.heroForm.get('secretLairs') as FormArray; - }; - - setAddresses(addresses: Address[]) { - const addressFGs = addresses.map(address => this.fb.group(address)); - const addressFormArray = this.fb.array(addressFGs); - this.heroForm.setControl('secretLairs', addressFormArray); - } - - addLair() { - this.secretLairs.push(this.fb.group(new Address())); - } - - // #docregion on-submit - onSubmit() { - this.hero = this.prepareSaveHero(); - this.heroService.updateHero(this.hero).subscribe(/* error handling */); - this.rebuildForm(); - } - // #enddocregion on-submit - - // #docregion prepare-save-hero - prepareSaveHero(): Hero { - const formModel = this.heroForm.value; - - // deep copy of form model lairs - const secretLairsDeepCopy: Address[] = formModel.secretLairs.map( - (address: Address) => Object.assign({}, address) - ); - - // return new `Hero` object containing a combination of original hero value(s) - // and deep copies of changed form model values - const saveHero: Hero = { - id: this.hero.id, - name: formModel.name as string, - // addresses: formModel.secretLairs // <-- bad! - addresses: secretLairsDeepCopy - }; - return saveHero; - } - // #enddocregion prepare-save-hero - - // #docregion revert - revert() { this.rebuildForm(); } - // #enddocregion revert - - // #docregion log-name-change - logNameChange() { - const nameControl = this.heroForm.get('name'); - nameControl.valueChanges.forEach( - (value: string) => this.nameChangeLog.push(value) - ); - } - // #enddocregion log-name-change -} diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html deleted file mode 100644 index 409c9b2a5c..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html +++ /dev/null @@ -1,8 +0,0 @@ - - - -
    - -
    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.css b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html deleted file mode 100644 index 78356caeb2..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -

    Loading heroes ...

    -

    Select a hero:

    - - - -
    -
    -

    Hero Detail

    -

    Editing: {{selectedHero.name}}

    - - - -
    diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts deleted file mode 100644 index c310fb8dd8..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; -import { finalize } from 'rxjs/operators'; - -import { Hero } from '../data-model'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-hero-list', - templateUrl: './hero-list.component.html', - styleUrls: ['./hero-list.component.css'] -}) -export class HeroListComponent implements OnInit { - heroes: Observable; - isLoading = false; - selectedHero: Hero; - - constructor(private heroService: HeroService) { } - - ngOnInit() { this.getHeroes(); } - - getHeroes() { - this.isLoading = true; - this.heroes = this.heroService.getHeroes() - // Todo: error handling - .pipe(finalize(() => this.isLoading = false)); - this.selectedHero = undefined; - } - - select(hero: Hero) { this.selectedHero = hero; } -} diff --git a/docs_app/content/examples/reactive-forms/src/app/hero.service.ts b/docs_app/content/examples/reactive-forms/src/app/hero.service.ts deleted file mode 100644 index ff1caf064a..0000000000 --- a/docs_app/content/examples/reactive-forms/src/app/hero.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -import { Hero, heroes } from './data-model'; - -@Injectable() -export class HeroService { - - delayMs = 500; - - // Fake server get; assume nothing can go wrong - getHeroes(): Observable { - return of(heroes).pipe(delay(this.delayMs)); // simulate latency with delay - } - - // Fake server update; assume nothing can go wrong - updateHero(hero: Hero): Observable { - const oldHero = heroes.find(h => h.id === hero.id); - const newHero = Object.assign(oldHero, hero); // Demo: mutate cached hero - return of(newHero).pipe(delay(this.delayMs)); // simulate latency with delay - } -} diff --git a/docs_app/content/examples/reactive-forms/src/index-final.html b/docs_app/content/examples/reactive-forms/src/index-final.html deleted file mode 100644 index 13416ffe40..0000000000 --- a/docs_app/content/examples/reactive-forms/src/index-final.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - Hero Form - - - - - - - - - - - diff --git a/docs_app/content/examples/reactive-forms/src/index.html b/docs_app/content/examples/reactive-forms/src/index.html deleted file mode 100644 index 7121ad3455..0000000000 --- a/docs_app/content/examples/reactive-forms/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Hero Form - - - - - - - - - - diff --git a/docs_app/content/examples/reactive-forms/src/main-final.ts b/docs_app/content/examples/reactive-forms/src/main-final.ts deleted file mode 100644 index 0a1ea31596..0000000000 --- a/docs_app/content/examples/reactive-forms/src/main-final.ts +++ /dev/null @@ -1,13 +0,0 @@ -// tslint:disable:no-unused-variable -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); - diff --git a/docs_app/content/examples/reactive-forms/src/main.ts b/docs_app/content/examples/reactive-forms/src/main.ts deleted file mode 100644 index bd1865a45b..0000000000 --- a/docs_app/content/examples/reactive-forms/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -// tslint:disable:no-unused-variable -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; // just the final version -import { DemoModule } from './app/demo.module'; // demo picker -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/docs_app/content/examples/reactive-forms/src/styles.1.css b/docs_app/content/examples/reactive-forms/src/styles.1.css deleted file mode 100644 index 167a66be4f..0000000000 --- a/docs_app/content/examples/reactive-forms/src/styles.1.css +++ /dev/null @@ -1 +0,0 @@ -@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css'); diff --git a/docs_app/content/examples/reactive-forms/stackblitz.json b/docs_app/content/examples/reactive-forms/stackblitz.json deleted file mode 100644 index 2b325c037b..0000000000 --- a/docs_app/content/examples/reactive-forms/stackblitz.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "description": "Angular Reactive Forms (Demo runner)", - "files":[ - "!**/*.d.ts", - "!**/*.js", - - "!src/app/app.component.1.ts", - "!src/app/hero-list.component.1.html", - - "!src/app/main-final.ts", - "!src/index-final.html" - ], - "tags": ["reactive", "forms"] -} diff --git a/docs_app/content/examples/router/e2e/app.e2e-spec.ts b/docs_app/content/examples/router/e2e/app.e2e-spec.ts deleted file mode 100644 index f5493caea4..0000000000 --- a/docs_app/content/examples/router/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,162 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ExpectedConditions } from 'protractor'; - -const numDashboardTabs = 5; -const numCrises = 4; -const numHeroes = 6; -const EC = ExpectedConditions; - -describe('Router', () => { - - beforeAll(() => browser.get('')); - - function getPageStruct() { - const hrefEles = element.all(by.css('app-root > nav a')); - const crisisDetail = element.all(by.css('app-root > ng-component > ng-component > ng-component > div')).first(); - const heroDetail = element(by.css('app-root > ng-component > div')); - - return { - hrefs: hrefEles, - activeHref: element(by.css('app-root > nav a.active')), - - crisisHref: hrefEles.get(0), - crisisList: element.all(by.css('app-root > ng-component > ng-component li')), - crisisDetail: crisisDetail, - crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')), - - heroesHref: hrefEles.get(1), - heroesList: element.all(by.css('app-root > ng-component li')), - heroDetail: heroDetail, - heroDetailTitle: heroDetail.element(by.xpath('*[1]')), - - adminHref: hrefEles.get(2), - adminPreloadList: element.all(by.css('app-root > ng-component > ng-component > ul > li')), - - loginHref: hrefEles.get(3), - loginButton: element.all(by.css('app-root > ng-component > p > button')), - - contactHref: hrefEles.get(4), - contactCancelButton: element.all(by.buttonText('Cancel')), - - outletComponents: element.all(by.css('app-root > ng-component')) - }; - } - - it('has expected dashboard tabs', () => { - const page = getPageStruct(); - expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count'); - expect(page.crisisHref.getText()).toEqual('Crisis Center'); - expect(page.heroesHref.getText()).toEqual('Heroes'); - expect(page.adminHref.getText()).toEqual('Admin'); - expect(page.loginHref.getText()).toEqual('Login'); - expect(page.contactHref.getText()).toEqual('Contact'); - }); - - it('has heroes selected as opening tab', () => { - const page = getPageStruct(); - expect(page.activeHref.getText()).toEqual('Heroes'); - }); - - it('has crises center items', async () => { - const page = getPageStruct(); - await page.crisisHref.click(); - expect(page.activeHref.getText()).toEqual('Crisis Center'); - expect(page.crisisList.count()).toBe(numCrises, 'crisis list count'); - }); - - it('has hero items', async () => { - const page = getPageStruct(); - await page.heroesHref.click(); - expect(page.activeHref.getText()).toEqual('Heroes'); - expect(page.heroesList.count()).toBe(numHeroes, 'hero list count'); - }); - - it('toggles views', async () => { - const page = getPageStruct(); - await page.crisisHref.click(); - expect(page.activeHref.getText()).toEqual('Crisis Center'); - expect(page.crisisList.count()).toBe(numCrises, 'crisis list count'); - await page.heroesHref.click(); - expect(page.activeHref.getText()).toEqual('Heroes'); - expect(page.heroesList.count()).toBe(numHeroes, 'hero list count'); - }); - - it('saves changed crisis details', async () => { - const page = getPageStruct(); - await page.crisisHref.click(); - await crisisCenterEdit(2, true); - }); - - it('can cancel changed crisis details', async () => { - const page = getPageStruct(); - await page.crisisHref.click(); - await crisisCenterEdit(3, false); - }); - - it('saves changed hero details', async () => { - const page = getPageStruct(); - await page.heroesHref.click(); - const heroEle = page.heroesList.get(4); - let text = await heroEle.getText(); - expect(text.length).toBeGreaterThan(0, 'hero item text length'); - // remove leading id from text - const heroText = text.substr(text.indexOf(' ')).trim(); - - await heroEle.click(); - expect(page.heroesList.count()).toBe(0, 'hero list count'); - expect(page.heroDetail.isPresent()).toBe(true, 'hero detail'); - expect(page.heroDetailTitle.getText()).toContain(heroText); - let inputEle = page.heroDetail.element(by.css('input')); - await inputEle.sendKeys('-foo'); - expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); - - let buttonEle = page.heroDetail.element(by.css('button')); - await buttonEle.click(); - expect(heroEle.getText()).toContain(heroText + '-foo'); - }); - - it('sees preloaded modules', async () => { - const page = getPageStruct(); - await page.loginHref.click(); - await page.loginButton.click(); - const list = page.adminPreloadList; - expect(list.count()).toBe(1, 'preloaded module'); - expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module'); - }); - - it('sees the secondary route', async () => { - const page = getPageStruct(); - await page.heroesHref.click(); - await page.contactHref.click(); - expect(page.outletComponents.count()).toBe(2, 'route count'); - }); - - async function crisisCenterEdit(index: number, save: boolean) { - const page = getPageStruct(); - await page.crisisHref.click(); - let crisisEle = page.crisisList.get(index); - let text = await crisisEle.getText(); - expect(text.length).toBeGreaterThan(0, 'crisis item text length'); - // remove leading id from text - const crisisText = text.substr(text.indexOf(' ')).trim(); - - await crisisEle.click(); - expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present'); - expect(page.crisisDetailTitle.getText()).toContain(crisisText); - let inputEle = page.crisisDetail.element(by.css('input')); - await inputEle.sendKeys('-foo'); - - let buttonEle = page.crisisDetail.element(by.buttonText(save ? 'Save' : 'Cancel')); - await buttonEle.click(); - crisisEle = page.crisisList.get(index); - if (save) { - expect(crisisEle.getText()).toContain(crisisText + '-foo'); - } else { - await browser.wait(EC.alertIsPresent(), 4000); - await browser.switchTo().alert().accept(); - expect(crisisEle.getText()).toContain(crisisText); - } - } - -}); diff --git a/docs_app/content/examples/router/example-config.json b/docs_app/content/examples/router/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts deleted file mode 100644 index ffa3e3cb8f..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    Dashboard

    - ` -}) -export class AdminDashboardComponent { } diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts deleted file mode 100644 index 19406bea9b..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -@Component({ - template: ` -

    Dashboard

    - -

    Session ID: {{ sessionId | async }}

    - -

    Token: {{ token | async }}

    - ` -}) -export class AdminDashboardComponent implements OnInit { - sessionId: Observable; - token: Observable; - - constructor(private route: ActivatedRoute) {} - - ngOnInit() { - // Capture the session ID if available - this.sessionId = this.route - .queryParamMap - .pipe(map(params => params.get('session_id') || 'None')); - - // Capture the fragment if available - this.token = this.route - .fragment - .pipe(map(fragment => fragment || 'None')); - } -} diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts deleted file mode 100644 index 11be8fd029..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -import { SelectivePreloadingStrategy } from '../selective-preloading-strategy'; - - -@Component({ - template: ` -

    Dashboard

    - -

    Session ID: {{ sessionId | async }}

    - -

    Token: {{ token | async }}

    - - Preloaded Modules -
      -
    • {{ module }}
      • -
    - ` -}) -export class AdminDashboardComponent implements OnInit { - sessionId: Observable; - token: Observable; - modules: string[]; - - constructor( - private route: ActivatedRoute, - private preloadStrategy: SelectivePreloadingStrategy - ) { - this.modules = preloadStrategy.preloadedModules; - } - - ngOnInit() { - // Capture the session ID if available - this.sessionId = this.route - .queryParamMap - .pipe(map(params => params.get('session_id') || 'None')); - - // Capture the fragment if available - this.token = this.route - .fragment - .pipe(map(fragment => fragment || 'None')); - } -} diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts deleted file mode 100644 index e7d83f113f..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { AdminComponent } from './admin.component'; -import { AdminDashboardComponent } from './admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes.component'; - -// #docregion admin-routes -const adminRoutes: Routes = [ - { - path: 'admin', - component: AdminComponent, - children: [ - { - path: '', - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] -}) -export class AdminRoutingModule {} -// #enddocregion admin-routes -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts deleted file mode 100644 index d945201afe..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { AdminComponent } from './admin.component'; -import { AdminDashboardComponent } from './admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes.component'; - -// #docregion admin-route -import { AuthGuard } from '../auth-guard.service'; - -const adminRoutes: Routes = [ - { - path: 'admin', - component: AdminComponent, - canActivate: [AuthGuard], - children: [ - { - path: '', - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ], - // #enddocregion admin-route - canActivateChild: [AuthGuard] - // #docregion admin-route - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] -}) -export class AdminRoutingModule {} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts deleted file mode 100644 index 63f1c9aaf4..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { AdminComponent } from './admin.component'; -import { AdminDashboardComponent } from './admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes.component'; - -// #docregion admin-route -import { AuthGuard } from '../auth-guard.service'; - -// #docregion can-activate-child -const adminRoutes: Routes = [ - { - path: 'admin', - component: AdminComponent, - canActivate: [AuthGuard], - children: [ - { - path: '', - canActivateChild: [AuthGuard], - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] -}) -export class AdminRoutingModule {} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts deleted file mode 100644 index 2b1048d110..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { AdminComponent } from './admin.component'; -import { AdminDashboardComponent } from './admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes.component'; - -import { AuthGuard } from '../auth-guard.service'; - -const adminRoutes: Routes = [ - { - path: '', - component: AdminComponent, - canActivate: [AuthGuard], - children: [ - { - path: '', - canActivateChild: [AuthGuard], - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(adminRoutes) - ], - exports: [ - RouterModule - ] -}) -export class AdminRoutingModule {} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/admin/admin.component.ts b/docs_app/content/examples/router/src/app/admin/admin.component.ts deleted file mode 100644 index 30abfa4524..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    ADMIN

    - - - ` -}) -export class AdminComponent { -} diff --git a/docs_app/content/examples/router/src/app/admin/admin.module.ts b/docs_app/content/examples/router/src/app/admin/admin.module.ts deleted file mode 100644 index 2736f00e1d..0000000000 --- a/docs_app/content/examples/router/src/app/admin/admin.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { AdminComponent } from './admin.component'; -import { AdminDashboardComponent } from './admin-dashboard.component'; -import { ManageCrisesComponent } from './manage-crises.component'; -import { ManageHeroesComponent } from './manage-heroes.component'; - -import { AdminRoutingModule } from './admin-routing.module'; - -@NgModule({ - imports: [ - CommonModule, - AdminRoutingModule - ], - declarations: [ - AdminComponent, - AdminDashboardComponent, - ManageCrisesComponent, - ManageHeroesComponent - ] -}) -export class AdminModule {} diff --git a/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts b/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts deleted file mode 100644 index d3176563eb..0000000000 --- a/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    Manage your crises here

    - ` -}) -export class ManageCrisesComponent { } diff --git a/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts b/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts deleted file mode 100644 index 7f3a39893d..0000000000 --- a/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    Manage your heroes here

    - ` -}) -export class ManageHeroesComponent { } diff --git a/docs_app/content/examples/router/src/app/animations.ts b/docs_app/content/examples/router/src/app/animations.ts deleted file mode 100644 index 39a0b1840a..0000000000 --- a/docs_app/content/examples/router/src/app/animations.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { animate, state, style, transition, trigger } from '@angular/animations'; - -// Component transition animations -export const slideInDownAnimation = - trigger('routeAnimation', [ - state('*', - style({ - opacity: 1, - transform: 'translateX(0)' - }) - ), - transition(':enter', [ - style({ - opacity: 0, - transform: 'translateX(-100%)' - }), - animate('0.2s ease-in') - ]), - transition(':leave', [ - animate('0.5s ease-out', style({ - opacity: 0, - transform: 'translateY(100%)' - })) - ]) - ]); diff --git a/docs_app/content/examples/router/src/app/app-routing.module.1.ts b/docs_app/content/examples/router/src/app/app-routing.module.1.ts deleted file mode 100644 index 436291f499..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.1.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; -import { PageNotFoundComponent } from './not-found.component'; - -// #docregion appRoutes -const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; -// #enddocregion appRoutes - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - exports: [ - RouterModule - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.2.ts b/docs_app/content/examples/router/src/app/app-routing.module.2.ts deleted file mode 100644 index c4df89d7f8..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.2.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisListComponent } from './crisis-list.component'; -// import { HeroListComponent } from './hero-list.component'; // <-- delete this line -import { PageNotFoundComponent } from './not-found.component'; - -const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - // { path: 'heroes', component: HeroListComponent }, // <-- delete this line - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - exports: [ - RouterModule - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.3.ts b/docs_app/content/examples/router/src/app/app-routing.module.3.ts deleted file mode 100644 index 354ca6e740..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.3.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion , v3 -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; - -const appRoutes: Routes = [ -// #enddocregion v3 -// #docregion compose - { - path: 'compose', - component: ComposeMessageComponent, - outlet: 'popup' - }, -// #enddocregion compose -// #docregion v3 - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - exports: [ - RouterModule - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.4.ts b/docs_app/content/examples/router/src/app/app-routing.module.4.ts deleted file mode 100644 index 9c0d7bb928..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.4.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { ComposeMessageComponent } from './compose-message.component'; -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { PageNotFoundComponent } from './not-found.component'; - -const appRoutes: Routes = [ - { - path: 'compose', - component: ComposeMessageComponent, - outlet: 'popup' - }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - exports: [ - RouterModule - ], - providers: [ - CanDeactivateGuard - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.5.ts b/docs_app/content/examples/router/src/app/app-routing.module.5.ts deleted file mode 100644 index a12bd2cc7e..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.5.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -// #docregion import-router -import { RouterModule, Routes } from '@angular/router'; -// #enddocregion import-router - -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; - - -const appRoutes: Routes = [ - { - path: 'compose', - component: ComposeMessageComponent, - outlet: 'popup' - }, -// #docregion admin, admin-1 - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', -// #enddocregion admin-1 - canLoad: [AuthGuard] -// #docregion admin-1 - }, -// #enddocregion admin, admin-1 - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - exports: [ - RouterModule - ], - providers: [ - CanDeactivateGuard - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.6.ts b/docs_app/content/examples/router/src/app/app-routing.module.6.ts deleted file mode 100644 index 83a6ab3521..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.6.ts +++ /dev/null @@ -1,57 +0,0 @@ -// #docplaster -// #docregion, preload-v1 -import { NgModule } from '@angular/core'; -import { - RouterModule, Routes, -// #enddocregion preload-v1 - PreloadAllModules -// #docregion preload-v1 -} from '@angular/router'; - -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; - -const appRoutes: Routes = [ - { - path: 'compose', - component: ComposeMessageComponent, - outlet: 'popup' - }, - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', - canLoad: [AuthGuard] - }, - { - path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule' - }, - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - // #docregion forRoot - RouterModule.forRoot( - appRoutes, - // #enddocregion preload-v1 - { - enableTracing: true, // <-- debugging purposes only - preloadingStrategy: PreloadAllModules - } - // #docregion preload-v1 - ) - // #enddocregion forRoot - ], - exports: [ - RouterModule - ], - providers: [ - CanDeactivateGuard - ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/app-routing.module.ts b/docs_app/content/examples/router/src/app/app-routing.module.ts deleted file mode 100644 index be5dd1d5c9..0000000000 --- a/docs_app/content/examples/router/src/app/app-routing.module.ts +++ /dev/null @@ -1,54 +0,0 @@ -// #docplaster -// #docregion, preload-v1 -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { CanDeactivateGuard } from './can-deactivate-guard.service'; -import { AuthGuard } from './auth-guard.service'; -import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; - -const appRoutes: Routes = [ - { - path: 'compose', - component: ComposeMessageComponent, - outlet: 'popup' - }, - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', - canLoad: [AuthGuard] - }, - // #docregion preload-v2 - { - path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule', - data: { preload: true } - }, - // #enddocregion preload-v2 - { path: '', redirectTo: '/superheroes', pathMatch: 'full' }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { - enableTracing: true, // <-- debugging purposes only - preloadingStrategy: SelectivePreloadingStrategy, - - } - ) - ], - exports: [ - RouterModule - ], - providers: [ - CanDeactivateGuard, - SelectivePreloadingStrategy - ] -}) -export class AppRoutingModule { } diff --git a/docs_app/content/examples/router/src/app/app.component.1.ts b/docs_app/content/examples/router/src/app/app.component.1.ts deleted file mode 100644 index c6fe6d2a77..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.1.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* First version */ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    Angular Router

    - - - ` - // #enddocregion template -}) -export class AppComponent { } diff --git a/docs_app/content/examples/router/src/app/app.component.2.ts b/docs_app/content/examples/router/src/app/app.component.2.ts deleted file mode 100644 index e705183911..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.2.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* Second Heroes version */ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` -

    Angular Router

    - - - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/router/src/app/app.component.3.ts b/docs_app/content/examples/router/src/app/app.component.3.ts deleted file mode 100644 index a8d8e0de0c..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.3.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable:no-unused-variable */ -// #docplaster -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-root', - /* Typical link - // #docregion h-anchor - Heroes - // #enddocregion h-anchor - */ - /* Incomplete Crisis Center link when CC lacks a default - // #docregion cc-anchor-fail - // The link now fails with a "non-terminal link" error - // #docregion cc-anchor-w-default - Crisis Center - // #enddocregion cc-anchor-w-default - // #enddocregion cc-anchor-fail - */ - /* Crisis Center link when CC lacks a default - // #docregion cc-anchor-no-default - Crisis Center - // #enddocregion cc-anchor-no-default - */ - /* Crisis Center Detail link - // #docregion Dragon-anchor - Dragon Crisis - // #enddocregion Dragon-anchor - */ - /* Crisis Center link with optional query params - // #docregion cc-query-params - Crisis Center - // #enddocregion cc-query-params - */ -// #docregion template - template: ` -

    Angular Router

    - - - ` -// #enddocregion template -}) -export class AppComponent { } diff --git a/docs_app/content/examples/router/src/app/app.component.4.ts b/docs_app/content/examples/router/src/app/app.component.4.ts deleted file mode 100644 index a51b792a78..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.4.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    Angular Router

    - - // #docregion outlets - - - // #enddocregion outlets - ` - // #enddocregion template -}) -export class AppComponent { } diff --git a/docs_app/content/examples/router/src/app/app.component.5.ts b/docs_app/content/examples/router/src/app/app.component.5.ts deleted file mode 100644 index dc7ebcf58b..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.5.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    Angular Router

    - - - - ` - // #enddocregion template -}) -export class AppComponent { } diff --git a/docs_app/content/examples/router/src/app/app.component.6.ts b/docs_app/content/examples/router/src/app/app.component.6.ts deleted file mode 100644 index d67ddfb728..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.6.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    Angular Router

    - - - - ` - // #enddocregion template -}) -export class AppComponent { -} diff --git a/docs_app/content/examples/router/src/app/app.component.ts b/docs_app/content/examples/router/src/app/app.component.ts deleted file mode 100644 index 70cdf8cba0..0000000000 --- a/docs_app/content/examples/router/src/app/app.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - // #docregion template - template: ` -

    Angular Router

    - - - - ` - // #enddocregion template -}) -export class AppComponent { -} diff --git a/docs_app/content/examples/router/src/app/app.module.0.ts b/docs_app/content/examples/router/src/app/app.module.0.ts deleted file mode 100644 index 5d14073b1b..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.0.ts +++ /dev/null @@ -1,44 +0,0 @@ -// NEVER USED. For docs only. Should compile though -// #docplaster -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { HeroListComponent } from './hero-list.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { PageNotFoundComponent } from './not-found.component'; -import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component'; - -// #docregion -const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'hero/:id', component: HeroDetailComponent }, - { - path: 'heroes', - component: HeroListComponent, - data: { title: 'Heroes List' } - }, - { path: '', - redirectTo: '/heroes', - pathMatch: 'full' - }, - { path: '**', component: PageNotFoundComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - // other imports here - ], -// #enddocregion -/* -// #docregion - ... -}) -export class AppModule { } -// #enddocregion -*/ -}) -export class AppModule0 { } diff --git a/docs_app/content/examples/router/src/app/app.module.1.ts b/docs_app/content/examples/router/src/app/app.module.1.ts deleted file mode 100644 index e83e299a16..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.1.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -// #docregion first-config -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -// #docregion import-router -import { RouterModule, Routes } from '@angular/router'; -// #enddocregion import-router - -import { AppComponent } from './app.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; -// #enddocregion first-config -import { PageNotFoundComponent } from './not-found.component'; -// #docregion first-config - -// #docregion appRoutes -const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent }, -// #enddocregion first-config - - { path: '', redirectTo: '/heroes', pathMatch: 'full' }, -// #docregion wildcard - { path: '**', component: PageNotFoundComponent } -// #enddocregion wildcard -// #docregion first-config -]; -// #enddocregion appRoutes - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - RouterModule.forRoot( - appRoutes, - { enableTracing: true } // <-- debugging purposes only - ) - ], - declarations: [ - AppComponent, - HeroListComponent, - CrisisListComponent, -// #enddocregion first-config - PageNotFoundComponent -// #docregion first-config - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/app.module.2.ts b/docs_app/content/examples/router/src/app/app.module.2.ts deleted file mode 100644 index 2ba739168c..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.2.ts +++ /dev/null @@ -1,31 +0,0 @@ -// #docplaster -// #docregion -// #docregion hero-import -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; - -import { CrisisListComponent } from './crisis-list.component'; -import { HeroListComponent } from './hero-list.component'; -import { PageNotFoundComponent } from './not-found.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - HeroListComponent, - CrisisListComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] -}) -// #enddocregion hero-import -export class AppModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/app.module.3.ts b/docs_app/content/examples/router/src/app/app.module.3.ts deleted file mode 100644 index 862faf1c51..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.3.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; - -import { CrisisListComponent } from './crisis-list.component'; -import { PageNotFoundComponent } from './not-found.component'; - -@NgModule({ -// #docregion module-imports - imports: [ - BrowserModule, - FormsModule, - HeroesModule, - AppRoutingModule - ], -// #enddocregion module-imports - declarations: [ - AppComponent, - CrisisListComponent, - PageNotFoundComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/router/src/app/app.module.4.ts b/docs_app/content/examples/router/src/app/app.module.4.ts deleted file mode 100644 index 4825572361..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.4.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docplaster -// #docregion -// #docregion crisis-center-module, admin-module -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { AppRoutingModule } from './app-routing.module'; -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; -// #enddocregion crisis-center-module, admin-module -import { ComposeMessageComponent } from './compose-message.component'; -// #docregion admin-module -import { AdminModule } from './admin/admin.module'; -// #docregion crisis-center-module - -import { DialogService } from './dialog.service'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - HeroesModule, - CrisisCenterModule, -// #enddocregion crisis-center-module - AdminModule, -// #docregion crisis-center-module - AppRoutingModule - ], - declarations: [ - AppComponent, -// #enddocregion admin-module, crisis-center-module - ComposeMessageComponent, -// #docregion admin-module, crisis-center-module - PageNotFoundComponent - ], - providers: [ - DialogService - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/app.module.5.ts b/docs_app/content/examples/router/src/app/app.module.5.ts deleted file mode 100644 index ad34668cea..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.5.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; - -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; - -import { ComposeMessageComponent } from './compose-message.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { AdminModule } from './admin/admin.module'; -import { DialogService } from './dialog.service'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - HeroesModule, - CrisisCenterModule, - AdminModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - ComposeMessageComponent, - PageNotFoundComponent - ], - providers: [ - DialogService - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/router/src/app/app.module.6.ts b/docs_app/content/examples/router/src/app/app.module.6.ts deleted file mode 100644 index 4cb0b1fdd5..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.6.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { Routes, RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { PageNotFoundComponent } from './not-found.component'; - -const routes: Routes = [ - -]; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/ - ], - declarations: [ - AppComponent, - PageNotFoundComponent - ], - providers: [ - - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/router/src/app/app.module.7.ts b/docs_app/content/examples/router/src/app/app.module.7.ts deleted file mode 100644 index b6ca81ddea..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.7.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; - -import { HeroesModule } from './heroes/heroes.module'; -import { CrisisCenterModule } from './crisis-center/crisis-center.module'; -import { ComposeMessageComponent } from './compose-message.component'; -import { LoginRoutingModule } from './login-routing.module'; -import { LoginComponent } from './login.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { DialogService } from './dialog.service'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - HeroesModule, - CrisisCenterModule, - LoginRoutingModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - ComposeMessageComponent, - LoginComponent, - PageNotFoundComponent - ], - providers: [ - DialogService - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/router/src/app/app.module.ts b/docs_app/content/examples/router/src/app/app.module.ts deleted file mode 100644 index dcf3401ded..0000000000 --- a/docs_app/content/examples/router/src/app/app.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -// #docregion animations-module -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -// #enddocregion animations-module -// #docregion inspect-config -import { Router } from '@angular/router'; - -// #enddocregion inspect-config -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; - -import { HeroesModule } from './heroes/heroes.module'; -import { ComposeMessageComponent } from './compose-message.component'; -import { LoginRoutingModule } from './login-routing.module'; -import { LoginComponent } from './login.component'; -import { PageNotFoundComponent } from './not-found.component'; - -import { DialogService } from './dialog.service'; - -// #docregion animations-module -@NgModule({ - imports: [ - // #enddocregion animations-module - BrowserModule, - FormsModule, - HeroesModule, - LoginRoutingModule, - AppRoutingModule, - // #docregion animations-module - BrowserAnimationsModule - // #enddocregion animations-module - ], - declarations: [ - AppComponent, - ComposeMessageComponent, - LoginComponent, - PageNotFoundComponent - ], - providers: [ - DialogService - ], - bootstrap: [ AppComponent ] -}) -// #docregion inspect-config -export class AppModule { - // Diagnostic only: inspect router configuration - constructor(router: Router) { - console.log('Routes: ', JSON.stringify(router.config, undefined, 2)); - } -} -// #enddocregion inspect-config diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.1.ts b/docs_app/content/examples/router/src/app/auth-guard.service.1.ts deleted file mode 100644 index c824bcb208..0000000000 --- a/docs_app/content/examples/router/src/app/auth-guard.service.1.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { CanActivate } from '@angular/router'; - -@Injectable() -export class AuthGuard implements CanActivate { - canActivate() { - console.log('AuthGuard#canActivate called'); - return true; - } -} diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.2.ts b/docs_app/content/examples/router/src/app/auth-guard.service.2.ts deleted file mode 100644 index 8fd00e151a..0000000000 --- a/docs_app/content/examples/router/src/app/auth-guard.service.2.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { - CanActivate, Router, - ActivatedRouteSnapshot, - RouterStateSnapshot -} from '@angular/router'; -import { AuthService } from './auth.service'; - -@Injectable() -export class AuthGuard implements CanActivate { - constructor(private authService: AuthService, private router: Router) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - let url: string = state.url; - - return this.checkLogin(url); - } - - checkLogin(url: string): boolean { - if (this.authService.isLoggedIn) { return true; } - - // Store the attempted URL for redirecting - this.authService.redirectUrl = url; - - // Navigate to the login page with extras - this.router.navigate(['/login']); - return false; - } -} -// #enddocregion - -/* -// #docregion can-load-interface -export class AuthGuard implements CanActivate, CanLoad { -// #enddocregion can-load-interface -*/ diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.3.ts b/docs_app/content/examples/router/src/app/auth-guard.service.3.ts deleted file mode 100644 index dd89006411..0000000000 --- a/docs_app/content/examples/router/src/app/auth-guard.service.3.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docregion -// #docregion can-activate-child -import { Injectable } from '@angular/core'; -import { - CanActivate, Router, - ActivatedRouteSnapshot, - RouterStateSnapshot, - CanActivateChild -} from '@angular/router'; -import { AuthService } from './auth.service'; - -@Injectable() -export class AuthGuard implements CanActivate, CanActivateChild { - constructor(private authService: AuthService, private router: Router) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - let url: string = state.url; - - return this.checkLogin(url); - } - - canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - return this.canActivate(route, state); - } - -// #enddocregion can-activate-child - checkLogin(url: string): boolean { - if (this.authService.isLoggedIn) { return true; } - - // Store the attempted URL for redirecting - this.authService.redirectUrl = url; - - // Navigate to the login page - this.router.navigate(['/login']); - return false; - } -// #docregion can-activate-child -} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.4.ts b/docs_app/content/examples/router/src/app/auth-guard.service.4.ts deleted file mode 100644 index 5d239a8432..0000000000 --- a/docs_app/content/examples/router/src/app/auth-guard.service.4.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; -import { - CanActivate, Router, - ActivatedRouteSnapshot, - RouterStateSnapshot, - CanActivateChild, - NavigationExtras -} from '@angular/router'; -import { AuthService } from './auth.service'; - -@Injectable() -export class AuthGuard implements CanActivate, CanActivateChild { - constructor(private authService: AuthService, private router: Router) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - let url: string = state.url; - - return this.checkLogin(url); - } - - canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - return this.canActivate(route, state); - } - - checkLogin(url: string): boolean { - if (this.authService.isLoggedIn) { return true; } - - // Store the attempted URL for redirecting - this.authService.redirectUrl = url; - - // Create a dummy session id - let sessionId = 123456789; - - // Set our navigation extras object - // that contains our global query params and fragment - let navigationExtras: NavigationExtras = { - queryParams: { 'session_id': sessionId }, - fragment: 'anchor' - }; - - // Navigate to the login page with extras - this.router.navigate(['/login'], navigationExtras); - return false; - } -} diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.ts b/docs_app/content/examples/router/src/app/auth-guard.service.ts deleted file mode 100644 index a32b5cc2b8..0000000000 --- a/docs_app/content/examples/router/src/app/auth-guard.service.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster -import { Injectable } from '@angular/core'; -import { - CanActivate, Router, - ActivatedRouteSnapshot, - RouterStateSnapshot, - CanActivateChild, - NavigationExtras, - CanLoad, Route -} from '@angular/router'; -import { AuthService } from './auth.service'; - -@Injectable() -export class AuthGuard implements CanActivate, CanActivateChild, CanLoad { - constructor(private authService: AuthService, private router: Router) {} - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - let url: string = state.url; - - return this.checkLogin(url); - } - - canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { - return this.canActivate(route, state); - } - -// #docregion, canLoad - canLoad(route: Route): boolean { - let url = `/${route.path}`; - - return this.checkLogin(url); - } -// #enddocregion canLoad - - checkLogin(url: string): boolean { - if (this.authService.isLoggedIn) { return true; } - - // Store the attempted URL for redirecting - this.authService.redirectUrl = url; - - // Create a dummy session id - let sessionId = 123456789; - - // Set our navigation extras object - // that contains our global query params and fragment - let navigationExtras: NavigationExtras = { - queryParams: { 'session_id': sessionId }, - fragment: 'anchor' - }; - - // Navigate to the login page with extras - this.router.navigate(['/login'], navigationExtras); - return false; - } -// #docregion admin-can-load -} diff --git a/docs_app/content/examples/router/src/app/auth.service.ts b/docs_app/content/examples/router/src/app/auth.service.ts deleted file mode 100644 index 9978541065..0000000000 --- a/docs_app/content/examples/router/src/app/auth.service.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { tap, delay } from 'rxjs/operators'; - -@Injectable() -export class AuthService { - isLoggedIn = false; - - // store the URL so we can redirect after logging in - redirectUrl: string; - - login(): Observable { - return of(true).pipe( - delay(1000), - tap(val => this.isLoggedIn = true) - ); - } - - logout(): void { - this.isLoggedIn = false; - } -} diff --git a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts b/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts deleted file mode 100644 index 35af6226fb..0000000000 --- a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; -import { CanDeactivate, - ActivatedRouteSnapshot, - RouterStateSnapshot } from '@angular/router'; - -import { CrisisDetailComponent } from './crisis-center/crisis-detail.component'; - -@Injectable() -export class CanDeactivateGuard implements CanDeactivate { - - canDeactivate( - component: CrisisDetailComponent, - route: ActivatedRouteSnapshot, - state: RouterStateSnapshot - ): Observable | boolean { - // Get the Crisis Center ID - console.log(route.paramMap.get('id')); - - // Get the current URL - console.log(state.url); - - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged - if (!component.crisis || component.crisis.name === component.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // observable which resolves to true or false when the user decides - return component.dialogService.confirm('Discard changes?'); - } -} diff --git a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts b/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts deleted file mode 100644 index e001d95ed9..0000000000 --- a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { CanDeactivate } from '@angular/router'; -import { Observable } from 'rxjs'; - -export interface CanComponentDeactivate { - canDeactivate: () => Observable | Promise | boolean; -} - -@Injectable() -export class CanDeactivateGuard implements CanDeactivate { - canDeactivate(component: CanComponentDeactivate) { - return component.canDeactivate ? component.canDeactivate() : true; - } -} diff --git a/docs_app/content/examples/router/src/app/compose-message.component.html b/docs_app/content/examples/router/src/app/compose-message.component.html deleted file mode 100644 index f0b964e6ac..0000000000 --- a/docs_app/content/examples/router/src/app/compose-message.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -

    Contact Crisis Center

    -
    - {{ details }} -
    -
    -
    - -
    -
    - -
    -
    -

    - - -

    diff --git a/docs_app/content/examples/router/src/app/compose-message.component.ts b/docs_app/content/examples/router/src/app/compose-message.component.ts deleted file mode 100644 index 6e83e3502b..0000000000 --- a/docs_app/content/examples/router/src/app/compose-message.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docregion -import { Component, HostBinding } from '@angular/core'; -import { Router } from '@angular/router'; - -import { slideInDownAnimation } from './animations'; - -@Component({ - templateUrl: './compose-message.component.html', - styles: [ ':host { position: relative; bottom: 10%; }' ], - animations: [ slideInDownAnimation ] -}) -export class ComposeMessageComponent { - @HostBinding('@routeAnimation') routeAnimation = true; - @HostBinding('style.display') display = 'block'; - @HostBinding('style.position') position = 'absolute'; - - details: string; - sending = false; - - constructor(private router: Router) {} - - send() { - this.sending = true; - this.details = 'Sending Message...'; - - setTimeout(() => { - this.sending = false; - this.closePopup(); - }, 1000); - } - - cancel() { - this.closePopup(); - } - - // #docregion closePopup - closePopup() { - // Providing a `null` value to the named outlet - // clears the contents of the named outlet - this.router.navigate([{ outlets: { popup: null }}]); - } - // #enddocregion closePopup -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts deleted file mode 100644 index 0edc35bc6e..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    Welcome to the Crisis Center

    - ` -}) -export class CrisisCenterHomeComponent { } diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts deleted file mode 100644 index 8ef60e68a1..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -// #docregion routes -const crisisCenterRoutes: Routes = [ - { - path: 'crisis-center', - component: CrisisCenterComponent, - children: [ - { - path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } -]; -// #enddocregion routes - -@NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] -}) -export class CrisisCenterRoutingModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts deleted file mode 100644 index 9e9b514968..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts +++ /dev/null @@ -1,72 +0,0 @@ -// #docplaster -// #docregion routes -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; -// #enddocregion routes - -// #docregion can-deactivate-guard -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; -// #enddocregion can-deactivate-guard -// #docregion crisis-detail-resolver -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; - -// #enddocregion crisis-detail-resolver -// #docregion routes - -const crisisCenterRoutes: Routes = [ -// #enddocregion routes - // #docregion redirect, routes - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect, routes - // #docregion routes - { - path: 'crisis-center', - component: CrisisCenterComponent, - children: [ - { - path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - // #enddocregion routes - // #docregion can-deactivate-guard - canDeactivate: [CanDeactivateGuard], - // #enddocregion can-deactivate-guard - // #docregion crisis-detail-resolver - resolve: { - crisis: CrisisDetailResolver - } - // #enddocregion crisis-detail-resolver - // #docregion routes - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } - // #enddocregion routes -]; - -@NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] -}) -export class CrisisCenterRoutingModule { } diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts deleted file mode 100644 index 6d605dbe84..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -// #docregion can-deactivate-guard -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; - -const crisisCenterRoutes: Routes = [ - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - { - path: 'crisis-center', - component: CrisisCenterComponent, - children: [ - { - path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard] - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ] -}) -export class CrisisCenterRoutingModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts deleted file mode 100644 index b7ac88e852..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts +++ /dev/null @@ -1,65 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; - -// #docregion crisis-detail-resolver -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; - -// #enddocregion crisis-detail-resolver -const crisisCenterRoutes: Routes = [ - // #docregion redirect - { - path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect - { - path: 'crisis-center', - component: CrisisCenterComponent, - children: [ - { - path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard], - resolve: { - crisis: CrisisDetailResolver - } - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } -]; - -// #docregion crisis-detail-resolver -@NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ], - providers: [ - CrisisDetailResolver - ] -}) -export class CrisisCenterRoutingModule { } -// #enddocregion crisis-detail-resolver -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts deleted file mode 100644 index c01d592455..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts +++ /dev/null @@ -1,53 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -import { CanDeactivateGuard } from '../can-deactivate-guard.service'; -import { CrisisDetailResolver } from './crisis-detail-resolver.service'; - -const crisisCenterRoutes: Routes = [ - { - path: '', - component: CrisisCenterComponent, - children: [ - { - path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard], - resolve: { - crisis: CrisisDetailResolver - } - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] - } - ] - } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(crisisCenterRoutes) - ], - exports: [ - RouterModule - ], - providers: [ - CrisisDetailResolver - ] -}) -export class CrisisCenterRoutingModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts deleted file mode 100644 index c7d7fe412d..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    CRISIS CENTER

    - - ` -}) -export class CrisisCenterComponent { } diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts deleted file mode 100644 index 5a3e45f58f..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts +++ /dev/null @@ -1,36 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; - -import { CrisisService } from './crisis.service'; - -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -import { CrisisCenterRoutingModule } from './crisis-center-routing.module'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - CrisisCenterRoutingModule - ], - declarations: [ - CrisisCenterComponent, - CrisisListComponent, - CrisisCenterHomeComponent, - CrisisDetailComponent - ], - - // #docregion providers - providers: [ - CrisisService - ] - // #enddocregion providers -}) -export class CrisisCenterModule {} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts deleted file mode 100644 index 4061ceac60..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; - -import { CrisisService } from './crisis.service'; - -import { CrisisCenterComponent } from './crisis-center.component'; -import { CrisisListComponent } from './crisis-list.component'; -import { CrisisCenterHomeComponent } from './crisis-center-home.component'; -import { CrisisDetailComponent } from './crisis-detail.component'; - -import { CrisisCenterRoutingModule } from './crisis-center-routing.module'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - CrisisCenterRoutingModule - ], - declarations: [ - CrisisCenterComponent, - CrisisListComponent, - CrisisCenterHomeComponent, - CrisisDetailComponent - ], - providers: [ - CrisisService - ] -}) -// #docregion crisis-center-module-export -export class CrisisCenterModule {} -// #enddocregion crisis-center-module-export -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts deleted file mode 100644 index a861c3bb97..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Router, Resolve, RouterStateSnapshot, - ActivatedRouteSnapshot } from '@angular/router'; -import { Observable } from 'rxjs'; -import { map, take } from 'rxjs/operators'; - -import { Crisis, CrisisService } from './crisis.service'; - -@Injectable() -export class CrisisDetailResolver implements Resolve { - constructor(private cs: CrisisService, private router: Router) {} - - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable { - let id = route.paramMap.get('id'); - - return this.cs.getCrisis(id).pipe( - take(1), - map(crisis => { - if (crisis) { - return crisis; - } else { // id not found - this.router.navigate(['/crisis-center']); - return null; - } - }) - ); - } -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts deleted file mode 100644 index 45e8d9c95b..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts +++ /dev/null @@ -1,90 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit, HostBinding } from '@angular/core'; -import { ActivatedRoute, Router, ParamMap } from '@angular/router'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; - -import { slideInDownAnimation } from '../animations'; -import { Crisis, CrisisService } from './crisis.service'; -import { DialogService } from '../dialog.service'; - -@Component({ - template: ` -
    -

    "{{ editName }}"

    -
    - {{ crisis.id }}
    -
    - - -
    -

    - - -

    -
    - `, - styles: ['input {width: 20em}'], - animations: [ slideInDownAnimation ] -}) -export class CrisisDetailComponent implements OnInit { - @HostBinding('@routeAnimation') routeAnimation = true; - @HostBinding('style.display') display = 'block'; - @HostBinding('style.position') position = 'absolute'; - - crisis: Crisis; - editName: string; - - constructor( - private service: CrisisService, - private router: Router, - private route: ActivatedRoute, - public dialogService: DialogService - ) {} - - // #docregion ngOnInit - ngOnInit() { - this.route.paramMap - .pipe( - switchMap((params: ParamMap) => - this.service.getCrisis(params.get('id')))) - .subscribe((crisis: Crisis) => { - if (crisis) { - this.editName = crisis.name; - this.crisis = crisis; - } else { // id not found - this.gotoCrises(); - } - }); - } - // #enddocregion ngOnInit - - cancel() { - this.gotoCrises(); - } - - save() { - this.crisis.name = this.editName; - this.gotoCrises(); - } - - canDeactivate(): Observable | boolean { - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged - if (!this.crisis || this.crisis.name === this.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // observable which resolves to true or false when the user decides - return this.dialogService.confirm('Discard changes?'); - } - - gotoCrises() { - let crisisId = this.crisis ? this.crisis.id : null; - // Pass along the crisis id if available - // so that the CrisisListComponent can select that crisis. - // Add a totally useless `foo` parameter for kicks. - // Relative navigation back to the crises - this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route }); - } -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts deleted file mode 100644 index 2b5150686c..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts +++ /dev/null @@ -1,87 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit, HostBinding } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Observable } from 'rxjs'; - -import { slideInDownAnimation } from '../animations'; -import { Crisis } from './crisis.service'; -import { DialogService } from '../dialog.service'; - -@Component({ - template: ` -
    -

    "{{ editName }}"

    -
    - {{ crisis.id }}
    -
    - - -
    -

    - - -

    -
    - `, - styles: ['input {width: 20em}'], - animations: [ slideInDownAnimation ] -}) -export class CrisisDetailComponent implements OnInit { - @HostBinding('@routeAnimation') routeAnimation = true; - @HostBinding('style.display') display = 'block'; - @HostBinding('style.position') position = 'absolute'; - - crisis: Crisis; - editName: string; - - constructor( - private route: ActivatedRoute, - private router: Router, - public dialogService: DialogService - ) {} - -// #docregion ngOnInit - ngOnInit() { - this.route.data - .subscribe((data: { crisis: Crisis }) => { - this.editName = data.crisis.name; - this.crisis = data.crisis; - }); - } -// #enddocregion ngOnInit - - // #docregion cancel-save - cancel() { - this.gotoCrises(); - } - - save() { - this.crisis.name = this.editName; - this.gotoCrises(); - } - // #enddocregion cancel-save - - // #docregion canDeactivate - canDeactivate(): Observable | boolean { - // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged - if (!this.crisis || this.crisis.name === this.editName) { - return true; - } - // Otherwise ask the user with the dialog service and return its - // observable which resolves to true or false when the user decides - return this.dialogService.confirm('Discard changes?'); - } - // #enddocregion canDeactivate - - gotoCrises() { - let crisisId = this.crisis ? this.crisis.id : null; - // Pass along the crisis id if available - // so that the CrisisListComponent can select that crisis. - // Add a totally useless `foo` parameter for kicks. - // #docregion gotoCrises-navigate - // Relative navigation back to the crises - this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route }); - // #enddocregion gotoCrises-navigate - } -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts deleted file mode 100644 index 5bd95158bb..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts +++ /dev/null @@ -1,44 +0,0 @@ - -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, ParamMap } from '@angular/router'; - -import { Crisis, CrisisService } from './crisis.service'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; - -@Component({ - // #docregion relative-navigation-router-link - template: ` - - - - ` - // #enddocregion relative-navigation-router-link -}) -export class CrisisListComponent implements OnInit { - crises$: Observable; - selectedId: number; - - - constructor( - private service: CrisisService, - private route: ActivatedRoute - ) {} - - - ngOnInit() { - this.crises$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => { - this.selectedId = +params.get('id'); - return this.service.getCrises(); - }) - ); - } -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts deleted file mode 100644 index 3219f10212..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, ParamMap } from '@angular/router'; - -import { Crisis, CrisisService } from './crisis.service'; -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; - -@Component({ - template: ` - - - - ` -}) -export class CrisisListComponent implements OnInit { - crises$: Observable; - selectedId: number; - - // #docregion ctor - constructor( - private service: CrisisService, - private route: ActivatedRoute - ) {} - // #enddocregion ctor - - ngOnInit() { - this.crises$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => { - this.selectedId = +params.get('id'); - return this.service.getCrises(); - }) - ); - } -} diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts deleted file mode 100644 index 72b51316c7..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -// #docregion , mock-crises -import { BehaviorSubject } from 'rxjs'; -import { map } from 'rxjs/operators'; - -export class Crisis { - constructor(public id: number, public name: string) { } -} - -const CRISES = [ - new Crisis(1, 'Dragon Burning Cities'), - new Crisis(2, 'Sky Rains Great White Sharks'), - new Crisis(3, 'Giant Asteroid Heading For Earth'), - new Crisis(4, 'Procrastinators Meeting Delayed Again'), -]; -// #enddocregion mock-crises - -import { Injectable } from '@angular/core'; - -@Injectable() -export class CrisisService { - static nextCrisisId = 100; - private crises$: BehaviorSubject = new BehaviorSubject(CRISES); - - getCrises() { return this.crises$; } - - getCrisis(id: number | string) { - return this.getCrises().pipe( - map(crises => crises.find(crisis => crisis.id === +id)) - ); - } - - // #enddocregion - addCrisis(name: string) { - name = name.trim(); - if (name) { - let crisis = new Crisis(CrisisService.nextCrisisId++, name); - CRISES.push(crisis); - this.crises$.next(CRISES); - } - } - // #docregion -} diff --git a/docs_app/content/examples/router/src/app/crisis-list.component.ts b/docs_app/content/examples/router/src/app/crisis-list.component.ts deleted file mode 100644 index 6caa3653b5..0000000000 --- a/docs_app/content/examples/router/src/app/crisis-list.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// Initial empty version -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    CRISIS CENTER

    -

    Get your crisis here

    ` -}) -export class CrisisListComponent { } diff --git a/docs_app/content/examples/router/src/app/dialog.service.ts b/docs_app/content/examples/router/src/app/dialog.service.ts deleted file mode 100644 index d9f7f1e163..0000000000 --- a/docs_app/content/examples/router/src/app/dialog.service.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; - -/** - * Async modal dialog service - * DialogService makes this app easier to test by faking this service. - * TODO: better modal implementation that doesn't use window.confirm - */ -@Injectable() -export class DialogService { - /** - * Ask user to confirm an action. `message` explains the action and choices. - * Returns observable resolving to `true`=confirm or `false`=cancel - */ - confirm(message?: string): Observable { - const confirmation = window.confirm(message || 'Is it OK?'); - - return of(confirmation); - }; -} diff --git a/docs_app/content/examples/router/src/app/hero-list.component.ts b/docs_app/content/examples/router/src/app/hero-list.component.ts deleted file mode 100644 index 7a8f97ca1e..0000000000 --- a/docs_app/content/examples/router/src/app/hero-list.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -/// Initial empty version -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: ` -

    HEROES

    -

    Get your heroes here

    - - - ` -}) -export class HeroListComponent { } diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts deleted file mode 100644 index 511b12d8a7..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster -// #docregion -// #docregion rxjs-operator-import -import { switchMap } from 'rxjs/operators'; -// #enddocregion rxjs-operator-import -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; -// #docregion imports -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; -// #enddocregion imports - -import { Hero, HeroService } from './hero.service'; - -@Component({ - template: ` -

    HEROES

    -
    -

    "{{ hero.name }}"

    -
    - {{ hero.id }}
    -
    - - -
    -

    - -

    -
    - ` -}) -export class HeroDetailComponent implements OnInit { - hero$: Observable; - - // #docregion ctor - constructor( - private route: ActivatedRoute, - private router: Router, - private service: HeroService - ) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit() { - this.hero$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => - this.service.getHero(params.get('id'))) - ); - } - // #enddocregion ngOnInit - - // #docregion gotoHeroes - gotoHeroes() { - this.router.navigate(['/heroes']); - } - // #enddocregion gotoHeroes -} diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts deleted file mode 100644 index 0affccda9a..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts +++ /dev/null @@ -1,46 +0,0 @@ -// Snapshot version -// #docregion -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Observable } from 'rxjs'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - template: ` -

    HEROES

    -
    -

    "{{ hero.name }}"

    -
    - {{ hero.id }}
    -
    - - -
    -

    - -

    -
    - ` -}) -export class HeroDetailComponent implements OnInit { - hero$: Observable; - - constructor( - private route: ActivatedRoute, - private router: Router, - private service: HeroService - ) {} - - // #docregion snapshot - ngOnInit() { - let id = this.route.snapshot.paramMap.get('id'); - - this.hero$ = this.service.getHero(id); - } - // #enddocregion snapshot - - gotoHeroes() { - this.router.navigate(['/heroes']); - } -} diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts deleted file mode 100644 index 2170686864..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts +++ /dev/null @@ -1,67 +0,0 @@ -// #docplaster -// #docregion -// #docregion rxjs-operator-import -import { switchMap } from 'rxjs/operators'; -// #enddocregion rxjs-operator-import -import { Component, OnInit, HostBinding } from '@angular/core'; -import { Router, ActivatedRoute, ParamMap } from '@angular/router'; -import { Observable } from 'rxjs'; - -import { slideInDownAnimation } from '../animations'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - template: ` -

    HEROES

    -
    -

    "{{ hero.name }}"

    -
    - {{ hero.id }}
    -
    - - -
    -

    - -

    -
    - `, - animations: [ slideInDownAnimation ] -}) -export class HeroDetailComponent implements OnInit { -// #docregion host-bindings - @HostBinding('@routeAnimation') routeAnimation = true; - @HostBinding('style.display') display = 'block'; - @HostBinding('style.position') position = 'absolute'; -// #enddocregion host-bindings - - hero$: Observable; - - // #docregion ctor - constructor( - private route: ActivatedRoute, - private router: Router, - private service: HeroService - ) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit() { - this.hero$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => - this.service.getHero(params.get('id'))) - ); - } - // #enddocregion ngOnInit - - // #docregion gotoHeroes - gotoHeroes(hero: Hero) { - let heroId = hero ? hero.id : null; - // Pass along the hero id if available - // so that the HeroList component can select that hero. - // Include a junk 'foo' property for fun. - this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]); - } - // #enddocregion gotoHeroes -} diff --git a/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts b/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts deleted file mode 100644 index 8744772f06..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docplaster -// #docregion -// TODO SOMEDAY: Feature Componetized like HeroCenter -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { Observable } from 'rxjs'; - -import { Hero, HeroService } from './hero.service'; - -@Component({ - // #docregion template - template: ` -

    HEROES

    - - - - ` - // #enddocregion template -}) -export class HeroListComponent implements OnInit { - heroes$: Observable; - - // #docregion ctor - constructor( - private router: Router, - private service: HeroService - ) {} - // #enddocregion ctor - - ngOnInit() { - this.heroes$ = this.service.getHeroes(); - } -} -// #enddocregion - -/* A link parameters array -// #docregion link-parameters-array -['/hero', hero.id] // { 15 } -// #enddocregion link-parameters-array -*/ diff --git a/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts b/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts deleted file mode 100644 index 803aa73436..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -// #docplaster -// #docregion -// TODO SOMEDAY: Feature Componetized like CrisisCenter -// #docregion rxjs-imports -import { Observable } from 'rxjs'; -import { switchMap } from 'rxjs/operators'; -// #enddocregion rxjs-imports -import { Component, OnInit } from '@angular/core'; -// #docregion import-router -import { ActivatedRoute, ParamMap } from '@angular/router'; -// #enddocregion import-router - -import { Hero, HeroService } from './hero.service'; - -@Component({ - // #docregion template - template: ` -

    HEROES

    - - - - ` - // #enddocregion template -}) -// #docregion ctor -export class HeroListComponent implements OnInit { - heroes$: Observable; - - private selectedId: number; - - constructor( - private service: HeroService, - private route: ActivatedRoute - ) {} - - ngOnInit() { - this.heroes$ = this.route.paramMap.pipe( - switchMap((params: ParamMap) => { - // (+) before `params.get()` turns the string into a number - this.selectedId = +params.get('id'); - return this.service.getHeroes(); - }) - ); - } - // #enddocregion ctor -// #docregion ctor -} -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/heroes/hero.service.ts b/docs_app/content/examples/router/src/app/heroes/hero.service.ts deleted file mode 100644 index 51518a4ae0..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/hero.service.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { of } from 'rxjs'; -import { map } from 'rxjs/operators'; - -export class Hero { - constructor(public id: number, public name: string) { } -} - -const HEROES = [ - new Hero(11, 'Mr. Nice'), - new Hero(12, 'Narco'), - new Hero(13, 'Bombasto'), - new Hero(14, 'Celeritas'), - new Hero(15, 'Magneta'), - new Hero(16, 'RubberMan') -]; - -@Injectable() -export class HeroService { - getHeroes() { return of(HEROES); } - - getHero(id: number | string) { - return this.getHeroes().pipe( - // (+) before `id` turns the string into a number - map(heroes => heroes.find(hero => hero.id === +id)) - ); - } -} diff --git a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts b/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts deleted file mode 100644 index dbee521793..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -const heroesRoutes: Routes = [ - { path: 'heroes', component: HeroListComponent }, -// #docregion hero-detail-route - { path: 'hero/:id', component: HeroDetailComponent } -// #enddocregion hero-detail-route -]; - -@NgModule({ - imports: [ - RouterModule.forChild(heroesRoutes) - ], - exports: [ - RouterModule - ] -}) -export class HeroRoutingModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts b/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts deleted file mode 100644 index 43558907b0..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -const heroesRoutes: Routes = [ - { path: 'heroes', redirectTo: '/superheroes' }, - { path: 'hero/:id', redirectTo: '/superhero/:id' }, - { path: 'superheroes', component: HeroListComponent }, - { path: 'superhero/:id', component: HeroDetailComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(heroesRoutes) - ], - exports: [ - RouterModule - ] -}) -export class HeroRoutingModule { } -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/heroes/heroes.module.ts b/docs_app/content/examples/router/src/app/heroes/heroes.module.ts deleted file mode 100644 index 95ee64a182..0000000000 --- a/docs_app/content/examples/router/src/app/heroes/heroes.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docplaster -// #docregion -// #docregion v1 -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -import { HeroService } from './hero.service'; - -// #enddocregion v1 -import { HeroRoutingModule } from './heroes-routing.module'; - -// #docregion v1 -@NgModule({ - imports: [ - CommonModule, - FormsModule, -// #enddocregion v1 - HeroRoutingModule -// #docregion v1 - ], - declarations: [ - HeroListComponent, - HeroDetailComponent - ], - providers: [ HeroService ] -}) -export class HeroesModule {} -// #enddocregion v1 -// #enddocregion diff --git a/docs_app/content/examples/router/src/app/login-routing.module.ts b/docs_app/content/examples/router/src/app/login-routing.module.ts deleted file mode 100644 index 96d05e7972..0000000000 --- a/docs_app/content/examples/router/src/app/login-routing.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { AuthGuard } from './auth-guard.service'; -import { AuthService } from './auth.service'; -import { LoginComponent } from './login.component'; - -const loginRoutes: Routes = [ - { path: 'login', component: LoginComponent } -]; - -@NgModule({ - imports: [ - RouterModule.forChild(loginRoutes) - ], - exports: [ - RouterModule - ], - providers: [ - AuthGuard, - AuthService - ] -}) -export class LoginRoutingModule {} diff --git a/docs_app/content/examples/router/src/app/login.component.1.ts b/docs_app/content/examples/router/src/app/login.component.1.ts deleted file mode 100644 index ddee339011..0000000000 --- a/docs_app/content/examples/router/src/app/login.component.1.ts +++ /dev/null @@ -1,46 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; -import { AuthService } from './auth.service'; - -@Component({ - template: ` -

    LOGIN

    -

    {{message}}

    -

    - - -

    ` -}) -export class LoginComponent { - message: string; - - constructor(public authService: AuthService, public router: Router) { - this.setMessage(); - } - - setMessage() { - this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out'); - } - - login() { - this.message = 'Trying to log in ...'; - - this.authService.login().subscribe(() => { - this.setMessage(); - if (this.authService.isLoggedIn) { - // Get the redirect URL from our auth service - // If no redirect has been set, use the default - let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin'; - - // Redirect the user - this.router.navigate([redirect]); - } - }); - } - - logout() { - this.authService.logout(); - this.setMessage(); - } -} diff --git a/docs_app/content/examples/router/src/app/login.component.ts b/docs_app/content/examples/router/src/app/login.component.ts deleted file mode 100644 index 1a6fae162f..0000000000 --- a/docs_app/content/examples/router/src/app/login.component.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Router, - NavigationExtras } from '@angular/router'; -import { AuthService } from './auth.service'; - -@Component({ - template: ` -

    LOGIN

    -

    {{message}}

    -

    - - -

    ` -}) -export class LoginComponent { - message: string; - - constructor(public authService: AuthService, public router: Router) { - this.setMessage(); - } - - setMessage() { - this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out'); - } - - login() { - this.message = 'Trying to log in ...'; - - this.authService.login().subscribe(() => { - this.setMessage(); - if (this.authService.isLoggedIn) { - // Get the redirect URL from our auth service - // If no redirect has been set, use the default - let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin'; - - // #docregion preserve - // Set our navigation extras object - // that passes on our global query params and fragment - let navigationExtras: NavigationExtras = { - queryParamsHandling: 'preserve', - preserveFragment: true - }; - - // Redirect the user - this.router.navigate([redirect], navigationExtras); - // #enddocregion preserve - } - }); - } - - logout() { - this.authService.logout(); - this.setMessage(); - } -} diff --git a/docs_app/content/examples/router/src/app/not-found.component.ts b/docs_app/content/examples/router/src/app/not-found.component.ts deleted file mode 100644 index 2e74544e17..0000000000 --- a/docs_app/content/examples/router/src/app/not-found.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - template: '

    Page not found

    ' -}) -export class PageNotFoundComponent {} diff --git a/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts b/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts deleted file mode 100644 index c2192ec12b..0000000000 --- a/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { PreloadingStrategy, Route } from '@angular/router'; -import { Observable, of } from 'rxjs'; - -@Injectable() -export class SelectivePreloadingStrategy implements PreloadingStrategy { - preloadedModules: string[] = []; - - preload(route: Route, load: () => Observable): Observable { - if (route.data && route.data['preload']) { - // add the route path to the preloaded module array - this.preloadedModules.push(route.path); - - // log the route path to the console - console.log('Preloaded: ' + route.path); - - return load(); - } else { - return of(null); - } - } -} diff --git a/docs_app/content/examples/router/src/assets/app.css b/docs_app/content/examples/router/src/assets/app.css deleted file mode 100644 index 8da7fa6567..0000000000 --- a/docs_app/content/examples/router/src/assets/app.css +++ /dev/null @@ -1,51 +0,0 @@ -/* items class */ -.items { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 24em; -} -.items li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.items li a { - display: block; - text-decoration: none; -} -.items li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.items li.selected { - background-color: #CFD8DC; - color: white; -} -.items li.selected:hover { - background-color: #BBD8DC; -} -.items .text { - position: relative; - top: -3px; -} -.items .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/router/src/index.html b/docs_app/content/examples/router/src/index.html deleted file mode 100644 index 0e5ca721fa..0000000000 --- a/docs_app/content/examples/router/src/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - Angular Router - - - - - - - - - - - diff --git a/docs_app/content/examples/router/src/main.ts b/docs_app/content/examples/router/src/main.ts deleted file mode 100644 index f332d1d245..0000000000 --- a/docs_app/content/examples/router/src/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/router/stackblitz.json b/docs_app/content/examples/router/stackblitz.json deleted file mode 100644 index c1f330ae39..0000000000 --- a/docs_app/content/examples/router/stackblitz.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "description": "Router", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0-9].*", - "!src/app/crisis-list.component.ts", - "!src/app/hero-list.component.ts" - ], - "tags": ["router"] -} diff --git a/docs_app/content/examples/rx-library/example-config.json b/docs_app/content/examples/rx-library/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/rx-library/src/error-handling.ts b/docs_app/content/examples/rx-library/src/error-handling.ts deleted file mode 100644 index c7b6c2dc9f..0000000000 --- a/docs_app/content/examples/rx-library/src/error-handling.ts +++ /dev/null @@ -1,25 +0,0 @@ - -import { of } from 'rxjs'; - -// #docregion - -import { ajax } from 'rxjs/ajax'; -import { map, catchError } from 'rxjs/operators'; -// Return "response" from the API. If an error happens, -// return an empty array. -const apiData = ajax('/api/data').pipe( - map(res => { - if (!res.response) { - throw new Error('Value expected!'); - } - return res.response; - }), - catchError(err => of([])) -); - -apiData.subscribe({ - next(x) { console.log('data: ', x); }, - error(err) { console.log('errors already caught... will not run'); } -}); - -// #enddocregion diff --git a/docs_app/content/examples/rx-library/src/main.ts b/docs_app/content/examples/rx-library/src/main.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/rx-library/src/naming-convention.ts b/docs_app/content/examples/rx-library/src/naming-convention.ts deleted file mode 100644 index 1e337b293a..0000000000 --- a/docs_app/content/examples/rx-library/src/naming-convention.ts +++ /dev/null @@ -1,20 +0,0 @@ - - -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; - -@Component({ - selector: 'app-stopwatch', - templateUrl: './stopwatch.component.html' -}) -export class StopwatchComponent { - - stopwatchValue: number; - stopwatchValue$: Observable; - - start() { - this.stopwatchValue$.subscribe(num => - this.stopwatchValue = num - ); - } -} diff --git a/docs_app/content/examples/rx-library/src/operators.1.ts b/docs_app/content/examples/rx-library/src/operators.1.ts deleted file mode 100644 index d9ea72920a..0000000000 --- a/docs_app/content/examples/rx-library/src/operators.1.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { of, pipe } from 'rxjs'; - -// #docregion - -import { filter, map } from 'rxjs/operators'; - -const nums = of(1, 2, 3, 4, 5); - -// Create a function that accepts an Observable. -const squareOddVals = pipe( - filter(n => n % 2), - map(n => n * n) -); - -// Create an Observable that will run the filter and map functions -const squareOdd = squareOddVals(nums); - -// Suscribe to run the combined functions -squareOdd.subscribe(x => console.log(x)); - -// #enddocregion - - diff --git a/docs_app/content/examples/rx-library/src/operators.2.ts b/docs_app/content/examples/rx-library/src/operators.2.ts deleted file mode 100644 index 9559ea8525..0000000000 --- a/docs_app/content/examples/rx-library/src/operators.2.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Observable, of } from 'rxjs'; - -// #docregion - -import { filter, map } from 'rxjs/operators'; - -const squareOdd = of(1, 2, 3, 4, 5) - .pipe( - filter(n => n % 2 !== 0), - map(n => n * n) - ); - -// Subscribe to get values -squareOdd.subscribe(x => console.log(x)); - -// #enddocregion diff --git a/docs_app/content/examples/rx-library/src/operators.ts b/docs_app/content/examples/rx-library/src/operators.ts deleted file mode 100644 index 461482a4bc..0000000000 --- a/docs_app/content/examples/rx-library/src/operators.ts +++ /dev/null @@ -1,20 +0,0 @@ - -import { Observable, of } from 'rxjs'; - -// #docregion - -import { map } from 'rxjs/operators'; - -const nums = of(1, 2, 3); - -const squareValues = map((val: number) => val * val); -const squaredNums = squareValues(nums); - -squaredNums.subscribe(x => console.log(x)); - -// Logs -// 1 -// 4 -// 9 - -// #enddocregion diff --git a/docs_app/content/examples/rx-library/src/retry-on-error.ts b/docs_app/content/examples/rx-library/src/retry-on-error.ts deleted file mode 100644 index b1a5389c1b..0000000000 --- a/docs_app/content/examples/rx-library/src/retry-on-error.ts +++ /dev/null @@ -1,26 +0,0 @@ - -import { Observable, of } from 'rxjs'; - - -// #docregion - -import { ajax } from 'rxjs/ajax'; -import { map, retry, catchError } from 'rxjs/operators'; - -const apiData = ajax('/api/data').pipe( - retry(3), // Retry up to 3 times before failing - map(res => { - if (!res.response) { - throw new Error('Value expected!'); - } - return res.response; - }), - catchError(err => of([])) -); - -apiData.subscribe({ - next(x) { console.log('data: ', x); }, - error(err) { console.log('errors already caught... will not run'); } -}); - -// #enddocregion diff --git a/docs_app/content/examples/rx-library/src/simple-creation.ts b/docs_app/content/examples/rx-library/src/simple-creation.ts deleted file mode 100644 index 810e398e85..0000000000 --- a/docs_app/content/examples/rx-library/src/simple-creation.ts +++ /dev/null @@ -1,65 +0,0 @@ - -// #docregion promise - -import { fromPromise } from 'rxjs'; - -// Create an Observable out of a promise -const data = fromPromise(fetch('/api/endpoint')); -// Subscribe to begin listening for async result -data.subscribe({ - next(response) { console.log(response); }, - error(err) { console.error('Error: ' + err); }, - complete() { console.log('Completed'); } -}); - -// #enddocregion promise - -// #docregion interval - -import { interval } from 'rxjs'; - -// Create an Observable that will publish a value on an interval -const secondsCounter = interval(1000); -// Subscribe to begin publishing values -secondsCounter.subscribe(n => - console.log(`It's been ${n} seconds since subscribing!`)); - -// #enddocregion interval - - -// #docregion event - -import { fromEvent } from 'rxjs'; - -const el = document.getElementById('my-element'); - -// Create an Observable that will publish mouse movements -const mouseMoves = fromEvent(el, 'mousemove'); - -// Subscribe to start listening for mouse-move events -const subscription = mouseMoves.subscribe((evt: MouseEvent) => { - // Log coords of mouse movements - console.log(`Coords: ${evt.clientX} X ${evt.clientY}`); - - // When the mouse is over the upper-left of the screen, - // unsubscribe to stop listening for mouse movements - if (evt.clientX < 40 && evt.clientY < 40) { - subscription.unsubscribe(); - } -}); - -// #enddocregion event - - -// #docregion ajax - -import { ajax } from 'rxjs/ajax'; - -// Create an Observable that will create an AJAX request -const apiData = ajax('/api/data'); -// Subscribe to create the request -apiData.subscribe(res => console.log(res.status, res.response)); - -// #enddocregion ajax - - diff --git a/docs_app/content/examples/security/e2e/app.e2e-spec.ts b/docs_app/content/examples/security/e2e/app.e2e-spec.ts deleted file mode 100644 index 8ebad58f21..0000000000 --- a/docs_app/content/examples/security/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,37 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, By } from 'protractor'; - -describe('Security E2E Tests', () => { - beforeAll(() => browser.get('')); - - it('sanitizes innerHTML', () => { - let interpolated = element(By.className('e2e-inner-html-interpolated')); - expect(interpolated.getText()) - .toContain('Template Syntax'); - let bound = element(By.className('e2e-inner-html-bound')); - expect(bound.getText()).toContain('Template alert("0wned") Syntax'); - let bold = element(By.css('.e2e-inner-html-bound b')); - expect(bold.getText()).toContain('Syntax'); - }); - - it('escapes untrusted URLs', () => { - let untrustedUrl = element(By.className('e2e-dangerous-url')); - expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/); - }); - - it('binds trusted URLs', () => { - let trustedUrl = element(By.className('e2e-trusted-url')); - expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/); - }); - - it('escapes untrusted resource URLs', () => { - let iframe = element(By.className('e2e-iframe-untrusted-src')); - expect(iframe.getAttribute('src')).toBe(''); - }); - - it('binds trusted resource URLs', () => { - let iframe = element(By.className('e2e-iframe-trusted-src')); - expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//); - }); -}); diff --git a/docs_app/content/examples/security/example-config.json b/docs_app/content/examples/security/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/security/src/app/app.component.ts b/docs_app/content/examples/security/src/app/app.component.ts deleted file mode 100644 index 5e6abfba9c..0000000000 --- a/docs_app/content/examples/security/src/app/app.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: ` -

    Security

    - - - ` -}) -export class AppComponent { -} diff --git a/docs_app/content/examples/security/src/app/app.module.ts b/docs_app/content/examples/security/src/app/app.module.ts deleted file mode 100644 index 21d880be3b..0000000000 --- a/docs_app/content/examples/security/src/app/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { BypassSecurityComponent } from './bypass-security.component'; -import { InnerHtmlBindingComponent } from './inner-html-binding.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - BypassSecurityComponent, - InnerHtmlBindingComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/security/src/app/bypass-security.component.html b/docs_app/content/examples/security/src/app/bypass-security.component.html deleted file mode 100644 index 96adf058e2..0000000000 --- a/docs_app/content/examples/security/src/app/bypass-security.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -

    Bypass Security Component

    - - -

    An untrusted URL:

    -

    Click me

    -

    A trusted URL:

    -

    Click me

    - - - -

    Resource URL:

    -

    Showing: {{dangerousVideoUrl}}

    -

    Trusted:

    - -

    Untrusted:

    - diff --git a/docs_app/content/examples/security/src/app/bypass-security.component.ts b/docs_app/content/examples/security/src/app/bypass-security.component.ts deleted file mode 100644 index 7858db96c1..0000000000 --- a/docs_app/content/examples/security/src/app/bypass-security.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; - -@Component({ - selector: 'app-bypass-security', - templateUrl: './bypass-security.component.html', -}) -export class BypassSecurityComponent { - dangerousUrl: string; - trustedUrl: SafeUrl; - dangerousVideoUrl: string; - videoUrl: SafeResourceUrl; - - // #docregion trust-url - constructor(private sanitizer: DomSanitizer) { - // javascript: URLs are dangerous if attacker controlled. - // Angular sanitizes them in data binding, but you can - // explicitly tell Angular to trust this value: - this.dangerousUrl = 'javascript:alert("Hi there")'; - this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl); - // #enddocregion trust-url - this.updateVideoUrl('PUBnlbjZFAI'); - } - - // #docregion trust-video-url - updateVideoUrl(id: string) { - // Appending an ID to a YouTube URL is safe. - // Always make sure to construct SafeValue objects as - // close as possible to the input data so - // that it's easier to check if the value is safe. - this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id; - this.videoUrl = - this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl); - } - // #enddocregion trust-video-url -} diff --git a/docs_app/content/examples/security/src/app/inner-html-binding.component.html b/docs_app/content/examples/security/src/app/inner-html-binding.component.html deleted file mode 100644 index fe540d25fe..0000000000 --- a/docs_app/content/examples/security/src/app/inner-html-binding.component.html +++ /dev/null @@ -1,6 +0,0 @@ - -

    Binding innerHTML

    -

    Bound value:

    -

    {{htmlSnippet}}

    -

    Result of binding to innerHTML:

    -

    diff --git a/docs_app/content/examples/security/src/app/inner-html-binding.component.ts b/docs_app/content/examples/security/src/app/inner-html-binding.component.ts deleted file mode 100644 index a4cfaeb04c..0000000000 --- a/docs_app/content/examples/security/src/app/inner-html-binding.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-inner-html-binding', - templateUrl: './inner-html-binding.component.html', -}) -// #docregion class -export class InnerHtmlBindingComponent { - // For example, a user/attacker-controlled value from a URL. - htmlSnippet = 'Template Syntax'; -} diff --git a/docs_app/content/examples/security/src/index.html b/docs_app/content/examples/security/src/index.html deleted file mode 100644 index 4cf1cd6428..0000000000 --- a/docs_app/content/examples/security/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Angular Content Security - - - - - - - - - diff --git a/docs_app/content/examples/security/src/main.ts b/docs_app/content/examples/security/src/main.ts deleted file mode 100644 index 0d277197ca..0000000000 --- a/docs_app/content/examples/security/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); - diff --git a/docs_app/content/examples/security/stackblitz.json b/docs_app/content/examples/security/stackblitz.json deleted file mode 100644 index e66527cb6b..0000000000 --- a/docs_app/content/examples/security/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "Content Security", - "files": [ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["security"] -} diff --git a/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts b/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts deleted file mode 100644 index 6d77937689..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; - - -describe('sw-example App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('Welcome to Service Workers!'); - }); - - it('should display the Angular logo', () => { - let logo = element(by.css('img')); - page.navigateTo(); - expect(logo.isPresent()).toBe(true); - }); - - it('should show a header for the list of links', () => { - const listHeader = element(by.css('app-root > h2')); - expect(listHeader.getText()).toEqual('Here are some links to help you start:'); - }); - - it('should show a list of links', function () { - element.all(by.css('ul > li > h2 > a')).then((items) => { - expect(items.length).toBe(4); - expect(items[0].getText()).toBe('Angular Service Worker Intro'); - expect(items[1].getText()).toBe('Tour of Heroes'); - expect(items[2].getText()).toBe('CLI Documentation'); - expect(items[3].getText()).toBe('Angular blog'); - }); - }); - // Check for a rejected promise as the service worker is not enabled - it('SwUpdate.checkForUpdate() should return a rejected promise', () => { - const button = element(by.css('button')); - const rejectMessage = element(by.css('p')); - button.click(); - expect(rejectMessage.getText()).toContain('rejected: '); - }); -}); diff --git a/docs_app/content/examples/service-worker-getting-started/example-config.json b/docs_app/content/examples/service-worker-getting-started/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html deleted file mode 100644 index 59cd86bcb5..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html +++ /dev/null @@ -1,27 +0,0 @@ - -
    -

    - Welcome to {{title}}! -

    - Angular Logo -
    - - -

    {{updateCheckText}}

    - -

    Here are some links to help you start:

    - - diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts deleted file mode 100644 index a136c59bfb..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { AppComponent } from './app.component'; -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('Service Workers'); - })); - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to Service Workers!'); - })); -}); diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts deleted file mode 100644 index 67cc894396..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { - title = 'Service Workers'; - updateCheckText = ''; - - constructor(private update: SwUpdate) {} - - updateCheck(): void { - this.update - .checkForUpdate() - .then(() => this.updateCheckText = 'resolved') - .catch(err => this.updateCheckText = `rejected: ${err.message}`); - } -} diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts deleted file mode 100644 index daaf81e652..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { AppComponent } from './app.component'; - -// #docregion sw-import -import { ServiceWorkerModule } from '@angular/service-worker'; -import { environment } from '../environments/environment'; -// #enddocregion sw-import - -import { CheckForUpdateService } from './check-for-update.service'; -import { LogUpdateService } from './log-update.service'; -import { PromptUpdateService } from './prompt-update.service'; - -// #docregion sw-module -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}) - ], - providers: [ - CheckForUpdateService, - LogUpdateService, - PromptUpdateService, - ], - bootstrap: [AppComponent] -}) -export class AppModule { } -// #enddocregion sw-module diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts deleted file mode 100644 index 194b555ace..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Injectable } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; - - -// #docregion sw-check-update -import { interval } from 'rxjs'; - -@Injectable() -export class CheckForUpdateService { - - constructor(updates: SwUpdate) { - interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()); - } -} -// #enddocregion sw-check-update diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts deleted file mode 100644 index e38961d4f5..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Injectable } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; - -// #docregion sw-update -@Injectable() -export class LogUpdateService { - - constructor(updates: SwUpdate) { - updates.available.subscribe(event => { - console.log('current version is', event.current); - console.log('available version is', event.available); - }); - updates.activated.subscribe(event => { - console.log('old version was', event.previous); - console.log('new version is', event.current); - }); - } -} -// #enddocregion sw-update diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts deleted file mode 100644 index 9e3e56012e..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Injectable } from '@angular/core'; -import { SwUpdate } from '@angular/service-worker'; - -function promptUser(event): boolean { - return true; -} - -// #docregion sw-activate -@Injectable() -export class PromptUpdateService { - - constructor(updates: SwUpdate) { - updates.available.subscribe(event => { - if (promptUser(event)) { - updates.activateUpdate().then(() => document.location.reload()); - } - }); - } -} -// #enddocregion sw-activate diff --git a/docs_app/content/examples/service-worker-getting-started/src/index.html b/docs_app/content/examples/service-worker-getting-started/src/index.html deleted file mode 100644 index c3066538b7..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - SwExample - - - - - - - diff --git a/docs_app/content/examples/service-worker-getting-started/src/main.ts b/docs_app/content/examples/service-worker-getting-started/src/main.ts deleted file mode 100644 index 91ec6da5f0..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.log(err)); diff --git a/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json b/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json deleted file mode 100644 index 8b78a4f893..0000000000 --- a/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json +++ /dev/null @@ -1,28 +0,0 @@ - -{ - "index": "/index.html", - "assetGroups": [{ - "name": "app", - "installMode": "prefetch", - "resources": { - "files": [ - "/favicon.ico", - "/index.html" - ], - "versionedFiles": [ - "/*.bundle.css", - "/*.bundle.js", - "/*.chunk.js" - ] - } - }, { - "name": "assets", - "installMode": "lazy", - "updateMode": "prefetch", - "resources": { - "files": [ - "/assets/**" - ] - } - }] -} \ No newline at end of file diff --git a/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts b/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts deleted file mode 100644 index b86deb9aa6..0000000000 --- a/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; - -describe('Set Document Title', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should set the document title', function () { - - let titles = [ - 'Good morning!', - 'Good afternoon!', - 'Good evening!' - ]; - - element.all( by.css( 'ul li a' ) ).each( - function iterator( element: ElementFinder, i: number ) { - - element.click(); - expect( browser.getTitle() ).toEqual( titles[ i ] ); - - } - ); - - }); - -}); diff --git a/docs_app/content/examples/set-document-title/example-config.json b/docs_app/content/examples/set-document-title/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/set-document-title/src/app/app.component.ts b/docs_app/content/examples/set-document-title/src/app/app.component.ts deleted file mode 100644 index 14a5c86887..0000000000 --- a/docs_app/content/examples/set-document-title/src/app/app.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docplaster -// #docregion -// Import the native Angular services. -import { Component } from '@angular/core'; -import { Title } from '@angular/platform-browser'; - -@Component({ -selector: 'app-root', -template: - `

    - Select a title to set on the current HTML document: -

    - - - ` -}) -// #docregion class -export class AppComponent { - public constructor(private titleService: Title ) { } - - public setTitle( newTitle: string) { - this.titleService.setTitle( newTitle ); - } -} -// #enddocregion class diff --git a/docs_app/content/examples/set-document-title/src/app/app.module.ts b/docs_app/content/examples/set-document-title/src/app/app.module.ts deleted file mode 100644 index 81f13c244c..0000000000 --- a/docs_app/content/examples/set-document-title/src/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule, Title } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - providers: [ - Title - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/set-document-title/src/index.html b/docs_app/content/examples/set-document-title/src/index.html deleted file mode 100644 index 8862e207c3..0000000000 --- a/docs_app/content/examples/set-document-title/src/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - Setting The Document Title Using The Title Service - - - - -

    - Setting The Document Title Using The Title Service -

    - - - - - diff --git a/docs_app/content/examples/set-document-title/src/main.ts b/docs_app/content/examples/set-document-title/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/set-document-title/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/set-document-title/stackblitz.json b/docs_app/content/examples/set-document-title/stackblitz.json deleted file mode 100644 index fb6cf810f9..0000000000 --- a/docs_app/content/examples/set-document-title/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Set The Document Title In Angular", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags": [ "cookbook" ] -} diff --git a/docs_app/content/examples/setup/e2e-spec.ts b/docs_app/content/examples/setup/e2e-spec.ts deleted file mode 100644 index 73921707ee..0000000000 --- a/docs_app/content/examples/setup/e2e-spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('QuickStart E2E Tests', function () { - - let expectedMsg = 'Hello Angular'; - - beforeEach(function () { - browser.get(''); - }); - - it(`should display: ${expectedMsg}`, function () { - expect(element(by.css('h1')).getText()).toEqual(expectedMsg); - }); - -}); diff --git a/docs_app/content/examples/setup/example-config.json b/docs_app/content/examples/setup/example-config.json deleted file mode 100644 index 6af3884d8d..0000000000 --- a/docs_app/content/examples/setup/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "unittesting": true -} diff --git a/docs_app/content/examples/setup/non-essential-files.txt b/docs_app/content/examples/setup/non-essential-files.txt deleted file mode 100644 index 6389af193c..0000000000 --- a/docs_app/content/examples/setup/non-essential-files.txt +++ /dev/null @@ -1,13 +0,0 @@ -.git -.gitignore -.travis.yml -*.spec*.ts -CHANGELOG.md -e2e -favicon.ico -karma.conf.js -karma-test-shim.js -LICENSE -non-essential-files.txt -protractor.config.js -README.md diff --git a/docs_app/content/examples/setup/quickstart-specs.stackblitz.json b/docs_app/content/examples/setup/quickstart-specs.stackblitz.json deleted file mode 100644 index 44d7ab73f7..0000000000 --- a/docs_app/content/examples/setup/quickstart-specs.stackblitz.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "description": "Quickstart AppComponent Testing", - "files":[ - "src/browser-test-shim.js", - "src/app/app.component.ts", - "src/app/app.component.spec.ts", - "src/quickstart-specs.html" - ], - "main": "src/quickstart-specs.html", - "file": "src/app/app.component.spec.ts", - "tags": ["quickstart", "setup", "testing"] -} diff --git a/docs_app/content/examples/setup/src/app/app.component.spec.ts b/docs_app/content/examples/setup/src/app/app.component.spec.ts deleted file mode 100644 index 4998dec904..0000000000 --- a/docs_app/content/examples/setup/src/app/app.component.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { AppComponent } from './app.component'; - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -describe('AppComponent', function () { - let de: DebugElement; - let comp: AppComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AppComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - de = fixture.debugElement.query(By.css('h1')); - }); - - it('should create component', () => expect(comp).toBeDefined() ); - - it('should have expected

    text', () => { - fixture.detectChanges(); - const h1 = de.nativeElement; - expect(h1.textContent).toMatch(/angular/i, - '

    should say something about "Angular"'); - }); -}); diff --git a/docs_app/content/examples/setup/src/app/app.component.ts b/docs_app/content/examples/setup/src/app/app.component.ts deleted file mode 100644 index 1ef28fc5c4..0000000000 --- a/docs_app/content/examples/setup/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-app', - template: `

    Hello {{name}}

    ` -}) -export class AppComponent { name = 'Angular'; } diff --git a/docs_app/content/examples/setup/src/app/app.module.ts b/docs_app/content/examples/setup/src/app/app.module.ts deleted file mode 100644 index 50a0e6eb47..0000000000 --- a/docs_app/content/examples/setup/src/app/app.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/setup/src/index.html b/docs_app/content/examples/setup/src/index.html deleted file mode 100644 index 58e5112308..0000000000 --- a/docs_app/content/examples/setup/src/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - Angular Quickstart Seed - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/setup/src/main.ts b/docs_app/content/examples/setup/src/main.ts deleted file mode 100644 index 02d58dceac..0000000000 --- a/docs_app/content/examples/setup/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/setup/src/quickstart-specs.html b/docs_app/content/examples/setup/src/quickstart-specs.html deleted file mode 100644 index 9bc81ccf2e..0000000000 --- a/docs_app/content/examples/setup/src/quickstart-specs.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - 1st Specs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/setup/src/systemjs.config.extras.js b/docs_app/content/examples/setup/src/systemjs.config.extras.js deleted file mode 100644 index 027dfe58cf..0000000000 --- a/docs_app/content/examples/setup/src/systemjs.config.extras.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Add barrels and stuff - * Adjust as necessary for your application needs. - */ -// (function (global) { -// System.config({ -// packages: { -// // add packages here -// } -// }); -// })(this); diff --git a/docs_app/content/examples/setup/stackblitz.json b/docs_app/content/examples/setup/stackblitz.json deleted file mode 100644 index 2fd0130fd8..0000000000 --- a/docs_app/content/examples/setup/stackblitz.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "description": "QuickStart Setup", - "files": [ - "src/app/app.component.ts", - "src/app/app.module.ts", - "src/index.html", - "src/main.ts", - "src/styles.css" - ], - "file": "src/app/app.component.ts", - "tags": ["quickstart", "setup", "seed"] -} diff --git a/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts b/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts deleted file mode 100644 index a877fb3223..0000000000 --- a/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Structural Directives', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('first div should show hero name with *ngIf', function () { - const allDivs = element.all(by.tagName('div')); - expect(allDivs.get(0).getText()).toEqual('Mr. Nice'); - }); - - it('first li should show hero name with *ngFor', function () { - const allLis = element.all(by.tagName('li')); - expect(allLis.get(0).getText()).toEqual('Mr. Nice'); - }); - - it('ngSwitch have two instances', function () { - const happyHeroEls = element.all(by.tagName('app-happy-hero')); - expect(happyHeroEls.count()).toEqual(2); - }); - - it('should toggle *ngIf="hero" with a button', function () { - const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0); - const paragraph = element.all(by.cssContainingText('p', 'I turned the corner')); - expect(paragraph.get(0).getText()).toContain('I waved'); - toggleHeroButton.click().then(() => { - expect(paragraph.get(0).getText()).not.toContain('I waved'); - }); - }); - - it('should have only one "Hip!" (the other is erased)', function () { - const paragraph = element.all(by.cssContainingText('p', 'Hip!')); - expect(paragraph.count()).toEqual(1); - }); - - it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () { - const paragraph = element.all(by.css('p.unless')); - expect(paragraph.count()).toEqual(3); - for (let i = 0; i < 3; i++) { - expect(paragraph.get(i).getText()).toContain('(A)'); - } - }); - - it('appUnless should show 1 paragraph (B) after toggling condition', function () { - const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0); - const paragraph = element.all(by.css('p.unless')); - - toggleConditionButton.click().then(() => { - expect(paragraph.count()).toEqual(1); - expect(paragraph.get(0).getText()).toContain('(B)'); - }); - }); -}); - diff --git a/docs_app/content/examples/structural-directives/example-config.json b/docs_app/content/examples/structural-directives/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.css b/docs_app/content/examples/structural-directives/src/app/app.component.css deleted file mode 100644 index a3ed305907..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/app.component.css +++ /dev/null @@ -1,70 +0,0 @@ -/* #docregion */ -button { - min-width: 100px; - font-size: 100%; -} - -.box { - border: 1px solid gray; - max-width: 600px; - padding: 4px; -} -.choices { - font-style: italic; -} - -code, .code { - background-color: #eee; - color: black; - font-family: Courier, sans-serif; - font-size: 85%; -} - -div.code { - width: 400px; -} - -.heroic { - font-size: 150%; - font-weight: bold; -} - -hr { - margin: 40px 0 -} - -.odd { - background-color: palegoldenrod; -} - -td, th { - text-align: left; - vertical-align: top; -} - -/* #docregion p-span */ -p span { color: red; font-size: 70%; } -/* #enddocregion p-span */ - -.unless { - border: 2px solid; - padding: 6px; -} - -p.unless { - width: 500px; -} - -button.a, span.a, .unless.a { - color: red; - border-color: gold; - background-color: yellow; - font-size: 100%; -} - -button.b, span.b, .unless.b { - color: black; - border-color: green; - background-color: lightgreen; - font-size: 100%; -} diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.html b/docs_app/content/examples/structural-directives/src/app/app.component.html deleted file mode 100644 index e6205d30d9..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/app.component.html +++ /dev/null @@ -1,228 +0,0 @@ - - -

    Structural Directives

    - -

    Conditional display of hero

    - -
    - -
    {{hero.name}}
    - -
    - -

    List of heroes

    - - -
      - -
    • {{hero.name}}
      • - -
    - - - -
    - -

    NgIf

    - - -

    - Expression is true and ngIf is true. - This paragraph is in the DOM. -

    -

    - Expression is false and ngIf is false. - This paragraph is not in the DOM. -

    - - - -

    - Expression sets display to "block". - This paragraph is visible. -

    -

    - Expression sets display to "none". - This paragraph is hidden but still in the DOM. -

    - - -

    NgIf with template

    -

    <ng-template> element

    - - -
    {{hero.name}}
    -     - - -
    - -

    <ng-container>

    - -

    *ngIf with a <ng-container>

    - - - - -

    - I turned the corner - - and saw {{hero.name}}. I waved - - and continued on my way. -

    - - -

    - I turned the corner - - and saw {{hero.name}}. I waved - - and continued on my way. -

    - - -

    <select> with <span>

    - -
    - Pick your favorite hero - () -
    - - - -

    <select> with <ng-container>

    - -
    - Pick your favorite hero - () -
    - - -

    - -
    - -

    NgFor

    - -
    - -

    <div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">

    - -
    - ({{i}}) {{hero.name}} -
    - - -

    <ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/>

    - - -
    ({{i}}) {{hero.name}}
    -     - - -
    -
    - -

    NgSwitch

    - -
    Pick your favorite hero
    -

    - - -

    - -

    NgSwitch

    - - -
    - - - - -
    - - -

    NgSwitch with <ng-template>

    - -
    - - - - - - - - - - - - -
    - - -
    - -

    <ng-template>

    - -

    Hip!

    - -

    Hip!

    -     -

    Hooray!

    - - -
    - -

    UnlessDirective

    -

    - The condition is currently - {{condition}}. - -

    - -

    - (A) This paragraph is displayed because the condition is false. -

    - -

    - (B) Although the condition is true, - this paragraph is displayed because appUnless is set to false. -

    - - - -

    UnlessDirective with template

    - - -

    Show this sentence unless the condition is true.

    - - -

    - (A) <p *appUnless="condition" class="code unless"> -

    - - -

    - (A) <ng-template [appUnless]="condition"> -

    -     - diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.ts b/docs_app/content/examples/structural-directives/src/app/app.component.ts deleted file mode 100644 index aed11fc77a..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/app.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Hero, heroes } from './hero'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] -}) -export class AppComponent { - heroes = heroes; - hero = this.heroes[0]; - - condition = false; - logs: string[] = []; - showSad = true; - status = 'ready'; - - // #docregion trackByHero - trackById(index: number, hero: Hero): number { return hero.id; } - // #enddocregion trackByHero -} diff --git a/docs_app/content/examples/structural-directives/src/app/app.module.ts b/docs_app/content/examples/structural-directives/src/app/app.module.ts deleted file mode 100644 index b6ffb456c9..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { heroSwitchComponents } from './hero-switch.components'; -import { UnlessDirective } from './unless.directive'; - -@NgModule({ - imports: [ BrowserModule, FormsModule ], - declarations: [ - AppComponent, - heroSwitchComponents, - UnlessDirective - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts b/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts deleted file mode 100644 index 27bf8de8d5..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -@Component({ - selector: 'app-happy-hero', - template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.` -}) -export class HappyHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-sad-hero', - template: `You like {{hero.name}}? Such a sad hero. Are you sad too?` -}) -export class SadHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-confused-hero', - template: `Are you as confused as {{hero.name}}?` -}) -export class ConfusedHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-unknown-hero', - template: `{{message}}` -}) -export class UnknownHeroComponent { - @Input() hero: Hero; - get message() { - return this.hero && this.hero.name ? - `${this.hero.name} is strange and mysterious.` : - 'Are you feeling indecisive?'; - } -} - -export const heroSwitchComponents = - [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ]; diff --git a/docs_app/content/examples/structural-directives/src/app/hero.ts b/docs_app/content/examples/structural-directives/src/app/hero.ts deleted file mode 100644 index 89f0cbfdf8..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/hero.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; - emotion?: string; -} - -export const heroes: Hero[] = [ - { id: 1, name: 'Mr. Nice', emotion: 'happy'}, - { id: 2, name: 'Narco', emotion: 'sad' }, - { id: 3, name: 'Windstorm', emotion: 'confused' }, - { id: 4, name: 'Magneta'} -]; diff --git a/docs_app/content/examples/structural-directives/src/app/scrap.txt b/docs_app/content/examples/structural-directives/src/app/scrap.txt deleted file mode 100644 index f2e4766bdb..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/scrap.txt +++ /dev/null @@ -1,21 +0,0 @@ -// interesting but unused code - heroChooser(picker: HTMLFieldSetElement) { - let choices = picker.children; - this.favoriteHero = undefined; - for (let i = 0; i < choices.length; i++) { - let choice = choices[i].children[0] as HTMLInputElement; - if (choice.checked) { this.favoriteHero = this.heroes[i]; } - } - } - - -

    Switch with *ngFor repeated switchCases using <ng-container>

    - -
    - Your favorite hero is ... - - {{hero.name}} - - None of the above -
    - diff --git a/docs_app/content/examples/structural-directives/src/app/unless.directive.ts b/docs_app/content/examples/structural-directives/src/app/unless.directive.ts deleted file mode 100644 index 5f91ddbc28..0000000000 --- a/docs_app/content/examples/structural-directives/src/app/unless.directive.ts +++ /dev/null @@ -1,50 +0,0 @@ -// #docplaster -// #docregion -// #docregion no-docs, skeleton -import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; - -// #enddocregion skeleton -/** - * Add the template content to the DOM unless the condition is true. -// #enddocregion no-docs - * - * If the expression assigned to `appUnless` evaluates to a truthy value - * then the templated elements are removed removed from the DOM, - * the templated elements are (re)inserted into the DOM. - * - *
    - * Congrats! Everything is great! - *
    - * - * ### Syntax - * - * - `
    ...
    ` - * - `
    ...
    ` - * -// #docregion no-docs - */ -// #docregion skeleton -@Directive({ selector: '[appUnless]'}) -export class UnlessDirective { - // #enddocregion skeleton - private hasView = false; - - // #docregion ctor - constructor( - private templateRef: TemplateRef, - private viewContainer: ViewContainerRef) { } - // #enddocregion ctor - - // #docregion set - @Input() set appUnless(condition: boolean) { - if (!condition && !this.hasView) { - this.viewContainer.createEmbeddedView(this.templateRef); - this.hasView = true; - } else if (condition && this.hasView) { - this.viewContainer.clear(); - this.hasView = false; - } - } - // #enddocregion set - // #docregion skeleton -} diff --git a/docs_app/content/examples/structural-directives/src/index.html b/docs_app/content/examples/structural-directives/src/index.html deleted file mode 100644 index 451b66ce35..0000000000 --- a/docs_app/content/examples/structural-directives/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - Angular Structural Directives - - - - - - - - - - diff --git a/docs_app/content/examples/structural-directives/src/main.ts b/docs_app/content/examples/structural-directives/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/structural-directives/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/structural-directives/stackblitz.json b/docs_app/content/examples/structural-directives/stackblitz.json deleted file mode 100644 index ca13405583..0000000000 --- a/docs_app/content/examples/structural-directives/stackblitz.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "description": "Structural directives", - "files": [ - "!**/*.d.ts", - "!**/*.js", - "!src/app/scrap.txt" - ], - "tags": [ - "structural", "directives", "template", "ngIf", - "ngSwitch", "ngFor" - ] -} diff --git a/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts b/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts deleted file mode 100644 index c1018c7dd3..0000000000 --- a/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,193 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Style Guide', function () { - it('01-01', function () { - browser.get('#/01-01'); - - let pre = element(by.tagName('toh-heroes > pre')); - expect(pre.getText()).toContain('Bombasto'); - expect(pre.getText()).toContain('Tornado'); - expect(pre.getText()).toContain('Magneta'); - }); - - it('02-07', function () { - browser.get('#/02-07'); - - let hero = element(by.tagName('toh-hero > div')); - let users = element(by.tagName('admin-users > div')); - - expect(hero.getText()).toBe('hero component'); - expect(users.getText()).toBe('users component'); - }); - - it('02-08', function () { - browser.get('#/02-08'); - - let input = element(by.tagName('input[tohvalidate]')); - expect(input.isPresent()).toBe(true); - }); - - it('03-01', function () { - browser.get('#/03-01'); - - let div = element(by.tagName('sg-app > div')); - expect(div.getText()).toBe('The expected error is 42'); - }); - - it('03-02', function () { - browser.get('#/03-02'); - - let divs = element.all(by.tagName('sg-app > div')); - expect(divs.get(0).getText()).toBe('Heroes url: api/heroes'); - expect(divs.get(1).getText()).toBe('Villains url: api/villains'); - }); - - it('03-03', function () { - browser.get('#/03-03'); - - let div = element(by.tagName('sg-app > div')); - expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic'); - }); - - it('03-04', function () { - browser.get('#/03-04'); - - let buttons = element.all(by.tagName('sg-app > button')); - expect(buttons.get(0).getText()).toBe('Show toast'); - expect(buttons.get(1).getText()).toBe('Hide toast'); - }); - - // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat - xit('03-06', function () { - browser.get('#/03-06'); - - let div = element(by.tagName('sg-app > div')); - expect(div.getText()).toBe('Actual favorite: Windstorm'); - - let lis = element.all(by.tagName('sg-app > ul > li')); - expect(lis.get(0).getText()).toBe('Windstorm'); - expect(lis.get(1).getText()).toBe('Bombasto'); - expect(lis.get(2).getText()).toBe('Magneta'); - expect(lis.get(3).getText()).toBe('Tornado'); - }); - - it('04-10', function () { - browser.get('#/04-10'); - - let div = element(by.tagName('sg-app > toh-heroes > div')); - expect(div.getText()).toBe('This is heroes component'); - }); - - it('05-02', function () { - browser.get('#/05-02'); - - let button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('Hero button'); - }); - - it('05-03', function () { - browser.get('#/05-03'); - - let button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('Hero button'); - }); - - it('05-04', function () { - browser.get('#/05-04'); - - let h2 = element(by.tagName('sg-app > toh-heroes > div > h2')); - expect(h2.getText()).toBe('My Heroes'); - }); - - it('05-12', function () { - browser.get('#/05-12'); - - let button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); - }); - - it('05-13', function () { - browser.get('#/05-13'); - - let button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); - }); - - it('05-14', function () { - browser.get('#/05-14'); - - let toast = element(by.tagName('sg-app > toh-toast')); - expect(toast.getText()).toBe('...'); - }); - - it('05-15', function () { - browser.get('#/05-15'); - - let heroList = element(by.tagName('sg-app > toh-hero-list')); - expect(heroList.getText()).toBe('...'); - }); - - it('05-16', function () { - browser.get('#/05-16'); - - let hero = element(by.tagName('sg-app > toh-hero')); - expect(hero.getText()).toBe('...'); - }); - - it('05-17', function () { - browser.get('#/05-17'); - - let section = element(by.tagName('sg-app > toh-hero-list > section')); - expect(section.getText()).toContain('Our list of heroes'); - expect(section.getText()).toContain('Total powers'); - expect(section.getText()).toContain('Average power'); - }); - - it('06-01', function () { - browser.get('#/06-01'); - - let div = element(by.tagName('sg-app > div[tohhighlight]')); - expect(div.getText()).toBe('Bombasta'); - }); - - it('06-03', function () { - browser.get('#/06-03'); - - let input = element(by.tagName('input[tohvalidator]')); - expect(input.isPresent()).toBe(true); - }); - - // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat - xit('07-01', function () { - browser.get('#/07-01'); - - let lis = element.all(by.tagName('sg-app > ul > li')); - expect(lis.get(0).getText()).toBe('Windstorm'); - expect(lis.get(1).getText()).toBe('Bombasto'); - expect(lis.get(2).getText()).toBe('Magneta'); - expect(lis.get(3).getText()).toBe('Tornado'); - }); - - it('07-03', function () { - browser.get('#/07-03'); - - let pre = element(by.tagName('toh-heroes > pre')); - expect(pre.getText()).toContain('[]'); - }); - - it('07-04', function () { - browser.get('#/07-04'); - - let pre = element(by.tagName('toh-app > pre')); - expect(pre.getText()).toContain('[]'); - }); - - it('09-01', function () { - browser.get('#/09-01'); - - let button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); - }); -}); diff --git a/docs_app/content/examples/styleguide/example-config.json b/docs_app/content/examples/styleguide/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.component.css b/docs_app/content/examples/styleguide/src/01-01/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts deleted file mode 100644 index d5bb953540..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { HeroService } from './heroes'; - -@Component({ - selector: 'toh-app', - template: ` - - `, - styleUrls: ['./app.component.css'], - providers: [ HeroService ] -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts deleted file mode 100644 index 53f29ea8cb..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; - -@NgModule({ - imports: [ - BrowserModule, - // #enddocregion - RouterModule.forChild([{ path: '01-01', component: AppComponent }]) - // #docregion - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion - - diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts deleted file mode 100644 index 853e6ab64e..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts +++ /dev/null @@ -1,49 +0,0 @@ -// #docregion -/* avoid */ - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, Component, OnInit } from '@angular/core'; - -class Hero { - id: number; - name: string; -} - -@Component({ - selector: 'my-app', - template: ` -

    {{title}}

    - 
    {{heroes | json}}
    - `, - styleUrls: ['app/app.component.css'] -}) -class AppComponent implements OnInit { - title = 'Tour of Heroes'; - - heroes: Hero[] = []; - - ngOnInit() { - getHeroes().then(heroes => this.heroes = heroes); - } -} - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } - -platformBrowserDynamic().bootstrapModule(AppModule); - -const HEROES: Hero[] = [ - {id: 1, name: 'Bombasto'}, - {id: 2, name: 'Tornado'}, - {id: 3, name: 'Magneta'}, -]; - -function getHeroes(): Promise { - return Promise.resolve(HEROES); // TODO: get hero data from the server; -} diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts deleted file mode 100644 index 9e3546db90..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './shared'; - -@Component({ - selector: 'toh-heroes', - template: ` - 
    {{heroes | json}}
    - ` -}) -export class HeroesComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) {} - - ngOnInit() { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts deleted file mode 100644 index a8d7f1d422..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './heroes.component'; diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts deleted file mode 100644 index d94e5bacac..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { HEROES } from './mock-heroes'; - -@Injectable() -export class HeroService { - getHeroes() { - return Promise.resolve(HEROES); - } -} diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts deleted file mode 100644 index c0c1a87eb2..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './hero.model'; -export * from './hero.service'; -export * from './mock-heroes'; diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts deleted file mode 100644 index 2e9a69f59d..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Hero } from './hero.model'; - -export const HEROES: Hero[] = [ - {id: 1, name: 'Bombasto'}, - {id: 2, name: 'Tornado'}, - {id: 3, name: 'Magneta'}, -]; diff --git a/docs_app/content/examples/styleguide/src/01-01/app/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/01-01/main.ts b/docs_app/content/examples/styleguide/src/01-01/main.ts deleted file mode 100644 index 7e8269bd65..0000000000 --- a/docs_app/content/examples/styleguide/src/01-01/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts deleted file mode 100644 index 66ebfa954e..0000000000 --- a/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'toh-app', - template: ` - Tour of Heroes - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts deleted file mode 100644 index 306ec125e0..0000000000 --- a/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - // #enddocregion - RouterModule.forChild([{ path: '02-05', component: AppComponent }]) - // #docregion - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion diff --git a/docs_app/content/examples/styleguide/src/02-05/main.ts b/docs_app/content/examples/styleguide/src/02-05/main.ts deleted file mode 100644 index 6c32161f84..0000000000 --- a/docs_app/content/examples/styleguide/src/02-05/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule) - .then(success => console.log(`Bootstrap success`)) - .catch(err => console.error(err)); diff --git a/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts deleted file mode 100644 index c82e12624d..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: ` - - - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts deleted file mode 100644 index 4320fe67d5..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroComponent } from './heroes'; -import { UsersComponent } from './users'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '02-07', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent, - UsersComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts deleted file mode 100644 index 976fcb6cdf..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -// HeroComponent is in the Tour of Heroes feature -@Component({ - selector: 'hero' -}) -export class HeroComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts deleted file mode 100644 index 44c04dd855..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - // #enddocregion example - template: '
    hero component
    ', - // #docregion example - selector: 'toh-hero' -}) -export class HeroComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts deleted file mode 100644 index 084f36d703..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero.component'; diff --git a/docs_app/content/examples/styleguide/src/02-07/app/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/index.ts deleted file mode 100644 index fc87f976b3..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './heroes'; -export * from './users'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts deleted file mode 100644 index 475ba6d2a7..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './users.component'; diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts deleted file mode 100644 index 9a5bd936e9..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -// UsersComponent is in an Admin feature -@Component({ - selector: 'users' -}) -export class UsersComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts deleted file mode 100644 index 2fb6d54ebe..0000000000 --- a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - // #enddocregion example - template: '
    users component
    ', - // #docregion example - selector: 'admin-users' -}) -export class UsersComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts deleted file mode 100644 index bf27aeaf8a..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts deleted file mode 100644 index e840cc50a5..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { InputHighlightDirective, - ValidateDirective } from './shared'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '02-08', component: AppComponent }]) - ], - declarations: [ - AppComponent, - InputHighlightDirective, - ValidateDirective - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/02-08/app/index.ts b/docs_app/content/examples/styleguide/src/02-08/app/index.ts deleted file mode 100644 index ebe5c92f03..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts deleted file mode 100644 index b844b75492..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './input-highlight.directive'; -export * from './validate.directive'; diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts deleted file mode 100644 index fd74771981..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Directive, ElementRef } from '@angular/core'; - -@Directive({ selector: 'input'}) -/** Highlight the attached input text element in blue */ -export class InputHighlightDirective { - constructor(el: ElementRef) { - el.nativeElement.style.backgroundColor = 'powderblue'; - } -} diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts deleted file mode 100644 index b038f37075..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Directive } from '@angular/core'; -// #docregion example -/* avoid */ - -@Directive({ - selector: '[validate]' -}) -export class ValidateDirective {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts deleted file mode 100644 index 039afb846f..0000000000 --- a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Directive } from '@angular/core'; - -// #docregion example -@Directive({ - selector: '[tohValidate]' -}) -export class ValidateDirective {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts deleted file mode 100644 index cb9479d2d9..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ExceptionService } from './core'; - -@Component({ - selector: 'sg-app', - template: '
    The expected error is {{errorCode}}
    ', - providers: [ExceptionService] -}) -export class AppComponent implements OnInit { - errorCode: number; - - constructor(private exceptionService: ExceptionService) { } - - ngOnInit() { - this.errorCode = this.exceptionService.getException(); - } -} diff --git a/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts deleted file mode 100644 index 48079f21c7..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '03-01', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts deleted file mode 100644 index 0a22811fe3..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -// #docregion example -/* avoid */ - -export class exceptionService { - constructor() { } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts deleted file mode 100644 index dd77b4f7dc..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -// #docregion example -export class ExceptionService { - constructor() { } - // #enddocregion example - // testing harness - getException() { return 42; } - // #docregion example -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts deleted file mode 100644 index 8acaa4bcf9..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './exception.service'; diff --git a/docs_app/content/examples/styleguide/src/03-01/app/index.ts b/docs_app/content/examples/styleguide/src/03-01/app/index.ts deleted file mode 100644 index e120e2dbfd..0000000000 --- a/docs_app/content/examples/styleguide/src/03-01/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './core'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts deleted file mode 100644 index 132ea54c85..0000000000 --- a/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component } from '@angular/core'; - -import { heroesUrl, mockHeroes, VILLAINS_URL } from './core'; - -@Component({ - selector: 'sg-app', - template: ` -
    Heroes url: {{heroesUrl}}
    -
    Villains url: {{villainsUrl}}
    - -

    Mock Heroes

    -
    {{hero}}
    - ` -}) -export class AppComponent { - heroes = mockHeroes; // prefer - heroesUrl = heroesUrl; // prefer - villainsUrl = VILLAINS_URL; // tolerate -} diff --git a/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts deleted file mode 100644 index 2db4012ebf..0000000000 --- a/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '03-02', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts b/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts deleted file mode 100644 index 5c26478c7b..0000000000 --- a/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts +++ /dev/null @@ -1,4 +0,0 @@ -// #docregion -export const mockHeroes = ['Sam', 'Jill']; // prefer -export const heroesUrl = 'api/heroes'; // prefer -export const VILLAINS_URL = 'api/villains'; // tolerate diff --git a/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts deleted file mode 100644 index 2ba773ede8..0000000000 --- a/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './data.service'; diff --git a/docs_app/content/examples/styleguide/src/03-02/app/index.ts b/docs_app/content/examples/styleguide/src/03-02/app/index.ts deleted file mode 100644 index e120e2dbfd..0000000000 --- a/docs_app/content/examples/styleguide/src/03-02/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './core'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts deleted file mode 100644 index 3ca522bc45..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroCollectorService } from './core'; - -@Component({ - selector: 'sg-app', - template: '
    Our hero is {{hero.name}} and {{hero.power}}
    ', - providers: [HeroCollectorService] -}) -export class AppComponent implements OnInit { - hero: Hero; - - constructor(private heroCollectorService: HeroCollectorService) { } - - ngOnInit() { - this.hero = this.heroCollectorService.getHero(); - } -} diff --git a/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts deleted file mode 100644 index 29b3d2e765..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '03-03', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts deleted file mode 100644 index f481af18b6..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -// #docregion example -/* avoid */ - -import { Injectable } from '@angular/core'; - -import { IHero } from './hero.model.avoid'; - -@Injectable() -export class HeroCollectorService { - hero: IHero; - - constructor() { } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts deleted file mode 100644 index 1df5c0deb0..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { Injectable } from '@angular/core'; - -import { Hero } from './hero.model'; - -@Injectable() -export class HeroCollectorService { - hero: Hero; - - constructor() { } - // #enddocregion example - // testing harness - getHero() { - this.hero = { - name: 'RubberMan', - power: 'He is so elastic' - }; - - return this.hero; - } - // #docregion example -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts deleted file mode 100644 index ce93b2c59a..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -// #docregion example -/* avoid */ - -export interface IHero { - name: string; - power: string; -} - -export class Hero implements IHero { - name: string; - power: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts deleted file mode 100644 index c3277621cb..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -// #docregion example -export class Hero { - name: string; - power: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts deleted file mode 100644 index 17ad67b0b1..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero-collector.service'; -export * from './hero.model'; diff --git a/docs_app/content/examples/styleguide/src/03-03/app/index.ts b/docs_app/content/examples/styleguide/src/03-03/app/index.ts deleted file mode 100644 index e120e2dbfd..0000000000 --- a/docs_app/content/examples/styleguide/src/03-03/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './core'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts deleted file mode 100644 index 5aaf3402e1..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ToastService } from './core'; - -@Component({ - selector: 'sg-app', - template: ` - - - `, - providers: [ToastService] -}) -export class AppComponent implements OnInit { - constructor(private toastService: ToastService) { } - - hide() { - this.toastService.hide(); - } - - show() { - this.toastService.show(); - } - - ngOnInit() { - this.toastService.activate('Hello Style Guide!'); - } -} diff --git a/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts deleted file mode 100644 index a5a8d5bb4e..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '03-04', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts deleted file mode 100644 index e78b628f9c..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './toast.service'; diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts deleted file mode 100644 index 0f3a7c25ea..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -// #docregion example -/* avoid */ - -import { Injectable } from '@angular/core'; - -@Injectable() -export class ToastService { - message: string; - - private _toastCount: number; - - hide() { - this._toastCount--; - this._log(); - } - - show() { - this._toastCount++; - this._log(); - } - - private _log() { - console.log(this.message); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts deleted file mode 100644 index ab148a1732..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { Injectable } from '@angular/core'; - -@Injectable() -export class ToastService { - message: string; - - private toastCount: number; - - hide() { - this.toastCount--; - this.log(); - } - - show() { - this.toastCount++; - this.log(); - } - - private log() { - console.log(this.message); - } - // #enddocregion example - // testing harness - activate(message: string) { - this.message = message; - } - // #docregion example -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-04/app/index.ts b/docs_app/content/examples/styleguide/src/03-04/app/index.ts deleted file mode 100644 index e120e2dbfd..0000000000 --- a/docs_app/content/examples/styleguide/src/03-04/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './core'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.component.html b/docs_app/content/examples/styleguide/src/03-06/app/app.component.html deleted file mode 100644 index 67fb0d5964..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/app.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
    Actual favorite: {{favorite?.name}}
    -
      -
    • - {{hero.name}} -
      • -
    diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts deleted file mode 100644 index 8ec308bc6a..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './heroes'; -import { ExceptionService, SpinnerService, ToastService } from './core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html', - providers: [HeroService, ExceptionService, SpinnerService, ToastService] -}) -export class AppComponent implements OnInit { - favorite: Hero; - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroService.getHero(1).subscribe(hero => this.favorite = hero); - this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts deleted file mode 100644 index f259ce23a2..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '03-06', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts deleted file mode 100644 index 7180c88e6b..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class ExceptionService { } diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts deleted file mode 100644 index e4e6723f91..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -// #docregion example -export * from './exception.service'; -export * from './spinner'; -export * from './toast'; -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts deleted file mode 100644 index 1d619300c0..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './spinner.component'; -export * from './spinner.service'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts deleted file mode 100644 index 1fd2a01500..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; - -import { SpinnerService } from './spinner.service'; - -@Component({ - selector: 'toh-spinner', - template: '
    spinner
    ' -}) - -export class SpinnerComponent implements OnDestroy, OnInit { - constructor(private spinnerService: SpinnerService) { } - - ngOnInit() { } - - ngOnDestroy() { } -} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts deleted file mode 100644 index ad5d2ed6e0..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Injectable } from '@angular/core'; - -export interface ISpinnerState { } - -@Injectable() -export class SpinnerService { - spinnerState: any; - - show() { } - - hide() { } -} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts deleted file mode 100644 index 01b41aff98..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './toast.component'; -export * from './toast.service'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts deleted file mode 100644 index dd0bba5eba..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ToastService } from './toast.service'; - -@Component({ - selector: 'toh-toast', - template: '
    toast
    ' -}) -export class ToastComponent implements OnInit { - constructor(toastService: ToastService) { } - - ngOnInit() { } -} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts deleted file mode 100644 index e92e75ee45..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class ToastService { - activate: (message?: string, title?: string) => void; -} diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts deleted file mode 100644 index c3277621cb..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -// #docregion example -export class Hero { - name: string; - power: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts deleted file mode 100644 index 3b983f5bda..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -// #docregion example -/* avoid */ - -import { ExceptionService, SpinnerService, ToastService } from '../../core'; -import { Http } from '@angular/http'; -import { Injectable } from '@angular/core'; -import { map } from 'rxjs/operators'; -import { Hero } from './hero.model'; -// #enddocregion example - -@Injectable() -export class HeroService { - - constructor( - private exceptionService: ExceptionService, - private spinnerService: SpinnerService, - private toastService: ToastService, - private http: Http - ) { } - - getHero(id: number) { - return this.http.get(`api/heroes/${id}`).pipe( - map(response => response.json().data as Hero)); - } - - getHeroes() { - return this.http.get(`api/heroes`).pipe( - map(response => response.json().data as Hero[])); - } - -} - diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts deleted file mode 100644 index 0a50c11bb4..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,33 +0,0 @@ -// #docregion -// #docregion example -import { Injectable } from '@angular/core'; -import { Http } from '@angular/http'; -import { map } from 'rxjs/operators'; - -import { Hero } from './hero.model'; -import { ExceptionService, SpinnerService, ToastService } from '../../core'; -// #enddocregion example - -@Injectable() -export class HeroService { - cachedHeroes: Hero[]; - - constructor( - private exceptionService: ExceptionService, - private spinnerService: SpinnerService, - private toastService: ToastService, - private http: Http - ) { } - - getHero(id: number) { - return this.http.get(`api/heroes/${id}`).pipe( - map(response => response.json() as Hero)); - } - - getHeroes() { - return this.http.get(`api/heroes`).pipe( - map(response => response.json() as Hero[])); - } - -} - diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts deleted file mode 100644 index dbb150d3f8..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero.model'; -export * from './hero.service'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/index.ts deleted file mode 100644 index cf861e261a..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './heroes'; -export * from './core'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts deleted file mode 100644 index e1c1ae6665..0000000000 --- a/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { ToastService } from '../../core'; - -@Component({ - selector: 'toh-toast', - template: '
    toast
    ' -}) -export class ToastComponent implements OnInit { - constructor(toastService: ToastService) { } - - ngOnInit() { } -} diff --git a/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts deleted file mode 100644 index fdd8e6ef56..0000000000 --- a/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts deleted file mode 100644 index 25568b7fb4..0000000000 --- a/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts +++ /dev/null @@ -1,28 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion example -import { RouterModule } from '@angular/router'; -// #docregion example - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; - -@NgModule({ - imports: [ - BrowserModule, -// #enddocregion example - RouterModule.forChild([{ path: '04-08', component: AppComponent }]) -// #docregion example - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - entryComponents: [ AppComponent ] -}) -export class AppModule {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html deleted file mode 100644 index 1244e68a4a..0000000000 --- a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html +++ /dev/null @@ -1 +0,0 @@ -
    This is heroes component
    diff --git a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts deleted file mode 100644 index e2df4c91fd..0000000000 --- a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'toh-heroes', - templateUrl: './heroes.component.html' -}) -export class HeroesComponent implements OnInit { - constructor() { /* ... */ } - - ngOnInit() { /* ... */ } -} diff --git a/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts deleted file mode 100644 index fdd8e6ef56..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts deleted file mode 100644 index 78106657ad..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion example -import { RouterModule } from '@angular/router'; -// #docregion example - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { SharedModule } from './shared/shared.module'; - -@NgModule({ - imports: [ - BrowserModule, - SharedModule, -// #enddocregion example - RouterModule.forChild([{ path: '04-10', component: AppComponent }]) -// #docregion example - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - entryComponents: [ AppComponent ] -}) -export class AppModule {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html deleted file mode 100644 index 170f76aee1..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html +++ /dev/null @@ -1,8 +0,0 @@ - -
    This is heroes component
    -
      -
    • - {{hero.name}} -
      • -
    - diff --git a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts deleted file mode 100644 index 376567650e..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { FilterTextService } from '../shared/filter-text/filter-text.service'; - -@Component({ - selector: 'toh-heroes', - templateUrl: './heroes.component.html' -}) -export class HeroesComponent { - - heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } - ]; - - filteredHeroes = this.heroes; - - constructor(private filterService: FilterTextService) { } - - filterChanged(searchText: string) { - this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes); - } -} - diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts deleted file mode 100644 index fffe4bf0b7..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Component, EventEmitter, Output } from '@angular/core'; - -@Component({ - selector: 'toh-filter-text', - template: '' -}) -export class FilterTextComponent { - @Output() changed: EventEmitter; - - filter: string; - - constructor() { - this.changed = new EventEmitter(); - } - - clear() { - this.filter = ''; - } - - filterChanged(event: any) { - event.preventDefault(); - console.log(`Filter Changed: ${this.filter}`); - this.changed.emit(this.filter); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts deleted file mode 100644 index 87978e10e5..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class FilterTextService { - constructor() { - console.log('Created an instance of FilterTextService'); - } - - filter(data: string, props: Array, originalList: Array) { - let filteredList: any[]; - if (data && props && originalList) { - data = data.toLowerCase(); - let filtered = originalList.filter(item => { - let match = false; - for (let prop of props) { - if (item[prop].toString().toLowerCase().indexOf(data) > -1) { - match = true; - break; - } - }; - return match; - }); - filteredList = filtered; - } else { - filteredList = originalList; - } - return filteredList; - } -} diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts deleted file mode 100644 index 5019bcb234..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ name: 'initCaps' }) -export class InitCapsPipe implements PipeTransform { - transform = (value: string) => value; -} diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts deleted file mode 100644 index 6160abcc84..0000000000 --- a/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { FilterTextComponent } from './filter-text/filter-text.component'; -import { FilterTextService } from './filter-text/filter-text.service'; -import { InitCapsPipe } from './init-caps.pipe'; - -@NgModule({ - imports: [CommonModule, FormsModule], - declarations: [ - FilterTextComponent, - InitCapsPipe - ], - providers: [FilterTextService], - exports: [ - CommonModule, - FormsModule, - FilterTextComponent, - InitCapsPipe - ] -}) -export class SharedModule { } diff --git a/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts deleted file mode 100644 index 693619a982..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'toh-app', - template: ` - - - - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts deleted file mode 100644 index ef3c156bcf..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion example -import { RouterModule } from '@angular/router'; -// #docregion example - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { CoreModule } from './core/core.module'; - -@NgModule({ - imports: [ - BrowserModule, - CoreModule, -// #enddocregion example - RouterModule.forChild([{ path: '04-11', component: AppComponent }]) -// #docregion example - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - entryComponents: [ AppComponent ] -}) -export class AppModule {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts deleted file mode 100644 index 4ba5c79a14..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { LoggerService } from './logger.service'; -import { NavComponent } from './nav/nav.component'; -import { SpinnerComponent } from './spinner/spinner.component'; -import { SpinnerService } from './spinner/spinner.service'; - -@NgModule({ - imports: [ - CommonModule // we use ngFor - ], -  exports: [NavComponent, SpinnerComponent], -  declarations: [NavComponent, SpinnerComponent], - providers: [LoggerService, SpinnerService] -}) -export class CoreModule { } - diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts deleted file mode 100644 index 098f40c7d5..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// #docregion -export * from './logger.service'; -export * from './spinner/spinner.service'; -export * from './nav/nav.component'; diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts deleted file mode 100644 index 9c7080f07a..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class LoggerService { - log(msg: string) { - console.log(msg); - } - - error(msg: string) { - console.error(msg); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css deleted file mode 100644 index 45979c75ad..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css +++ /dev/null @@ -1,56 +0,0 @@ -/*#docregion*/ -.mdl-layout__header { - display: flex; - position: fixed; - background-color: #222; -} - -.nav-link { - padding: 0 1em; - width: 100px; - color: rgba(255,255,255,.6); - text-align: center; - text-decoration: none; -} - -.nav-link.router-link-active { - color: rgba(255,255,255, 1); -} - -.nav-link.router-link-active::after { - height: 3px; - width: 100%; - display: block; - content: " "; - bottom: 0; - left: 0; - position: inherit; - background: rgb(83,109,254); -} - -.mdl-layout__header-row { - height: 56px; - padding: 0 16px 0 72px; - padding-left: 8px; - background-color: #673AB7; - background: #0033FF; - background-color: #222; -} - -#reset-button { - position: fixed; - right: 2em; - top: 1em; -} - -@media (max-width: 480px) { - #reset-button { - display: none - } -} - -@media (max-width: 320px) { - a.nav-link { - font-size: 12px; - } -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html deleted file mode 100644 index b3c7e441e0..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html +++ /dev/null @@ -1,14 +0,0 @@ - -
    -
    -

    Tour of Heroes

    -
    - -
    -
    diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts deleted file mode 100644 index 7e21016e2b..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'toh-nav', - templateUrl: './nav.component.html', - styleUrls: ['./nav.component.css'], -}) -export class NavComponent implements OnInit { - menuItems = [ - 'Heroes', - 'Villains', - 'Other' - ]; - - ngOnInit() { } - - constructor() { } -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css deleted file mode 100644 index afad0fe8e3..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css +++ /dev/null @@ -1,21 +0,0 @@ -/*#docregion*/ -.spinner { - position: absolute; - left: 7em; - top: 20em; - position: absolute; - background-color: blue; - height: .3em; - width: 6em; - margin:-60px 0 0 -60px; - -webkit-animation:spin 4s linear infinite; - -moz-animation:spin 4s linear infinite; - animation:spin 4s linear infinite; -} -@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } -@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } -@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } - -.spinner-hidden { - display:none; -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html deleted file mode 100644 index a07e3378c0..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts deleted file mode 100644 index cb8a416102..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -// #docregion -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { Subscription } from 'rxjs'; - -import { LoggerService } from '../logger.service'; -import { SpinnerState, SpinnerService } from './spinner.service'; - -@Component({ - selector: 'toh-spinner', - templateUrl: './spinner.component.html', - styleUrls: ['./spinner.component.css'] -}) -export class SpinnerComponent implements OnDestroy, OnInit { - visible = false; - - private spinnerStateChanged: Subscription; - - constructor( - private loggerService: LoggerService, - private spinnerService: SpinnerService - ) { } - - ngOnInit() { - console.log(this.visible); - this.spinnerStateChanged = this.spinnerService.spinnerState - .subscribe((state: SpinnerState) => { - this.visible = state.show; - this.loggerService.log(`visible=${this.visible}`); - }); - } - - ngOnDestroy() { - this.spinnerStateChanged.unsubscribe(); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts deleted file mode 100644 index e092d4bfda..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; - -export interface SpinnerState { - show: boolean; -} - -@Injectable() -export class SpinnerService { - private spinnerSubject = new Subject(); - - spinnerState = this.spinnerSubject.asObservable(); - - constructor() { } - - show() { - this.spinnerSubject.next({ show: true }); - } - - hide() { - this.spinnerSubject.next({ show: false }); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html deleted file mode 100644 index 9035a4b8ff..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html +++ /dev/null @@ -1,12 +0,0 @@ - -
    - - - -
      -
    • - {{hero.name}} -
      • -
    - -
    diff --git a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts deleted file mode 100644 index 856baadd74..0000000000 --- a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from '@angular/core'; - -import { LoggerService } from '../core/logger.service'; -import { SpinnerService } from '../core/spinner/spinner.service'; - -@Component({ - selector: 'toh-heroes', - templateUrl: './heroes.component.html' -}) -export class HeroesComponent { - heroes: any[]; - - constructor( - private loggerService: LoggerService, - private spinnerService: SpinnerService - ) { } - - getHeroes() { - this.loggerService.log(`Getting heroes`); - this.spinnerService.show(); - setTimeout(() => { - this.heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } - ]; - this.loggerService.log(`We have ${HeroesComponent.length} heroes`); - this.spinnerService.hide(); - }, 2000); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts deleted file mode 100644 index dc85b06e9f..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'toh-app', - template: ` - - - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts deleted file mode 100644 index 7c9fb44182..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docplaster -// #docregion -// #docregion example -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion example -import { RouterModule } from '@angular/router'; -// #docregion example - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { CoreModule } from './core/core.module'; - -@NgModule({ - imports: [ - BrowserModule, - CoreModule, -// #enddocregion example - RouterModule.forChild([{ path: '04-12', component: AppComponent }]) -// #docregion example - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - entryComponents: [ AppComponent ] -}) -export class AppModule {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts deleted file mode 100644 index 069141bf2a..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { NgModule, Optional, SkipSelf } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { LoggerService } from './logger.service'; -import { NavComponent } from './nav/nav.component'; -import { throwIfAlreadyLoaded } from './module-import-guard'; - -@NgModule({ - imports: [ - CommonModule // we use ngFor - ], -  exports: [NavComponent], -  declarations: [NavComponent], - providers: [LoggerService] -}) -export class CoreModule { - constructor( @Optional() @SkipSelf() parentModule: CoreModule) { - throwIfAlreadyLoaded(parentModule, 'CoreModule'); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts deleted file mode 100644 index 8768b77f41..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './logger.service'; -export * from './nav/nav.component'; diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts deleted file mode 100644 index 9c7080f07a..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -@Injectable() -export class LoggerService { - log(msg: string) { - console.log(msg); - } - - error(msg: string) { - console.error(msg); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts deleted file mode 100644 index 5248b15b2e..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { - if (parentModule) { - throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`); - } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css deleted file mode 100644 index 45979c75ad..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css +++ /dev/null @@ -1,56 +0,0 @@ -/*#docregion*/ -.mdl-layout__header { - display: flex; - position: fixed; - background-color: #222; -} - -.nav-link { - padding: 0 1em; - width: 100px; - color: rgba(255,255,255,.6); - text-align: center; - text-decoration: none; -} - -.nav-link.router-link-active { - color: rgba(255,255,255, 1); -} - -.nav-link.router-link-active::after { - height: 3px; - width: 100%; - display: block; - content: " "; - bottom: 0; - left: 0; - position: inherit; - background: rgb(83,109,254); -} - -.mdl-layout__header-row { - height: 56px; - padding: 0 16px 0 72px; - padding-left: 8px; - background-color: #673AB7; - background: #0033FF; - background-color: #222; -} - -#reset-button { - position: fixed; - right: 2em; - top: 1em; -} - -@media (max-width: 480px) { - #reset-button { - display: none - } -} - -@media (max-width: 320px) { - a.nav-link { - font-size: 12px; - } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html deleted file mode 100644 index b3c7e441e0..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html +++ /dev/null @@ -1,14 +0,0 @@ - -
    -
    -

    Tour of Heroes

    -
    - -
    -
    diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts deleted file mode 100644 index 7e21016e2b..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'toh-nav', - templateUrl: './nav.component.html', - styleUrls: ['./nav.component.css'], -}) -export class NavComponent implements OnInit { - menuItems = [ - 'Heroes', - 'Villains', - 'Other' - ]; - - ngOnInit() { } - - constructor() { } -} diff --git a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html deleted file mode 100644 index 9035a4b8ff..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html +++ /dev/null @@ -1,12 +0,0 @@ - -
    - - - -
      -
    • - {{hero.name}} -
      • -
    - -
    diff --git a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts deleted file mode 100644 index f84b16c140..0000000000 --- a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component } from '@angular/core'; - -import { LoggerService } from '../core/logger.service'; - -@Component({ - selector: 'toh-heroes', - templateUrl: './heroes.component.html' -}) -export class HeroesComponent { - heroes: any[]; - - constructor(private loggerService: LoggerService) { } - - getHeroes() { - this.loggerService.log(`Getting heroes`); - this.heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } - ]; - this.loggerService.log(`We have ${HeroesComponent.length} heroes`); - } -} diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.component.html b/docs_app/content/examples/styleguide/src/05-02/app/app.component.html deleted file mode 100644 index 607d068557..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts deleted file mode 100644 index 7c9f37919f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts deleted file mode 100644 index 1c458e2ca1..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-02', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index e48d41f721..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docplaster -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - selector: 'tohHeroButton', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html deleted file mode 100644 index 9ad67e50ac..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index c90c966f1a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts deleted file mode 100644 index 6bb67c5670..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button.component'; diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts deleted file mode 100644 index 2334d49c9a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button'; diff --git a/docs_app/content/examples/styleguide/src/05-02/app/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-02/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html deleted file mode 100644 index 91bdbe403c..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html +++ /dev/null @@ -1,4 +0,0 @@ - - - -
    diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.html b/docs_app/content/examples/styleguide/src/05-03/app/app.component.html deleted file mode 100644 index 607d068557..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts deleted file mode 100644 index 7c9f37919f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts deleted file mode 100644 index 1b754e3ee5..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-03', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index 74f5c36339..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - selector: '[tohHeroButton]', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html deleted file mode 100644 index 9ad67e50ac..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index c90c966f1a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts deleted file mode 100644 index 6bb67c5670..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button.component'; diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts deleted file mode 100644 index 2334d49c9a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button'; diff --git a/docs_app/content/examples/styleguide/src/05-03/app/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-03/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts deleted file mode 100644 index 0e43893f7f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts deleted file mode 100644 index 07f97cc6e4..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes'; -import { HeroService } from './heroes/shared'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-04', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroesComponent - ], - exports: [ AppComponent ], - providers: [ HeroService ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts deleted file mode 100644 index 8bce611048..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Hero, HeroService } from './shared'; - -// #docregion example -/* avoid */ - -@Component({ - selector: 'toh-heroes', - template: ` -
    -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    -
    -

    {{selectedHero.name | uppercase}} is my hero

    -
    -
    - `, - styles: [` - .heroes { - margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; - } - .heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; - } - .heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; - } - `] -}) -export class HeroesComponent implements OnInit { - heroes: Observable; - selectedHero: Hero; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroes = this.heroService.getHeroes(); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css deleted file mode 100644 index 82f0c1d0ab..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css +++ /dev/null @@ -1,28 +0,0 @@ -/* #docregion */ -.heroes { - margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; -} -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html deleted file mode 100644 index bab05ceb2b..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html +++ /dev/null @@ -1,12 +0,0 @@ - -
    -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    -
    -

    {{selectedHero.name | uppercase}} is my hero

    -
    -
    diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts deleted file mode 100644 index b85c5b70ab..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs'; - -import { Hero, HeroService } from './shared'; - -// #docregion example -@Component({ - selector: 'toh-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - heroes: Observable; - selectedHero: Hero; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroes = this.heroService.getHeroes(); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts deleted file mode 100644 index a8d7f1d422..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './heroes.component'; diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts deleted file mode 100644 index a12fdf487e..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Injectable } from '@angular/core'; -import { Http } from '@angular/http'; - -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -import { Hero } from './hero.model'; - -@Injectable() -export class HeroService { - - constructor(private http: Http) {} - - getHeroes(): Observable { - return this.http.get('api/heroes').pipe( - map(resp => resp.json().data as Hero[]) - ); - } -} diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts deleted file mode 100644 index dbb150d3f8..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero.model'; -export * from './hero.service'; diff --git a/docs_app/content/examples/styleguide/src/05-04/app/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-04/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts deleted file mode 100644 index dac40205c9..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts deleted file mode 100644 index 5177b2cc64..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-12', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index 8f393ddd32..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, EventEmitter } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - selector: 'toh-hero-button', - template: ``, - inputs: [ - 'label' - ], - outputs: [ - 'change' - ] -}) -export class HeroButtonComponent { - change = new EventEmitter(); - label: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index b299740765..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -// #docregion example -@Component({ - selector: 'toh-hero-button', - template: `` -}) -export class HeroButtonComponent { - @Output() change = new EventEmitter(); - @Input() label: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts deleted file mode 100644 index 6bb67c5670..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button.component'; diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts deleted file mode 100644 index 2334d49c9a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button'; diff --git a/docs_app/content/examples/styleguide/src/05-12/app/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-12/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html deleted file mode 100644 index 0a263a6a95..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.html b/docs_app/content/examples/styleguide/src/05-13/app/app.component.html deleted file mode 100644 index 3cd94ca772..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - -

    The Great Bombasto

    diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts deleted file mode 100644 index 7c9f37919f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts deleted file mode 100644 index 7ebe91dbbc..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroButtonComponent, HeroHighlightDirective } from './heroes'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-13', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent, HeroHighlightDirective - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index 4e67a14113..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -// #docregion example -/* avoid pointless aliasing */ - -@Component({ - selector: 'toh-hero-button', - template: `` -}) -export class HeroButtonComponent { - // Pointless aliases - @Output('changeEvent') change = new EventEmitter(); - @Input('labelAttribute') label: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index af6e7d46b7..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -// #docregion example -@Component({ - selector: 'toh-hero-button', - template: `` -}) -export class HeroButtonComponent { - // No aliases - @Output() change = new EventEmitter(); - @Input() label: string; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts deleted file mode 100644 index 6bb67c5670..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button.component'; diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts deleted file mode 100644 index 737af31f4f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; - -@Directive({ selector: '[heroHighlight]' }) -export class HeroHighlightDirective implements OnChanges { - - // Aliased because `color` is a better property name than `heroHighlight` - @Input('heroHighlight') color: string; - - constructor(private el: ElementRef) {} - - ngOnChanges() { - this.el.nativeElement.style.backgroundColor = this.color || 'yellow'; - } -} diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts deleted file mode 100644 index 565f46cf4f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero-button'; -export * from './hero-highlight.directive'; diff --git a/docs_app/content/examples/styleguide/src/05-13/app/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-13/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts deleted file mode 100644 index 8ed6da4c82..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: `` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts deleted file mode 100644 index 0b294573d2..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { ToastComponent } from './shared'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '05-14', component: AppComponent }]) - ], - declarations: [ - AppComponent, - ToastComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-14/app/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/index.ts deleted file mode 100644 index ebe5c92f03..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts deleted file mode 100644 index 7ff6d415e7..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './toast'; diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts deleted file mode 100644 index 6502de796e..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './toast.component'; diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts deleted file mode 100644 index 037ff2c8b5..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts +++ /dev/null @@ -1,40 +0,0 @@ -// #docregion -import { OnInit } from '@angular/core'; -// #docregion example -/* avoid */ - -export class ToastComponent implements OnInit { - - private defaults = { - title: '', - message: 'May the Force be with you' - }; - message: string; - title: string; - private toastElement: any; - - ngOnInit() { - this.toastElement = document.getElementById('toh-toast'); - } - - // private methods - private hide() { - this.toastElement.style.opacity = 0; - window.setTimeout(() => this.toastElement.style.zIndex = 0, 400); - } - - activate(message = this.defaults.message, title = this.defaults.title) { - this.title = title; - this.message = message; - this.show(); - } - - private show() { - console.log(this.message); - this.toastElement.style.opacity = 1; - this.toastElement.style.zIndex = 9999; - - window.setTimeout(() => this.hide(), 2500); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts deleted file mode 100644 index d7b8ea4af0..0000000000 --- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'toh-toast', - template: `...` -}) -// #docregion example -export class ToastComponent implements OnInit { - // public properties - message: string; - title: string; - - // private fields - private defaults = { - title: '', - message: 'May the Force be with you' - }; - private toastElement: any; - - // public methods - activate(message = this.defaults.message, title = this.defaults.title) { - this.title = title; - this.message = message; - this.show(); - } - - ngOnInit() { - this.toastElement = document.getElementById('toh-toast'); - } - - // private methods - private hide() { - this.toastElement.style.opacity = 0; - window.setTimeout(() => this.toastElement.style.zIndex = 0, 400); - } - - private show() { - console.log(this.message); - this.toastElement.style.opacity = 1; - this.toastElement.style.zIndex = 9999; - window.setTimeout(() => this.hide(), 2500); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts deleted file mode 100644 index 91b569b1e7..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -import { HeroService } from './heroes'; - -@Component({ - selector: 'sg-app', - template: '', - providers: [HeroService] -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts deleted file mode 100644 index 9bd4b8c9a2..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroListComponent } from './heroes'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-15', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroListComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts deleted file mode 100644 index 8f9334b468..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docregion -/* avoid */ - -import { OnInit } from '@angular/core'; -import { Http, Response } from '@angular/http'; - -import { Observable } from 'rxjs'; -import { catchError, finalize, map } from 'rxjs/operators'; - -import { Hero } from '../shared/hero.model'; - -const heroesUrl = 'http://angular.io'; - -export class HeroListComponent implements OnInit { - heroes: Hero[]; - constructor(private http: Http) {} - getHeroes() { - this.heroes = []; - this.http.get(heroesUrl).pipe( - map((response: Response) => response.json().data), - catchError(this.catchBadResponse), - finalize(() => this.hideSpinner()) - ).subscribe((heroes: Hero[]) => this.heroes = heroes); - } - ngOnInit() { - this.getHeroes(); - } - - private catchBadResponse(err: any, source: Observable) { - // log and handle the exception - return new Observable(); - } - - private hideSpinner() { - // hide the spinner - } -} diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts deleted file mode 100644 index 1fdb893c13..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion example -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from '../shared'; - -@Component({ - selector: 'toh-hero-list', - template: `...` -}) -export class HeroListComponent implements OnInit { - heroes: Hero[]; - constructor(private heroService: HeroService) {} - getHeroes() { - this.heroes = []; - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } - ngOnInit() { - this.getHeroes(); - } -} -// #enddocregion example - diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts deleted file mode 100644 index c4bcb3278e..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-list.component'; diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts deleted file mode 100644 index f1112f1c7c..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero-list'; -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts deleted file mode 100644 index 3f8e476766..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { of } from 'rxjs'; - -import { Hero } from './hero.model'; - -@Injectable() -export class HeroService { - getHeroes() { - let heroes: Hero[] = []; - return of(heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts deleted file mode 100644 index 27516fdedd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './hero.model'; -export * from './hero.service'; diff --git a/docs_app/content/examples/styleguide/src/05-15/app/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-15/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html deleted file mode 100644 index 2c0cea58e2..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.html b/docs_app/content/examples/styleguide/src/05-16/app/app.component.html deleted file mode 100644 index 4883a6940a..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts deleted file mode 100644 index 7c9f37919f..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts deleted file mode 100644 index c3fb36f8ac..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroComponent } from './heroes'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-16', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts deleted file mode 100644 index 823aa2e1c7..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component, EventEmitter, Output } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - selector: 'toh-hero', - template: `...` -}) -export class HeroComponent { - @Output() onSavedTheDay = new EventEmitter(); -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts deleted file mode 100644 index bbd4a4b5f3..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component, EventEmitter, Output } from '@angular/core'; - -@Component({ - selector: 'toh-hero', - template: `...` -}) -// #docregion example -export class HeroComponent { - @Output() savedTheDay = new EventEmitter(); -} -// #enddocregion example - - diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts deleted file mode 100644 index 084f36d703..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero.component'; diff --git a/docs_app/content/examples/styleguide/src/05-16/app/index.ts b/docs_app/content/examples/styleguide/src/05-16/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-16/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts deleted file mode 100644 index 86728b8b80..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts deleted file mode 100644 index e850d80ae3..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroComponent, HeroListComponent } from './heroes'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '05-17', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroComponent, - HeroListComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts deleted file mode 100644 index f007512949..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Hero } from '../shared/hero.model'; -// #docregion example -/* avoid */ - -@Component({ - selector: 'toh-hero-list', - template: ` -
    - Our list of heroes: - - - Total powers: {{totalPowers}}
    - Average power: {{totalPowers / heroes.length}} -
    - ` -}) -export class HeroListComponent { - heroes: Hero[]; - totalPowers: number; -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts deleted file mode 100644 index 5f18cc5b0c..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -import { Hero } from '../shared/hero.model'; - -// #docregion example -@Component({ - selector: 'toh-hero-list', - template: ` -
    - Our list of heroes: - - - Total powers: {{totalPowers}}
    - Average power: {{avgPower}} -
    - ` -}) -export class HeroListComponent { - heroes: Hero[]; - totalPowers: number; - - // #enddocregion example - // testing harness - constructor() { - this.heroes = []; - } - - // #docregion example - get avgPower() { - return this.totalPowers / this.heroes.length; - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts deleted file mode 100644 index c4bcb3278e..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-list.component'; diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts deleted file mode 100644 index 334f836a7d..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Hero } from '../shared/hero.model'; - -@Component({ - selector: 'toh-hero', - template: `...` -}) -export class HeroComponent { - @Input() hero: Hero; -} - - diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts deleted file mode 100644 index 084f36d703..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero.component'; diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts deleted file mode 100644 index dcf3e79bd3..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './hero'; -export * from './hero-list'; -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts deleted file mode 100644 index 0dceb684c4..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero.model'; diff --git a/docs_app/content/examples/styleguide/src/05-17/app/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/05-17/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.component.html b/docs_app/content/examples/styleguide/src/06-01/app/app.component.html deleted file mode 100644 index 2ccf87d0f5..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ - -
    Bombasta
    diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts deleted file mode 100644 index 7c9f37919f..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts deleted file mode 100644 index 318cd306d7..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HighlightDirective } from './shared'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '06-01', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HighlightDirective - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/06-01/app/index.ts b/docs_app/content/examples/styleguide/src/06-01/app/index.ts deleted file mode 100644 index ebe5c92f03..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts b/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts deleted file mode 100644 index 991a6c5d25..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Directive, HostListener } from '@angular/core'; - -// #docregion example -@Directive({ - selector: '[tohHighlight]' -}) -export class HighlightDirective { - @HostListener('mouseover') onMouseEnter() { - // do highlight work - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts b/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts deleted file mode 100644 index 105a035680..0000000000 --- a/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './highlight.directive'; diff --git a/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts deleted file mode 100644 index 0d0a7d107b..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: ` - - ` -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts deleted file mode 100644 index b19f3fdc00..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { ValidatorDirective, Validator2Directive } from './shared'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '06-03', component: AppComponent }]) - ], - declarations: [ - AppComponent, - ValidatorDirective, Validator2Directive - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/06-03/app/index.ts b/docs_app/content/examples/styleguide/src/06-03/app/index.ts deleted file mode 100644 index ebe5c92f03..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './shared'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts deleted file mode 100644 index ba25e4c458..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './validator.directive'; -export * from './validator2.directive'; diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts deleted file mode 100644 index d9e32c017f..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Directive, HostBinding, HostListener } from '@angular/core'; - -@Directive({ - selector: '[tohValidator]' -}) -export class ValidatorDirective { - @HostBinding('attr.role') role = 'button'; - @HostListener('mouseenter') onMouseEnter() { - // do work - } -} diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts deleted file mode 100644 index 05a0f9f07f..0000000000 --- a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Directive } from '@angular/core'; - -@Directive({ - selector: '[tohValidator2]', - host: { - '[attr.role]': 'role', - '(mouseenter)': 'onMouseEnter()' - } -}) -export class Validator2Directive { - role = 'button'; - onMouseEnter() { - // do work - } -} diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.component.html b/docs_app/content/examples/styleguide/src/07-01/app/app.component.html deleted file mode 100644 index 3c05329f3f..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/app.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
      -
    • - {{hero.name}} -
      • -
    diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts deleted file mode 100644 index 354b0ec303..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './heroes'; - -@Component({ - selector: 'sg-app', - templateUrl: './app.component.html', - providers: [HeroService] -}) -export class AppComponent implements OnInit { - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts deleted file mode 100644 index 0077500dea..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '07-01', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts deleted file mode 100644 index b44a72967e..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { map } from 'rxjs/operators'; - -import { Hero } from './hero.model'; - -@Injectable() -// #docregion example -export class HeroService { - constructor(private http: Http) { } - - getHeroes() { - return this.http.get('api/heroes').pipe( - map((response: Response) => response.json())); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts deleted file mode 100644 index dbb150d3f8..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero.model'; -export * from './hero.service'; diff --git a/docs_app/content/examples/styleguide/src/07-01/app/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/07-01/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts deleted file mode 100644 index 224ab34619..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { HeroService } from './heroes'; - -@Component({ - selector: 'toh-app', - template: ` - - `, -}) -export class AppComponent {} diff --git a/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts deleted file mode 100644 index 8ba06d22be..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroListComponent } from './heroes'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '07-03', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroListComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts deleted file mode 100644 index cf9bb19243..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from '../shared'; - -@Component({ - selector: 'toh-heroes', - template: ` - 
    {{heroes | json}}
    - ` -}) -export class HeroListComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts deleted file mode 100644 index c4bcb3278e..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-list.component'; diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts deleted file mode 100644 index f1112f1c7c..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './hero-list'; -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts deleted file mode 100644 index d3d8857caa..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { Observable, of } from 'rxjs'; - -import { Hero } from './hero.model'; - -@Injectable({ - providedIn: 'root', -}) -export class HeroService { - getHeroes() { - let heroes: Hero[] = []; - return of(heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts deleted file mode 100644 index 27516fdedd..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -export * from './hero.model'; -export * from './hero.service'; diff --git a/docs_app/content/examples/styleguide/src/07-03/app/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/07-03/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts deleted file mode 100644 index b0bc9677fe..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { HeroArena, HeroService, Hero } from './heroes'; - -@Component({ - selector: 'toh-app', - template: '
    {{heroes | json}}
    ', - providers: [HeroArena, HeroService] -}) -export class AppComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroArena: HeroArena) { } - - ngOnInit() { - this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts deleted file mode 100644 index 71c515c9c9..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - RouterModule.forChild([{ path: '07-04', component: AppComponent }]) - ], - declarations: [ - AppComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts deleted file mode 100644 index 698fa65239..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Inject } from '@angular/core'; -import { Http } from '@angular/http'; - -import { HeroService } from './hero.service'; -// #docregion example -/* avoid */ - -export class HeroArena { - constructor( - @Inject(HeroService) private heroService: HeroService, - @Inject(Http) private http: Http) {} -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts deleted file mode 100644 index 22392ab4fd..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; -import { Http } from '@angular/http'; - -import { HeroService } from './hero.service'; - -// #docregion example -@Injectable() -export class HeroArena { - constructor( - private heroService: HeroService, - private http: Http) {} - // #enddocregion example - // test harness - getParticipants() { - return this.heroService.getHeroes(); - } - // #docregion example -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts deleted file mode 100644 index 3f8e476766..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; - -import { of } from 'rxjs'; - -import { Hero } from './hero.model'; - -@Injectable() -export class HeroService { - getHeroes() { - let heroes: Hero[] = []; - return of(heroes); - } -} diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts deleted file mode 100644 index e8ba54b540..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// #docregion -export * from './hero.model'; -export * from './hero.service'; -export * from './hero-arena.service'; diff --git a/docs_app/content/examples/styleguide/src/07-04/app/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/07-04/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts deleted file mode 100644 index ebc904f722..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'sg-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts deleted file mode 100644 index 5872e801d6..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AppComponent } from './app.component'; -import { HeroButtonComponent } from './heroes'; - -@NgModule({ - imports: [ - RouterModule.forChild([{ path: '09-01', component: AppComponent }]) - ], - declarations: [ - AppComponent, - HeroButtonComponent - ], - exports: [ AppComponent ] -}) -export class AppModule {} diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts deleted file mode 100644 index c3da79f741..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './shared'; diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index 7dc42c2f40..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - selector: 'toh-hero-button', - template: `` -}) -export class HeroButtonComponent implements OnInit { - ngOnInit() { - console.log('The component is initialized'); - } -} -// #enddocregion example diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts deleted file mode 100644 index 6bb67c5670..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button.component'; diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts deleted file mode 100644 index 2334d49c9a..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './hero-button'; diff --git a/docs_app/content/examples/styleguide/src/09-01/app/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/index.ts deleted file mode 100644 index fe8300f1dd..0000000000 --- a/docs_app/content/examples/styleguide/src/09-01/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './heroes'; -export * from './app.component'; diff --git a/docs_app/content/examples/styleguide/src/app/app.component.html b/docs_app/content/examples/styleguide/src/app/app.component.html deleted file mode 100644 index 0680b43f9c..0000000000 --- a/docs_app/content/examples/styleguide/src/app/app.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs_app/content/examples/styleguide/src/app/app.component.ts b/docs_app/content/examples/styleguide/src/app/app.component.ts deleted file mode 100644 index 968036cb8c..0000000000 --- a/docs_app/content/examples/styleguide/src/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/styleguide/src/app/app.module.ts b/docs_app/content/examples/styleguide/src/app/app.module.ts deleted file mode 100644 index 1e974baf5f..0000000000 --- a/docs_app/content/examples/styleguide/src/app/app.module.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { HttpModule } from '@angular/http'; -import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; - -import { RouterModule } from '@angular/router'; - -import { HashLocationStrategy, - LocationStrategy } from '@angular/common'; - -import { HeroData } from '../app/hero-data'; -import { AppComponent } from '../app/app.component'; - -import * as s0101 from '../01-01/app/app.module'; -import * as s0205 from '../02-05/app/app.module'; -import * as s0207 from '../02-07/app/app.module'; -import * as s0208 from '../02-08/app/app.module'; -import * as s0301 from '../03-01/app/app.module'; -import * as s0302 from '../03-02/app/app.module'; -import * as s0303 from '../03-03/app/app.module'; -import * as s0304 from '../03-04/app/app.module'; -import * as s0306 from '../03-06/app/app.module'; -import * as s0408 from '../04-08/app/app.module'; -import * as s0410 from '../04-10/app/app.module'; -import * as s0411 from '../04-11/app/app.module'; -import * as s0412 from '../04-12/app/app.module'; -import * as s0502 from '../05-02/app/app.module'; -import * as s0503 from '../05-03/app/app.module'; -import * as s0504 from '../05-04/app/app.module'; -import * as s0512 from '../05-12/app/app.module'; -import * as s0513 from '../05-13/app/app.module'; -import * as s0514 from '../05-14/app/app.module'; -import * as s0515 from '../05-15/app/app.module'; -import * as s0516 from '../05-16/app/app.module'; -import * as s0517 from '../05-17/app/app.module'; -import * as s0601 from '../06-01/app/app.module'; -import * as s0603 from '../06-03/app/app.module'; -import * as s0701 from '../07-01/app/app.module'; -import * as s0703 from '../07-03/app/app.module'; -import * as s0704 from '../07-04/app/app.module'; -import * as s0901 from '../09-01/app/app.module'; - -@NgModule({ - imports: [ - BrowserModule, - HttpModule, - InMemoryWebApiModule.forRoot(HeroData), - - s0101.AppModule, - s0205.AppModule, - s0207.AppModule, - s0208.AppModule, - s0301.AppModule, - s0302.AppModule, - s0303.AppModule, - s0304.AppModule, - s0306.AppModule, - s0408.AppModule, - s0410.AppModule, - s0411.AppModule, - s0412.AppModule, - s0502.AppModule, - s0503.AppModule, - s0504.AppModule, - s0512.AppModule, - s0513.AppModule, - s0514.AppModule, - s0515.AppModule, - s0516.AppModule, - s0517.AppModule, - s0601.AppModule, - s0603.AppModule, - s0701.AppModule, - s0703.AppModule, - s0704.AppModule, - s0901.AppModule, - - RouterModule.forRoot([ - { path: '', redirectTo: '/01-01', pathMatch: 'full' } - ], {/* enableTracing: true */}), - ], - providers: [ - { provide: LocationStrategy, useClass: HashLocationStrategy } - ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/styleguide/src/app/app.routes.ts b/docs_app/content/examples/styleguide/src/app/app.routes.ts deleted file mode 100644 index bce6b4df06..0000000000 --- a/docs_app/content/examples/styleguide/src/app/app.routes.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Routes } from '@angular/router'; - -import { AppComponent as S0101 } from '../01-01/app'; - -export const routes: Routes = [ - { path: '', redirectTo: '/01-01', pathMatch: 'full' }, - { path: '01-01', component: S0101 }, -]; diff --git a/docs_app/content/examples/styleguide/src/app/hero-data.ts b/docs_app/content/examples/styleguide/src/app/hero-data.ts deleted file mode 100644 index f3e6feb91c..0000000000 --- a/docs_app/content/examples/styleguide/src/app/hero-data.ts +++ /dev/null @@ -1,11 +0,0 @@ -export class HeroData { - createDb() { - let heroes = [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } - ]; - return {heroes}; - } -} diff --git a/docs_app/content/examples/styleguide/src/index.html b/docs_app/content/examples/styleguide/src/index.html deleted file mode 100644 index ba0335c7e7..0000000000 --- a/docs_app/content/examples/styleguide/src/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - Style Guide Sample - - - - - - - - - - diff --git a/docs_app/content/examples/styleguide/src/main.ts b/docs_app/content/examples/styleguide/src/main.ts deleted file mode 100644 index 049f9792a4..0000000000 --- a/docs_app/content/examples/styleguide/src/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; - - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts b/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts deleted file mode 100644 index 71f1c58165..0000000000 --- a/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -// Not yet complete -describe('Template Syntax', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should be able to use interpolation with a hero', function () { - let heroInterEle = element.all(by.css('h2+p')).get(0); - expect(heroInterEle.getText()).toEqual('My current hero is Hercules'); - }); - - it('should be able to use interpolation with a calculation', function () { - let theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of')); - expect(theSumEles.count()).toBe(2); - expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2'); - expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4'); - }); - - it('should be able to use class binding syntax', function () { - let specialEle = element(by.cssContainingText('div', 'Special')); - expect(specialEle.getAttribute('class')).toMatch('special'); - }); - - it('should be able to use style binding syntax', function () { - let specialButtonEle = element(by.cssContainingText('div.special~button', 'button')); - expect(specialButtonEle.getAttribute('style')).toMatch('color: red'); - }); - - it('should two-way bind to sizer', async () => { - let div = element(by.css('div#two-way-1')); - let incButton = div.element(by.buttonText('+')); - let input = div.element(by.css('input')); - let initSize = await input.getAttribute('value'); - incButton.click(); - expect(input.getAttribute('value')).toEqual((+initSize + 1).toString()); - }); -}); - diff --git a/docs_app/content/examples/template-syntax/example-config.json b/docs_app/content/examples/template-syntax/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.css b/docs_app/content/examples/template-syntax/src/app/app.component.css deleted file mode 100644 index 23f9667623..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/app.component.css +++ /dev/null @@ -1,17 +0,0 @@ -a.to-toc { margin: 30px 0; } -button { font-size: 100%; margin: 0 2px; } -div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0} -#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;} -img {height: 100px;} -.box {border: 1px solid black; padding: 6px; max-width: 450px;} -.child-div {margin-left: 1em; font-weight: normal} -.context {margin-left: 1em;} -.hidden {display: none} -.parent-div {margin-top: 1em; font-weight: bold} -.special {font-weight:bold; font-size: x-large} -.bad {color: red;} -.saveable {color: limegreen;} -.curly, .modified {font-family: "Brush Script MT"} -.toe {margin-left: 1em; font-style: italic;} -little-hero {color:blue; font-size: smaller; background-color: Turquoise } -.to-toc {margin-top: 10px; display: block} diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.html b/docs_app/content/examples/template-syntax/src/app/app.component.html deleted file mode 100644 index fc5b36d35a..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/app.component.html +++ /dev/null @@ -1,859 +0,0 @@ - - -

    Template Syntax

    -Interpolation
    -Expression context
    -Statement context
    -Mental Model
    -Buttons
    -Properties vs. Attributes
    -
    -Property Binding
    - -
    -Event Binding
    -Two-way Binding
    -
    -
    Directives
    - -
    -Template reference variables
    -Inputs and outputs
    -Pipes
    -Safe navigation operator ?.
    -Non-null assertion operator !.
    -Enums
    - - -

    Interpolation

    - - -

    My current hero is {{currentHero.name}}

    - - - -

    - {{title}} - -

    - - - - -

    The sum of 1 + 1 is {{1 + 1}}

    - - - - -

    The sum of 1 + 1 is not {{1 + 1 + getVal()}}

    - - -top - -

    Expression context

    - -

    Component expression context ({{title}}, [hidden]="isUnchanged")

    -
    - - {{title}} - changed - -
    - - -

    Template input variable expression context (let hero)

    - - - -
    {{hero.name}}
    - -     - -

    Template reference variable expression context (#heroInput)

    -
    - Type something: - - {{heroInput.value}} - -
    - -top - -

    Statement context

    - -

    Component statement context ( (click)="onSave() ) -

    - - - -
    - -

    Template $event statement context

    -
    - - - -
    - -

    Template input variable statement context (let hero)

    - -
    - - - -
    - -

    Template reference variable statement context (#heroForm)

    -
    - -
    ...
    - -
    - -top - - -

    New Mental Model

    - - - - -
    Mental Model
    - - - -

    - -
    - - -
    Mental Model
    - - - -
    -

    - -
    - - - - -
    -

    - -
    - - - -
    - -
    -

    - - - - -
    click me
    - -{{clicked}} -

    - -
    - Hero Name: - - - - {{name}} -
    -

    - - - - -

    - - -
    Special
    - -

    - - - - -top - - -

    Property vs. Attribute (img examples)

    - - - -

    - - - - - -top - - -

    Buttons

    - - - - -

    - - -

    - - - -top - - -

    Property Binding

    - - - - - - - - -
    [ngClass] binding to the classes property
    - - - - - - - - - - - -
    - - - -
    - - - - - -

    is the interpolated image.

    -

    is the property bound image.

    - -

    "{{title}}" is the interpolated title.

    -

    "" is the property bound title.

    - - - - -

    "{{evilTitle}}" is the interpolated evil title.

    -

    "" is the property bound evil title.

    - - -top - - -

    Attribute Binding

    - - - - - - - - - - -
    One-Two
    FiveSix
    - - -
    - - - - -

    - - -
    - - - - - - - -
    - -top - - -

    Class Binding

    - - - -
    Bad curly special
    - - - - -
    Bad curly
    - - - - - -
    The class binding is special
    - - - -
    This one is not so special
    - - -
    This class binding is special too
    - -top - - -

    Style Binding

    - - - - - - - - - - - -top - - -

    Event Binding

    - - - - - - - - - -
    - - - -
    click with myClick
    - - -{{clickMessage}} -
    - - - - - - -
    - - - - - -
    Click me -
    Click me too!
    -
    - - - - -
    - -
    - - - - -
    - -
    - - -top - -

    Two-way Binding

    -
    - - -
    Resizable Text
    - - -
    -
    -
    -

    De-sugared two-way binding

    - - - -
    - -top - - -

    NgModel (two-way) Binding

    - -

    Result: {{currentHero.name}}

    - - - - -without NgModel -
    - - - -[(ngModel)] -
    - - - -bindon-ngModel -
    - - - -(ngModelChange)="...name=$event" -
    - - - -(ngModelChange)="setUppercaseName($event)" - -top - - -

    NgClass Binding

    - -

    currentClasses is {{currentClasses | json}}

    - -
    This div is initially saveable, unchanged, and special
    - - - -
    - | - | - - -

    -
    - This div should be {{ canSave ? "": "not"}} saveable, - {{ isUnchanged ? "unchanged" : "modified" }} and, - {{ isSpecial ? "": "not"}} special after clicking "Refresh".
    -

    - -
    This div is special
    - -
    Bad curly special
    -
    Curly special
    - -top - - -

    NgStyle Binding

    - - -
    - This div is x-large or smaller. -
    - - -

    [ngStyle] binding to currentStyles - CSS property names

    -

    currentStyles is {{currentStyles | json}}

    - -
    - This div is initially italic, normal weight, and extra large (24px). -
    - - - -
    - | - | - - -

    -
    - This div should be {{ canSave ? "italic": "plain"}}, - {{ isUnchanged ? "normal weight" : "bold" }} and, - {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
    - -top - - -

    NgIf Binding

    - - - - - - -
    Hello, {{currentHero.name}}
    -
    Hello, {{nullHero.name}}
    - - - - -Add {{currentHero.name}} with template - - -
    Hero Detail removed from DOM (via template) because isActive is false
    - - - - - - -
    Show with class
    -
    Hide with class
    - - - - -
    Show with style
    -
    Hide with style
    - - -top - - -

    NgFor Binding

    - -
    - -
    {{hero.name}}
    - -
    -
    - -
    - - - - -
    - -top - -

    *ngFor with index

    -

    with semi-colon separator

    -
    - -
    {{i + 1}} - {{hero.name}}
    - -
    - -

    with comma separator

    -
    - -
    {{i + 1}} - {{hero.name}}
    -
    - -top - -

    *ngFor trackBy

    - - - - -

    without trackBy

    -
    -
    ({{hero.id}}) {{hero.name}}
    - -
    - Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy -
    -
    - -

    with trackBy

    -
    -
    ({{hero.id}}) {{hero.name}}
    - -
    - Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy -
    -
    - -


    - -

    with trackBy and semi-colon separator

    -
    - -
    - ({{hero.id}}) {{hero.name}} -
    - -
    - -

    with trackBy and comma separator

    -
    -
    ({{hero.id}}) {{hero.name}}
    -
    - -

    with trackBy and space separator

    -
    -
    ({{hero.id}}) {{hero.name}}
    -
    - -

    with generic trackById function

    -
    -
    ({{hero.id}}) {{hero.name}}
    -
    - -top - - -

    NgSwitch Binding

    - -

    Pick your favorite hero

    -
    - -
    - - -
    - - - - - -
    Are you as confused as {{currentHero.name}}?
    - - - -
    - - -top - - -

    Template reference variables

    - - - - - - - - - - - - - - - - - - - - -

    Example Form

    - - -top - - -

    Inputs and Outputs

    - - - - - - - - - - - -
    myClick2
    -{{clickMessage2}} - -top - - -

    Pipes

    - - -
    Title through uppercase pipe: {{title | uppercase}}
    - - - - -
    - Title through a pipe chain: - {{title | uppercase | lowercase}} -
    - - - - -
    Birthdate: {{currentHero?.birthdate | date:'longDate'}}
    - - - -
    {{currentHero | json}}
    - - -
    Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
    - -
    - - {{product.price | currency:'USD':true}} -
    - -top - - -

    Safe navigation operator ?.

    - -
    - - The title is {{title}} - -
    - -
    - - The current hero's name is {{currentHero?.name}} - -
    - -
    - - The current hero's name is {{currentHero.name}} - -
    - - - - - - -
    The null hero's name is {{nullHero.name}}
    - - -
    - -The null hero's name is {{nullHero && nullHero.name}} - -
    - -
    - - - The null hero's name is {{nullHero?.name}} - -
    - - -top - - -

    Non-null assertion operator !.

    - -
    - - -
    - The hero's name is {{hero!.name}} -
    - -
    - -top - - -

    $any type cast function $any( ).

    - -
    - - -
    - The hero's marker is {{$any(hero).marker}} -
    - -
    - -
    - - -
    - Undeclared members is {{$any(this).member}} -
    - -
    - -top - - - -

    Enums in binding

    - -

    - - The name of the Color.Red enum is {{Color[Color.Red]}}.
    - The current color is {{Color[color]}} and its number is {{color}}.
    - - -

    - -top diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.ts b/docs_app/content/examples/template-syntax/src/app/app.component.ts deleted file mode 100644 index b1d4e484df..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/app.component.ts +++ /dev/null @@ -1,184 +0,0 @@ -/* tslint:disable:forin member-ordering */ -// #docplaster - -import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core'; - -import { Hero } from './hero'; - -export enum Color {Red, Green, Blue}; - -/** - * Giant grab bag of stuff to drive the chapter - */ -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: [ './app.component.css' ] -}) -export class AppComponent implements AfterViewInit, OnInit { - - ngOnInit() { - this.resetHeroes(); - this.setCurrentClasses(); - this.setCurrentStyles(); - } - - ngAfterViewInit() { - // Detect effects of NgForTrackBy - trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++); - trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++); - } - - @ViewChildren('noTrackBy') heroesNoTrackBy: QueryList; - @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList; - - actionName = 'Go for it'; - badCurly = 'bad curly'; - classes = 'special'; - help = ''; - - alert(msg?: string) { window.alert(msg); } - callFax(value: string) { this.alert(`Faxing ${value} ...`); } - callPhone(value: string) { this.alert(`Calling ${value} ...`); } - canSave = true; - - changeIds() { - this.resetHeroes(); - this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++); - this.heroesWithTrackByCountReset = -1; - } - - clearTrackByCounts() { - const trackByCountReset = this.heroesWithTrackByCountReset; - this.resetHeroes(); - this.heroesNoTrackByCount = -1; - this.heroesWithTrackByCount = trackByCountReset; - this.heroIdIncrement = 1; - } - - clicked = ''; - clickMessage = ''; - clickMessage2 = ''; - - Color = Color; - color = Color.Red; - colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; } - - currentHero: Hero; - - deleteHero(hero: Hero) { - this.alert(`Delete ${hero ? hero.name : 'the hero'}.`); - } - - // #docregion evil-title - evilTitle = 'Template Syntax'; - // #enddocregion evil-title - - fontSizePx = 16; - - title = 'Template Syntax'; - - getVal(): number { return 2; } - - name: string = Hero.heroes[0].name; - hero: Hero; // defined to demonstrate template context precedence - heroes: Hero[]; - - // trackBy change counting - heroesNoTrackByCount = 0; - heroesWithTrackByCount = 0; - heroesWithTrackByCountReset = 0; - - heroIdIncrement = 1; - - // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png'; - // Public Domain terms of use: http://www.wpclipart.com/terms.html - heroImageUrl = 'assets/images/hero.png'; - // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png' - // Public Domain terms of use http://www.clker.com/disclaimer.html - villainImageUrl = 'assets/images/villain.png'; - - iconUrl = 'assets/images/ng-logo.png'; - isActive = false; - isSpecial = true; - isUnchanged = true; - - get nullHero(): Hero { return null; } - - onClickMe(event: KeyboardEvent) { - let evtMsg = event ? ' Event target class is ' + (event.target).className : ''; - this.alert('Click me.' + evtMsg); - } - - onSave(event: KeyboardEvent) { - let evtMsg = event ? ' Event target is ' + (event.target).textContent : ''; - this.alert('Saved.' + evtMsg); - if (event) { event.stopPropagation(); } - } - - onSubmit() {/* referenced but not used */} - - product = { - name: 'frimfram', - price: 42 - }; - - // updates with fresh set of cloned heroes - resetHeroes() { - this.heroes = Hero.heroes.map(hero => hero.clone()); - this.currentHero = this.heroes[0]; - this.hero = this.currentHero; - this.heroesWithTrackByCountReset = 0; - } - - setUppercaseName(name: string) { - this.currentHero.name = name.toUpperCase(); - } - - // #docregion setClasses - currentClasses: {}; - setCurrentClasses() { - // CSS classes: added/removed per current state of component properties - this.currentClasses = { - 'saveable': this.canSave, - 'modified': !this.isUnchanged, - 'special': this.isSpecial - }; - } - // #enddocregion setClasses - - // #docregion setStyles - currentStyles: {}; - setCurrentStyles() { - // CSS styles: set per current state of component properties - this.currentStyles = { - 'font-style': this.canSave ? 'italic' : 'normal', - 'font-weight': !this.isUnchanged ? 'bold' : 'normal', - 'font-size': this.isSpecial ? '24px' : '12px' - }; - } - // #enddocregion setStyles - - // #docregion trackByHeroes - trackByHeroes(index: number, hero: Hero): number { return hero.id; } - // #enddocregion trackByHeroes - - // #docregion trackById - trackById(index: number, item: any): number { return item['id']; } - // #enddocregion trackById -} - -// helper to track changes to viewChildren -function trackChanges(views: QueryList, changed: () => void) { - let oldRefs = views.toArray(); - views.changes.subscribe((changes: QueryList) => { - const changedRefs = changes.toArray(); - // Check if every changed Element is the same as old and in the same position - const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement); - if (!isSame) { - oldRefs = changedRefs; - // wait a tick because called after views are constructed - setTimeout(changed, 0); - } - }); -} diff --git a/docs_app/content/examples/template-syntax/src/app/app.module.1.ts b/docs_app/content/examples/template-syntax/src/app/app.module.1.ts deleted file mode 100644 index 8ea0d3d207..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/app.module.1.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular - -/* Other imports */ - -@NgModule({ - imports: [ - BrowserModule, - FormsModule // <--- import into the NgModule - ], - /* Other module metadata */ -}) -export class AppModule { } diff --git a/docs_app/content/examples/template-syntax/src/app/app.module.ts b/docs_app/content/examples/template-syntax/src/app/app.module.ts deleted file mode 100644 index 5c2fbed6f1..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/app.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component'; -import { ClickDirective, ClickDirective2 } from './click.directive'; -import { HeroFormComponent } from './hero-form.component'; -import { heroSwitchComponents } from './hero-switch.components'; -import { SizerComponent } from './sizer.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - BigHeroDetailComponent, - HeroDetailComponent, - HeroFormComponent, - heroSwitchComponents, - ClickDirective, - ClickDirective2, - SizerComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/template-syntax/src/app/click.directive.ts b/docs_app/content/examples/template-syntax/src/app/click.directive.ts deleted file mode 100644 index 22b63955ea..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/click.directive.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* tslint:disable use-output-property-decorator directive-class-suffix */ -// #docplaster -import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; - -@Directive({selector: '[myClick]'}) -export class ClickDirective { - // #docregion output-myClick - @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ... - // #enddocregion output-myClick - - toggle = false; - - constructor(el: ElementRef) { - el.nativeElement - .addEventListener('click', (event: Event) => { - this.toggle = !this.toggle; - this.clicks.emit(this.toggle ? 'Click!' : ''); - }); - } -} - -// #docregion output-myClick2 -@Directive({ - // #enddocregion output-myClick2 - selector: '[myClick2]', - // #docregion output-myClick2 - outputs: ['clicks:myClick'] // propertyName:alias -}) -// #enddocregion output-myClick2 -export class ClickDirective2 { - clicks = new EventEmitter(); - toggle = false; - - constructor(el: ElementRef) { - el.nativeElement - .addEventListener('click', (event: Event) => { - this.toggle = !this.toggle; - this.clicks.emit(this.toggle ? 'Click2!' : ''); - }); - } -} diff --git a/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts b/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts deleted file mode 100644 index 14cdeed0af..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* tslint:disable use-input-property-decorator use-output-property-decorator */ -// #docplaster -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -import { Hero } from './hero'; - -// #docregion input-output-2 -@Component({ -// #enddocregion input-output-2 - selector: 'app-hero-detail', - // #docregion input-output-2 - inputs: ['hero'], - outputs: ['deleteRequest'], - // #enddocregion input-output-2 - styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'], - // #docregion template-1 - template: ` -
    - - - {{prefix}} {{hero?.name}} - - -
    ` - // #enddocregion template-1 -// #docregion input-output-2 -}) -// #enddocregion input-output-2 -export class HeroDetailComponent { - hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero - // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png'; - // Public Domain terms of use: http://www.wpclipart.com/terms.html - heroImageUrl = 'assets/images/hero.png'; - lineThrough = ''; - @Input() prefix = ''; - - // #docregion deleteRequest - // This component makes a request but it can't actually delete a hero. - deleteRequest = new EventEmitter(); - - delete() { - this.deleteRequest.emit(this.hero); - // #enddocregion deleteRequest - this.lineThrough = this.lineThrough ? '' : 'line-through'; - // #docregion deleteRequest - } - // #enddocregion deleteRequest -} - -@Component({ - selector: 'app-big-hero-detail', - template: ` -
    - -
    {{hero?.name}}
    -
    Name: {{hero?.name}}
    -
    Emotion: {{hero?.emotion}}
    -
    Birthdate: {{hero?.birthdate | date:'longDate'}}
    - -
    Rate/hr: {{hero?.rate | currency:'EUR'}}
    -
    - -
    - `, - styles: [` - .detail { border: 1px solid black; padding: 4px; max-width: 450px; } - img { float: left; margin-right: 8px; height: 100px; } - `] -}) -export class BigHeroDetailComponent extends HeroDetailComponent { - - // #docregion input-output-1 - @Input() hero: Hero; - @Output() deleteRequest = new EventEmitter(); - // #enddocregion input-output-1 - - delete() { - this.deleteRequest.emit(this.hero); - } -} diff --git a/docs_app/content/examples/template-syntax/src/app/hero-form.component.html b/docs_app/content/examples/template-syntax/src/app/hero-form.component.html deleted file mode 100644 index 071aab429e..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/hero-form.component.html +++ /dev/null @@ -1,15 +0,0 @@ -
    - -
    -
    - -
    - -
    -
    - {{submitMessage}} -
    - -
    diff --git a/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts b/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts deleted file mode 100644 index 63040131ff..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, Input, ViewChild } from '@angular/core'; -import { NgForm } from '@angular/forms'; - -import { Hero } from './hero'; - -@Component({ - selector: 'app-hero-form', - templateUrl: './hero-form.component.html', - styles: [` - button { margin: 6px 0; } - #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; } - `] -}) -export class HeroFormComponent { - @Input() hero: Hero; - @ViewChild('heroForm') form: NgForm; - - private _submitMessage = ''; - - get submitMessage() { - if (!this.form.valid) { - this._submitMessage = ''; - } - return this._submitMessage; - } - - onSubmit(form: NgForm) { - this._submitMessage = 'Submitted. form value is ' + JSON.stringify(form.value); - } -} diff --git a/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts b/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts deleted file mode 100644 index d2a2dcc7cc..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -@Component({ - selector: 'app-happy-hero', - template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.` -}) -export class HappyHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-sad-hero', - template: `You like {{hero.name}}? Such a sad hero. Are you sad too?` -}) -export class SadHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-confused-hero', - template: `Are you as confused as {{hero.name}}?` -}) -export class ConfusedHeroComponent { - @Input() hero: Hero; -} - -@Component({ - selector: 'app-unknown-hero', - template: `{{message}}` -}) -export class UnknownHeroComponent { - @Input() hero: Hero; - get message() { - return this.hero && this.hero.name ? - `${this.hero.name} is strange and mysterious.` : - 'Are you feeling indecisive?'; - } -} - -export const heroSwitchComponents = - [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ]; diff --git a/docs_app/content/examples/template-syntax/src/app/hero.ts b/docs_app/content/examples/template-syntax/src/app/hero.ts deleted file mode 100644 index f8cc3b16a6..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/hero.ts +++ /dev/null @@ -1,34 +0,0 @@ -export class Hero { - static nextId = 0; - - static heroes: Hero[] = [ - new Hero( - null, - 'Hercules', - 'happy', - new Date(1970, 1, 25), - 'http://www.imdb.com/title/tt0065832/', - 325 - ), - new Hero(1, 'Mr. Nice', 'happy'), - new Hero(2, 'Narco', 'sad' ), - new Hero(3, 'Windstorm', 'confused' ), - new Hero(4, 'Magneta') - ]; - - - constructor( - public id?: number, - public name?: string, - public emotion?: string, - public birthdate?: Date, - public url?: string, - public rate = 100, - ) { - this.id = id ? id : Hero.nextId++; - } - - clone(): Hero { - return Object.assign(new Hero(), this); - } -} diff --git a/docs_app/content/examples/template-syntax/src/app/sizer.component.ts b/docs_app/content/examples/template-syntax/src/app/sizer.component.ts deleted file mode 100644 index 3cb45a77da..0000000000 --- a/docs_app/content/examples/template-syntax/src/app/sizer.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -@Component({ - selector: 'app-sizer', - template: ` -
    - - - -
    ` -}) -export class SizerComponent { - @Input() size: number | string; - @Output() sizeChange = new EventEmitter(); - - dec() { this.resize(-1); } - inc() { this.resize(+1); } - - resize(delta: number) { - this.size = Math.min(40, Math.max(8, +this.size + delta)); - this.sizeChange.emit(this.size); - } -} diff --git a/docs_app/content/examples/template-syntax/src/assets/images/hero.png b/docs_app/content/examples/template-syntax/src/assets/images/hero.png deleted file mode 100644 index 2a128ac3679a5001bf3373ac96ae841e78295ff8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7312 zcmeHs*wKOqouA{ zU5!(Sese&q#g{ZvN@rK&H6CkLuNarC!ru#0Maf$ zyfFpLbkbBNMd!2VqGcD(fMvO*CtcO4y_PZOy?N)POS5crQb)~EuJx=vp@daGhhPOUNgjkdr5jj3%s2 zA&I-AqgtK`el(#DgFC)L(Kk2yMz1a{*lu|Szjeb??4d8x`*Pbkh8Nc(eXeSA*}~7v zZXY{|DT*JnqHZdk%mtQ&yRG6ICNLewdrnBIQ2TBf)U31Q<>W@xd25$;Xq9{vCS$MK z_3DHCQrV=B1PgD28~*I>9=>=40b}?E%k)bJSE~NQS&i_^#Um+=0G%7>K}H4YSO%nsU?lrGY0)8ztudpMz9OC+ zyqNH_%^&boE`vfJ8RsG4kfcMZldz&1Ls6AGm2J}^-J~4MWT$~dgv=y!y@+4iCWsxs zwmAA8#eYzLo|V)7){izGPjW>9q#%>*>DA^pBt!k-RYtqWkz7^#jmXjepzBEJjZ=hX z(%@cQ^KGr{j!A5dMd`~cDj0R#nk)^KO1mLbDAJtQg>>aTAI5@)>YAlU)F2dIW={JQ z$Zb0y9a9A?*_|Xn)hp-k|2F1}BlzZ(6C#?pY1*<&<46=MD zDM3)-Nc}2-L-nD2x@0`L2~@%bvl|^XYi$1>IK0k|jwq9mz^6M<8H+Tq-5JZ1Djo;6 z@_$Zx9@g78oFmJkJ7r2hcc443WZ6NmBYLt1D4K4PP|}??$XAk7o91X~DlJy}N?ShN zR1os=J4%6Q!~w%cfpDF)&$LzeNxRwj)9bMsXGDPuKQM@XJuUD_h0cinTWu@27aQ;V zi$9e5C1+%$Z#6_sI#tZzzN}gjo)m>KG_>0`>guXkTQS77(aE-0A?*tSEjyxe3blX)N?!+!TJJb5i!*}?rEqilcvm1( zd0i-R;iNR3*5`07Qn&#RA=7Ba{Ufi=INZ!BIy$&ypd8#x?%JXn? z5V%sYK6?kDusjYBq}@UwI+%nq18!p;^N3Sa=*JN=w#F~@K<&{B6=&8^yy^F)lu9XzCLGp@Qn;PW@@0Ka0Nf2q{DzBRG;B~oFc ze)nT53@-+7cE(&b(k~1+0Y*_t(K~ms;2V$7=9*=yzWOs{!X1E6B#L^>vDcqftDFB3 z7Us?SZe+fpE*W1KG6dynw6YF*Mfkq_DtGnBjql61s~Vg&akXTJ7>zH_(Ss=5k)OX; z*{(owtP4rS#to0&;!t98w7+QD8;!D0iMzl0Iobd zxt_$cA(`p(yF5r7;WyIqA$O@02vML)RXs_6sS_?S`@sAt%bzJbdnu^yj&(=gC~dg2qrjIjpY$t0;5bx{x&OQf0w?bi!ud+ zc6LYQ=0o%LEdVyXOZ3Yd)pznE5#bOw3sZH61J3ZwH4A{3HLW1x!8I}ua@4TW7&)0cz~D~l0zGi8kD8Z z(IqDU2)3cMTcTu1>F=!G?hZd6K`c}}+kny9E>QyWg|nCwC5~4sr3GnNTa7uM5RGz8 zXyy~S*JRjstz^xIrfi=i&pQ2v@!s+FwqXg*0zCbC)-|||;9Lzb+WcKje4cnN`wX5} zHKp^;_zCDIfAr?12V0^ga7bH0mN;P8@@4zla}`;)%h%eB zho{nyDVU!Y!q`D>7glc1`R;tE>u^Gk^L=yZ4^!Uj;thiphE9}$RyxhE52)$uc!iai z=)}Z6Q>Mnn;BGpU1K?#&J&v%uWK|Hg{Xp65Vcmp0j#{-@&%)@nb^?f;>!sObZWS{F z&l3a?m0cI`;k7Akemr}T%97*xcdltZ8!1|9@w}qI zx2`FWB?pA^O+8-Y&fGsr6-mp?K8Q3=Apa41b-R*HtE|q5W`1vh)s9G~1p&z<7mu>yJ#TurSW&_EU3)TY{fr@N`DekjQPB?-=zHa86xv38&3n?M@eF|bfgc(gPMJx(C z6SFgQl7`C3gG#(Q_n&t?(}(d=Jky~<)84lkQBcHKU0r?s(L;HdpX#|jt+diRF>#XT zCWZ=|6v3wmpzGjE{}ohu?Hcn`N%{fGD+bLqb-nETx-&UPFgn?imNWtiv96W+;Tj~G zst*PXem{@&B;-pYd4-yOCioC+q~zavGiPUM%___R(&~22r^!oQtk{Fb&E46St>JPm5!z$tRqn(+jIw(p1tW%l<-(@nQEr(j-HaC`6jCU-<{XDNyRvRC` zd@;h}Gv&{;3bnn|E_|Vro`XHs$)6}9mM+_0RYk`u^gG@$1(suH(G*gRZ}IWJ)Ue0B zg$cCmpQb%+yE!j|?I#Df=4j6RJqV_ozK_PI@LcHltI)IVBfTnrm=zY%rVP%Y0&I^j z_Y5@)JpsfHR3G4y1KcST=)0iHv0q82wAPD~$g$p_{&gZrU=Mm5)wh0r)LQw*?iDdK zKp%W-K#YD5_Mp{z(Plx*m}Ho`?!nNo@CCw9M6HJMuk;3qP|9!NzRT|gv)Zq738msA zl?>W(!8tF_<-eZ9lb{i-n9Vtx)#u7h_AY)s9OwDx`x>>Eb-IWIC2Hag#YV?`^@XCm zT#n*uG;d0H)y4Rv#atW-zQoz}AO*8GEu&VQUoU!jM*D*u=$oq!EO%$V<9pJ|PVD&E zad1w*8Nv_~Ii>sCqcb}Bo;)!{E5R466>Jtc`R16*%R%STIzjIP<&#^0^VEIq8ZSa2 z)eui}h>Dx=;~#RfNJFkce~&F`%cPXb*hHm0#8aB`%qWe(uH03Wer|crzBb>KS z|6N?yM2m=)Q?C8)wNtd>o#tKZ&i%4c#`2(bDnnC`fh_-=w_N&nJVZ%9X;|I()6UCKd);N>R^k>ZpS_eAn#|nW%}p1?7ABy#eK`3dzB8Via(68D#rA05wos+}JDF z?~aKmBobNku<+MyDEsFGw>mC1vT$mM{9v@{7?UZZX zcjvcbqGM{2;G=OS49!w;%&71W-Kj=Xl47A|9-=cHf4xg>;GwRJSH8S|0)|2jxN4M_ z>3e$S_bDfZc_?uM;D?(g)EtZX^oDKx)D*acm=M>^ZYg*2I5xOGHJod|s1ye$^FNm{ zDte0XkC<}P4-=J@%)hV;A)!)sqC<#nTboyxtWS@3f91wr?#;MH@tmxzo+eYKE=W%IlZ@|NV^X;xv-Hm6_h&OAm!qu$4XpJLIQv#3qcf;X8 zUfJRi3wf%-;bVK!BG1+W#7yC^^N&nA4woWj-<^)af**l@mp%<^oMaqNBLaYVVg%o1 zAy_;s9dh(|TbRL%_!BiFSc*G%$tkYIv1jk>5Q}b|)%G68_mvaCGDT|*t9MC-o^k(u z;rnN+lz=^9$|gpYb;_d=z}p#R?v1VHHdB_~D2U_~49jkU4pwOgzxs{3y?9$bj%tLI zsgg)(T2JAmu~Kb%1$M4n=>Ht``|05Mu}k-Dczdh?oZx8{t!!PVkyP1;2~$`ce&P%D zOg=I`XP_!!>W)jV%QbHGDo*1Gzh6o?IQ1h1W2~iQxEky``K)dHR)`sTn6a2_KIpxjy8R+m*q(lyhkR@pu!cKmqNEO;VPTZ0z3SFZ zALjj?6{A$tITx~iwA)B3C`ib~{yxMWcA4X6IQiFVHQ&Vd5kblWFOuz)#N@~eD9%PV ztX#h3UwB$y_e~J~vErk?Z;dD2mju|!s?jHZ8L^FbR>Ot!Ar+!YTjZc~8)?kOyYwf< zrL3y+;$DY=r>~tSjf8)O0}MWeE)Y3fLoczLPa5;dO%Sr|} zhLs+f_GD|<4CZRI(wlZhay6A2yO}>B21}(@?34HI3d2!+#9^^ zWYt7ikM>#$XVtf=%Ew*2o7@<&)G&ec&2KDX4qwO`bcz(NsP%;Mnk60BMJP-OdALIw zY}hZog|I2j4Nj@UCS~!YdDadu^{`i)*E}KCRALk)QOPGx`ZZ%tMN36p95xJ2j!e-# z@7B-0Pkwd9*1Em*Taxi2d8!&36dHf@wO7(}D9e^R`q9SILRl|&x*D68%y{B?VtN&C zn6&voP1B7A9mQ9VE#oh+WAmY5rvnnMgP9l$aP&x+l9tfvtZr}Bxl}2NPnhpC{9RQ2 zQ7BNUfb40H_K2Nu`6X-P++Y!aqFTLQS5jbaYC7-1Z~A^)sKmvwGeYNK;&i5d2GJ|;V{5lR^7sB||; zPpCR3o3)>A_~4}?xHgqQkWv{V*Qx{JKh(+TWZL0D8+tu0tbr%VAe=0|3gBHpRfj(9 z?n(iH#D!a03PbsdR>UR@$0)xYGVvVIyOS;!F_QSa3)pKZg&HjFv!E@~oIC-5^5@A# zSdUTNSY}U77x`G`VVRBcARNkqB}gS&zB<_ONcWSpM~R9K;v7!?bRF$KyOwxiCBSGg zX997)Rpo<$rcWAmTjla{4g6?u@NMU2Gyb039}eiMR&EFd<>E|}((rJTjxwuPDzuHJ zcBcJa;{YH-q0%5cjK?UM`=iN-xMybs+t93lu6Sy^&A?GS_ym|8FuR3nWisg3BSP+s z&imVAz+^M(4OB4bEm^dhLo9BiW-HSfoF7pj<+`5;DGEO1AT6h3puL$G0*f^+9zYu3 zG>dYHaaM`GSq?Tw8|dKkh<~KPjmk|-S#Yxjwh@Pz>O|DF<%06}8EzUogK-jV<2NO( zHx!M@-f6%0?ff(t{?&L+2~*;YbqaG|>< zkPEETK?xTe&D-)Xh+i>|bS1PU@L(!Lomkq9is+z{R39jC#;wnnxQYmmHOjE#?u1zG z3#CP?_b;xq#a$4mu1eRWFn*hz{I}ZSz6k>_Imvw!3i}{B(_RSWSD!YXRSz%$He;ee zPdJVA^qhslBDf2yx~x4oMzj}i%N{ZxNKG~X1Wf5g zUaT|Z;dIjNCknG{f_vMm6NGi&LJu^hkDQXj{%c3s0tFcuZ%ug-lk~;0qO*O%##bmS z5xqeQyuFW887Jg-xppsXeJm+7B!q!aZ(d@`z7oQ92=<0uET600YLy-64x;e)VtqwF zKniCwS!P_d24B5vI{0Pu_21p=b3P#ak;YlBUcx|K7NjJ?N9c)qY`#r|Ez-7%zSs=} z&Ke@C!WD%zeZ4HoIK_EH@FgLLn z2@xYV@F@l!M2Q>y)9^OAg**b{QD=+X51=fj;KkrWeW{V_+!dl|^1%$!xhVYv43Kz^ z3Iq=OfHEYVyP$;=*F8@|O;Y2*)$5K@QKy`y?Xf)z)zyy36zJ?rhonegQVo}tG@L?fAKKF!H)h$NCw4r zO%cp47^s{7L;%PsiPL0)hU%n+Q2u#5fiMJ&`Lr2}U^ZdkBVyMYTjZGn77V~RM?yNZ z6~0Y+W=FMrv_`2Sh? zJm33b`cVZeL;V08r`o@VyW&k#z=XJx3BdBIXV75VX*$RcoX~%WT1W8mQ*X2<22Vx>9k^>RCCdfE=waNWIbFn-3hMgvW{M^wr#0uZ%17y z8}H84QO?47lRos+-qUvIg|Yu0Gs9G8D^4$N{bU<%$nHH55nNxQ2?TBrhUS;oeyJFE zgk1QxMA}@lqtPFL+jiaT0DPS9q;?^LcuI+GqgYCW0j&xSm@N?1DpoXF?rC5$7$ zek&Ci@#Z;R8zR0RtgeK8@=N<*cw**QG3AXeawKe`>8JI+stL!{sm#fCD3|vqnD5R* zWti1Y-OqrgUn)WQfaB}53A!@aa=_^#P!6v4=Fj2M!>`71)(P>4PDW9CpT*zH;$Q6a z@q8YKozv8^EOk52*Iax`3-*noXt@bnsJTFmJ=8t;yUWOF^x&mBEx6e%_v)vYex$Pi z2Q0h9!x{g`q;EdG{jgB>e9tA!7Mm3kwInBdGxU3Ew5;KS&fD;d3C&W z8{T-irDx5VRh5VuNiF%-xX76_YX6O)7;CFGP;sZS_AED%mlxhF*6k0;W#+oI^)-8I zER#FTkd&k~P@#S6*yo(dfHblUudx|;Psjhd%Cz1l97pYFe@^-8E9U?Ilr&ZKRBDu< Gk^c{49goZa diff --git a/docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png b/docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png deleted file mode 100644 index 1e488b1a4946d1684393920b7bca5fa3017365f6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7229 zcmZX3cQjnz_qL2~^j@Pxmmws2jZTyx`h*Z76J4CrXMX-G&&=!^_?Er}LQ{IFCM z#MY5XifDMrjCAim3cj&bKpt?bgDF0o_1Q{XzZ2fLM$!G*|9g~rs~6s$O1quERW7j0 z<|(m8P3q41J71ty33EZbhaT_l-L0j|Ac@uzV5A}g{C_6R{h)dVt9DHRNE~{LZPli* zTF;SV#0qIwxqYLlLs84qc~;Jo`<|!V%uYUITtA!`7mK}4t;^`1XLm!iVT{`>(^S^0 zV#h^v@(vttd~#NcIr_ylY8GQxn$LKpIGd2{W#FCvGM^7Y-;p8^mW-v3#>WdBc>-zV zD1SFH+)bxkDQ0IPR~${k@`;{LRlZyn1Ro1iPYN<_rl;qn`xy&XQ9rLF^)NcG7q4%{ zQA}F<4VI^M_>@5f1ytQ6ip{2=V&=!5FBvl7+F5qmFi4{S?}pCF89esF$G@$O%`N`I zx#YNBK(4sSrmzzq1hsj!oAOmaI-GHGmDH9)UE zR9Anmj=eGIL28Mb^n!@7?ZZWnd_|9v#h={<`ee<Xqgpz|lqj0!ts?V_i^Oxw6tLC_f|p7y4$jrwGSf%kM6A-qJNKC#@P_&YytaFJv2M zWhnazm8+3Xi0{#52N#p3LlnCxXWyKCrpX7fxkZxjvKKzDD=D;`*7)wWp_s!>rZ}32 z%`y-Poq=Brz=DXruIXMh`h6^^3CC+b9hIi+Twd1>?kaaJoc`E;=c0{#GH0zCJ^WE) z1aaikXo*M?ipE)FhZpqEO}iKjXWeA0mR2>yd)Jq5Ri6+(gthRJA(&?+xsD{!Mdf-S zYS^1S@Keo!O(}|+gT7w4GF5xPp@84t(zKL!DaY~MjBjJR7vuf>>nN@NdXU;Ne9!wW zfW8mUo;j9uJNhgdZ)J1*I!guoRV8|Aj{Dc)Q`Z(XCn^>Gu95_EgX0H%o&m0G{&o? zV5giVW)K<%d^ebC+osPbaKqiUpS)1Joscx}xt5b}CmWg*saVvW)-c%7Iq-5dw%fH! zc4Kd(3B2Ji_U0FJ-PTev$3j(P1sZK=bNu#g#kRo`>5XrN?8Rnw(rT;Z_gHC0nqEiZ zBaZ#=?_a0$F|_bat#)L+d&d)-*tf>dj!?x8UfRtQ=J9^G?Tv=tZ~ZqFqb62rhtW*y z1j&9=Nd}nfZlA(nS z?>+9dXuJ{!KBTXkpM2jT-@R~O zsCGEM-qv?S#KxbciF9I|r|CE5NG2>-8hOQk#re98;ia{lq>rO+KSxeJ|IHXXelnL^ z9)1(%9D`(z3#c_4$CD@n5stS-UtG*NvSv(t^d+aE=UNk3^!_%%YLfSQ-}b&u(g~x+ zb0EJ)k5mxztE#-r{PdA3m20w5{a#Mb{=sL57a`4Ds`u@H!HiCQyhBSF2j%cM>lwEr zvt?*jpf2S6wxQH;PfmM=ex45hxe}FU^tR2>=8q9x>5#l?Ygx81wn)+9J;j09DX&P0 z1gT+cBRx07hd_v_X1AODb;iB&T;tYswY5Ejbq4*?W7k9f$^bYh&uE)^U>-t2XKHF8 zHF!Eq{iqeaNDC`RO zd_oLzPe{`k7%(yNY~>lKNSjg3>RU0E%Biz#_UYd%5~2LNzKg;s`b!3o=<%WBox6&g z=%OBih*EiMB!#X*2b8MrHeyxlIa?E&qw;YJTrQ z#&IH@{MpE5KrROnHB@l5fY5R~;69-}sMWLCbr*H->T1#vEm9WWdtn8em!nDND~aU} z&U~mR!McfCd1o@WCX1xzGBw!^6*yWXfQoXTI$zOHsY4TYo#l6XLpE^hN!0Ie2gm`* zI(g!2HUSBspm|HtKg0$2kn^*Xt-dqSfVs;h)fUuPzSYb19zQS>En3LhP@{1joJA!+ zqmTHlWDN9z=;e2r`6)h#wP)4v5;0-Pqk1nw<<#?BsTfC}7K+>~yk<^;|4$6lROnr? z&8B=2iq1@SW;G*5HAIImTTw&{-zDo3`;Mc&;(k#*hTyp|hxNo|C%bOH_&lkG9uf$a zyzUFRNRi?SjD$WvBf)|q=jGnWwn~C_>wmPy8_S2h=JZ_1jdKW|jW;%aPx0#D9Qhy( zUlq)Ty)5Jou6smRVDNR)Dm|-M_^c;BNhXx-@mKH$p0txoooYU_GWr0k5SsT&x6s(F zbH{sDKSy{`97Gl2)J*a7*7O$S@aZM{3<}&_@R+iw{xLoNLl|9wNBT4K^#WW>o)i@U zR3UOt_P);8*tOdZZpBgy(eA5Kg7!?i_WaxG30rRDjQmpe^B$KRsr>1J+;J zPxNK*!rT<}W9#k+5D@VzAGP0F;%{~G1Gszl-e@?sqTZ_4G%Ot%4FqtwFLcLttI?lt zh#j5ovKSYt9GI zyuv=6G2UF-4tf=BRkPbiNsEqK1+9N>YtCD8@~yyI%{^r3tf>Df*yZqoVw(iW|DwAq zd|f&;c&_&4Cjm1f<|k=+btd#xg24_D^TapZt_kaBpO zBjgJgTGo>BM2U&QOaxYg)8QI+R8gQ4Gw-zLU^`h~bzZb_m^vDRmOR6;=BUHUavU5g zUnqJDPDq3hNM)nDUp+{3gh;^KP{-yD6x-s!9rTtFtZezsD#-C*-zYWGuoS=$j;He} zDVfmhGYkH6pJGmS@ius=R_ymjq||%Vw*nQupBs;G)!BR0!BY6K;V-YEogo!6zQ|}* z-mnRL#bx>`NR|I&OmipBk(W96M0Lks3Pcn*yWf@nZ7Lam9CiGQEAG2jzVA_6VH=G* zuj_c3mAnG|C)*_d0JXRjS0GCi216<#vZQuLMu zY|y$tl%Hwqo``UleJYUm&vU^BF0L8l>HeF)a=Vyl3nWi)??k5jdJd58^H*9Rm>s%) z!Ny^4cHML0wF~YJJqldnT>l^GX~}Zjt#OIy?uO8CA8FL+n=Njc`FT9&i54+xbjJMH z`VNpBW=ErJT_J~n_>}W21D_JM$@$)tP?~Oxi?~DO?epNd(Nwp3ROUs?jsbNTN+j(b zE1RzrUXK&~(Zd|rVEV_0*QZJ4V>PlokFA`_5A&AX<0Bb;{_ZqCnJO%$P zCYvivjkW?Gd+i>czg-34!^EH+GKm-hSzOxZS~;JRhDn{559pB5Rt@0rdu}IuYEa05 zZ%)2gK|F_&*JyD+(HR`h68)6#-TN@!jDl^L>+mmwH#hlLr&4jGk@L(EnTC?PZJo9m zD+9(v4)BhjtS_l4t~4ph%qIQZ>0c~_Jm?Jay98y>@E*@3+morfK--Fv5hj}dUPebF z^zOi>kmVT3t9B8=hUvy``wU>%eD>coWFEIq2|2~~`Z-Hp^cV_E?zTq&QG*%#gCXZ3m@yNfl>IrtPFz#vJf?6v^LLqeQnY9BX z=!E;v#GTy*DvH$SO_r1AND*k;re8FF)4|Pv=!pGqlRv1#N^<5IglJnS)k#aCO_J`C z(A-?T>amPWQjZ04vyO)!s#K)#s9U}2uRU--8^K(pR==}QufM##cT`J#u@=tIHGKWG zW^}tjZr9~{<7?ktn3!YbBHfL?xBZU#y3AYkiV7Jsn?CJcfSgZS9U2HeDg6DICcP&( zmMu;t3MR{X@OrY;_+h(y=wm*}n-qVar;CPqCbTa%YwN~cOUQNY65VlVq!d4%;oB1E zwA!OYy;!ki`YvqhE7haHap7|6Ui<+vXikdQdFL6?wGsP5)=ZbMgtWz4gXxl-#GzJ^ z!hNhEisJ;Xc_~Rt+E)krxcnx%RfM0SqJB`Vt%Hg4gp-G2j&cz5#i6oxsI!6gzp0*= zTzV~G&viMKXqZMDz_|e6i~`i&PWL3>MG1N1b|dY~*{vA%VGP@pA9=_FjV%WVgW-3~ z9>|tr(8=Zi8Ac|BA3`3f_9$3|hYZ@z34~2Fj@}&2x7woxzd=f+ z3>*05pw!^6c3q~8TWmemqCIfI?3Jfauxrz^lF(CJk@j2$!=TMnMSJryKlN(_&KZ9 z{b+RgZ6t#(?nXyxVYm~M%~Z@w|0WEk?;jVM3}l*XBt=fg1>I}Rl^H*)h2cf3nx7mJ)zZ2YK36pTVyP3bv9Fq@yY1NPjE%V5nl&yK6rSmJmkSi z&yNnm{bO=z7b8ZK?LXc*vC)o4OG!^~hS5oyJC6rm%+>CBi5HZLM;C@&NU&GbV=(z- zx(OaQ%SNyW4{3(|kRvi;ziE+--jRtf1~n?}yzqiQ_zM-O!MMnSUw-bskU{HZH^@HH z+ueQF_lse)LHK?yna$M89Ac1cn645%5Qi+UQyHUSKR}Kr<#gq~VO2UYu7=Kc3lA48 zH!FtJ_v-A+!gP0Ca&qPgUdy0Z#9-*nhu<(R!>0K^v$EkyRX!iXXn9Bcj{cTWBWjT- zFExMmpH{@e%GqE2EQSB=Yv;(I{*E1R%4*-cNjD}y-{a%pz;#!*+fZu$oHxV-{PQ#D zhaIGl=iZj6DusrY!++_a_DZ|4CIj_75?p(0_aB3XHjGHl@(zsuHmOJTvhf))5`-@L zM5Kr(JCN?y#1}I&xIAgjoM;lH$@nh$N?qFjpklkbLGxmFe7uNz(Md>?w67kVd-2qs z==%4)kzhFym|aoq@70xsih3p{zcWmx7v~ApI+v343686zZp&Q|YJax3`jv%vMmT5A zG-tyRKVe#a6sc4i;9q`$qr*yn-yI-{k#T}}U_;)%GvJAP#tbb{zm3R-7a`#7N~8w2 zv@hI;UosRj%ql|@uhDLfxawTbKh54!_?g7_JN?5LS&*%c!JMT39P_nr2;q`gb&Z5> z8>EScRMaCFZicm8{HHAWWA+K8lGy6DdZf4E+KOt$pWl8+^YueTfAb4Wxhl$a*`t!M zcPXO>a0N&|R$xd%V%5~f)OW8~LNf1OoL+(A1Nj0aBkok*TSt@(?}k18;Ac!Fe*RB>{eP&adx91+3h9@v~ zV%!g7&3TGKW-K0I$$thR#)VpJJyg8e5OW$v2(8yj(bGlRp&9!N)h_n z9A!Omez;Pfa}6Pu$h?!yN>?uJL#|ma^(-x8Mq)hQj@JKID-+9Q;+vBH^7_%c<|7|( z(W;>4Ol8!D+HH@|k>UH-v(sXC?^G8*5d|@D=c8j>yUb{qOqa^C%4X89aJ@1-JqRus z1$avK)QtoB#J>|OY+>IzVs0lN4ufk%FdXJ2<1dVkF^rI|4(ue11Mjn075_f|8eR}grG%3&5QO-XXJ)tR!EBf|y zv)6o8bTo&C;@O)#$*;*PrA47n31sKO4*~Z93;u<;jShh zP_00A+jB4MXVlZ){e8EU_Ui5$t%gnuG?S@i!9?>_Lm>IC=z;6C# zAYp(7Tbh{Hlw1eZ^A$g2*7CqOng~>l*UCswtb;AUoA#eRC*^4`h`MrVTLp}4oBm5I z=rFkV8T**me#S9LlFX0Px8#*-NL-n{YN(jco@M2UAn6=;ppGbE!NzBYouuVYgIH1L zvfetY53}i+(Q)I4(DJ8mbOsi~(LCW%YJm0MY5lb#n3){ZV7O#iZ)%uGFGbNr)HnOX7Qpxar<%G zCIrJJo0|&1Bgy(#DT<44C$0H*Vl}FkjGbk1w<7AV#;>k+H6)|I%a0lTOdVCyu7%6k zl?CGWmhKo(qxb|%TcqmqRrQV}v=Bz8VD=G+JX4#>dljC#LfVsyS+3K)--e5{LTO{H zfG^ld5+2{zZuq@oPsGP3gRp5fKW=*xm0D$2VERLbTCV*jK!A~M5C48)=-8y=kL%-D z+LI%$e>o2_rcB4HYHp_)SC1?6FdO|#X!a~$X!KVst%)@jC!!96`Gi#b^+V4y5Syo^ zWeIY)6yTCPjb_R|Ej5=+A#gZOU!lO%--r-)5q8dHGEF>=BrabEuo~`Ianbaxh=T+F> z#H+_9%!Xd)U;G>Oe7~QCIh7{pFNc|F6>8t_xQ$e^Pgo<+qF;D?Ke_r2+tQ`pk|6WS ztGfYz3{bugICuUN;~lP1WuP10&1SLJtVF2Hig*_V6dH({|F9a_E|A;&`K*DfQ46pY zLRH*t27pXbml+9hmmBDcrSNx5Jk7l*!mbuEz^In2A(t+*vJoRHWXw-c?OG0kpPrg< zSnys}&CPeL_)m6ilC&M&h}Uu|{Mp`U0^QkIdOqtF%{%r20Le}m5c|X$kez^ZV^V)2 zUfn&|v{(wFQ;G{k5oo;$VgP$fs$$yXRx<%dCjk)a2n8H0%+w~Hq2@rV6ZzLN>M5GA z20Jvg7vP!a`Y4umOCs&|Co`c>+xohXeiuwzo@GOEp3&(!InxmX7)m;IV@;L za(FE^=SFi1k;scC4vy_D$3*hlK)pxgXHm?DD!KtORgqG%w3q3i8-1`HcBdWoKvdKg~}7V6=pr?2l*(c>-y)@PjvNm^-@l#F(d}#=Fw$I0Aw% zyW9MJB0HZ&d$}{=&!vR8pZi~2-vjGZ0rqM|tOX{meR}tE zxo{LX%)%tkMV$S`S)G4NGm@tl27Ud?)I*@8V8~$8uIQL6AaB@u_`}Z9p7)t+<4HRt zDsy4(=y7EV5C69O-lUh)1?}0Fj}uo_qb_R{H#(@h+b+BmWa>P0d2Ysi-Wdoq6$;

    &nr2Koo_x(>IKF?Ga zVo(T(D&^y$!Z+v4cd+aqJ-XnWD2?~3cjHoArb(^845x8`Z<^0C54Cn2V3AK>>A qwf0?^$k)i=dN(#ssTHc`Z)_AT3TFCb))B7-NsRQ&bSt%=y!tt8LmG*ZqXfoC*(fP#rE}EiZjeS8vVkB1iVP+x2*{)nsW;uy z@Z0D6`|FFKNDFK@$_#=23drF*qKKfj_&SCX#VyAPPXd~5uWErX}8-{yR}q)}ZS4oi-o zF;W-w5IH#;4?vl;JoUVf(ABAG!`emYN(VmW?!BHaGL6$*+6p(F?&m_< zML_|Wf21co3`LkyI_T*G8$+o#jumAxho1hvaC2`~EODruhVqy>Ul$895k;J0efX#5 zvQjSizb?Y0r0L`miJ=Aq|2Z}WC>{M<2bU5k=1L20Zp?~h-a!h!mKxtZMiDlow?9zy zO8;GW@Rb=#M;TVv`ynuc$Sdn1Hxjcv?$P@}4nt3~=tKoxK9JujT(*0SxdOw@Wd!?yWrbt`3JcMOn~NvIP`u40+Qqx|96;W{-WvFnChinWSoc|+ z85ZpM(oEk0Aq2f-(^A@>zp?Mb2^;M5~-`l-TlavJdJbEyswZ3D)b%JQh@W`Xd zKW~eU3OxEVFBlN7Z#LC5XF=|kF7~FCVvhvBn1c{NeC_-Cv|K~E?>B9;S6s;XWlb>j zlD)CM|x2xJn#;vqr(S77Ci|{)N1XJeVO~xBR3{h4&?>ns&7*`n2G7l&n5H$5g4* zAirj1mZ)Lq?h|l|0y5O4~gzP_IeP4gO zFg~FdQ5)EnCy!o1iKd`@Q{0CSQ>z)QxhYmy=XMCb_LK#-sGjzwrlO9nBZjK}Fz%Nr zDmByG*(~(r%1L8}*qp2G)@)CM-K$fq_${|7p9E<<0V?-P-5|bl;(JByNorOCt@i^` z)4_ZpO`XWI;3nTso}WhbO9CUpBd!eLIT`?+Q`UwlmEFM4OFSFXhp&A)%ze9mFH%F- zC^;&aCcT?I-!@JHS^v}C30(4v{&+MW!i{8w@eGTT@k2WJjM~!r=RCAS8Xc-~RK9LD z;Mw!xsDU=m0Ty1D?Ew^L_1T1;Fm70n;mJ?zlpqTWO|+d8X5;f@{bKDafT@U60QCoY zwH}9j>8(z={kmiEKl%gT*juH(sV$kaX658f^(dv{-w)D^Sho+p418ZQqs=DBt95~0 z(qjigx}7;{T+~QK~4l|4pXb7{>j~FZ?+}_yf{b+D7b2~H~*4=a@uhQEv zZ?An7AHxy+sZfpMe`EbdF%4I0vH$AV4Iln@=6D!B%)}*6109e5-Apa)l>OGK!Eccgzu}g=$9hb(OtFZaIUAJ1D{(n+2^@PHvb?aPv(1+j&%CaqTj_I-zp1adP z^QAxBtINBqPpH7o;`wLI3A>P>DfaQL>#+43*OI#10jRHcQQ%v6&VA5oh;%bWi$ftv zm_5gvcXH$1ina54*G!^L4>%kHfVRh%7?!TZE2ZT8F#*Pe(_PD&~G&}>mTz%3t&xC7G z7_-_;wSJF4z34Yy?6Hxx2a}!nyR`SWU8PS=uocPiWAy0y5A~U+lPuq4{>Xh@o>kTP z0fD0KxktVNC>;?FROMJR4NVn0CUb6PZrPXA$7e~^6}=WjxzF)yFDMsP_+tmF6b#h` zbF_eiVIp@7(9?U9b^Tq6eY+|jFYNvpZ@!ng&YC4`=(L=I-cAKZDVlqp=<-1{l>4-M=+Tnyv~3pY~q&qaw+0Wr%tAO0e)6_0yNTJkYv zUmH?_nVKem(v&5m$PvTS$+pzE!y3Zvr};6q^k6?9_^Egxb&-UBuO2%MG$27y+<(&7 zFbOq_-9+~O^h{x8hngVVQQ8<7pC-i9TR<2ck73o)f;{gnz3YEQW%BQ(|i;v zj^XqlO0=Abh5>xEy2yrmCQ((9*b?Fgc?Q!Nq)y%Z0$oVtlnDUsH9{9+If2JalZw3^ z3>x)&&Izk(O6kR7pD%{v^PjFe=*-yNY6WBxoWEk;mU=m)|A$dzQSIGJQVWZgkOUa0#Ejr|NHZQvM2S75Hy zOC8LWkSKA(MGaqL)WY+qcX>|&hg-gxVJ5pKf(4aV9ActKFwfhks12QQiIV48^( zgM#-7w>{cmGjPxAD77z~$jO;xC)$6L-(Cg@-5}U-Nv=K3By+CzkH@OLOnNWxgF(}S zp`-XcKZ62e&67o85I;OYqNU(=6yvuSNYugZ-`D_Z7BmJ^mc)P?e$_)v@{C>#DUAAy zVap`&(XM^9mkUT(f&=}GdN44`VLbi?NV07v3&X}Qq z3k*y6VP4yn?4vGQXf@`ib+0SMF++7J#d#|zxYkIOcZ!*o(!QOC0cgYz;wMpwd3(f) z6UjFzFTK4W+a?~VL&g7Idxo@tImgc60XZB@D|QMr;tnwfd`~78>5{L768*+^vK+JE ziX>XpABG(<4etw-iD6^>9shDBLPgB)_myk4vCwyM*zpuKdf|94GgJIxX%%yD2GK6DRb}aWN zP0GojHKav6=;pek@lzksL>QF2c1;LyIi4_Bw8u^{@4$P~cXdRE`|R<3^~?9R&N=i% z*m6f`Yyg!={>Q`*&HgUBXR*K+Doi&9fw{Z8Y2+Du#0~P2M$nR;$DrA553iRkS{=e4 z589Ms1LTAyEFYFYLpqJsjcoF2QCj>Fdn$t>xv$IOb^c2P1`#*JRp%pDJiUI)gVc?X zYY@RS&|*w@#qKVaI(SPth}fN-Z(F$S(+bbYFR~!wZ9C8e6So zbJF3w$)oy^?w(bUe`R$iNL{k<0%nJ~l;GQ7oSQ>aXTIoySFLx#-g> zH?kY*tKzb$;*tYj1-w(BfG$MpGVOlJ-LoOmogF$pqQo_BvZwC(6v7=BCWj3d$J+ew zyc6J#p34_A6z&pyYs$HMTttJ`I!mBt141Tj+6}5`z3z9a7b-7_Cyy z!J!cuM3P?f?53Gu8Y(}kfGA05OM>a<##|Q?;hmnXJw5iRg$9?1>~{qDhUr4aGLMKF zjOeZ5Lq25c@&t4LvH3cRm}+JS^gV|gX)P{j zBsS<4)k>{!DDzdOS>(b`If>Xhfq@i?;wE!< z*hS@gx|zE#S?}H$xp%egF3g0rEm_aC;R|Qaxqqos%rdowy?bgcqa01#mFeas=0OdT z&;H)3^k5G(*WVYNIUf?b9MaN#ET`q#$(yski36_xgNh7zSj5Pf8h`6!%?>21Ps#FQ zLWX28Y52EM^B3N>rh}!niDk=)2;QYk`Y|8}*A3VGg?wtUYIbzng%#Y06%ri=5(mdgmv?i$!CVC%% zW$6L3vVIqAANtp1Kh5q++R2rTFlvwxkAP%l=#a;WTz73?v)9KAP_jK`iF@qt7zk>j zx(kVL&zud{x`fVVK#-Usp~ugO%^ z%z|8M`8kjKy85|a7T~3D@x}XF)=A~PfCD~kc=TyxL1UQLVAw4u!0Q7Yxq!oCVzXx) zCh1`)zQUQ=PmsNq�~oy*`*Cmw>T;kkYU{n)-B|+=$1hmqL_k+2P?RQ_Tvww}5=dX~7U0X2XVgiN&DTqh1M`8k4B$p{a zk4*|u=e});WzoCHt`>MohD?^kz~^O=%J7^-dRh9{0;_`bk8wBTYE1S7TV%3;J1?EK zOL@I23_e<(ccn^x>v7gwX8deagrf&L+fltgv<`={4|RGOKMtfQ@UENR0Md~NOJ!*W zUl;g{Xa~vAJ4L!lk!^c^9t+0|nTY^PWyzI>{kcvmiy?@=Ahl9-NrB?OU_lm~EN1A} zgEzE`C{dRqg2}qdssDU6;fDf-bVtcW=|qY{Vf3%qpiXwNjFN+rQ&zSGi&hHs{(*5i2HckUif4cZMGC@8z_kx|dr;m!Q--(Pxt=g;kZgL=Q+x zGOe@mh-0=rxdziL%S<$E^ewk04R&BzBb6mGz#?8j&^r0oxW+$ zS0w^NU)wOQQJD+mU7;3#8)vX>gQ3I>e9EQrBNuNqY@0M2Jp>=E`80w`Q8JAK@P<_t z?L-gDC1O)KHms|CHsd|j&x;5Ps%WwFO6DL;>p*hHNmN_wxJ`_%A>06!jwH1*VLI_GSe%2!IkRl(U=aE@f1jzJNS-MEX> zdWGCG`McMT)lZJ=4`>01I&Eh6>oBjQgO^%73l+jI^d7-vJ6CVG6jT)*qpT$ zq7Jt_%|`5alQs&dk!jfeQ~C9dv1ErIZZF+Rco=)Yj?~X^ZP?~nc>m<2>NT3*Zv@iU z1eBf5bIyKOG^fe+M!%g3Z2Bj(bVu8)*^RF!m?pLiyT;{r9Yd)10*Kb>yAse6V<6(3 zjv|EdxhH_4Wti{=8(gN>g<9EFDN7xmFvD{%cSgQPmG8AioINwtPy!X?v1P#60n$0+ zv`oN?Pe!r@^#_Z$M4aacfmWoLBnj@{i1xC}_y7WnPOiz4h zjSjh|Mx2NwzZY(9M*cqiSiwUzO8HvAG4!a{wYx_lM#b^DSZnC08mYl_(>cR;E)AqJ zj$sq^WXiw%5nHl@-*Vi8Qm8z_r03OL4|9B|JB-Uk(yAT$K(cRZg>pI7TrOT0;C~UZ zB`5#mbT=%QZ|B-d|D2S*f%{aa%sG^0<4A`1{0vzWbZ+5W|c) zHH0@hMmC?zMx8McDAA#MXKmN=!ZSH|4*o9701hy^S5P7c_vLc0&a>bDY9ajm>MzT! z@<4B?yke z^33N60dR3DeNzA`2e*l_x14NgmawgP>z_efh68^{55K2P)*cNe4 zlO`VW)Qs)d0YUr=9?5tcw2I&OyV=h#9Me==7@3^Dh)DwPTl?^;zR>4~sRV%5vDhv*)ZMsvaLt(i{=8o1pr~L)u~Rsp*zM)@+?mD*DWYffy>2Kw?9plQZ_Ev&4$`2%Dp^rN z8uS3%nQ_h4XRG{gs+*ef_A-*vnmrYLla22ar(%heqJ1$|1F2AA-0{gfH6R3-|BW`A z8+TYvL?16PwjwmxhEa{%KtV0X;5-o87qLp4%Vx_Qcg{pZRPG*-=m0`CzR|hh{uKci z(?Y&`Yv$8%RJ5K!L9fU+lg zn9@LS$e+MTo$$3Y6M_c%B!f(AJkoclkT;rOB>}~9R@?pV#UEe3j?`1&`gDquKrNE6 z5}5uj>Sc|Ga$0-0PoG3g4zMPWel34$a9=as-jp+t;B&jz&xg<~CO*kt>1;oo{Bj`p zoZa^@H(~kTF2PNxe#SxScpG#LyS+?^+Ze!}>5>$+*p#w=73p#?%B?JJ;fv*lybQX+ z9$FWgL{}>Ty8Z?^uJ!DAKiXz#DzcH!mCb8C7xw5SE+DMLP$KuKOlIF#)5*ID(k8ag zR`-n^zX{Eu^XwhU0$xj!_5?@0l`Gj5gem!cM3w7&&jP5;Ah9iJo{%8wwP|lQ$jv?Z zj`KVnt@|7kDb$*b+!HIjj%$OJ%fz@J0^gl5WWcUn->G_shZ*FP89Dq*@xqX+$#_<; z1hc?wpg<1@O!Xc`oiZ?#h43bD51Gwy=+a4PaMdQNkp#6nsCM98PHE!=A-%3AUqcF4 zUj6$@KPEgdR0NhKH9F@RpE94$khlHuWH!sluMfnY+IM^Jq~MTnd!e zdgO5MOgL2Jx`j;mX&PJ@QpVY@xy<1{9Y>e2k6&+RdZo>I|8g6YphC%}Mw^5G7^L*m3px^y!0R@03RPeM~n&d z4|tiq%MM~3HZ{P{nVIN5*t7j%6$vvv?|CvnJQ5m?2XbC`t%ow34-kX0D>diK@?h*gWh)xlNBDhyl4LsY&yk1`TE}xB{FVh`j$mUX|10bh+ z1^G%PB7o~X38{O)GVTi_JA3{^+|U>h6}L8`p8{dks(vDbq7vc9aWA4sO?rAG8 zNP!;K4kxaW=|_g|(a;XFOcavW;NJeGI@$> z+orHudx1R%BIVzAX=T$8bfU$B<6=XvCzhGa%GakIakZsWCWQ&+v7emZ%i^YPD6D+c zml?s>T-N^(l%j)t{b8KaJ^Gx!U**0tCD&hr`{?P+2RGXUBM3dDDqUYkvg}RKn~_5? zR%GI7<$3PT%-~(?VS4pb9M>k*#)mF)ET*nc$Vq<%=F@(@EvaGA=-^`pGxuu`K-=Z9 zdsDpqV5JQdDw=%v<_}>Wz8y{7E1*ogW9k|di`XIZ3si8O)tzR^PB*&l$o=mqw5IEX)duv zt7Nl#KC$2zo{5xBKtW%uN?#v^6T1ASY6-6~<|hV%aZs{8Kp$;9f8U9ZfM zA)6U0i)SN|t*k7|MsLHt%#l{3!)r~U~N-clnGdm31^Lfx7y5Ixkr1!A{&!Z z=^?O2!3EW8)LiIUZHM(Kso$o;K6v zK?SqjxYl+=NT1T{t5#lwz(ePxI0I@Ue~Nv$nAxdpSYB0xI^ zMS(g^nMnn__C44R5cs8CADkhv|KxRz#WzIKX$SJ_Z!W%2n`>@H_q#FdrR_hloZD3nmiRY6U4v^cWD+acD@kf5@?Nh7yF=;> zWEdt@9Eb~7MJS2j1om3QmSF|U4=e-nG(qjs5Bs*QN!lUKfx7>6yMp@QTXV(M`3v{~ z#3rhn2)!wHVd&t`5N83JDKNeKviVlVN+cCS5_>bniWiqlXztVMMZ7IFUbW_OF)Bfe`&?u!WVN*-JK9E2>iBU@{<#{ixT4LIs?Nn zp>;wjQ z3M~o86GF(FS^pRv$LUahNmytnnoG5%8DaK?jA@wY1>zx}4S=3f+3&?GJxl%cqY}Kg zfu@B`x7Wb5e)zj%6kcD^JmK+reC+kSzwgGS}@mSr>%cU1)VK|X1Feb`33CsmQ z(oJr-fZQz|5G{esUuJGY?c7;}>Ov2|Hb^U7gO`Pp^)GKOd$5uirHZk?od$wpJUX9$ z;ng@&2D4wIL^auO6Vm*^0qA7!s;U|B!d(NwGX1&m)TDr>SAAZ*rbB5HvWaW3uyPOC z=?$?*AAK^DoV286j6Ff`SqojAeDJ3}$03klYR#(QSECCQhIs<<$XkhUArJ zA{J%We|f4IIY!_uD4u8%8>h}Hk{A|^Bk*uCC^l4rww!{bI2%np*8I#|haHrVC zr${yicZ0a9<(T}*iB|AFY`5Q0S6P+W&(0`aJekY}pxD7;W2Zm3K;3%ckA{7FQW5-G zd_7b@`}pcPs|`|VoN);Hy?6;R+l~(t^t-aELMo3^M0tT4auuHn1+LUTo{2bd6zYyW z$0u0*tIqbQ#qU*4nZ;%85VXD6IQ6S;vto*mK3z$4Bp>L_v%Czg#4dX5eqj*=UP<*A zqs1RB&-Uxt7`ES<$cPmhNn20wm*%sL>WMCv z5d{Mv8BrB63n?kOzcZ3AraJL6S@7w&xk4ozCPbJT7`5;l>2a#CVn)(D+~J$yajU3J zqI+mZGxY*$SpV6-v7o>f$#~FEm#gGA(E?PR@#}y*Ue(`T%FnXnR}d;&!b)n0F>AIe zIgAE(zXEzv;SXte{H572?>cf!--QYI1hIM$qV$}VVm!8rI>G?z&an3LTjpQVopv#OZ)kBZVK4Zb!IOUZcS z_Z?LG_!Y@o=-`@%PT99#D=<$ip$S_zR;Tk=`pal@Nzbn%mNYa2325%G4bs%{EoB5V z_ihi|^&6y6U|D0-@pQA5XBnm}+OSfN|BbM0YwWPBJ!`k-?onsbX$dk_%Ax9u5YAEk z;YHV|2|#fL;fF?OnkT#DF}m(^YC2LknjOekw4h-D!`ON{bBTm0yge7j%uS^GnD&a8 zrBIZfWE@amk@y*AuwlgG|4j}*EB7eW;EvTO8d5Z9H&LIM^S0pbbKidykBxsA%@3!R zyb{7-73^>x0;#Im13JtCe+*LfxAu~gP8ro^*jsx|ZTg*cBNl&PFYUnCrl_62FuG32 zBr8Kw>95a_Np=QzCM#Q{Yg$rk)=t3MKS0tN%vPbdC9OIUrm_kElRDBdZ2w?VSij({iJ^MfDEzL;s(dXzrZ?p=(rlTaD7qZ{z_hWSaF-dgG6WH=! z<9ROAs+S@gsY&Jwn}r%uyrGy2q(M{U{eCP=&FXgFFZAiu^+?!G-+WY{oG6Yy`F3L? zkUO>uON6BKuAyhxrY$_r-JY3O?JtQqV8}JMCW0;x<>LQ6y{8K_)cl}sAN~IT;aCjk diff --git a/docs_app/content/examples/template-syntax/src/index.html b/docs_app/content/examples/template-syntax/src/index.html deleted file mode 100644 index 866fc067cb..0000000000 --- a/docs_app/content/examples/template-syntax/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - Template Syntax - - - - - - - - - - diff --git a/docs_app/content/examples/template-syntax/src/main.ts b/docs_app/content/examples/template-syntax/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/template-syntax/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/template-syntax/stackblitz.json b/docs_app/content/examples/template-syntax/stackblitz.json deleted file mode 100644 index 5ba51f973b..0000000000 --- a/docs_app/content/examples/template-syntax/stackblitz.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "description": "Template Syntax Collection", - "files":["!**/*.d.ts", "!**/*.js"], - "tags": ["template"] -} diff --git a/docs_app/content/examples/testing/example-config.json b/docs_app/content/examples/testing/example-config.json deleted file mode 100644 index 317e9458f3..0000000000 --- a/docs_app/content/examples/testing/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "projectType": "testing" -} diff --git a/docs_app/content/examples/testing/specs.stackblitz.json b/docs_app/content/examples/testing/specs.stackblitz.json deleted file mode 100644 index 627630f6ed..0000000000 --- a/docs_app/content/examples/testing/specs.stackblitz.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "description": "Testing - specs", - "files":[ - "src/styles.css", - - "src/app/**/*.css", - "src/app/**/*.html", - "src/app/**/*.ts", - "src/app/**/*.spec.ts", - - "src/testing/*.ts", - - "!src/main.ts", - "!src/app/bag/*.*", - "!src/app/1st.spec.ts", - - "src/expected.ts", - "src/test.css", - "src/tests.sb.ts", - "src/main-specs.ts", - "src/index-specs.html" - ], - "main": "src/index-specs.html", - "tags": ["testing"] -} diff --git a/docs_app/content/examples/testing/src/app/about/about.component.spec.ts b/docs_app/content/examples/testing/src/app/about/about.component.spec.ts deleted file mode 100644 index 80bebd99a7..0000000000 --- a/docs_app/content/examples/testing/src/app/about/about.component.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AboutComponent } from './about.component'; -import { HighlightDirective } from '../shared/highlight.directive'; - -let fixture: ComponentFixture; - -describe('AboutComponent (highlightDirective)', () => { - // #docregion tests - beforeEach(() => { - fixture = TestBed.configureTestingModule({ - declarations: [ AboutComponent, HighlightDirective], - schemas: [ NO_ERRORS_SCHEMA ] - }) - .createComponent(AboutComponent); - fixture.detectChanges(); // initial binding - }); - - it('should have skyblue

    ', () => { - const h2: HTMLElement = fixture.nativeElement.querySelector('h2'); - const bgColor = h2.style.backgroundColor; - expect(bgColor).toBe('skyblue'); - }); - // #enddocregion tests -}); diff --git a/docs_app/content/examples/testing/src/app/about/about.component.ts b/docs_app/content/examples/testing/src/app/about/about.component.ts deleted file mode 100644 index 465d081d25..0000000000 --- a/docs_app/content/examples/testing/src/app/about/about.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -@Component({ - template: ` -

    About

    -

    Quote of the day:

    - - ` -}) -export class AboutComponent { } diff --git a/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts b/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts deleted file mode 100644 index 3e3e6a847c..0000000000 --- a/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -// #docplaster -// #docregion -import { TestBed, async } from '@angular/core/testing'; -// #enddocregion -import { AppComponent } from './app-initial.component'; -/* -// #docregion -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { -// #enddocregion -*/ -describe('AppComponent (initial CLI version)', () => { - // #docregion - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app'); - })); - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); - })); -}); -// #enddocregion - -/// As it should be -import { DebugElement } from '@angular/core'; -import { ComponentFixture } from '@angular/core/testing'; - -describe('AppComponent (initial CLI version - as it should be)', () => { - - let app: AppComponent; - let de: DebugElement; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }); - - fixture = TestBed.createComponent(AppComponent); - app = fixture.componentInstance; - de = fixture.debugElement; - }); - - it('should create the app', () => { - expect(app).toBeDefined(); - }); - - it(`should have as title 'app'`, () => { - expect(app.title).toEqual('app'); - }); - - it('should render title in an h1 tag', () => { - fixture.detectChanges(); - expect(de.nativeElement.querySelector('h1').textContent) - .toContain('Welcome to app!'); - }); -}); diff --git a/docs_app/content/examples/testing/src/app/app-initial.component.ts b/docs_app/content/examples/testing/src/app/app-initial.component.ts deleted file mode 100644 index 0f06d4dd07..0000000000 --- a/docs_app/content/examples/testing/src/app/app-initial.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -// Reduced version of the initial AppComponent generated by CLI -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - template: '

    Welcome to {{title}}!

    ' -}) -export class AppComponent { - title = 'app'; -} diff --git a/docs_app/content/examples/testing/src/app/app-routing.module.ts b/docs_app/content/examples/testing/src/app/app-routing.module.ts deleted file mode 100644 index f9fd0bdc83..0000000000 --- a/docs_app/content/examples/testing/src/app/app-routing.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { AboutComponent } from './about/about.component'; - -@NgModule({ - imports: [ - RouterModule.forRoot([ - { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, - { path: 'about', component: AboutComponent }, - { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'} - ]) - ], - exports: [ RouterModule ] // re-export the module declarations -}) -export class AppRoutingModule { }; diff --git a/docs_app/content/examples/testing/src/app/app.component.html b/docs_app/content/examples/testing/src/app/app.component.html deleted file mode 100644 index d73c1162c0..0000000000 --- a/docs_app/content/examples/testing/src/app/app.component.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - -     - - diff --git a/docs_app/content/examples/testing/src/app/app.component.router.spec.ts b/docs_app/content/examples/testing/src/app/app.component.router.spec.ts deleted file mode 100644 index 4c4ba01579..0000000000 --- a/docs_app/content/examples/testing/src/app/app.component.router.spec.ts +++ /dev/null @@ -1,186 +0,0 @@ -// For more examples: -// https://github.com/angular/angular/blob/master/modules/@angular/router/test/integration.spec.ts - -import { async, ComponentFixture, fakeAsync, TestBed, tick, -} from '@angular/core/testing'; - -import { asyncData } from '../testing'; - -import { RouterTestingModule } from '@angular/router/testing'; -import { SpyLocation } from '@angular/common/testing'; - -// r - for relatively obscure router symbols -import * as r from '@angular/router'; -import { Router, RouterLinkWithHref } from '@angular/router'; - -import { By } from '@angular/platform-browser'; -import { DebugElement, Type } from '@angular/core'; -import { Location } from '@angular/common'; - -import { click } from '../testing'; - -import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; -import { AboutComponent } from './about/about.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { TwainService } from './twain/twain.service'; - -import { HeroService, TestHeroService } from './model/testing/test-hero.service'; - -let comp: AppComponent; -let fixture: ComponentFixture; -let page: Page; -let router: Router; -let location: SpyLocation; - -describe('AppComponent & RouterTestingModule', () => { - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ AppModule, RouterTestingModule ], - providers: [ - { provide: HeroService, useClass: TestHeroService } - ] - }) - .compileComponents(); - })); - - it('should navigate to "Dashboard" immediately', fakeAsync(() => { - createComponent(); - tick(); // wait for async data to arrive - expect(location.path()).toEqual('/dashboard', 'after initialNavigation()'); - expectElementOf(DashboardComponent); - })); - - it('should navigate to "About" on click', fakeAsync(() => { - createComponent(); - click(page.aboutLinkDe); - // page.aboutLinkDe.nativeElement.click(); // ok but fails in phantom - - advance(); - expectPathToBe('/about'); - expectElementOf(AboutComponent); - })); - - it('should navigate to "About" w/ browser location URL change', fakeAsync(() => { - createComponent(); - location.simulateHashChange('/about'); - // location.go('/about'); // also works ... except, perhaps, in Stackblitz - advance(); - expectPathToBe('/about'); - expectElementOf(AboutComponent); - })); - - // Can't navigate to lazy loaded modules with this technique - xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => { - createComponent(); - page.heroesLinkDe.nativeElement.click(); - advance(); - expectPathToBe('/heroes'); - })); - -}); - - -/////////////// -import { NgModuleFactoryLoader } from '@angular/core'; -import { SpyNgModuleFactoryLoader } from '@angular/router/testing'; - -import { HeroModule } from './hero/hero.module'; // should be lazy loaded -import { HeroListComponent } from './hero/hero-list.component'; - -let loader: SpyNgModuleFactoryLoader; - -///////// Can't get lazy loaded Heroes to work yet -xdescribe('AppComponent & Lazy Loading (not working yet)', () => { - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ AppModule, RouterTestingModule ] - }) - .compileComponents(); - })); - - beforeEach(fakeAsync(() => { - createComponent(); - loader = TestBed.get(NgModuleFactoryLoader); - loader.stubbedModules = { expected: HeroModule }; - router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]); - })); - - it('should navigate to "Heroes" on click', async(() => { - page.heroesLinkDe.nativeElement.click(); - advance(); - expectPathToBe('/heroes'); - expectElementOf(HeroListComponent); - })); - - it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => { - location.go('/heroes'); - advance(); - expectPathToBe('/heroes'); - expectElementOf(HeroListComponent); - })); -}); - -////// Helpers ///////// - -/** - * Advance to the routed page - * Wait a tick, then detect changes, and tick again - */ -function advance(): void { - tick(); // wait while navigating - fixture.detectChanges(); // update view - tick(); // wait for async data to arrive -} - -function createComponent() { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - - const injector = fixture.debugElement.injector; - location = injector.get(Location) as SpyLocation; - router = injector.get(Router); - router.initialNavigation(); - spyOn(injector.get(TwainService), 'getQuote') - // fake fast async observable - .and.returnValue(asyncData('Test Quote')); - advance(); - - page = new Page(); -} - -class Page { - aboutLinkDe: DebugElement; - dashboardLinkDe: DebugElement; - heroesLinkDe: DebugElement; - - // for debugging - comp: AppComponent; - location: SpyLocation; - router: Router; - fixture: ComponentFixture; - - constructor() { - const links = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref)); - this.aboutLinkDe = links[2]; - this.dashboardLinkDe = links[0]; - this.heroesLinkDe = links[1]; - - // for debugging - this.comp = comp; - this.fixture = fixture; - this.router = router; - } -} - -function expectPathToBe(path: string, expectationFailOutput?: any) { - expect(location.path()).toEqual(path, expectationFailOutput || 'location.path()'); -} - -function expectElementOf(type: Type): any { - const el = fixture.debugElement.query(By.directive(type)); - expect(el).toBeTruthy('expected an element for ' + type.name); - return el; -} diff --git a/docs_app/content/examples/testing/src/app/app.component.spec.ts b/docs_app/content/examples/testing/src/app/app.component.spec.ts deleted file mode 100644 index e759aa51a2..0000000000 --- a/docs_app/content/examples/testing/src/app/app.component.spec.ts +++ /dev/null @@ -1,146 +0,0 @@ -// #docplaster -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core'; -import { By } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { RouterLinkDirectiveStub } from '../testing'; - -// #docregion component-stubs -@Component({selector: 'app-banner', template: ''}) -class BannerStubComponent {} - -@Component({selector: 'router-outlet', template: ''}) -class RouterOutletStubComponent { } - -@Component({selector: 'app-welcome', template: ''}) -class WelcomeStubComponent {} -// #enddocregion component-stubs - -let comp: AppComponent; -let fixture: ComponentFixture; - -describe('AppComponent & TestModule', () => { - beforeEach(async(() => { - // #docregion testbed-stubs - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - RouterLinkDirectiveStub, - BannerStubComponent, - RouterOutletStubComponent, - WelcomeStubComponent - ] - }) - // #enddocregion testbed-stubs - .compileComponents().then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - })); - tests(); -}); - -//////// Testing w/ NO_ERRORS_SCHEMA ////// -describe('AppComponent & NO_ERRORS_SCHEMA', () => { - beforeEach(async(() => { - // #docregion no-errors-schema, mixed-setup - TestBed.configureTestingModule({ - declarations: [ - AppComponent, - // #enddocregion no-errors-schema - BannerStubComponent, - // #docregion no-errors-schema - RouterLinkDirectiveStub - ], - schemas: [ NO_ERRORS_SCHEMA ] - }) - // #enddocregion no-errors-schema, mixed-setup - .compileComponents().then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - })); - tests(); -}); - -//////// Testing w/ real root module ////// -// Tricky because we are disabling the router and its configuration -// Better to use RouterTestingModule -import { AppModule } from './app.module'; -import { AppRoutingModule } from './app-routing.module'; - -describe('AppComponent & AppModule', () => { - - beforeEach(async(() => { - - TestBed.configureTestingModule({ - imports: [ AppModule ] - }) - - // Get rid of app's Router configuration otherwise many failures. - // Doing so removes Router declarations; add the Router stubs - .overrideModule(AppModule, { - remove: { - imports: [ AppRoutingModule ] - }, - add: { - declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ] - } - }) - - .compileComponents() - - .then(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - }); - })); - - tests(); -}); - -function tests() { - let routerLinks: RouterLinkDirectiveStub[]; - let linkDes: DebugElement[]; - - // #docregion test-setup - beforeEach(() => { - fixture.detectChanges(); // trigger initial data binding - - // find DebugElements with an attached RouterLinkStubDirective - linkDes = fixture.debugElement - .queryAll(By.directive(RouterLinkDirectiveStub)); - - // get attached link directive instances - // using each DebugElement's injector - routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub)); - }); - // #enddocregion test-setup - - it('can instantiate the component', () => { - expect(comp).not.toBeNull(); - }); - - // #docregion tests - it('can get RouterLinks from template', () => { - expect(routerLinks.length).toBe(3, 'should have 3 routerLinks'); - expect(routerLinks[0].linkParams).toBe('/dashboard'); - expect(routerLinks[1].linkParams).toBe('/heroes'); - expect(routerLinks[2].linkParams).toBe('/about'); - }); - - it('can click Heroes link in template', () => { - const heroesLinkDe = linkDes[1]; // heroes link DebugElement - const heroesLink = routerLinks[1]; // heroes link directive - - expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet'); - - heroesLinkDe.triggerEventHandler('click', null); - fixture.detectChanges(); - - expect(heroesLink.navigatedTo).toBe('/heroes'); - }); - // #enddocregion tests -} diff --git a/docs_app/content/examples/testing/src/app/app.component.ts b/docs_app/content/examples/testing/src/app/app.component.ts deleted file mode 100644 index 7b3cf496f1..0000000000 --- a/docs_app/content/examples/testing/src/app/app.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/testing/src/app/app.module.ts b/docs_app/content/examples/testing/src/app/app.module.ts deleted file mode 100644 index aecf6ea5e2..0000000000 --- a/docs_app/content/examples/testing/src/app/app.module.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { HttpClientModule } from '@angular/common/http'; - -import { AppComponent } from './app.component'; -import { AppRoutingModule } from './app-routing.module'; - -import { AboutComponent } from './about/about.component'; -import { BannerComponent } from './banner/banner.component'; -import { HeroService } from './model/hero.service'; -import { UserService } from './model/user.service'; -import { TwainComponent } from './twain/twain.component'; -import { TwainService } from './twain/twain.service'; -import { WelcomeComponent } from './welcome/welcome.component'; - -import { DashboardModule } from './dashboard/dashboard.module'; -import { SharedModule } from './shared/shared.module'; - -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; - -@NgModule({ - imports: [ - BrowserModule, - DashboardModule, - AppRoutingModule, - SharedModule, - HttpClientModule, - - // The HttpClientInMemoryWebApiModule module intercepts HTTP requests - // and returns simulated server responses. - // Remove it when a real server is ready to receive requests. - HttpClientInMemoryWebApiModule.forRoot( - InMemoryDataService, { dataEncapsulation: false } - ) - ], - providers: [ - HeroService, - TwainService, - UserService - ], - declarations: [ - AppComponent, - AboutComponent, - BannerComponent, - TwainComponent, - WelcomeComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.css b/docs_app/content/examples/testing/src/app/banner/banner-external.component.css deleted file mode 100644 index cd09a55b3c..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.css +++ /dev/null @@ -1 +0,0 @@ -h1 { color: green; font-size: 350%} diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.html b/docs_app/content/examples/testing/src/app/banner/banner-external.component.html deleted file mode 100644 index 6213adcb47..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.html +++ /dev/null @@ -1 +0,0 @@ -

    {{title}}

    diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts deleted file mode 100644 index d5fc9c8cbe..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts +++ /dev/null @@ -1,72 +0,0 @@ -// #docplaster -// #docregion import-async -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -// #enddocregion import-async -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { BannerComponent } from './banner-external.component'; - -describe('BannerComponent (external files)', () => { - let component: BannerComponent; - let fixture: ComponentFixture; - let h1: HTMLElement; - - describe('Two beforeEach', () => { - // #docregion async-before-each - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ BannerComponent ], - }) - .compileComponents(); // compile template and css - })); - // #enddocregion async-before-each - - // synchronous beforeEach - // #docregion sync-before-each - beforeEach(() => { - fixture = TestBed.createComponent(BannerComponent); - component = fixture.componentInstance; // BannerComponent test instance - h1 = fixture.nativeElement.querySelector('h1'); - }); - // #enddocregion sync-before-each - - tests(); - }); - - describe('One beforeEach', () => { - // #docregion one-before-each - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ BannerComponent ], - }) - .compileComponents() - .then(() => { - fixture = TestBed.createComponent(BannerComponent); - component = fixture.componentInstance; - h1 = fixture.nativeElement.querySelector('h1'); - }); - })); - // #enddocregion one-before-each - - tests(); - }); - - function tests() { - it('no title in the DOM until manually call `detectChanges`', () => { - expect(h1.textContent).toEqual(''); - }); - - it('should display original title', () => { - fixture.detectChanges(); - expect(h1.textContent).toContain(component.title); - }); - - it('should display a different test title', () => { - component.title = 'Test Title'; - fixture.detectChanges(); - expect(h1.textContent).toContain('Test Title'); - }); - } -}); - diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts b/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts deleted file mode 100644 index dfec36074d..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -// #docregion metadata -@Component({ - selector: 'app-banner', - templateUrl: './banner-external.component.html', - styleUrls: ['./banner-external.component.css'] -}) -// #enddocregion metadata -export class BannerComponent { - title = 'Test Tour of Heroes'; -} diff --git a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts deleted file mode 100644 index 8a45df5023..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts +++ /dev/null @@ -1,119 +0,0 @@ -// #docplaster -// #docregion import-by -import { By } from '@angular/platform-browser'; -// #enddocregion import-by -// #docregion import-debug-element -import { DebugElement } from '@angular/core'; -// #enddocregion import-debug-element -// #docregion v1 -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -// #enddocregion v1 -import { BannerComponent } from './banner-initial.component'; -/* -// #docregion v1 -import { BannerComponent } from './banner.component'; - -describe('BannerComponent', () => { -// #enddocregion v1 -*/ -describe('BannerComponent (initial CLI generated)', () => { -// #docregion v1 - let component: BannerComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ BannerComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(BannerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeDefined(); - }); -}); -// #enddocregion v1 - -// #docregion v2 -describe('BannerComponent (minimal)', () => { - it('should create', () => { - // #docregion configureTestingModule - TestBed.configureTestingModule({ - declarations: [ BannerComponent ] - }); - // #enddocregion configureTestingModule - // #docregion createComponent - const fixture = TestBed.createComponent(BannerComponent); - // #enddocregion createComponent - // #docregion componentInstance - const component = fixture.componentInstance; - expect(component).toBeDefined(); - // #enddocregion componentInstance - }); -}); -// #enddocregion v2 - -// #docregion v3, v4 -describe('BannerComponent (with beforeEach)', () => { - let component: BannerComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ BannerComponent ] - }); - fixture = TestBed.createComponent(BannerComponent); - component = fixture.componentInstance; - }); - - it('should create', () => { - expect(component).toBeDefined(); - }); -// #enddocregion v3 - -// #docregion v4-test-2 - it('should contain "banner works!"', () => { - const bannerElement: HTMLElement = fixture.nativeElement; - expect(bannerElement.textContent).toContain('banner works!'); - }); -// #enddocregion v4-test-2 - -// #docregion v4-test-3 - it('should have

    with "banner works!"', () => { - // #docregion nativeElement - const bannerElement: HTMLElement = fixture.nativeElement; - // #enddocregion nativeElement - const p = bannerElement.querySelector('p'); - expect(p.textContent).toEqual('banner works!'); - }); -// #enddocregion v4-test-3 - - -// #docregion v4-test-4 -it('should find the

    with fixture.debugElement.nativeElement)', () => { - // #docregion debugElement-nativeElement - const bannerDe: DebugElement = fixture.debugElement; - const bannerEl: HTMLElement = bannerDe.nativeElement; - // #enddocregion debugElement-nativeElement - const p = bannerEl.querySelector('p'); - expect(p.textContent).toEqual('banner works!'); -}); -// #enddocregion v4-test-4 - -// #docregion v4-test-5 -it('should find the

    with fixture.debugElement.query(By.css)', () => { - const bannerDe: DebugElement = fixture.debugElement; - const paragraphDe = bannerDe.query(By.css('p')); - const p: HTMLElement = paragraphDe.nativeElement; - expect(p.textContent).toEqual('banner works!'); -}); -// #enddocregion v4-test-5 -// #docregion v3 -}); -// #enddocregion v3, v4 diff --git a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts b/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts deleted file mode 100644 index a7959e5573..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -// BannerComponent as initially generated by the CLI -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-banner', - template: `

    banner works!

    `, - styles: [] -}) -export class BannerComponent { } diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts deleted file mode 100644 index 3310fbdad0..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -// #docplaster -// #docregion -// #docregion import-async -import { async } from '@angular/core/testing'; -// #enddocregion import-async -// #docregion import-ComponentFixtureAutoDetect -import { ComponentFixtureAutoDetect } from '@angular/core/testing'; -// #enddocregion import-ComponentFixtureAutoDetect -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BannerComponent } from './banner.component'; - -describe('BannerComponent (AutoChangeDetect)', () => { - let comp: BannerComponent; - let fixture: ComponentFixture; - let h1: HTMLElement; - - beforeEach(() => { - // #docregion auto-detect - TestBed.configureTestingModule({ - declarations: [ BannerComponent ], - providers: [ - { provide: ComponentFixtureAutoDetect, useValue: true } - ] - }); - // #enddocregion auto-detect - fixture = TestBed.createComponent(BannerComponent); - comp = fixture.componentInstance; - h1 = fixture.nativeElement.querySelector('h1'); - }); - - // #docregion auto-detect-tests - it('should display original title', () => { - // Hooray! No `fixture.detectChanges()` needed - expect(h1.textContent).toContain(comp.title); - }); - - it('should still see original title after comp.title change', () => { - const oldTitle = comp.title; - comp.title = 'Test Title'; - // Displayed title is old because Angular didn't hear the change :( - expect(h1.textContent).toContain(oldTitle); - }); - - it('should display updated title after detectChanges', () => { - comp.title = 'Test Title'; - fixture.detectChanges(); // detect changes explicitly - expect(h1.textContent).toContain(comp.title); - }); - // #enddocregion auto-detect-tests -}); diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts deleted file mode 100644 index a731debbd1..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster -// #docregion -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DebugElement } from '@angular/core'; - -import { BannerComponent } from './banner.component'; - -describe('BannerComponent (inline template)', () => { -// #docregion setup - let component: BannerComponent; - let fixture: ComponentFixture; - let h1: HTMLElement; - - // #docregion configure-and-create - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ BannerComponent ], - }); - fixture = TestBed.createComponent(BannerComponent); - // #enddocregion configure-and-create - component = fixture.componentInstance; // BannerComponent test instance - h1 = fixture.nativeElement.querySelector('h1'); - // #docregion configure-and-create - }); -// #enddocregion setup, configure-and-create - -// #docregion test-w-o-detect-changes - it('no title in the DOM after createComponent()', () => { - expect(h1.textContent).toEqual(''); - }); -// #enddocregion test-w-o-detect-changes - -// #docregion expect-h1-default-v1 - it('should display original title', () => { - // #enddocregion expect-h1-default-v1 - fixture.detectChanges(); - // #docregion expect-h1-default-v1 - expect(h1.textContent).toContain(component.title); - }); - // #enddocregion expect-h1-default-v1 - -// #docregion expect-h1-default -it('should display original title after detectChanges()', () => { - fixture.detectChanges(); - expect(h1.textContent).toContain(component.title); -}); -// #enddocregion expect-h1-default - -// #docregion after-change -it('should display a different test title', () => { - component.title = 'Test Title'; - fixture.detectChanges(); - expect(h1.textContent).toContain('Test Title'); -}); -// #enddocregion after-change -}); diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.ts deleted file mode 100644 index 3354801d0a..0000000000 --- a/docs_app/content/examples/testing/src/app/banner/banner.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion component -@Component({ - selector: 'app-banner', - template: '

    {{title}}

    ', - styles: ['h1 { color: green; font-size: 350%}'] -}) -export class BannerComponent { - title = 'Test Tour of Heroes'; -} -// #enddocregion component diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css deleted file mode 100644 index eb54d181d8..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css +++ /dev/null @@ -1,28 +0,0 @@ -.hero { - padding: 20px; - position: relative; - text-align: center; - color: #eee; - max-height: 120px; - min-width: 120px; - background-color: #607D8B; - border-radius: 2px; -} - -.hero:hover { - background-color: #EEE; - cursor: pointer; - color: #607d8b; -} - -@media (max-width: 600px) { - .hero { - font-size: 10px; - max-height: 75px; } -} - -@media (max-width: 1024px) { - .hero { - min-width: 60px; - } -} diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts deleted file mode 100644 index 84d73e45f4..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts +++ /dev/null @@ -1,163 +0,0 @@ - -// #docplaster -import { async, ComponentFixture, TestBed -} from '@angular/core/testing'; - -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { addMatchers, click } from '../../testing'; - -import { Hero } from '../model/hero'; -import { DashboardHeroComponent } from './dashboard-hero.component'; - -beforeEach( addMatchers ); - -describe('DashboardHeroComponent class only', () => { - // #docregion class-only - it('raises the selected event when clicked', () => { - const comp = new DashboardHeroComponent(); - const hero: Hero = { id: 42, name: 'Test' }; - comp.hero = hero; - - comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero)); - comp.click(); - }); - // #enddocregion class-only -}); - -describe('DashboardHeroComponent when tested directly', () => { - - let comp: DashboardHeroComponent; - let expectedHero: Hero; - let fixture: ComponentFixture; - let heroDe: DebugElement; - let heroEl: HTMLElement; - - beforeEach(async(() => { - // #docregion setup, config-testbed - TestBed.configureTestingModule({ - declarations: [ DashboardHeroComponent ] - }) - // #enddocregion setup, config-testbed - .compileComponents(); - })); - - beforeEach(() => { - // #docregion setup - fixture = TestBed.createComponent(DashboardHeroComponent); - comp = fixture.componentInstance; - - // find the hero's DebugElement and element - heroDe = fixture.debugElement.query(By.css('.hero')); - heroEl = heroDe.nativeElement; - - // mock the hero supplied by the parent component - expectedHero = { id: 42, name: 'Test Name' }; - - // simulate the parent setting the input property with that hero - comp.hero = expectedHero; - - // trigger initial data binding - fixture.detectChanges(); - // #enddocregion setup - }); - - // #docregion name-test - it('should display hero name in uppercase', () => { - const expectedPipedName = expectedHero.name.toUpperCase(); - expect(heroEl.textContent).toContain(expectedPipedName); - }); - // #enddocregion name-test - - // #docregion click-test - it('should raise selected event when clicked (triggerEventHandler)', () => { - let selectedHero: Hero; - comp.selected.subscribe((hero: Hero) => selectedHero = hero); - - // #docregion trigger-event-handler - heroDe.triggerEventHandler('click', null); - // #enddocregion trigger-event-handler - expect(selectedHero).toBe(expectedHero); - }); - // #enddocregion click-test - - // #docregion click-test-2 - it('should raise selected event when clicked (element.click)', () => { - let selectedHero: Hero; - comp.selected.subscribe((hero: Hero) => selectedHero = hero); - - heroEl.click(); - expect(selectedHero).toBe(expectedHero); - }); - // #enddocregion click-test-2 - - // #docregion click-test-3 - it('should raise selected event when clicked (click helper)', () => { - let selectedHero: Hero; - comp.selected.subscribe(hero => selectedHero = hero); - - click(heroDe); // click helper with DebugElement - click(heroEl); // click helper with native element - - expect(selectedHero).toBe(expectedHero); - }); - // #enddocregion click-test-3 -}); - -////////////////// - -describe('DashboardHeroComponent when inside a test host', () => { - let testHost: TestHostComponent; - let fixture: ComponentFixture; - let heroEl: HTMLElement; - - beforeEach(async(() => { - // #docregion test-host-setup - TestBed.configureTestingModule({ - declarations: [ DashboardHeroComponent, TestHostComponent ] - }) - // #enddocregion test-host-setup - .compileComponents(); - })); - - beforeEach(() => { - // #docregion test-host-setup - // create TestHostComponent instead of DashboardHeroComponent - fixture = TestBed.createComponent(TestHostComponent); - testHost = fixture.componentInstance; - heroEl = fixture.nativeElement.querySelector('.hero'); - fixture.detectChanges(); // trigger initial data binding - // #enddocregion test-host-setup - }); - - // #docregion test-host-tests - it('should display hero name', () => { - const expectedPipedName = testHost.hero.name.toUpperCase(); - expect(heroEl.textContent).toContain(expectedPipedName); - }); - - it('should raise selected event when clicked', () => { - click(heroEl); - // selected hero should be the same data bound hero - expect(testHost.selectedHero).toBe(testHost.hero); - }); - // #enddocregion test-host-tests -}); - -////// Test Host Component ////// -import { Component } from '@angular/core'; - -// #docregion test-host -@Component({ - template: ` - - ` -}) -class TestHostComponent { - hero: Hero = {id: 42, name: 'Test Name' }; - selectedHero: Hero; - onSelected(hero: Hero) { this.selectedHero = hero; } -} -// #enddocregion test-host diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts deleted file mode 100644 index ca1ff573bf..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -import { Hero } from '../model/hero'; - -// #docregion component -@Component({ - selector: 'dashboard-hero', - template: ` -
    - {{hero.name | uppercase}} -
    `, - styleUrls: [ './dashboard-hero.component.css' ] -}) -// #docregion class -export class DashboardHeroComponent { - @Input() hero: Hero; - @Output() selected = new EventEmitter(); - click() { this.selected.emit(this.hero); } -} -// #enddocregion component, class diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css deleted file mode 100644 index 98130b61c6..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css +++ /dev/null @@ -1,35 +0,0 @@ -[class*='col-'] { - float: left; -} -*, *:after, *:before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -h3 { - text-align: center; margin-bottom: 0; -} -[class*='col-'] { - padding-right: 20px; - padding-bottom: 20px; -} -[class*='col-']:last-of-type { - padding-right: 0; -} -.grid { - margin: 0; -} -.col-1-4 { - width: 25%; -} -.grid-pad { - padding: 10px 0; -} -.grid-pad > [class*='col-']:last-of-type { - padding-right: 20px; -} -@media (max-width: 1024px) { - .grid { - margin: 0; - } -} diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html deleted file mode 100644 index b26e16b828..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1,9 +0,0 @@ -

    {{title}}

    - -
    - - - - -
    diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts deleted file mode 100644 index 1d372bfe0e..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Router } from '@angular/router'; - -import { DashboardComponent } from './dashboard.component'; -import { Hero } from '../model/hero'; - -import { addMatchers } from '../../testing'; -import { TestHeroService, HeroService } from '../model/testing/test-hero.service'; - -class FakeRouter { - navigateByUrl(url: string) { return url; } -} - -describe('DashboardComponent class only', () => { - let comp: DashboardComponent; - let heroService: TestHeroService; - let router: Router; - - beforeEach(() => { - addMatchers(); - router = new FakeRouter() as any as Router; - heroService = new TestHeroService(); - comp = new DashboardComponent(router, heroService); - }); - - it('should NOT have heroes before calling OnInit', () => { - expect(comp.heroes.length).toBe(0, - 'should not have heroes before OnInit'); - }); - - it('should NOT have heroes immediately after OnInit', () => { - comp.ngOnInit(); // ngOnInit -> getHeroes - expect(comp.heroes.length).toBe(0, - 'should not have heroes until service promise resolves'); - }); - - it('should HAVE heroes after HeroService gets them', (done: DoneFn) => { - comp.ngOnInit(); // ngOnInit -> getHeroes - heroService.lastResult // the one from getHeroes - .subscribe( - () => { - // throw new Error('deliberate error'); // see it fail gracefully - expect(comp.heroes.length).toBeGreaterThan(0, - 'should have heroes after service promise resolves'); - done(); - }, - done.fail); - }); - - it('should tell ROUTER to navigate by hero id', () => { - const hero: Hero = {id: 42, name: 'Abbracadabra' }; - const spy = spyOn(router, 'navigateByUrl'); - - comp.gotoDetail(hero); - - const navArgs = spy.calls.mostRecent().args[0]; - expect(navArgs).toBe('/heroes/42', 'should nav to HeroDetail for Hero 42'); - }); - -}); diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts deleted file mode 100644 index 9beef762a0..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts +++ /dev/null @@ -1,148 +0,0 @@ -// #docplaster -import { async, inject, ComponentFixture, TestBed -} from '@angular/core/testing'; - -import { addMatchers, asyncData, click } from '../../testing'; -import { HeroService } from '../model/hero.service'; -import { getTestHeroes } from '../model/testing/test-heroes'; - -import { By } from '@angular/platform-browser'; -import { Router } from '@angular/router'; - -import { DashboardComponent } from './dashboard.component'; -import { DashboardModule } from './dashboard.module'; - -beforeEach ( addMatchers ); - -let comp: DashboardComponent; -let fixture: ComponentFixture; - -//////// Deep //////////////// - -describe('DashboardComponent (deep)', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ DashboardModule ] - }); - }); - - compileAndCreate(); - - tests(clickForDeep); - - function clickForDeep() { - // get first
    - const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero'); - click(heroEl); - } -}); - -//////// Shallow //////////////// - -import { NO_ERRORS_SCHEMA } from '@angular/core'; - -describe('DashboardComponent (shallow)', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ DashboardComponent ], - schemas: [NO_ERRORS_SCHEMA] - }); - }); - - compileAndCreate(); - - tests(clickForShallow); - - function clickForShallow() { - // get first DebugElement - const heroDe = fixture.debugElement.query(By.css('dashboard-hero')); - heroDe.triggerEventHandler('selected', comp.heroes[0]); - } -}); - -/** Add TestBed providers, compile, and create DashboardComponent */ -function compileAndCreate() { - // #docregion compile-and-create-body - beforeEach(async(() => { - // #docregion router-spy - const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']); - const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']); - - TestBed.configureTestingModule({ - providers: [ - { provide: HeroService, useValue: heroServiceSpy }, - { provide: Router, useValue: routerSpy } - ] - }) - // #enddocregion router-spy - .compileComponents().then(() => { - fixture = TestBed.createComponent(DashboardComponent); - comp = fixture.componentInstance; - - // getHeroes spy returns observable of test heroes - heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes())); - }); - // #enddocregion compile-and-create-body - })); -} - -/** - * The (almost) same tests for both. - * Only change: the way that the first hero is clicked - */ -function tests(heroClick: Function) { - - it('should NOT have heroes before ngOnInit', () => { - expect(comp.heroes.length).toBe(0, - 'should not have heroes before ngOnInit'); - }); - - it('should NOT have heroes immediately after ngOnInit', () => { - fixture.detectChanges(); // runs initial lifecycle hooks - - expect(comp.heroes.length).toBe(0, - 'should not have heroes until service promise resolves'); - }); - - describe('after get dashboard heroes', () => { - - let router: Router; - - // Trigger component so it gets heroes and binds to them - beforeEach(async(() => { - router = fixture.debugElement.injector.get(Router); - fixture.detectChanges(); // runs ngOnInit -> getHeroes - fixture.whenStable() // No need for the `lastPromise` hack! - .then(() => fixture.detectChanges()); // bind to heroes - })); - - it('should HAVE heroes', () => { - expect(comp.heroes.length).toBeGreaterThan(0, - 'should have heroes after service promise resolves'); - }); - - it('should DISPLAY heroes', () => { - // Find and examine the displayed heroes - // Look for them in the DOM by css class - const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero'); - expect(heroes.length).toBe(4, 'should display 4 heroes'); - }); - - // #docregion navigate-test - it('should tell ROUTER to navigate when hero clicked', () => { - - heroClick(); // trigger click on first inner
    - - // args passed to router.navigateByUrl() spy - const spy = router.navigateByUrl as jasmine.Spy; - const navArgs = spy.calls.first().args[0]; - - // expecting to navigate to id of the component's first hero - const id = comp.heroes[0].id; - expect(navArgs).toBe('/heroes/' + id, - 'should nav to HeroDetail for first hero'); - }); - // #enddocregion navigate-test - }); -} - diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index 6ab4e6f324..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; - -@Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: [ './dashboard.component.css' ] -}) -export class DashboardComponent implements OnInit { - - heroes: Hero[] = []; - - // #docregion ctor - constructor( - private router: Router, - private heroService: HeroService) { - } - // #enddocregion ctor - - ngOnInit() { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes.slice(1, 5)); - } - - // #docregion goto-detail - gotoDetail(hero: Hero) { - let url = `/heroes/${hero.id}`; - this.router.navigateByUrl(url); - } - // #enddocregion goto-detail - - get title() { - let cnt = this.heroes.length; - return cnt === 0 ? 'No Heroes' : - cnt === 1 ? 'Top Hero' : `Top ${cnt} Heroes`; - } -} diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts deleted file mode 100644 index 8a70c851a0..0000000000 --- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { SharedModule } from '../shared/shared.module'; - -import { DashboardComponent } from './dashboard.component'; -import { DashboardHeroComponent } from './dashboard-hero.component'; - -const routes: Routes = [ - { path: 'dashboard', component: DashboardComponent }, -]; - -@NgModule({ - imports: [ - SharedModule, - RouterModule.forChild(routes) - ], - declarations: [ DashboardComponent, DashboardHeroComponent ] -}) -export class DashboardModule { } diff --git a/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts b/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts deleted file mode 100644 index 9bf42ed33f..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts +++ /dev/null @@ -1,69 +0,0 @@ -// tslint:disable-next-line:no-unused-variable -import { async, fakeAsync, tick } from '@angular/core/testing'; - -import { of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -describe('Angular async helper', () => { - let actuallyDone = false; - - beforeEach(() => { actuallyDone = false; }); - - afterEach(() => { expect(actuallyDone).toBe(true, 'actuallyDone should be true'); }); - - it('should run normal test', () => { actuallyDone = true; }); - - it('should run normal async test', (done: DoneFn) => { - setTimeout(() => { - actuallyDone = true; - done(); - }, 0); - }); - - it('should run async test with task', - async(() => { setTimeout(() => { actuallyDone = true; }, 0); })); - - it('should run async test with successful promise', async(() => { - const p = new Promise(resolve => { setTimeout(resolve, 10); }); - p.then(() => { actuallyDone = true; }); - })); - - it('should run async test with failed promise', async(() => { - const p = new Promise((resolve, reject) => { setTimeout(reject, 10); }); - p.catch(() => { actuallyDone = true; }); - })); - - // Use done. Cannot use setInterval with async or fakeAsync - // See https://github.com/angular/angular/issues/10127 - it('should run async test with successful delayed Observable', (done: DoneFn) => { - const source = of(true).pipe(delay(10)); - source.subscribe( - val => actuallyDone = true, - err => fail(err), - done - ); - }); - - // Cannot use setInterval from within an async zone test - // See https://github.com/angular/angular/issues/10127 - // xit('should run async test with successful delayed Observable', async(() => { - // const source = of(true).pipe(delay(10)); - // source.subscribe( - // val => actuallyDone = true, - // err => fail(err) - // ); - // })); - - // // Fail message: Error: 1 periodic timer(s) still in the queue - // // See https://github.com/angular/angular/issues/10127 - // xit('should run async test with successful delayed Observable', fakeAsync(() => { - // const source = of(true).pipe(delay(10)); - // source.subscribe( - // val => actuallyDone = true, - // err => fail(err) - // ); - - // tick(); - // })); - -}); diff --git a/docs_app/content/examples/testing/src/app/demo/demo-external-template.html b/docs_app/content/examples/testing/src/app/demo/demo-external-template.html deleted file mode 100644 index 4c2b23755f..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/demo-external-template.html +++ /dev/null @@ -1 +0,0 @@ -from external template diff --git a/docs_app/content/examples/testing/src/app/demo/demo-main.ts b/docs_app/content/examples/testing/src/app/demo/demo-main.ts deleted file mode 100644 index 9243428b7a..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/demo-main.ts +++ /dev/null @@ -1,5 +0,0 @@ -// main app entry point -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DemoModule } from './demo'; - -platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/docs_app/content/examples/testing/src/app/demo/demo.spec.ts b/docs_app/content/examples/testing/src/app/demo/demo.spec.ts deleted file mode 100644 index d65b9acfb8..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/demo.spec.ts +++ /dev/null @@ -1,153 +0,0 @@ -// #docplaster -import { - LightswitchComponent, - MasterService, - ValueService, - ReversePipe -} from './demo'; - -///////// Fakes ///////// -export class FakeValueService extends ValueService { - value = 'faked service value'; -} -//////////////////////// -describe('demo (no TestBed):', () => { - - // #docregion ValueService - // Straight Jasmine testing without Angular's testing support - describe('ValueService', () => { - let service: ValueService; - beforeEach(() => { service = new ValueService(); }); - - it('#getValue should return real value', () => { - expect(service.getValue()).toBe('real value'); - }); - - it('#getObservableValue should return value from observable', - (done: DoneFn) => { - service.getObservableValue().subscribe(value => { - expect(value).toBe('observable value'); - done(); - }); - }); - - it('#getPromiseValue should return value from a promise', - (done: DoneFn) => { - service.getPromiseValue().then(value => { - expect(value).toBe('promise value'); - done(); - }); - }); - }); - // #enddocregion ValueService - - // MasterService requires injection of a ValueService - // #docregion MasterService - describe('MasterService without Angular testing support', () => { - let masterService: MasterService; - - it('#getValue should return real value from the real service', () => { - masterService = new MasterService(new ValueService()); - expect(masterService.getValue()).toBe('real value'); - }); - - it('#getValue should return faked value from a fakeService', () => { - masterService = new MasterService(new FakeValueService()); - expect(masterService.getValue()).toBe('faked service value'); - }); - - it('#getValue should return faked value from a fake object', () => { - const fake = { getValue: () => 'fake value' }; - masterService = new MasterService(fake as ValueService); - expect(masterService.getValue()).toBe('fake value'); - }); - - it('#getValue should return stubbed value from a spy', () => { - // create `getValue` spy on an object representing the ValueService - const valueServiceSpy = - jasmine.createSpyObj('ValueService', ['getValue']); - - // set the value to return when the `getValue` spy is called. - const stubValue = 'stub value'; - valueServiceSpy.getValue.and.returnValue(stubValue); - - masterService = new MasterService(valueServiceSpy); - - expect(masterService.getValue()) - .toBe(stubValue, 'service returned stub value'); - expect(valueServiceSpy.getValue.calls.count()) - .toBe(1, 'spy method was called once'); - expect(valueServiceSpy.getValue.calls.mostRecent().returnValue) - .toBe(stubValue); - }); - }); - // #enddocregion MasterService - - describe('MasterService (no beforeEach)', () => { - // #docregion no-before-each-test - it('#getValue should return stubbed value from a spy', () => { - // #docregion no-before-each-setup-call - const { masterService, stubValue, valueServiceSpy } = setup(); - // #enddocregion no-before-each-setup-call - expect(masterService.getValue()) - .toBe(stubValue, 'service returned stub value'); - expect(valueServiceSpy.getValue.calls.count()) - .toBe(1, 'spy method was called once'); - expect(valueServiceSpy.getValue.calls.mostRecent().returnValue) - .toBe(stubValue); - }); - // #enddocregion no-before-each-test - - // #docregion no-before-each-setup - function setup() { - const valueServiceSpy = - jasmine.createSpyObj('ValueService', ['getValue']); - const stubValue = 'stub value'; - const masterService = new MasterService(valueServiceSpy); - - valueServiceSpy.getValue.and.returnValue(stubValue); - return { masterService, stubValue, valueServiceSpy }; - } - // #enddocregion no-before-each-setup - }); - - // #docregion ReversePipe - - describe('ReversePipe', () => { - let pipe: ReversePipe; - - beforeEach(() => { pipe = new ReversePipe(); }); - - it('transforms "abc" to "cba"', () => { - expect(pipe.transform('abc')).toBe('cba'); - }); - - it('no change to palindrome: "able was I ere I saw elba"', () => { - const palindrome = 'able was I ere I saw elba'; - expect(pipe.transform(palindrome)).toBe(palindrome); - }); - - }); - // #enddocregion ReversePipe - - // #docregion Lightswitch - describe('LightswitchComp', () => { - it('#clicked() should toggle #isOn', () => { - const comp = new LightswitchComponent(); - expect(comp.isOn).toBe(false, 'off at first'); - comp.clicked(); - expect(comp.isOn).toBe(true, 'on after click'); - comp.clicked(); - expect(comp.isOn).toBe(false, 'off after second click'); - }); - - it('#clicked() should set #message to "is on"', () => { - const comp = new LightswitchComponent(); - expect(comp.message).toMatch(/is off/i, 'off at first'); - comp.clicked(); - expect(comp.message).toMatch(/is on/i, 'on after clicked'); - }); - }); - // #enddocregion Lightswitch - -}); diff --git a/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts deleted file mode 100644 index 2c0ba58e99..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts +++ /dev/null @@ -1,706 +0,0 @@ -// #docplaster -import { - DemoModule, - BankAccountComponent, BankAccountParentComponent, - LightswitchComponent, - Child1Component, Child2Component, Child3Component, - MasterService, - ValueService, - ExternalTemplateComponent, - InputComponent, - IoComponent, IoParentComponent, - MyIfComponent, MyIfChildComponent, MyIfParentComponent, - NeedsContentComponent, ParentComponent, - TestProvidersComponent, TestViewProvidersComponent, - ReversePipeComponent, ShellComponent -} from './demo'; - -import { By } from '@angular/platform-browser'; -import { Component, - DebugElement, - Injectable } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -// Forms symbols imported only for a specific test below -import { NgModel, NgControl } from '@angular/forms'; - -import { async, ComponentFixture, fakeAsync, inject, TestBed, tick -} from '@angular/core/testing'; - -import { addMatchers, newEvent, click } from '../../testing'; - -export class NotProvided extends ValueService { /* example below */} -beforeEach( addMatchers ); - -describe('demo (with TestBed):', () => { - -//////// Service Tests ///////////// - - // #docregion ValueService - describe('ValueService', () => { - - // #docregion value-service-before-each - let service: ValueService; - - // #docregion value-service-inject-before-each - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); - // #enddocregion value-service-before-each - service = TestBed.get(ValueService); - // #docregion value-service-before-each - }); - // #enddocregion value-service-before-each, value-service-inject-before-each - - // #docregion value-service-inject-it - it('should use ValueService', () => { - service = TestBed.get(ValueService); - expect(service.getValue()).toBe('real value'); - }); - // #enddocregion value-service-inject-it - - it('can inject a default value when service is not provided', () => { - // #docregion testbed-get-w-null - service = TestBed.get(NotProvided, null); // service is null - // #enddocregion testbed-get-w-null - }); - - it('test should wait for ValueService.getPromiseValue', async(() => { - service.getPromiseValue().then( - value => expect(value).toBe('promise value') - ); - })); - - it('test should wait for ValueService.getObservableValue', async(() => { - service.getObservableValue().subscribe( - value => expect(value).toBe('observable value') - ); - })); - - // Must use done. See https://github.com/angular/angular/issues/10127 - it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => { - service.getObservableDelayValue().subscribe(value => { - expect(value).toBe('observable delay value'); - done(); - }); - }); - - it('should allow the use of fakeAsync', fakeAsync(() => { - let value: any; - service.getPromiseValue().then((val: any) => value = val); - tick(); // Trigger JS engine cycle until all promises resolve. - expect(value).toBe('promise value'); - })); - }); - // #enddocregion ValueService - - describe('MasterService', () => { - // #docregion master-service-before-each - let masterService: MasterService; - let valueServiceSpy: jasmine.SpyObj; - - beforeEach(() => { - const spy = jasmine.createSpyObj('ValueService', ['getValue']); - - TestBed.configureTestingModule({ - // Provide both the service-to-test and its (spy) dependency - providers: [ - MasterService, - { provide: ValueService, useValue: spy } - ] - }); - // Inject both the service-to-test and its (spy) dependency - masterService = TestBed.get(MasterService); - valueServiceSpy = TestBed.get(ValueService); - }); - // #enddocregion master-service-before-each - - // #docregion master-service-it - it('#getValue should return stubbed value from a spy', () => { - const stubValue = 'stub value'; - valueServiceSpy.getValue.and.returnValue(stubValue); - - expect(masterService.getValue()) - .toBe(stubValue, 'service returned stub value'); - expect(valueServiceSpy.getValue.calls.count()) - .toBe(1, 'spy method was called once'); - expect(valueServiceSpy.getValue.calls.mostRecent().returnValue) - .toBe(stubValue); - }); - // #enddocregion master-service-it - }); - - describe('use inject within `it`', () => { - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); - }); - - it('should use modified providers', - inject([ValueService], (service: ValueService) => { - service.setValue('value modified in beforeEach'); - expect(service.getValue()) - .toBe('value modified in beforeEach'); - }) - ); - }); - - describe('using async(inject) within beforeEach', () => { - let serviceValue: string; - - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ValueService] }); - }); - - beforeEach(async(inject([ValueService], (service: ValueService) => { - service.getPromiseValue().then(value => serviceValue = value); - }))); - - it('should use asynchronously modified value ... in synchronous test', () => { - expect(serviceValue).toBe('promise value'); - }); - }); - -/////////// Component Tests ////////////////// - - describe('TestBed component tests', () => { - - beforeEach(async(() => { - TestBed - .configureTestingModule({ - imports: [DemoModule], - }) - // Compile everything in DemoModule - .compileComponents(); - })); - - it('should create a component with inline template', () => { - const fixture = TestBed.createComponent(Child1Component); - fixture.detectChanges(); - - expect(fixture).toHaveText('Child'); - }); - - it('should create a component with external template', () => { - const fixture = TestBed.createComponent(ExternalTemplateComponent); - fixture.detectChanges(); - - expect(fixture).toHaveText('from external template'); - }); - - it('should allow changing members of the component', () => { - const fixture = TestBed.createComponent(MyIfComponent); - - fixture.detectChanges(); - expect(fixture).toHaveText('MyIf()'); - - fixture.componentInstance.showMore = true; - fixture.detectChanges(); - expect(fixture).toHaveText('MyIf(More)'); - }); - - it('should create a nested component bound to inputs/outputs', () => { - const fixture = TestBed.createComponent(IoParentComponent); - - fixture.detectChanges(); - const heroes = fixture.debugElement.queryAll(By.css('.hero')); - expect(heroes.length).toBeGreaterThan(0, 'has heroes'); - - const comp = fixture.componentInstance; - const hero = comp.heroes[0]; - - click(heroes[0]); - fixture.detectChanges(); - - const selected = fixture.debugElement.query(By.css('p')); - expect(selected).toHaveText(hero.name); - }); - - it('can access the instance variable of an `*ngFor` row component', () => { - const fixture = TestBed.createComponent(IoParentComponent); - const comp = fixture.componentInstance; - const heroName = comp.heroes[0].name; // first hero's name - - fixture.detectChanges(); - const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow - - const hero = ngForRow.context['hero']; // the hero object passed into the row - expect(hero.name).toBe(heroName, 'ngRow.context.hero'); - - const rowComp = ngForRow.componentInstance; - // jasmine.any is an "instance-of-type" test. - expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp'); - expect(rowComp.hero.name).toBe(heroName, 'component.hero'); - }); - - - // #docregion ButtonComp - it('should support clicking a button', () => { - const fixture = TestBed.createComponent(LightswitchComponent); - const btn = fixture.debugElement.query(By.css('button')); - const span = fixture.debugElement.query(By.css('span')).nativeElement; - - fixture.detectChanges(); - expect(span.textContent).toMatch(/is off/i, 'before click'); - - click(btn); - fixture.detectChanges(); - expect(span.textContent).toMatch(/is on/i, 'after click'); - }); - // #enddocregion ButtonComp - - // ngModel is async so we must wait for it with promise-based `whenStable` - it('should support entering text in input box (ngModel)', async(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; - - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); - - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement; - - expect(comp.name).toBe(expectedOrigName, - `At start name should be ${expectedOrigName} `); - - // wait until ngModel binds comp.name to input box - fixture.whenStable().then(() => { - expect(input.value).toBe(expectedOrigName, - `After ngModel updates input box, input.value should be ${expectedOrigName} `); - - // simulate user entering new name in input - input.value = expectedNewName; - - // that change doesn't flow to the component immediately - expect(comp.name).toBe(expectedOrigName, - `comp.name should still be ${expectedOrigName} after value change, before binding happens`); - - // dispatch a DOM event so that Angular learns of input value change. - // then wait while ngModel pushes input.box value to comp.name - input.dispatchEvent(newEvent('input')); - return fixture.whenStable(); - }) - .then(() => { - expect(comp.name).toBe(expectedNewName, - `After ngModel updates the model, comp.name should be ${expectedNewName} `); - }); - })); - - // fakeAsync version of ngModel input test enables sync test style - // synchronous `tick` replaces asynchronous promise-base `whenStable` - it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => { - const expectedOrigName = 'John'; - const expectedNewName = 'Sally'; - - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); - - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement; - - expect(comp.name).toBe(expectedOrigName, - `At start name should be ${expectedOrigName} `); - - // wait until ngModel binds comp.name to input box - tick(); - expect(input.value).toBe(expectedOrigName, - `After ngModel updates input box, input.value should be ${expectedOrigName} `); - - // simulate user entering new name in input - input.value = expectedNewName; - - // that change doesn't flow to the component immediately - expect(comp.name).toBe(expectedOrigName, - `comp.name should still be ${expectedOrigName} after value change, before binding happens`); - - // dispatch a DOM event so that Angular learns of input value change. - // then wait a tick while ngModel pushes input.box value to comp.name - input.dispatchEvent(newEvent('input')); - tick(); - expect(comp.name).toBe(expectedNewName, - `After ngModel updates the model, comp.name should be ${expectedNewName} `); - })); - - // #docregion ReversePipeComp - it('ReversePipeComp should reverse the input text', fakeAsync(() => { - const inputText = 'the quick brown fox.'; - const expectedText = '.xof nworb kciuq eht'; - - const fixture = TestBed.createComponent(ReversePipeComponent); - fixture.detectChanges(); - - const comp = fixture.componentInstance; - const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement; - const span = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement; - - // simulate user entering new name in input - input.value = inputText; - - // dispatch a DOM event so that Angular learns of input value change. - // then wait a tick while ngModel pushes input.box value to comp.text - // and Angular updates the output span - input.dispatchEvent(newEvent('input')); - tick(); - fixture.detectChanges(); - expect(span.textContent).toBe(expectedText, 'output span'); - expect(comp.text).toBe(inputText, 'component.text'); - })); - // #enddocregion ReversePipeComp - - // Use this technique to find attached directives of any kind - it('can examine attached directives and listeners', () => { - const fixture = TestBed.createComponent(InputComponent); - fixture.detectChanges(); - - const inputEl = fixture.debugElement.query(By.css('input')); - - expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive'); - - const ngControl = inputEl.injector.get(NgControl); - expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive'); - - expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached'); - }); - - // #docregion dom-attributes - it('BankAccountComponent should set attributes, styles, classes, and properties', () => { - const fixture = TestBed.createComponent(BankAccountParentComponent); - fixture.detectChanges(); - const comp = fixture.componentInstance; - - // the only child is debugElement of the BankAccount component - const el = fixture.debugElement.children[0]; - const childComp = el.componentInstance as BankAccountComponent; - expect(childComp).toEqual(jasmine.any(BankAccountComponent)); - - expect(el.context).toBe(childComp, 'context is the child component'); - - expect(el.attributes['account']).toBe(childComp.id, 'account attribute'); - expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute'); - - expect(el.classes['closed']).toBe(true, 'closed class'); - expect(el.classes['open']).toBe(false, 'open class'); - - expect(el.styles['color']).toBe(comp.color, 'color style'); - expect(el.styles['width']).toBe(comp.width + 'px', 'width style'); - // #enddocregion dom-attributes - - // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future? - // expect(el.properties['customProperty']).toBe(true, 'customProperty'); - - // #docregion dom-attributes - }); - // #enddocregion dom-attributes - - - }); - - describe('TestBed component overrides:', () => { - - it('should override ChildComp\'s template', () => { - - const fixture = TestBed.configureTestingModule({ - declarations: [Child1Component], - }) - .overrideComponent(Child1Component, { - set: { template: 'Fake' } - }) - .createComponent(Child1Component); - - fixture.detectChanges(); - expect(fixture).toHaveText('Fake'); - }); - - it('should override TestProvidersComp\'s ValueService provider', () => { - const fixture = TestBed.configureTestingModule({ - declarations: [TestProvidersComponent], - }) - .overrideComponent(TestProvidersComponent, { - remove: { providers: [ValueService]}, - add: { providers: [{ provide: ValueService, useClass: FakeValueService }] }, - - // Or replace them all (this component has only one provider) - // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }, - }) - .createComponent(TestProvidersComponent); - - fixture.detectChanges(); - expect(fixture).toHaveText('injected value: faked value', 'text'); - - // Explore the providerTokens - const tokens = fixture.debugElement.providerTokens; - expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor'); - expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp'); - expect(tokens).toContain(ValueService, 'ValueService'); - }); - - it('should override TestViewProvidersComp\'s ValueService viewProvider', () => { - const fixture = TestBed.configureTestingModule({ - declarations: [TestViewProvidersComponent], - }) - .overrideComponent(TestViewProvidersComponent, { - // remove: { viewProviders: [ValueService]}, - // add: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] }, - - // Or replace them all (this component has only one viewProvider) - set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] }, - }) - .createComponent(TestViewProvidersComponent); - - fixture.detectChanges(); - expect(fixture).toHaveText('injected value: faked value'); - }); - - it('injected provider should not be same as component\'s provider', () => { - - // TestComponent is parent of TestProvidersComponent - @Component({ template: '' }) - class TestComponent {} - - // 3 levels of ValueService provider: module, TestCompomponent, TestProvidersComponent - const fixture = TestBed.configureTestingModule({ - declarations: [TestComponent, TestProvidersComponent], - providers: [ValueService] - }) - .overrideComponent(TestComponent, { - set: { providers: [{ provide: ValueService, useValue: {} }] } - }) - .overrideComponent(TestProvidersComponent, { - set: { providers: [{ provide: ValueService, useClass: FakeValueService }] } - }) - .createComponent(TestComponent); - - let testBedProvider: ValueService; - let tcProvider: ValueService; - let tpcProvider: FakeValueService; - - // `inject` uses TestBed's injector - inject([ValueService], (s: ValueService) => testBedProvider = s)(); - tcProvider = fixture.debugElement.injector.get(ValueService) as ValueService; - tpcProvider = fixture.debugElement.children[0].injector.get(ValueService) as FakeValueService; - - expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers'); - expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers'); - - expect(testBedProvider instanceof ValueService).toBe(true, 'testBedProvider is ValueService'); - expect(tcProvider).toEqual({} as ValueService, 'tcProvider is {}'); - expect(tpcProvider instanceof FakeValueService).toBe(true, 'tpcProvider is FakeValueService'); - }); - - it('can access template local variables as references', () => { - const fixture = TestBed.configureTestingModule({ - declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component], - }) - .overrideComponent(ShellComponent, { - set: { - selector: 'test-shell', - template: ` - - - - - -
    !
    -     - ` - } - }) - .createComponent(ShellComponent); - - fixture.detectChanges(); - - // NeedsContentComp is the child of ShellComp - const el = fixture.debugElement.children[0]; - const comp = el.componentInstance; - - expect(comp.children.toArray().length).toBe(4, - 'three different child components and an ElementRef with #content'); - - expect(el.references['nc']).toBe(comp, '#nc reference to component'); - - // #docregion custom-predicate - // Filter for DebugElements with a #content reference - const contentRefs = el.queryAll( de => de.references['content']); - // #enddocregion custom-predicate - expect(contentRefs.length).toBe(4, 'elements w/ a #content reference'); - }); - - }); - - describe('nested (one-deep) component override', () => { - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ParentComponent, FakeChildComponent] - }); - }); - - it('ParentComp should use Fake Child component', () => { - const fixture = TestBed.createComponent(ParentComponent); - fixture.detectChanges(); - expect(fixture).toHaveText('Parent(Fake Child)'); - }); - }); - - describe('nested (two-deep) component override', () => { - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent] - }); - }); - - it('should use Fake Grandchild component', () => { - const fixture = TestBed.createComponent(ParentComponent); - fixture.detectChanges(); - expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))'); - }); - }); - - describe('lifecycle hooks w/ MyIfParentComp', () => { - let fixture: ComponentFixture; - let parent: MyIfParentComponent; - let child: MyIfChildComponent; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [FormsModule], - declarations: [MyIfChildComponent, MyIfParentComponent] - }); - - fixture = TestBed.createComponent(MyIfParentComponent); - parent = fixture.componentInstance; - }); - - it('should instantiate parent component', () => { - expect(parent).not.toBeNull('parent component should exist'); - }); - - it('parent component OnInit should NOT be called before first detectChanges()', () => { - expect(parent.ngOnInitCalled).toBe(false); - }); - - it('parent component OnInit should be called after first detectChanges()', () => { - fixture.detectChanges(); - expect(parent.ngOnInitCalled).toBe(true); - }); - - it('child component should exist after OnInit', () => { - fixture.detectChanges(); - getChild(); - expect(child instanceof MyIfChildComponent).toBe(true, 'should create child'); - }); - - it('should have called child component\'s OnInit ', () => { - fixture.detectChanges(); - getChild(); - expect(child.ngOnInitCalled).toBe(true); - }); - - it('child component called OnChanges once', () => { - fixture.detectChanges(); - getChild(); - expect(child.ngOnChangesCounter).toBe(1); - }); - - it('changed parent value flows to child', () => { - fixture.detectChanges(); - getChild(); - - parent.parentValue = 'foo'; - fixture.detectChanges(); - - expect(child.ngOnChangesCounter).toBe(2, - 'expected 2 changes: initial value and changed value'); - expect(child.childValue).toBe('foo', - 'childValue should eq changed parent value'); - }); - - // must be async test to see child flow to parent - it('changed child value flows to parent', async(() => { - fixture.detectChanges(); - getChild(); - - child.childValue = 'bar'; - - return new Promise(resolve => { - // Wait one JS engine turn! - setTimeout(() => resolve(), 0); - }) - .then(() => { - fixture.detectChanges(); - - expect(child.ngOnChangesCounter).toBe(2, - 'expected 2 changes: initial value and changed value'); - expect(parent.parentValue).toBe('bar', - 'parentValue should eq changed parent value'); - }); - - })); - - it('clicking "Close Child" triggers child OnDestroy', () => { - fixture.detectChanges(); - getChild(); - - const btn = fixture.debugElement.query(By.css('button')); - click(btn); - - fixture.detectChanges(); - expect(child.ngOnDestroyCalled).toBe(true); - }); - - ////// helpers /// - /** - * Get the MyIfChildComp from parent; fail w/ good message if cannot. - */ - function getChild() { - - let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp - - // The Hard Way: requires detailed knowledge of the parent template - try { - childDe = fixture.debugElement.children[4].children[0]; - } catch (err) { /* we'll report the error */ } - - // DebugElement.queryAll: if we wanted all of many instances: - childDe = fixture.debugElement - .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0]; - - // WE'LL USE THIS APPROACH ! - // DebugElement.query: find first instance (if any) - childDe = fixture.debugElement - .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; }); - - if (childDe && childDe.componentInstance) { - child = childDe.componentInstance; - } else { - fail('Unable to find MyIfChildComp within MyIfParentComp'); - } - - return child; - } - }); - -}); -////////// Fakes /////////// - -@Component({ - selector: 'child-1', - template: `Fake Child` -}) -class FakeChildComponent { } - -@Component({ - selector: 'child-1', - template: `Fake Child()` -}) -class FakeChildWithGrandchildComponent { } - -@Component({ - selector: 'grandchild-1', - template: `Fake Grandchild` -}) -class FakeGrandchildComponent { } - -@Injectable() -class FakeValueService extends ValueService { - value = 'faked value'; -} diff --git a/docs_app/content/examples/testing/src/app/demo/demo.ts b/docs_app/content/examples/testing/src/app/demo/demo.ts deleted file mode 100644 index 674bc14a57..0000000000 --- a/docs_app/content/examples/testing/src/app/demo/demo.ts +++ /dev/null @@ -1,439 +0,0 @@ -/* tslint:disable:forin */ -import { Component, ContentChildren, Directive, EventEmitter, - Injectable, Input, Output, Optional, - HostBinding, HostListener, - OnInit, OnChanges, OnDestroy, - Pipe, PipeTransform, - SimpleChange } from '@angular/core'; - -import { of } from 'rxjs'; -import { delay } from 'rxjs/operators'; - -////////// The App: Services and Components for the tests. ////////////// - -export class Hero { - name: string; -} - -////////// Services /////////////// -// #docregion ValueService -@Injectable() -export class ValueService { - protected value = 'real value'; - - getValue() { return this.value; } - setValue(value: string) { this.value = value; } - - getObservableValue() { return of('observable value'); } - - getPromiseValue() { return Promise.resolve('promise value'); } - - getObservableDelayValue() { - return of('observable delay value').pipe(delay(10)); - } -} -// #enddocregion ValueService - -// #docregion MasterService -@Injectable() -export class MasterService { - constructor(private masterService: ValueService) { } - getValue() { return this.masterService.getValue(); } -} -// #enddocregion MasterService - -/////////// Pipe //////////////// -/* - * Reverse the input string. -*/ -// #docregion ReversePipe -@Pipe({ name: 'reverse' }) -export class ReversePipe implements PipeTransform { - transform(s: string) { - let r = ''; - for (let i = s.length; i; ) { r += s[--i]; }; - return r; - } -} -// #enddocregion ReversePipe - -//////////// Components ///////////// -@Component({ - selector: 'bank-account', - template: ` - Bank Name: {{bank}} - Account Id: {{id}} - ` -}) -export class BankAccountComponent { - @Input() bank: string; - @Input('account') id: string; - - // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future? - // constructor(private renderer: Renderer, private el: ElementRef ) { - // renderer.setElementProperty(el.nativeElement, 'customProperty', true); - // } -} - -/** A component with attributes, styles, classes, and property setting */ -@Component({ - selector: 'bank-account-parent', - template: ` - - - ` -}) -export class BankAccountParentComponent { - width = 200; - color = 'red'; - isClosed = true; -} - -// #docregion LightswitchComp -@Component({ - selector: 'lightswitch-comp', - template: ` - - {{message}}` -}) -export class LightswitchComponent { - isOn = false; - clicked() { this.isOn = !this.isOn; } - get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; } -} -// #enddocregion LightswitchComp - -@Component({ - selector: 'child-1', - template: `Child-1({{text}})` -}) -export class Child1Component { - @Input() text = 'Original'; -} - -@Component({ - selector: 'child-2', - template: '
    Child-2({{text}})
    ' -}) -export class Child2Component { - @Input() text: string; -} - -@Component({ - selector: 'child-3', - template: '
    Child-3({{text}})
    ' -}) -export class Child3Component { - @Input() text: string; -} - -@Component({ - selector: 'input-comp', - template: `` -}) -export class InputComponent { - name = 'John'; -} - -/* Prefer this metadata syntax */ -// @Directive({ -// selector: 'input[value]', -// host: { -// '[value]': 'value', -// '(input)': 'valueChange.emit($event.target.value)' -// }, -// inputs: ['value'], -// outputs: ['valueChange'] -// }) -// export class InputValueBinderDirective { -// value: any; -// valueChange: EventEmitter = new EventEmitter(); -// } - -// As the styleguide recommends -@Directive({ selector: 'input[value]' }) -export class InputValueBinderDirective { - @HostBinding() - @Input() - value: any; - - @Output() - valueChange: EventEmitter = new EventEmitter(); - - @HostListener('input', ['$event.target.value']) - onInput(value: any) { this.valueChange.emit(value); } -} - -@Component({ - selector: 'input-value-comp', - template: ` - Name: {{name}} - ` -}) -export class InputValueBinderComponent { - name = 'Sally'; // initial value -} - -@Component({ - selector: 'parent-comp', - template: `Parent()` -}) -export class ParentComponent { } - -@Component({ - selector: 'io-comp', - template: `
    Original {{hero.name}}
    ` -}) -export class IoComponent { - @Input() hero: Hero; - @Output() selected = new EventEmitter(); - click() { this.selected.emit(this.hero); } -} - -@Component({ - selector: 'io-parent-comp', - template: ` -

    Click to select a hero

    -

    The selected hero is {{selectedHero.name}}

    - - - ` -}) -export class IoParentComponent { - heroes: Hero[] = [ {name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'} ]; - selectedHero: Hero; - onSelect(hero: Hero) { this.selectedHero = hero; } -} - -@Component({ - selector: 'my-if-comp', - template: `MyIf(More)` -}) -export class MyIfComponent { - showMore = false; -} - -@Component({ - selector: 'my-service-comp', - template: `injected value: {{valueService.value}}`, - providers: [ValueService] -}) -export class TestProvidersComponent { - constructor(public valueService: ValueService) {} -} - - -@Component({ - selector: 'my-service-comp', - template: `injected value: {{valueService.value}}`, - viewProviders: [ValueService] -}) -export class TestViewProvidersComponent { - constructor(public valueService: ValueService) {} -} - -@Component({ - selector: 'external-template-comp', - templateUrl: './demo-external-template.html' -}) -export class ExternalTemplateComponent implements OnInit { - serviceValue: string; - - constructor(@Optional() private service: ValueService) { } - - ngOnInit() { - if (this.service) { this.serviceValue = this.service.getValue(); } - } -} - -@Component({ - selector: 'comp-w-ext-comp', - template: ` -

    comp-w-ext-comp

    - - ` -}) -export class InnerCompWithExternalTemplateComponent { } - -@Component({selector: 'needs-content', template: ''}) -export class NeedsContentComponent { - // children with #content local variable - @ContentChildren('content') children: any; -} - -///////// MyIfChildComp //////// -@Component({ - selector: 'my-if-child-1', - - template: ` -

    MyIfChildComp

    -
    - -
    -

    Change log:

    -
    {{i + 1}} - {{log}}
    ` -}) -export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy { - @Input() value = ''; - @Output() valueChange = new EventEmitter(); - - get childValue() { return this.value; } - set childValue(v: string) { - if (this.value === v) { return; } - this.value = v; - this.valueChange.emit(v); - } - - changeLog: string[] = []; - - ngOnInitCalled = false; - ngOnChangesCounter = 0; - ngOnDestroyCalled = false; - - ngOnInit() { - this.ngOnInitCalled = true; - this.changeLog.push('ngOnInit called'); - } - - ngOnDestroy() { - this.ngOnDestroyCalled = true; - this.changeLog.push('ngOnDestroy called'); - } - - ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - for (let propName in changes) { - this.ngOnChangesCounter += 1; - let prop = changes[propName]; - let cur = JSON.stringify(prop.currentValue); - let prev = JSON.stringify(prop.previousValue); - this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); - } - } -} - -///////// MyIfParentComp //////// - -@Component({ - selector: 'my-if-parent-comp', - template: ` -

    MyIfParentComp

    - -
    -
    - -
    - ` -}) -export class MyIfParentComponent implements OnInit { - ngOnInitCalled = false; - parentValue = 'Hello, World'; - showChild = false; - toggleLabel = 'Unknown'; - - ngOnInit() { - this.ngOnInitCalled = true; - this.clicked(); - } - - clicked() { - this.showChild = !this.showChild; - this.toggleLabel = this.showChild ? 'Close' : 'Show'; - } -} - - -@Component({ - selector: 'reverse-pipe-comp', - template: ` - - {{text | reverse}} - ` -}) -export class ReversePipeComponent { - text = 'my dog has fleas.'; -} - -@Component({template: '
    Replace Me
    '}) -export class ShellComponent { } - -@Component({ - selector: 'demo-comp', - template: ` -

    Specs Demo

    - -
    -

    Input/Output Component

    - -
    -

    External Template Component

    - -
    -

    Component With External Template Component

    - -
    -

    Reverse Pipe

    - -
    -

    InputValueBinder Directive

    - -
    -

    Button Component

    - -
    -

    Needs Content

    - - - - - -
    !
    -     - ` -}) -export class DemoComponent { } -//////// Aggregations //////////// - -export const demoDeclarations = [ - DemoComponent, - BankAccountComponent, BankAccountParentComponent, - LightswitchComponent, - Child1Component, Child2Component, Child3Component, - ExternalTemplateComponent, InnerCompWithExternalTemplateComponent, - InputComponent, - InputValueBinderDirective, InputValueBinderComponent, - IoComponent, IoParentComponent, - MyIfComponent, MyIfChildComponent, MyIfParentComponent, - NeedsContentComponent, ParentComponent, - TestProvidersComponent, TestViewProvidersComponent, - ReversePipe, ReversePipeComponent, ShellComponent -]; - -export const demoProviders = [MasterService, ValueService]; - -//////////////////// -//////////// -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: demoDeclarations, - providers: demoProviders, - entryComponents: [DemoComponent], - bootstrap: [DemoComponent] -}) -export class DemoModule { } - diff --git a/docs_app/content/examples/testing/src/app/dummy.module.ts b/docs_app/content/examples/testing/src/app/dummy.module.ts deleted file mode 100644 index 7ca52420d2..0000000000 --- a/docs_app/content/examples/testing/src/app/dummy.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -// These unused NgModules keep the Angular Language Service happy. -// The AppModule registers the final versions of these components -import { NgModule } from '@angular/core'; - -import { AppComponent as app_initial } from './app-initial.component'; -@NgModule({ declarations: [ app_initial ] }) -export class AppModuleInitial {} - -import { BannerComponent as bc_initial } from './banner/banner-initial.component'; -@NgModule({ declarations: [ bc_initial ] }) -export class BannerModuleInitial {} - -import { BannerComponent as bc_external } from './banner/banner-external.component'; -@NgModule({ declarations: [ bc_external ] }) -export class BannerModuleExternal {} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css deleted file mode 100644 index f6139ba274..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css +++ /dev/null @@ -1,29 +0,0 @@ -label { - display: inline-block; - width: 3em; - margin: .5em 0; - color: #607D8B; - font-weight: bold; -} -input { - height: 2em; - font-size: 1em; - padding-left: .4em; -} -button { - margin-top: 20px; - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #ccc; - cursor: auto; -} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html deleted file mode 100644 index 7e86a668f6..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html +++ /dev/null @@ -1,12 +0,0 @@ - -
    -

    {{hero.name | titlecase}} Details

    -
    - {{hero.id}}
    -
    - - -
    - - -
    diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts deleted file mode 100644 index 4e806da3f9..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { asyncData, ActivatedRouteStub } from '../../testing'; - -import { HeroDetailComponent } from './hero-detail.component'; -import { Hero } from '../model/hero'; - -////////// Tests //////////////////// - -describe('HeroDetailComponent - no TestBed', () => { - let activatedRoute: ActivatedRouteStub; - let comp: HeroDetailComponent; - let expectedHero: Hero; - let hds: any; - let router: any; - - beforeEach((done: DoneFn) => { - expectedHero = {id: 42, name: 'Bubba' }; - const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id }); - router = jasmine.createSpyObj('router', ['navigate']); - - hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']); - hds.getHero.and.returnValue(asyncData(expectedHero)); - hds.saveHero.and.returnValue(asyncData(expectedHero)); - - comp = new HeroDetailComponent(hds, activatedRoute, router); - comp.ngOnInit(); - - // OnInit calls HDS.getHero; wait for it to get the fake hero - hds.getHero.calls.first().returnValue.subscribe(done); - - }); - - it('should expose the hero retrieved from the service', () => { - expect(comp.hero).toBe(expectedHero); - }); - - it('should navigate when click cancel', () => { - comp.cancel(); - expect(router.navigate.calls.any()).toBe(true, 'router.navigate called'); - }); - - it('should save when click save', () => { - comp.save(); - expect(hds.saveHero.calls.any()).toBe(true, 'HeroDetailService.save called'); - expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet'); - }); - - it('should navigate when click save resolves', (done: DoneFn) => { - comp.save(); - // waits for async save to complete before navigating - hds.saveHero.calls.first().returnValue - .subscribe(() => { - expect(router.navigate.calls.any()).toBe(true, 'router.navigate called'); - done(); - }); - }); - -}); diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts deleted file mode 100644 index 2989c6e05a..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts +++ /dev/null @@ -1,381 +0,0 @@ -// #docplaster -import { - async, ComponentFixture, fakeAsync, inject, TestBed, tick -} from '@angular/core/testing'; - -import { Router } from '@angular/router'; - -import { - ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent -} from '../../testing'; - -import { Hero } from '../model/hero'; -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroDetailService } from './hero-detail.service'; -import { HeroModule } from './hero.module'; - -////// Testing Vars ////// -let activatedRoute: ActivatedRouteStub; -let component: HeroDetailComponent; -let fixture: ComponentFixture; -let page: Page; - -////// Tests ////// -describe('HeroDetailComponent', () => { - beforeEach(() => { - activatedRoute = new ActivatedRouteStub(); - }); - describe('with HeroModule setup', heroModuleSetup); - describe('when override its provided HeroDetailService', overrideSetup); - describe('with FormsModule setup', formsModuleSetup); - describe('with SharedModule setup', sharedModuleSetup); -}); - -/////////////////// - -function overrideSetup() { - // #docregion hds-spy - class HeroDetailServiceSpy { - testHero: Hero = {id: 42, name: 'Test Hero' }; - - /* emit cloned test hero */ - getHero = jasmine.createSpy('getHero').and.callFake( - () => asyncData(Object.assign({}, this.testHero)) - ); - - /* emit clone of test hero, with changes merged in */ - saveHero = jasmine.createSpy('saveHero').and.callFake( - (hero: Hero) => asyncData(Object.assign(this.testHero, hero)) - ); - } - - // #enddocregion hds-spy - - // the `id` value is irrelevant because ignored by service stub - beforeEach(() => activatedRoute.setParamMap({ id: 99999 })); - - // #docregion setup-override - beforeEach(async(() => { - const routerSpy = createRouterSpy(); - - TestBed.configureTestingModule({ - imports: [ HeroModule ], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: Router, useValue: routerSpy}, - // #enddocregion setup-override - // HeroDetailService at this level is IRRELEVANT! - { provide: HeroDetailService, useValue: {} } - // #docregion setup-override - ] - }) - - // Override component's own provider - // #docregion override-component-method - .overrideComponent(HeroDetailComponent, { - set: { - providers: [ - { provide: HeroDetailService, useClass: HeroDetailServiceSpy } - ] - } - }) - // #enddocregion override-component-method - - .compileComponents(); - })); - // #enddocregion setup-override - - // #docregion override-tests - let hdsSpy: HeroDetailServiceSpy; - - beforeEach(async(() => { - createComponent(); - // get the component's injected HeroDetailServiceSpy - hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any; - })); - - it('should have called `getHero`', () => { - expect(hdsSpy.getHero.calls.count()).toBe(1, 'getHero called once'); - }); - - it('should display stub hero\'s name', () => { - expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name); - }); - - it('should save stub hero change', fakeAsync(() => { - const origName = hdsSpy.testHero.name; - const newName = 'New Name'; - - page.nameInput.value = newName; - page.nameInput.dispatchEvent(newEvent('input')); // tell Angular - - expect(component.hero.name).toBe(newName, 'component hero has new name'); - expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save'); - - click(page.saveBtn); - expect(hdsSpy.saveHero.calls.count()).toBe(1, 'saveHero called once'); - - tick(); // wait for async save to complete - expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save'); - expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'); - })); - // #enddocregion override-tests - - it('fixture injected service is not the component injected service', - // inject gets the service from the fixture - inject([HeroDetailService], (fixtureService: HeroDetailService) => { - - // use `fixture.debugElement.injector` to get service from component - const componentService = fixture.debugElement.injector.get(HeroDetailService); - - expect(fixtureService).not.toBe(componentService, 'service injected from fixture'); - })); -} - -//////////////////// -import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service'; - -const firstHero = getTestHeroes()[0]; - -function heroModuleSetup() { - // #docregion setup-hero-module - beforeEach(async(() => { - const routerSpy = createRouterSpy(); - - TestBed.configureTestingModule({ - imports: [ HeroModule ], - // #enddocregion setup-hero-module - // declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION - // #docregion setup-hero-module - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy}, - ] - }) - .compileComponents(); - })); - // #enddocregion setup-hero-module - - // #docregion route-good-id - describe('when navigate to existing hero', () => { - let expectedHero: Hero; - - beforeEach(async(() => { - expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - createComponent(); - })); - - // #docregion selected-tests - it('should display that hero\'s name', () => { - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - // #enddocregion route-good-id - - it('should navigate when click cancel', () => { - click(page.cancelBtn); - expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'); - }); - - it('should save when click save but not navigate immediately', () => { - // Get service injected into component and spy on its`saveHero` method. - // It delegates to fake `HeroService.updateHero` which delivers a safe test result. - const hds = fixture.debugElement.injector.get(HeroDetailService); - const saveSpy = spyOn(hds, 'saveHero').and.callThrough(); - - click(page.saveBtn); - expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called'); - expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called'); - }); - - it('should navigate when click save and save resolves', fakeAsync(() => { - click(page.saveBtn); - tick(); // wait for async save to complete - expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'); - })); - - // #docregion title-case-pipe - it('should convert hero name to Title Case', () => { - // get the name's input and display elements from the DOM - const hostElement = fixture.nativeElement; - const nameInput: HTMLInputElement = hostElement.querySelector('input'); - const nameDisplay: HTMLElement = hostElement.querySelector('span'); - - // simulate user entering a new name into the input box - nameInput.value = 'quick BROWN fOx'; - - // dispatch a DOM event so that Angular learns of input value change. - nameInput.dispatchEvent(newEvent('input')); - - // Tell Angular to update the display binding through the title pipe - fixture.detectChanges(); - - expect(nameDisplay.textContent).toBe('Quick Brown Fox'); - }); - // #enddocregion title-case-pipe - // #enddocregion selected-tests - // #docregion route-good-id - }); - // #enddocregion route-good-id - - // #docregion route-no-id - describe('when navigate with no hero id', () => { - beforeEach(async( createComponent )); - - it('should have hero.id === 0', () => { - expect(component.hero.id).toBe(0); - }); - - it('should display empty hero name', () => { - expect(page.nameDisplay.textContent).toBe(''); - }); - }); - // #enddocregion route-no-id - - // #docregion route-bad-id - describe('when navigate to non-existent hero id', () => { - beforeEach(async(() => { - activatedRoute.setParamMap({ id: 99999 }); - createComponent(); - })); - - it('should try to navigate back to hero list', () => { - expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called'); - expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called'); - }); - }); - // #enddocregion route-bad-id - - // Why we must use `fixture.debugElement.injector` in `Page()` - it('cannot use `inject` to get component\'s provided HeroDetailService', () => { - let service: HeroDetailService; - fixture = TestBed.createComponent(HeroDetailComponent); - expect( - // Throws because `inject` only has access to TestBed's injector - // which is an ancestor of the component's injector - inject([HeroDetailService], (hds: HeroDetailService) => service = hds ) - ) - .toThrowError(/No provider for HeroDetailService/); - - // get `HeroDetailService` with component's own injector - service = fixture.debugElement.injector.get(HeroDetailService); - expect(service).toBeDefined('debugElement.injector'); - }); -} - -///////////////////// -import { FormsModule } from '@angular/forms'; -import { TitleCasePipe } from '../shared/title-case.pipe'; - -function formsModuleSetup() { - // #docregion setup-forms-module - beforeEach(async(() => { - const routerSpy = createRouterSpy(); - - TestBed.configureTestingModule({ - imports: [ FormsModule ], - declarations: [ HeroDetailComponent, TitleCasePipe ], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy}, - ] - }) - .compileComponents(); - })); - // #enddocregion setup-forms-module - - it('should display 1st hero\'s name', async(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - createComponent().then(() => { - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - })); -} - -/////////////////////// -import { SharedModule } from '../shared/shared.module'; - -function sharedModuleSetup() { - // #docregion setup-shared-module - beforeEach(async(() => { - const routerSpy = createRouterSpy(); - - TestBed.configureTestingModule({ - imports: [ SharedModule ], - declarations: [ HeroDetailComponent ], - providers: [ - { provide: ActivatedRoute, useValue: activatedRoute }, - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy}, - ] - }) - .compileComponents(); - })); - // #enddocregion setup-shared-module - - it('should display 1st hero\'s name', async(() => { - const expectedHero = firstHero; - activatedRoute.setParamMap({ id: expectedHero.id }); - createComponent().then(() => { - expect(page.nameDisplay.textContent).toBe(expectedHero.name); - }); - })); -} - -/////////// Helpers ///// - -// #docregion create-component -/** Create the HeroDetailComponent, initialize it, set test variables */ -function createComponent() { - fixture = TestBed.createComponent(HeroDetailComponent); - component = fixture.componentInstance; - page = new Page(fixture); - - // 1st change detection triggers ngOnInit which gets a hero - fixture.detectChanges(); - return fixture.whenStable().then(() => { - // 2nd change detection displays the async-fetched hero - fixture.detectChanges(); - }); -} -// #enddocregion create-component - -// #docregion page -class Page { - // getter properties wait to query the DOM until called. - get buttons() { return this.queryAll('button'); } - get saveBtn() { return this.buttons[0]; } - get cancelBtn() { return this.buttons[1]; } - get nameDisplay() { return this.query('span'); } - get nameInput() { return this.query('input'); } - - gotoListSpy: jasmine.Spy; - navigateSpy: jasmine.Spy; - - constructor(fixture: ComponentFixture) { - // get the navigate spy from the injected router spy object - const routerSpy = fixture.debugElement.injector.get(Router); - this.navigateSpy = routerSpy.navigate; - - // spy on component's `gotoList()` method - const component = fixture.componentInstance; - this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough(); - } - - //// query helpers //// - private query(selector: string): T { - return fixture.nativeElement.querySelector(selector); - } - - private queryAll(selector: string): T[] { - return fixture.nativeElement.querySelectorAll(selector); - } -} -// #enddocregion page - -function createRouterSpy() { - return jasmine.createSpyObj('Router', ['navigate']); -} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts deleted file mode 100644 index fdfea6c4fa..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* tslint:disable:member-ordering */ -// #docplaster -import { Component, Input, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; - -import { Hero } from '../model/hero'; -import { HeroDetailService } from './hero-detail.service'; - -// #docregion prototype -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css' ], - providers: [ HeroDetailService ] -}) -export class HeroDetailComponent implements OnInit { - // #docregion ctor - constructor( - private heroDetailService: HeroDetailService, - private route: ActivatedRoute, - private router: Router) { - } - // #enddocregion ctor -// #enddocregion prototype - - @Input() hero: Hero; - - // #docregion ng-on-init - ngOnInit(): void { - // get hero when `id` param changes - this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id'))); - } - // #enddocregion ng-on-init - - private getHero(id: string): void { - // when no id or id===0, create new blank hero - if (!id) { - this.hero = { id: 0, name: '' } as Hero; - return; - } - - this.heroDetailService.getHero(id).subscribe(hero => { - if (hero) { - this.hero = hero; - } else { - this.gotoList(); // id not found; navigate to list - } - }); - } - - save(): void { - this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList()); - } - - cancel() { this.gotoList(); } - - gotoList() { - this.router.navigate(['../'], {relativeTo: this.route}); - } -// #docregion prototype -} -// #enddocregion prototype diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts deleted file mode 100644 index 022dba86ae..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; - -// #docregion prototype -@Injectable() -export class HeroDetailService { - constructor(private heroService: HeroService) { } -// #enddocregion prototype - - // Returns a clone which caller may modify safely - getHero(id: number | string): Observable { - if (typeof id === 'string') { - id = parseInt(id as string, 10); - } - return this.heroService.getHero(id).pipe( - map(hero => { - return hero ? Object.assign({}, hero) : null; // clone or null - }) - ); - } - - saveHero(hero: Hero) { - return this.heroService.updateHero(hero); - } -// #docregion prototype -} -// #enddocregion prototype diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.css b/docs_app/content/examples/testing/src/app/hero/hero-list.component.css deleted file mode 100644 index 35e45af98d..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.css +++ /dev/null @@ -1,59 +0,0 @@ -.selected { - background-color: #CFD8DC !important; - color: white; -} -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; -} -.heroes .text { - position: relative; - top: -3px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} -button { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.html b/docs_app/content/examples/testing/src/app/hero/hero-list.component.html deleted file mode 100644 index cd37301fd6..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.html +++ /dev/null @@ -1,8 +0,0 @@ -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts deleted file mode 100644 index d178fa6098..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { async, ComponentFixture, fakeAsync, TestBed, tick -} from '@angular/core/testing'; - -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -import { Router } from '@angular/router'; - -import { addMatchers, newEvent } from '../../testing'; - -import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service'; - -import { HeroModule } from './hero.module'; -import { HeroListComponent } from './hero-list.component'; -import { HighlightDirective } from '../shared/highlight.directive'; -import { HeroService } from '../model/hero.service'; - -const HEROES = getTestHeroes(); - -let comp: HeroListComponent; -let fixture: ComponentFixture; -let page: Page; - -/////// Tests ////// - -describe('HeroListComponent', () => { - - beforeEach(async(() => { - addMatchers(); - const routerSpy = jasmine.createSpyObj('Router', ['navigate']); - - TestBed.configureTestingModule({ - imports: [HeroModule], - providers: [ - { provide: HeroService, useClass: TestHeroService }, - { provide: Router, useValue: routerSpy} - ] - }) - .compileComponents() - .then(createComponent); - })); - - it('should display heroes', () => { - expect(page.heroRows.length).toBeGreaterThan(0); - }); - - it('1st hero should match 1st test hero', () => { - const expectedHero = HEROES[0]; - const actualHero = page.heroRows[0].textContent; - expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id'); - expect(actualHero).toContain(expectedHero.name, 'hero.name'); - }); - - it('should select hero on click', fakeAsync(() => { - const expectedHero = HEROES[1]; - const li = page.heroRows[1]; - li.dispatchEvent(newEvent('click')); - tick(); - // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService - expect(comp.selectedHero).toEqual(expectedHero); - })); - - it('should navigate to selected hero detail on click', fakeAsync(() => { - const expectedHero = HEROES[1]; - const li = page.heroRows[1]; - li.dispatchEvent(newEvent('click')); - tick(); - - // should have navigated - expect(page.navSpy.calls.any()).toBe(true, 'navigate called'); - - // composed hero detail will be URL like 'heroes/42' - // expect link array with the route path and hero id - // first argument to router.navigate is link array - const navArgs = page.navSpy.calls.first().args[0]; - expect(navArgs[0]).toContain('heroes', 'nav to heroes detail URL'); - expect(navArgs[1]).toBe(expectedHero.id, 'expected hero.id'); - - })); - - it('should find `HighlightDirective` with `By.directive', () => { - // #docregion by - // Can find DebugElement either by css selector or by directive - const h2 = fixture.debugElement.query(By.css('h2')); - const directive = fixture.debugElement.query(By.directive(HighlightDirective)); - // #enddocregion by - expect(h2).toBe(directive); - }); - - it('should color header with `HighlightDirective`', () => { - const h2 = page.highlightDe.nativeElement as HTMLElement; - const bgColor = h2.style.backgroundColor; - - // different browsers report color values differently - const isExpectedColor = bgColor === 'gold' || bgColor === 'rgb(255, 215, 0)'; - expect(isExpectedColor).toBe(true, 'backgroundColor'); - }); - - it('the `HighlightDirective` is among the element\'s providers', () => { - expect(page.highlightDe.providerTokens).toContain(HighlightDirective, 'HighlightDirective'); - }); -}); - -/////////// Helpers ///// - -/** Create the component and set the `page` test variables */ -function createComponent() { - fixture = TestBed.createComponent(HeroListComponent); - comp = fixture.componentInstance; - - // change detection triggers ngOnInit which gets a hero - fixture.detectChanges(); - - return fixture.whenStable().then(() => { - // got the heroes and updated component - // change detection updates the view - fixture.detectChanges(); - page = new Page(); - }); -} - -class Page { - /** Hero line elements */ - heroRows: HTMLLIElement[]; - - /** Highlighted DebugElement */ - highlightDe: DebugElement; - - /** Spy on router navigate method */ - navSpy: jasmine.Spy; - - constructor() { - const heroRowNodes = fixture.nativeElement.querySelectorAll('li'); - this.heroRows = Array.from(heroRowNodes); - - // Find the first element with an attached HighlightDirective - this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective)); - - // Get the component's injected router navigation spy - const routerSpy = fixture.debugElement.injector.get(Router); - this.navSpy = routerSpy.navigate as jasmine.Spy; - }; -} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts b/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts deleted file mode 100644 index 04403380f2..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Observable } from 'rxjs'; - -import { Hero } from '../model/hero'; -import { HeroService } from '../model/hero.service'; - -@Component({ - selector: 'app-heroes', - templateUrl: './hero-list.component.html', - styleUrls: [ './hero-list.component.css' ] -}) -export class HeroListComponent implements OnInit { - heroes: Observable; - selectedHero: Hero; - - constructor( - private router: Router, - private heroService: HeroService) { } - - ngOnInit() { - this.heroes = this.heroService.getHeroes(); - } - - onSelect(hero: Hero) { - this.selectedHero = hero; - this.router.navigate(['../heroes', this.selectedHero.id ]); - } -} diff --git a/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts b/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts deleted file mode 100644 index 59ec14474c..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { HeroListComponent } from './hero-list.component'; -import { HeroDetailComponent } from './hero-detail.component'; - -const routes: Routes = [ - { path: '', component: HeroListComponent }, - { path: ':id', component: HeroDetailComponent } -]; - -export const routedComponents = [HeroDetailComponent, HeroListComponent]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class HeroRoutingModule {} diff --git a/docs_app/content/examples/testing/src/app/hero/hero.module.ts b/docs_app/content/examples/testing/src/app/hero/hero.module.ts deleted file mode 100644 index dfe33cc199..0000000000 --- a/docs_app/content/examples/testing/src/app/hero/hero.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { SharedModule } from '../shared/shared.module'; -import { routedComponents, HeroRoutingModule } from './hero-routing.module'; - -@NgModule({ - imports: [ SharedModule, HeroRoutingModule ], - declarations: [ routedComponents ] -}) -export class HeroModule { } diff --git a/docs_app/content/examples/testing/src/app/in-memory-data.service.ts b/docs_app/content/examples/testing/src/app/in-memory-data.service.ts deleted file mode 100644 index 81f26b674a..0000000000 --- a/docs_app/content/examples/testing/src/app/in-memory-data.service.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion , init -import { InMemoryDbService } from 'angular-in-memory-web-api'; -import { QUOTES } from './twain/twain.data'; - -// Adjust to reduce number of quotes -const maxQuotes = Infinity; // 0; - -/** Create in-memory database of heroes and quotes */ -export class InMemoryDataService implements InMemoryDbService { - createDb() { - const heroes = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } - ]; - - return { heroes, quotes: QUOTES.slice(0, maxQuotes) }; - } -} diff --git a/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts b/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts deleted file mode 100644 index b228692154..0000000000 --- a/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts +++ /dev/null @@ -1,215 +0,0 @@ -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -// Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http'; - -import { asyncData, asyncError } from '../../testing/async-observable-helpers'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -describe ('HeroesService (with spies)', () => { - // #docregion test-with-spies - let httpClientSpy: { get: jasmine.Spy }; - let heroService: HeroService; - - beforeEach(() => { - // Todo: spy on other methods too - httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']); - heroService = new HeroService( httpClientSpy); - }); - - it('should return expected heroes (HttpClient called once)', () => { - const expectedHeroes: Hero[] = - [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]; - - httpClientSpy.get.and.returnValue(asyncData(expectedHeroes)); - - heroService.getHeroes().subscribe( - heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'), - fail - ); - expect(httpClientSpy.get.calls.count()).toBe(1, 'one call'); - }); - - it('should return an error when the server returns a 404', () => { - const errorResponse = new HttpErrorResponse({ - error: 'test 404 error', - status: 404, statusText: 'Not Found' - }); - - httpClientSpy.get.and.returnValue(asyncError(errorResponse)); - - heroService.getHeroes().subscribe( - heroes => fail('expected an error, not heroes'), - error => expect(error.message).toContain('test 404 error') - ); - }); - // #enddocregion test-with-spies - -}); - -describe('HeroesService (with mocks)', () => { - let httpClient: HttpClient; - let httpTestingController: HttpTestingController; - let heroService: HeroService; - - beforeEach(() => { - TestBed.configureTestingModule({ - // Import the HttpClient mocking services - imports: [ HttpClientTestingModule ], - // Provide the service-under-test - providers: [ HeroService ] - }); - - // Inject the http, test controller, and service-under-test - // as they will be referenced by each test. - httpClient = TestBed.get(HttpClient); - httpTestingController = TestBed.get(HttpTestingController); - heroService = TestBed.get(HeroService); - }); - - afterEach(() => { - // After every test, assert that there are no more pending requests. - httpTestingController.verify(); - }); - - /// HeroService method tests begin /// - describe('#getHeroes', () => { - let expectedHeroes: Hero[]; - - beforeEach(() => { - heroService = TestBed.get(HeroService); - expectedHeroes = [ - { id: 1, name: 'A' }, - { id: 2, name: 'B' }, - ] as Hero[]; - }); - - it('should return expected heroes (called once)', () => { - heroService.getHeroes().subscribe( - heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'), - fail - ); - - // HeroService should have made one request to GET heroes from expected URL - const req = httpTestingController.expectOne(heroService.heroesUrl); - expect(req.request.method).toEqual('GET'); - - // Respond with the mock heroes - req.flush(expectedHeroes); - }); - - it('should be OK returning no heroes', () => { - heroService.getHeroes().subscribe( - heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'), - fail - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - req.flush([]); // Respond with no heroes - }); - - it('should turn 404 into a user-friendly error', () => { - const msg = 'Deliberate 404'; - heroService.getHeroes().subscribe( - heroes => fail('expected to fail'), - error => expect(error.message).toContain(msg) - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - - // respond with a 404 and the error message in the body - req.flush(msg, {status: 404, statusText: 'Not Found'}); - }); - - it('should return expected heroes (called multiple times)', () => { - heroService.getHeroes().subscribe(); - heroService.getHeroes().subscribe(); - heroService.getHeroes().subscribe( - heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'), - fail - ); - - const requests = httpTestingController.match(heroService.heroesUrl); - expect(requests.length).toEqual(3, 'calls to getHeroes()'); - - // Respond to each request with different mock hero results - requests[0].flush([]); - requests[1].flush([{id: 1, name: 'bob'}]); - requests[2].flush(expectedHeroes); - }); - }); - - describe('#updateHero', () => { - // Expecting the query form of URL so should not 404 when id not found - const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`; - - it('should update a hero and return it', () => { - - const updateHero: Hero = { id: 1, name: 'A' }; - - heroService.updateHero(updateHero).subscribe( - data => expect(data).toEqual(updateHero, 'should return the hero'), - fail - ); - - // HeroService should have made one request to PUT hero - const req = httpTestingController.expectOne(heroService.heroesUrl); - expect(req.request.method).toEqual('PUT'); - expect(req.request.body).toEqual(updateHero); - - // Expect server to return the hero after PUT - const expectedResponse = new HttpResponse( - { status: 200, statusText: 'OK', body: updateHero }); - req.event(expectedResponse); - }); - - it('should turn 404 error into user-facing error', () => { - const msg = 'Deliberate 404'; - const updateHero: Hero = { id: 1, name: 'A' }; - heroService.updateHero(updateHero).subscribe( - heroes => fail('expected to fail'), - error => expect(error.message).toContain(msg) - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - - // respond with a 404 and the error message in the body - req.flush(msg, {status: 404, statusText: 'Not Found'}); - }); - - // #docregion network-error - it('should turn network error into user-facing error', () => { - const emsg = 'simulated network error'; - - const updateHero: Hero = { id: 1, name: 'A' }; - heroService.updateHero(updateHero).subscribe( - heroes => fail('expected to fail'), - error => expect(error.message).toContain(emsg) - ); - - const req = httpTestingController.expectOne(heroService.heroesUrl); - - // Create mock ErrorEvent, raised when something goes wrong at the network level. - // Connection timeout, DNS error, offline, etc - const errorEvent = new ErrorEvent('so sad', { - message: emsg, - // #enddocregion network-error - // The rest of this is optional and not used. - // Just showing that you could provide this too. - filename: 'HeroService.ts', - lineno: 42, - colno: 21 - // #docregion network-error - }); - - // Respond with mock error - req.error(errorEvent); - }); - // #enddocregion network-error - }); - - // TODO: test other HeroService methods -}); diff --git a/docs_app/content/examples/testing/src/app/model/hero.service.ts b/docs_app/content/examples/testing/src/app/model/hero.service.ts deleted file mode 100644 index e5b5d04ee5..0000000000 --- a/docs_app/content/examples/testing/src/app/model/hero.service.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; - -import { Observable } from 'rxjs'; -import { catchError, map, tap } from 'rxjs/operators'; - -import { Hero } from './hero'; - -const httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'application/json' }) -}; - -@Injectable() -export class HeroService { - - readonly heroesUrl = 'api/heroes'; // URL to web api - - constructor(private http: HttpClient) { } - - /** GET heroes from the server */ - getHeroes (): Observable { - return this.http.get(this.heroesUrl) - .pipe( - tap(heroes => this.log(`fetched heroes`)), - catchError(this.handleError('getHeroes')) - ) as Observable; - } - - /** GET hero by id. Return `undefined` when id not found */ - getHero(id: number | string): Observable { - if (typeof id === 'string') { - id = parseInt(id as string, 10); - } - const url = `${this.heroesUrl}/?id=${id}`; - return this.http.get(url) - .pipe( - map(heroes => heroes[0]), // returns a {0|1} element array - tap(h => { - const outcome = h ? `fetched` : `did not find`; - this.log(`${outcome} hero id=${id}`); - }), - catchError(this.handleError(`getHero id=${id}`)) - ); - } - - //////// Save methods ////////// - - /** POST: add a new hero to the server */ - addHero (hero: Hero): Observable { - return this.http.post(this.heroesUrl, hero, httpOptions).pipe( - tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)), - catchError(this.handleError('addHero')) - ); - } - /** DELETE: delete the hero from the server */ - deleteHero (hero: Hero | number): Observable { - const id = typeof hero === 'number' ? hero : hero.id; - const url = `${this.heroesUrl}/${id}`; - - return this.http.delete(url, httpOptions).pipe( - tap(_ => this.log(`deleted hero id=${id}`)), - catchError(this.handleError('deleteHero')) - ); - } - - /** PUT: update the hero on the server */ - updateHero (hero: Hero): Observable { - return this.http.put(this.heroesUrl, hero, httpOptions).pipe( - tap(_ => this.log(`updated hero id=${hero.id}`)), - catchError(this.handleError('updateHero')) - ); - } - /** - * Returns a function that handles Http operation failures. - * This error handler lets the app continue to run as if no error occurred. - * @param operation - name of the operation that failed - */ - private handleError (operation = 'operation') { - return (error: HttpErrorResponse): Observable => { - - // TODO: send the error to remote logging infrastructure - console.error(error); // log to console instead - - const message = (error.error instanceof ErrorEvent) ? - error.error.message : - `server returned code ${error.status} with body "${error.error}"`; - - // TODO: better job of transforming error for user consumption - throw new Error(`${operation} failed: ${message}`); - }; - - } - - private log(message: string) { - console.log('HeroService: ' + message); - } -} diff --git a/docs_app/content/examples/testing/src/app/model/hero.ts b/docs_app/content/examples/testing/src/app/model/hero.ts deleted file mode 100644 index 93e87f4770..0000000000 --- a/docs_app/content/examples/testing/src/app/model/hero.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface Hero { - id: number; - name: string; -} - -// SystemJS bug: -// TS file must export something real in JS, not just interfaces -export const _dummy = undefined; diff --git a/docs_app/content/examples/testing/src/app/model/http-hero.service.spec.ts b/docs_app/content/examples/testing/src/app/model/http-hero.service.spec.ts deleted file mode 100644 index 54b23e1851..0000000000 --- a/docs_app/content/examples/testing/src/app/model/http-hero.service.spec.ts +++ /dev/null @@ -1,126 +0,0 @@ -/** - * Test the HeroService when implemented with the OLD HttpModule - */ -import { - async, inject, TestBed -} from '@angular/core/testing'; - -import { - MockBackend, - MockConnection -} from '@angular/http/testing'; - -import { - HttpModule, Http, XHRBackend, Response, ResponseOptions -} from '@angular/http'; - -import { of } from 'rxjs'; - -import { Hero } from './hero'; -import { HttpHeroService } from './http-hero.service'; - -const makeHeroData = () => [ - { id: 1, name: 'Windstorm' }, - { id: 2, name: 'Bombasto' }, - { id: 3, name: 'Magneta' }, - { id: 4, name: 'Tornado' } -] as Hero[]; - -//////// Tests ///////////// -describe('HttpHeroService (using old HttpModule)', () => { - let backend: MockBackend; - let service: HttpHeroService; - - beforeEach( () => { - TestBed.configureTestingModule({ - imports: [ HttpModule ], - providers: [ - HttpHeroService, - { provide: XHRBackend, useClass: MockBackend } - ] - }); - }); - - it('can instantiate service via DI', () => { - service = TestBed.get(HttpHeroService); - expect(service instanceof HttpHeroService).toBe(true); - }); - - it('can instantiate service with "new"', () => { - const http = TestBed.get(Http); - expect(http).not.toBeNull('http should be provided'); - let service = new HttpHeroService(http); - expect(service instanceof HttpHeroService).toBe(true, 'new service should be ok'); - }); - - it('can provide the mockBackend as XHRBackend', () => { - const backend = TestBed.get(XHRBackend); - expect(backend).not.toBeNull('backend should be provided'); - }); - - describe('when getHeroes', () => { - let fakeHeroes: Hero[]; - let http: Http; - let response: Response; - - beforeEach(() => { - - backend = TestBed.get(XHRBackend); - http = TestBed.get(Http); - - service = new HttpHeroService(http); - fakeHeroes = makeHeroData(); - let options = new ResponseOptions({status: 200, body: {data: fakeHeroes}}); - response = new Response(options); - }); - - it('should have expected fake heroes (then)', () => { - backend.connections.subscribe((c: MockConnection) => c.mockRespond(response)); - - service.getHeroes().toPromise() - // .then(() => Promise.reject('deliberate')) - .then(heroes => { - expect(heroes.length).toBe(fakeHeroes.length, - 'should have expected no. of heroes'); - }) - .catch(fail); - }); - - it('should have expected fake heroes (Observable tap)', () => { - backend.connections.subscribe((c: MockConnection) => c.mockRespond(response)); - - service.getHeroes().subscribe( - heroes => { - expect(heroes.length).toBe(fakeHeroes.length, - 'should have expected no. of heroes'); - }, - fail - ); - }); - - - it('should be OK returning no heroes', () => { - let resp = new Response(new ResponseOptions({status: 200, body: {data: []}})); - backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp)); - - service.getHeroes().subscribe( - heroes => { - expect(heroes.length).toBe(0, 'should have no heroes'); - }, - fail - ); - }); - - it('should treat 404 as an Observable error', () => { - let resp = new Response(new ResponseOptions({status: 404})); - backend.connections.subscribe((c: MockConnection) => c.mockRespond(resp)); - - service.getHeroes().subscribe( - heroes => fail('should not respond with heroes'), - err => { - expect(err).toMatch(/Bad response status/, 'should catch bad response status code'); - return of(null); // failure is the expected test result - }); - }); - }); -}); diff --git a/docs_app/content/examples/testing/src/app/model/http-hero.service.ts b/docs_app/content/examples/testing/src/app/model/http-hero.service.ts deleted file mode 100644 index 4c6b79be79..0000000000 --- a/docs_app/content/examples/testing/src/app/model/http-hero.service.ts +++ /dev/null @@ -1,69 +0,0 @@ -// The OLD Http module. See HeroService for use of the current HttpClient -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Headers, RequestOptions } from '@angular/http'; -import { Hero } from './hero'; - -import { Observable } from 'rxjs'; -import { throwError } from 'rxjs'; -import { catchError, map } from 'rxjs/operators'; - -@Injectable() -export class HttpHeroService { - private _heroesUrl = 'app/heroes'; // URL to web api - - constructor (private http: Http) {} - - getHeroes (): Observable { - return this.http.get(this._heroesUrl).pipe( - map(this.extractData), - // tap(data => console.log(data)), // eyeball results in the console - catchError(this.handleError) - ); - } - - getHero(id: number | string) { - return this.http.get('app/heroes/?id=${id}').pipe( - map((r: Response) => r.json().data as Hero[]) - ); - } - - addHero (name: string): Observable { - let body = JSON.stringify({ name }); - let headers = new Headers({ 'Content-Type': 'application/json' }); - let options = new RequestOptions({ headers: headers }); - - return this.http.post(this._heroesUrl, body, options).pipe( - map(this.extractData), - catchError(this.handleError) - ); - } - - updateHero (hero: Hero): Observable { - let body = JSON.stringify(hero); - let headers = new Headers({ 'Content-Type': 'application/json' }); - let options = new RequestOptions({ headers: headers }); - - return this.http.put(this._heroesUrl, body, options).pipe( - map(this.extractData), - catchError(this.handleError) - ); - } - - private extractData(res: Response) { - if (res.status < 200 || res.status >= 300) { - throw new Error('Bad response status: ' + res.status); - } - let body = res.json(); - return body.data || { }; - } - - private handleError (error: any) { - // In a real world app, we might send the error to remote logging infrastructure - let errMsg = error.message || 'Server error'; - console.error(errMsg); // log to console instead - return throwError(errMsg); - } -} diff --git a/docs_app/content/examples/testing/src/app/model/index.ts b/docs_app/content/examples/testing/src/app/model/index.ts deleted file mode 100644 index 694c333a87..0000000000 --- a/docs_app/content/examples/testing/src/app/model/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './hero'; -export * from './hero.service'; -export * from './user.service'; diff --git a/docs_app/content/examples/testing/src/app/model/testing/http-client.spec.ts b/docs_app/content/examples/testing/src/app/model/testing/http-client.spec.ts deleted file mode 100644 index 2c5b5ffd46..0000000000 --- a/docs_app/content/examples/testing/src/app/model/testing/http-client.spec.ts +++ /dev/null @@ -1,192 +0,0 @@ -// #docplaster -// #docregion imports -// Http testing module and mocking controller -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -// Other imports -import { TestBed } from '@angular/core/testing'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; - -// #enddocregion imports -import { HttpHeaders } from '@angular/common/http'; - -interface Data { - name: string; -} - -const testUrl = '/data'; - -// #docregion setup -describe('HttpClient testing', () => { - let httpClient: HttpClient; - let httpTestingController: HttpTestingController; - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ HttpClientTestingModule ] - }); - - // Inject the http service and test controller for each test - httpClient = TestBed.get(HttpClient); - httpTestingController = TestBed.get(HttpTestingController); - }); - // #enddocregion setup - // #docregion afterEach - afterEach(() => { - // After every test, assert that there are no more pending requests. - httpTestingController.verify(); - }); - // #enddocregion afterEach - // #docregion setup - /// Tests begin /// - // #enddocregion setup - // #docregion get-test - it('can test HttpClient.get', () => { - const testData: Data = {name: 'Test Data'}; - - // Make an HTTP GET request - httpClient.get(testUrl) - .subscribe(data => - // When observable resolves, result should match test data - expect(data).toEqual(testData) - ); - - // The following `expectOne()` will match the request's URL. - // If no requests or multiple requests matched that URL - // `expectOne()` would throw. - const req = httpTestingController.expectOne('/data'); - - // Assert that the request is a GET. - expect(req.request.method).toEqual('GET'); - - // Respond with mock data, causing Observable to resolve. - // Subscribe callback asserts that correct data was returned. - req.flush(testData); - - // Finally, assert that there are no outstanding requests. - httpTestingController.verify(); - }); - // #enddocregion get-test - it('can test HttpClient.get with matching header', () => { - const testData: Data = {name: 'Test Data'}; - - // Make an HTTP GET request with specific header - httpClient.get(testUrl, { - headers: new HttpHeaders({'Authorization': 'my-auth-token'}) - }) - .subscribe(data => - expect(data).toEqual(testData) - ); - - // Find request with a predicate function. - // #docregion predicate - // Expect one request with an authorization header - const req = httpTestingController.expectOne( - req => req.headers.has('Authorization') - ); - // #enddocregion predicate - req.flush(testData); - }); - - it('can test multiple requests', () => { - let testData: Data[] = [ - { name: 'bob' }, { name: 'carol' }, - { name: 'ted' }, { name: 'alice' } - ]; - - // Make three requests in a row - httpClient.get(testUrl) - .subscribe(d => expect(d.length).toEqual(0, 'should have no data')); - - httpClient.get(testUrl) - .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array')); - - httpClient.get(testUrl) - .subscribe(d => expect(d).toEqual(testData, 'should be expected data')); - - // #docregion multi-request - // get all pending requests that match the given URL - const requests = httpTestingController.match(testUrl); - expect(requests.length).toEqual(3); - - // Respond to each request with different results - requests[0].flush([]); - requests[1].flush([testData[0]]); - requests[2].flush(testData); - // #enddocregion multi-request - }); - - // #docregion 404 - it('can test for 404 error', () => { - const emsg = 'deliberate 404 error'; - - httpClient.get(testUrl).subscribe( - data => fail('should have failed with the 404 error'), - (error: HttpErrorResponse) => { - expect(error.status).toEqual(404, 'status'); - expect(error.error).toEqual(emsg, 'message'); - } - ); - - const req = httpTestingController.expectOne(testUrl); - - // Respond with mock error - req.flush(emsg, { status: 404, statusText: 'Not Found' }); - }); - // #enddocregion 404 - - // #docregion network-error - it('can test for network error', () => { - const emsg = 'simulated network error'; - - httpClient.get(testUrl).subscribe( - data => fail('should have failed with the network error'), - (error: HttpErrorResponse) => { - expect(error.error.message).toEqual(emsg, 'message'); - } - ); - - const req = httpTestingController.expectOne(testUrl); - - // Create mock ErrorEvent, raised when something goes wrong at the network level. - // Connection timeout, DNS error, offline, etc - const errorEvent = new ErrorEvent('so sad', { - message: emsg, - // #enddocregion network-error - // The rest of this is optional and not used. - // Just showing that you could provide this too. - filename: 'HeroService.ts', - lineno: 42, - colno: 21 - // #docregion network-error - }); - - // Respond with mock error - req.error(errorEvent); - }); - // #enddocregion network-error - - it('httpTestingController.verify should fail if HTTP response not simulated', () => { - // Sends request - httpClient.get('some/api').subscribe(); - - // verify() should fail because haven't handled the pending request. - expect(() => httpTestingController.verify()).toThrow(); - - // Now get and flush the request so that afterEach() doesn't fail - const req = httpTestingController.expectOne('some/api'); - req.flush(null); - }); - - // Proves that verify in afterEach() really would catch error - // if test doesn't simulate the HTTP response. - // - // Must disable this test because can't catch an error in an afterEach(). - // Uncomment if you want to confirm that afterEach() does the job. - // it('afterEach() should fail when HTTP response not simulated',() => { - // // Sends request which is never handled by this test - // httpClient.get('some/api').subscribe(); - // }); -// #docregion setup -}); -// #enddocregion setup diff --git a/docs_app/content/examples/testing/src/app/model/testing/index.ts b/docs_app/content/examples/testing/src/app/model/testing/index.ts deleted file mode 100644 index 6da76e67db..0000000000 --- a/docs_app/content/examples/testing/src/app/model/testing/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './fake-hero.service'; diff --git a/docs_app/content/examples/testing/src/app/model/testing/test-hero.service.ts b/docs_app/content/examples/testing/src/app/model/testing/test-hero.service.ts deleted file mode 100644 index ecdea31d23..0000000000 --- a/docs_app/content/examples/testing/src/app/model/testing/test-hero.service.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Observable } from 'rxjs'; -import { asyncData } from '../../../testing'; - -import { map } from 'rxjs/operators'; - -// re-export for tester convenience -export { Hero } from '../hero'; -export { HeroService } from '../hero.service'; -export { getTestHeroes } from './test-heroes'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; -import { getTestHeroes } from './test-heroes'; - -@Injectable() -/** - * FakeHeroService pretends to make real http requests. - * implements only as much of HeroService as is actually consumed by the app -*/ -export class TestHeroService extends HeroService { - - constructor() { - super(null); - } - - heroes = getTestHeroes(); - lastResult: Observable; // result from last method call - - addHero(hero: Hero): Observable { - throw new Error('Method not implemented.'); - } - - deleteHero(hero: number | Hero): Observable { - throw new Error('Method not implemented.'); - } - - getHeroes(): Observable { - return this.lastResult = asyncData(this.heroes); - } - - getHero(id: number | string): Observable { - if (typeof id === 'string') { - id = parseInt(id as string, 10); - } - let hero = this.heroes.find(h => h.id === id); - return this.lastResult = asyncData(hero); - } - - updateHero(hero: Hero): Observable { - return this.lastResult = this.getHero(hero.id).pipe( - map(h => { - if (h) { - return Object.assign(h, hero); - } - throw new Error(`Hero ${hero.id} not found`); - }) - ); - } -} diff --git a/docs_app/content/examples/testing/src/app/model/testing/test-heroes.ts b/docs_app/content/examples/testing/src/app/model/testing/test-heroes.ts deleted file mode 100644 index 2af87f0e0d..0000000000 --- a/docs_app/content/examples/testing/src/app/model/testing/test-heroes.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Hero } from '../hero'; - -/** return fresh array of test heroes */ -export function getTestHeroes(): Hero[] { - return [ - {id: 41, name: 'Bob' }, - {id: 42, name: 'Carol' }, - {id: 43, name: 'Ted' }, - {id: 44, name: 'Alice' }, - {id: 45, name: 'Speedy' }, - {id: 46, name: 'Stealthy' } - ]; -} diff --git a/docs_app/content/examples/testing/src/app/model/user.service.ts b/docs_app/content/examples/testing/src/app/model/user.service.ts deleted file mode 100644 index 280efefeec..0000000000 --- a/docs_app/content/examples/testing/src/app/model/user.service.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class UserService { - isLoggedIn = true; - user = {name: 'Sam Spade'}; -} diff --git a/docs_app/content/examples/testing/src/app/shared/highlight.directive.spec.ts b/docs_app/content/examples/testing/src/app/shared/highlight.directive.spec.ts deleted file mode 100644 index b990f20b69..0000000000 --- a/docs_app/content/examples/testing/src/app/shared/highlight.directive.spec.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { Component, DebugElement } from '@angular/core'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { HighlightDirective } from './highlight.directive'; -import { newEvent } from '../../testing'; - -// #docregion test-component -@Component({ - template: ` -

    Something Yellow

    -

    The Default (Gray)

    -

    No Highlight

    - ` -}) -class TestComponent { } -// #enddocregion test-component - -describe('HighlightDirective', () => { - - let fixture: ComponentFixture; - let des: DebugElement[]; // the three elements w/ the directive - let bareH2: DebugElement; // the

    w/o the directive - - // #docregion selected-tests - beforeEach(() => { - fixture = TestBed.configureTestingModule({ - declarations: [ HighlightDirective, TestComponent ] - }) - .createComponent(TestComponent); - - fixture.detectChanges(); // initial binding - - // all elements with an attached HighlightDirective - des = fixture.debugElement.queryAll(By.directive(HighlightDirective)); - - // the h2 without the HighlightDirective - bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])')); - }); - - // color tests - it('should have three highlighted elements', () => { - expect(des.length).toBe(3); - }); - - it('should color 1st

    background "yellow"', () => { - const bgColor = des[0].nativeElement.style.backgroundColor; - expect(bgColor).toBe('yellow'); - }); - - it('should color 2nd

    background w/ default color', () => { - const dir = des[1].injector.get(HighlightDirective) as HighlightDirective; - const bgColor = des[1].nativeElement.style.backgroundColor; - expect(bgColor).toBe(dir.defaultColor); - }); - - it('should bind background to value color', () => { - // easier to work with nativeElement - const input = des[2].nativeElement as HTMLInputElement; - expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor'); - - // dispatch a DOM event so that Angular responds to the input value change. - input.value = 'green'; - input.dispatchEvent(newEvent('input')); - fixture.detectChanges(); - - expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor'); - }); - - - it('bare

    should not have a customProperty', () => { - expect(bareH2.properties['customProperty']).toBeUndefined(); - }); - // #enddocregion selected-tests - - // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future? - // // customProperty tests - // it('all highlighted elements should have a true customProperty', () => { - // const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true); - // expect(allTrue).toBe(true); - // }); - - // injected directive - // attached HighlightDirective can be injected - it('can inject `HighlightDirective` in 1st

    ', () => { - const dir = des[0].injector.get(HighlightDirective); - expect(dir).toBeTruthy(); - }); - - it('cannot inject `HighlightDirective` in 3rd

    ', () => { - const dir = bareH2.injector.get(HighlightDirective, null); - expect(dir).toBe(null); - }); - - // DebugElement.providerTokens - // attached HighlightDirective should be listed in the providerTokens - it('should have `HighlightDirective` in 1st

    providerTokens', () => { - expect(des[0].providerTokens).toContain(HighlightDirective); - }); - - it('should not have `HighlightDirective` in 3rd

    providerTokens', () => { - expect(bareH2.providerTokens).not.toContain(HighlightDirective); - }); -}); diff --git a/docs_app/content/examples/testing/src/app/shared/highlight.directive.ts b/docs_app/content/examples/testing/src/app/shared/highlight.directive.ts deleted file mode 100644 index 20901878c4..0000000000 --- a/docs_app/content/examples/testing/src/app/shared/highlight.directive.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; - -@Directive({ selector: '[highlight]' }) -/** Set backgroundColor for the attached element to highlight color - * and set the element's customProperty to true */ -export class HighlightDirective implements OnChanges { - - defaultColor = 'rgb(211, 211, 211)'; // lightgray - - @Input('highlight') bgColor: string; - - constructor(private el: ElementRef) { - el.nativeElement.style.customProperty = true; - } - - ngOnChanges() { - this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor; - } -} diff --git a/docs_app/content/examples/testing/src/app/shared/shared.module.ts b/docs_app/content/examples/testing/src/app/shared/shared.module.ts deleted file mode 100644 index cb2e6e7f90..0000000000 --- a/docs_app/content/examples/testing/src/app/shared/shared.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { HighlightDirective } from './highlight.directive'; -import { TitleCasePipe } from './title-case.pipe'; - -@NgModule({ - imports: [ CommonModule ], - exports: [ - CommonModule, - // SharedModule importers won't have to import FormsModule too - FormsModule, - HighlightDirective, - TitleCasePipe - ], - declarations: [ HighlightDirective, TitleCasePipe ] -}) -export class SharedModule { } diff --git a/docs_app/content/examples/testing/src/app/shared/title-case.pipe.spec.ts b/docs_app/content/examples/testing/src/app/shared/title-case.pipe.spec.ts deleted file mode 100644 index 5dfc5d91b0..0000000000 --- a/docs_app/content/examples/testing/src/app/shared/title-case.pipe.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion -import { TitleCasePipe } from './title-case.pipe'; - -// #docregion excerpt, mini-excerpt -describe('TitleCasePipe', () => { - // This pipe is a pure, stateless function so no need for BeforeEach - let pipe = new TitleCasePipe(); - - it('transforms "abc" to "Abc"', () => { - expect(pipe.transform('abc')).toBe('Abc'); - }); -// #enddocregion mini-excerpt - - it('transforms "abc def" to "Abc Def"', () => { - expect(pipe.transform('abc def')).toBe('Abc Def'); - }); - - // ... more tests ... -// #enddocregion excerpt - it('leaves "Abc Def" unchanged', () => { - expect(pipe.transform('Abc Def')).toBe('Abc Def'); - }); - - it('transforms "abc-def" to "Abc-def"', () => { - expect(pipe.transform('abc-def')).toBe('Abc-def'); - }); - - it('transforms " abc def" to " Abc Def" (preserves spaces) ', () => { - expect(pipe.transform(' abc def')).toBe(' Abc Def'); - }); -// #docregion excerpt, mini-excerpt -}); -// #enddocregion excerpt, mini-excerpt diff --git a/docs_app/content/examples/testing/src/app/shared/title-case.pipe.ts b/docs_app/content/examples/testing/src/app/shared/title-case.pipe.ts deleted file mode 100644 index 8797f49932..0000000000 --- a/docs_app/content/examples/testing/src/app/shared/title-case.pipe.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({name: 'titlecase', pure: true}) -/** Transform to Title Case: uppercase the first letter of the words in a string.*/ -export class TitleCasePipe implements PipeTransform { - transform(input: string): string { - return input.length === 0 ? '' : - input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() )); - } -} diff --git a/docs_app/content/examples/testing/src/app/twain/quote.ts b/docs_app/content/examples/testing/src/app/twain/quote.ts deleted file mode 100644 index 803cae0f60..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/quote.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Quote { - id: number; - quote: string; -} diff --git a/docs_app/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts b/docs_app/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts deleted file mode 100644 index f508fd2e82..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/twain.component.marbles.spec.ts +++ /dev/null @@ -1,87 +0,0 @@ -// #docplaster -import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing'; - -// #docregion import-marbles -import { cold, getTestScheduler } from 'jasmine-marbles'; -// #enddocregion import-marbles - -import { TwainService } from './twain.service'; -import { TwainComponent } from './twain.component'; - - -describe('TwainComponent (marbles)', () => { - let component: TwainComponent; - let fixture: ComponentFixture; - let getQuoteSpy: jasmine.Spy; - let quoteEl: HTMLElement; - let testQuote: string; - - // Helper function to get the error message element value - // An *ngIf keeps it out of the DOM until there is an error - const errorMessage = () => { - const el = fixture.nativeElement.querySelector('.error'); - return el ? el.textContent : null; - }; - - beforeEach(() => { - // Create a fake TwainService object with a `getQuote()` spy - const twainService = jasmine.createSpyObj('TwainService', ['getQuote']); - getQuoteSpy = twainService.getQuote; - - TestBed.configureTestingModule({ - declarations: [ TwainComponent ], - providers: [ - { provide: TwainService, useValue: twainService } - ] - }); - - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - testQuote = 'Test Quote'; - }); - - // A synchronous test that simulates async behavior - // #docregion get-quote-test - it('should show quote after getQuote (marbles)', () => { - // observable test quote value and complete(), after delay - // #docregion test-quote-marbles - const q$ = cold('---x|', { x: testQuote }); - // #enddocregion test-quote-marbles - getQuoteSpy.and.returnValue( q$ ); - - fixture.detectChanges(); // ngOnInit() - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - - // #docregion test-scheduler-flush - getTestScheduler().flush(); // flush the observables - // #enddocregion test-scheduler-flush - - fixture.detectChanges(); // update view - - expect(quoteEl.textContent).toBe(testQuote, 'should show quote'); - expect(errorMessage()).toBeNull('should not show error'); - }); - // #enddocregion get-quote-test - - // Still need fakeAsync() because of component's setTimeout() - // #docregion error-test - it('should display error when TwainService fails', fakeAsync(() => { - // observable error after delay - // #docregion error-marbles - const q$ = cold('---#|', null, new Error('TwainService test failure')); - // #enddocregion error-marbles - getQuoteSpy.and.returnValue( q$ ); - - fixture.detectChanges(); // ngOnInit() - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - - getTestScheduler().flush(); // flush the observables - tick(); // component shows error after a setTimeout() - fixture.detectChanges(); // update error message - - expect(errorMessage()).toMatch(/test failure/, 'should display error'); - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - })); - // #enddocregion error-test -}); diff --git a/docs_app/content/examples/testing/src/app/twain/twain.component.spec.ts b/docs_app/content/examples/testing/src/app/twain/twain.component.spec.ts deleted file mode 100644 index 60159d9ad6..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/twain.component.spec.ts +++ /dev/null @@ -1,182 +0,0 @@ -// #docplaster -import { async, fakeAsync, ComponentFixture, TestBed, tick } from '@angular/core/testing'; - -import { asyncData, asyncError } from '../../testing'; - -import { of, throwError } from 'rxjs'; - -import { last } from 'rxjs/operators'; - -import { TwainService } from './twain.service'; -import { TwainComponent } from './twain.component'; - -describe('TwainComponent', () => { - let component: TwainComponent; - let fixture: ComponentFixture; - let getQuoteSpy: jasmine.Spy; - let quoteEl: HTMLElement; - let testQuote: string; - - // Helper function to get the error message element value - // An *ngIf keeps it out of the DOM until there is an error - const errorMessage = () => { - const el = fixture.nativeElement.querySelector('.error'); - return el ? el.textContent : null; - }; - - // #docregion setup - beforeEach(() => { - testQuote = 'Test Quote'; - - // #docregion spy - // Create a fake TwainService object with a `getQuote()` spy - const twainService = jasmine.createSpyObj('TwainService', ['getQuote']); - // Make the spy return a synchronous Observable with the test data - getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) ); - // #enddocregion spy - - TestBed.configureTestingModule({ - declarations: [ TwainComponent ], - providers: [ - { provide: TwainService, useValue: twainService } - ] - }); - - fixture = TestBed.createComponent(TwainComponent); - component = fixture.componentInstance; - quoteEl = fixture.nativeElement.querySelector('.twain'); - }); - // #enddocregion setup - - describe('when test with synchronous observable', () => { - it('should not show quote before OnInit', () => { - expect(quoteEl.textContent).toBe('', 'nothing displayed'); - expect(errorMessage()).toBeNull('should not show error element'); - expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called'); - }); - - // The quote would not be immediately available if the service were truly async. - // #docregion sync-test - it('should show quote after component initialized', () => { - fixture.detectChanges(); // onInit() - - // sync spy result shows testQuote immediately after init - expect(quoteEl.textContent).toBe(testQuote); - expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called'); - }); - // #enddocregion sync-test - - - // The error would not be immediately available if the service were truly async. - // Use `fakeAsync` because the component error calls `setTimeout` - // #docregion error-test - it('should display error when TwainService fails', fakeAsync(() => { - // tell spy to return an error observable - getQuoteSpy.and.returnValue( - throwError('TwainService test failure')); - - fixture.detectChanges(); // onInit() - // sync spy errors immediately after init - - tick(); // flush the component's setTimeout() - - fixture.detectChanges(); // update errorMessage within setTimeout() - - expect(errorMessage()).toMatch(/test failure/, 'should display error'); - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - })); - // #enddocregion error-test - }); - - describe('when test with asynchronous observable', () => { - beforeEach(() => { - // #docregion async-setup - // Simulate delayed observable values with the `asyncData()` helper - getQuoteSpy.and.returnValue(asyncData(testQuote)); - // #enddocregion async-setup - }); - - it('should not show quote before OnInit', () => { - expect(quoteEl.textContent).toBe('', 'nothing displayed'); - expect(errorMessage()).toBeNull('should not show error element'); - expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called'); - }); - - it('should still not show quote after component initialized', () => { - fixture.detectChanges(); - // getQuote service is async => still has not returned with quote - // so should show the start value, '...' - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - expect(errorMessage()).toBeNull('should not show error'); - expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called'); - }); - - // #docregion fake-async-test - it('should show quote after getQuote (fakeAsync)', fakeAsync(() => { - fixture.detectChanges(); // ngOnInit() - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - - tick(); // flush the observable to get the quote - fixture.detectChanges(); // update view - - expect(quoteEl.textContent).toBe(testQuote, 'should show quote'); - expect(errorMessage()).toBeNull('should not show error'); - })); - // #enddocregion fake-async-test - - // #docregion async-test - it('should show quote after getQuote (async)', async(() => { - fixture.detectChanges(); // ngOnInit() - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - - fixture.whenStable().then(() => { // wait for async getQuote - fixture.detectChanges(); // update view with quote - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull('should not show error'); - }); - })); - // #enddocregion async-test - - - // #docregion quote-done-test - it('should show last quote (quote done)', (done: DoneFn) => { - fixture.detectChanges(); - - component.quote.pipe( last() ).subscribe(() => { - fixture.detectChanges(); // update view with quote - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull('should not show error'); - done(); - }); - }); - // #enddocregion quote-done-test - - // #docregion spy-done-test - it('should show quote after getQuote (spy done)', (done: DoneFn) => { - fixture.detectChanges(); - - // the spy's most recent call returns the observable with the test quote - getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => { - fixture.detectChanges(); // update view with quote - expect(quoteEl.textContent).toBe(testQuote); - expect(errorMessage()).toBeNull('should not show error'); - done(); - }); - }); - // #enddocregion spy-done-test - - // #docregion async-error-test - it('should display error when TwainService fails', fakeAsync(() => { - // tell spy to return an async error observable - getQuoteSpy.and.returnValue(asyncError('TwainService test failure')); - - fixture.detectChanges(); - tick(); // component shows error after a setTimeout() - fixture.detectChanges(); // update error message - - expect(errorMessage()).toMatch(/test failure/, 'should display error'); - expect(quoteEl.textContent).toBe('...', 'should show placeholder'); - })); - // #enddocregion async-error-test - }); -}); diff --git a/docs_app/content/examples/testing/src/app/twain/twain.component.ts b/docs_app/content/examples/testing/src/app/twain/twain.component.ts deleted file mode 100644 index 152e172911..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/twain.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Observable, of } from 'rxjs'; -import { catchError, startWith } from 'rxjs/operators'; - -import { TwainService } from './twain.service'; - -// #docregion component -@Component({ - selector: 'twain-quote', - // #docregion template - template: ` -

    {{quote | async}}

    - -

    {{ errorMessage }}

    `, - // #enddocregion template - styles: [ - `.twain { font-style: italic; } .error { color: red; }` - ] - -}) -export class TwainComponent implements OnInit { - errorMessage: string; - quote: Observable; - - constructor(private twainService: TwainService) {} - - ngOnInit(): void { - this.getQuote(); - } - - // #docregion get-quote - getQuote() { - this.errorMessage = ''; - this.quote = this.twainService.getQuote().pipe( - startWith('...'), - catchError( (err: any) => { - // Wait a turn because errorMessage already set once this turn - setTimeout(() => this.errorMessage = err.message || err.toString()); - return of('...'); // reset message to placeholder - }) - ); - // #enddocregion get-quote - } - -} -// #enddocregion component diff --git a/docs_app/content/examples/testing/src/app/twain/twain.data.ts b/docs_app/content/examples/testing/src/app/twain/twain.data.ts deleted file mode 100644 index a228ef5bbc..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/twain.data.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Quote } from './quote'; - -export const QUOTES: Quote[] = [ - 'Always do right. This will gratify some people and astonish the rest.', - 'I have never let my schooling interfere with my education.', - 'Don\'t go around saying the world owes you a living. The world owes you nothing. It was here first.', - 'Whenever you find yourself on the side of the majority, it is time to pause and reflect.', - 'If you tell the truth, you don\'t have to remember anything.', - 'Clothes make the man. Naked people have little or no influence on society.', - 'It\'s not the size of the dog in the fight, it\'s the size of the fight in the dog.', - 'Truth is stranger than fiction, but it is because Fiction is obliged to stick to possibilities; Truth isn\'t.', - 'The man who does not read good books has no advantage over the man who cannot read them.', - 'Get your facts first, and then you can distort them as much as you please.', -] -.map((q, i) => ({ id: i + 1, quote: q })); diff --git a/docs_app/content/examples/testing/src/app/twain/twain.service.ts b/docs_app/content/examples/testing/src/app/twain/twain.service.ts deleted file mode 100644 index f211a65a7d..0000000000 --- a/docs_app/content/examples/testing/src/app/twain/twain.service.ts +++ /dev/null @@ -1,45 +0,0 @@ -// Mark Twain Quote service gets quotes from server -import { Injectable } from '@angular/core'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; - -import { Observable, of, throwError } from 'rxjs'; -import { concat, map, retryWhen, switchMap, take, tap } from 'rxjs/operators'; - -import { Quote } from './quote'; - -@Injectable() -export class TwainService { - constructor(private http: HttpClient) { } - - private nextId = 1; - - getQuote(): Observable { - return Observable.create(observer => observer.next(this.nextId++)).pipe( - - // tap((id: number) => console.log(id)), - // tap((id: number) => { throw new Error('Simulated server error'); }), - - switchMap((id: number) => this.http.get(`api/quotes/${id}`)), - // tap((q : Quote) => console.log(q)), - map((q: Quote) => q.quote), - - // `errors` is observable of http.get errors - retryWhen(errors => errors.pipe( - switchMap((error: HttpErrorResponse) => { - if (error.status === 404) { - // Queried for quote that doesn't exist. - this.nextId = 1; // retry with quote id:1 - return of(null); // signal OK to retry - } - // Some other HTTP error. - console.error(error); - return throwError('Cannot get Twain quotes from the server'); - }), - take(2), - // If a second retry value, then didn't find id:1 and triggers the following error - concat(throwError('There are no Twain quotes')) // didn't find id:1 - )) - ); - } -} - diff --git a/docs_app/content/examples/testing/src/app/welcome/welcome.component.spec.ts b/docs_app/content/examples/testing/src/app/welcome/welcome.component.spec.ts deleted file mode 100644 index 25f3b28c77..0000000000 --- a/docs_app/content/examples/testing/src/app/welcome/welcome.component.spec.ts +++ /dev/null @@ -1,145 +0,0 @@ -// #docplaster -import { ComponentFixture, inject, TestBed } from '@angular/core/testing'; - -import { UserService } from '../model/user.service'; -import { WelcomeComponent } from './welcome.component'; - -// #docregion mock-user-service -class MockUserService { - isLoggedIn = true; - user = { name: 'Test User'}; -}; -// #enddocregion mock-user-service - -describe('WelcomeComponent (class only)', () => { - let comp: WelcomeComponent; - let userService: UserService; - - // #docregion class-only-before-each - beforeEach(() => { - TestBed.configureTestingModule({ - // provide the component-under-test and dependent service - providers: [ - WelcomeComponent, - { provide: UserService, useClass: MockUserService } - ] - }); - // inject both the component and the dependent service. - comp = TestBed.get(WelcomeComponent); - userService = TestBed.get(UserService); - }); - // #enddocregion class-only-before-each - - // #docregion class-only-tests - it('should not have welcome message after construction', () => { - expect(comp.welcome).toBeUndefined(); - }); - - it('should welcome logged in user after Angular calls ngOnInit', () => { - comp.ngOnInit(); - expect(comp.welcome).toContain(userService.user.name); - }); - - it('should ask user to log in if not logged in after ngOnInit', () => { - userService.isLoggedIn = false; - comp.ngOnInit(); - expect(comp.welcome).not.toContain(userService.user.name); - expect(comp.welcome).toContain('log in'); - }); - // #enddocregion class-only-tests -}); - -describe('WelcomeComponent', () => { - - let comp: WelcomeComponent; - let fixture: ComponentFixture; - let componentUserService: UserService; // the actually injected service - let userService: UserService; // the TestBed injected service - let el: HTMLElement; // the DOM element with the welcome message - - // #docregion setup, user-service-stub - let userServiceStub: Partial; - - // #enddocregion user-service-stub - beforeEach(() => { - // stub UserService for test purposes - // #docregion user-service-stub - userServiceStub = { - isLoggedIn: true, - user: { name: 'Test User'} - }; - // #enddocregion user-service-stub - - // #docregion config-test-module - TestBed.configureTestingModule({ - declarations: [ WelcomeComponent ], - // #enddocregion setup - // providers: [ UserService ] // NO! Don't provide the real service! - // Provide a test-double instead - // #docregion setup - providers: [ {provide: UserService, useValue: userServiceStub } ] - }); - // #enddocregion config-test-module - - fixture = TestBed.createComponent(WelcomeComponent); - comp = fixture.componentInstance; - - // #enddocregion setup - // #docregion injected-service - // UserService actually injected into the component - userService = fixture.debugElement.injector.get(UserService); - // #enddocregion injected-service - componentUserService = userService; - // #docregion setup - // #docregion inject-from-testbed - // UserService from the root injector - userService = TestBed.get(UserService); - // #enddocregion inject-from-testbed - - // get the "welcome" element by CSS selector (e.g., by class name) - el = fixture.nativeElement.querySelector('.welcome'); - }); - // #enddocregion setup - - // #docregion tests - it('should welcome the user', () => { - fixture.detectChanges(); - const content = el.textContent; - expect(content).toContain('Welcome', '"Welcome ..."'); - expect(content).toContain('Test User', 'expected name'); - }); - - it('should welcome "Bubba"', () => { - userService.user.name = 'Bubba'; // welcome message hasn't been shown yet - fixture.detectChanges(); - expect(el.textContent).toContain('Bubba'); - }); - - it('should request login if not logged in', () => { - userService.isLoggedIn = false; // welcome message hasn't been shown yet - fixture.detectChanges(); - const content = el.textContent; - expect(content).not.toContain('Welcome', 'not welcomed'); - expect(content).toMatch(/log in/i, '"log in"'); - }); - // #enddocregion tests - - it('should inject the component\'s UserService instance', - inject([UserService], (service: UserService) => { - expect(service).toBe(componentUserService); - })); - - it('TestBed and Component UserService should be the same', () => { - expect(userService === componentUserService).toBe(true); - }); - - // #docregion stub-not-injected - it('stub object and injected UserService should not be the same', () => { - expect(userServiceStub === userService).toBe(false); - - // Changing the stub object has no effect on the injected service - userServiceStub.isLoggedIn = false; - expect(userService.isLoggedIn).toBe(true); - }); - // #enddocregion stub-not-injected -}); diff --git a/docs_app/content/examples/testing/src/app/welcome/welcome.component.ts b/docs_app/content/examples/testing/src/app/welcome/welcome.component.ts deleted file mode 100644 index 802f30cc4a..0000000000 --- a/docs_app/content/examples/testing/src/app/welcome/welcome.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { UserService } from '../model/user.service'; - -// #docregion component -@Component({ - selector: 'app-welcome', - template: '

    {{welcome}}

    ' -}) -// #docregion class -export class WelcomeComponent implements OnInit { - welcome: string; - constructor(private userService: UserService) { } - - ngOnInit(): void { - this.welcome = this.userService.isLoggedIn ? - 'Welcome, ' + this.userService.user.name : 'Please log in.'; - } -} -// #enddocregion component, class diff --git a/docs_app/content/examples/testing/src/expected.ts b/docs_app/content/examples/testing/src/expected.ts deleted file mode 100644 index 5339fa9725..0000000000 --- a/docs_app/content/examples/testing/src/expected.ts +++ /dev/null @@ -1 +0,0 @@ -/* Ignore. Satisfies static analysis of router config in app.component.router.spec.ts */ diff --git a/docs_app/content/examples/testing/src/index-specs.html b/docs_app/content/examples/testing/src/index-specs.html deleted file mode 100644 index ca132f6cd0..0000000000 --- a/docs_app/content/examples/testing/src/index-specs.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/docs_app/content/examples/testing/src/index.html b/docs_app/content/examples/testing/src/index.html deleted file mode 100644 index adc021fd82..0000000000 --- a/docs_app/content/examples/testing/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - App Under Test - - - - - - - - diff --git a/docs_app/content/examples/testing/src/main-specs.ts b/docs_app/content/examples/testing/src/main-specs.ts deleted file mode 100644 index 4bb1949ae9..0000000000 --- a/docs_app/content/examples/testing/src/main-specs.ts +++ /dev/null @@ -1,45 +0,0 @@ -import './testing/global-jasmine'; -import 'jasmine-core/lib/jasmine-core/jasmine-html.js'; -import 'jasmine-core/lib/jasmine-core/boot.js'; - -declare var jasmine; - -import './polyfills'; - -import 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; -import 'zone.js/dist/long-stack-trace-zone'; -import 'zone.js/dist/proxy.js'; -import 'zone.js/dist/sync-test'; -import 'zone.js/dist/jasmine-patch'; - -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -// Spec files to include in the Stackblitz tests -import './tests.sb.ts'; - -// - -bootstrap(); - -// - -function bootstrap () { - if (window['jasmineRef']) { - location.reload(); - return; - } else { - window.onload(undefined); - window['jasmineRef'] = jasmine.getEnv(); - } - - // First, initialize the Angular testing environment. - getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() - ); -} diff --git a/docs_app/content/examples/testing/src/main.ts b/docs_app/content/examples/testing/src/main.ts deleted file mode 100644 index 27d21e9dac..0000000000 --- a/docs_app/content/examples/testing/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// main app entry point -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/testing/src/test.css b/docs_app/content/examples/testing/src/test.css deleted file mode 100644 index 6010a5d9ba..0000000000 --- a/docs_app/content/examples/testing/src/test.css +++ /dev/null @@ -1 +0,0 @@ -@import "~jasmine-core/lib/jasmine-core/jasmine.css" diff --git a/docs_app/content/examples/testing/src/testing/activated-route-stub.ts b/docs_app/content/examples/testing/src/testing/activated-route-stub.ts deleted file mode 100644 index 7c646f3d19..0000000000 --- a/docs_app/content/examples/testing/src/testing/activated-route-stub.ts +++ /dev/null @@ -1,29 +0,0 @@ -// export for convenience. -export { ActivatedRoute } from '@angular/router'; - -// #docregion activated-route-stub -import { convertToParamMap, ParamMap, Params } from '@angular/router'; -import { ReplaySubject } from 'rxjs'; - -/** - * An ActivateRoute test double with a `paramMap` observable. - * Use the `setParamMap()` method to add the next `paramMap` value. - */ -export class ActivatedRouteStub { - // Use a ReplaySubject to share previous values with subscribers - // and pump new values into the `paramMap` observable - private subject = new ReplaySubject(); - - constructor(initialParams?: Params) { - this.setParamMap(initialParams); - } - - /** The mock paramMap observable */ - readonly paramMap = this.subject.asObservable(); - - /** Set the paramMap observables's next value */ - setParamMap(params?: Params) { - this.subject.next(convertToParamMap(params)); - }; -} -// #enddocregion activated-route-stub diff --git a/docs_app/content/examples/testing/src/testing/async-observable-helpers.ts b/docs_app/content/examples/testing/src/testing/async-observable-helpers.ts deleted file mode 100644 index efcbdb19d6..0000000000 --- a/docs_app/content/examples/testing/src/testing/async-observable-helpers.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* -* Mock async observables that return asynchronously. -* The observable either emits once and completes or errors. -* -* Must call `tick()` when test with `fakeAsync()`. -* -* THE FOLLOWING DON'T WORK -* Using `of().delay()` triggers TestBed errors; -* see https://github.com/angular/angular/issues/10127 . -* -* Using `asap` scheduler - as in `of(value, asap)` - doesn't work either. -*/ -import { defer } from 'rxjs'; - -// #docregion async-data -/** Create async observable that emits-once and completes - * after a JS engine turn */ -export function asyncData(data: T) { - return defer(() => Promise.resolve(data)); -} -// #enddocregion async-data - -// #docregion async-error -/** Create async observable error that errors - * after a JS engine turn */ -export function asyncError(errorObject: any) { - return defer(() => Promise.reject(errorObject)); -} -// #enddocregion async-error diff --git a/docs_app/content/examples/testing/src/testing/global-jasmine.ts b/docs_app/content/examples/testing/src/testing/global-jasmine.ts deleted file mode 100644 index 560ff97d66..0000000000 --- a/docs_app/content/examples/testing/src/testing/global-jasmine.ts +++ /dev/null @@ -1,3 +0,0 @@ -import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js'; - -window['jasmineRequire'] = jasmineRequire; diff --git a/docs_app/content/examples/testing/src/testing/index.ts b/docs_app/content/examples/testing/src/testing/index.ts deleted file mode 100644 index 1fddaf8c4d..0000000000 --- a/docs_app/content/examples/testing/src/testing/index.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { DebugElement } from '@angular/core'; -import { tick, ComponentFixture } from '@angular/core/testing'; - -export * from './async-observable-helpers'; -export * from './activated-route-stub'; -export * from './jasmine-matchers'; -export * from './router-link-directive-stub'; - -///// Short utilities ///// - -/** Wait a tick, then detect changes */ -export function advance(f: ComponentFixture): void { - tick(); - f.detectChanges(); -} - -/** - * Create custom DOM event the old fashioned way - * - * https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent - * Although officially deprecated, some browsers (phantom) don't accept the preferred "new Event(eventName)" - */ -export function newEvent(eventName: string, bubbles = false, cancelable = false) { - let evt = document.createEvent('CustomEvent'); // MUST be 'CustomEvent' - evt.initCustomEvent(eventName, bubbles, cancelable, null); - return evt; -} - -// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button -// #docregion click-event -/** Button events to pass to `DebugElement.triggerEventHandler` for RouterLink event handler */ -export const ButtonClickEvents = { - left: { button: 0 }, - right: { button: 2 } -}; - -/** Simulate element click. Defaults to mouse left-button click event. */ -export function click(el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left): void { - if (el instanceof HTMLElement) { - el.click(); - } else { - el.triggerEventHandler('click', eventObj); - } -} -// #enddocregion click-event diff --git a/docs_app/content/examples/testing/src/testing/jasmine-matchers.d.ts b/docs_app/content/examples/testing/src/testing/jasmine-matchers.d.ts deleted file mode 100644 index cafce642f9..0000000000 --- a/docs_app/content/examples/testing/src/testing/jasmine-matchers.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare namespace jasmine { - interface Matchers { - toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher; - } -} diff --git a/docs_app/content/examples/testing/src/testing/jasmine-matchers.ts b/docs_app/content/examples/testing/src/testing/jasmine-matchers.ts deleted file mode 100644 index 4cab02e148..0000000000 --- a/docs_app/content/examples/testing/src/testing/jasmine-matchers.ts +++ /dev/null @@ -1,45 +0,0 @@ -/// - -//// Jasmine Custom Matchers //// -// Be sure to extend jasmine-matchers.d.ts when adding matchers - -export function addMatchers(): void { - jasmine.addMatchers({ - toHaveText: toHaveText - }); -} - -function toHaveText(): jasmine.CustomMatcher { - return { - compare: function (actual: any, expectedText: string, expectationFailOutput?: any): jasmine.CustomMatcherResult { - const actualText = elementText(actual); - const pass = actualText.indexOf(expectedText) > -1; - const message = pass ? '' : composeMessage(); - return { pass, message }; - - function composeMessage () { - const a = (actualText.length < 100 ? actualText : actualText.substr(0, 100) + '...'); - const efo = expectationFailOutput ? ` '${expectationFailOutput}'` : ''; - return `Expected element to have text content '${expectedText}' instead of '${a}'${efo}`; - } - } - }; -} - -function elementText(n: any): string { - if (n instanceof Array) { - return n.map(elementText).join(''); - } - - if (n.nodeType === Node.COMMENT_NODE) { - return ''; - } - - if (n.nodeType === Node.ELEMENT_NODE && n.hasChildNodes()) { - return elementText(Array.prototype.slice.call(n.childNodes)); - } - - if (n.nativeElement) { n = n.nativeElement; } - - return n.textContent; -} diff --git a/docs_app/content/examples/testing/src/testing/router-link-directive-stub.ts b/docs_app/content/examples/testing/src/testing/router-link-directive-stub.ts deleted file mode 100644 index 761529d726..0000000000 --- a/docs_app/content/examples/testing/src/testing/router-link-directive-stub.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Directive, Input } from '@angular/core'; - -// export for convenience. -export { RouterLink} from '@angular/router'; - -/* tslint:disable:directive-class-suffix */ -// #docregion router-link -@Directive({ - selector: '[routerLink]', - host: { '(click)': 'onClick()' } -}) -export class RouterLinkDirectiveStub { - @Input('routerLink') linkParams: any; - navigatedTo: any = null; - - onClick() { - this.navigatedTo = this.linkParams; - } -} -// #enddocregion router-link - -/// Dummy module to satisfy Angular Language service. Never used. -import { NgModule } from '@angular/core'; - -@NgModule({ - declarations: [ - RouterLinkDirectiveStub - ] -}) -export class RouterStubsModule {} diff --git a/docs_app/content/examples/testing/src/tests.html b/docs_app/content/examples/testing/src/tests.html deleted file mode 100644 index c988c457cb..0000000000 --- a/docs_app/content/examples/testing/src/tests.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - - Sample App Specs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/testing/src/tests.sb.ts b/docs_app/content/examples/testing/src/tests.sb.ts deleted file mode 100644 index 3f1c8fe61a..0000000000 --- a/docs_app/content/examples/testing/src/tests.sb.ts +++ /dev/null @@ -1,26 +0,0 @@ -// Import spec files individually for Stackblitz -import 'app/about/about.component.spec.ts'; -import 'app/app-initial.component.spec.ts'; -import 'app/app.component.router.spec.ts'; -import 'app/app.component.spec.ts'; -import 'app/banner/banner-initial.component.spec.ts'; -import 'app/banner/banner.component.spec.ts'; -import 'app/banner/banner.component.detect-changes.spec.ts'; -import 'app/banner/banner-external.component.spec.ts'; -import 'app/dashboard/dashboard-hero.component.spec.ts'; -import 'app/dashboard/dashboard.component.no-testbed.spec.ts'; -import 'app/dashboard/dashboard.component.spec.ts'; -import 'app/demo/async-helper.spec.ts'; -import 'app/demo/demo.spec.ts'; -import 'app/demo/demo.testbed.spec.ts'; -import 'app/hero/hero-detail.component.no-testbed.spec.ts'; -import 'app/hero/hero-detail.component.spec.ts'; -import 'app/hero/hero-list.component.spec.ts'; -import 'app/model/hero.service.spec.ts'; -import 'app/model/http-hero.service.spec.ts'; -import 'app/model/testing/http-client.spec.ts'; -import 'app/shared/highlight.directive.spec.ts'; -import 'app/shared/title-case.pipe.spec.ts'; -import 'app/twain/twain.component.spec.ts'; -import 'app/twain/twain.component.marbles.spec.ts'; -import 'app/welcome/welcome.component.spec.ts'; diff --git a/docs_app/content/examples/testing/stackblitz.json b/docs_app/content/examples/testing/stackblitz.json deleted file mode 100644 index d05e3dbb1a..0000000000 --- a/docs_app/content/examples/testing/stackblitz.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "description": "Heroes Test App", - "files":[ - "src/styles.css", - - "src/app/**/*.css", - "src/app/**/*.html", - "src/app/**/*.ts", - - "!src/app/bag/*.*", - - "!src/test.ts", - - "src/test.css", - "src/main.ts", - "src/index.html" - ], - "tags": ["testing"] -} diff --git a/docs_app/content/examples/toh-pt0/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt0/e2e/app.e2e-spec.ts deleted file mode 100644 index fa35fd0f05..0000000000 --- a/docs_app/content/examples/toh-pt0/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Tour of Heroes', () => { - beforeEach(() => { - return browser.get('/'); - }); - - it('should display "Tour of Heroes"', () => { - let title = element(by.css('app-root h1')).getText(); - expect(title).toEqual('Tour of Heroes'); - }); -}); diff --git a/docs_app/content/examples/toh-pt0/example-config.json b/docs_app/content/examples/toh-pt0/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt0/src/app/app.component.css b/docs_app/content/examples/toh-pt0/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt0/src/app/app.component.html b/docs_app/content/examples/toh-pt0/src/app/app.component.html deleted file mode 100644 index 6213adcb47..0000000000 --- a/docs_app/content/examples/toh-pt0/src/app/app.component.html +++ /dev/null @@ -1 +0,0 @@ -

    {{title}}

    diff --git a/docs_app/content/examples/toh-pt0/src/app/app.component.spec.ts b/docs_app/content/examples/toh-pt0/src/app/app.component.spec.ts deleted file mode 100644 index 9510495a2d..0000000000 --- a/docs_app/content/examples/toh-pt0/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); - })); -}); diff --git a/docs_app/content/examples/toh-pt0/src/app/app.component.ts b/docs_app/content/examples/toh-pt0/src/app/app.component.ts deleted file mode 100644 index 8391a7e645..0000000000 --- a/docs_app/content/examples/toh-pt0/src/app/app.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { -// #docregion set-title - title = 'Tour of Heroes'; -// #enddocregion set-title -} diff --git a/docs_app/content/examples/toh-pt0/src/app/app.module.ts b/docs_app/content/examples/toh-pt0/src/app/app.module.ts deleted file mode 100644 index f65716351a..0000000000 --- a/docs_app/content/examples/toh-pt0/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/toh-pt0/src/index.html b/docs_app/content/examples/toh-pt0/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt0/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt0/src/main.ts b/docs_app/content/examples/toh-pt0/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/toh-pt0/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/toh-pt0/src/styles.1.css b/docs_app/content/examples/toh-pt0/src/styles.1.css deleted file mode 100644 index 7c4c2fe4c6..0000000000 --- a/docs_app/content/examples/toh-pt0/src/styles.1.css +++ /dev/null @@ -1,22 +0,0 @@ -/* Application-wide Styles */ -h1 { - color: #369; - font-family: Arial, Helvetica, sans-serif; - font-size: 250%; -} -h2, h3 { - color: #444; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: #888; - font-family: Cambria, Georgia; -} -/* everywhere else */ -* { - font-family: Arial, Helvetica, sans-serif; -} diff --git a/docs_app/content/examples/toh-pt0/stackblitz.json b/docs_app/content/examples/toh-pt0/stackblitz.json deleted file mode 100644 index c2cf48171f..0000000000 --- a/docs_app/content/examples/toh-pt0/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 0", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/docs_app/content/examples/toh-pt1/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt1/e2e/app.e2e-spec.ts deleted file mode 100644 index c8d2214f2b..0000000000 --- a/docs_app/content/examples/toh-pt1/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,70 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; - -class Hero { - id: number; - name: string; - - // Factory method - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -const nameSuffix = 'X'; -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -describe('Tutorial part 1', () => { - - const expectedHero = { id: 1, name: 'Windstorm' }; - - beforeAll(() => browser.get('')); - - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - let hText = element(by.css('h1')).getText(); - expect(hText).toEqual(expectedH1, 'h1'); - }); - - it(`shows initial hero details`, async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(expectedHero.id); - expect(hero.name).toEqual(expectedHero.name.toUpperCase()); - }); - - it(`shows updated hero name`, async () => { - addToHeroName(nameSuffix); - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - let newName = expectedHero.name + nameSuffix; - expect(hero.id).toEqual(expectedHero.id); - expect(hero.name).toEqual(newName.toUpperCase()); - }); - -}); - -function getPageElts() { - return { - heroDetail: element(by.css('app-root')) - }; -} diff --git a/docs_app/content/examples/toh-pt1/example-config.json b/docs_app/content/examples/toh-pt1/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt1/src/app/app.component.css b/docs_app/content/examples/toh-pt1/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt1/src/app/app.component.html b/docs_app/content/examples/toh-pt1/src/app/app.component.html deleted file mode 100644 index ee3d478e16..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

    {{title}}

    - diff --git a/docs_app/content/examples/toh-pt1/src/app/app.component.ts b/docs_app/content/examples/toh-pt1/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt1/src/app/app.module.ts b/docs_app/content/examples/toh-pt1/src/app/app.module.ts deleted file mode 100644 index 1c9d0ac4d3..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/app.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -// #docplaster -// #docregion -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -// #docregion formsmodule-js-import -import { FormsModule } from '@angular/forms'; // <-- NgModel lives here -// #enddocregion formsmodule-js-import - -import { AppComponent } from './app.component'; -// #docregion heroes-import -import { HeroesComponent } from './heroes/heroes.component'; -// #enddocregion heroes-import - -@NgModule({ - // #docregion declarations - declarations: [ - AppComponent, - HeroesComponent - ], - // #enddocregion declarations - // #docregion ng-imports - imports: [ - BrowserModule, - FormsModule - ], - // #enddocregion ng-imports - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/toh-pt1/src/app/hero.ts b/docs_app/content/examples/toh-pt1/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html b/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html deleted file mode 100644 index 1c71ce26db..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.1.html +++ /dev/null @@ -1,17 +0,0 @@ - -{{hero}} - - - -

    {{ hero.name }} Details

    -
    id: {{hero.id}}
    -
    name: {{hero.name}}
    - - - -
    - -
    - diff --git a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.html deleted file mode 100644 index e1f98c577f..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - -

    {{ hero.name | uppercase }} Details

    - -
    id: {{hero.id}}
    -
    - -
    diff --git a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.ts deleted file mode 100644 index 06e5c69f51..0000000000 --- a/docs_app/content/examples/toh-pt1/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -// #docplaster -// #docregion, v1 -import { Component, OnInit } from '@angular/core'; -// #enddocregion v1 -import { Hero } from '../hero'; -// #docregion v1 - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - // #enddocregion, v1 - /* - // #docregion add-hero - hero = 'Windstorm'; - // #enddocregion add-hero - */ - // #docregion - // #docregion hero-property-1 - hero: Hero = { - id: 1, - name: 'Windstorm' - }; - // #enddocregion hero-property-1 - // #docregion v1 - - constructor() { } - - ngOnInit() { - } - -} -// #enddocregion, v1 diff --git a/docs_app/content/examples/toh-pt1/src/index.html b/docs_app/content/examples/toh-pt1/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt1/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt1/src/main.ts b/docs_app/content/examples/toh-pt1/src/main.ts deleted file mode 100644 index 6fd45e7d1e..0000000000 --- a/docs_app/content/examples/toh-pt1/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion diff --git a/docs_app/content/examples/toh-pt1/stackblitz.json b/docs_app/content/examples/toh-pt1/stackblitz.json deleted file mode 100644 index 880b28fae6..0000000000 --- a/docs_app/content/examples/toh-pt1/stackblitz.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "description": "Tour of Heroes: Part 1", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*", - "!**/dummy.module.ts" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/docs_app/content/examples/toh-pt2/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt2/e2e/app.e2e-spec.ts deleted file mode 100644 index ea2c445804..0000000000 --- a/docs_app/content/examples/toh-pt2/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,133 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; -const expectedH2 = 'My Heroes'; -const targetHero = { id: 16, name: 'RubberMan' }; -const nameSuffix = 'X'; - -class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -describe('Tutorial part 2', () => { - beforeAll(() => browser.get('')); - describe('Initial page', initialPageTests); - describe('Select hero', selectHeroTests); - describe('Update hero', updateHeroTests); -}); - -function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); - }); - - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); - }); - - it('has the right number of heroes', () => { - let page = getPageElts(); - expect(page.heroes.count()).toEqual(10); - }); - - it('has no selected hero and no hero details', function () { - let page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); - }); -} - -function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, function () { - let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`has selected ${targetHero.name}`, function () { - let page = getPageElts(); - let expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); - }); - - it('shows selected hero details', async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - }); -} - -function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`shows updated hero name in details`, async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName.toUpperCase()); - }); - - it(`shows updated hero name in list`, async () => { - let page = getPageElts(); - let hero = Hero.fromString(await page.selected.getText()); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName); - }); - -} - -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -function expectHeading(hLevel: number, expectedText: string): void { - let hTag = `h${hLevel}`; - let hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); -}; - -function getPageElts() { - return { - heroes: element.all(by.css('app-root li')), - selected: element(by.css('app-root li.selected')), - heroDetail: element(by.css('app-root > div, app-root > app-heroes > div')) - }; -} diff --git a/docs_app/content/examples/toh-pt2/example-config.json b/docs_app/content/examples/toh-pt2/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt2/src/app/app.component.css b/docs_app/content/examples/toh-pt2/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt2/src/app/app.component.html b/docs_app/content/examples/toh-pt2/src/app/app.component.html deleted file mode 100644 index ee3d478e16..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

    {{title}}

    - diff --git a/docs_app/content/examples/toh-pt2/src/app/app.component.ts b/docs_app/content/examples/toh-pt2/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt2/src/app/app.module.ts b/docs_app/content/examples/toh-pt2/src/app/app.module.ts deleted file mode 100644 index bc5d60226c..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/app.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; - -@NgModule({ - declarations: [ - AppComponent, - HeroesComponent - ], - imports: [ - BrowserModule, - FormsModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/toh-pt2/src/app/hero.ts b/docs_app/content/examples/toh-pt2/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html b/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html deleted file mode 100644 index fe140484f5..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html +++ /dev/null @@ -1,20 +0,0 @@ - -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    - - - -
  • - - - -
  • - - - -[class.selected]="hero === selectedHero" - diff --git a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.css deleted file mode 100644 index e956eab987..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,48 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.selected { - background-color: #CFD8DC !important; - color: white; -} -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; -} -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes .text { - position: relative; - top: -3px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.html deleted file mode 100644 index a233263d84..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,27 +0,0 @@ - -

    My Heroes

    -
      - -
    • - {{hero.id}} {{hero.name}} -
      • - -
    - - -
    - - -

    {{ selectedHero.name | uppercase }} Details

    -
    id: {{selectedHero.id}}
    -
    - -
    - - -
    - diff --git a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.ts deleted file mode 100644 index bee5856586..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Hero } from '../hero'; -// #docregion import-heroes -import { HEROES } from '../mock-heroes'; -// #enddocregion import-heroes - -// #docplaster -// #docregion metadata -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -// #enddocregion metadata -export class HeroesComponent implements OnInit { - - // #docregion heroes - heroes = HEROES; - // #enddocregion heroes - - // #docregion on-select - selectedHero: Hero; - - // #enddocregion on-select - - constructor() { } - - ngOnInit() { - } - - // #docregion on-select - onSelect(hero: Hero): void { - this.selectedHero = hero; - } - // #enddocregion on-select -} diff --git a/docs_app/content/examples/toh-pt2/src/app/mock-heroes.ts b/docs_app/content/examples/toh-pt2/src/app/mock-heroes.ts deleted file mode 100644 index e84c2fd2b0..0000000000 --- a/docs_app/content/examples/toh-pt2/src/app/mock-heroes.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/toh-pt2/src/index.html b/docs_app/content/examples/toh-pt2/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt2/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt2/src/main.ts b/docs_app/content/examples/toh-pt2/src/main.ts deleted file mode 100644 index 6fd45e7d1e..0000000000 --- a/docs_app/content/examples/toh-pt2/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion diff --git a/docs_app/content/examples/toh-pt2/stackblitz.json b/docs_app/content/examples/toh-pt2/stackblitz.json deleted file mode 100644 index 8f3cefdaeb..0000000000 --- a/docs_app/content/examples/toh-pt2/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 2", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/docs_app/content/examples/toh-pt3/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt3/e2e/app.e2e-spec.ts deleted file mode 100644 index 5c1f4028db..0000000000 --- a/docs_app/content/examples/toh-pt3/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,133 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; -const expectedH2 = 'My Heroes'; -const targetHero = { id: 16, name: 'RubberMan' }; -const nameSuffix = 'X'; - -class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -describe('Tutorial part 3', () => { - beforeAll(() => browser.get('')); - describe('Initial page', initialPageTests); - describe('Select hero', selectHeroTests); - describe('Update hero', updateHeroTests); -}); - -function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); - }); - - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); - }); - - it('has the right number of heroes', () => { - let page = getPageElts(); - expect(page.heroes.count()).toEqual(10); - }); - - it('has no selected hero and no hero details', function () { - let page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); - }); -} - -function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, function () { - let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`has selected ${targetHero.name}`, function () { - let page = getPageElts(); - let expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); - }); - - it('shows selected hero details', async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - }); -} - -function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`shows updated hero name in details`, async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName.toUpperCase()); - }); - - it(`shows updated hero name in list`, async () => { - let page = getPageElts(); - let hero = Hero.fromString(await page.selected.getText()); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName); - }); - -} - -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -function expectHeading(hLevel: number, expectedText: string): void { - let hTag = `h${hLevel}`; - let hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); -}; - -function getPageElts() { - return { - heroes: element.all(by.css('app-root li')), - selected: element(by.css('app-root li.selected')), - heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div')) - }; -} diff --git a/docs_app/content/examples/toh-pt3/example-config.json b/docs_app/content/examples/toh-pt3/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt3/src/app/app.component.css b/docs_app/content/examples/toh-pt3/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt3/src/app/app.component.html b/docs_app/content/examples/toh-pt3/src/app/app.component.html deleted file mode 100644 index ee3d478e16..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/app.component.html +++ /dev/null @@ -1,2 +0,0 @@ -

    {{title}}

    - diff --git a/docs_app/content/examples/toh-pt3/src/app/app.component.ts b/docs_app/content/examples/toh-pt3/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt3/src/app/app.module.ts b/docs_app/content/examples/toh-pt3/src/app/app.module.ts deleted file mode 100644 index 39fe27d3cf..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/app.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; - -@NgModule({ - declarations: [ - AppComponent, - HeroesComponent, - HeroDetailComponent - ], - imports: [ - BrowserModule, - FormsModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index b2b52432a0..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
    - -

    {{ hero.name | uppercase }} Details

    -
    id: {{hero.id}}
    -
    - -
    - -
    diff --git a/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index 973c5b2b5a..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -// #docregion import-input -import { Component, OnInit, Input } from '@angular/core'; -// #enddocregion import-input -// #docregion import-hero -import { Hero } from '../hero'; -// #enddocregion import-hero - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] -}) -export class HeroDetailComponent implements OnInit { - // #docregion input-hero - @Input() hero: Hero; - // #enddocregion input-hero - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/toh-pt3/src/app/hero.ts b/docs_app/content/examples/toh-pt3/src/app/hero.ts deleted file mode 100644 index 8f7cc205c8..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/hero.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.css deleted file mode 100644 index e956eab987..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,48 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.selected { - background-color: #CFD8DC !important; - color: white; -} -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; -} -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes .text { - position: relative; - top: -3px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.html deleted file mode 100644 index 2a78dbaa33..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,13 +0,0 @@ -

    My Heroes

    - -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    - - - - diff --git a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.ts deleted file mode 100644 index 35462026c7..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Hero } from '../hero'; -import { HEROES } from '../mock-heroes'; - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - - heroes = HEROES; - - selectedHero: Hero; - - constructor() { } - - ngOnInit() { - } - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } -} - diff --git a/docs_app/content/examples/toh-pt3/src/app/mock-heroes.ts b/docs_app/content/examples/toh-pt3/src/app/mock-heroes.ts deleted file mode 100644 index e84c2fd2b0..0000000000 --- a/docs_app/content/examples/toh-pt3/src/app/mock-heroes.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/toh-pt3/src/index.html b/docs_app/content/examples/toh-pt3/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt3/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt3/src/main.ts b/docs_app/content/examples/toh-pt3/src/main.ts deleted file mode 100644 index 6fd45e7d1e..0000000000 --- a/docs_app/content/examples/toh-pt3/src/main.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion diff --git a/docs_app/content/examples/toh-pt3/stackblitz.json b/docs_app/content/examples/toh-pt3/stackblitz.json deleted file mode 100644 index c4ef78dc9f..0000000000 --- a/docs_app/content/examples/toh-pt3/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 3", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/docs_app/content/examples/toh-pt4/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt4/e2e/app.e2e-spec.ts deleted file mode 100644 index bd71754bbb..0000000000 --- a/docs_app/content/examples/toh-pt4/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,133 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; -const expectedH2 = 'My Heroes'; -const targetHero = { id: 16, name: 'RubberMan' }; -const nameSuffix = 'X'; - -class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -describe('Tutorial part 4', () => { - beforeAll(() => browser.get('')); - describe('Initial page', initialPageTests); - describe('Select hero', selectHeroTests); - describe('Update hero', updateHeroTests); -}); - -function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); - }); - - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); - }); - - it('has the right number of heroes', () => { - let page = getPageElts(); - expect(page.heroes.count()).toEqual(10); - }); - - it('has no selected hero and no hero details', function () { - let page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); - }); -} - -function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, function () { - let hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`has selected ${targetHero.name}`, function () { - let page = getPageElts(); - let expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); - }); - - it('shows selected hero details', async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - }); -} - -function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); - // Nothing specific to expect other than lack of exceptions. - }); - - it(`shows updated hero name in details`, async () => { - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName.toUpperCase()); - }); - - it(`shows updated hero name in list`, async () => { - let page = getPageElts(); - let hero = Hero.fromString(await page.selected.getText()); - let newName = targetHero.name + nameSuffix; - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newName); - }); - -} - -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -function expectHeading(hLevel: number, expectedText: string): void { - let hTag = `h${hLevel}`; - let hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); -}; - -function getPageElts() { - return { - heroes: element.all(by.css('app-root li')), - selected: element(by.css('app-root li.selected')), - heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div')) - }; -} diff --git a/docs_app/content/examples/toh-pt4/example-config.json b/docs_app/content/examples/toh-pt4/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt4/src/app/app.component.css b/docs_app/content/examples/toh-pt4/src/app/app.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt4/src/app/app.component.html b/docs_app/content/examples/toh-pt4/src/app/app.component.html deleted file mode 100644 index cb45ac499a..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/app.component.html +++ /dev/null @@ -1,3 +0,0 @@ -

    {{title}}

    - - diff --git a/docs_app/content/examples/toh-pt4/src/app/app.component.ts b/docs_app/content/examples/toh-pt4/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt4/src/app/app.module.ts b/docs_app/content/examples/toh-pt4/src/app/app.module.ts deleted file mode 100644 index f3cc34faff..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/app.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -import { HeroService } from './hero.service'; -import { MessageService } from './message.service'; -import { MessagesComponent } from './messages/messages.component'; - -@NgModule({ - declarations: [ - AppComponent, - HeroesComponent, - HeroDetailComponent, - MessagesComponent - ], - imports: [ - BrowserModule, - FormsModule - ], - // #docregion providers - // #docregion providers-heroservice - providers: [ - HeroService, - // #enddocregion providers-heroservice - MessageService - // #docregion providers-heroservice - ], - // #enddocregion providers-heroservice - // #enddocregion providers - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index 9195b8aa85..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
    -

    {{ hero.name | uppercase }} Details

    -
    id: {{hero.id}}
    -
    - -
    -
    diff --git a/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index 2edf9bba38..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: ['./hero-detail.component.css'] -}) -export class HeroDetailComponent implements OnInit { - - // #docregion hero - @Input() hero: Hero; - // #enddocregion hero - - constructor() { } - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/toh-pt4/src/app/hero.service.1.ts b/docs_app/content/examples/toh-pt4/src/app/hero.service.1.ts deleted file mode 100644 index 84f5eed9ce..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/hero.service.1.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* Newly generated and synchronous versions */ -// #docplaster -// #docregion, new -import { Injectable } from '@angular/core'; - -// #enddocregion new -import { Hero } from './hero'; -import { HEROES } from './mock-heroes'; - -// #docregion new -@Injectable() -export class HeroService { - - constructor() { } - - // #enddocregion new - // #docregion getHeroes - getHeroes(): Hero[] { - return HEROES; - } - // #enddocregion getHeroes - // #docregion new -} -// #enddocregion, new diff --git a/docs_app/content/examples/toh-pt4/src/app/hero.service.ts b/docs_app/content/examples/toh-pt4/src/app/hero.service.ts deleted file mode 100644 index c93a3ff215..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/hero.service.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; - -// #docregion import-observable -import { Observable, of } from 'rxjs'; -// #enddocregion import-observable - -// #docregion import-heroes -import { Hero } from './hero'; -import { HEROES } from './mock-heroes'; -// #enddocregion import-heroes -// #docregion import-message-service -import { MessageService } from './message.service'; -// #enddocregion import-message-service - -@Injectable() -export class HeroService { - - // #docregion ctor - constructor(private messageService: MessageService) { } - // #enddocregion ctor - - // #docregion getHeroes, getHeroes-1 - getHeroes(): Observable { - // #enddocregion getHeroes-1 - // Todo: send the message _after_ fetching the heroes - this.messageService.add('HeroService: fetched heroes'); - // #docregion getHeroes-1 - return of(HEROES); - } - // #enddocregion getHeroes, getHeroes-1 -} -// #enddocregion diff --git a/docs_app/content/examples/toh-pt4/src/app/hero.ts b/docs_app/content/examples/toh-pt4/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts b/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts deleted file mode 100644 index 909955f097..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.1.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; -import { Observable } from 'rxjs'; - -class DummyHeroesComponent { - - heroes: Observable; - - constructor(private heroService: HeroService) {} - - // #docregion getHeroes - getHeroes(): void { - // #docregion get-heroes - this.heroes = this.heroService.getHeroes(); - // #enddocregion get-heroes - } - // #enddocregion getHeroes -} - diff --git a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.css deleted file mode 100644 index 4bef1bb3c4..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,50 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.selected { - background-color: #CFD8DC !important; - color: white; -} -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - cursor: pointer; - position: relative; - left: 0; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} -.heroes li.selected:hover { - background-color: #BBD8DC !important; - color: white; -} -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} -.heroes .text { - position: relative; - top: -3px; -} -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - min-width: 16px; - text-align: right; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.html deleted file mode 100644 index fdddd6823b..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,14 +0,0 @@ -

    My Heroes

    - -
      -
    • - {{hero.id}} {{hero.name}} -
      • -
    - - - - - diff --git a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.ts deleted file mode 100644 index 7fdc68a057..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Hero } from '../hero'; -// #docregion hero-service-import -import { HeroService } from '../hero.service'; -// #enddocregion hero-service-import - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - - selectedHero: Hero; - - // #docregion heroes - heroes: Hero[]; - // #enddocregion heroes - - // #docregion ctor - constructor(private heroService: HeroService) { } - // #enddocregion ctor - - // #docregion ng-on-init - ngOnInit() { - this.getHeroes(); - } - // #enddocregion ng-on-init - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } - - // #docregion getHeroes - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } - // #enddocregion getHeroes -} diff --git a/docs_app/content/examples/toh-pt4/src/app/message.service.spec.ts b/docs_app/content/examples/toh-pt4/src/app/message.service.spec.ts deleted file mode 100644 index 63ecfd8ff6..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/message.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { MessageService } from './message.service'; - -describe('MessageService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [MessageService] - }); - }); - - it('should be created', inject([MessageService], (service: MessageService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/docs_app/content/examples/toh-pt4/src/app/message.service.ts b/docs_app/content/examples/toh-pt4/src/app/message.service.ts deleted file mode 100644 index 1c56a49e70..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/message.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class MessageService { - messages: string[] = []; - - add(message: string) { - this.messages.push(message); - } - - clear() { - this.messages = []; - } -} diff --git a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.css b/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.css deleted file mode 100644 index d08d9be581..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.css +++ /dev/null @@ -1,35 +0,0 @@ -/* MessagesComponent's private CSS styles */ -h2 { - color: red; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: crimson; - font-family: Cambria, Georgia; -} - -button.clear { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} -button.clear { - color: #888; - margin-bottom: 12px; -} diff --git a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.html b/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.html deleted file mode 100644 index 1df7dfd989..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
    - -

    Messages

    - -
    {{message}}
    - -
    diff --git a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts b/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts deleted file mode 100644 index 3c2b2b1537..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MessagesComponent } from './messages.component'; - -describe('MessagesComponent', () => { - let component: MessagesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MessagesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(MessagesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.ts b/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.ts deleted file mode 100644 index 8a819207fb..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/messages/messages.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -// #docregion import-message-service -import { MessageService } from '../message.service'; -// #enddocregion import-message-service - -@Component({ - selector: 'app-messages', - templateUrl: './messages.component.html', - styleUrls: ['./messages.component.css'] -}) -export class MessagesComponent implements OnInit { - - // #docregion ctor - constructor(public messageService: MessageService) {} - // #enddocregion ctor - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/toh-pt4/src/app/mock-heroes.ts b/docs_app/content/examples/toh-pt4/src/app/mock-heroes.ts deleted file mode 100644 index 1771a7103b..0000000000 --- a/docs_app/content/examples/toh-pt4/src/app/mock-heroes.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/toh-pt4/src/index.html b/docs_app/content/examples/toh-pt4/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt4/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt4/src/main.ts b/docs_app/content/examples/toh-pt4/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/toh-pt4/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/toh-pt4/stackblitz.json b/docs_app/content/examples/toh-pt4/stackblitz.json deleted file mode 100644 index 1b3e442ac0..0000000000 --- a/docs_app/content/examples/toh-pt4/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 4", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/docs_app/content/examples/toh-pt5/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt5/e2e/app.e2e-spec.ts deleted file mode 100644 index e94b7e6ca6..0000000000 --- a/docs_app/content/examples/toh-pt5/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,174 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; -const targetHero = { id: 15, name: 'Magneta' }; -const targetHeroDashboardIndex = 3; -const nameSuffix = 'X'; -const newHeroName = targetHero.name + nameSuffix; - -class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -describe('Tutorial part 5', () => { - - beforeAll(() => browser.get('')); - - function getPageElts() { - let navElts = element.all(by.css('app-root nav a')); - - return { - navElts: navElts, - - appDashboardHref: navElts.get(0), - appDashboard: element(by.css('app-root app-dashboard')), - topHeroes: element.all(by.css('app-root app-dashboard > div h4')), - - appHeroesHref: navElts.get(1), - appHeroes: element(by.css('app-root app-heroes')), - allHeroes: element.all(by.css('app-root app-heroes li')), - heroDetail: element(by.css('app-root app-hero-detail > div')) - }; - } - - describe('Initial page', () => { - - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); - }); - - const expectedViewNames = ['Dashboard', 'Heroes']; - it(`has views ${expectedViewNames}`, () => { - let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText()); - expect(viewNames).toEqual(expectedViewNames); - }); - - it('has dashboard as the active view', () => { - let page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); - }); - - }); - - describe('Dashboard tests', () => { - - beforeAll(() => browser.get('')); - - it('has top heroes', () => { - let page = getPageElts(); - expect(page.topHeroes.count()).toEqual(4); - }); - - it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); - - it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - - it(`saves and shows ${newHeroName} in Dashboard`, () => { - element(by.buttonText('go back')).click(); - let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(newHeroName); - }); - - }); - - describe('Heroes tests', () => { - - beforeAll(() => browser.get('')); - - it('can switch to Heroes view', () => { - getPageElts().appHeroesHref.click(); - let page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); - }); - - it('can route to hero details', async () => { - getHeroLiEltById(targetHero.id).click(); - - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - }); - - it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - - it(`shows ${newHeroName} in Heroes list`, () => { - element(by.buttonText('go back')).click(); - let expectedText = `${targetHero.id} ${newHeroName}`; - expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText); - }); - - }); - - async function dashboardSelectTargetHero() { - let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - targetHeroElt.click(); - - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - } - - async function updateHeroNameInDetailView() { - // Assumes that the current view is the hero details view. - addToHeroName(nameSuffix); - - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newHeroName.toUpperCase()); - } - -}); - -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -function expectHeading(hLevel: number, expectedText: string): void { - let hTag = `h${hLevel}`; - let hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); -}; - -function getHeroLiEltById(id: number) { - let spanForId = element(by.cssContainingText('li span.badge', id.toString())); - return spanForId.element(by.xpath('..')); -} diff --git a/docs_app/content/examples/toh-pt5/example-config.json b/docs_app/content/examples/toh-pt5/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt5/src/app/app-routing.module.0.ts b/docs_app/content/examples/toh-pt5/src/app/app-routing.module.0.ts deleted file mode 100644 index c855135b75..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app-routing.module.0.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - imports: [ - CommonModule - ], - declarations: [] -}) -export class AppRoutingModule { } diff --git a/docs_app/content/examples/toh-pt5/src/app/app-routing.module.ts b/docs_app/content/examples/toh-pt5/src/app/app-routing.module.ts deleted file mode 100644 index bfdcb7d5ec..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app-routing.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docplaster -// #docregion , v1 -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -// #enddocregion v1 -// #docregion import-dashboard -import { DashboardComponent } from './dashboard/dashboard.component'; -// #enddocregion import-dashboard -// #docregion heroes-route -import { HeroesComponent } from './heroes/heroes.component'; -// #enddocregion heroes-route -// #docregion import-herodetail -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -// #enddocregion import-herodetail -// #docregion heroes-route - -// #docregion routes -const routes: Routes = [ - // #enddocregion heroes-route - // #docregion redirect-route - { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, - // #enddocregion redirect-route - // #docregion dashboard-route - { path: 'dashboard', component: DashboardComponent }, - // #enddocregion dashboard-route - // #docregion detail-route - { path: 'detail/:id', component: HeroDetailComponent }, - // #enddocregion detail-route - // #docregion heroes-route - { path: 'heroes', component: HeroesComponent } -]; -// #enddocregion routes, heroes-route - -// #docregion v1 -@NgModule({ -// #enddocregion v1 -// #docregion ngmodule-imports - imports: [ RouterModule.forRoot(routes) ], -// #enddocregion ngmodule-imports -// #docregion v1 - exports: [ RouterModule ] -}) -export class AppRoutingModule {} -// #enddocregion , v1 diff --git a/docs_app/content/examples/toh-pt5/src/app/app.component.css b/docs_app/content/examples/toh-pt5/src/app/app.component.css deleted file mode 100644 index bf741e4575..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app.component.css +++ /dev/null @@ -1,29 +0,0 @@ -/* AppComponent's private CSS styles */ -h1 { - font-size: 1.2em; - color: #999; - margin-bottom: 0; -} -h2 { - font-size: 2em; - margin-top: 0; - padding-top: 0; -} -nav a { - padding: 5px 10px; - text-decoration: none; - margin-top: 10px; - display: inline-block; - background-color: #eee; - border-radius: 4px; -} -nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; -} -nav a.active { - color: #039be5; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/app.component.html b/docs_app/content/examples/toh-pt5/src/app/app.component.html deleted file mode 100644 index 12e347256e..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - -

    {{title}}

    - - - - - - diff --git a/docs_app/content/examples/toh-pt5/src/app/app.component.ts b/docs_app/content/examples/toh-pt5/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/app.module.ts b/docs_app/content/examples/toh-pt5/src/app/app.module.ts deleted file mode 100644 index 120bf48fcd..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/app.module.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroService } from './hero.service'; -import { MessageService } from './message.service'; -import { MessagesComponent } from './messages/messages.component'; - -// #docregion routing-module -import { AppRoutingModule } from './app-routing.module'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - AppRoutingModule - ], -// #enddocregion routing-module - // #docregion dashboard - declarations: [ - AppComponent, - DashboardComponent, - HeroesComponent, - HeroDetailComponent, - MessagesComponent - ], - // #enddocregion dashboard - providers: [ HeroService, MessageService ], - bootstrap: [ AppComponent ] -// #docregion routing-module -}) -export class AppModule { } -// #enddocregion routing-module diff --git a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html b/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html deleted file mode 100644 index ddb4fd29f8..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.1.html +++ /dev/null @@ -1,8 +0,0 @@ -

    Top Heroes

    -
    - -
    -

    {{hero.name}}

    -
    -     -
    diff --git a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css b/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css deleted file mode 100644 index 3822cc56bb..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.css +++ /dev/null @@ -1,62 +0,0 @@ -/* DashboardComponent's private CSS styles */ -[class*='col-'] { - float: left; - padding-right: 20px; - padding-bottom: 20px; -} -[class*='col-']:last-of-type { - padding-right: 0; -} -a { - text-decoration: none; -} -*, *:after, *:before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -h3 { - text-align: center; margin-bottom: 0; -} -h4 { - position: relative; -} -.grid { - margin: 0; -} -.col-1-4 { - width: 25%; -} -.module { - padding: 20px; - text-align: center; - color: #eee; - max-height: 120px; - min-width: 120px; - background-color: #607D8B; - border-radius: 2px; -} -.module:hover { - background-color: #EEE; - cursor: pointer; - color: #607d8b; -} -.grid-pad { - padding: 10px 0; -} -.grid-pad > [class*='col-']:last-of-type { - padding-right: 20px; -} -@media (max-width: 600px) { - .module { - font-size: 10px; - max-height: 75px; } -} -@media (max-width: 1024px) { - .grid { - margin: 0; - } - .module { - min-width: 60px; - } -} diff --git a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html b/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html deleted file mode 100644 index 946a4d5fdb..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1,11 +0,0 @@ -

    Top Heroes

    -
    - - - -
    -

    {{hero.name}}

    -
    -     -
    diff --git a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts b/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts deleted file mode 100644 index fea6bfb4db..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DashboardComponent } from './dashboard.component'; - -describe('DashboardComponent', () => { - let component: DashboardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts b/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index d4db0c406d..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: [ './dashboard.component.css' ] -}) -export class DashboardComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - // #docregion getHeroes - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes.slice(1, 5)); - } - // #enddocregion getHeroes -} diff --git a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index 062544af48..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css +++ /dev/null @@ -1,30 +0,0 @@ -/* HeroDetailComponent's private CSS styles */ -label { - display: inline-block; - width: 3em; - margin: .5em 0; - color: #607D8B; - font-weight: bold; -} -input { - height: 2em; - font-size: 1em; - padding-left: .4em; -} -button { - margin-top: 20px; - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #ccc; - cursor: auto; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index 338a747291..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
    -

    {{ hero.name | uppercase }} Details

    -
    id: {{hero.id}}
    -
    - -
    - - - -
    diff --git a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index 637ba05f66..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit, Input } from '@angular/core'; -// #docregion added-imports -import { ActivatedRoute } from '@angular/router'; -import { Location } from '@angular/common'; - -// #enddocregion added-imports -import { Hero } from '../hero'; -// #docregion added-imports -import { HeroService } from '../hero.service'; -// #enddocregion added-imports - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: [ './hero-detail.component.css' ] -}) -export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; - - // #docregion ctor - constructor( - private route: ActivatedRoute, - private heroService: HeroService, - private location: Location - ) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit(): void { - this.getHero(); - } - - // #docregion getHero - getHero(): void { - const id = +this.route.snapshot.paramMap.get('id'); - this.heroService.getHero(id) - .subscribe(hero => this.hero = hero); - } - // #enddocregion getHero - // #enddocregion ngOnInit - - // #docregion goBack - goBack(): void { - this.location.back(); - } -// #enddocregion goBack -} diff --git a/docs_app/content/examples/toh-pt5/src/app/hero.service.ts b/docs_app/content/examples/toh-pt5/src/app/hero.service.ts deleted file mode 100644 index 8b90d0a2f0..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/hero.service.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Injectable } from '@angular/core'; - -import { Observable, of } from 'rxjs'; - -import { Hero } from './hero'; -import { HEROES } from './mock-heroes'; -import { MessageService } from './message.service'; - -@Injectable() -export class HeroService { - - constructor(private messageService: MessageService) { } - - getHeroes(): Observable { - // Todo: send the message _after_ fetching the heroes - this.messageService.add('HeroService: fetched heroes'); - return of(HEROES); - } - - // #docregion getHero - getHero(id: number): Observable { - // Todo: send the message _after_ fetching the hero - this.messageService.add(`HeroService: fetched hero id=${id}`); - return of(HEROES.find(hero => hero.id === id)); - } - // #enddocregion getHero -} diff --git a/docs_app/content/examples/toh-pt5/src/app/hero.ts b/docs_app/content/examples/toh-pt5/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.css deleted file mode 100644 index 91e0badceb..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,51 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - position: relative; - cursor: pointer; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} - -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} - -.heroes a { - color: #888; - text-decoration: none; - position: relative; - display: block; - width: 250px; -} - -.heroes a:hover { - color:#607D8B; -} - -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - min-width: 16px; - text-align: right; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.html deleted file mode 100644 index bd7e454e45..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,10 +0,0 @@ -

    My Heroes

    - - - diff --git a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.ts deleted file mode 100644 index 3a893ba554..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -// #docregion class -export class HeroesComponent implements OnInit { - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } -} -// #enddocregion class diff --git a/docs_app/content/examples/toh-pt5/src/app/message.service.spec.ts b/docs_app/content/examples/toh-pt5/src/app/message.service.spec.ts deleted file mode 100644 index 63ecfd8ff6..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/message.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { MessageService } from './message.service'; - -describe('MessageService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [MessageService] - }); - }); - - it('should be created', inject([MessageService], (service: MessageService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/docs_app/content/examples/toh-pt5/src/app/message.service.ts b/docs_app/content/examples/toh-pt5/src/app/message.service.ts deleted file mode 100644 index 1c56a49e70..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/message.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class MessageService { - messages: string[] = []; - - add(message: string) { - this.messages.push(message); - } - - clear() { - this.messages = []; - } -} diff --git a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.css b/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.css deleted file mode 100644 index d08d9be581..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.css +++ /dev/null @@ -1,35 +0,0 @@ -/* MessagesComponent's private CSS styles */ -h2 { - color: red; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: crimson; - font-family: Cambria, Georgia; -} - -button.clear { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} -button.clear { - color: #888; - margin-bottom: 12px; -} diff --git a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.html b/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.html deleted file mode 100644 index 8e86f5247d..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
    - -

    Messages

    - -
    {{message}}
    - -
    diff --git a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts b/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts deleted file mode 100644 index 3c2b2b1537..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MessagesComponent } from './messages.component'; - -describe('MessagesComponent', () => { - let component: MessagesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MessagesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(MessagesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.ts b/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.ts deleted file mode 100644 index 17c8b2701f..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/messages/messages.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-messages', - templateUrl: './messages.component.html', - styleUrls: ['./messages.component.css'] -}) -export class MessagesComponent implements OnInit { - - constructor(public messageService: MessageService) {} - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/toh-pt5/src/app/mock-heroes.ts b/docs_app/content/examples/toh-pt5/src/app/mock-heroes.ts deleted file mode 100644 index 1771a7103b..0000000000 --- a/docs_app/content/examples/toh-pt5/src/app/mock-heroes.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/toh-pt5/src/index.html b/docs_app/content/examples/toh-pt5/src/index.html deleted file mode 100644 index f5fed0967e..0000000000 --- a/docs_app/content/examples/toh-pt5/src/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt5/src/main.ts b/docs_app/content/examples/toh-pt5/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/toh-pt5/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/toh-pt5/stackblitz.json b/docs_app/content/examples/toh-pt5/stackblitz.json deleted file mode 100644 index 17390ecfc6..0000000000 --- a/docs_app/content/examples/toh-pt5/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 5", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0,1,2,3].*" - ], - "tags": ["tutorial", "tour", "heroes", "router"] -} diff --git a/docs_app/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/docs_app/content/examples/toh-pt6/e2e/app.e2e-spec.ts deleted file mode 100644 index 5095aefeaa..0000000000 --- a/docs_app/content/examples/toh-pt6/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,310 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; - -const expectedH1 = 'Tour of Heroes'; -const expectedTitle = `${expectedH1}`; -const targetHero = { id: 15, name: 'Magneta' }; -const targetHeroDashboardIndex = 3; -const nameSuffix = 'X'; -const newHeroName = targetHero.name + nameSuffix; - -class Hero { - id: number; - name: string; - - // Factory methods - - // Hero from string formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Hero from hero list
  • element. - static async fromLi(li: ElementFinder): Promise { - let stringsFromA = await li.all(by.css('a')).getText(); - let strings = stringsFromA[0].split(' '); - return { id: +strings[0], name: strings[1] }; - } - - // Hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
    - let _id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - let _name = await detail.element(by.css('h2')).getText(); - return { - id: +_id.substr(_id.indexOf(' ') + 1), - name: _name.substr(0, _name.lastIndexOf(' ')) - }; - } -} - -// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet -// and we don't have the backwards compatibility package yet. -// Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6 -xdescribe('Tutorial part 6', () => { - - beforeAll(() => browser.get('')); - - function getPageElts() { - let navElts = element.all(by.css('app-root nav a')); - - return { - navElts: navElts, - - appDashboardHref: navElts.get(0), - appDashboard: element(by.css('app-root app-dashboard')), - topHeroes: element.all(by.css('app-root app-dashboard > div h4')), - - appHeroesHref: navElts.get(1), - appHeroes: element(by.css('app-root app-heroes')), - allHeroes: element.all(by.css('app-root app-heroes li')), - selectedHeroSubview: element(by.css('app-root app-heroes > div:last-child')), - - heroDetail: element(by.css('app-root app-hero-detail > div')), - - searchBox: element(by.css('#search-box')), - searchResults: element.all(by.css('.search-result li')) - }; - } - - describe('Initial page', () => { - - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); - }); - - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); - }); - - const expectedViewNames = ['Dashboard', 'Heroes']; - it(`has views ${expectedViewNames}`, () => { - let viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText()); - expect(viewNames).toEqual(expectedViewNames); - }); - - it('has dashboard as the active view', () => { - let page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); - }); - - }); - - describe('Dashboard tests', () => { - - beforeAll(() => browser.get('')); - - it('has top heroes', () => { - let page = getPageElts(); - expect(page.topHeroes.count()).toEqual(4); - }); - - it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); - - it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - - it(`cancels and shows ${targetHero.name} in Dashboard`, () => { - element(by.buttonText('go back')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 - - let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - }); - - it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); - - it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - - it(`saves and shows ${newHeroName} in Dashboard`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 - - let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(newHeroName); - }); - - }); - - describe('Heroes tests', () => { - - beforeAll(() => browser.get('')); - - it('can switch to Heroes view', () => { - getPageElts().appHeroesHref.click(); - let page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); - }); - - it('can route to hero details', async () => { - getHeroLiEltById(targetHero.id).click(); - - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - }); - - it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - - it(`shows ${newHeroName} in Heroes list`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); - let expectedText = `${targetHero.id} ${newHeroName}`; - expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText); - }); - - it(`deletes ${newHeroName} from Heroes list`, async () => { - const heroesBefore = await toHeroArray(getPageElts().allHeroes); - const li = getHeroLiEltById(targetHero.id); - li.element(by.buttonText('x')).click(); - - const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(9, 'number of heroes'); - const heroesAfter = await toHeroArray(page.allHeroes); - // console.log(await Hero.fromLi(page.allHeroes[0])); - const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName); - expect(heroesAfter).toEqual(expectedHeroes); - // expect(page.selectedHeroSubview.isPresent()).toBeFalsy(); - }); - - it(`adds back ${targetHero.name}`, async () => { - const newHeroName = 'Alice'; - const heroesBefore = await toHeroArray(getPageElts().allHeroes); - const numHeroes = heroesBefore.length; - - element(by.css('input')).sendKeys(newHeroName); - element(by.buttonText('add')).click(); - - let page = getPageElts(); - let heroesAfter = await toHeroArray(page.allHeroes); - expect(heroesAfter.length).toEqual(numHeroes + 1, 'number of heroes'); - - expect(heroesAfter.slice(0, numHeroes)).toEqual(heroesBefore, 'Old heroes are still there'); - - const maxId = heroesBefore[heroesBefore.length - 1].id; - expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName}); - }); - - it('displays correctly styled buttons', async () => { - element.all(by.buttonText('x')).then(buttons => { - for (const button of buttons) { - // Inherited styles from styles.css - expect(button.getCssValue('font-family')).toBe('Arial'); - expect(button.getCssValue('border')).toContain('none'); - expect(button.getCssValue('padding')).toBe('5px 10px'); - expect(button.getCssValue('border-radius')).toBe('4px'); - // Styles defined in heroes.component.css - expect(button.getCssValue('left')).toBe('194px'); - expect(button.getCssValue('top')).toBe('-32px'); - } - }); - - const addButton = element(by.buttonText('add')); - // Inherited styles from styles.css - expect(addButton.getCssValue('font-family')).toBe('Arial'); - expect(addButton.getCssValue('border')).toContain('none'); - expect(addButton.getCssValue('padding')).toBe('5px 10px'); - expect(addButton.getCssValue('border-radius')).toBe('4px'); - }); - - }); - - describe('Progressive hero search', () => { - - beforeAll(() => browser.get('')); - - it(`searches for 'Ma'`, async () => { - getPageElts().searchBox.sendKeys('Ma'); - browser.sleep(1000); - - expect(getPageElts().searchResults.count()).toBe(4); - }); - - it(`continues search with 'g'`, async () => { - getPageElts().searchBox.sendKeys('g'); - browser.sleep(1000); - expect(getPageElts().searchResults.count()).toBe(2); - }); - - it(`continues search with 'e' and gets ${targetHero.name}`, async () => { - getPageElts().searchBox.sendKeys('n'); - browser.sleep(1000); - let page = getPageElts(); - expect(page.searchResults.count()).toBe(1); - let hero = page.searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); - }); - - it(`navigates to ${targetHero.name} details view`, async () => { - let hero = getPageElts().searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); - hero.click(); - - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); - let hero2 = await Hero.fromDetail(page.heroDetail); - expect(hero2.id).toEqual(targetHero.id); - expect(hero2.name).toEqual(targetHero.name.toUpperCase()); - }); - }); - - async function dashboardSelectTargetHero() { - let targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - targetHeroElt.click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 - - let page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(targetHero.name.toUpperCase()); - } - - async function updateHeroNameInDetailView() { - // Assumes that the current view is the hero details view. - addToHeroName(nameSuffix); - - let page = getPageElts(); - let hero = await Hero.fromDetail(page.heroDetail); - expect(hero.id).toEqual(targetHero.id); - expect(hero.name).toEqual(newHeroName.toUpperCase()); - } - -}); - -function addToHeroName(text: string): promise.Promise { - let input = element(by.css('input')); - return input.sendKeys(text); -} - -function expectHeading(hLevel: number, expectedText: string): void { - let hTag = `h${hLevel}`; - let hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); -}; - -function getHeroAEltById(id: number): ElementFinder { - let spanForId = element(by.cssContainingText('li span.badge', id.toString())); - return spanForId.element(by.xpath('..')); -} - -function getHeroLiEltById(id: number): ElementFinder { - let spanForId = element(by.cssContainingText('li span.badge', id.toString())); - return spanForId.element(by.xpath('../..')); -} - -async function toHeroArray(allHeroes: ElementArrayFinder): Promise { - let promisedHeroes = await allHeroes.map(Hero.fromLi); - // The cast is necessary to get around issuing with the signature of Promise.all() - return > Promise.all(promisedHeroes); -} diff --git a/docs_app/content/examples/toh-pt6/example-config.json b/docs_app/content/examples/toh-pt6/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/toh-pt6/src/app/app-routing.module.ts b/docs_app/content/examples/toh-pt6/src/app/app-routing.module.ts deleted file mode 100644 index 969e78b276..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/app-routing.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; - -const routes: Routes = [ - { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent }, - { path: 'detail/:id', component: HeroDetailComponent }, - { path: 'heroes', component: HeroesComponent } -]; - -@NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/toh-pt6/src/app/app.component.css b/docs_app/content/examples/toh-pt6/src/app/app.component.css deleted file mode 100644 index bf741e4575..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/app.component.css +++ /dev/null @@ -1,29 +0,0 @@ -/* AppComponent's private CSS styles */ -h1 { - font-size: 1.2em; - color: #999; - margin-bottom: 0; -} -h2 { - font-size: 2em; - margin-top: 0; - padding-top: 0; -} -nav a { - padding: 5px 10px; - text-decoration: none; - margin-top: 10px; - display: inline-block; - background-color: #eee; - border-radius: 4px; -} -nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; -} -nav a.active { - color: #039be5; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/app.component.html b/docs_app/content/examples/toh-pt6/src/app/app.component.html deleted file mode 100644 index 49c7d171b6..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ -

    {{title}}

    - - - diff --git a/docs_app/content/examples/toh-pt6/src/app/app.component.ts b/docs_app/content/examples/toh-pt6/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/app.module.ts b/docs_app/content/examples/toh-pt6/src/app/app.module.ts deleted file mode 100644 index a5734c5018..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/app.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -// #docplaster -// #docregion, v1 -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; - -// #docregion import-in-mem-stuff -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; -// #enddocregion import-in-mem-stuff - -import { AppRoutingModule } from './app-routing.module'; - -import { AppComponent } from './app.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -import { HeroesComponent } from './heroes/heroes.component'; -// #enddocregion v1 -import { HeroSearchComponent } from './hero-search/hero-search.component'; -// #docregion v1 -import { HeroService } from './hero.service'; -import { MessageService } from './message.service'; -import { MessagesComponent } from './messages/messages.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - AppRoutingModule, - // #docregion in-mem-web-api-imports - HttpClientModule, - - // The HttpClientInMemoryWebApiModule module intercepts HTTP requests - // and returns simulated server responses. - // Remove it when a real server is ready to receive requests. - HttpClientInMemoryWebApiModule.forRoot( - InMemoryDataService, { dataEncapsulation: false } - ) - // #enddocregion in-mem-web-api-imports - ], - declarations: [ - AppComponent, - DashboardComponent, - HeroesComponent, - HeroDetailComponent, - MessagesComponent, - // #enddocregion v1 - HeroSearchComponent - // #docregion v1 - ], - providers: [ HeroService, MessageService ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion , v1 diff --git a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css b/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css deleted file mode 100644 index 3822cc56bb..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.css +++ /dev/null @@ -1,62 +0,0 @@ -/* DashboardComponent's private CSS styles */ -[class*='col-'] { - float: left; - padding-right: 20px; - padding-bottom: 20px; -} -[class*='col-']:last-of-type { - padding-right: 0; -} -a { - text-decoration: none; -} -*, *:after, *:before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -h3 { - text-align: center; margin-bottom: 0; -} -h4 { - position: relative; -} -.grid { - margin: 0; -} -.col-1-4 { - width: 25%; -} -.module { - padding: 20px; - text-align: center; - color: #eee; - max-height: 120px; - min-width: 120px; - background-color: #607D8B; - border-radius: 2px; -} -.module:hover { - background-color: #EEE; - cursor: pointer; - color: #607d8b; -} -.grid-pad { - padding: 10px 0; -} -.grid-pad > [class*='col-']:last-of-type { - padding-right: 20px; -} -@media (max-width: 600px) { - .module { - font-size: 10px; - max-height: 75px; } -} -@media (max-width: 1024px) { - .grid { - margin: 0; - } - .module { - min-width: 60px; - } -} diff --git a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html b/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html deleted file mode 100644 index b70c0c7d6e..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1,11 +0,0 @@ -

    Top Heroes

    -
    - -
    -

    {{hero.name}}

    -
    -     -
    - - diff --git a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts deleted file mode 100644 index fea6bfb4db..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DashboardComponent } from './dashboard.component'; - -describe('DashboardComponent', () => { - let component: DashboardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts b/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index b2904a2c08..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: [ './dashboard.component.css' ] -}) -export class DashboardComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes.slice(1, 5)); - } -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index 062544af48..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css +++ /dev/null @@ -1,30 +0,0 @@ -/* HeroDetailComponent's private CSS styles */ -label { - display: inline-block; - width: 3em; - margin: .5em 0; - color: #607D8B; - font-weight: bold; -} -input { - height: 2em; - font-size: 1em; - padding-left: .4em; -} -button { - margin-top: 20px; - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #ccc; - cursor: auto; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index a57d510897..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
    -

    {{ hero.name | uppercase }} Details

    -
    id: {{hero.id}}
    -
    - -
    - - - - -
    diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index d1259eebf0..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Location } from '@angular/common'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: [ './hero-detail.component.css' ] -}) -export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; - - constructor( - private route: ActivatedRoute, - private heroService: HeroService, - private location: Location - ) {} - - ngOnInit(): void { - this.getHero(); - } - - getHero(): void { - const id = +this.route.snapshot.paramMap.get('id'); - this.heroService.getHero(id) - .subscribe(hero => this.hero = hero); - } - - goBack(): void { - this.location.back(); - } - - // #docregion save - save(): void { - this.heroService.updateHero(this.hero) - .subscribe(() => this.goBack()); - } -// #enddocregion save -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css b/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css deleted file mode 100644 index 0f2c8cdd10..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.css +++ /dev/null @@ -1,39 +0,0 @@ -/* HeroSearch private styles */ -.search-result li { - border-bottom: 1px solid gray; - border-left: 1px solid gray; - border-right: 1px solid gray; - width:195px; - height: 16px; - padding: 5px; - background-color: white; - cursor: pointer; - list-style-type: none; -} - -.search-result li:hover { - background-color: #607D8B; -} - -.search-result li a { - color: #888; - display: block; - text-decoration: none; -} - -.search-result li a:hover { - color: white; -} -.search-result li a:active { - color: white; -} -#search-box { - width: 200px; - height: 20px; -} - - -ul.search-result { - margin-top: 0; - padding-left: 0; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html b/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html deleted file mode 100644 index 102851a3bc..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.html +++ /dev/null @@ -1,17 +0,0 @@ -
    -

    Hero Search

    - - - - - - -
    diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts b/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts deleted file mode 100644 index 901bb7f2ab..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroSearchComponent } from './hero-search.component'; - -describe('HeroSearchComponent', () => { - let component: HeroSearchComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroSearchComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroSearchComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts b/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts deleted file mode 100644 index 5819e824ec..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; - -// #docregion rxjs-imports -import { Observable, Subject } from 'rxjs'; - -import { - debounceTime, distinctUntilChanged, switchMap - } from 'rxjs/operators'; -// #enddocregion rxjs-imports - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-hero-search', - templateUrl: './hero-search.component.html', - styleUrls: [ './hero-search.component.css' ] -}) -export class HeroSearchComponent implements OnInit { - // #docregion heroes-stream - heroes$: Observable; - // #enddocregion heroes-stream - // #docregion searchTerms - private searchTerms = new Subject(); - // #enddocregion searchTerms - - constructor(private heroService: HeroService) {} - // #docregion searchTerms - - // Push a search term into the observable stream. - search(term: string): void { - this.searchTerms.next(term); - } - // #enddocregion searchTerms - - ngOnInit(): void { - // #docregion search - this.heroes$ = this.searchTerms.pipe( - // wait 300ms after each keystroke before considering the term - debounceTime(300), - - // ignore new term if same as previous term - distinctUntilChanged(), - - // switch to new search observable each time the term changes - switchMap((term: string) => this.heroService.searchHeroes(term)), - ); - // #enddocregion search - } -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero.service.ts b/docs_app/content/examples/toh-pt6/src/app/hero.service.ts deleted file mode 100644 index b569c7052d..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero.service.ts +++ /dev/null @@ -1,157 +0,0 @@ -// #docplaster -// #docregion -import { Injectable } from '@angular/core'; -// #docregion import-httpclient -import { HttpClient, HttpHeaders } from '@angular/common/http'; -// #enddocregion import-httpclient - -import { Observable, of } from 'rxjs'; -// #docregion import-rxjs-operators -import { catchError, map, tap } from 'rxjs/operators'; -// #enddocregion import-rxjs-operators - -import { Hero } from './hero'; -import { MessageService } from './message.service'; - -// #docregion http-options -const httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'application/json' }) -}; -// #enddocregion http-options - -@Injectable() -export class HeroService { - - // #docregion heroesUrl - private heroesUrl = 'api/heroes'; // URL to web api - // #enddocregion heroesUrl - - // #docregion ctor - constructor( - private http: HttpClient, - private messageService: MessageService) { } - // #enddocregion ctor - - // #docregion getHeroes, getHeroes-1 - /** GET heroes from the server */ - // #docregion getHeroes-2 - getHeroes (): Observable { - return this.http.get(this.heroesUrl) - // #enddocregion getHeroes-1 - .pipe( - // #enddocregion getHeroes-2 - tap(heroes => this.log(`fetched heroes`)), - // #docregion getHeroes-2 - catchError(this.handleError('getHeroes', [])) - ); - // #docregion getHeroes-1 - } - // #enddocregion getHeroes, getHeroes-1, getHeroes-2 - - // #docregion getHeroNo404 - /** GET hero by id. Return `undefined` when id not found */ - getHeroNo404(id: number): Observable { - const url = `${this.heroesUrl}/?id=${id}`; - return this.http.get(url) - .pipe( - map(heroes => heroes[0]), // returns a {0|1} element array - // #enddocregion getHeroNo404 - tap(h => { - const outcome = h ? `fetched` : `did not find`; - this.log(`${outcome} hero id=${id}`); - }), - catchError(this.handleError(`getHero id=${id}`)) - // #docregion getHeroNo404 - ); - } - // #enddocregion getHeroNo404 - - // #docregion getHero - /** GET hero by id. Will 404 if id not found */ - getHero(id: number): Observable { - const url = `${this.heroesUrl}/${id}`; - return this.http.get(url).pipe( - tap(_ => this.log(`fetched hero id=${id}`)), - catchError(this.handleError(`getHero id=${id}`)) - ); - } - // #enddocregion getHero - - // #docregion searchHeroes - /* GET heroes whose name contains search term */ - searchHeroes(term: string): Observable { - if (!term.trim()) { - // if not search term, return empty hero array. - return of([]); - } - return this.http.get(`api/heroes/?name=${term}`).pipe( - tap(_ => this.log(`found heroes matching "${term}"`)), - catchError(this.handleError('searchHeroes', [])) - ); - } - // #enddocregion searchHeroes - - //////// Save methods ////////// - - // #docregion addHero - /** POST: add a new hero to the server */ - addHero (hero: Hero): Observable { - return this.http.post(this.heroesUrl, hero, httpOptions).pipe( - tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)), - catchError(this.handleError('addHero')) - ); - } - // #enddocregion addHero - - // #docregion deleteHero - /** DELETE: delete the hero from the server */ - deleteHero (hero: Hero | number): Observable { - const id = typeof hero === 'number' ? hero : hero.id; - const url = `${this.heroesUrl}/${id}`; - - return this.http.delete(url, httpOptions).pipe( - tap(_ => this.log(`deleted hero id=${id}`)), - catchError(this.handleError('deleteHero')) - ); - } - // #enddocregion deleteHero - - // #docregion updateHero - /** PUT: update the hero on the server */ - updateHero (hero: Hero): Observable { - return this.http.put(this.heroesUrl, hero, httpOptions).pipe( - tap(_ => this.log(`updated hero id=${hero.id}`)), - catchError(this.handleError('updateHero')) - ); - } - // #enddocregion updateHero - - // #docregion handleError - /** - * Handle Http operation that failed. - * Let the app continue. - * @param operation - name of the operation that failed - * @param result - optional value to return as the observable result - */ - private handleError (operation = 'operation', result?: T) { - return (error: any): Observable => { - - // TODO: send the error to remote logging infrastructure - console.error(error); // log to console instead - - // TODO: better job of transforming error for user consumption - this.log(`${operation} failed: ${error.message}`); - - // Let the app keep running by returning an empty result. - return of(result as T); - }; - } - // #enddocregion handleError - - // #docregion log - /** Log a HeroService message with the MessageService */ - private log(message: string) { - this.messageService.add('HeroService: ' + message); - } - // #enddocregion log -} diff --git a/docs_app/content/examples/toh-pt6/src/app/hero.ts b/docs_app/content/examples/toh-pt6/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.css deleted file mode 100644 index c345d1d970..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,76 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - position: relative; - cursor: pointer; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} - -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} - -.heroes a { - color: #888; - text-decoration: none; - position: relative; - display: block; - width: 250px; -} - -.heroes a:hover { - color:#607D8B; -} - -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - min-width: 16px; - text-align: right; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} - -/* #docregion additions */ -button { - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; - font-family: Arial; -} - -button:hover { - background-color: #cfd8dc; -} - -button.delete { - position: relative; - left: 194px; - top: -32px; - background-color: gray !important; - color: white; -} -/* #enddocregion additions */ - diff --git a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.html b/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.html deleted file mode 100644 index e674889f6d..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,27 +0,0 @@ -

    My Heroes

    - - -
    - - - -
    - - - - - diff --git a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.ts b/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.ts deleted file mode 100644 index 7cdeca088a..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } - - // #docregion add - add(name: string): void { - name = name.trim(); - if (!name) { return; } - this.heroService.addHero({ name } as Hero) - .subscribe(hero => { - this.heroes.push(hero); - }); - } - // #enddocregion add - - // #docregion delete - delete(hero: Hero): void { - this.heroes = this.heroes.filter(h => h !== hero); - this.heroService.deleteHero(hero).subscribe(); - } - // #enddocregion delete - -} diff --git a/docs_app/content/examples/toh-pt6/src/app/in-memory-data.service.ts b/docs_app/content/examples/toh-pt6/src/app/in-memory-data.service.ts deleted file mode 100644 index 005545c19a..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/in-memory-data.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion , init -import { InMemoryDbService } from 'angular-in-memory-web-api'; - -export class InMemoryDataService implements InMemoryDbService { - createDb() { - const heroes = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } - ]; - return {heroes}; - } -} diff --git a/docs_app/content/examples/toh-pt6/src/app/message.service.spec.ts b/docs_app/content/examples/toh-pt6/src/app/message.service.spec.ts deleted file mode 100644 index 63ecfd8ff6..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/message.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { MessageService } from './message.service'; - -describe('MessageService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [MessageService] - }); - }); - - it('should be created', inject([MessageService], (service: MessageService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/docs_app/content/examples/toh-pt6/src/app/message.service.ts b/docs_app/content/examples/toh-pt6/src/app/message.service.ts deleted file mode 100644 index 1c56a49e70..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/message.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class MessageService { - messages: string[] = []; - - add(message: string) { - this.messages.push(message); - } - - clear() { - this.messages = []; - } -} diff --git a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.css b/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.css deleted file mode 100644 index d08d9be581..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.css +++ /dev/null @@ -1,35 +0,0 @@ -/* MessagesComponent's private CSS styles */ -h2 { - color: red; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: crimson; - font-family: Cambria, Georgia; -} - -button.clear { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} -button.clear { - color: #888; - margin-bottom: 12px; -} diff --git a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.html b/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.html deleted file mode 100644 index 1df7dfd989..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
    - -

    Messages

    - -
    {{message}}
    - -
    diff --git a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts b/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts deleted file mode 100644 index 3c2b2b1537..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MessagesComponent } from './messages.component'; - -describe('MessagesComponent', () => { - let component: MessagesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MessagesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(MessagesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.ts b/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.ts deleted file mode 100644 index 17c8b2701f..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/messages/messages.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-messages', - templateUrl: './messages.component.html', - styleUrls: ['./messages.component.css'] -}) -export class MessagesComponent implements OnInit { - - constructor(public messageService: MessageService) {} - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/toh-pt6/src/app/mock-heroes.ts b/docs_app/content/examples/toh-pt6/src/app/mock-heroes.ts deleted file mode 100644 index 1771a7103b..0000000000 --- a/docs_app/content/examples/toh-pt6/src/app/mock-heroes.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/toh-pt6/src/index.html b/docs_app/content/examples/toh-pt6/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/toh-pt6/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/toh-pt6/src/main.ts b/docs_app/content/examples/toh-pt6/src/main.ts deleted file mode 100644 index 0740658908..0000000000 --- a/docs_app/content/examples/toh-pt6/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/toh-pt6/stackblitz.json b/docs_app/content/examples/toh-pt6/stackblitz.json deleted file mode 100644 index 777d9ad1f1..0000000000 --- a/docs_app/content/examples/toh-pt6/stackblitz.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 6", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1,2].*" - ], - "tags": ["tutorial", "tour", "heroes", "http"] -} diff --git a/docs_app/content/examples/tsconfig.json b/docs_app/content/examples/tsconfig.json deleted file mode 100644 index 5ad933f26e..0000000000 --- a/docs_app/content/examples/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -// this tsconfig is used to give intellisense to -// all the examples in this folder -{ - "compilerOptions": { - "target": "es6", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "../../tools/examples/shared/node_modules/@types" - ] - }, - "include": [ - "*/e2e-spec.ts" - ] -} diff --git a/docs_app/content/examples/tslint.json b/docs_app/content/examples/tslint.json deleted file mode 100644 index 2e81c99035..0000000000 --- a/docs_app/content/examples/tslint.json +++ /dev/null @@ -1,94 +0,0 @@ -{ - "rulesDirectory": [ - "../../node_modules/codelyzer" - ], - "rules": { - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": true, - "forin": true, - "indent": [ - true, - "spaces" - ], - "label-position": true, - "max-line-length": [ - true, - 140 - ], - "member-access": false, - "no-arg": true, - "no-bitwise": true, - "no-console": [ - true, - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-variable": true, - "no-empty": false, - "no-eval": true, - "no-inferrable-types": true, - "no-string-literal": false, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unused-expression": true, - "no-use-before-declare": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ - true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" - ], - "quotemark": [ - true, - "single" - ], - "radix": true, - "semicolon": [ - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], - - "use-input-property-decorator": true, - "use-output-property-decorator": true, - "use-life-cycle-interface": true, - "use-pipe-transform-interface": true, - "component-class-suffix": true, - "directive-class-suffix": true, - "import-destructuring-spacing": true - } -} diff --git a/docs_app/content/examples/universal/example-config.json b/docs_app/content/examples/universal/example-config.json deleted file mode 100644 index 2c13a4178b..0000000000 --- a/docs_app/content/examples/universal/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "projectType": "universal" -} diff --git a/docs_app/content/examples/universal/server.ts b/docs_app/content/examples/universal/server.ts deleted file mode 100644 index fd5f3e1259..0000000000 --- a/docs_app/content/examples/universal/server.ts +++ /dev/null @@ -1,61 +0,0 @@ -// These are important and needed before anything else -import 'zone.js/dist/zone-node'; -import 'reflect-metadata'; - -import { enableProdMode } from '@angular/core'; - -import * as express from 'express'; -import { join } from 'path'; - -// Faster server renders w/ Prod mode (dev mode never needed) -enableProdMode(); - -// Express server -const app = express(); - -const PORT = process.env.PORT || 4000; -const DIST_FOLDER = join(process.cwd(), 'dist'); - -// * NOTE :: leave this as require() since this file is built Dynamically from webpack -const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle'); - -// Express Engine -import { ngExpressEngine } from '@nguniversal/express-engine'; -// Import module map for lazy loading -import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'; - -// #docregion ngExpressEngine -app.engine('html', ngExpressEngine({ - bootstrap: AppServerModuleNgFactory, - providers: [ - provideModuleMap(LAZY_MODULE_MAP) - ] -})); -// #enddocregion ngExpressEngine - -app.set('view engine', 'html'); -app.set('views', join(DIST_FOLDER, 'browser')); - -// #docregion data-request -// TODO: implement data requests securely -app.get('/api/*', (req, res) => { - res.status(404).send('data requests are not supported'); -}); -// #enddocregion data-request - -// #docregion static -// Server static files from /browser -app.get('*.*', express.static(join(DIST_FOLDER, 'browser'))); -// #enddocregion static - -// #docregion navigation-request -// All regular routes use the Universal engine -app.get('*', (req, res) => { - res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req }); -}); -// #enddocregion navigation-request - -// Start up the Node server -app.listen(PORT, () => { - console.log(`Node server listening on http://localhost:${PORT}`); -}); diff --git a/docs_app/content/examples/universal/src/app/app-routing.module.ts b/docs_app/content/examples/universal/src/app/app-routing.module.ts deleted file mode 100644 index 969e78b276..0000000000 --- a/docs_app/content/examples/universal/src/app/app-routing.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; - -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; - -const routes: Routes = [ - { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent }, - { path: 'detail/:id', component: HeroDetailComponent }, - { path: 'heroes', component: HeroesComponent } -]; - -@NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ] -}) -export class AppRoutingModule {} diff --git a/docs_app/content/examples/universal/src/app/app.component.css b/docs_app/content/examples/universal/src/app/app.component.css deleted file mode 100644 index bf741e4575..0000000000 --- a/docs_app/content/examples/universal/src/app/app.component.css +++ /dev/null @@ -1,29 +0,0 @@ -/* AppComponent's private CSS styles */ -h1 { - font-size: 1.2em; - color: #999; - margin-bottom: 0; -} -h2 { - font-size: 2em; - margin-top: 0; - padding-top: 0; -} -nav a { - padding: 5px 10px; - text-decoration: none; - margin-top: 10px; - display: inline-block; - background-color: #eee; - border-radius: 4px; -} -nav a:visited, a:link { - color: #607D8B; -} -nav a:hover { - color: #039be5; - background-color: #CFD8DC; -} -nav a.active { - color: #039be5; -} diff --git a/docs_app/content/examples/universal/src/app/app.component.html b/docs_app/content/examples/universal/src/app/app.component.html deleted file mode 100644 index 49c7d171b6..0000000000 --- a/docs_app/content/examples/universal/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ -

    {{title}}

    - - - diff --git a/docs_app/content/examples/universal/src/app/app.component.ts b/docs_app/content/examples/universal/src/app/app.component.ts deleted file mode 100644 index c41599e92a..0000000000 --- a/docs_app/content/examples/universal/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/docs_app/content/examples/universal/src/app/app.module.ts b/docs_app/content/examples/universal/src/app/app.module.ts deleted file mode 100644 index 1dab81e17b..0000000000 --- a/docs_app/content/examples/universal/src/app/app.module.ts +++ /dev/null @@ -1,60 +0,0 @@ -// #docplaster -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpClientModule } from '@angular/common/http'; - -import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; -import { InMemoryDataService } from './in-memory-data.service'; - -import { AppRoutingModule } from './app-routing.module'; - -import { AppComponent } from './app.component'; -import { DashboardComponent } from './dashboard/dashboard.component'; -import { HeroDetailComponent } from './hero-detail/hero-detail.component'; -import { HeroesComponent } from './heroes/heroes.component'; -import { HeroSearchComponent } from './hero-search/hero-search.component'; -import { HeroService } from './hero.service'; -import { MessageService } from './message.service'; -import { MessagesComponent } from './messages/messages.component'; - -// #docregion platform-detection -import { PLATFORM_ID, APP_ID, Inject } from '@angular/core'; -import { isPlatformBrowser } from '@angular/common'; - -// #enddocregion platform-detection - -@NgModule({ - imports: [ - // #docregion browsermodule - BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }), - // #enddocregion browsermodule - FormsModule, - AppRoutingModule, - HttpClientModule, - HttpClientInMemoryWebApiModule.forRoot( - InMemoryDataService, { dataEncapsulation: false } - ) - ], - declarations: [ - AppComponent, - DashboardComponent, - HeroesComponent, - HeroDetailComponent, - MessagesComponent, - HeroSearchComponent - ], - providers: [ HeroService, MessageService ], - bootstrap: [ AppComponent ] -}) -export class AppModule { - // #docregion platform-detection - constructor( - @Inject(PLATFORM_ID) private platformId: Object, - @Inject(APP_ID) private appId: string) { - const platform = isPlatformBrowser(platformId) ? - 'in the browser' : 'on the server'; - console.log(`Running ${platform} with appId=${appId}`); - } - // #enddocregion platform-detection -} diff --git a/docs_app/content/examples/universal/src/app/app.server.module.ts b/docs_app/content/examples/universal/src/app/app.server.module.ts deleted file mode 100644 index b32046a592..0000000000 --- a/docs_app/content/examples/universal/src/app/app.server.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { NgModule } from '@angular/core'; -import { ServerModule } from '@angular/platform-server'; -import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'; - -import { AppModule } from './app.module'; -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - AppModule, - ServerModule, - ModuleMapLoaderModule - ], - providers: [ - // Add universal-only providers here - ], - bootstrap: [ AppComponent ], -}) -export class AppServerModule {} diff --git a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.css b/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.css deleted file mode 100644 index 3822cc56bb..0000000000 --- a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.css +++ /dev/null @@ -1,62 +0,0 @@ -/* DashboardComponent's private CSS styles */ -[class*='col-'] { - float: left; - padding-right: 20px; - padding-bottom: 20px; -} -[class*='col-']:last-of-type { - padding-right: 0; -} -a { - text-decoration: none; -} -*, *:after, *:before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -h3 { - text-align: center; margin-bottom: 0; -} -h4 { - position: relative; -} -.grid { - margin: 0; -} -.col-1-4 { - width: 25%; -} -.module { - padding: 20px; - text-align: center; - color: #eee; - max-height: 120px; - min-width: 120px; - background-color: #607D8B; - border-radius: 2px; -} -.module:hover { - background-color: #EEE; - cursor: pointer; - color: #607d8b; -} -.grid-pad { - padding: 10px 0; -} -.grid-pad > [class*='col-']:last-of-type { - padding-right: 20px; -} -@media (max-width: 600px) { - .module { - font-size: 10px; - max-height: 75px; } -} -@media (max-width: 1024px) { - .grid { - margin: 0; - } - .module { - min-width: 60px; - } -} diff --git a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.html b/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.html deleted file mode 100644 index 36e86053a6..0000000000 --- a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.html +++ /dev/null @@ -1,11 +0,0 @@ -

    Top Heroes

    -
    - -
    -

    {{hero.name}}

    -
    -     -
    - - diff --git a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts b/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts deleted file mode 100644 index fea6bfb4db..0000000000 --- a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DashboardComponent } from './dashboard.component'; - -describe('DashboardComponent', () => { - let component: DashboardComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DashboardComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.ts b/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index f152c10c7e..0000000000 --- a/docs_app/content/examples/universal/src/app/dashboard/dashboard.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: [ './dashboard.component.css' ] -}) -export class DashboardComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes.slice(1, 5)); - } -} diff --git a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.css deleted file mode 100644 index 062544af48..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.css +++ /dev/null @@ -1,30 +0,0 @@ -/* HeroDetailComponent's private CSS styles */ -label { - display: inline-block; - width: 3em; - margin: .5em 0; - color: #607D8B; - font-weight: bold; -} -input { - height: 2em; - font-size: 1em; - padding-left: .4em; -} -button { - margin-top: 20px; - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #ccc; - cursor: auto; -} diff --git a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.html deleted file mode 100644 index 6fa498ee4f..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.html +++ /dev/null @@ -1,11 +0,0 @@ -
    -

    {{ hero.name | uppercase }} Details

    -
    id: {{hero.id}}
    -
    - -
    - - -
    diff --git a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.ts deleted file mode 100644 index 5745fb8677..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-detail/hero-detail.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Location } from '@angular/common'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: [ './hero-detail.component.css' ] -}) -export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; - - constructor( - private route: ActivatedRoute, - private heroService: HeroService, - private location: Location - ) {} - - ngOnInit(): void { - this.getHero(); - } - - getHero(): void { - const id = +this.route.snapshot.paramMap.get('id'); - this.heroService.getHero(id) - .subscribe(hero => this.hero = hero); - } - - goBack(): void { - this.location.back(); - } - - save(): void { - this.heroService.updateHero(this.hero) - .subscribe(() => this.goBack()); - } -} diff --git a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.css b/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.css deleted file mode 100644 index 0f2c8cdd10..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.css +++ /dev/null @@ -1,39 +0,0 @@ -/* HeroSearch private styles */ -.search-result li { - border-bottom: 1px solid gray; - border-left: 1px solid gray; - border-right: 1px solid gray; - width:195px; - height: 16px; - padding: 5px; - background-color: white; - cursor: pointer; - list-style-type: none; -} - -.search-result li:hover { - background-color: #607D8B; -} - -.search-result li a { - color: #888; - display: block; - text-decoration: none; -} - -.search-result li a:hover { - color: white; -} -.search-result li a:active { - color: white; -} -#search-box { - width: 200px; - height: 20px; -} - - -ul.search-result { - margin-top: 0; - padding-left: 0; -} diff --git a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.html b/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.html deleted file mode 100644 index cd0c3ffb9b..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
    -

    Hero Search

    - - - - -
    diff --git a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts b/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts deleted file mode 100644 index 901bb7f2ab..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroSearchComponent } from './hero-search.component'; - -describe('HeroSearchComponent', () => { - let component: HeroSearchComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroSearchComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroSearchComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.ts b/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.ts deleted file mode 100644 index 75d0907cf5..0000000000 --- a/docs_app/content/examples/universal/src/app/hero-search/hero-search.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Observable, Subject } from 'rxjs'; - -import { - debounceTime, distinctUntilChanged, switchMap - } from 'rxjs/operators'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'hero-search', - templateUrl: './hero-search.component.html', - styleUrls: [ './hero-search.component.css' ] -}) -export class HeroSearchComponent implements OnInit { - heroes: Observable; - private searchTerms = new Subject(); - - constructor(private heroService: HeroService) {} - - // Push a search term into the observable stream. - search(term: string): void { - this.searchTerms.next(term); - } - - ngOnInit(): void { - this.heroes = this.searchTerms.pipe( - // wait 300ms after each keystroke before considering the term - debounceTime(300), - - // ignore new term if same as previous term - distinctUntilChanged(), - - // switch to new search observable each time the term changes - switchMap((term: string) => this.heroService.searchHeroes(term)), - ); - } -} diff --git a/docs_app/content/examples/universal/src/app/hero.service.ts b/docs_app/content/examples/universal/src/app/hero.service.ts deleted file mode 100644 index ef490ecff6..0000000000 --- a/docs_app/content/examples/universal/src/app/hero.service.ts +++ /dev/null @@ -1,128 +0,0 @@ -import { Injectable, Inject, Optional } from '@angular/core'; -import { APP_BASE_HREF } from '@angular/common'; -import { HttpClient, HttpHeaders }from '@angular/common/http'; - -import { Observable, of } from 'rxjs'; -import { catchError, map, tap } from 'rxjs/operators'; - -import { Hero } from './hero'; -import { MessageService } from './message.service'; - -const httpOptions = { - headers: new HttpHeaders({ 'Content-Type': 'application/json' }) -}; - -@Injectable() -export class HeroService { - - private heroesUrl = 'api/heroes'; // URL to web api - - // #docregion ctor - constructor( - private http: HttpClient, - private messageService: MessageService, - @Optional() @Inject(APP_BASE_HREF) origin: string) { - this.heroesUrl = `${origin}${this.heroesUrl}`; - } - // #enddocregion ctor - - /** GET heroes from the server */ - getHeroes (): Observable { - return this.http.get(this.heroesUrl) - .pipe( - tap(heroes => this.log(`fetched heroes`)), - catchError(this.handleError('getHeroes', [])) - ); - } - - /** GET hero by id. Return `undefined` when id not found */ - getHeroNo404(id: number): Observable { - const url = `${this.heroesUrl}/?id=${id}`; - return this.http.get(url) - .pipe( - map(heroes => heroes[0]), // returns a {0|1} element array - tap(h => { - const outcome = h ? `fetched` : `did not find`; - this.log(`${outcome} hero id=${id}`); - }), - catchError(this.handleError(`getHero id=${id}`)) - ); - } - - /** GET hero by id. Will 404 if id not found */ - getHero(id: number): Observable { - const url = `${this.heroesUrl}/${id}`; - return this.http.get(url).pipe( - tap(_ => this.log(`fetched hero id=${id}`)), - catchError(this.handleError(`getHero id=${id}`)) - ); - } - - /* GET heroes whose name contains search term */ - searchHeroes(term: string): Observable { - if (!term.trim()) { - // if not search term, return empty hero array. - return of([]); - } - return this.http.get(`api/heroes/?name=${term}`).pipe( - tap(_ => this.log(`found heroes matching "${term}"`)), - catchError(this.handleError('searchHeroes', [])) - ); - } - - //////// Save methods ////////// - - /** POST: add a new hero to the server */ - addHero (name: string): Observable { - const hero = { name }; - - return this.http.post(this.heroesUrl, hero, httpOptions).pipe( - tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)), - catchError(this.handleError('addHero')) - ); - } - - /** DELETE: delete the hero from the server */ - deleteHero (hero: Hero | number): Observable { - const id = typeof hero === 'number' ? hero : hero.id; - const url = `${this.heroesUrl}/${id}`; - - return this.http.delete(url, httpOptions).pipe( - tap(_ => this.log(`deleted hero id=${id}`)), - catchError(this.handleError('deleteHero')) - ); - } - - /** PUT: update the hero on the server */ - updateHero (hero: Hero): Observable { - return this.http.put(this.heroesUrl, hero, httpOptions).pipe( - tap(_ => this.log(`updated hero id=${hero.id}`)), - catchError(this.handleError('updateHero')) - ); - } - - /** - * Handle Http operation that failed. - * Let the app continue. - * @param operation - name of the operation that failed - * @param result - optional value to return as the observable result - */ - private handleError (operation = 'operation', result?: T) { - return (error: any): Observable => { - - // TODO: send the error to remote logging infrastructure - console.error(error); // log to console instead - - // TODO: better job of transforming error for user consumption - this.log(`${operation} failed: ${error.message}`); - - // Let the app keep running by returning an empty result. - return of(result as T); - }; - } - - /** Log a HeroService message with the MessageService */ - private log(message: string) { - this.messageService.add('HeroService: ' + message); - } -} diff --git a/docs_app/content/examples/universal/src/app/hero.ts b/docs_app/content/examples/universal/src/app/hero.ts deleted file mode 100644 index e3eac516da..0000000000 --- a/docs_app/content/examples/universal/src/app/hero.ts +++ /dev/null @@ -1,4 +0,0 @@ -export class Hero { - id: number; - name: string; -} diff --git a/docs_app/content/examples/universal/src/app/heroes/heroes.component.css b/docs_app/content/examples/universal/src/app/heroes/heroes.component.css deleted file mode 100644 index b51469d1b6..0000000000 --- a/docs_app/content/examples/universal/src/app/heroes/heroes.component.css +++ /dev/null @@ -1,74 +0,0 @@ -/* HeroesComponent's private CSS styles */ -.heroes { - margin: 0 0 2em 0; - list-style-type: none; - padding: 0; - width: 15em; -} -.heroes li { - position: relative; - cursor: pointer; - background-color: #EEE; - margin: .5em; - padding: .3em 0; - height: 1.6em; - border-radius: 4px; -} - -.heroes li:hover { - color: #607D8B; - background-color: #DDD; - left: .1em; -} - -.heroes a { - color: #888; - text-decoration: none; - position: relative; - display: block; - width: 250px; -} - -.heroes a:hover { - color:#607D8B; -} - -.heroes .badge { - display: inline-block; - font-size: small; - color: white; - padding: 0.8em 0.7em 0 0.7em; - background-color: #607D8B; - line-height: 1em; - position: relative; - left: -1px; - top: -4px; - height: 1.8em; - min-width: 16px; - text-align: right; - margin-right: .8em; - border-radius: 4px 0 0 4px; -} - -.button { - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; - font-family: Arial; -} - -button:hover { - background-color: #cfd8dc; -} - -button.delete { - position: relative; - left: 194px; - top: -32px; - background-color: gray !important; - color: white; -} - diff --git a/docs_app/content/examples/universal/src/app/heroes/heroes.component.html b/docs_app/content/examples/universal/src/app/heroes/heroes.component.html deleted file mode 100644 index 8ab944cba0..0000000000 --- a/docs_app/content/examples/universal/src/app/heroes/heroes.component.html +++ /dev/null @@ -1,21 +0,0 @@ -

    My Heroes

    - -
    - - - -
    - - diff --git a/docs_app/content/examples/universal/src/app/heroes/heroes.component.spec.ts b/docs_app/content/examples/universal/src/app/heroes/heroes.component.spec.ts deleted file mode 100644 index 9c3b1c4d9f..0000000000 --- a/docs_app/content/examples/universal/src/app/heroes/heroes.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeroesComponent } from './heroes.component'; - -describe('HeroesComponent', () => { - let component: HeroesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HeroesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HeroesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/universal/src/app/heroes/heroes.component.ts b/docs_app/content/examples/universal/src/app/heroes/heroes.component.ts deleted file mode 100644 index 0c99c98e4e..0000000000 --- a/docs_app/content/examples/universal/src/app/heroes/heroes.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from '../hero'; -import { HeroService } from '../hero.service'; - -@Component({ - selector: 'app-heroes', - templateUrl: './heroes.component.html', - styleUrls: ['./heroes.component.css'] -}) -export class HeroesComponent implements OnInit { - heroes: Hero[]; - - constructor(private heroService: HeroService) { } - - ngOnInit() { - this.getHeroes(); - } - - getHeroes(): void { - this.heroService.getHeroes() - .subscribe(heroes => this.heroes = heroes); - } - - add(name: string): void { - name = name.trim(); - if (!name) { return; } - this.heroService.addHero(name) - .subscribe(hero => { - this.heroes.push(hero); - }); - } - - delete(hero: Hero): void { - this.heroService.deleteHero(hero) - .subscribe(() => { - this.heroes = this.heroes.filter(h => h !== hero); - }); - } - -} diff --git a/docs_app/content/examples/universal/src/app/in-memory-data.service.ts b/docs_app/content/examples/universal/src/app/in-memory-data.service.ts deleted file mode 100644 index ff1f190f83..0000000000 --- a/docs_app/content/examples/universal/src/app/in-memory-data.service.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { InMemoryDbService } from 'angular-in-memory-web-api'; - -export class InMemoryDataService implements InMemoryDbService { - createDb() { - const heroes = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } - ]; - return {heroes}; - } -} diff --git a/docs_app/content/examples/universal/src/app/message.service.spec.ts b/docs_app/content/examples/universal/src/app/message.service.spec.ts deleted file mode 100644 index 63ecfd8ff6..0000000000 --- a/docs_app/content/examples/universal/src/app/message.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { MessageService } from './message.service'; - -describe('MessageService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [MessageService] - }); - }); - - it('should be created', inject([MessageService], (service: MessageService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/docs_app/content/examples/universal/src/app/message.service.ts b/docs_app/content/examples/universal/src/app/message.service.ts deleted file mode 100644 index 1c56a49e70..0000000000 --- a/docs_app/content/examples/universal/src/app/message.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Injectable } from '@angular/core'; - -@Injectable() -export class MessageService { - messages: string[] = []; - - add(message: string) { - this.messages.push(message); - } - - clear() { - this.messages = []; - } -} diff --git a/docs_app/content/examples/universal/src/app/messages/messages.component.css b/docs_app/content/examples/universal/src/app/messages/messages.component.css deleted file mode 100644 index d08d9be581..0000000000 --- a/docs_app/content/examples/universal/src/app/messages/messages.component.css +++ /dev/null @@ -1,35 +0,0 @@ -/* MessagesComponent's private CSS styles */ -h2 { - color: red; - font-family: Arial, Helvetica, sans-serif; - font-weight: lighter; -} -body { - margin: 2em; -} -body, input[text], button { - color: crimson; - font-family: Cambria, Georgia; -} - -button.clear { - font-family: Arial; - background-color: #eee; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; - cursor: hand; -} -button:hover { - background-color: #cfd8dc; -} -button:disabled { - background-color: #eee; - color: #aaa; - cursor: auto; -} -button.clear { - color: #888; - margin-bottom: 12px; -} diff --git a/docs_app/content/examples/universal/src/app/messages/messages.component.html b/docs_app/content/examples/universal/src/app/messages/messages.component.html deleted file mode 100644 index 1df7dfd989..0000000000 --- a/docs_app/content/examples/universal/src/app/messages/messages.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
    - -

    Messages

    - -
    {{message}}
    - -
    diff --git a/docs_app/content/examples/universal/src/app/messages/messages.component.spec.ts b/docs_app/content/examples/universal/src/app/messages/messages.component.spec.ts deleted file mode 100644 index 3c2b2b1537..0000000000 --- a/docs_app/content/examples/universal/src/app/messages/messages.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MessagesComponent } from './messages.component'; - -describe('MessagesComponent', () => { - let component: MessagesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ MessagesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(MessagesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/docs_app/content/examples/universal/src/app/messages/messages.component.ts b/docs_app/content/examples/universal/src/app/messages/messages.component.ts deleted file mode 100644 index 17c8b2701f..0000000000 --- a/docs_app/content/examples/universal/src/app/messages/messages.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { MessageService } from '../message.service'; - -@Component({ - selector: 'app-messages', - templateUrl: './messages.component.html', - styleUrls: ['./messages.component.css'] -}) -export class MessagesComponent implements OnInit { - - constructor(public messageService: MessageService) {} - - ngOnInit() { - } - -} diff --git a/docs_app/content/examples/universal/src/app/mock-heroes.ts b/docs_app/content/examples/universal/src/app/mock-heroes.ts deleted file mode 100644 index e84c2fd2b0..0000000000 --- a/docs_app/content/examples/universal/src/app/mock-heroes.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { Hero } from './hero'; - -export const HEROES: Hero[] = [ - { id: 11, name: 'Mr. Nice' }, - { id: 12, name: 'Narco' }, - { id: 13, name: 'Bombasto' }, - { id: 14, name: 'Celeritas' }, - { id: 15, name: 'Magneta' }, - { id: 16, name: 'RubberMan' }, - { id: 17, name: 'Dynama' }, - { id: 18, name: 'Dr IQ' }, - { id: 19, name: 'Magma' }, - { id: 20, name: 'Tornado' } -]; diff --git a/docs_app/content/examples/universal/src/index.html b/docs_app/content/examples/universal/src/index.html deleted file mode 100644 index 1c4106381f..0000000000 --- a/docs_app/content/examples/universal/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - Tour of Heroes - - - - - - - - - diff --git a/docs_app/content/examples/universal/src/main.server.ts b/docs_app/content/examples/universal/src/main.server.ts deleted file mode 100644 index d7c01cde7b..0000000000 --- a/docs_app/content/examples/universal/src/main.server.ts +++ /dev/null @@ -1 +0,0 @@ -export { AppServerModule } from './app/app.server.module'; diff --git a/docs_app/content/examples/universal/src/main.ts b/docs_app/content/examples/universal/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/universal/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/universal/src/tsconfig.server.json b/docs_app/content/examples/universal/src/tsconfig.server.json deleted file mode 100644 index 4401f4ca65..0000000000 --- a/docs_app/content/examples/universal/src/tsconfig.server.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/app", - "baseUrl": "./", - "module": "commonjs", - "types": [] - }, - "exclude": [ - "test.ts", - "**/*.spec.ts" - ], - "angularCompilerOptions": { - "entryModule": "app/app.server.module#AppServerModule" - } -} diff --git a/docs_app/content/examples/universal/webpack.server.config.js b/docs_app/content/examples/universal/webpack.server.config.js deleted file mode 100644 index ac9e51225b..0000000000 --- a/docs_app/content/examples/universal/webpack.server.config.js +++ /dev/null @@ -1,31 +0,0 @@ -const path = require('path'); -const webpack = require('webpack'); - -module.exports = { - entry: { server: './server.ts' }, - resolve: { extensions: ['.js', '.ts'] }, - target: 'node', - // this makes sure we include node_modules and other 3rd party libraries - externals: [/(node_modules|main\..*\.js)/], - output: { - path: path.join(__dirname, 'dist'), - filename: '[name].js' - }, - module: { - rules: [{ test: /\.ts$/, loader: 'ts-loader' }] - }, - plugins: [ - // Temporary Fix for issue: https://github.com/angular/angular/issues/11580 - // for 'WARNING Critical dependency: the request of a dependency is an expression' - new webpack.ContextReplacementPlugin( - /(.+)?angular(\\|\/)core(.+)?/, - path.join(__dirname, 'src'), // location of your src - {} // a map of your routes - ), - new webpack.ContextReplacementPlugin( - /(.+)?express(\\|\/)(.+)?/, - path.join(__dirname, 'src'), - {} - ) - ] -}; diff --git a/docs_app/content/examples/universal/zipper.json b/docs_app/content/examples/universal/zipper.json deleted file mode 100644 index 37b42ad643..0000000000 --- a/docs_app/content/examples/universal/zipper.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "files":[ - "!dist/", - "!**/*.d.ts", - "!**/src/**/*.js" - ], - "removeSystemJsConfig": false, - "type": "universal" -} diff --git a/docs_app/content/examples/upgrade-module/.gitignore b/docs_app/content/examples/upgrade-module/.gitignore deleted file mode 100644 index 7f5c313a3e..0000000000 --- a/docs_app/content/examples/upgrade-module/.gitignore +++ /dev/null @@ -1,7 +0,0 @@ -**/*.js -aot/**/* -!aot/bs-config.json -!aot/index.html -!copy-dist-files.js -!rollup-config.js -!systemjs.config.1.js diff --git a/docs_app/content/examples/upgrade-module/e2e-spec.ts b/docs_app/content/examples/upgrade-module/e2e-spec.ts deleted file mode 100644 index 5c32ccd347..0000000000 --- a/docs_app/content/examples/upgrade-module/e2e-spec.ts +++ /dev/null @@ -1,165 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('Upgrade Tests', function () { - - beforeAll(function () { - // Set protractor to hybrid mode. - browser.rootEl = 'body'; - browser.ng12Hybrid = true; - }); - - describe('AngularJS Auto-bootstrap', function() { - - beforeAll(function () { - browser.get('/index-ng-app.html'); - }); - - it('bootstraps as expected', function () { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); - }); - - }); - - describe('AngularJS JavaScript Bootstrap', function() { - - beforeAll(function () { - browser.get('/index-bootstrap.html'); - }); - - it('bootstraps as expected', function () { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); - }); - - }); - - describe('AngularJS-Angular Hybrid Bootstrap', function() { - - beforeAll(function () { - browser.get('/index-ajs-a-hybrid-bootstrap.html'); - }); - - it('bootstraps as expected', function () { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); - }); - - }); - - describe('Upgraded static component', function() { - - beforeAll(function () { - browser.get('/index-upgrade-static.html'); - }); - - it('renders', function () { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); - }); - - }); - - - describe('Upgraded component with IO', function() { - - beforeAll(function () { - browser.get('/index-upgrade-io.html'); - }); - - it('has inputs', function () { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); - }); - - it('has outputs', function () { - element(by.buttonText('Delete')).click(); - expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!'); - }); - - }); - - - describe('Downgraded static component', function() { - - beforeAll(function () { - browser.get('/index-downgrade-static.html'); - }); - - it('renders', function () { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); - }); - - }); - - describe('Downgraded component with IO', function() { - - beforeAll(function () { - browser.get('/index-downgrade-io.html'); - }); - - it('has inputs', function () { - expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!'); - }); - - it('has outputs', function () { - element.all(by.buttonText('Delete')).first().click(); - expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!'); - }); - - it('supports ng-repeat', function () { - expect(element.all(by.css('hero-detail')).count()).toBe(3); - }); - - }); - - - describe('Downgraded component with content projection', function() { - - beforeAll(function () { - browser.get('/index-ajs-to-a-projection.html'); - }); - - it('can be transcluded into', function () { - expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); - }); - - }); - - - describe('Upgraded component with transclusion', function() { - - beforeAll(function () { - browser.get('/index-a-to-ajs-transclusion.html'); - }); - - it('can be projected into', function () { - expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); - }); - - }); - - - describe('Upgrading AngularJS Providers', function() { - - beforeAll(function () { - browser.get('/index-ajs-to-a-providers.html'); - }); - - it('works', function () { - expect(element(by.css('h2')).getText()).toBe('1: Windstorm'); - }); - - }); - - - describe('Downgrading Angular Providers', function() { - - beforeAll(function () { - browser.get('/index-a-to-ajs-providers.html'); - }); - - it('works', function () { - expect(element(by.css('h2')).getText()).toBe('1: Windstorm'); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-module/example-config.json b/docs_app/content/examples/upgrade-module/example-config.json deleted file mode 100644 index 61227cc07a..0000000000 --- a/docs_app/content/examples/upgrade-module/example-config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "projectType": "systemjs" -} diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts deleted file mode 100644 index 2ac7ee76bf..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts +++ /dev/null @@ -1,35 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; - -import { heroDetailComponent } from './hero-detail.component'; - -// #docregion ngmodule, register -import { Heroes } from './heroes'; -// #enddocregion register - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - providers: [ Heroes ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion ngmodule -// #docregion register -import { downgradeInjectable } from '@angular/upgrade/static'; - -angular.module('heroApp', []) - .factory('heroes', downgradeInjectable(Heroes)) - .component('heroDetail', heroDetailComponent); -// #enddocregion register - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts deleted file mode 100644 index dd7aa10d79..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Heroes } from './heroes'; - -// #docregion -export const heroDetailComponent = { - template: ` -

    {{$ctrl.hero.id}}: {{$ctrl.hero.name}}

    - `, - controller: ['heroes', function(heroes: Heroes) { - this.hero = heroes.get()[0]; - }] -}; diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts deleted file mode 100644 index f5f6d87ed8..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Hero } from '../hero'; - -@Injectable() -export class Heroes { - get() { - return [ - new Hero(1, 'Windstorm'), - new Hero(2, 'Spiderman') - ]; - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts deleted file mode 100644 index e95104cbcc..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts +++ /dev/null @@ -1,39 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; - -// #docregion heroupgrade -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - ContainerComponent, - HeroDetailDirective - ], - entryComponents: [ - ContainerComponent - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion heroupgrade - -angular.module('heroApp', []) - .component('heroDetail', heroDetail) - .directive( - 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory - ); - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts deleted file mode 100644 index 1b740d6554..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - selector: 'my-container', - template: ` - - -

    {{hero.description}}

    -     - ` -}) -export class ContainerComponent { - hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); -} diff --git a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts deleted file mode 100644 index 9d467a5411..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -// #docregion -export const heroDetail = { - bindings: { - hero: '=' - }, - template: ` -

    {{$ctrl.hero.name}}

    -
    - -
    - `, - transclude: true -}; -// #enddocregion - -import { Directive, ElementRef, Injector, Input } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; -import { Hero } from '../hero'; - -@Directive({ - selector: 'hero-detail' -}) -export class HeroDetailDirective extends UpgradeComponent { - @Input() hero: Hero; - - constructor(elementRef: ElementRef, injector: Injector) { - super('heroDetail', elementRef, injector); - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts deleted file mode 100644 index 3b8794d4de..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -declare var angular: angular.IAngularStatic; -// #docregion ngmodule -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion ngmodule -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); - -// #docregion bootstrap -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion bootstrap diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts deleted file mode 100644 index 15dc5743c2..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion ng1module -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); -// #enddocregion ng1module - -document.addEventListener('DOMContentLoaded', function() { - // #docregion bootstrap - angular.bootstrap(document.body, ['heroApp'], { strictDi: true }); - // #enddocregion bootstrap -}); diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts deleted file mode 100644 index 904f7578b8..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -angular.module('heroApp', []) - .controller('MainCtrl', function() { - this.message = 'Hello world'; - }); diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts deleted file mode 100644 index ab48681354..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { MainController } from './main.controller'; -import { HeroDetailComponent } from './hero-detail.component'; - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ], - entryComponents: [ - HeroDetailComponent - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} - -angular.module('heroApp', []) - .controller('MainController', MainController) - .directive('heroDetail', downgradeComponent({ - component: HeroDetailComponent, - inputs: ['hero'] - }) as angular.IDirectiveFactory); - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts deleted file mode 100644 index 7a2956eb26..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - selector: 'hero-detail', - template: ` -

    {{hero.name}}

    -
    - -
    - ` -}) -export class HeroDetailComponent { - @Input() hero: Hero; -} diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts deleted file mode 100644 index c6041ac788..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { Hero } from '../hero'; - -export class MainController { - hero = new Hero(1, 'Windstorm', 'Specific powers of controlling winds'); -} diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts deleted file mode 100644 index 52d4e74a1f..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { HeroesService } from './heroes.service'; - -export function heroesServiceFactory(i: any) { - return i.get('heroes'); -} - -export const heroesServiceProvider = { - provide: HeroesService, - useFactory: heroesServiceFactory, - deps: ['$injector'] -}; diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts deleted file mode 100644 index 8386a995f4..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts +++ /dev/null @@ -1,44 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { HeroDetailComponent } from './hero-detail.component'; -import { HeroesService } from './heroes.service'; -// #docregion register -import { heroesServiceProvider } from './ajs-upgraded-providers'; - -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - providers: [ - heroesServiceProvider - ], - // #enddocregion register - declarations: [ - HeroDetailComponent - ], - entryComponents: [ - HeroDetailComponent - ] -// #docregion register -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion register - -angular.module('heroApp', []) - .service('heroes', HeroesService) - .directive( - 'heroDetail', - downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory - ); - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts deleted file mode 100644 index b02f85b99a..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { HeroesService } from './heroes.service'; -import { Hero } from '../hero'; - -@Component({ - selector: 'hero-detail', - template: ` -

    {{hero.id}}: {{hero.name}}

    - ` -}) -export class HeroDetailComponent { - hero: Hero; - constructor(heroes: HeroesService) { - this.hero = heroes.get()[0]; - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts b/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts deleted file mode 100644 index 4a258e205a..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Hero } from '../hero'; - -export class HeroesService { - get() { - return [ - new Hero(1, 'Windstorm'), - new Hero(2, 'Spiderman') - ]; - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts deleted file mode 100644 index 22dd29ae6d..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts +++ /dev/null @@ -1,39 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { MainController } from './main.controller'; - -// #docregion downgradecomponent -import { HeroDetailComponent } from './hero-detail.component'; - -// #enddocregion downgradecomponent -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ], - entryComponents: [ - HeroDetailComponent - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #docregion downgradecomponent - -angular.module('heroApp', []) - .controller('MainController', MainController) - .directive('heroDetail', downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory); - -// #enddocregion downgradecomponent - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts deleted file mode 100644 index 94082813fd..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - selector: 'hero-detail', - template: ` -

    {{hero.name}} details!

    -
    {{hero.id}}
    - - ` -}) -export class HeroDetailComponent { - @Input() hero: Hero; - @Output() deleted = new EventEmitter(); - onDelete() { - this.deleted.emit(this.hero); - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts b/docs_app/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts deleted file mode 100644 index d50272073f..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Hero } from '../hero'; - -export class MainController { - hero = new Hero(1, 'Windstorm'); - heroes = [ - new Hero(2, 'Superman'), - new Hero(3, 'Spiderman') - ]; - onDelete(hero: Hero) { - hero.name = 'Ex-' + hero.name; - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts deleted file mode 100644 index 5925082197..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts +++ /dev/null @@ -1,42 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule } from '@angular/upgrade/static'; - -// #docregion downgradecomponent, ngmodule -import { HeroDetailComponent } from './hero-detail.component'; - -// #enddocregion downgradecomponent -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailComponent - ], - entryComponents: [ - HeroDetailComponent - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion ngmodule -// #docregion downgradecomponent - -import { downgradeComponent } from '@angular/upgrade/static'; - -angular.module('heroApp', []) - .directive( - 'heroDetail', - downgradeComponent({ component: HeroDetailComponent }) as angular.IDirectiveFactory - ); - -// #enddocregion downgradecomponent - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts deleted file mode 100644 index df4a705f37..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'hero-detail', - template: ` -

    Windstorm details!

    -
    1
    - ` -}) -export class HeroDetailComponent { } diff --git a/docs_app/content/examples/upgrade-module/src/app/hero-detail.directive.ts b/docs_app/content/examples/upgrade-module/src/app/hero-detail.directive.ts deleted file mode 100644 index 23fc7853d7..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/hero-detail.directive.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -export function heroDetailDirective() { - return { - restrict: 'E', - scope: {}, - bindToController: { - hero: '=', - deleted: '&' - }, - template: ` -

    {{$ctrl.hero.name}} details!

    -
    {{$ctrl.hero.id}}
    - - `, - controller: function() { - this.onDelete = () => { - this.deleted({hero: this.hero}); - }; - }, - controllerAs: '$ctrl' - }; -} diff --git a/docs_app/content/examples/upgrade-module/src/app/hero.ts b/docs_app/content/examples/upgrade-module/src/app/hero.ts deleted file mode 100644 index 5dcb5664eb..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/hero.ts +++ /dev/null @@ -1,5 +0,0 @@ -export class Hero { - constructor(public id: number, - public name: string, - public description?: string) { } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts deleted file mode 100644 index e95104cbcc..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts +++ /dev/null @@ -1,39 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; - -// #docregion heroupgrade -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - ContainerComponent, - HeroDetailDirective - ], - entryComponents: [ - ContainerComponent - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion heroupgrade - -angular.module('heroApp', []) - .component('heroDetail', heroDetail) - .directive( - 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory - ); - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts deleted file mode 100644 index 8d76085174..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Hero } from '../hero'; - -@Component({ - selector: 'my-container', - template: ` -

    Tour of Heroes

    - - - ` -}) -export class ContainerComponent { - hero = new Hero(1, 'Windstorm'); - heroDeleted(hero: Hero) { - hero.name = 'Ex-' + hero.name; - } -} diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts deleted file mode 100644 index 90c3273010..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docregion -// #docregion hero-detail-io -export const heroDetail = { - bindings: { - hero: '<', - deleted: '&' - }, - template: ` -

    {{$ctrl.hero.name}} details!

    -
    {{$ctrl.hero.id}}
    - - `, - controller: function() { - this.onDelete = () => { - this.deleted(this.hero); - }; - } -}; -// #enddocregion hero-detail-io - -// #docregion hero-detail-io-upgrade -import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; -import { Hero } from '../hero'; - -@Directive({ - selector: 'hero-detail' -}) -export class HeroDetailDirective extends UpgradeComponent { - @Input() hero: Hero; - @Output() deleted: EventEmitter; - - constructor(elementRef: ElementRef, injector: Injector) { - super('heroDetail', elementRef, injector); - } -} -// #enddocregion hero-detail-io-upgrade diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts deleted file mode 100644 index d6377ecda8..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts +++ /dev/null @@ -1,41 +0,0 @@ -declare var angular: angular.IAngularStatic; -import { NgModule } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { BrowserModule } from '@angular/platform-browser'; -import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static'; - -import { heroDetail, HeroDetailDirective } from './hero-detail.component'; -import { ContainerComponent } from './container.component'; - -// #docregion hero-detail-upgrade -@NgModule({ - imports: [ - BrowserModule, - UpgradeModule - ], - declarations: [ - HeroDetailDirective, - // #enddocregion hero-detail-upgrade - ContainerComponent - ], - entryComponents: [ - ContainerComponent - // #docregion hero-detail-upgrade - ] -}) -export class AppModule { - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.body, ['heroApp'], { strictDi: true }); - } -} -// #enddocregion hero-detail-upgrade - -angular.module('heroApp', []) - .component('heroDetail', heroDetail) - .directive( - 'myContainer', - downgradeComponent({component: ContainerComponent}) as angular.IDirectiveFactory - ); - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts deleted file mode 100644 index c28e5ea42d..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'my-container', - template: ` -

    Tour of Heroes

    - - ` -}) -export class ContainerComponent { } diff --git a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/docs_app/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts deleted file mode 100644 index 7e649022f2..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -// #docregion hero-detail -export const heroDetail = { - template: ` -

    Windstorm details!

    -
    1
    - `, - controller: function() { - } -}; -// #enddocregion hero-detail - -// #docregion hero-detail-upgrade -import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core'; -import { UpgradeComponent } from '@angular/upgrade/static'; - -@Directive({ - selector: 'hero-detail' -}) -export class HeroDetailDirective extends UpgradeComponent { - constructor(elementRef: ElementRef, injector: Injector) { - super('heroDetail', elementRef, injector); - } -} -// #enddocregion hero-detail-upgrade diff --git a/docs_app/content/examples/upgrade-module/src/app/villain.ts b/docs_app/content/examples/upgrade-module/src/app/villain.ts deleted file mode 100644 index ef3d014f11..0000000000 --- a/docs_app/content/examples/upgrade-module/src/app/villain.ts +++ /dev/null @@ -1,5 +0,0 @@ -export class Villain { - constructor(public id: number, - public name: string, - public description?: string) { } -} diff --git a/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-providers.html b/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-providers.html deleted file mode 100644 index 33a897868b..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-providers.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html b/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html deleted file mode 100644 index 767ce3312b..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html b/docs_app/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html deleted file mode 100644 index 7bcc58d0ee..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - -
    {{ mainCtrl.message }}
    - - diff --git a/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-projection.html b/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-projection.html deleted file mode 100644 index a49e5070df..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-projection.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - -
    - - -

    {{mainCtrl.hero.description}}

    -     -
    - -     - - diff --git a/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-providers.html b/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-providers.html deleted file mode 100644 index a0cc20d068..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-ajs-to-a-providers.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/index-bootstrap.html b/docs_app/content/examples/upgrade-module/src/index-bootstrap.html deleted file mode 100644 index 8d9534f95c..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-bootstrap.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - -
    {{ mainCtrl.message }}
    - - diff --git a/docs_app/content/examples/upgrade-module/src/index-downgrade-io.html b/docs_app/content/examples/upgrade-module/src/index-downgrade-io.html deleted file mode 100644 index 0d71f04404..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-downgrade-io.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - -
    - - -
    - - -
    - - -
    - -     - - diff --git a/docs_app/content/examples/upgrade-module/src/index-downgrade-static.html b/docs_app/content/examples/upgrade-module/src/index-downgrade-static.html deleted file mode 100644 index fe4e327292..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-downgrade-static.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/index-ng-app.html b/docs_app/content/examples/upgrade-module/src/index-ng-app.html deleted file mode 100644 index 3bf6233beb..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-ng-app.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - -
    - {{ mainCtrl.message }} -
    - - diff --git a/docs_app/content/examples/upgrade-module/src/index-upgrade-io.html b/docs_app/content/examples/upgrade-module/src/index-upgrade-io.html deleted file mode 100644 index 7d87a2fa27..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-upgrade-io.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/index-upgrade-static.html b/docs_app/content/examples/upgrade-module/src/index-upgrade-static.html deleted file mode 100644 index bd36796c55..0000000000 --- a/docs_app/content/examples/upgrade-module/src/index-upgrade-static.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - Angular Upgrade - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-module/src/systemjs.config.1.js b/docs_app/content/examples/upgrade-module/src/systemjs.config.1.js deleted file mode 100644 index b5d925be85..0000000000 --- a/docs_app/content/examples/upgrade-module/src/systemjs.config.1.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * System configuration for Angular samples - * Adjust as necessary for your application needs. - */ -(function (global) { - System.config({ - paths: { - // paths serve as alias - 'npm:': 'node_modules/' - }, - // map tells the System loader where to look for things - map: { - // our app is within the app folder - app: 'app', - // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - // #docregion upgrade-static-umd - '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', - // #enddocregion upgrade-static-umd - - // other libraries - 'rxjs': 'npm:rxjs', - 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' - }, - // packages tells the System loader how to load when no filename and/or no extension - packages: { - 'app': { main: './main.js', defaultExtension: 'js' }, - 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs': { main: 'index.js', defaultExtension: 'js' }, - } - }); -})(this); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/README.md b/docs_app/content/examples/upgrade-phonecat-1-typescript/README.md deleted file mode 100644 index f3433b901a..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/README.md +++ /dev/null @@ -1,34 +0,0 @@ -This is the Angular Phonecat application adjusted to fit our boilerplate project -structure. - -The following changes from vanilla Phonecat are applied: - -* The TypeScript config file shown in the guide is `tsconfig.ajs.json` instead - of the default, because we don't want to enable `noImplicitAny` for migration. -* Karma config for unit tests is in karma.conf.ajs.js because the boilerplate - Karma config is not compatible with the way AngularJS tests need to be run. - The shell script run-unit-tests.sh can be used to run the unit tests. -* Instead of using Bower, AngularJS and its dependencies are fetched from a CDN - in index.html and karma.conf.ajs.js. -* E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can - discover and run them along with all the other examples. -* Most of the phone JSON and image data removed in the interest of keeping - repo weight down. Keeping enough to retain testability of the app. - -## Running the app - -Start like any example - - npm run start - -You'll find the app under the /app path: http://localhost:3002/app/index.html - -## Running unit tests - - ./run-unit-tests.sh - -## Running E2E tests - -Like for any example (at the project root): - - gulp run-e2e-tests --filter=phonecat-1 diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css deleted file mode 100644 index 175320b509..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css +++ /dev/null @@ -1,67 +0,0 @@ -/* Animate `ngRepeat` in `phoneList` component */ -.phone-list-item.ng-enter, -.phone-list-item.ng-leave, -.phone-list-item.ng-move { - overflow: hidden; - transition: 0.5s linear all; -} - -.phone-list-item.ng-enter, -.phone-list-item.ng-leave.ng-leave-active, -.phone-list-item.ng-move { - height: 0; - margin-bottom: 0; - opacity: 0; - padding-bottom: 0; - padding-top: 0; -} - -.phone-list-item.ng-enter.ng-enter-active, -.phone-list-item.ng-leave, -.phone-list-item.ng-move.ng-move-active { - height: 120px; - margin-bottom: 20px; - opacity: 1; - padding-bottom: 4px; - padding-top: 15px; -} - -/* Animate view transitions with `ngView` */ -.view-container { - position: relative; -} - -.view-frame { - margin-top: 20px; -} - -.view-frame.ng-enter, -.view-frame.ng-leave { - background: white; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -.view-frame.ng-enter { - animation: 1s fade-in; - z-index: 100; -} - -.view-frame.ng-leave { - animation: 1s fade-out; - z-index: 99; -} - -@keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes fade-out { - from { opacity: 1; } - to { opacity: 0; } -} - -/* Older browsers might need vendor-prefixes for keyframes and animation! */ diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts deleted file mode 100644 index f0739b6405..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -angular. - module('phonecatApp'). - animation('.phone', function phoneAnimationFactory() { - return { - addClass: animateIn, - removeClass: animateOut - }; - - function animateIn(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - display: 'block', - position: 'absolute', - top: 500, - left: 0 - }).animate({ - top: 0 - }, done); - - return function animateInEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - - function animateOut(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - position: 'absolute', - top: 0, - left: 0 - }).animate({ - top: -500 - }, done); - - return function animateOutEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - }); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts deleted file mode 100644 index 1d16f67fbe..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -angular. - module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - $locationProvider.hashPrefix('!'); - - $routeProvider. - when('/phones', { - template: '' - }). - when('/phones/:phoneId', { - template: '' - }). - otherwise('/phones'); - } - ]); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.css b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.css deleted file mode 100644 index f4b45b02a5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - padding: 20px; -} - -h1 { - border-bottom: 1px solid gray; - margin-top: 0; -} - -/* View: Phone list */ -.phones { - list-style: none; -} - -.phones li { - clear: both; - height: 115px; - padding-top: 15px; -} - -.thumb { - float: left; - height: 100px; - margin: -0.5em 1em 1.5em 0; - padding-bottom: 1em; - width: 100px; -} - -/* View: Phone detail */ -.phone { - background-color: white; - display: none; - float: left; - height: 400px; - margin-bottom: 2em; - margin-right: 3em; - padding: 2em; - width: 400px; -} - -.phone:first-child { - display: block; -} - -.phone-images { - background-color: white; - float: left; - height: 450px; - overflow: hidden; - position: relative; - width: 450px; -} - -.phone-thumbs { - list-style: none; - margin: 0; -} - -.phone-thumbs img { - height: 100px; - padding: 1em; - width: 100px; -} - -.phone-thumbs li { - background-color: white; - border: 1px solid black; - cursor: pointer; - display: inline-block; - margin: 1em; -} - -.specs { - clear: both; - list-style: none; - margin: 0; - padding: 0; -} - -.specs dt { - font-weight: bold; -} - -.specs > li { - display: inline-block; - vertical-align: top; - width: 200px; -} - -.specs > li > span { - font-size: 1.2em; - font-weight: bold; -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts deleted file mode 100644 index ab6d353eeb..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -'use strict'; - -// Define the `phonecatApp` module -angular.module('phonecatApp', [ - 'ngAnimate', - 'ngRoute', - 'core', - 'phoneDetail', - 'phoneList', -]); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts deleted file mode 100644 index 1b2d77c30c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -'use strict'; - -describe('checkmark', () => { - - beforeEach(angular.mock.module('core')); - - it('should convert boolean values to unicode checkmark or cross', - inject(function(checkmarkFilter: (v: boolean) => string) { - expect(checkmarkFilter(true)).toBe('\u2713'); - expect(checkmarkFilter(false)).toBe('\u2718'); - }) - ); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts deleted file mode 100644 index 3114dc9681..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -angular. - module('core'). - filter('checkmark', function() { - return function(input: boolean) { - return input ? '\u2713' : '\u2718'; - }; - }); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts deleted file mode 100644 index 84a91dc7a6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core` module -angular.module('core', ['core.phone']); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts deleted file mode 100644 index 0b6b348899..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core.phone` module -angular.module('core.phone', ['ngResource']); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts deleted file mode 100644 index 312036d71d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -describe('Phone', () => { - let $httpBackend: angular.IHttpBackendService; - let Phone: any; - let phonesData = [ - {name: 'Phone X'}, - {name: 'Phone Y'}, - {name: 'Phone Z'} - ]; - - // Add a custom equality tester before each test - beforeEach(function() { - jasmine.addCustomEqualityTester(angular.equals); - }); - - // Load the module that contains the `Phone` service before each test - beforeEach(angular.mock.module('core.phone')); - - // Instantiate the service and "train" `$httpBackend` before each test - beforeEach(inject(function(_$httpBackend_: angular.IHttpBackendService, _Phone_: any) { - $httpBackend = _$httpBackend_; - $httpBackend.expectGET('phones/phones.json').respond(phonesData); - - Phone = _Phone_; - })); - - // Verify that there are no outstanding expectations or requests after each test - afterEach(() => { - $httpBackend.verifyNoOutstandingExpectation(); - $httpBackend.verifyNoOutstandingRequest(); - }); - - it('should fetch the phones data from `/phones/phones.json`', () => { - let phones = Phone.query(); - - expect(phones).toEqual([]); - - $httpBackend.flush(); - expect(phones).toEqual(phonesData); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts deleted file mode 100644 index c6204bc896..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -angular. - module('core.phone'). - factory('Phone', ['$resource', - function($resource: angular.resource.IResourceService) { - return $resource('phones/:phoneId.json', {}, { - query: { - method: 'GET', - params: {phoneId: 'phones'}, - isArray: true - } - }); - } - ]); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/index.html b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/index.html deleted file mode 100644 index 82717fb7ee..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - - diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts deleted file mode 100644 index 0998b638f0..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts +++ /dev/null @@ -1,38 +0,0 @@ -// #docregion -describe('phoneDetail', () => { - - // Load the module that contains the `phoneDetail` component before each test - beforeEach(angular.mock.module('phoneDetail')); - - // Test the controller - describe('PhoneDetailController', () => { - let $httpBackend: angular.IHttpBackendService; - let ctrl: any; - let xyzPhoneData = { - name: 'phone xyz', - images: ['image/url1.png', 'image/url2.png'] - }; - - beforeEach(inject(($componentController: any, - _$httpBackend_: angular.IHttpBackendService, - $routeParams: angular.route.IRouteParamsService) => { - $httpBackend = _$httpBackend_; - $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData); - - $routeParams['phoneId'] = 'xyz'; - - ctrl = $componentController('phoneDetail'); - })); - - it('should fetch the phone details', () => { - jasmine.addCustomEqualityTester(angular.equals); - - expect(ctrl.phone).toEqual({}); - - $httpBackend.flush(); - expect(ctrl.phone).toEqual(xyzPhoneData); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index 079b31e2c2..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -class PhoneDetailController { - phone: any; - mainImageUrl: string; - - static $inject = ['$routeParams', 'Phone']; - constructor($routeParams: angular.route.IRouteParamsService, Phone: any) { - let phoneId = $routeParams['phoneId']; - this.phone = Phone.get({phoneId}, (phone: any) => { - this.setImage(phone.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} - -angular. - module('phoneDetail'). - component('phoneDetail', { - templateUrl: 'phone-detail/phone-detail.template.html', - controller: PhoneDetailController - }); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts deleted file mode 100644 index fd7cb3b920..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -// Define the `phoneDetail` module -angular.module('phoneDetail', [ - 'ngRoute', - 'core.phone' -]); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html deleted file mode 100644 index f48657803c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html +++ /dev/null @@ -1,117 +0,0 @@ -
    - -
    - -

    {{$ctrl.phone.name}}

    - -

    {{$ctrl.phone.description}}

    - -
      -
    • - -
      • -
    - -
      -
    • - Availability and Networks -
      -
      Availability
      -
      {{availability}}
      -
      -
      • -
    • - Battery -
      -
      Type
      -
      {{$ctrl.phone.battery.type}}
      -
      Talk Time
      -
      {{$ctrl.phone.battery.talkTime}}
      -
      Standby time (max)
      -
      {{$ctrl.phone.battery.standbyTime}}
      -
      -
      • -
    • - Storage and Memory -
      -
      RAM
      -
      {{$ctrl.phone.storage.ram}}
      -
      Internal Storage
      -
      {{$ctrl.phone.storage.flash}}
      -
      -
      • -
    • - Connectivity -
      -
      Network Support
      -
      {{$ctrl.phone.connectivity.cell}}
      -
      WiFi
      -
      {{$ctrl.phone.connectivity.wifi}}
      -
      Bluetooth
      -
      {{$ctrl.phone.connectivity.bluetooth}}
      -
      Infrared
      -
      {{$ctrl.phone.connectivity.infrared | checkmark}}
      -
      GPS
      -
      {{$ctrl.phone.connectivity.gps | checkmark}}
      -
      -
      • -
    • - Android -
      -
      OS Version
      -
      {{$ctrl.phone.android.os}}
      -
      UI
      -
      {{$ctrl.phone.android.ui}}
      -
      -
      • -
    • - Size and Weight -
      -
      Dimensions
      -
      {{dim}}
      -
      Weight
      -
      {{$ctrl.phone.sizeAndWeight.weight}}
      -
      -
      • -
    • - Display -
      -
      Screen size
      -
      {{$ctrl.phone.display.screenSize}}
      -
      Screen resolution
      -
      {{$ctrl.phone.display.screenResolution}}
      -
      Touch screen
      -
      {{$ctrl.phone.display.touchScreen | checkmark}}
      -
      -
      • -
    • - Hardware -
      -
      CPU
      -
      {{$ctrl.phone.hardware.cpu}}
      -
      USB
      -
      {{$ctrl.phone.hardware.usb}}
      -
      Audio / headphone jack
      -
      {{$ctrl.phone.hardware.audioJack}}
      -
      FM Radio
      -
      {{$ctrl.phone.hardware.fmRadio | checkmark}}
      -
      Accelerometer
      -
      {{$ctrl.phone.hardware.accelerometer | checkmark}}
      -
      -
      • -
    • - Camera -
      -
      Primary
      -
      {{$ctrl.phone.camera.primary}}
      -
      Features
      -
      {{$ctrl.phone.camera.features.join(', ')}}
      -
      -
      • -
    • - Additional Features -
      {{$ctrl.phone.additionalFeatures}}
      -
      • -
    diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts deleted file mode 100644 index 19e1890817..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts +++ /dev/null @@ -1,36 +0,0 @@ -'use strict'; - -describe('phoneList', () => { - - // Load the module that contains the `phoneList` component before each test - beforeEach(angular.mock.module('phoneList')); - - // Test the controller - describe('PhoneListController', () => { - let $httpBackend: angular.IHttpBackendService; - let ctrl: any; - - beforeEach(inject(($componentController: any, _$httpBackend_: angular.IHttpBackendService) => { - $httpBackend = _$httpBackend_; - $httpBackend.expectGET('phones/phones.json') - .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); - - ctrl = $componentController('phoneList'); - })); - - it('should create a `phones` property with 2 phones fetched with `$http`', () => { - jasmine.addCustomEqualityTester(angular.equals); - - expect(ctrl.phones).toEqual([]); - - $httpBackend.flush(); - expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]); - }); - - it('should set a default value for the `orderProp` property', () => { - expect(ctrl.orderProp).toBe('age'); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts deleted file mode 100644 index e2f2855ae6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -class PhoneListController { - phones: any[]; - orderProp: string; - query: string; - - static $inject = ['Phone']; - constructor(Phone: any) { - this.phones = Phone.query(); - this.orderProp = 'age'; - } - -} - -angular. - module('phoneList'). - component('phoneList', { - templateUrl: 'phone-list/phone-list.template.html', - controller: PhoneListController - }); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts deleted file mode 100644 index 8ade7c5b88..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `phoneList` module -angular.module('phoneList', ['core.phone']); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html deleted file mode 100644 index 90548f9f91..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html +++ /dev/null @@ -1,36 +0,0 @@ -
    -
    -
    - - -

    - Search: - -

    - -

    - Sort by: - -

    - -
    -
    - - - - -
    -
    -
    diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json deleted file mode 100644 index a32eb6ff98..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "additionalFeatures": "Front Facing 1.3MP Camera", - "android": { - "os": "Android 2.2", - "ui": "Dell Stage" - }, - "availability": [ - "T-Mobile" - ], - "battery": { - "standbyTime": "", - "talkTime": "", - "type": "Lithium Ion (Li-Ion) (2780 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "T-mobile HSPA+ @ 2100/1900/AWS/850 MHz", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g" - }, - "description": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around. Android\u2122 2.2-based tablet with over-the-air upgrade capability for future OS releases. A vibrant 7-inch, multitouch display with full Adobe\u00ae Flash 10.1 pre-installed. Includes a 1.3 MP front-facing camera for face-to-face chats on popular services such as Qik or Skype. 16 GB of internal storage, plus Wi-Fi, Bluetooth and built-in GPS keeps you in touch with the world around you. Connect on your terms. Save with 2-year contract or flexibility with prepaid pay-as-you-go plans", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "7.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "nVidia Tegra T20", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "dell-streak-7", - "images": [ - "img/phones/dell-streak-7.0.jpg", - "img/phones/dell-streak-7.1.jpg", - "img/phones/dell-streak-7.2.jpg", - "img/phones/dell-streak-7.3.jpg", - "img/phones/dell-streak-7.4.jpg" - ], - "name": "Dell Streak 7", - "sizeAndWeight": { - "dimensions": [ - "199.9 mm (w)", - "119.8 mm (h)", - "12.4 mm (d)" - ], - "weight": "450.0 grams" - }, - "storage": { - "flash": "16000MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json deleted file mode 100644 index ccca00e3b2..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "", - "android": { - "os": "Android 2.2", - "ui": "MOTOBLUR" - }, - "availability": [ - "AT&T" - ], - "battery": { - "standbyTime": "400 hours", - "talkTime": "5 hours", - "type": "Lithium Ion (Li-Ion) (1930 mAH)" - }, - "camera": { - "features": [ - "" - ], - "primary": "" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "WCDMA 850/1900/2100, GSM 850/900/1800/1900, HSDPA 14Mbps (Category 10) Edge Class 12, GPRS Class 12, eCompass, AGPS", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA ATRIX 4G gives you dual-core processing power and the revolutionary webtop application. With webtop and a compatible Motorola docking station, sold separately, you can surf the Internet with a full Firefox browser, create and edit docs, or access multimedia on a large screen almost anywhere.", - "display": { - "screenResolution": "QHD (960 x 540)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-atrix-4g", - "images": [ - "img/phones/motorola-atrix-4g.0.jpg", - "img/phones/motorola-atrix-4g.1.jpg", - "img/phones/motorola-atrix-4g.2.jpg", - "img/phones/motorola-atrix-4g.3.jpg" - ], - "name": "MOTOROLA ATRIX\u2122 4G", - "sizeAndWeight": { - "dimensions": [ - "63.5 mm (w)", - "117.75 mm (h)", - "10.95 mm (d)" - ], - "weight": "135.0 grams" - }, - "storage": { - "flash": "", - "ram": "" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json deleted file mode 100644 index 4ba9c8d5b5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "additionalFeatures": "Sensors: proximity, ambient light, barometer, gyroscope", - "android": { - "os": "Android 3.0", - "ui": "Honeycomb" - }, - "availability": [ - "" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other ( mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom-with-wi-fi", - "images": [ - "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "img/phones/motorola-xoom-with-wi-fi.1.jpg", - "img/phones/motorola-xoom-with-wi-fi.2.jpg", - "img/phones/motorola-xoom-with-wi-fi.3.jpg", - "img/phones/motorola-xoom-with-wi-fi.4.jpg", - "img/phones/motorola-xoom-with-wi-fi.5.jpg" - ], - "name": "Motorola XOOM\u2122 with Wi-Fi", - "sizeAndWeight": { - "dimensions": [ - "249.1 mm (w)", - "167.8 mm (h)", - "12.9 mm (d)" - ], - "weight": "708.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json deleted file mode 100644 index f0f0c8711d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "Front-facing camera. Sensors: proximity, ambient light, barometer, gyroscope.", - "android": { - "os": "Android 3.0", - "ui": "Android" - }, - "availability": [ - "Verizon" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other (3250 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "CDMA 800 /1900 LTE 700, Rx diversity in all bands", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA XOOM has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom", - "images": [ - "img/phones/motorola-xoom.0.jpg", - "img/phones/motorola-xoom.1.jpg", - "img/phones/motorola-xoom.2.jpg" - ], - "name": "MOTOROLA XOOM\u2122", - "sizeAndWeight": { - "dimensions": [ - "249.0 mm (w)", - "168.0 mm (h)", - "12.7 mm (d)" - ], - "weight": "726.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json deleted file mode 100644 index 5e712e2ff8..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json +++ /dev/null @@ -1,69 +0,0 @@ -{ - "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope, Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", - "android": { - "os": "Android 2.3", - "ui": "Android" - }, - "availability": [ - "M1,", - "O2,", - "Orange,", - "Singtel,", - "StarHub,", - "T-Mobile,", - "Vodafone" - ], - "battery": { - "standbyTime": "428 hours", - "talkTime": "6 hours", - "type": "Lithium Ion (Li-Ion) (1500 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "Quad-band GSM: 850, 900, 1800, 1900\r\nTri-band HSPA: 900, 2100, 1700\r\nHSPA type: HSDPA (7.2Mbps) HSUPA (5.76Mbps)", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Nexus S is the next generation of Nexus devices, co-developed by Google and Samsung. The latest Android platform (Gingerbread), paired with a 1 GHz Hummingbird processor and 16GB of memory, makes Nexus S one of the fastest phones on the market. It comes pre-installed with the best of Google apps and enabled with new and popular features like true multi-tasking, Wi-Fi hotspot, Internet Calling, NFC support, and full web browsing. With this device, users will also be the first to receive software upgrades and new Google mobile apps as soon as they become available. For more details, visit http://www.google.com/nexus.", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1GHz Cortex A8 (Hummingbird) processor", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "nexus-s", - "images": [ - "img/phones/nexus-s.0.jpg", - "img/phones/nexus-s.1.jpg", - "img/phones/nexus-s.2.jpg", - "img/phones/nexus-s.3.jpg" - ], - "name": "Nexus S", - "sizeAndWeight": { - "dimensions": [ - "63.0 mm (w)", - "123.9 mm (h)", - "10.88 mm (d)" - ], - "weight": "129.0 grams" - }, - "storage": { - "flash": "16384MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json deleted file mode 100644 index 339b94fbb5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json +++ /dev/null @@ -1,155 +0,0 @@ -[ - { - "age": 0, - "id": "motorola-xoom-with-wi-fi", - "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "name": "Motorola XOOM\u2122 with Wi-Fi", - "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 1, - "id": "motorola-xoom", - "imageUrl": "img/phones/motorola-xoom.0.jpg", - "name": "MOTOROLA XOOM\u2122", - "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 2, - "carrier": "AT&T", - "id": "motorola-atrix-4g", - "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", - "name": "MOTOROLA ATRIX\u2122 4G", - "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." - }, - { - "age": 3, - "id": "dell-streak-7", - "imageUrl": "img/phones/dell-streak-7.0.jpg", - "name": "Dell Streak 7", - "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." - }, - { - "age": 4, - "carrier": "Cellular South", - "id": "samsung-gem", - "imageUrl": "img/phones/samsung-gem.0.jpg", - "name": "Samsung Gem\u2122", - "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." - }, - { - "age": 5, - "carrier": "Dell", - "id": "dell-venue", - "imageUrl": "img/phones/dell-venue.0.jpg", - "name": "Dell Venue", - "snippet": "The Dell Venue; Your Personal Express Lane to Everything" - }, - { - "age": 6, - "carrier": "Best Buy", - "id": "nexus-s", - "imageUrl": "img/phones/nexus-s.0.jpg", - "name": "Nexus S", - "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." - }, - { - "age": 7, - "carrier": "Cellular South", - "id": "lg-axis", - "imageUrl": "img/phones/lg-axis.0.jpg", - "name": "LG Axis", - "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" - }, - { - "age": 8, - "id": "samsung-galaxy-tab", - "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", - "name": "Samsung Galaxy Tab\u2122", - "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." - }, - { - "age": 9, - "carrier": "Cellular South", - "id": "samsung-showcase-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", - "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" - }, - { - "age": 10, - "carrier": "Verizon", - "id": "droid-2-global-by-motorola", - "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", - "name": "DROID\u2122 2 Global by Motorola", - "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." - }, - { - "age": 11, - "carrier": "Verizon", - "id": "droid-pro-by-motorola", - "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", - "name": "DROID\u2122 Pro by Motorola", - "snippet": "The next generation of DOES." - }, - { - "age": 12, - "carrier": "AT&T", - "id": "motorola-bravo-with-motoblur", - "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", - "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", - "snippet": "An experience to cheer about." - }, - { - "age": 13, - "carrier": "T-Mobile", - "id": "motorola-defy-with-motoblur", - "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", - "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", - "snippet": "Are you ready for everything life throws your way?" - }, - { - "age": 14, - "carrier": "T-Mobile", - "id": "t-mobile-mytouch-4g", - "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", - "name": "T-Mobile myTouch 4G", - "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." - }, - { - "age": 15, - "carrier": "US Cellular", - "id": "samsung-mesmerize-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", - "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" - }, - { - "age": 16, - "carrier": "Sprint", - "id": "sanyo-zio", - "imageUrl": "img/phones/sanyo-zio.0.jpg", - "name": "SANYO ZIO", - "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." - }, - { - "age": 17, - "id": "samsung-transform", - "imageUrl": "img/phones/samsung-transform.0.jpg", - "name": "Samsung Transform\u2122", - "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." - }, - { - "age": 18, - "id": "t-mobile-g2", - "imageUrl": "img/phones/t-mobile-g2.0.jpg", - "name": "T-Mobile G2", - "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." - }, - { - "age": 19, - "id": "motorola-charm-with-motoblur", - "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", - "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", - "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." - } -] diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts b/docs_app/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts deleted file mode 100644 index ec98b44eb5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts +++ /dev/null @@ -1,107 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; - -// Angular E2E Testing Guide: -// https://docs.angularjs.org/guide/e2e-testing - -describe('PhoneCat Application', function() { - - beforeAll(function() { - browser.baseUrl = 'http://localhost:8080/app/'; - // protractor.config.js is set to ng2 mode by default, so we must manually change it - browser.rootEl = 'body'; - }); - - it('should redirect `index.html` to `index.html#!/phones', function() { - browser.get('index.html'); - expect(browser.getLocationAbsUrl()).toBe('/phones'); - }); - - describe('View: Phone list', function() { - - beforeEach(function() { - browser.get('index.html#!/phones'); - }); - - it('should filter the phone list as a user types into the search box', function() { - let phoneList = element.all(by.repeater('phone in $ctrl.phones')); - let query = element(by.model('$ctrl.query')); - - expect(phoneList.count()).toBe(20); - - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); - - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); - }); - - it('should be possible to control phone order via the drop-down menu', function() { - let queryField = element(by.model('$ctrl.query')); - let orderSelect = element(by.model('$ctrl.orderProp')); - let nameOption = orderSelect.element(by.css('option[value="name"]')); - let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name')); - - function getNames() { - return phoneNameColumn.map(function(elem: ElementFinder) { - return elem.getText(); - }); - } - - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - - expect(getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); - - nameOption.click(); - - expect(getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); - }); - - it('should render phone specific links', function() { - let query = element(by.model('$ctrl.query')); - query.sendKeys('nexus'); - - element.all(by.css('.phones li a')).first().click(); - expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s'); - }); - - }); - - describe('View: Phone detail', function() { - - beforeEach(function() { - browser.get('index.html#!/phones/nexus-s'); - }); - - it('should display the `nexus-s` page', function() { - expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S'); - }); - - it('should display the first phone image as the main phone image', function() { - let mainImage = element(by.css('img.phone.selected')); - - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - it('should swap the main image when clicking on a thumbnail image', function() { - let mainImage = element(by.css('img.phone.selected')); - let thumbnails = element.all(by.css('.phone-thumbs img')); - - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/example-config.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/example-config.json deleted file mode 100644 index a76722119f..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:upgrade", - "run": "serve:upgrade", - "projectType": "systemjs" -} diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js b/docs_app/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js deleted file mode 100644 index 2bf59ed73f..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js +++ /dev/null @@ -1,32 +0,0 @@ -//jshint strict: false -module.exports = function (config) { - config.set({ - - basePath: './app', - - files: [ - 'https://code.angularjs.org/1.5.5/angular.js', - 'https://code.angularjs.org/1.5.5/angular-animate.js', - 'https://code.angularjs.org/1.5.5/angular-resource.js', - 'https://code.angularjs.org/1.5.5/angular-route.js', - 'https://code.angularjs.org/1.5.5/angular-mocks.js', - '**/*.module.js', - '*!(.module|.spec).js', - '!(bower_components)/**/*!(.module|.spec).js', - '**/*.spec.js' - ], - - autoWatch: true, - - frameworks: ['jasmine'], - - browsers: ['Chrome', 'Firefox'], - - plugins: [ - 'karma-chrome-launcher', - 'karma-firefox-launcher', - 'karma-jasmine' - ] - - }); -}; diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh b/docs_app/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh deleted file mode 100644 index 239e5ff7d7..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh +++ /dev/null @@ -1,7 +0,0 @@ -## The boilerplate Karma configuration won't work with AngularJS tests since -## a specific loading configuration is needed for them. -## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with -## that config. - -PATH=$(npm bin):$PATH -tsc && karma start karma.conf.ajs.js diff --git a/docs_app/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json b/docs_app/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json deleted file mode 100644 index 53da36ca95..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "removeComments": false, - "noImplicitAny": false, - "suppressImplicitAnyIndexErrors": true - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/README.md b/docs_app/content/examples/upgrade-phonecat-2-hybrid/README.md deleted file mode 100644 index 76eb21fc6c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/README.md +++ /dev/null @@ -1,32 +0,0 @@ -This is the Angular Phonecat application adjusted to fit our boilerplate project -structure. - -The following changes from vanilla Phonecat are applied: - -* Karma config for unit tests is in karma.conf.ajs.js because the boilerplate - Karma config is not compatible with the way AngularJS tests need to be run. - The shell script run-unit-tests.sh can be used to run the unit tests. -* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't - used but is shown in the test appendix. -* Instead of using Bower, AngularJS and its dependencies are fetched from a CDN - in index.html and karma.conf.ajs.js. -* E2E tests have been moved to the parent directory, where `run-e2e-tests` can - discover and run them along with all the other examples. -* Most of the phone JSON and image data removed in the interest of keeping - repo weight down. Keeping enough to retain testability of the app. - -## Running the app - -Start like any example - - npm run start - -## Running unit tests - - ./run-unit-tests.sh - -## Running E2E tests - -Like for any example (at the project root): - - gulp run-e2e-tests --filter=phonecat-2 diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/aot/index.html b/docs_app/content/examples/upgrade-phonecat-2-hybrid/aot/index.html deleted file mode 100644 index fdc9584928..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/aot/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - - diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts deleted file mode 100644 index f6e1654d74..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -export abstract class RouteParams { - [key: string]: string; -} - -export function routeParamsFactory(i: any) { - return i.get('$routeParams'); -} - -export const routeParamsProvider = { - provide: RouteParams, - useFactory: routeParamsFactory, - deps: ['$injector'] -}; diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css deleted file mode 100644 index 175320b509..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css +++ /dev/null @@ -1,67 +0,0 @@ -/* Animate `ngRepeat` in `phoneList` component */ -.phone-list-item.ng-enter, -.phone-list-item.ng-leave, -.phone-list-item.ng-move { - overflow: hidden; - transition: 0.5s linear all; -} - -.phone-list-item.ng-enter, -.phone-list-item.ng-leave.ng-leave-active, -.phone-list-item.ng-move { - height: 0; - margin-bottom: 0; - opacity: 0; - padding-bottom: 0; - padding-top: 0; -} - -.phone-list-item.ng-enter.ng-enter-active, -.phone-list-item.ng-leave, -.phone-list-item.ng-move.ng-move-active { - height: 120px; - margin-bottom: 20px; - opacity: 1; - padding-bottom: 4px; - padding-top: 15px; -} - -/* Animate view transitions with `ngView` */ -.view-container { - position: relative; -} - -.view-frame { - margin-top: 20px; -} - -.view-frame.ng-enter, -.view-frame.ng-leave { - background: white; - left: 0; - position: absolute; - right: 0; - top: 0; -} - -.view-frame.ng-enter { - animation: 1s fade-in; - z-index: 100; -} - -.view-frame.ng-leave { - animation: 1s fade-out; - z-index: 99; -} - -@keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes fade-out { - from { opacity: 1; } - to { opacity: 0; } -} - -/* Older browsers might need vendor-prefixes for keyframes and animation! */ diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts deleted file mode 100644 index f0739b6405..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -angular. - module('phonecatApp'). - animation('.phone', function phoneAnimationFactory() { - return { - addClass: animateIn, - removeClass: animateOut - }; - - function animateIn(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - display: 'block', - position: 'absolute', - top: 500, - left: 0 - }).animate({ - top: 0 - }, done); - - return function animateInEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - - function animateOut(element: JQuery, className: string, done: () => void) { - if (className !== 'selected') { return; } - - element.css({ - position: 'absolute', - top: 0, - left: 0 - }).animate({ - top: -500 - }, done); - - return function animateOutEnd(wasCanceled: boolean) { - if (wasCanceled) { element.stop(); } - }; - } - }); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts deleted file mode 100644 index 458ed94250..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -angular. - module('phonecatApp'). - config(['$locationProvider', '$routeProvider', - function config($locationProvider: angular.ILocationProvider, - $routeProvider: angular.route.IRouteProvider) { - $locationProvider.hashPrefix('!'); - - $routeProvider. - when('/phones', { - template: '' - }). - when('/phones/:phoneId', { - template: '' - }). - otherwise('/phones'); - } - ]); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.css b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.css deleted file mode 100644 index f4b45b02a5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - padding: 20px; -} - -h1 { - border-bottom: 1px solid gray; - margin-top: 0; -} - -/* View: Phone list */ -.phones { - list-style: none; -} - -.phones li { - clear: both; - height: 115px; - padding-top: 15px; -} - -.thumb { - float: left; - height: 100px; - margin: -0.5em 1em 1.5em 0; - padding-bottom: 1em; - width: 100px; -} - -/* View: Phone detail */ -.phone { - background-color: white; - display: none; - float: left; - height: 400px; - margin-bottom: 2em; - margin-right: 3em; - padding: 2em; - width: 400px; -} - -.phone:first-child { - display: block; -} - -.phone-images { - background-color: white; - float: left; - height: 450px; - overflow: hidden; - position: relative; - width: 450px; -} - -.phone-thumbs { - list-style: none; - margin: 0; -} - -.phone-thumbs img { - height: 100px; - padding: 1em; - width: 100px; -} - -.phone-thumbs li { - background-color: white; - border: 1px solid black; - cursor: pointer; - display: inline-block; - margin: 1em; -} - -.specs { - clear: both; - list-style: none; - margin: 0; - padding: 0; -} - -.specs dt { - font-weight: bold; -} - -.specs > li { - display: inline-block; - vertical-align: top; - width: 200px; -} - -.specs > li > span { - font-size: 1.2em; - font-weight: bold; -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts deleted file mode 100644 index 089c3c7d85..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -'use strict'; - -// Define the `phonecatApp` AngularJS module -angular.module('phonecatApp', [ - 'ngAnimate', - 'ngRoute', - 'core', - 'phoneDetail', - 'phoneList', -]); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts deleted file mode 100644 index ba8b01c246..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts +++ /dev/null @@ -1,76 +0,0 @@ -// #docplaster -// #docregion bare -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -// #enddocregion bare -// #docregion upgrademodule -import { UpgradeModule } from '@angular/upgrade/static'; -// #enddocregion upgrademodule -// #docregion httpmodule -import { HttpModule } from '@angular/http'; -// #enddocregion httpmodule -// #docregion phonelist -import { FormsModule } from '@angular/forms'; -// #enddocregion phonelist -// #docregion phone -import { Phone } from './core/phone/phone.service'; -// #enddocregion phone -// #docregion checkmarkpipe -import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; -// #enddocregion checkmarkpipe -// #docregion phonelist -import { PhoneListComponent } from './phone-list/phone-list.component'; -// #enddocregion phonelist -// #docregion routeparams -import { routeParamsProvider } from './ajs-upgraded-providers'; -// #enddocregion routeparams -// #docregion phonedetail -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -// #enddocregion phonedetail - -// #docregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe - -@NgModule({ - imports: [ - BrowserModule, - // #enddocregion bare - UpgradeModule, - // #enddocregion upgrademodule - HttpModule, - // #enddocregion httpmodule, phone - FormsModule, - // #docregion bare, upgrademodule, httpmodule, phone - ], - // #enddocregion bare, upgrademodule, httpmodule, phone - declarations: [ - PhoneListComponent, - // #enddocregion phonelist - PhoneDetailComponent, - // #enddocregion phonedetail - CheckmarkPipe - // #docregion phonelist, phonedetail - ], - entryComponents: [ - PhoneListComponent, - // #enddocregion phonelist - PhoneDetailComponent - ], - // #docregion phone, routeparams - providers: [ - Phone, - // #enddocregion phone - routeParamsProvider - // #docregion phone - ] - // #enddocregion routeparams -// #docregion bare, upgrademodule, httpmodule, phonelist -}) -export class AppModule { - // #enddocregion bare - constructor(private upgrade: UpgradeModule) { } - ngDoBootstrap() { - this.upgrade.bootstrap(document.documentElement, ['phonecatApp']); - } - // #docregion bare -} -// #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts deleted file mode 100644 index f7485ec2ba..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { CheckmarkPipe } from './checkmark.pipe'; - -describe('CheckmarkPipe', function() { - - it('should convert boolean values to unicode checkmark or cross', function () { - const checkmarkPipe = new CheckmarkPipe(); - expect(checkmarkPipe.transform(true)).toBe('\u2713'); - expect(checkmarkPipe.transform(false)).toBe('\u2718'); - }); -}); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts deleted file mode 100644 index 888017e15c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({name: 'checkmark'}) -export class CheckmarkPipe implements PipeTransform { - transform(input: boolean) { - return input ? '\u2713' : '\u2718'; - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts deleted file mode 100644 index 84a91dc7a6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core` module -angular.module('core', ['core.phone']); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts deleted file mode 100644 index 0b6b348899..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `core.phone` module -angular.module('core.phone', ['ngResource']); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts deleted file mode 100644 index a0c1655c20..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -// #docregion -import { inject, TestBed } from '@angular/core/testing'; -import { - Http, - BaseRequestOptions, - ResponseOptions, - Response -} from '@angular/http'; -import { MockBackend, MockConnection } from '@angular/http/testing'; -import { Phone, PhoneData } from './phone.service'; - -describe('Phone', function() { - let phone: Phone; - let phonesData: PhoneData[] = [ - {name: 'Phone X', snippet: '', images: []}, - {name: 'Phone Y', snippet: '', images: []}, - {name: 'Phone Z', snippet: '', images: []} - ]; - let mockBackend: MockBackend; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - Phone, - MockBackend, - BaseRequestOptions, - { provide: Http, - useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), - deps: [MockBackend, BaseRequestOptions] - } - ] - }); - }); - - beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => { - mockBackend = _mockBackend_; - phone = _phone_; - })); - - it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => { - mockBackend.connections.subscribe((conn: MockConnection) => { - conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)}))); - }); - phone.query().subscribe(result => { - expect(result).toEqual(phonesData); - done(); - }); - }); - -}); - diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts deleted file mode 100644 index 22ff7d7ce5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -// #docregion downgrade-injectable -declare var angular: angular.IAngularStatic; -import { downgradeInjectable } from '@angular/upgrade/static'; -// #enddocregion downgrade-injectable - -// #docregion phonedata-interface -export interface PhoneData { - name: string; - snippet: string; - images: string[]; -} -// #enddocregion phonedata-interface - -// #docregion fullclass -// #docregion classdef, downgrade-injectable -@Injectable() -export class Phone { -// #enddocregion classdef, downgrade-injectable - constructor(private http: Http) { } - query(): Observable { - return this.http.get(`phones/phones.json`).pipe( - map((res: Response) => res.json()) - ); - } - get(id: string): Observable { - return this.http.get(`phones/${id}.json`).pipe( - map((res: Response) => res.json()) - ); - } -// #docregion classdef, downgrade-injectable -} -// #enddocregion classdef -// #enddocregion fullclass - -angular.module('core.phone') - .factory('phone', downgradeInjectable(Phone)); -// #enddocregion downgrade-injectable diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts deleted file mode 100644 index bbf091409d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion -import { platformBrowser } from '@angular/platform-browser'; - -import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; - -platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main.ts deleted file mode 100644 index 2b978d046c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -// #docregion bootstrap -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion bootstrap diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts deleted file mode 100644 index 80282858c4..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts +++ /dev/null @@ -1,28 +0,0 @@ -// #docregion -declare var angular: angular.IAngularStatic; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -class PhoneDetailController { - phone: PhoneData; - mainImageUrl: string; - - static $inject = ['$routeParams', 'phone']; - constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) { - let phoneId = $routeParams['phoneId']; - phone.get(phoneId).subscribe(data => { - this.phone = data; - this.setImage(data.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} - -angular. - module('phoneDetail'). - component('phoneDetail', { - templateUrl: 'phone-detail/phone-detail.template.html', - controller: PhoneDetailController - }); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts deleted file mode 100644 index 260794b98b..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -// #docregion -// #docregion activatedroute -import { ActivatedRoute } from '@angular/router'; - -// #enddocregion activatedroute -import { Observable } from 'rxjs'; - -import { async, TestBed } from '@angular/core/testing'; - -import { PhoneDetailComponent } from './phone-detail.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; - -function xyzPhoneData(): PhoneData { - return { - name: 'phone xyz', - snippet: '', - images: ['image/url1.png', 'image/url2.png'] - }; -} - -class MockPhone { - get(id: string): Observable { - return Observable.of(xyzPhoneData()); - } -} - -// #docregion activatedroute - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -// #enddocregion activatedroute - -describe('PhoneDetailComponent', () => { - - // #docregion activatedroute - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CheckmarkPipe, PhoneDetailComponent ], - providers: [ - { provide: Phone, useClass: MockPhone }, - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) } - ] - }) - .compileComponents(); - })); - // #enddocregion activatedroute - - it('should fetch phone detail', () => { - const fixture = TestBed.createComponent(PhoneDetailComponent); - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index aa20ebb801..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docplaster -// #docregion -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; - -// #docregion initialclass -import { Component } from '@angular/core'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; -// #enddocregion initialclass -import { RouteParams } from '../ajs-upgraded-providers'; - -// #docregion initialclass -@Component({ - selector: 'phone-detail', - templateUrl: './phone-detail.template.html', - // #enddocregion initialclass - // #docregion initialclass -}) -export class PhoneDetailComponent { - phone: PhoneData; - mainImageUrl: string; - - constructor(routeParams: RouteParams, phone: Phone) { - phone.get(routeParams['phoneId']).subscribe(phone => { - this.phone = phone; - this.setImage(phone.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} -// #enddocregion initialclass - -angular.module('phoneDetail') - .directive( - 'phoneDetail', - downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory - ); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts deleted file mode 100644 index fd7cb3b920..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -// Define the `phoneDetail` module -angular.module('phoneDetail', [ - 'ngRoute', - 'core.phone' -]); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html deleted file mode 100644 index 4068532de9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html +++ /dev/null @@ -1,120 +0,0 @@ - -
    -
    - -
    - -

    {{phone.name}}

    - -

    {{phone.description}}

    - -
      -
    • - -
      • -
    - -
      -
    • - Availability and Networks -
      -
      Availability
      -
      {{availability}}
      -
      -
      • -
    • - Battery -
      -
      Type
      -
      {{phone.battery?.type}}
      -
      Talk Time
      -
      {{phone.battery?.talkTime}}
      -
      Standby time (max)
      -
      {{phone.battery?.standbyTime}}
      -
      -
      • -
    • - Storage and Memory -
      -
      RAM
      -
      {{phone.storage?.ram}}
      -
      Internal Storage
      -
      {{phone.storage?.flash}}
      -
      -
      • -
    • - Connectivity -
      -
      Network Support
      -
      {{phone.connectivity?.cell}}
      -
      WiFi
      -
      {{phone.connectivity?.wifi}}
      -
      Bluetooth
      -
      {{phone.connectivity?.bluetooth}}
      -
      Infrared
      -
      {{phone.connectivity?.infrared | checkmark}}
      -
      GPS
      -
      {{phone.connectivity?.gps | checkmark}}
      -
      -
      • -
    • - Android -
      -
      OS Version
      -
      {{phone.android?.os}}
      -
      UI
      -
      {{phone.android?.ui}}
      -
      -
      • -
    • - Size and Weight -
      -
      Dimensions
      -
      {{dim}}
      -
      Weight
      -
      {{phone.sizeAndWeight?.weight}}
      -
      -
      • -
    • - Display -
      -
      Screen size
      -
      {{phone.display?.screenSize}}
      -
      Screen resolution
      -
      {{phone.display?.screenResolution}}
      -
      Touch screen
      -
      {{phone.display?.touchScreen | checkmark}}
      -
      -
      • -
    • - Hardware -
      -
      CPU
      -
      {{phone.hardware?.cpu}}
      -
      USB
      -
      {{phone.hardware?.usb}}
      -
      Audio / headphone jack
      -
      {{phone.hardware?.audioJack}}
      -
      FM Radio
      -
      {{phone.hardware?.fmRadio | checkmark}}
      -
      Accelerometer
      -
      {{phone.hardware?.accelerometer | checkmark}}
      -
      -
      • -
    • - Camera -
      -
      Primary
      -
      {{phone.camera?.primary}}
      -
      Features
      -
      {{phone.camera?.features?.join(', ')}}
      -
      -
      • -
    • - Additional Features -
      {{phone.additionalFeatures}}
      -
      • -
    -
    diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts deleted file mode 100644 index 81eac1cd81..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -declare var angular: angular.IAngularStatic; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -class PhoneListController { - phones: PhoneData[]; - orderProp: string; - - static $inject = ['phone']; - constructor(phone: Phone) { - phone.query().subscribe(phones => { - this.phones = phones; - }); - this.orderProp = 'age'; - } - -} - -angular. - module('phoneList'). - component('phoneList', { - templateUrl: 'app/phone-list/phone-list.template.html', - controller: PhoneListController - }); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts deleted file mode 100644 index db77d7c844..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts +++ /dev/null @@ -1,66 +0,0 @@ -/* tslint:disable */ -// #docregion -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SpyLocation } from '@angular/common/testing'; - -import { PhoneListComponent } from './phone-list.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -class MockPhone { - query(): Observable { - return Observable.of([ - {name: 'Nexus S', snippet: '', images: []}, - {name: 'Motorola DROID', snippet: '', images: []} - ]); - } -} - -let fixture: ComponentFixture; - -describe('PhoneList', () => { - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PhoneListComponent ], - providers: [ - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, - { provide: Location, useClass: SpyLocation }, - { provide: Phone, useClass: MockPhone }, - ], - schemas: [ NO_ERRORS_SCHEMA ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PhoneListComponent); - }); - - it('should create "phones" model with 2 phones fetched from xhr', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); - expect( - compiled.querySelector('.phone-list-item:nth-child(1)').textContent - ).toContain('Motorola DROID'); - expect( - compiled.querySelector('.phone-list-item:nth-child(2)').textContent - ).toContain('Nexus S'); - }); - - xit('should set the default value of orderProp model', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect( - compiled.querySelector('select option:last-child').selected - ).toBe(true); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts deleted file mode 100644 index 453df46d25..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,72 +0,0 @@ -// #docregion downgrade-component -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; - -// #enddocregion downgrade-component - -// #docregion initialclass -import { Component } from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -// #docregion downgrade-component -@Component({ - selector: 'phone-list', - templateUrl: './phone-list.template.html' -}) -export class PhoneListComponent { - // #enddocregion downgrade-component - phones: PhoneData[]; - query: string; - orderProp: string; - - constructor(phone: Phone) { - phone.query().subscribe(phones => { - this.phones = phones; - }); - this.orderProp = 'age'; - } - // #enddocregion initialclass - - // #docregion getphones - getPhones(): PhoneData[] { - return this.sortPhones(this.filterPhones(this.phones)); - } - - private filterPhones(phones: PhoneData[]) { - if (phones && this.query) { - return phones.filter(phone => { - let name = phone.name.toLowerCase(); - let snippet = phone.snippet.toLowerCase(); - return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0; - }); - } - return phones; - } - - private sortPhones(phones: PhoneData[]) { - if (phones && this.orderProp) { - return phones - .slice(0) // Make a copy - .sort((a, b) => { - if (a[this.orderProp] < b[this.orderProp]) { - return -1; - } else if ([b[this.orderProp] < a[this.orderProp]]) { - return 1; - } else { - return 0; - } - }); - } - return phones; - } - // #enddocregion getphones - // #docregion initialclass, downgrade-component -} -// #enddocregion initialclass - -angular.module('phoneList') - .directive( - 'phoneList', - downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory - ); -// #enddocregion downgrade-component diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts deleted file mode 100644 index 8ade7c5b88..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts +++ /dev/null @@ -1,4 +0,0 @@ -'use strict'; - -// Define the `phoneList` module -angular.module('phoneList', ['core.phone']); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html deleted file mode 100644 index 8f02113985..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html +++ /dev/null @@ -1,40 +0,0 @@ -
    -
    -
    - - - -

    - Search: - -

    - -

    - Sort by: - -

    - - -
    -
    - - - - - - -
    -
    -
    diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json deleted file mode 100644 index a32eb6ff98..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "additionalFeatures": "Front Facing 1.3MP Camera", - "android": { - "os": "Android 2.2", - "ui": "Dell Stage" - }, - "availability": [ - "T-Mobile" - ], - "battery": { - "standbyTime": "", - "talkTime": "", - "type": "Lithium Ion (Li-Ion) (2780 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "T-mobile HSPA+ @ 2100/1900/AWS/850 MHz", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g" - }, - "description": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around. Android\u2122 2.2-based tablet with over-the-air upgrade capability for future OS releases. A vibrant 7-inch, multitouch display with full Adobe\u00ae Flash 10.1 pre-installed. Includes a 1.3 MP front-facing camera for face-to-face chats on popular services such as Qik or Skype. 16 GB of internal storage, plus Wi-Fi, Bluetooth and built-in GPS keeps you in touch with the world around you. Connect on your terms. Save with 2-year contract or flexibility with prepaid pay-as-you-go plans", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "7.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "nVidia Tegra T20", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "dell-streak-7", - "images": [ - "img/phones/dell-streak-7.0.jpg", - "img/phones/dell-streak-7.1.jpg", - "img/phones/dell-streak-7.2.jpg", - "img/phones/dell-streak-7.3.jpg", - "img/phones/dell-streak-7.4.jpg" - ], - "name": "Dell Streak 7", - "sizeAndWeight": { - "dimensions": [ - "199.9 mm (w)", - "119.8 mm (h)", - "12.4 mm (d)" - ], - "weight": "450.0 grams" - }, - "storage": { - "flash": "16000MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json deleted file mode 100644 index ccca00e3b2..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "", - "android": { - "os": "Android 2.2", - "ui": "MOTOBLUR" - }, - "availability": [ - "AT&T" - ], - "battery": { - "standbyTime": "400 hours", - "talkTime": "5 hours", - "type": "Lithium Ion (Li-Ion) (1930 mAH)" - }, - "camera": { - "features": [ - "" - ], - "primary": "" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "WCDMA 850/1900/2100, GSM 850/900/1800/1900, HSDPA 14Mbps (Category 10) Edge Class 12, GPRS Class 12, eCompass, AGPS", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA ATRIX 4G gives you dual-core processing power and the revolutionary webtop application. With webtop and a compatible Motorola docking station, sold separately, you can surf the Internet with a full Firefox browser, create and edit docs, or access multimedia on a large screen almost anywhere.", - "display": { - "screenResolution": "QHD (960 x 540)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-atrix-4g", - "images": [ - "img/phones/motorola-atrix-4g.0.jpg", - "img/phones/motorola-atrix-4g.1.jpg", - "img/phones/motorola-atrix-4g.2.jpg", - "img/phones/motorola-atrix-4g.3.jpg" - ], - "name": "MOTOROLA ATRIX\u2122 4G", - "sizeAndWeight": { - "dimensions": [ - "63.5 mm (w)", - "117.75 mm (h)", - "10.95 mm (d)" - ], - "weight": "135.0 grams" - }, - "storage": { - "flash": "", - "ram": "" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json deleted file mode 100644 index 4ba9c8d5b5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "additionalFeatures": "Sensors: proximity, ambient light, barometer, gyroscope", - "android": { - "os": "Android 3.0", - "ui": "Honeycomb" - }, - "availability": [ - "" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other ( mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom-with-wi-fi", - "images": [ - "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "img/phones/motorola-xoom-with-wi-fi.1.jpg", - "img/phones/motorola-xoom-with-wi-fi.2.jpg", - "img/phones/motorola-xoom-with-wi-fi.3.jpg", - "img/phones/motorola-xoom-with-wi-fi.4.jpg", - "img/phones/motorola-xoom-with-wi-fi.5.jpg" - ], - "name": "Motorola XOOM\u2122 with Wi-Fi", - "sizeAndWeight": { - "dimensions": [ - "249.1 mm (w)", - "167.8 mm (h)", - "12.9 mm (d)" - ], - "weight": "708.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json deleted file mode 100644 index f0f0c8711d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "Front-facing camera. Sensors: proximity, ambient light, barometer, gyroscope.", - "android": { - "os": "Android 3.0", - "ui": "Android" - }, - "availability": [ - "Verizon" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other (3250 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "CDMA 800 /1900 LTE 700, Rx diversity in all bands", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA XOOM has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom", - "images": [ - "img/phones/motorola-xoom.0.jpg", - "img/phones/motorola-xoom.1.jpg", - "img/phones/motorola-xoom.2.jpg" - ], - "name": "MOTOROLA XOOM\u2122", - "sizeAndWeight": { - "dimensions": [ - "249.0 mm (w)", - "168.0 mm (h)", - "12.7 mm (d)" - ], - "weight": "726.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json deleted file mode 100644 index 5e712e2ff8..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json +++ /dev/null @@ -1,69 +0,0 @@ -{ - "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope, Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", - "android": { - "os": "Android 2.3", - "ui": "Android" - }, - "availability": [ - "M1,", - "O2,", - "Orange,", - "Singtel,", - "StarHub,", - "T-Mobile,", - "Vodafone" - ], - "battery": { - "standbyTime": "428 hours", - "talkTime": "6 hours", - "type": "Lithium Ion (Li-Ion) (1500 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "Quad-band GSM: 850, 900, 1800, 1900\r\nTri-band HSPA: 900, 2100, 1700\r\nHSPA type: HSDPA (7.2Mbps) HSUPA (5.76Mbps)", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Nexus S is the next generation of Nexus devices, co-developed by Google and Samsung. The latest Android platform (Gingerbread), paired with a 1 GHz Hummingbird processor and 16GB of memory, makes Nexus S one of the fastest phones on the market. It comes pre-installed with the best of Google apps and enabled with new and popular features like true multi-tasking, Wi-Fi hotspot, Internet Calling, NFC support, and full web browsing. With this device, users will also be the first to receive software upgrades and new Google mobile apps as soon as they become available. For more details, visit http://www.google.com/nexus.", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1GHz Cortex A8 (Hummingbird) processor", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "nexus-s", - "images": [ - "img/phones/nexus-s.0.jpg", - "img/phones/nexus-s.1.jpg", - "img/phones/nexus-s.2.jpg", - "img/phones/nexus-s.3.jpg" - ], - "name": "Nexus S", - "sizeAndWeight": { - "dimensions": [ - "63.0 mm (w)", - "123.9 mm (h)", - "10.88 mm (d)" - ], - "weight": "129.0 grams" - }, - "storage": { - "flash": "16384MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json deleted file mode 100644 index 339b94fbb5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json +++ /dev/null @@ -1,155 +0,0 @@ -[ - { - "age": 0, - "id": "motorola-xoom-with-wi-fi", - "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "name": "Motorola XOOM\u2122 with Wi-Fi", - "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 1, - "id": "motorola-xoom", - "imageUrl": "img/phones/motorola-xoom.0.jpg", - "name": "MOTOROLA XOOM\u2122", - "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 2, - "carrier": "AT&T", - "id": "motorola-atrix-4g", - "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", - "name": "MOTOROLA ATRIX\u2122 4G", - "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." - }, - { - "age": 3, - "id": "dell-streak-7", - "imageUrl": "img/phones/dell-streak-7.0.jpg", - "name": "Dell Streak 7", - "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." - }, - { - "age": 4, - "carrier": "Cellular South", - "id": "samsung-gem", - "imageUrl": "img/phones/samsung-gem.0.jpg", - "name": "Samsung Gem\u2122", - "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." - }, - { - "age": 5, - "carrier": "Dell", - "id": "dell-venue", - "imageUrl": "img/phones/dell-venue.0.jpg", - "name": "Dell Venue", - "snippet": "The Dell Venue; Your Personal Express Lane to Everything" - }, - { - "age": 6, - "carrier": "Best Buy", - "id": "nexus-s", - "imageUrl": "img/phones/nexus-s.0.jpg", - "name": "Nexus S", - "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." - }, - { - "age": 7, - "carrier": "Cellular South", - "id": "lg-axis", - "imageUrl": "img/phones/lg-axis.0.jpg", - "name": "LG Axis", - "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" - }, - { - "age": 8, - "id": "samsung-galaxy-tab", - "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", - "name": "Samsung Galaxy Tab\u2122", - "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." - }, - { - "age": 9, - "carrier": "Cellular South", - "id": "samsung-showcase-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", - "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" - }, - { - "age": 10, - "carrier": "Verizon", - "id": "droid-2-global-by-motorola", - "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", - "name": "DROID\u2122 2 Global by Motorola", - "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." - }, - { - "age": 11, - "carrier": "Verizon", - "id": "droid-pro-by-motorola", - "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", - "name": "DROID\u2122 Pro by Motorola", - "snippet": "The next generation of DOES." - }, - { - "age": 12, - "carrier": "AT&T", - "id": "motorola-bravo-with-motoblur", - "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", - "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", - "snippet": "An experience to cheer about." - }, - { - "age": 13, - "carrier": "T-Mobile", - "id": "motorola-defy-with-motoblur", - "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", - "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", - "snippet": "Are you ready for everything life throws your way?" - }, - { - "age": 14, - "carrier": "T-Mobile", - "id": "t-mobile-mytouch-4g", - "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", - "name": "T-Mobile myTouch 4G", - "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." - }, - { - "age": 15, - "carrier": "US Cellular", - "id": "samsung-mesmerize-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", - "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" - }, - { - "age": 16, - "carrier": "Sprint", - "id": "sanyo-zio", - "imageUrl": "img/phones/sanyo-zio.0.jpg", - "name": "SANYO ZIO", - "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." - }, - { - "age": 17, - "id": "samsung-transform", - "imageUrl": "img/phones/samsung-transform.0.jpg", - "name": "Samsung Transform\u2122", - "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." - }, - { - "age": 18, - "id": "t-mobile-g2", - "imageUrl": "img/phones/t-mobile-g2.0.jpg", - "name": "T-Mobile G2", - "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." - }, - { - "age": 19, - "id": "motorola-charm-with-motoblur", - "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", - "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", - "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." - } -] diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json deleted file mode 100644 index e59a7403a0..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "open": false, - "logLevel": "silent", - "port": 8080, - "server": { - "baseDir": "aot", - "routes": { - "/node_modules": "node_modules" - }, - "middleware": { - "0": null - } - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js deleted file mode 100644 index a857af085c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -var fsExtra = require('fs-extra'); -var resources = [ - // polyfills - 'node_modules/core-js/client/shim.min.js', - 'node_modules/zone.js/dist/zone.min.js', - // css - 'app/app.css', - 'app/app.animations.css', - // images and json files - 'app/img/', - 'app/phones/', - // app files - 'app/app.module.ajs.js', - 'app/app.config.js', - 'app/app.animations.js', - 'app/core/core.module.js', - 'app/core/phone/phone.module.js', - 'app/phone-list/phone-list.module.js', - 'app/phone-detail/phone-detail.module.js' -]; -resources.map(function(sourcePath) { - var destPath = `aot/${sourcePath}`; - fsExtra.copySync(sourcePath, destPath); -}); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/docs_app/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts deleted file mode 100644 index 69e57d7151..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts +++ /dev/null @@ -1,103 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -// Angular E2E Testing Guide: -// https://docs.angularjs.org/guide/e2e-testing - -describe('PhoneCat Application', function() { - - it('should redirect `index.html` to `index.html#!/phones', function() { - browser.get('index.html'); - browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. - expect(browser.getCurrentUrl()).toMatch(/\/phones$/); - }); - - describe('View: Phone list', function() { - - beforeEach(function() { - browser.get('index.html#!/phones'); - }); - - it('should filter the phone list as a user types into the search box', function() { - let phoneList = element.all(by.css('.phones li')); - let query = element(by.css('input')); - - expect(phoneList.count()).toBe(20); - - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); - - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); - }); - - it('should be possible to control phone order via the drop-down menu', function() { - let queryField = element(by.css('input')); - let orderSelect = element(by.css('select')); - let nameOption = orderSelect.element(by.css('option[value="name"]')); - let phoneNameColumn = element.all(by.css('.phones .name')); - - function getNames() { - return phoneNameColumn.map(function(elem) { - return elem.getText(); - }); - } - - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - - expect(getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); - - nameOption.click(); - - expect(getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); - }); - - it('should render phone specific links', function() { - let query = element(by.css('input')); - query.sendKeys('nexus'); - - element.all(by.css('.phones li a')).first().click(); - browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. - expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/); - }); - - }); - - describe('View: Phone detail', function() { - - beforeEach(function() { - browser.get('index.html#!/phones/nexus-s'); - }); - - it('should display the `nexus-s` page', function() { - expect(element(by.css('h1')).getText()).toBe('Nexus S'); - }); - - it('should display the first phone image as the main phone image', function() { - let mainImage = element(by.css('img.phone.selected')); - - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - it('should swap the main image when clicking on a thumbnail image', function() { - let mainImage = element(by.css('img.phone.selected')); - let thumbnails = element.all(by.css('.phone-thumbs img')); - - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/example-config.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/example-config.json deleted file mode 100644 index a76722119f..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:upgrade", - "run": "serve:upgrade", - "projectType": "systemjs" -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/index.html b/docs_app/content/examples/upgrade-phonecat-2-hybrid/index.html deleted file mode 100644 index f747e641e0..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - - - diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js deleted file mode 100644 index 1c4cf57dd9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js +++ /dev/null @@ -1,90 +0,0 @@ -// #docregion -// /*global jasmine, __karma__, window*/ -Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. - -// Uncomment to get full stacktrace output. Sometimes helpful, usually not. -// Error.stackTraceLimit = Infinity; // - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; - -var builtPath = '/base/app/'; - -__karma__.loaded = function () { }; - -function isJsFile(path) { - return path.slice(-3) == '.js'; -} - -function isSpecFile(path) { - return /\.spec\.(.*\.)?js$/.test(path); -} - -function isBuiltFile(path) { - return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath); -} - -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); - -System.config({ - baseURL: '/base', - // Extend usual application package list with test folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, - - // Assume npm: is set in `paths` in systemjs.config - // Map the angular testing umd bundles - map: { - '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', - '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', - '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js', - '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', - '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', - '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', - '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', - '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', - }, -}); - -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); - -/** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras() { - return System.import('systemjs.config.extras.js') - .catch(function (reason) { - console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' - ); - console.log(reason); - }); -} - -function initTestBed() { - return Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; - var browserTesting = providers[1]; - - coreTesting.TestBed.initTestEnvironment( - browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }); -} - -// Import all spec files and start karma -function initTesting() { - return Promise.all( - allSpecFiles.map(function (moduleName) { - return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js deleted file mode 100644 index 9de40f6c9e..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js +++ /dev/null @@ -1,97 +0,0 @@ -// #docregion -// /*global jasmine, __karma__, window*/ -Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. - -// Uncomment to get full stacktrace output. Sometimes helpful, usually not. -// Error.stackTraceLimit = Infinity; // - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; - -// builtPaths: root paths for output ("built") files -// get from karma.config.js, then prefix with '/src/' (default is 'app/') -var builtPaths = (__karma__.config.builtPaths || ['src/']) - .map(function (p) { return '/base/' + p;}); - -__karma__.loaded = function () { }; - -function isJsFile(path) { - return path.slice(-3) == '.js'; -} - -function isSpecFile(path) { - return /\.spec\.(.*\.)?js$/.test(path); -} - -// Is a "built" file if is JavaScript file in one of the "built" folders -function isBuiltFile(path) { - return isJsFile(path) && - builtPaths.reduce(function (keep, bp) { - return keep || (path.substr(0, bp.length) === bp); - }, false); -} - -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); - -System.config({ - baseURL: 'base/src', - // Extend usual application package list with testing folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, - - // Assume npm: is set in `paths` in systemjs.config - // Map the angular testing umd bundles - map: { - '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', - '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', - '@angular/common/http/testing': 'npm:@angular/common/bundles/common-http-testing.umd.js', - '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', - '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', - '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', - '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', - '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', - }, -}); - -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); - -/** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras() { - return System.import('systemjs.config.extras.js') - .catch(function (reason) { - console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' - ); - console.log(reason); - }); -} - -function initTestBed() { - return Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; - var browserTesting = providers[1]; - - coreTesting.TestBed.initTestEnvironment( - browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }); -} - -// Import all spec files and start karma -function initTesting() { - return Promise.all( - allSpecFiles.map(function (moduleName) { - return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js deleted file mode 100644 index 5d5a8caaae..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js +++ /dev/null @@ -1,73 +0,0 @@ -//jshint strict: false -module.exports = function (config) { - config.set({ - - // #docregion basepath - basePath: './', - // #enddocregion basepath - - files: [ - 'https://code.angularjs.org/1.5.5/angular.js', - 'https://code.angularjs.org/1.5.5/angular-animate.js', - 'https://code.angularjs.org/1.5.5/angular-resource.js', - 'https://code.angularjs.org/1.5.5/angular-route.js', - 'https://code.angularjs.org/1.5.5/angular-mocks.js', - - // #docregion files - // System.js for module loading - 'node_modules/systemjs/dist/system.src.js', - - // Polyfills - 'node_modules/core-js/client/shim.js', - - // zone.js - 'node_modules/zone.js/dist/zone.js', - 'node_modules/zone.js/dist/long-stack-trace-zone.js', - 'node_modules/zone.js/dist/proxy.js', - 'node_modules/zone.js/dist/sync-test.js', - 'node_modules/zone.js/dist/jasmine-patch.js', - 'node_modules/zone.js/dist/async-test.js', - 'node_modules/zone.js/dist/fake-async-test.js', - - // RxJs. - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - - // Angular itself and the testing library - {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, - {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, - - {pattern: 'systemjs.config.js', included: false, watched: false}, - 'karma-test-shim.js', - - {pattern: 'app/**/*.module.js', included: false, watched: true}, - {pattern: 'app/*!(.module|.spec).js', included: false, watched: true}, - {pattern: 'app/!(bower_components)/**/*!(.module|.spec).js', included: false, watched: true}, - {pattern: 'app/**/*.spec.js', included: false, watched: true}, - - {pattern: '**/*.html', included: false, watched: true}, - // #enddocregion files - ], - - // #docregion html - // proxied base paths for loading assets - proxies: { - // required for component assets fetched by Angular's compiler - '/phone-detail': '/base/app/phone-detail', - '/phone-list': '/base/app/phone-list' - }, - // #enddocregion html - - autoWatch: true, - - frameworks: ['jasmine'], - - browsers: ['Chrome'], - - plugins: [ - 'karma-chrome-launcher', - 'karma-jasmine' - ] - - }); -}; diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js deleted file mode 100644 index 86c0e8c0ac..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js +++ /dev/null @@ -1,100 +0,0 @@ -// #docregion -module.exports = function (config) { - var appBase = 'src/'; // transpiled app JS and map files - var appAssets = '/base/app/'; // component assets fetched by Angular's compiler - - // Testing helpers (optional) are conventionally in a folder called `testing` - var testingBase = 'src/testing/'; // transpiled test JS and map files - var testingSrcBase = 'src/testing/'; // test source TS files - - config.set({ - basePath: '', - frameworks: ['jasmine'], - - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter') - ], - - client: { - builtPaths: [appBase, testingBase], // add more spec base paths as needed - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - - customLaunchers: { - // From the CLI. Not used here but interesting - // chrome setup for travis CI using chromium - Chrome_travis_ci: { - base: 'Chrome', - flags: ['--no-sandbox'] - } - }, - - files: [ - // System.js for module loading - 'node_modules/systemjs/dist/system.src.js', - - // Polyfills - 'node_modules/core-js/client/shim.js', - - // zone.js - 'node_modules/zone.js/dist/zone.js', - 'node_modules/zone.js/dist/long-stack-trace-zone.js', - 'node_modules/zone.js/dist/proxy.js', - 'node_modules/zone.js/dist/sync-test.js', - 'node_modules/zone.js/dist/jasmine-patch.js', - 'node_modules/zone.js/dist/async-test.js', - 'node_modules/zone.js/dist/fake-async-test.js', - - // RxJs - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - - // tslib (TS helper fns such as `__extends`) - { pattern: 'node_modules/tslib/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/tslib/**/*.js.map', included: false, watched: false }, - - // Paths loaded via module imports: - // Angular itself - { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, - - { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, - { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, - 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels - - // transpiled application & spec code paths loaded via module imports - { pattern: appBase + '**/*.js', included: false, watched: true }, - { pattern: testingBase + '**/*.js', included: false, watched: true }, - - // Asset (HTML & CSS) paths loaded via Angular's component compiler - // (these paths need to be rewritten, see proxies section) - { pattern: appBase + '**/*.html', included: false, watched: true }, - { pattern: appBase + '**/*.css', included: false, watched: true }, - - // Paths for debugging with source maps in dev tools - { pattern: appBase + '**/*.ts', included: false, watched: false }, - { pattern: appBase + '**/*.js.map', included: false, watched: false }, - { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, - { pattern: testingBase + '**/*.js.map', included: false, watched: false} - ], - - // Proxied base paths for loading assets - proxies: { - // required for modules fetched by SystemJS - '/base/src/node_modules/': '/base/node_modules/' - }, - - exclude: [], - preprocessors: {}, - reporters: ['progress', 'kjhtml'], - - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false - }); -}; diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js deleted file mode 100644 index aeb227689c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import rollup from 'rollup' -import nodeResolve from 'rollup-plugin-node-resolve' -import commonjs from 'rollup-plugin-commonjs'; -import uglify from 'rollup-plugin-uglify' - -//paths are relative to the execution path -export default { - entry: 'app/main-aot.js', - dest: 'aot/dist/build.js', // output a single application bundle - sourceMap: true, - sourceMapFile: 'aot/dist/build.js.map', - format: 'iife', - plugins: [ - nodeResolve({jsnext: true, module: true}), - commonjs({ - include: ['node_modules/rxjs/**'] - }), - uglify() - ] -} diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh b/docs_app/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh deleted file mode 100644 index 239e5ff7d7..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh +++ /dev/null @@ -1,7 +0,0 @@ -## The boilerplate Karma configuration won't work with AngularJS tests since -## a specific loading configuration is needed for them. -## We keep one in karma.conf.ajs.js. This scripts runs the AngularJS tests with -## that config. - -PATH=$(npm bin):$PATH -tsc && karma start karma.conf.ajs.js diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js b/docs_app/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js deleted file mode 100644 index 8cde9dab12..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js +++ /dev/null @@ -1,59 +0,0 @@ -/** - * System configuration for Angular samples - * Adjust as necessary for your application needs. - */ -(function (global) { - // #docregion paths - System.config({ - paths: { - // paths serve as alias - 'npm:': '/node_modules/' - }, - map: { - 'ng-loader': '../src/systemjs-angular-loader.js', - app: '/app', - // #enddocregion paths - // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - // #docregion paths - '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', - // #enddocregion paths - - // other libraries - 'rxjs': 'npm:rxjs', - 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', - // #docregion paths - }, - // #enddocregion paths - - // packages tells the System loader how to load when no filename and/or no extension - packages: { - 'app': { - main: './main.js', - defaultExtension: 'js', - meta: { - './*.js': { - loader: 'ng-loader' - } - } - }, - 'angular-in-memory-web-api': { - main: './index.js', - defaultExtension: 'js' - }, - 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs': { main: 'index.js', defaultExtension: 'js' }, - } - }); -})(this); diff --git a/docs_app/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json b/docs_app/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json deleted file mode 100644 index 91807a25a9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "es2015", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "removeComments": false, - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "./node_modules/@types/" - ] - }, - - "files": [ - "app/app.module.ts", - "app/main-aot.ts" - ], - - "angularCompilerOptions": { - "genDir": "aot", - "skipMetadataEmit" : true - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/README.md b/docs_app/content/examples/upgrade-phonecat-3-final/README.md deleted file mode 100644 index 7448da44e6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/README.md +++ /dev/null @@ -1,24 +0,0 @@ -This is the Angular Phonecat application adjusted to fit our boilerplate project -structure. - -The following changes from vanilla Phonecat are applied: - -* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate - Karma config is not compatible with the way tests in this project need to be run. - The shell script run-unit-tests.sh can be used to run the unit tests. -* E2E tests have been moved to the parent directory, where `run-e2e-tests` can - discover and run them along with all the other examples. -* Most of the phone JSON and image data removed in the interest of keeping - repo weight down. Keeping enough to retain testability of the app. - -## Running the app - -Start like any example - - npm run start - -## Running E2E tests - -Like for any example (at the project root): - - gulp run-e2e-tests --filter=phonecat-3 diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts deleted file mode 100644 index f64d82e253..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/app-routing.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common'; - -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -import { PhoneListComponent } from './phone-list/phone-list.component'; - -const routes: Routes = [ - { path: '', redirectTo: 'phones', pathMatch: 'full' }, - { path: 'phones', component: PhoneListComponent }, - { path: 'phones/:phoneId', component: PhoneDetailComponent } -]; - -@NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ], - providers: [ - { provide: APP_BASE_HREF, useValue: '!' }, - { provide: LocationStrategy, useClass: HashLocationStrategy }, - ] -}) -export class AppRoutingModule { } diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.component.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/app.component.ts deleted file mode 100644 index c476614121..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'phonecat-app', - template: '' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.css b/docs_app/content/examples/upgrade-phonecat-3-final/app/app.css deleted file mode 100644 index f4b45b02a5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.css +++ /dev/null @@ -1,93 +0,0 @@ -body { - padding: 20px; -} - -h1 { - border-bottom: 1px solid gray; - margin-top: 0; -} - -/* View: Phone list */ -.phones { - list-style: none; -} - -.phones li { - clear: both; - height: 115px; - padding-top: 15px; -} - -.thumb { - float: left; - height: 100px; - margin: -0.5em 1em 1.5em 0; - padding-bottom: 1em; - width: 100px; -} - -/* View: Phone detail */ -.phone { - background-color: white; - display: none; - float: left; - height: 400px; - margin-bottom: 2em; - margin-right: 3em; - padding: 2em; - width: 400px; -} - -.phone:first-child { - display: block; -} - -.phone-images { - background-color: white; - float: left; - height: 450px; - overflow: hidden; - position: relative; - width: 450px; -} - -.phone-thumbs { - list-style: none; - margin: 0; -} - -.phone-thumbs img { - height: 100px; - padding: 1em; - width: 100px; -} - -.phone-thumbs li { - background-color: white; - border: 1px solid black; - cursor: pointer; - display: inline-block; - margin: 1em; -} - -.specs { - clear: both; - list-style: none; - margin: 0; - padding: 0; -} - -.specs dt { - font-weight: bold; -} - -.specs > li { - display: inline-block; - vertical-align: top; - width: 200px; -} - -.specs > li > span { - font-size: 1.2em; - font-weight: bold; -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.module.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/app.module.ts deleted file mode 100644 index 607ecab8c9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/app.module.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { CheckmarkPipe } from './core/checkmark/checkmark.pipe'; -import { Phone } from './core/phone/phone.service'; -import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; -import { PhoneListComponent } from './phone-list/phone-list.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpModule, - AppRoutingModule - ], - declarations: [ - AppComponent, - PhoneListComponent, - CheckmarkPipe, - PhoneDetailComponent - ], - providers: [ - Phone - ], - // #docregion bootstrap - bootstrap: [ AppComponent ] - // #enddocregion bootstrap -}) -export class AppModule {} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts deleted file mode 100644 index 75150500a6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.spec.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { CheckmarkPipe } from './checkmark.pipe'; - -describe('CheckmarkPipe', function() { - - it('should convert boolean values to unicode checkmark or cross', function () { - const checkmarkPipe = new CheckmarkPipe(); - expect(checkmarkPipe.transform(true)).toBe('\u2713'); - expect(checkmarkPipe.transform(false)).toBe('\u2718'); - }); -}); diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts deleted file mode 100644 index 888017e15c..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/checkmark/checkmark.pipe.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({name: 'checkmark'}) -export class CheckmarkPipe implements PipeTransform { - transform(input: boolean) { - return input ? '\u2713' : '\u2718'; - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts deleted file mode 100644 index e3a422965b..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { inject, TestBed } from '@angular/core/testing'; -import { - Http, - BaseRequestOptions, - ResponseOptions, - Response -} from '@angular/http'; -import { MockBackend, MockConnection } from '@angular/http/testing'; -import { Phone, PhoneData } from './phone.service'; - -describe('Phone', function() { - let phone: Phone; - let phonesData: PhoneData[] = [ - {name: 'Phone X', snippet: '', images: []}, - {name: 'Phone Y', snippet: '', images: []}, - {name: 'Phone Z', snippet: '', images: []} - ]; - let mockBackend: MockBackend; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [ - Phone, - MockBackend, - BaseRequestOptions, - { provide: Http, - useFactory: (backend: MockBackend, options: BaseRequestOptions) => new Http(backend, options), - deps: [MockBackend, BaseRequestOptions] - } - ] - }); - }); - - beforeEach(inject([MockBackend, Phone], (_mockBackend_: MockBackend, _phone_: Phone) => { - mockBackend = _mockBackend_; - phone = _phone_; - })); - - it('should fetch the phones data from `/phones/phones.json`', (done: () => void) => { - mockBackend.connections.subscribe((conn: MockConnection) => { - conn.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(phonesData)}))); - }); - phone.query().subscribe(result => { - expect(result).toEqual(phonesData); - done(); - }); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts deleted file mode 100644 index df2cac0d9d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/core/phone/phone.service.ts +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; - -export interface PhoneData { - name: string; - snippet: string; - images: string[]; -} - -@Injectable() -export class Phone { - constructor(private http: Http) { } - query(): Observable { - return this.http.get(`phones/phones.json`).pipe( - map((res: Response) => res.json()) - ); - } - get(id: string): Observable { - return this.http.get(`phones/${id}.json`).pipe( - map((res: Response) => res.json()) - ); - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/main.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/main.ts deleted file mode 100644 index 08be7a99ba..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/main.ts +++ /dev/null @@ -1,10 +0,0 @@ -// #docregion -// #docregion imports -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app.module'; -// #enddocregion imports - -// #docregion bootstrap -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion bootstrap diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts deleted file mode 100644 index 260794b98b..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts +++ /dev/null @@ -1,59 +0,0 @@ -// #docregion -// #docregion activatedroute -import { ActivatedRoute } from '@angular/router'; - -// #enddocregion activatedroute -import { Observable } from 'rxjs'; - -import { async, TestBed } from '@angular/core/testing'; - -import { PhoneDetailComponent } from './phone-detail.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { CheckmarkPipe } from '../core/checkmark/checkmark.pipe'; - -function xyzPhoneData(): PhoneData { - return { - name: 'phone xyz', - snippet: '', - images: ['image/url1.png', 'image/url2.png'] - }; -} - -class MockPhone { - get(id: string): Observable { - return Observable.of(xyzPhoneData()); - } -} - -// #docregion activatedroute - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -// #enddocregion activatedroute - -describe('PhoneDetailComponent', () => { - - // #docregion activatedroute - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CheckmarkPipe, PhoneDetailComponent ], - providers: [ - { provide: Phone, useClass: MockPhone }, - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) } - ] - }) - .compileComponents(); - })); - // #enddocregion activatedroute - - it('should fetch phone detail', () => { - const fixture = TestBed.createComponent(PhoneDetailComponent); - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain(xyzPhoneData().name); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index 95aeca20e0..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - selector: 'phone-detail', - templateUrl: './phone-detail.template.html' -}) -export class PhoneDetailComponent { - phone: PhoneData; - mainImageUrl: string; - - constructor(activatedRoute: ActivatedRoute, phone: Phone) { - phone.get(activatedRoute.snapshot.paramMap.get('phoneId')) - .subscribe((p: PhoneData) => { - this.phone = p; - this.setImage(p.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html deleted file mode 100644 index 4068532de9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html +++ /dev/null @@ -1,120 +0,0 @@ - -
    -
    - -
    - -

    {{phone.name}}

    - -

    {{phone.description}}

    - -
      -
    • - -
      • -
    - -
      -
    • - Availability and Networks -
      -
      Availability
      -
      {{availability}}
      -
      -
      • -
    • - Battery -
      -
      Type
      -
      {{phone.battery?.type}}
      -
      Talk Time
      -
      {{phone.battery?.talkTime}}
      -
      Standby time (max)
      -
      {{phone.battery?.standbyTime}}
      -
      -
      • -
    • - Storage and Memory -
      -
      RAM
      -
      {{phone.storage?.ram}}
      -
      Internal Storage
      -
      {{phone.storage?.flash}}
      -
      -
      • -
    • - Connectivity -
      -
      Network Support
      -
      {{phone.connectivity?.cell}}
      -
      WiFi
      -
      {{phone.connectivity?.wifi}}
      -
      Bluetooth
      -
      {{phone.connectivity?.bluetooth}}
      -
      Infrared
      -
      {{phone.connectivity?.infrared | checkmark}}
      -
      GPS
      -
      {{phone.connectivity?.gps | checkmark}}
      -
      -
      • -
    • - Android -
      -
      OS Version
      -
      {{phone.android?.os}}
      -
      UI
      -
      {{phone.android?.ui}}
      -
      -
      • -
    • - Size and Weight -
      -
      Dimensions
      -
      {{dim}}
      -
      Weight
      -
      {{phone.sizeAndWeight?.weight}}
      -
      -
      • -
    • - Display -
      -
      Screen size
      -
      {{phone.display?.screenSize}}
      -
      Screen resolution
      -
      {{phone.display?.screenResolution}}
      -
      Touch screen
      -
      {{phone.display?.touchScreen | checkmark}}
      -
      -
      • -
    • - Hardware -
      -
      CPU
      -
      {{phone.hardware?.cpu}}
      -
      USB
      -
      {{phone.hardware?.usb}}
      -
      Audio / headphone jack
      -
      {{phone.hardware?.audioJack}}
      -
      FM Radio
      -
      {{phone.hardware?.fmRadio | checkmark}}
      -
      Accelerometer
      -
      {{phone.hardware?.accelerometer | checkmark}}
      -
      -
      • -
    • - Camera -
      -
      Primary
      -
      {{phone.camera?.primary}}
      -
      Features
      -
      {{phone.camera?.features?.join(', ')}}
      -
      -
      • -
    • - Additional Features -
      {{phone.additionalFeatures}}
      -
      • -
    -
    diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts deleted file mode 100644 index 244c898461..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.spec.ts +++ /dev/null @@ -1,71 +0,0 @@ -/* tslint:disable */ -// #docregion routestuff -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { Observable } from 'rxjs'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { SpyLocation } from '@angular/common/testing'; - -import { PhoneListComponent } from './phone-list.component'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -// #enddocregion routestuff - -class ActivatedRouteMock { - constructor(public snapshot: any) {} -} - -class MockPhone { - query(): Observable { - return Observable.of([ - {name: 'Nexus S', snippet: '', images: []}, - {name: 'Motorola DROID', snippet: '', images: []} - ]); - } -} - -let fixture: ComponentFixture; - -describe('PhoneList', () => { - - // #docregion routestuff - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PhoneListComponent ], - providers: [ - { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }, - { provide: Location, useClass: SpyLocation }, - { provide: Phone, useClass: MockPhone }, - ], - schemas: [ NO_ERRORS_SCHEMA ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PhoneListComponent); - }); - // #enddocregion routestuff - - it('should create "phones" model with 2 phones fetched from xhr', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelectorAll('.phone-list-item').length).toBe(2); - expect( - compiled.querySelector('.phone-list-item:nth-child(1)').textContent - ).toContain('Motorola DROID'); - expect( - compiled.querySelector('.phone-list-item:nth-child(2)').textContent - ).toContain('Nexus S'); - }); - - xit('should set the default value of orderProp model', () => { - fixture.detectChanges(); - let compiled = fixture.debugElement.nativeElement; - expect( - compiled.querySelector('select option:last-child').selected - ).toBe(true); - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts deleted file mode 100644 index 6cfd172027..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - selector: 'phone-list', - templateUrl: './phone-list.template.html', -}) -export class PhoneListComponent { - phones: PhoneData[]; - query: string; - orderProp: string; - - constructor(phone: Phone) { - phone.query().subscribe(phones => { - this.phones = phones; - }); - this.orderProp = 'age'; - } - - getPhones(): PhoneData[] { - return this.sortPhones(this.filterPhones(this.phones)); - } - - private filterPhones(phones: PhoneData[]) { - if (phones && this.query) { - return phones.filter(phone => { - let name = phone.name.toLowerCase(); - let snippet = phone.snippet.toLowerCase(); - return name.indexOf(this.query) >= 0 || snippet.indexOf(this.query) >= 0; - }); - } - return phones; - } - - private sortPhones(phones: PhoneData[]) { - if (phones && this.orderProp) { - return phones - .slice(0) // Make a copy - .sort((a, b) => { - if (a[this.orderProp] < b[this.orderProp]) { - return -1; - } else if ([b[this.orderProp] < a[this.orderProp]]) { - return 1; - } else { - return 0; - } - }); - } - return phones; - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html b/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html deleted file mode 100644 index b4a994b297..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phone-list/phone-list.template.html +++ /dev/null @@ -1,40 +0,0 @@ -
    -
    -
    - - - -

    - Search: - -

    - -

    - Sort by: - -

    - - -
    -
    - - - - - - -
    -
    -
    diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json deleted file mode 100644 index a32eb6ff98..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/dell-streak-7.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - "additionalFeatures": "Front Facing 1.3MP Camera", - "android": { - "os": "Android 2.2", - "ui": "Dell Stage" - }, - "availability": [ - "T-Mobile" - ], - "battery": { - "standbyTime": "", - "talkTime": "", - "type": "Lithium Ion (Li-Ion) (2780 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "T-mobile HSPA+ @ 2100/1900/AWS/850 MHz", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g" - }, - "description": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around. Android\u2122 2.2-based tablet with over-the-air upgrade capability for future OS releases. A vibrant 7-inch, multitouch display with full Adobe\u00ae Flash 10.1 pre-installed. Includes a 1.3 MP front-facing camera for face-to-face chats on popular services such as Qik or Skype. 16 GB of internal storage, plus Wi-Fi, Bluetooth and built-in GPS keeps you in touch with the world around you. Connect on your terms. Save with 2-year contract or flexibility with prepaid pay-as-you-go plans", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "7.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "nVidia Tegra T20", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "dell-streak-7", - "images": [ - "img/phones/dell-streak-7.0.jpg", - "img/phones/dell-streak-7.1.jpg", - "img/phones/dell-streak-7.2.jpg", - "img/phones/dell-streak-7.3.jpg", - "img/phones/dell-streak-7.4.jpg" - ], - "name": "Dell Streak 7", - "sizeAndWeight": { - "dimensions": [ - "199.9 mm (w)", - "119.8 mm (h)", - "12.4 mm (d)" - ], - "weight": "450.0 grams" - }, - "storage": { - "flash": "16000MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json deleted file mode 100644 index ccca00e3b2..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-atrix-4g.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "", - "android": { - "os": "Android 2.2", - "ui": "MOTOBLUR" - }, - "availability": [ - "AT&T" - ], - "battery": { - "standbyTime": "400 hours", - "talkTime": "5 hours", - "type": "Lithium Ion (Li-Ion) (1930 mAH)" - }, - "camera": { - "features": [ - "" - ], - "primary": "" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "WCDMA 850/1900/2100, GSM 850/900/1800/1900, HSDPA 14Mbps (Category 10) Edge Class 12, GPRS Class 12, eCompass, AGPS", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA ATRIX 4G gives you dual-core processing power and the revolutionary webtop application. With webtop and a compatible Motorola docking station, sold separately, you can surf the Internet with a full Firefox browser, create and edit docs, or access multimedia on a large screen almost anywhere.", - "display": { - "screenResolution": "QHD (960 x 540)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-atrix-4g", - "images": [ - "img/phones/motorola-atrix-4g.0.jpg", - "img/phones/motorola-atrix-4g.1.jpg", - "img/phones/motorola-atrix-4g.2.jpg", - "img/phones/motorola-atrix-4g.3.jpg" - ], - "name": "MOTOROLA ATRIX\u2122 4G", - "sizeAndWeight": { - "dimensions": [ - "63.5 mm (w)", - "117.75 mm (h)", - "10.95 mm (d)" - ], - "weight": "135.0 grams" - }, - "storage": { - "flash": "", - "ram": "" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json deleted file mode 100644 index 4ba9c8d5b5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom-with-wi-fi.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "additionalFeatures": "Sensors: proximity, ambient light, barometer, gyroscope", - "android": { - "os": "Android 3.0", - "ui": "Honeycomb" - }, - "availability": [ - "" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other ( mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Motorola XOOM with Wi-Fi has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom-with-wi-fi", - "images": [ - "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "img/phones/motorola-xoom-with-wi-fi.1.jpg", - "img/phones/motorola-xoom-with-wi-fi.2.jpg", - "img/phones/motorola-xoom-with-wi-fi.3.jpg", - "img/phones/motorola-xoom-with-wi-fi.4.jpg", - "img/phones/motorola-xoom-with-wi-fi.5.jpg" - ], - "name": "Motorola XOOM\u2122 with Wi-Fi", - "sizeAndWeight": { - "dimensions": [ - "249.1 mm (w)", - "167.8 mm (h)", - "12.9 mm (d)" - ], - "weight": "708.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json deleted file mode 100644 index f0f0c8711d..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/motorola-xoom.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "additionalFeatures": "Front-facing camera. Sensors: proximity, ambient light, barometer, gyroscope.", - "android": { - "os": "Android 3.0", - "ui": "Android" - }, - "availability": [ - "Verizon" - ], - "battery": { - "standbyTime": "336 hours", - "talkTime": "24 hours", - "type": "Other (3250 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "CDMA 800 /1900 LTE 700, Rx diversity in all bands", - "gps": true, - "infrared": false, - "wifi": "802.11 a/b/g/n" - }, - "description": "MOTOROLA XOOM has a super-powerful dual-core processor and Android\u2122 3.0 (Honeycomb) \u2014 the Android platform designed specifically for tablets. With its 10.1-inch HD widescreen display, you\u2019ll enjoy HD video in a thin, light, powerful and upgradeable tablet.", - "display": { - "screenResolution": "WXGA (1200 x 800)", - "screenSize": "10.1 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1 GHz Dual Core Tegra 2", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "motorola-xoom", - "images": [ - "img/phones/motorola-xoom.0.jpg", - "img/phones/motorola-xoom.1.jpg", - "img/phones/motorola-xoom.2.jpg" - ], - "name": "MOTOROLA XOOM\u2122", - "sizeAndWeight": { - "dimensions": [ - "249.0 mm (w)", - "168.0 mm (h)", - "12.7 mm (d)" - ], - "weight": "726.0 grams" - }, - "storage": { - "flash": "32000MB", - "ram": "1000MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json deleted file mode 100644 index 5e712e2ff8..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/nexus-s.json +++ /dev/null @@ -1,69 +0,0 @@ -{ - "additionalFeatures": "Contour Display, Near Field Communications (NFC), Three-axis gyroscope, Anti-fingerprint display coating, Internet Calling support (VoIP/SIP)", - "android": { - "os": "Android 2.3", - "ui": "Android" - }, - "availability": [ - "M1,", - "O2,", - "Orange,", - "Singtel,", - "StarHub,", - "T-Mobile,", - "Vodafone" - ], - "battery": { - "standbyTime": "428 hours", - "talkTime": "6 hours", - "type": "Lithium Ion (Li-Ion) (1500 mAH)" - }, - "camera": { - "features": [ - "Flash", - "Video" - ], - "primary": "5.0 megapixels" - }, - "connectivity": { - "bluetooth": "Bluetooth 2.1", - "cell": "Quad-band GSM: 850, 900, 1800, 1900\r\nTri-band HSPA: 900, 2100, 1700\r\nHSPA type: HSDPA (7.2Mbps) HSUPA (5.76Mbps)", - "gps": true, - "infrared": false, - "wifi": "802.11 b/g/n" - }, - "description": "Nexus S is the next generation of Nexus devices, co-developed by Google and Samsung. The latest Android platform (Gingerbread), paired with a 1 GHz Hummingbird processor and 16GB of memory, makes Nexus S one of the fastest phones on the market. It comes pre-installed with the best of Google apps and enabled with new and popular features like true multi-tasking, Wi-Fi hotspot, Internet Calling, NFC support, and full web browsing. With this device, users will also be the first to receive software upgrades and new Google mobile apps as soon as they become available. For more details, visit http://www.google.com/nexus.", - "display": { - "screenResolution": "WVGA (800 x 480)", - "screenSize": "4.0 inches", - "touchScreen": true - }, - "hardware": { - "accelerometer": true, - "audioJack": "3.5mm", - "cpu": "1GHz Cortex A8 (Hummingbird) processor", - "fmRadio": false, - "physicalKeyboard": false, - "usb": "USB 2.0" - }, - "id": "nexus-s", - "images": [ - "img/phones/nexus-s.0.jpg", - "img/phones/nexus-s.1.jpg", - "img/phones/nexus-s.2.jpg", - "img/phones/nexus-s.3.jpg" - ], - "name": "Nexus S", - "sizeAndWeight": { - "dimensions": [ - "63.0 mm (w)", - "123.9 mm (h)", - "10.88 mm (d)" - ], - "weight": "129.0 grams" - }, - "storage": { - "flash": "16384MB", - "ram": "512MB" - } -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/phones.json b/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/phones.json deleted file mode 100644 index 339b94fbb5..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/app/phones/phones.json +++ /dev/null @@ -1,155 +0,0 @@ -[ - { - "age": 0, - "id": "motorola-xoom-with-wi-fi", - "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", - "name": "Motorola XOOM\u2122 with Wi-Fi", - "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 1, - "id": "motorola-xoom", - "imageUrl": "img/phones/motorola-xoom.0.jpg", - "name": "MOTOROLA XOOM\u2122", - "snippet": "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)." - }, - { - "age": 2, - "carrier": "AT&T", - "id": "motorola-atrix-4g", - "imageUrl": "img/phones/motorola-atrix-4g.0.jpg", - "name": "MOTOROLA ATRIX\u2122 4G", - "snippet": "MOTOROLA ATRIX 4G the world's most powerful smartphone." - }, - { - "age": 3, - "id": "dell-streak-7", - "imageUrl": "img/phones/dell-streak-7.0.jpg", - "name": "Dell Streak 7", - "snippet": "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around." - }, - { - "age": 4, - "carrier": "Cellular South", - "id": "samsung-gem", - "imageUrl": "img/phones/samsung-gem.0.jpg", - "name": "Samsung Gem\u2122", - "snippet": "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price." - }, - { - "age": 5, - "carrier": "Dell", - "id": "dell-venue", - "imageUrl": "img/phones/dell-venue.0.jpg", - "name": "Dell Venue", - "snippet": "The Dell Venue; Your Personal Express Lane to Everything" - }, - { - "age": 6, - "carrier": "Best Buy", - "id": "nexus-s", - "imageUrl": "img/phones/nexus-s.0.jpg", - "name": "Nexus S", - "snippet": "Fast just got faster with Nexus S. A pure Google experience, Nexus S is the first phone to run Gingerbread (Android 2.3), the fastest version of Android yet." - }, - { - "age": 7, - "carrier": "Cellular South", - "id": "lg-axis", - "imageUrl": "img/phones/lg-axis.0.jpg", - "name": "LG Axis", - "snippet": "Android Powered, Google Maps Navigation, 5 Customizable Home Screens" - }, - { - "age": 8, - "id": "samsung-galaxy-tab", - "imageUrl": "img/phones/samsung-galaxy-tab.0.jpg", - "name": "Samsung Galaxy Tab\u2122", - "snippet": "Feel Free to Tab\u2122. The Samsung Galaxy Tab\u2122 brings you an ultra-mobile entertainment experience through its 7\u201d display, high-power processor and Adobe\u00ae Flash\u00ae Player compatibility." - }, - { - "age": 9, - "carrier": "Cellular South", - "id": "samsung-showcase-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg", - "name": "Samsung Showcase\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Showcase\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance, even outdoors" - }, - { - "age": 10, - "carrier": "Verizon", - "id": "droid-2-global-by-motorola", - "imageUrl": "img/phones/droid-2-global-by-motorola.0.jpg", - "name": "DROID\u2122 2 Global by Motorola", - "snippet": "The first smartphone with a 1.2 GHz processor and global capabilities." - }, - { - "age": 11, - "carrier": "Verizon", - "id": "droid-pro-by-motorola", - "imageUrl": "img/phones/droid-pro-by-motorola.0.jpg", - "name": "DROID\u2122 Pro by Motorola", - "snippet": "The next generation of DOES." - }, - { - "age": 12, - "carrier": "AT&T", - "id": "motorola-bravo-with-motoblur", - "imageUrl": "img/phones/motorola-bravo-with-motoblur.0.jpg", - "name": "MOTOROLA BRAVO\u2122 with MOTOBLUR\u2122", - "snippet": "An experience to cheer about." - }, - { - "age": 13, - "carrier": "T-Mobile", - "id": "motorola-defy-with-motoblur", - "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg", - "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122", - "snippet": "Are you ready for everything life throws your way?" - }, - { - "age": 14, - "carrier": "T-Mobile", - "id": "t-mobile-mytouch-4g", - "imageUrl": "img/phones/t-mobile-mytouch-4g.0.jpg", - "name": "T-Mobile myTouch 4G", - "snippet": "The T-Mobile myTouch 4G is a premium smartphone designed to deliver blazing fast 4G speeds so that you can video chat from practically anywhere, with or without Wi-Fi." - }, - { - "age": 15, - "carrier": "US Cellular", - "id": "samsung-mesmerize-a-galaxy-s-phone", - "imageUrl": "img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg", - "name": "Samsung Mesmerize\u2122 a Galaxy S\u2122 phone", - "snippet": "The Samsung Mesmerize\u2122 delivers a cinema quality experience like you\u2019ve never seen before. Its innovative 4\u201d touch display technology provides rich picture brilliance,even outdoors" - }, - { - "age": 16, - "carrier": "Sprint", - "id": "sanyo-zio", - "imageUrl": "img/phones/sanyo-zio.0.jpg", - "name": "SANYO ZIO", - "snippet": "The Sanyo Zio by Kyocera is an Android smartphone with a combination of ultra-sleek styling, strong performance and unprecedented value." - }, - { - "age": 17, - "id": "samsung-transform", - "imageUrl": "img/phones/samsung-transform.0.jpg", - "name": "Samsung Transform\u2122", - "snippet": "The Samsung Transform\u2122 brings you a fun way to customize your Android powered touch screen phone to just the way you like it through your favorite themed \u201cSprint ID Service Pack\u201d." - }, - { - "age": 18, - "id": "t-mobile-g2", - "imageUrl": "img/phones/t-mobile-g2.0.jpg", - "name": "T-Mobile G2", - "snippet": "The T-Mobile G2 with Google is the first smartphone built for 4G speeds on T-Mobile's new network. Get the information you need, faster than you ever thought possible." - }, - { - "age": 19, - "id": "motorola-charm-with-motoblur", - "imageUrl": "img/phones/motorola-charm-with-motoblur.0.jpg", - "name": "Motorola CHARM\u2122 with MOTOBLUR\u2122", - "snippet": "Motorola CHARM fits easily in your pocket or palm. Includes MOTOBLUR service." - } -] diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/e2e-spec.ts b/docs_app/content/examples/upgrade-phonecat-3-final/e2e-spec.ts deleted file mode 100644 index 6f47c54d02..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/e2e-spec.ts +++ /dev/null @@ -1,109 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -// Angular E2E Testing Guide: -// https://docs.angularjs.org/guide/e2e-testing - -describe('PhoneCat Application', function() { - - // #docregion redirect - it('should redirect `index.html` to `index.html#!/phones', function() { - browser.get('index.html'); - browser.waitForAngular(); - browser.getCurrentUrl().then(function(url: string) { - expect(url.endsWith('/phones')).toBe(true); - }); - }); - // #enddocregion redirect - - describe('View: Phone list', function() { - - beforeEach(function() { - browser.get('index.html#!/phones'); - }); - - it('should filter the phone list as a user types into the search box', function() { - let phoneList = element.all(by.css('.phones li')); - let query = element(by.css('input')); - - expect(phoneList.count()).toBe(20); - - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); - - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); - }); - - it('should be possible to control phone order via the drop-down menu', function() { - let queryField = element(by.css('input')); - let orderSelect = element(by.css('select')); - let nameOption = orderSelect.element(by.css('option[value="name"]')); - let phoneNameColumn = element.all(by.css('.phones .name')); - - function getNames() { - return phoneNameColumn.map(function(elem) { - return elem.getText(); - }); - } - - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - - expect(getNames()).toEqual([ - 'Motorola XOOM\u2122 with Wi-Fi', - 'MOTOROLA XOOM\u2122' - ]); - - nameOption.click(); - - expect(getNames()).toEqual([ - 'MOTOROLA XOOM\u2122', - 'Motorola XOOM\u2122 with Wi-Fi' - ]); - }); - - // #docregion links - it('should render phone specific links', function() { - let query = element(by.css('input')); - query.sendKeys('nexus'); - element.all(by.css('.phones li a')).first().click(); - browser.getCurrentUrl().then(function(url: string) { - expect(url.endsWith('/phones/nexus-s')).toBe(true); - }); - }); - // #enddocregion links - - }); - - describe('View: Phone detail', function() { - - beforeEach(function() { - browser.get('index.html#!/phones/nexus-s'); - }); - - it('should display the `nexus-s` page', function() { - expect(element(by.css('h1')).getText()).toBe('Nexus S'); - }); - - it('should display the first phone image as the main phone image', function() { - let mainImage = element(by.css('img.phone.selected')); - - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - it('should swap the main image when clicking on a thumbnail image', function() { - let mainImage = element(by.css('img.phone.selected')); - let thumbnails = element.all(by.css('.phone-thumbs img')); - - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); - }); - - }); - -}); diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/example-config.json b/docs_app/content/examples/upgrade-phonecat-3-final/example-config.json deleted file mode 100644 index a76722119f..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:upgrade", - "run": "serve:upgrade", - "projectType": "systemjs" -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/index.html b/docs_app/content/examples/upgrade-phonecat-3-final/index.html deleted file mode 100644 index fee59370e6..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - Google Phone Gallery - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/karma-test-shim.js b/docs_app/content/examples/upgrade-phonecat-3-final/karma-test-shim.js deleted file mode 100644 index 3c783bd45e..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/karma-test-shim.js +++ /dev/null @@ -1,96 +0,0 @@ -// #docregion -// /*global jasmine, __karma__, window*/ -Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. - -// Uncomment to get full stacktrace output. Sometimes helpful, usually not. -// Error.stackTraceLimit = Infinity; // - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; - -// builtPaths: root paths for output ("built") files -// get from karma.config.js, then prefix with '/src/' (default is 'app/') -var builtPaths = (__karma__.config.builtPaths || ['src/']) - .map(function (p) { return '/base/' + p;}); - -__karma__.loaded = function () { }; - -function isJsFile(path) { - return path.slice(-3) == '.js'; -} - -function isSpecFile(path) { - return /\.spec\.(.*\.)?js$/.test(path); -} - -// Is a "built" file if is JavaScript file in one of the "built" folders -function isBuiltFile(path) { - return isJsFile(path) && - builtPaths.reduce(function (keep, bp) { - return keep || (path.substr(0, bp.length) === bp); - }, false); -} - -var allSpecFiles = Object.keys(window.__karma__.files) - .filter(isSpecFile) - .filter(isBuiltFile); - -System.config({ - baseURL: 'base/src', - // Extend usual application package list with testing folder - packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, - - // Assume npm: is set in `paths` in systemjs.config - // Map the angular testing umd bundles - map: { - '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', - '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', - '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', - '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', - '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', - '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', - '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', - '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', - }, -}); - -System.import('systemjs.config.js') - .then(importSystemJsExtras) - .then(initTestBed) - .then(initTesting); - -/** Optional SystemJS configuration extras. Keep going w/o it */ -function importSystemJsExtras() { - return System.import('systemjs.config.extras.js') - .catch(function (reason) { - console.log( - 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' - ); - console.log(reason); - }); -} - -function initTestBed() { - return Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') - ]) - - .then(function (providers) { - var coreTesting = providers[0]; - var browserTesting = providers[1]; - - coreTesting.TestBed.initTestEnvironment( - browserTesting.BrowserDynamicTestingModule, - browserTesting.platformBrowserDynamicTesting()); - }); -} - -// Import all spec files and start karma -function initTesting() { - return Promise.all( - allSpecFiles.map(function (moduleName) { - return System.import(moduleName); - }) - ) - .then(__karma__.start, __karma__.error); -} diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/karma.conf.js b/docs_app/content/examples/upgrade-phonecat-3-final/karma.conf.js deleted file mode 100644 index 0bdcd5a576..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/karma.conf.js +++ /dev/null @@ -1,96 +0,0 @@ -// #docregion -module.exports = function (config) { - var appBase = 'src/'; // transpiled app JS and map files - var appAssets = '/base/app/'; // component assets fetched by Angular's compiler - - // Testing helpers (optional) are conventionally in a folder called `testing` - var testingBase = 'src/testing/'; // transpiled test JS and map files - var testingSrcBase = 'src/testing/'; // test source TS files - - config.set({ - basePath: '', - frameworks: ['jasmine'], - - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter') - ], - - client: { - builtPaths: [appBase, testingBase], // add more spec base paths as needed - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - - customLaunchers: { - // From the CLI. Not used here but interesting - // chrome setup for travis CI using chromium - Chrome_travis_ci: { - base: 'Chrome', - flags: ['--no-sandbox'] - } - }, - - files: [ - // System.js for module loading - 'node_modules/systemjs/dist/system.src.js', - - // Polyfills - 'node_modules/core-js/client/shim.js', - - // zone.js - 'node_modules/zone.js/dist/zone.js', - 'node_modules/zone.js/dist/long-stack-trace-zone.js', - 'node_modules/zone.js/dist/proxy.js', - 'node_modules/zone.js/dist/sync-test.js', - 'node_modules/zone.js/dist/jasmine-patch.js', - 'node_modules/zone.js/dist/async-test.js', - 'node_modules/zone.js/dist/fake-async-test.js', - - // RxJs - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, - - // Paths loaded via module imports: - // Angular itself - { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, - - { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, - { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, - 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels - - // transpiled application & spec code paths loaded via module imports - { pattern: appBase + '**/*.js', included: false, watched: true }, - { pattern: testingBase + '**/*.js', included: false, watched: true }, - - // Asset (HTML & CSS) paths loaded via Angular's component compiler - // (these paths need to be rewritten, see proxies section) - { pattern: appBase + '**/*.html', included: false, watched: true }, - { pattern: appBase + '**/*.css', included: false, watched: true }, - - // Paths for debugging with source maps in dev tools - { pattern: appBase + '**/*.ts', included: false, watched: false }, - { pattern: appBase + '**/*.js.map', included: false, watched: false }, - { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, - { pattern: testingBase + '**/*.js.map', included: false, watched: false} - ], - - // Proxied base paths for loading assets - proxies: { - // required for modules fetched by SystemJS - '/base/src/node_modules/': '/base/node_modules/' - }, - - exclude: [], - preprocessors: {}, - reporters: ['progress', 'kjhtml'], - - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false - }); -}; diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh b/docs_app/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh deleted file mode 100644 index d90e45c2e9..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/run-unit-tests.sh +++ /dev/null @@ -1,6 +0,0 @@ -## The boilerplate Karma configuration won't work with AngularJS tests -## which require their own special loading configuration, `karma.conf.ng1.js`. -## This scripts runs the AngularJS tests with that AngularJS config. - -PATH=$(npm bin):$PATH -tsc && karma start karma.conf.ng1.js diff --git a/docs_app/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js b/docs_app/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js deleted file mode 100644 index a6e82c8737..0000000000 --- a/docs_app/content/examples/upgrade-phonecat-3-final/systemjs.config.1.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * System configuration for Angular samples - * Adjust as necessary for your application needs. - */ -(function (global) { - // #docregion paths - System.config({ - paths: { - // paths serve as alias - 'npm:': '/node_modules/' - }, - map: { - 'ng-loader': '../src/systemjs-angular-loader.js', - app: '/app', - // #enddocregion paths - // angular bundles - '@angular/core': 'npm:@angular/core/bundles/core.umd.js', - '@angular/common': 'npm:@angular/common/bundles/common.umd.js', - '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', - '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', - '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', - '@angular/http': 'npm:@angular/http/bundles/http.umd.js', - '@angular/router': 'npm:@angular/router/bundles/router.umd.js', - '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js', - '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', - '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', - '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js', - - // other libraries - 'rxjs': 'npm:rxjs', - 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', - // #docregion paths - }, - // #enddocregion paths - // packages tells the System loader how to load when no filename and/or no extension - packages: { - 'app': { - main: './main.js', - defaultExtension: 'js', - meta: { - './*.js': { - loader: 'ng-loader' - } - } - }, - 'angular-in-memory-web-api': { - main: './index.js', - defaultExtension: 'js' - }, - 'rxjs/ajax': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/operators': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/testing': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs/websocket': {main: 'index.js', defaultExtension: 'js' }, - 'rxjs': { main: 'index.js', defaultExtension: 'js' }, - } - }); -})(this); diff --git a/docs_app/content/examples/user-input/e2e/app.e2e-spec.ts b/docs_app/content/examples/user-input/e2e/app.e2e-spec.ts deleted file mode 100644 index b70bd2f113..0000000000 --- a/docs_app/content/examples/user-input/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,99 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, protractor } from 'protractor'; - -describe('User Input Tests', function () { - - beforeAll(function () { - browser.get(''); - }); - - it('should support the click event', function () { - let mainEle = element(by.css('app-click-me')); - let buttonEle = element(by.css('app-click-me button')); - expect(mainEle.getText()).not.toContain('You are my hero!'); - buttonEle.click().then(function() { - expect(mainEle.getText()).toContain('You are my hero!'); - }); - }); - - it('should support the click event with an event payload', function () { - let mainEle = element(by.css('app-click-me2')); - let buttonEle = element(by.css('app-click-me2 button')); - expect(mainEle.getText()).not.toContain('Event target is '); - buttonEle.click().then(function() { - expect(mainEle.getText()).toContain('Event target is BUTTON'); - }); - }); - - it('should support the keyup event ', function () { - let mainEle = element(by.css('app-key-up1')); - let inputEle = mainEle.element(by.css('input')); - let outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('a | ab | abc |'); - }); - - it('should support user input from a local template let (loopback)', function () { - let mainEle = element(by.css('app-loop-back')); - let inputEle = mainEle.element(by.css('input')); - let outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('abc'); - }); - - it('should be able to combine click event with a local template var', function () { - let mainEle = element(by.css('app-key-up2')); - let inputEle = mainEle.element(by.css('input')); - let outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('a | ab | abc |'); - }); - - it('should be able to filter key events', () => { - let mainEle = element(by.css('app-key-up3')); - let inputEle = mainEle.element(by.css('input')); - let outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); - // broken atm, see https://github.com/angular/angular/issues/9419 - inputEle.sendKeys(protractor.Key.ENTER); - expect(outputTextEle.getText()).toEqual('abc'); - }); - - it('should be able to filter blur events', function () { - let prevInputEle = element(by.css('app-key-up3 input')); - let mainEle = element(by.css('app-key-up4')); - let inputEle = mainEle.element(by.css('input')); - let outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); - // change the focus - prevInputEle.click().then(function() { - expect(outputTextEle.getText()).toEqual('abc'); - }); - }); - - it('should be able to compose little tour of heroes', function () { - let mainEle = element(by.css('app-little-tour')); - let inputEle = mainEle.element(by.css('input')); - let addButtonEle = mainEle.element(by.css('button')); - let heroEles = mainEle.all(by.css('li')); - let numHeroes: number; - expect(heroEles.count()).toBeGreaterThan(0); - heroEles.count().then(function(count: number) { - numHeroes = count; - inputEle.sendKeys('abc'); - return addButtonEle.click(); - }).then(function() { - expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added'); - expect(heroEles.get(numHeroes).getText()).toContain('abc'); - }); - }); -}); - diff --git a/docs_app/content/examples/user-input/example-config.json b/docs_app/content/examples/user-input/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/docs_app/content/examples/user-input/src/app/app.component.html b/docs_app/content/examples/user-input/src/app/app.component.html deleted file mode 100644 index 303d7c0a0b..0000000000 --- a/docs_app/content/examples/user-input/src/app/app.component.html +++ /dev/null @@ -1,27 +0,0 @@ -

    - -

    - -

    - -

    - -

    Give me some keys!

    -
    - -

    keyup loop-back component

    -
    -

    - -

    Give me some more keys!

    -
    - -

    Type away! Press [enter] when done.

    -
    - -

    Type away! Press [enter] or click elsewhere when done.

    -
    - -

    Little Tour of Heroes

    -

    Add a new hero

    -
    diff --git a/docs_app/content/examples/user-input/src/app/app.component.ts b/docs_app/content/examples/user-input/src/app/app.component.ts deleted file mode 100644 index 6255909306..0000000000 --- a/docs_app/content/examples/user-input/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/docs_app/content/examples/user-input/src/app/app.module.ts b/docs_app/content/examples/user-input/src/app/app.module.ts deleted file mode 100644 index 41f13f9f11..0000000000 --- a/docs_app/content/examples/user-input/src/app/app.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ClickMeComponent } from './click-me.component'; -import { ClickMe2Component } from './click-me2.component'; -import { - KeyUpComponent_v1, - KeyUpComponent_v2, - KeyUpComponent_v3, - KeyUpComponent_v4 -} from './keyup.components'; -import { LittleTourComponent } from './little-tour.component'; -import { LoopbackComponent } from './loop-back.component'; - - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent, - ClickMeComponent, - ClickMe2Component, - KeyUpComponent_v1, - KeyUpComponent_v2, - KeyUpComponent_v3, - KeyUpComponent_v4, - LittleTourComponent, - LoopbackComponent - ], - providers: [ - - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/user-input/src/app/click-me.component.ts b/docs_app/content/examples/user-input/src/app/click-me.component.ts deleted file mode 100644 index 0f70e2eadd..0000000000 --- a/docs_app/content/examples/user-input/src/app/click-me.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* FOR DOCS ... MUST MATCH ClickMeComponent template -// #docregion click-me-button - -// #enddocregion click-me-button -*/ - -// #docregion -import { Component } from '@angular/core'; - -// #docregion click-me-component -@Component({ - selector: 'app-click-me', - template: ` - - {{clickMessage}}` -}) -export class ClickMeComponent { - clickMessage = ''; - - onClickMe() { - this.clickMessage = 'You are my hero!'; - } -} -// #enddocregion click-me-component diff --git a/docs_app/content/examples/user-input/src/app/click-me2.component.ts b/docs_app/content/examples/user-input/src/app/click-me2.component.ts deleted file mode 100644 index 476d5db969..0000000000 --- a/docs_app/content/examples/user-input/src/app/click-me2.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-click-me2', - template: ` - - {{clickMessage}}` -}) -export class ClickMe2Component { - clickMessage = ''; - clicks = 1; - - onClickMe2(event: any) { - let evtMsg = event ? ' Event target is ' + event.target.tagName : ''; - this.clickMessage = (`Click #${this.clicks++}. ${evtMsg}`); - } -} diff --git a/docs_app/content/examples/user-input/src/app/keyup.components.ts b/docs_app/content/examples/user-input/src/app/keyup.components.ts deleted file mode 100644 index e561a3ce7a..0000000000 --- a/docs_app/content/examples/user-input/src/app/keyup.components.ts +++ /dev/null @@ -1,88 +0,0 @@ -/* tslint:disable:class-name component-class-suffix */ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -// #docregion key-up-component-1 -@Component({ - selector: 'app-key-up1', -// #docregion key-up-component-1-template - template: ` - -

    {{values}}

    - ` -// #enddocregion key-up-component-1-template -}) -// #docregion key-up-component-1-class, key-up-component-1-class-no-type -export class KeyUpComponent_v1 { - values = ''; - -// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type - /* - // #docregion key-up-component-1-class-no-type - onKey(event: any) { // without type info - this.values += event.target.value + ' | '; - } - // #enddocregion key-up-component-1-class-no-type - */ - // #docregion key-up-component-1-class - - onKey(event: KeyboardEvent) { // with type info - this.values += (event.target).value + ' | '; - } -// #docregion key-up-component-1-class-no-type -} -// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type - -////////////////////////////////////////// - -// #docregion key-up-component-2 -@Component({ - selector: 'app-key-up2', - template: ` - -

    {{values}}

    - ` -}) -export class KeyUpComponent_v2 { - values = ''; - onKey(value: string) { - this.values += value + ' | '; - } -} -// #enddocregion key-up-component-2 - -////////////////////////////////////////// - -// #docregion key-up-component-3 -@Component({ - selector: 'app-key-up3', - template: ` - -

    {{value}}

    - ` -}) -export class KeyUpComponent_v3 { - value = ''; - onEnter(value: string) { this.value = value; } -} -// #enddocregion key-up-component-3 - -////////////////////////////////////////// - -// #docregion key-up-component-4 -@Component({ - selector: 'app-key-up4', - template: ` - - -

    {{value}}

    - ` -}) -export class KeyUpComponent_v4 { - value = ''; - update(value: string) { this.value = value; } -} -// #enddocregion key-up-component-4 diff --git a/docs_app/content/examples/user-input/src/app/little-tour.component.ts b/docs_app/content/examples/user-input/src/app/little-tour.component.ts deleted file mode 100644 index 2b8936e906..0000000000 --- a/docs_app/content/examples/user-input/src/app/little-tour.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -// #docregion little-tour -@Component({ - selector: 'app-little-tour', - template: ` - - - - -
    • {{hero}}
    - ` -}) -export class LittleTourComponent { - heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; - addHero(newHero: string) { - if (newHero) { - this.heroes.push(newHero); - } - } -} -// #enddocregion little-tour diff --git a/docs_app/content/examples/user-input/src/app/loop-back.component.ts b/docs_app/content/examples/user-input/src/app/loop-back.component.ts deleted file mode 100644 index 229123f3de..0000000000 --- a/docs_app/content/examples/user-input/src/app/loop-back.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -// #docregion loop-back-component -@Component({ - selector: 'app-loop-back', - template: ` - -

    {{box.value}}

    - ` -}) -export class LoopbackComponent { } -// #enddocregion loop-back-component diff --git a/docs_app/content/examples/user-input/src/assets/user-input-styles.css b/docs_app/content/examples/user-input/src/assets/user-input-styles.css deleted file mode 100644 index b2133e5103..0000000000 --- a/docs_app/content/examples/user-input/src/assets/user-input-styles.css +++ /dev/null @@ -1,9 +0,0 @@ -fieldset {border-style:none} -img {height: 100px;} -.box {border: 1px solid black; padding:3px} -.child-div {margin-left: 1em; font-weight: normal} -.hidden {display: none} -.parent-div {margin-top: 1em; font-weight: bold} -.special {font-weight:bold;} -.toe {margin-left: 1em; font-style: italic;} -little-hero {color:blue; font-size: smaller; background-color: Turquoise } \ No newline at end of file diff --git a/docs_app/content/examples/user-input/src/index.html b/docs_app/content/examples/user-input/src/index.html deleted file mode 100644 index 04e2ed51d7..0000000000 --- a/docs_app/content/examples/user-input/src/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - User Input - - - - - - - - - - - diff --git a/docs_app/content/examples/user-input/src/main.ts b/docs_app/content/examples/user-input/src/main.ts deleted file mode 100644 index a9ca1caf8c..0000000000 --- a/docs_app/content/examples/user-input/src/main.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs_app/content/examples/user-input/stackblitz.json b/docs_app/content/examples/user-input/stackblitz.json deleted file mode 100644 index d60beb9e7e..0000000000 --- a/docs_app/content/examples/user-input/stackblitz.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "description": "User Input", - "files": [ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["input"] -} diff --git a/docs_app/content/examples/webpack/config/helpers.js b/docs_app/content/examples/webpack/config/helpers.js deleted file mode 100644 index b760520f1c..0000000000 --- a/docs_app/content/examples/webpack/config/helpers.js +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -var path = require('path'); - -var _root = path.resolve(__dirname, '..'); - -function root(args) { - args = Array.prototype.slice.call(arguments, 0); - return path.join.apply(path, [_root].concat(args)); -} - -exports.root = root; -// #enddocregion \ No newline at end of file diff --git a/docs_app/content/examples/webpack/config/karma-test-shim.js b/docs_app/content/examples/webpack/config/karma-test-shim.js deleted file mode 100644 index 2ea37fbd72..0000000000 --- a/docs_app/content/examples/webpack/config/karma-test-shim.js +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -Error.stackTraceLimit = Infinity; - -require('core-js/es6'); -require('core-js/es7/reflect'); - -require('zone.js/dist/zone'); -require('zone.js/dist/long-stack-trace-zone'); -require('zone.js/dist/proxy'); -require('zone.js/dist/sync-test'); -require('zone.js/dist/jasmine-patch'); -require('zone.js/dist/async-test'); -require('zone.js/dist/fake-async-test'); - -var appContext = require.context('../src', true, /\.spec\.ts/); - -appContext.keys().forEach(appContext); - -var testing = require('@angular/core/testing'); -var browser = require('@angular/platform-browser-dynamic/testing'); - -testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); diff --git a/docs_app/content/examples/webpack/config/karma.conf.js b/docs_app/content/examples/webpack/config/karma.conf.js deleted file mode 100644 index 96387be7ff..0000000000 --- a/docs_app/content/examples/webpack/config/karma.conf.js +++ /dev/null @@ -1,39 +0,0 @@ -// #docregion -var webpackConfig = require('./webpack.test'); - -module.exports = function (config) { - var _config = { - basePath: '', - - frameworks: ['jasmine'], - - files: [ - {pattern: './config/karma-test-shim.js', watched: false} - ], - - preprocessors: { - './config/karma-test-shim.js': ['webpack', 'sourcemap'] - }, - - webpack: webpackConfig, - - webpackMiddleware: { - stats: 'errors-only' - }, - - webpackServer: { - noInfo: true - }, - - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: ['Chrome'], - singleRun: true - }; - - config.set(_config); -}; -// #enddocregion diff --git a/docs_app/content/examples/webpack/config/webpack.common.js b/docs_app/content/examples/webpack/config/webpack.common.js deleted file mode 100644 index 28be240e04..0000000000 --- a/docs_app/content/examples/webpack/config/webpack.common.js +++ /dev/null @@ -1,81 +0,0 @@ -// #docplaster -// #docregion -var webpack = require('webpack'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var helpers = require('./helpers'); - -module.exports = { - // #docregion entries, one-entry, two-entries - entry: { - // #enddocregion one-entry, two-entries - 'polyfills': './src/polyfills.ts', - // #docregion two-entries - 'vendor': './src/vendor.ts', - // #docregion one-entry - 'app': './src/main.ts' - }, - // #enddocregion entries, one-entry, two-entries - - // #docregion resolve - resolve: { - extensions: ['.ts', '.js'] - }, - // #enddocregion resolve - - // #docregion loaders - module: { - rules: [ - { - test: /\.ts$/, - loaders: [ - { - loader: 'awesome-typescript-loader', - options: { configFileName: helpers.root('src', 'tsconfig.json') } - } , 'angular2-template-loader' - ] - }, - { - test: /\.html$/, - loader: 'html-loader' - }, - { - test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - loader: 'file-loader?name=assets/[name].[hash].[ext]' - }, - { - test: /\.css$/, - exclude: helpers.root('src', 'app'), - loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) - }, - { - test: /\.css$/, - include: helpers.root('src', 'app'), - loader: 'raw-loader' - } - ] - }, - // #enddocregion loaders - - // #docregion plugins - plugins: [ - // Workaround for angular/angular#11580 - new webpack.ContextReplacementPlugin( - // The (\\|\/) piece accounts for path separators in *nix and Windows - /angular(\\|\/)core(\\|\/)@angular/, - helpers.root('./src'), // location of your src - {} // a map of your routes - ), - - new webpack.optimize.CommonsChunkPlugin({ - name: ['app', 'vendor', 'polyfills'] - }), - - new HtmlWebpackPlugin({ - template: 'src/index.html' - }) - ] - // #enddocregion plugins -}; -// #enddocregion - diff --git a/docs_app/content/examples/webpack/config/webpack.dev.js b/docs_app/content/examples/webpack/config/webpack.dev.js deleted file mode 100644 index 57d29560a0..0000000000 --- a/docs_app/content/examples/webpack/config/webpack.dev.js +++ /dev/null @@ -1,26 +0,0 @@ -// #docregion -var webpackMerge = require('webpack-merge'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var commonConfig = require('./webpack.common.js'); -var helpers = require('./helpers'); - -module.exports = webpackMerge(commonConfig, { - devtool: 'cheap-module-eval-source-map', - - output: { - path: helpers.root('dist'), - publicPath: '/', - filename: '[name].js', - chunkFilename: '[id].chunk.js' - }, - - plugins: [ - new ExtractTextPlugin('[name].css') - ], - - devServer: { - historyApiFallback: true, - stats: 'minimal' - } -}); -// #enddocregion diff --git a/docs_app/content/examples/webpack/config/webpack.prod.js b/docs_app/content/examples/webpack/config/webpack.prod.js deleted file mode 100644 index d6c70119bc..0000000000 --- a/docs_app/content/examples/webpack/config/webpack.prod.js +++ /dev/null @@ -1,41 +0,0 @@ -// #docregion -var webpack = require('webpack'); -var webpackMerge = require('webpack-merge'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var commonConfig = require('./webpack.common.js'); -var helpers = require('./helpers'); - -const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; - -module.exports = webpackMerge(commonConfig, { - devtool: 'source-map', - - output: { - path: helpers.root('dist'), - publicPath: '/', - filename: '[name].[hash].js', - chunkFilename: '[id].[hash].chunk.js' - }, - - plugins: [ - new webpack.NoEmitOnErrorsPlugin(), - new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 - mangle: { - keep_fnames: true - } - }), - new ExtractTextPlugin('[name].[hash].css'), - new webpack.DefinePlugin({ - 'process.env': { - 'ENV': JSON.stringify(ENV) - } - }), - new webpack.LoaderOptionsPlugin({ - htmlLoader: { - minimize: false // workaround for ng2 - } - }) - ] -}); - -// #enddocregion diff --git a/docs_app/content/examples/webpack/config/webpack.test.js b/docs_app/content/examples/webpack/config/webpack.test.js deleted file mode 100644 index d152ccfa0f..0000000000 --- a/docs_app/content/examples/webpack/config/webpack.test.js +++ /dev/null @@ -1,55 +0,0 @@ -// #docregion -var webpack = require('webpack'); -var helpers = require('./helpers'); - -module.exports = { - devtool: 'inline-source-map', - - resolve: { - extensions: ['.ts', '.js'] - }, - - module: { - rules: [ - { - test: /\.ts$/, - loaders: [ - { - loader: 'awesome-typescript-loader', - options: { configFileName: helpers.root('src', 'tsconfig.json') } - } , 'angular2-template-loader' - ] - }, - { - test: /\.html$/, - loader: 'html-loader' - - }, - { - test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - loader: 'null-loader' - }, - { - test: /\.css$/, - exclude: helpers.root('src', 'app'), - loader: 'null-loader' - }, - { - test: /\.css$/, - include: helpers.root('src', 'app'), - loader: 'raw-loader' - } - ] - }, - - plugins: [ - new webpack.ContextReplacementPlugin( - // The (\\|\/) piece accounts for path separators in *nix and Windows - /angular(\\|\/)core(\\|\/)@angular/, - helpers.root('./src'), // location of your src - {} // a map of your routes - ) - ] -}; - -// #enddocregion diff --git a/docs_app/content/examples/webpack/e2e-spec.ts b/docs_app/content/examples/webpack/e2e-spec.ts deleted file mode 100644 index b13f93552e..0000000000 --- a/docs_app/content/examples/webpack/e2e-spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('QuickStart E2E Tests', function () { - - let expectedMsg = 'Hello from Angular App with Webpack'; - - beforeEach(function () { - browser.get(''); - }); - - it(`should display: ${expectedMsg}`, function () { - expect(element(by.css('h1')).getText()).toEqual(expectedMsg); - }); - - it('should display an image', function () { - expect(element(by.css('img')).isPresent()).toBe(true); - }); - -}); diff --git a/docs_app/content/examples/webpack/example-config.json b/docs_app/content/examples/webpack/example-config.json deleted file mode 100644 index 96e6897378..0000000000 --- a/docs_app/content/examples/webpack/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:webpack", - "run": "serve:cli", - "projectType": "systemjs" -} diff --git a/docs_app/content/examples/webpack/karma.webpack.conf.js b/docs_app/content/examples/webpack/karma.webpack.conf.js deleted file mode 100644 index e2a663e8de..0000000000 --- a/docs_app/content/examples/webpack/karma.webpack.conf.js +++ /dev/null @@ -1,2 +0,0 @@ -// #docregion -module.exports = require('./config/karma.conf.js'); diff --git a/docs_app/content/examples/webpack/package.webpack.json b/docs_app/content/examples/webpack/package.webpack.json deleted file mode 100644 index 5aeb5ebf56..0000000000 --- a/docs_app/content/examples/webpack/package.webpack.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "angular2-webpack", - "version": "1.0.0", - "description": "A webpack starter for Angular", - "scripts": { - "start": "webpack-dev-server --inline --progress --port 8080", - "test": "karma start", - "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" - }, - "license": "MIT", - "dependencies": { - "@angular/common": "~4.2.0", - "@angular/compiler": "~4.2.0", - "@angular/core": "~4.2.0", - "@angular/forms": "~4.2.0", - "@angular/http": "~4.2.0", - "@angular/platform-browser": "~4.2.0", - "@angular/platform-browser-dynamic": "~4.2.0", - "@angular/router": "~4.2.0", - "core-js": "^2.4.1", - "rxjs": "5.0.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@types/node": "^6.0.45", - "@types/jasmine": "2.5.36", - "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.4", - "css-loader": "^0.26.1", - "extract-text-webpack-plugin": "2.0.0-beta.5", - "file-loader": "^0.9.0", - "html-loader": "^0.4.3", - "html-webpack-plugin": "^2.16.1", - "jasmine-core": "^2.4.1", - "karma": "^1.2.0", - "karma-chrome-launcher": "^2.0.0", - "karma-jasmine": "^1.0.2", - "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.1", - "null-loader": "^0.1.1", - "raw-loader": "^0.5.1", - "rimraf": "^2.5.2", - "style-loader": "^0.13.1", - "typescript": "~2.3.1", - "webpack": "2.2.1", - "webpack-dev-server": "2.4.1", - "webpack-merge": "^3.0.0" - } -} diff --git a/docs_app/content/examples/webpack/src/app/app.component.css b/docs_app/content/examples/webpack/src/app/app.component.css deleted file mode 100644 index bb624c5aae..0000000000 --- a/docs_app/content/examples/webpack/src/app/app.component.css +++ /dev/null @@ -1,9 +0,0 @@ -/* #docregion */ -main { - padding: 1em; - font-family: Arial, Helvetica, sans-serif; - text-align: center; - margin-top: 50px; - display: block; -} -/* #enddocregion */ diff --git a/docs_app/content/examples/webpack/src/app/app.component.html b/docs_app/content/examples/webpack/src/app/app.component.html deleted file mode 100644 index 9e60cd2ad5..0000000000 --- a/docs_app/content/examples/webpack/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ - -
    -

    Hello from Angular App with Webpack

    - - -
    - diff --git a/docs_app/content/examples/webpack/src/app/app.component.spec.ts b/docs_app/content/examples/webpack/src/app/app.component.spec.ts deleted file mode 100644 index a6512a11e7..0000000000 --- a/docs_app/content/examples/webpack/src/app/app.component.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { TestBed } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('App', () => { - beforeEach(() => { - TestBed.configureTestingModule({ declarations: [AppComponent]}); - }); - - it ('should work', () => { - let fixture = TestBed.createComponent(AppComponent); - expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); - }); -}); -// #enddocregion diff --git a/docs_app/content/examples/webpack/src/app/app.component.ts b/docs_app/content/examples/webpack/src/app/app.component.ts deleted file mode 100644 index 2c5eac0147..0000000000 --- a/docs_app/content/examples/webpack/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docplaster -// #docregion -// #docregion component -import { Component } from '@angular/core'; - -// #enddocregion component -import '../assets/css/styles.css'; - -// #docregion component -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { } -// #enddocregion diff --git a/docs_app/content/examples/webpack/src/app/app.module.ts b/docs_app/content/examples/webpack/src/app/app.module.ts deleted file mode 100644 index 362f3401fa..0000000000 --- a/docs_app/content/examples/webpack/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/docs_app/content/examples/webpack/src/assets/css/styles.css b/docs_app/content/examples/webpack/src/assets/css/styles.css deleted file mode 100644 index 2d404ff5b9..0000000000 --- a/docs_app/content/examples/webpack/src/assets/css/styles.css +++ /dev/null @@ -1,6 +0,0 @@ -/* #docregion */ -body { - background: #0147A7; - color: #fff; -} -/* #enddocregion */ diff --git a/docs_app/content/examples/webpack/src/assets/images/angular.png b/docs_app/content/examples/webpack/src/assets/images/angular.png deleted file mode 100644 index c5102939182281314e8f79f1d7f7cd2145cd81f5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2385 zcma)7Yg7{07RIs3%FxPQR!&yqtJ0hZ5q!V36s>HM!9+u$2FwSRhKg2B<&>E{G!#O# zwA6e=j)|gO?V+h4plBtal?v$qDI=3vgaK)w- z0000O;O~7%hw3kTnZE99-CJR-15QX_sE-c&4ED4e*$MUSznU)mkNyA5Kl8u(I!A2c z^2*FfcJ9u|rGiEI)VyNq({Ykkt9^SSZGL!kc4TzSGn%*mxawJ#qP=Tm$NsL}{!{ci z>HRw0XkGb-y+_$jMHy)#GgHe@3YgxRlDsIzilq0|Sw&Y(Mu@wkSyKF}g2KfF85E0efvcWi^e-(3c~#)b>`TQ2)>6zHAmrMd-Stf-V=Oj zU|bgI<@i-s9DGM~8e77!JU&BVo2CnzGbOe#tP;Vul%}y2h;}~u-%*q<+MSR8BC3L7 z8XSt4URzS*4V`AssYpj|Vzz9q78l55t9WVHt=T2?Gut}JIRsIh z1%d!9ZTJz0B;Ds&fZx58g;kJ+7Y{6mdr%8A^3Vy)yS)| zsbKXMQWg=wJBnuq3Ta7hXa)wz;|x+dHDw#{0*dc&FU3?ws*lXV1bG|vkTrJc?lHjN zxV+q;QM+`wt7km|b_ZnGa6omy8ka&`>FSU(Au&;`u4v~q>eRrPTlEkZxaSP+X!}zh z6N!0pnRbDHC4JX!?2S_{tb*eRhOZP-d-2#)A`^8SoC@*u8x4$*m2wC>aof*q=r%;( zmNzNY*S9Ky_l(sSQ#xn(hSs>Z_KQE=1bH>kWPX7H=X26Js;1gbJRzO;(y*u^y40Wj zaWqDG)+ibnjM@fe#20WE*K`(wgRBxQx1!**kM4qD<>d}Cy@?|8^A>n3FYDA^i2&%{ zJq|%w`VNpzg;y{@>$8Vq`_*}j%^zd6LAyr^4t$aoy!<>Yi?--az z<(m^N4e1+Zs#fz#YbgQY%Y@}o2$PfR^Fc-SYQbHwr}|Mb#im`NE9?#4bFoai`C7OS z*kl*k}6{1T5!RH3W5Y$66%T7aX^xOg+9-zpuWmVZpO|{MrF-usr&Ys6i zc*u*CfGr-Xhud&(J=JJ0Hh!a8a2*_+r5se)NN&(Mz^w(ca4>6fz?QI5xZwh`r>3w) zJ#_cjpv1__V{MBY2(%$D)L#CVn0F(Ed=1PK@&C1~<@p)aI19Qs-VZhFOeJ2=fw%BE zeD@;Mv2wA42gDf$Z|yGe?&rm-E3O@ib%OKfFGcD%-)uc~D|u=lX9})i9u#E{^z=J@ zW;PP7!XToi!*f#X&k&K07^%;&u@{jD4b}2*X(> zHAR)l?@tr{f;XS4{zoHs$fb(Uae=f|%+IzkH>wDm1X93VnR*{`#WYgXrDQ*3x*D+Y)Ihu{Q7!rfGMwO?^v ljI?SQ9hwt}{Ftxy#)W*NndmOdGy3wQ2l&9ft34yn{|yqu>aG9) diff --git a/docs_app/content/examples/webpack/src/index.html b/docs_app/content/examples/webpack/src/index.html deleted file mode 100644 index 503ea4a950..0000000000 --- a/docs_app/content/examples/webpack/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Angular With Webpack - - - - - Loading... - - - diff --git a/docs_app/content/examples/webpack/src/main.ts b/docs_app/content/examples/webpack/src/main.ts deleted file mode 100644 index e1d8cbc0fe..0000000000 --- a/docs_app/content/examples/webpack/src/main.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { enableProdMode } from '@angular/core'; - -import { AppModule } from './app/app.module'; - -// #docregion enable-prod -if (process.env.ENV === 'production') { - enableProdMode(); -} -// #enddocregion enable-prod - -platformBrowserDynamic().bootstrapModule(AppModule); -// #enddocregion diff --git a/docs_app/content/examples/webpack/src/polyfills.ts b/docs_app/content/examples/webpack/src/polyfills.ts deleted file mode 100644 index 118acd2b0c..0000000000 --- a/docs_app/content/examples/webpack/src/polyfills.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import 'core-js/es6'; -import 'core-js/es7/reflect'; -require('zone.js/dist/zone'); - -if (process.env.ENV === 'production') { - // Production -} else { - // Development and test - Error['stackTraceLimit'] = Infinity; - require('zone.js/dist/long-stack-trace-zone'); -} diff --git a/docs_app/content/examples/webpack/src/tsconfig.1.json b/docs_app/content/examples/webpack/src/tsconfig.1.json deleted file mode 100644 index 544e895bce..0000000000 --- a/docs_app/content/examples/webpack/src/tsconfig.1.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true - } -} \ No newline at end of file diff --git a/docs_app/content/examples/webpack/src/vendor.ts b/docs_app/content/examples/webpack/src/vendor.ts deleted file mode 100644 index 8193b33e4f..0000000000 --- a/docs_app/content/examples/webpack/src/vendor.ts +++ /dev/null @@ -1,18 +0,0 @@ -// TODO(i): this no longer works. we need to review this example and if absolutely necessary rewrite it to use the -// rxjs-compat package - -// #docregion -// Angular -import '@angular/platform-browser'; -import '@angular/platform-browser-dynamic'; -import '@angular/core'; -import '@angular/common'; -import '@angular/http'; -import '@angular/router'; - -// RxJS -import 'rxjs'; - -// Other vendors for example jQuery, Lodash or Bootstrap -// You can import js, ts, css, sass, ... -// #enddocregion diff --git a/docs_app/content/examples/webpack/webpack.config.js b/docs_app/content/examples/webpack/webpack.config.js deleted file mode 100644 index 66141706fe..0000000000 --- a/docs_app/content/examples/webpack/webpack.config.js +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -module.exports = require('./config/webpack.dev.js'); -// #enddocregion \ No newline at end of file diff --git a/docs_app/content/examples/webpack/zipper.json b/docs_app/content/examples/webpack/zipper.json deleted file mode 100644 index 73ea46a406..0000000000 --- a/docs_app/content/examples/webpack/zipper.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0-9].*", - "config/**/*", - "webpack.config.js", - "karma.webpack.conf.js" - ], - "removeSystemJsConfig": true, - "type": "webpack" -} diff --git a/docs_app/content/guide/ajs-quick-reference.md b/docs_app/content/guide/ajs-quick-reference.md deleted file mode 100644 index f9d5871b42..0000000000 --- a/docs_app/content/guide/ajs-quick-reference.md +++ /dev/null @@ -1,1276 +0,0 @@ -# AngularJS to Angular Quick Reference - - -{@a top} - - -_Angular_ is the name for the Angular of today and tomorrow. -_AngularJS_ is the name for all v1.x versions of Angular. - -This guide helps you transition from AngularJS to Angular -by mapping AngularJS syntax to the equivalent Angular syntax. - - -**See the Angular syntax in this **. - -## Template basics -Templates are the user-facing part of an Angular application and are written in HTML. -The following table lists some of the key AngularJS template features with their equivalent Angular template syntax. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - AngularJS - - Angular -
    - - - ### Bindings/interpolation - - - Your favorite hero is: {{vm.favoriteHero}} - - - - In AngularJS, an expression in curly braces denotes one-way binding. - This binds the value of the element to a property in the controller - associated with this template. - - When using the `controller as` syntax, - the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you - have to be specific about the source of the binding. - - - - ### Bindings/interpolation - - - - - In Angular, a template expression in curly braces still denotes one-way binding. - This binds the value of the element to a property of the component. - The context of the binding is implied and is always the - associated component, so it needs no reference variable. - - For more information, see the [Interpolation](guide/template-syntax#interpolation) - section of the [Template Syntax](guide/template-syntax) page. -
    - - - ### Filters - - - <td>{{movie.title | uppercase}}</td> - - - - To filter output in AngularJS templates, use the pipe character (|) and one or more filters. - - This example filters the `title` property to uppercase. - - - - ### Pipes - - - - - In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**. - Many (but not all) of the built-in filters from AngularJS are - built-in pipes in Angular. - - For more information, see [Filters/pipes](guide/ajs-quick-reference#filters-pipes) below. -
    - - - ### Local variables - - - <tr ng-repeat="movie in vm.movies"> - <td>{{movie.title}}</td> - </tr> - - - - Here, `movie` is a user-defined local variable. - - - - ### Input variables - - - - - Angular has true template input variables that are explicitly defined using the `let` keyword. - - For more information, see the [ngFor micro-syntax](guide/template-syntax#microsyntax) - section of the [Template Syntax](guide/template-syntax) page. -
    - - -## Template directives -AngularJS provides more than seventy built-in directives for templates. -Many of them aren't needed in Angular because of its more capable and expressive binding system. -The following are some of the key AngularJS built-in directives and their equivalents in Angular. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - AngularJS - - Angular -
    - - - ### ng-app - - - <body ng-app="movieHunter"> - - - - The application startup process is called **bootstrapping**. - - Although you can bootstrap an AngularJS app in code, - many applications bootstrap declaratively with the `ng-app` directive, - giving it the name of the application's module (`movieHunter`). - - - - ### Bootstrapping - - -
    - - - - - Angular doesn't have a bootstrap directive. - To launch the app in code, explicitly bootstrap the application's root module (`AppModule`) - in `main.ts` - and the application's root component (`AppComponent`) in `app.module.ts`. -
    - - - ### ng-class - - - <div ng-class="{active: isActive}"> - <div ng-class="{active: isActive, - shazam: isImportant}"> - - - - In AngularJS, the `ng-class` directive includes/excludes CSS classes - based on an expression. That expression is often a key-value control object with each - key of the object defined as a CSS class name, and each value defined as a template expression - that evaluates to a Boolean value. - - In the first example, the `active` class is applied to the element if `isActive` is true. - - You can specify multiple classes, as shown in the second example. - - - - ### ngClass - - - - - In Angular, the `ngClass` directive works similarly. - It includes/excludes CSS classes based on an expression. - - In the first example, the `active` class is applied to the element if `isActive` is true. - - You can specify multiple classes, as shown in the second example. - - Angular also has **class binding**, which is a good way to add or remove a single class, - as shown in the third example. - - For more information see the [Attribute, class, and style bindings](guide/template-syntax#other-bindings) - section of the [Template Syntax](guide/template-syntax) page. - -
    - - - ### ng-click - - - <button ng-click="vm.toggleImage()"> - <button ng-click="vm.toggleImage($event)"> - - - - In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked. - - In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed. - - The second example demonstrates passing in the `$event` object, which provides details about the event - to the controller. - - - - ### Bind to the `click` event - - - - - AngularJS event-based directives do not exist in Angular. - Rather, define one-way binding from the template view to the component using **event binding**. - - For event binding, define the name of the target event within parenthesis and - specify a template statement, in quotes, to the right of the equals. Angular then - sets up an event handler for the target event. When the event is raised, the handler - executes the template statement. - - In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed. - - The second example demonstrates passing in the `$event` object, which provides details about the event - to the component. - - For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events. - - For more information, see the [Event binding](guide/template-syntax#event-binding) - section of the [Template Syntax](guide/template-syntax) page. - -
    - - - ### ng-controller - - - <div ng-controller="MovieListCtrl as vm"> - - - - In AngularJS, the `ng-controller` directive attaches a controller to the view. - Using the `ng-controller` (or defining the controller as part of the routing) ties the - view to the controller code associated with that view. - - - - ### Component decorator - - - - - In Angular, the template no longer specifies its associated controller. - Rather, the component specifies its associated template as part of the component class decorator. - - For more information, see [Architecture Overview](guide/architecture#components). - -
    - - - ### ng-hide - In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on - an expression. For more information, see [ng-show](guide/ajs-quick-reference#ng-show). - - - - ### Bind to the `hidden` property - In Angular, you use property binding; there is no built-in *hide* directive. - For more information, see [ng-show](guide/ajs-quick-reference#ng-show). -
    - - - ### ng-href - - - <a ng-href="{{ angularDocsUrl }}">Angular Docs</a> - - - - The `ng-href` directive allows AngularJS to preprocess the `href` property so that it - can replace the binding expression with the appropriate URL before the browser - fetches from that URL. - - In AngularJS, the `ng-href` is often used to activate a route as part of navigation. - - - <a ng-href="#{{ moviesHash }}">Movies</a> - - - - Routing is handled differently in Angular. - - - - ### Bind to the `href` property - - - - - Angular uses property binding; there is no built-in *href* directive. - Place the element's `href` property in square brackets and set it to a quoted template expression. - - For more information see the [Property binding](guide/template-syntax#property-binding) - section of the [Template Syntax](guide/template-syntax) page. - - In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. - - - - - For more information on routing, see the [RouterLink binding](guide/router#router-link) - section of the [Routing & Navigation](guide/router) page. - -
    - - - ### ng-if - - - <table ng-if="movies.length"> - - - - In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM, - based on an expression. If the expression is false, the element is removed from the DOM. - - In this example, the `` element is removed from the DOM unless the `movies` array has a length greater than zero. - - -
    - - - ### *ngIf - - - - - The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes - or recreates a portion of the DOM based on an expression. - - In this example, the `` element is removed from the DOM unless the `movies` array has a length. - - The (*) before `ngIf` is required in this example. - For more information, see [Structural Directives](guide/structural-directives). - - - - - - - - - - - - - - - `) element repeats for each movie object in the collection of movies. - - - ` in this example) and its contents into a template and - uses that template to instantiate a view for each item in the list. - - Notice the other syntax differences: - The (*) before `ngFor` is required; - the `let` keyword identifies `movie` as an input variable; - the list preposition is `of`, not `in`. - - For more information, see [Structural Directives](guide/structural-directives). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - - ### ng-model - - - <input ng-model="vm.favoriteHero"/> - - - - In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template. - This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view. - - - - ### ngModel - - - - - In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) - and event binding (from the view to the component), thereby providing two-way binding. - - For more information on two-way binding with `ngModel`, see the [NgModel—Two-way binding to - form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel) - section of the [Template Syntax](guide/template-syntax) page. -
    - - - ### ng-repeat - - - <tr ng-repeat="movie in vm.movies"> - - - - In AngularJS, the `ng-repeat` directive repeats the associated DOM element - for each item in the specified collection. - - In this example, the table row (`
    - - - ### *ngFor - - - - - The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats - the associated DOM element for each item in the specified collection. - More accurately, it turns the defined element (`
    - - - ### ng-show - - - <h3 ng-show="vm.favoriteHero"> - Your favorite hero is: {{vm.favoriteHero}} - </h3> - - - - In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on - an expression. - - In this example, the `
    ` element is shown if the `favoriteHero` variable is truthy. -
    		- - - ### Bind to the `hidden` property - - - - - Angular uses property binding; there is no built-in *show* directive. - For hiding and showing elements, bind to the HTML `hidden` property. - - To conditionally display an element, place the element's `hidden` property in square brackets and - set it to a quoted template expression that evaluates to the *opposite* of *show*. - - In this example, the `
    ` element is hidden if the `favoriteHero` variable is not truthy. - - For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) - section of the [Template Syntax](guide/template-syntax) page. -
    - - - ### ng-src - - - <img ng-src="{{movie.imageurl}}"> - - - - The `ng-src` directive allows AngularJS to preprocess the `src` property so that it - can replace the binding expression with the appropriate URL before the browser - fetches from that URL. - - - - ### Bind to the `src` property - - - - - Angular uses property binding; there is no built-in *src* directive. - Place the `src` property in square brackets and set it to a quoted template expression. - - For more information on property binding, see the [Property binding](guide/template-syntax#property-binding) - section of the [Template Syntax](guide/template-syntax) page. -
    - - - ### ng-style - - - <div ng-style="{color: colorPreference}"> - - - - In AngularJS, the `ng-style` directive sets a CSS style on an HTML element - based on an expression. That expression is often a key-value control object with each - key of the object defined as a CSS property, and each value defined as an expression - that evaluates to a value appropriate for the style. - - In the example, the `color` style is set to the current value of the `colorPreference` variable. - - - - ### ngStyle - - - - - In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. - - In the first example, the `color` style is set to the current value of the `colorPreference` variable. - - Angular also has **style binding**, which is good way to set a single style. This is shown in the second example. - - For more information on style binding, see the [Style binding](guide/template-syntax#style-binding) section of the - [Template Syntax](guide/template-syntax) page. - - For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle) - section of the [Template Syntax](guide/template-syntax) page. -
    - - - ### ng-switch - - - <div ng-switch="vm.favoriteHero && - vm.checkMovieHero(vm.favoriteHero)"> - <div ng-switch-when="true"> - Excellent choice! - </div> - <div ng-switch-when="false"> - No movie, sorry! - </div> - <div ng-switch-default> - Please enter your favorite hero. - </div> - </div> - - - - In AngularJS, the `ng-switch` directive swaps the contents of - an element by selecting one of the templates based on the current value of an expression. - - In this example, if `favoriteHero` is not set, the template displays "Please enter ...". - If `favoriteHero` is set, it checks the movie hero by calling a controller method. - If that method returns `true`, the template displays "Excellent choice!". - If that methods returns `false`, the template displays "No movie, sorry!". - - - - ### ngSwitch - - - - - In Angular, the `ngSwitch` directive works similarly. - It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value. - - In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null` - and `*ngSwitchDefault` displays, "Please enter ...". - If `favoriteHero` is set, the app checks the movie hero by calling a component method. - If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!" - If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!" - - The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example. - - For more information, see [The NgSwitch directives](guide/template-syntax#ngSwitch) - section of the [Template Syntax](guide/template-syntax) page. -
    - - -{@a filters-pipes} - - - -## Filters/pipes -Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**. -Many of the built-in filters in AngularJS have corresponding pipes in Angular. -For more information on pipes, see [Pipes](guide/pipes). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - AngularJS - - Angular -
    - - - ### currency - - - <td>{{movie.price | currency}}</td> - - - - Formats a number as currency. - - - - ### currency - - - - - The Angular `currency` pipe is similar although some of the parameters have changed. -
    - - - ### date - - - <td>{{movie.releaseDate | date}}</td> - - - - Formats a date to a string based on the requested format. - - - - ### date - - - - - The Angular `date` pipe is similar. - -
    - - - ### filter - - - <tr ng-repeat="movie in movieList | filter: {title:listFilter}"> - - - - Selects a subset of items from the defined collection, based on the filter criteria. - - - - ### none - For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. - -
    - - - ### json - - - <pre>{{movie | json}}</pre> - - - - Converts a JavaScript object into a JSON string. This is useful for debugging. - - - - ### json - - - - - The Angular `json` pipe does the same thing. -
    - - - ### limitTo - - - <tr ng-repeat="movie in movieList | limitTo:2:0"> - - - - Selects up to the first parameter (2) number of items from the collection - starting (optionally) at the beginning index (0). - - - - ### slice - - - - - The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping - with the JavaScript `Slice` method. - The first parameter is the starting index; the second is the limit. - As in AngularJS, coding this operation within the component instead could improve performance. -
    - - - ### lowercase - - - <div>{{movie.title | lowercase}}</div> - - - - Converts the string to lowercase. - - - - ### lowercase - - - - - The Angular `lowercase` pipe does the same thing. -
    - - - ### number - - - <td>{{movie.starRating | number}}</td> - - - - Formats a number as text. - - - - ### number - - - - - The Angular `number` pipe is similar. - It provides more functionality when defining - the decimal places, as shown in the second example above. - - Angular also has a `percent` pipe, which formats a number as a local percentage - as shown in the third example. -
    - - - ### orderBy - - - <tr ng-repeat="movie in movieList | orderBy : 'title'"> - - - - Displays the collection in the order specified by the expression. - In this example, the movie title orders the `movieList`. - - - - ### none - For performance reasons, no comparable pipe exists in Angular. - Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. - -
    - - - -{@a controllers-components} - - - -## Modules/controllers/components -In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality. - -In AngularJS, you write the code that provides the model and the methods for the view in a **controller**. -In Angular, you build a **component**. - -Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. -The Angular code is shown using TypeScript. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - AngularJS - - Angular -
    - - - ### IIFE - - - (function () { - ... - }()); - - - - In AngularJS, an immediately invoked function expression (or IIFE) around controller code - keeps it out of the global namespace. - - - - - ### none - This is a nonissue in Angular because ES 2015 modules - handle the namespacing for you. - - For more information on modules, see the [Modules](guide/architecture#modules) section of the - [Architecture Overview](guide/architecture). -
    - - - ### Angular modules - - - angular.module("movieHunter", ["ngRoute"]); - - - - In AngularJS, an Angular module keeps track of controllers, services, and other code. - The second argument defines the list of other modules that this module depends upon. - - - - ### NgModules - - - - - NgModules, defined with the `NgModule` decorator, serve the same purpose: - - * `imports`: specifies the list of other modules that this module depends upon - * `declaration`: keeps track of your components, pipes, and directives. - - For more information on modules, see [NgModules](guide/ngmodules). -
    - - - ### Controller registration - - - angular - .module("movieHunter") - .controller("MovieListCtrl", - ["movieService", - MovieListCtrl]); - - - - AngularJS has code in each controller that looks up an appropriate Angular module - and registers the controller with that module. - - The first argument is the controller name. The second argument defines the string names of - all dependencies injected into this controller, and a reference to the controller function. - - - - ### Component decorator - - - - - Angular adds a decorator to the component class to provide any required metadata. - The `@Component` decorator declares that the class is a component and provides metadata about - that component such as its selector (or tag) and its template. - - This is how you associate a template with logic, which is defined in the component class. - - For more information, see the [Components](guide/architecture#components) - section of the [Architecture Overview](guide/architecture) page. -
    - - - ### Controller function - - - function MovieListCtrl(movieService) { - } - - - - In AngularJS, you write the code for the model and methods in a controller function. - - - - ### Component class - - - - - In Angular, you create a component class. - - NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class. - - For more information, see the [Components](guide/architecture#components) - section of the [Architecture Overview](guide/architecture) page. -
    - - - ### Dependency injection - - - MovieListCtrl.$inject = ['MovieService']; - function MovieListCtrl(movieService) { - } - - - - In AngularJS, you pass in any dependencies as controller function arguments. - This example injects a `MovieService`. - - To guard against minification problems, tell Angular explicitly - that it should inject an instance of the `MovieService` in the first parameter. - - - - ### Dependency injection - - - - - In Angular, you pass in dependencies as arguments to the component class constructor. - This example injects a `MovieService`. - The first parameter's TypeScript type tells Angular what to inject, even after minification. - - For more information, see the [Dependency injection](guide/architecture#dependency-injection) - section of the [Architecture Overview](guide/architecture). -
    - -{@a style-sheets} - - - -## Style sheets -Style sheets give your application a nice look. -In AngularJS, you specify the style sheets for your entire application. -As the application grows over time, the styles for the many parts of the application -merge, which can cause unexpected results. -In Angular, you can still define style sheets for your entire application. But now you can -also encapsulate a style sheet within a specific component. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - AngularJS - - Angular -
    - - - ### Link tag - - - <link href="styles.css" rel="stylesheet" /> - - - - AngularJS, uses a `link` tag in the head section of the `index.html` file - to define the styles for the application. - - - - - ### Styles configuration - - - With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file. - You can rename the extension to `.scss` to use sass. - - ### StyleUrls - In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define - a style sheet for a particular component. - - - - - This allows you to set appropriate styles for individual components that won’t leak into - other parts of the application. -
    - diff --git a/docs_app/content/guide/animations.md b/docs_app/content/guide/animations.md deleted file mode 100644 index e9f86a201d..0000000000 --- a/docs_app/content/guide/animations.md +++ /dev/null @@ -1,354 +0,0 @@ -# Animations - -Motion is an important aspect in the design of modern web applications. Good -user interfaces transition smoothly between states with engaging animations -that call attention where it's needed. Well-designed animations can make a UI not only -more fun but also easier to use. - -## Overview - -Angular's animation system lets you build animations that run with the same kind of native -performance found in pure CSS animations. You can also tightly integrate your -animation logic with the rest of your application code, for ease of control. - -
    - -Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/) -and run natively on [browsers that support it](http://caniuse.com/#feat=web-animation). - -As of Angular 6, If the Web Animations API is not supported natively by the browser, then Angular will use CSS -keyframes as a fallback instead (automatically). This means that the polyfill is no longer required unless any -code uses [AnimationBuilder](/api/animations/AnimationBuilder). If your code does use AnimationBuilder, then -uncomment the `web-animations-js` polyfill from the `polyfills.ts` file generated by Angular CLI. -
    - -
    - -The examples in this page are available as a . - -
    - -## Setup - -Before you can add animations to your application, you need -to import a few animation-specific modules and functions to the root application module. - - - -#### Example basics - -The animations examples in this guide animate a list of heroes. - -A `Hero` class has a `name` property, a `state` property that indicates if the hero is active or not, -and a `toggleState()` method to switch between the states. - - - -Across the top of the screen (`app.hero-team-builder.component.ts`) -are a series of buttons that add and remove heroes from the list (via the `HeroService`). -The buttons trigger changes to the list that all of the example components see at the same time. - -{@a example-transitioning-between-states} - -## Transitioning between two states - -A simple transition animation - -You can build a simple animation that transitions an element between two states -driven by a model attribute. - - -Animations can be defined inside `@Component` metadata. - - - -With these, you can define an *animation trigger* called `heroState` in the component -metadata. It uses animations to transition between two states: `active` and `inactive`. When a -hero is active, the element appears in a slightly larger size and lighter color. - - - -
    - -In this example, you are defining animation styles (color and transform) inline in the -animation metadata. - -
    - -Now, using the `[@triggerName]` syntax, attach the animation that you just defined to -one or more elements in the component's template. - - - -Here, the animation trigger applies to every element repeated by an `ngFor`. Each of -the repeated elements animates independently. The value of the -attribute is bound to the expression `hero.state` and is always either `active` or `inactive`. - -With this setup, an animated transition appears whenever a hero object changes state. -Here's the full component implementation: - - - -## States and transitions - -Angular animations are defined as logical **states** and **transitions** -between states. - -An animation state is a string value that you define in your application code. In the example -above, the states `'active'` and `'inactive'` are based on the logical state of -hero objects. The source of the state can be a simple object attribute, as it was in this case, -or it can be a value computed in a method. The important thing is that you can read it into the -component's template. - -You can define *styles* for each animation state: - - - -These `state` definitions specify the *end styles* of each state. -They are applied to the element once it has transitioned to that state, and stay -*as long as it remains in that state*. In effect, you're defining what styles the element has in different states. - -After you define states, you can define *transitions* between the states. Each transition -controls the timing of switching between one set of styles and the next: - - - -
    - In Angular animations you define states and transitions between states -
    - -If several transitions have the same timing configuration, you can combine -them into the same `transition` definition: - - - -When both directions of a transition have the same timing, as in the previous -example, you can use the shorthand syntax `<=>`: - - - -You can also apply a style during an animation but not keep it around -after the animation finishes. You can define such styles inline, in the `transition`. In this example, -the element receives one set of styles immediately and is then animated to the next. -When the transition finishes, none of these styles are kept because they're not -defined in a `state`. - - - -### The wildcard state `*` - -The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and -transitions that apply regardless of which state the animation is in. For example: - -* The `active => *` transition applies when the element's state changes from `active` to anything else. -* The `* => *` transition applies when *any* change between two states takes place. - -
    - The wildcard state can be used to match many different transitions at once -
    - -### The `void` state - -The special state called `void` can apply to any animation. It applies -when the element is *not* attached to a view, perhaps because it has not yet been -added or because it has been removed. The `void` state is useful for defining enter and -leave animations. - -For example the `* => void` transition applies when the element leaves the view, -regardless of what state it was in before it left. - -
    - The void state can be used for enter and leave transitions -
    - -The wildcard state `*` also matches `void`. - -## Example: Entering and leaving - -Enter and leave animations - -Using the `void` and `*` states you can define transitions that animate the -entering and leaving of elements: - -* Enter: `void => *` -* Leave: `* => void` - -For example, in the `animations` array below there are two transitions that use -the `void => *` and `* => void` syntax to animate the element in and out of the view. - - - -Note that in this case the styles are applied to the void state directly in the -transition definitions, and not in a separate `state(void)` definition. Thus, the transforms -are different on enter and leave: the element enters from the left -and leaves to the right. - -
    - -These two common animations have their own aliases: - - - transition(':enter', [ ... ]); // void => * - transition(':leave', [ ... ]); // * => void - - -
    - -## Example: Entering and leaving from different states - -Enter and leave animations combined with state animations - -You can also combine this animation with the earlier state transition animation by -using the hero state as the animation state. This lets you configure -different transitions for entering and leaving based on what the state of the hero -is: - -* Inactive hero enter: `void => inactive` -* Active hero enter: `void => active` -* Inactive hero leave: `inactive => void` -* Active hero leave: `active => void` - -This gives you fine-grained control over each transition: - -
    - This example transitions between active, inactive, and void states -
    - - - -## Animatable properties and units - -Since Angular's animation support builds on top of Web Animations, you can animate any property -that the browser considers *animatable*. This includes positions, sizes, transforms, colors, -borders, and many others. The W3C maintains -[a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties) -on its [CSS Transitions page](https://www.w3.org/TR/css3-transitions). - -For positional properties that have a numeric value, you can define a unit by providing -the value as a string with the appropriate suffix: - -* `'50px'` -* `'3em'` -* `'100%'` - -If you don't provide a unit when specifying dimension, Angular assumes the default of `px`: - -* `50` is the same as saying `'50px'` - -## Automatic property calculation - -Animation with automated height calculation - -Sometimes you don't know the value of a dimensional style property until runtime. -For example, elements often have widths and heights that -depend on their content and the screen size. These properties are often tricky -to animate with CSS. - -In these cases, you can use a special `*` property value so that the value of the -property is computed at runtime and then plugged into the animation. - -In this example, the leave animation takes whatever height the element has before it -leaves and animates from that height to zero: - - - -## Animation timing - -There are three timing properties you can tune for every animated transition: -the duration, the delay, and the easing function. They are all combined into -a single transition *timing string*. - -### Duration - -The duration controls how long the animation takes to run from start to finish. -You can define a duration in three ways: - -* As a plain number, in milliseconds: `100` -* In a string, as milliseconds: `'100ms'` -* In a string, as seconds: `'0.1s'` - -### Delay - -The delay controls the length of time between the animation trigger and the beginning -of the transition. You can define one by adding it to the same string -following the duration. It also has the same format options as the duration: - -* Wait for 100ms and then run for 200ms: `'0.2s 100ms'` - -### Easing - -The [easing function](http://easings.net/) controls how the animation accelerates -and decelerates during its runtime. For example, an `ease-in` function causes -the animation to begin relatively slowly but pick up speed as it progresses. You -can control the easing by adding it as a *third* value in the string after the duration -and the delay (or as the *second* value when there is no delay): - -* Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'` -* Run for 200ms, with easing: `'0.2s ease-in-out'` - -Animations with specific timings - -### Example - -Here are a couple of custom timings in action. Both enter and leave last for -200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a -slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: - - - -## Multi-step animations with keyframes - -Animations with some bounce implemented with keyframes - -Animation *keyframes* go beyond a simple transition to a more intricate animation -that goes through one or more intermediate styles when transitioning between two sets of styles. - -For each keyframe, you specify an *offset* that defines at which point -in the animation that keyframe applies. The offset is a number between zero, -which marks the beginning of the animation, and one, which marks the end. - -This example adds some "bounce" to the enter and leave animations with -keyframes: - - - -Note that the offsets are *not* defined in terms of absolute time. They are relative -measures from zero to one. The final timeline of the animation is based on the combination -of keyframe offsets, duration, delay, and easing. - -Defining offsets for keyframes is optional. If you omit them, offsets with even -spacing are automatically assigned. For example, three keyframes without predefined -offsets receive offsets `0`, `0.5`, and `1`. - -## Parallel animation groups - -Parallel animations with different timings, implemented with groups - -You've seen how to animate multiple style properties at the same time: -just put all of them into the same `style()` definition. - -But you may also want to configure different *timings* for animations that happen -in parallel. For example, you may want to animate two CSS properties but use a -different easing function for each one. - -For this you can use animation *groups*. In this example, using groups both on -enter and leave allows for two different timing configurations. Both -are applied to the same element in parallel, but run independently of each other: - - - -One group animates the element transform and width; the other group animates the opacity. - -## Animation callbacks - -A callback is fired when an animation is started and also when it is done. - -In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook -those callbacks like this: - - - -The callbacks receive an `AnimationEvent` that contains useful properties such as -`fromState`, `toState` and `totalTime`. - -Those callbacks will fire whether or not an animation is picked up. diff --git a/docs_app/content/guide/aot-compiler.md b/docs_app/content/guide/aot-compiler.md deleted file mode 100644 index 1af56be87d..0000000000 --- a/docs_app/content/guide/aot-compiler.md +++ /dev/null @@ -1,1293 +0,0 @@ -# The Ahead-of-Time (AOT) Compiler - -The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code. - -This guide explains how to build with the AOT compiler using different compiler options and how to write Angular metadata that AOT can compile. - -
    - - Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. - -
    - -{@a overview} - -## Angular compilation - -An Angular application consists largely of components and their HTML templates. -Before the browser can render the application, -the components and templates must be converted to executable JavaScript by an _Angular compiler_. - -Angular offers two ways to compile your application: - -1. **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime -1. **_Ahead-of-Time_ (AOT)**, which compiles your app at build time. - -JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands: - - - ng build - ng serve - - -{@a compile} - -For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands: - - - ng build --aot - ng serve --aot - - -
    - -The `--prod` meta-flag compiles with AOT by default. - -See the [CLI documentation](https://github.com/angular/angular-cli/wiki) for details, especially the [`build` topic](https://github.com/angular/angular-cli/wiki/build). - -
    - -{@a why-aot} - -## Why compile with AOT? - -*Faster rendering* - -With AOT, the browser downloads a pre-compiled version of the application. -The browser loads executable code so it can render the application immediately, without waiting to compile the app first. - -*Fewer asynchronous requests* - -The compiler _inlines_ external HTML templates and CSS style sheets within the application JavaScript, -eliminating separate ajax requests for those source files. - -*Smaller Angular framework download size* - -There's no need to download the Angular compiler if the app is already compiled. -The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload. - -*Detect template errors earlier* - -The AOT compiler detects and reports template binding errors during the build step -before users can see them. - -*Better security* - -AOT compiles HTML templates and components into JavaScript files long before they are served to the client. -With no templates to read and no risky client-side HTML or JavaScript evaluation, -there are fewer opportunities for injection attacks. - -{@a compiler-options} - -## Angular Compiler Options - -You can control your app compilation by providing template compiler options in the `tsconfig.json` file along with the options supplied to the TypeScript compiler. The template compiler options are specified as members of -`"angularCompilerOptions"` object as shown below: - -```json -{ - "compilerOptions": { - "experimentalDecorators": true, - ... - }, - "angularCompilerOptions": { - "fullTemplateTypeCheck": true, - "preserveWhitespaces": true, - ... - } -} -``` - -### *skipMetadataEmit* - -This option tells the compiler not to produce `.metadata.json` files. -The option is `false` by default. - -`.metadata.json` files contain infomration needed by the template compiler from a `.ts` -file that is not included in the `.d.ts` file produced by the TypeScript compiler. This information contains, -for example, the content of annotations (such as a component's template) which TypeScript -emits to the `.js` file but not to the `.d.ts` file. - -This option should be set to `true` if using TypeScript's `--outFile` option, as the metadata files -are not valid for this style of TypeScript output. It is not recommeded to use `--outFile` with -Angular. Use a bundler, such as [webpack](https://webpack.js.org/), instead. - -This option can also be set to `true` when using factory summaries as the factory summaries -include a copy of the information that is in the `.metadata.json` file. - -### *strictMetadataEmit* - -This option tells the template compiler to report an error to the `.metadata.json` -file if `"skipMetadataEmit"` is `false` . This option is `false` by default. This should only be used when `"skipMetadataEmit"` is `false` and `"skipTemplateCodeGen"` is `true`. - -It is intended to validate the `.metadata.json` files emitted for bundling with an `npm` package. The validation is overly strict and can emit errors for metadata that would never produce an error when used by the template compiler. You can choose to suppress the error emitted by this option for an exported symbol by including `@dynamic` in the comment documenting the symbol. - -It is valid for `.metadata.json` files to contain errors. The template compiler reports these errors -if the metadata is used to determine the contents of an annotation. The metadata -collector cannot predict the symbols that are designed to use in an annotation, so it will preemptively -include error nodes in the metadata for the exported symbols. The template compiler can then use the error -nodes to report an error if these symbols are used. If the client of a library intends to use a symbol in an annotation, the template compiler will not normally report -this until the client uses the symbol. This option allows detecting these errors during the build phase of -the library and is used, for example, in producing Angular libraries themselves. - -### *skipTemplateCodegen* - -This option tells the compiler to suppress emitting `.ngfactory.js` and `.ngstyle.js` files. When set, -this turns off most of the template compiler and disables reporting template diagnostics. -This option can be used to instruct the -template compiler to produce `.metadata.json` files for distribution with an `npm` package while -avoiding the production of `.ngfactory.js` and `.ngstyle.js` files that cannot be distributed to -`npm`. - -### *strictInjectionParameters* - -When set to `true`, this options tells the compiler to report an error for a parameter supplied -whose injection type cannot be determined. When this value option is not provided or is `false`, constructor parameters of classes marked with `@Injectable` whose type cannot be resolved will -produce a warning. - -*Note*: It is recommended to change this option explicitly to `true` as this option will default to `true` in the future. - -### *flatModuleOutFile* - -When set to `true`, this option tells the template compiler to generate a flat module -index of the given file name and the corresponding flat module metadata. Use this option when creating -flat modules that are packaged similarly to `@angular/core` and `@angular/common`. When this option -is used, the `package.json` for the library should refer -to the generated flat module index instead of the library index file. With this -option only one `.metadata.json` file is produced that contains all the metadata necessary -for symbols exported from the library index. In the generated `.ngfactory.js` files, the flat -module index is used to import symbols that includes both the public API from the library index -as well as shrowded internal symbols. - -By default the `.ts` file supplied in the `files` field is assumed to be library index. -If more than one `.ts` file is specified, `libraryIndex` is used to select the file to use. -If more than one `.ts` file is supplied without a `libraryIndex`, an error is produced. A flat module -index `.d.ts` and `.js` will be created with the given `flatModuleOutFile` name in the same -location as the library index `.d.ts` file. For example, if a library uses -`public_api.ts` file as the library index of the module, the `tsconfig.json` `files` field -would be `["public_api.ts"]`. The `flatModuleOutFile` options could then be set to, for -example `"index.js"`, which produces `index.d.ts` and `index.metadata.json` files. The -library's `package.json`'s `module` field would be `"index.js"` and the `typings` field -would be `"index.d.ts"`. - -### *flatModuleId* - -This option specifies the preferred module id to use for importing a flat module. -References generated by the template compiler will use this module name when importing symbols -from the flat module. -This is only meaningful when `flatModuleOutFile` is also supplied. Otherwise the compiler ignores -this option. - -### *generateCodeForLibraries* - -This option tells the template compiler to generate factory files (`.ngfactory.js` and `.ngstyle.js`) -for `.d.ts` files with a corresponding `.metadata.json` file. This option defaults to -`true`. When this option is `false`, factory files are generated only for `.ts` files. - -This option should be set to `false` when using factory summaries. - -### *fullTemplateTypeCheck* - -This option tells the compiler to enable the [binding expression validation](#binding-expression-validation) -phase of the template compiler which uses TypeScript to validate binding expressions. - -This option is `false` by default. - -*Note*: It is recommended to set this to `true` as this option will default to `true` in the future. - -### *annotateForClosureCompiler* - -This option tells the compiler to use [Tsickle](https://github.com/angular/tsickle) to annotate the emitted -JavaScript with [JsDoc](http://usejsdoc.org/) comments needed by the -[Closure Compiler](https://github.com/google/closure-compiler). This option defaults to `false`. - -### *annotationsAs* - -Use this option to modify how the Angular specific annotations are emitted to improve tree-shaking. Non-Angular -annotations and decorators are unaffected. Default is `static fields`. - -value | description -----------------|------------------------------------------------------------- -`decorators` | Leave the Decorators in-place. This makes compilation faster. TypeScript will emit calls to the __decorate helper. Use `--emitDecoratorMetadata` for runtime reflection. However, the resulting code will not properly tree-shake. -`static fields` | Replace decorators with a static field in the class. Allows advanced tree-shakers like [Closure Compiler](https://github.com/google/closure-compiler) to remove unused classes. - -### *trace* - -This tells the compiler to print extra information while compiling templates. - -### *disableExpressionLowering* - -The Angular template compiler transforms code that is used, or could be used, in an annotation -to allow it to be imported from template factory modules. See -[metadata rewriting](#metadata-rewriting) for more information. - -Setting this option to `false` disables this rewriting, requiring the rewriting to be -done manually. - -### *preserveWhitespaces* - -This option tells the compiler whether to remove blank text nodes from compiled templates. -As of v6, this option is `false` by default, which results in smaller emitted template factory modules. - -### *allowEmptyCodegenFiles* - -Tells the compiler to generate all the possible generated files even if they are empty. This option is -`false` by default. This is an option used by `bazel` build rules and is needed to simplify -how `bazel` rules track file dependencies. It is not recommended to use this option outside of the `bazel` -rules. - - ### *enableIvy* - - Tells the compiler to generate definitions using the Render3 style code generation. This option defaults to `false`. - - Not all features are supported with this option enabled. It is only supported - for experimentation and testing of Render3 style code generation. - - *Note*: Is it not recommended to use this option as it is not yet feature complete with the Render2 code generation. - - -## Angular Metadata and AOT - -The Angular **AOT compiler** extracts and interprets **metadata** about the parts of the application that Angular is supposed to manage. - -Angular metadata tells Angular how to construct instances of your application classes and interact with them at runtime. - -You specify the metadata with **decorators** such as `@Component()` and `@Input()`. -You also specify metadata implicitly in the constructor declarations of these decorated classes. - -In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`. - -```typescript -@Component({ - selector: 'app-typical', - template: '
    A typical component for {{data.name}}
    ' -)} -export class TypicalComponent { - @Input() data: TypicalData; - constructor(private someService: SomeService) { ... } -} -``` - -The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`. -When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency. - -## Metadata restrictions - -You write metadata in a _subset_ of TypeScript that must conform to the following general constraints: - -1. Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript. -2. Only reference exported symbols after [code folding](#folding). -3. Only call [functions supported](#supported-functions) by the compiler. -4. Decorated and data-bound class members must be public. - -The next sections elaborate on these points. - -## How AOT works - -It helps to think of the AOT compiler as having two phases: a code analysis phase in which it simply records a representation of the source; and a code generation phase in which the compiler's `StaticReflector` handles the interpretation as well as places restrictions on what it interprets. - -## Phase 1: analysis - -The TypeScript compiler does some of the analytic work of the first phase. It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code. - -At the same time, the AOT **_collector_** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file. - -You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree). - -
    - -Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/compiler-cli/src/metadata/schema.ts) -describes the JSON format as a collection of TypeScript interfaces. - -
    - -{@a expression-syntax} -### Expression syntax - -The _collector_ only understands a subset of JavaScript. -Define metadata objects with the following limited syntax: - -Syntax | Example ------------------------------------|----------------------------------- -Literal object | `{cherry: true, apple: true, mincemeat: false}` -Literal array | `['cherries', 'flour', 'sugar']` -Spread in literal array | `['apples', 'flour', ...the_rest]` -Calls | `bake(ingredients)` -New | `new Oven()` -Property access | `pie.slice` -Array index | `ingredients[0]` -Identifier reference | `Component` -A template string | `pie is ${multiplier} times better than cake` -Literal string | `'pi'` -Literal number | `3.14153265` -Literal boolean | `true` -Literal null | `null` -Supported prefix operator | `!cake` -Supported Binary operator | `a + b` -Conditional operator | `a ? b : c` -Parentheses | `(a + b)` - -If an expression uses unsupported syntax, the _collector_ writes an error node to the `.metadata.json` file. The compiler later reports the error if it needs that -piece of metadata to generate the application code. - -
    - - If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in `tsconfig`. - -``` - "angularCompilerOptions": { - ... - "strictMetadataEmit" : true - } - ``` - -Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries. - -
    - -{@a function-expression} -{@a arrow-functions} -### No arrow functions - -The AOT compiler does not support [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) -and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions. - -Consider the following component decorator: - -```typescript -@Component({ - ... - providers: [{provide: server, useFactory: () => new Server()}] -}) -``` - -The AOT _collector_ does not support the arrow function, `() => new Server()`, in a metadata expression. -It generates an error node in place of the function. - -When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_. - -You can fix the error by converting to this: - -```typescript -export function serverFactory() { - return new Server(); -} - -@Component({ - ... - providers: [{provide: server, useFactory: serverFactory}] -}) -``` - -Beginning in version 5, the compiler automatically performs this rewriting while emitting the `.js` file. - -{@a function-calls} -### Limited function calls - -The _collector_ can represent a function call or object creation with `new` as long as the syntax is valid. The _collector_ only cares about proper syntax. - -But beware. The compiler may later refuse to generate a call to a _particular_ function or creation of a _particular_ object. -The compiler only supports calls to a small set of functions and will use `new` for only a few designated classes. These functions and classes are in a table of [below](#supported-functions). - - -### Folding -{@a exported-symbols} -The compiler can only resolve references to **_exported_** symbols. -Fortunately, the _collector_ enables limited use of non-exported symbols through _folding_. - -The _collector_ may be able to evaluate an expression during collection and record the result in the `.metadata.json` instead of the original expression. - -For example, the _collector_ can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`. - -This process is called _folding_. An expression that can be reduced in this manner is _foldable_. - -{@a var-declaration} -The collector can evaluate references to -module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file. - -Consider the following component definition: - -```typescript -const template = '
    {{hero.name}}
    '; - -@Component({ - selector: 'app-hero', - template: template -}) -export class HeroComponent { - @Input() hero: Hero; -} -``` - -The compiler could not refer to the `template` constant because it isn't exported. - -But the _collector_ can _fold_ the `template` constant into the metadata definition by inlining its contents. -The effect is the same as if you had written: - -```typescript -@Component({ - selector: 'app-hero', - template: '
    {{hero.name}}
    ' -}) -export class HeroComponent { - @Input() hero: Hero; -} -``` - -There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`. - -You can take this example a step further by including the `template` constant in another expression: - -```typescript -const template = '
    {{hero.name}}
    '; - -@Component({ - selector: 'app-hero', - template: template + '
    {{hero.title}}
    ' -}) -export class HeroComponent { - @Input() hero: Hero; -} -``` - -The _collector_ reduces this expression to its equivalent _folded_ string: - -`'
    {{hero.name}}
    {{hero.title}}
    '`. - -#### Foldable syntax - -The following table describes which expressions the _collector_ can and cannot fold: - -Syntax | Foldable ------------------------------------|----------------------------------- -Literal object | yes -Literal array | yes -Spread in literal array | no -Calls | no -New | no -Property access | yes, if target is foldable -Array index | yes, if target and index are foldable -Identifier reference | yes, if it is a reference to a local -A template with no substitutions | yes -A template with substitutions | yes, if the substitutions are foldable -Literal string | yes -Literal number | yes -Literal boolean | yes -Literal null | yes -Supported prefix operator | yes, if operand is foldable -Supported binary operator | yes, if both left and right are foldable -Conditional operator | yes, if condition is foldable -Parentheses | yes, if the expression is foldable - -If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) for the compiler to resolve. - - -## Phase 2: code generation - -The _collector_ makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. It represents the metadata as best it can and records errors when it detects a metadata syntax violation. - -It's the compiler's job to interpret the `.metadata.json` in the code generation phase. - -The compiler understands all syntax forms that the _collector_ supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules. - -The compiler can only reference _exported symbols_. - -Decorated component class members must be public. You cannot make an `@Input()` property private or internal. - -Data bound properties must also be public. - -```typescript -// BAD CODE - title is private -@Component({ - selector: 'app-root', - template: '

    {{title}}

    ' -}) -export class AppComponent { - private title = 'My App'; // Bad -} -``` - -{@a supported-functions} -Most importantly, the compiler only generates code to create instances of certain classes, support certain decorators, and call certain functions from the following lists. - - -### New instances - -The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`. - -### Annotations/Decorators - -The compiler only supports metadata for these Angular decorators. - -Decorator | Module -------------------|-------------- -`Attribute` | `@angular/core` -`Component` | `@angular/core` -`ContentChild` | `@angular/core` -`ContentChildren` | `@angular/core` -`Directive` | `@angular/core` -`Host` | `@angular/core` -`HostBinding` | `@angular/core` -`HostListener` | `@angular/core` -`Inject` | `@angular/core` -`Injectable` | `@angular/core` -`Input` | `@angular/core` -`NgModule` | `@angular/core` -`Optional` | `@angular/core` -`Output` | `@angular/core` -`Pipe` | `@angular/core` -`Self` | `@angular/core` -`SkipSelf` | `@angular/core` -`ViewChild` | `@angular/core` - - -### Macro-functions and macro-static methods - -The compiler also supports _macros_ in the form of functions or static -methods that return an expression. - -For example, consider the following function: - -```typescript -export function wrapInArray(value: T): T[] { - return [value]; -} -``` - -You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset. - -You might use `wrapInArray()` like this: - -```typescript -@NgModule({ - declarations: wrapInArray(TypicalComponent) -}) -export class TypicalModule {} -``` - -The compiler treats this usage as if you had written: - -```typescript -@NgModule({ - declarations: [TypicalComponent] -}) -export class TypicalModule {} -``` - -The collector is simplistic in its determination of what qualifies as a macro -function; it can only contain a single `return` statement. - -The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes. -Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code") -for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules). - -{@a metadata-rewriting} - -### Metadata rewriting - -The compiler treats object literals containing the fields `useClass`, `useValue`, `useFactory`, and `data` specially. The compiler converts the expression initializing one of these fields into an exported variable, which replaces the expression. This process of rewriting these expressions removes all the restrictions on what can be in them because -the compiler doesn't need to know the expression's value—it just needs to be able to generate a reference to the value. - - - -You might write something like: - -```typescript -class TypicalServer { - -} - -@NgModule({ - providers: [{provide: SERVER, useFactory: () => TypicalServer}] -}) -export class TypicalModule {} -``` - -Without rewriting, this would be invalid because lambdas are not supported and `TypicalServer` is not exported. - -To allow this, the compiler automatically rewrites this to something like: - -```typescript -class TypicalServer { - -} - -export const ɵ0 = () => new TypicalServer(); - -@NgModule({ - providers: [{provide: SERVER, useFactory: ɵ0}] -}) -export class TypicalModule {} -``` - -This allows the compiler to generate a reference to `ɵ0` in the -factory without having to know what the value of `ɵ0` contains. - -The compiler does the rewriting during the emit of the `.js` file. This doesn't rewrite the `.d.ts` file, however, so TypeScript doesn't recognize it as being an export. Thus, it does not pollute the ES module's exported API. - - -## Metadata Errors - -The following are metadata errors you may encounter, with explanations and suggested corrections. - -[Expression form not supported](#expression-form-not-supported)
    -[Reference to a local (non-exported) symbol](#reference-to-a-local-symbol)
    -[Only initialized variables and constants](#only-initialized-variables)
    -[Reference to a non-exported class](#reference-to-a-non-exported-class)
    -[Reference to a non-exported function](#reference-to-a-non-exported-function)
    -[Function calls are not supported](#function-calls-not-supported)
    -[Destructured variable or constant not supported](#destructured-variable-not-supported)
    -[Could not resolve type](#could-not-resolve-type)
    -[Name expected](#name-expected)
    -[Unsupported enum member name](#unsupported-enum-member-name)
    -[Tagged template expressions are not supported](#tagged-template-expressions-not-supported)
    -[Symbol reference expected](#symbol-reference-expected)
    - -
    - -

    Expression form not supported

    - -The compiler encountered an expression it didn't understand while evaluating Angular metadata. - -Language features outside of the compiler's [restricted expression syntax](#expression-syntax) -can produce this error, as seen in the following example: - -``` -// ERROR -export class Fooish { ... } -... -const prop = typeof Fooish; // typeof is not valid in metadata - ... - // bracket notation is not valid in metadata - { provide: 'token', useValue: { [prop]: 'value' } }; - ... -``` - -You can use `typeof` and bracket notation in normal application code. -You just can't use those features within expressions that define Angular metadata. - -Avoid this error by sticking to the compiler's [restricted expression syntax](#expression-syntax) -when writing Angular metadata -and be wary of new or unusual TypeScript features. - -
    - -{@a reference-to-a-local-symbol} -

    Reference to a local (non-exported) symbol

    - -
    - -_Reference to a local (non-exported) symbol 'symbol name'. Consider exporting the symbol._ - -
    - -The compiler encountered a referenced to a locally defined symbol that either wasn't exported or wasn't initialized. - -Here's a `provider` example of the problem. - -``` -// ERROR -let foo: number; // neither exported nor initialized - -@Component({ - selector: 'my-component', - template: ... , - providers: [ - { provide: Foo, useValue: foo } - ] -}) -export class MyComponent {} -``` -The compiler generates the component factory, which includes the `useValue` provider code, in a separate module. _That_ factory module can't reach back to _this_ source module to access the local (non-exported) `foo` variable. - -You could fix the problem by initializing `foo`. - -``` -let foo = 42; // initialized -``` - -The compiler will [fold](#folding) the expression into the provider as if you had written this. - -``` - providers: [ - { provide: Foo, useValue: 42 } - ] -``` - -Alternatively, you can fix it by exporting `foo` with the expectation that `foo` will be assigned at runtime when you actually know its value. - -``` -// CORRECTED -export let foo: number; // exported - -@Component({ - selector: 'my-component', - template: ... , - providers: [ - { provide: Foo, useValue: foo } - ] -}) -export class MyComponent {} -``` - -Adding `export` often works for variables referenced in metadata such as `providers` and `animations` because the compiler can generate _references_ to the exported variables in these expressions. It doesn't need the _values_ of those variables. - -Adding `export` doesn't work when the compiler needs the _actual value_ -in order to generate code. -For example, it doesn't work for the `template` property. - -``` -// ERROR -export let someTemplate: string; // exported but not initialized - -@Component({ - selector: 'my-component', - template: someTemplate -}) -export class MyComponent {} -``` - -The compiler needs the value of the `template` property _right now_ to generate the component factory. -The variable reference alone is insufficient. -Prefixing the declaration with `export` merely produces a new error, "[`Only initialized variables and constants can be referenced`](#only-initialized-variables)". - -
    - -{@a only-initialized-variables} -

    Only initialized variables and constants

    - -
    - -_Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler._ - -
    - -The compiler found a reference to an exported variable or static field that wasn't initialized. -It needs the value of that variable to generate code. - -The following example tries to set the component's `template` property to the value of -the exported `someTemplate` variable which is declared but _unassigned_. - -``` -// ERROR -export let someTemplate: string; - -@Component({ - selector: 'my-component', - template: someTemplate -}) -export class MyComponent {} -``` - -You'd also get this error if you imported `someTemplate` from some other module and neglected to initialize it there. - -``` -// ERROR - not initialized there either -import { someTemplate } from './config'; - -@Component({ - selector: 'my-component', - template: someTemplate -}) -export class MyComponent {} -``` - -The compiler cannot wait until runtime to get the template information. -It must statically derive the value of the `someTemplate` variable from the source code -so that it can generate the component factory, which includes -instructions for building the element based on the template. - -To correct this error, provide the initial value of the variable in an initializer clause _on the same line_. - -``` -// CORRECTED -export let someTemplate = '

    Greetings from Angular

    '; - -@Component({ - selector: 'my-component', - template: someTemplate -}) -export class MyComponent {} -``` - -
    - -

    Reference to a non-exported class

    - -
    - -_Reference to a non-exported class . Consider exporting the class._ - -
    - -Metadata referenced a class that wasn't exported. - -For example, you may have defined a class and used it as an injection token in a providers array -but neglected to export that class. - -``` -// ERROR -abstract class MyStrategy { } - - ... - providers: [ - { provide: MyStrategy, useValue: ... } - ] - ... -``` - -Angular generates a class factory in a separate module and that -factory [can only access exported classes](#exported-symbols). -To correct this error, export the referenced class. - -``` -// CORRECTED -export abstract class MyStrategy { } - - ... - providers: [ - { provide: MyStrategy, useValue: ... } - ] - ... -``` -
    - -

    Reference to a non-exported function

    - -Metadata referenced a function that wasn't exported. - -For example, you may have set a providers `useFactory` property to a locally defined function that you neglected to export. - -``` -// ERROR -function myStrategy() { ... } - - ... - providers: [ - { provide: MyStrategy, useFactory: myStrategy } - ] - ... -``` - -Angular generates a class factory in a separate module and that -factory [can only access exported functions](#exported-symbols). -To correct this error, export the function. - -``` -// CORRECTED -export function myStrategy() { ... } - - ... - providers: [ - { provide: MyStrategy, useFactory: myStrategy } - ] - ... -``` -
    - -{@a function-calls-not-supported} -

    Function calls are not supported

    - -
    - -_Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function._ - -
    - -The compiler does not currently support [function expressions or lambda functions](#function-expression). -For example, you cannot set a provider's `useFactory` to an anonymous function or arrow function like this. - -``` -// ERROR - ... - providers: [ - { provide: MyStrategy, useFactory: function() { ... } }, - { provide: OtherStrategy, useFactory: () => { ... } } - ] - ... -``` -You also get this error if you call a function or method in a provider's `useValue`. -``` -// ERROR -import { calculateValue } from './utilities'; - - ... - providers: [ - { provide: SomeValue, useValue: calculateValue() } - ] - ... -``` - -To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead. - - -// CORRECTED -import { calculateValue } from './utilities'; - -export function myStrategy() { ... } -export function otherStrategy() { ... } -export function someValueFactory() { - return calculateValue(); -} - ... - providers: [ - { provide: MyStrategy, useFactory: myStrategy }, - { provide: OtherStrategy, useFactory: otherStrategy }, - { provide: SomeValue, useFactory: someValueFactory } - ] - ... - - -
    - -{@a destructured-variable-not-supported} -

    Destructured variable or constant not supported

    - -
    - -_Referencing an exported destructured variable or constant is not supported by the template compiler. Consider simplifying this to avoid destructuring._ - -
    - -The compiler does not support references to variables assigned by [destructuring](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#destructuring). - -For example, you cannot write something like this: - - -// ERROR -import { configuration } from './configuration'; - -// destructured assignment to foo and bar -const {foo, bar} = configuration; - ... - providers: [ - {provide: Foo, useValue: foo}, - {provide: Bar, useValue: bar}, - ] - ... - - -To correct this error, refer to non-destructured values. - - -// CORRECTED -import { configuration } from './configuration'; - ... - providers: [ - {provide: Foo, useValue: configuration.foo}, - {provide: Bar, useValue: configuration.bar}, - ] - ... - - -
    - -

    Could not resolve type

    - -The compiler encountered a type and can't determine which module exports that type. - -This can happen if you refer to an ambient type. -For example, the `Window` type is an ambiant type declared in the global `.d.ts` file. - -You'll get an error if you reference it in the component constructor, -which the compiler must statically analyze. - -``` -// ERROR -@Component({ }) -export class MyComponent { - constructor (private win: Window) { ... } -} -``` -TypeScript understands ambiant types so you don't import them. -The Angular compiler does not understand a type that you neglect to export or import. - -In this case, the compiler doesn't understand how to inject something with the `Window` token. - -Do not refer to ambient types in metadata expressions. - -If you must inject an instance of an ambiant type, -you can finesse the problem in four steps: - -1. Create an injection token for an instance of the ambiant type. -1. Create a factory function that returns that instance. -1. Add a `useFactory` provider with that factory function. -1. Use `@Inject` to inject the instance. - -Here's an illustrative example. - - -// CORRECTED -import { Inject } from '@angular/core'; - -export const WINDOW = new InjectionToken('Window'); -export function _window() { return window; } - -@Component({ - ... - providers: [ - { provide: WINDOW, useFactory: _window } - ] -}) -export class MyComponent { - constructor (@Inject(WINDOW) private win: Window) { ... } -} - - -The `Window` type in the constructor is no longer a problem for the compiler because it -uses the `@Inject(WINDOW)` to generate the injection code. - -Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs). - - -import { Inject } from '@angular/core'; -import { DOCUMENT } from '@angular/platform-browser'; - -@Component({ ... }) -export class MyComponent { - constructor (@Inject(DOCUMENT) private doc: Document) { ... } -} - -
    - -

    Name expected

    - -The compiler expected a name in an expression it was evaluating. -This can happen if you use a number as a property name as in the following example. - -``` -// ERROR -provider: [{ provide: Foo, useValue: { 0: 'test' } }] -``` - -Change the name of the property to something non-numeric. - -``` -// CORRECTED -provider: [{ provide: Foo, useValue: { '0': 'test' } }] -``` - -
    - -

    Unsupported enum member name

    - -Angular couldn't determine the value of the [enum member](https://www.typescriptlang.org/docs/handbook/enums.html) -that you referenced in metadata. - -The compiler can understand simple enum values but not complex values such as those derived from computed properties. - - -// ERROR -enum Colors { - Red = 1, - White, - Blue = "Blue".length // computed -} - - ... - providers: [ - { provide: BaseColor, useValue: Colors.White } // ok - { provide: DangerColor, useValue: Colors.Red } // ok - { provide: StrongColor, useValue: Colors.Blue } // bad - ] - ... - - -Avoid referring to enums with complicated initializers or computed properties. - -
    - -{@a tagged-template-expressions-not-supported} -

    Tagged template expressions are not supported

    - -
    - -_Tagged template expressions are not supported in metadata._ - -
    - -The compiler encountered a JavaScript ES2015 [tagged template expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) such as, -``` -// ERROR -const expression = 'funky'; -const raw = String.raw`A tagged template ${expression} string`; - ... - template: '
    ' + raw + '
    ' - ... -``` -[`String.raw()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw) -is a _tag function_ native to JavaScript ES2015. - -The AOT compiler does not support tagged template expressions; avoid them in metadata expressions. - -
    - -

    Symbol reference expected

    - -The compiler expected a reference to a symbol at the location specified in the error message. - -This error can occur if you use an expression in the `extends` clause of a class. - - -{@a binding-expression-validation} - - ## Phase 3: binding expression validation - - In the validation phase, the Angular template compiler uses the TypeScript compiler to validate the - binding expressions in templates. Enable this phase explicitly by adding the compiler - option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's `tsconfig.json` (see - [Angular Compiler Options](#compiler-options)). - - Template validation produces error messages when a type error is detected in a template binding - expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts` - file. - - For example, consider the following component: - - ```typescript - @Component({ - selector: 'my-component', - template: '{{person.addresss.street}}' - }) - class MyComponent { - person?: Person; - } - ``` - - This will produce the following error: - - ``` - my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'? - ``` - - The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file - generated by the template compiler that holds contents of the `MyComponent` class template. - Compiler never writes this file to disk. The line and column numbers are relative to the template string - in the `@Component` annotation of the class, `MyComponent` in this case. If a component uses - `templateUrl` instead of `template`, the errors are reported in the HTML file referenced by the - `templateUrl` instead of a synthetic file. - - The error location is the beginning of the text node that contains the interpolation expression with - the error. If the error is in an attribute binding such as `[value]="person.address.street"`, the error - location is the location of the attribute that contains the error. - - The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control - how detailed the type validation is. For example, if the `strictTypeChecks` is specified, the error ```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` is reported as well as the above error message. - - ### Type narrowing - - The expression used in an `ngIf` directive is used to narrow type unions in the Angular - template compiler, the same way the `if` expression does in TypeScript. For example, to avoid - `Object is possibly 'undefined'` error in the template above, modify it to only emit the - interpolation if the value of `person` is initialized as shown below: - - ```typescript - @Component({ - selector: 'my-component', - template: ' {{person.addresss.street}} ' - }) - class MyComponent { - person?: Person; - } - ``` - - Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the - binding expression will never be `undefined`. - - #### Custom `ngIf` like directives - - Directives that behave like `*ngIf` can declare that they want the same treatment by including - a static member marker that is a signal to the template compiler to treat them - like `*ngIf`. This static member for `*ngIf` is: - - ```typescript - public static ngIfUseIfTypeGuard: void; - ``` - - This declares that the input property `ngIf` of the `NgIf` directive should be treated as a - guard to the use of its template, implying that the template will only be instantiated if - the `ngIf` input property is true. - - - ### Non-null type assertion operator - - Use the [non-null type assertion operator](guide/template-syntax#non-null-assertion-operator) - to suppress the `Object is possibly 'undefined'` error when it is incovienent to use - `*ngIf` or when some constraint in the component ensures that the expression is always - non-null when the binding expression is interpolated. - - In the following example, the `person` and `address` properties are always set together, - implying that `address` is always non-null if `person` is non-null. There is no convenient - way to describe this constraint to TypeScript and the template compiler, but the error - is suppressed in the example by using `address!.street`. - - ```typescript - @Component({ - selector: 'my-component', - template: ' {{person.name}} lives on {{address!.street}} ' - }) - class MyComponent { - person?: Person; - address?: Address; - - setData(person: Person, address: Address) { - this.person = person; - this.address = address; - } - } - ``` - - The non-null assertion operator should be used sparingly as refactoring of the component - might break this constraint. - - In this example it is recommended to include the checking of `address` - in the `*ngIf`as shown below: - - ```typescript - @Component({ - selector: 'my-component', - template: ' {{person.name}} lives on {{address.street}} ' - }) - class MyComponent { - person?: Person; - address?: Address; - - setData(person: Person, address: Address) { - this.person = person; - this.address = address; - } - } - ``` - - ### Disabling type checking using `$any()` - - Disable checking of a binding expression by surrounding the expression - in a call to the [`$any()` cast pseudo-function](guide/template-syntax). - The compiler treats it as a cast to the `any` type just like in TypeScript when a `` - or `as any` cast is used. - - In the following example, the error `Property addresss does not exist` is suppressed - by casting `person` to the `any` type. - - ```typescript - @Component({ - selector: 'my-component', - template: '{{$any(person).addresss.street}}' - }) - class MyComponent { - person?: Person; - } - ``` -## Summary - -* What the AOT compiler does and why it is important. -* Why metadata must be written in a subset of JavaScript. -* What that subset is. -* Other restrictions on metadata definition. -* Macro-functions and macro-static methods. -* Compiler errors related to metadata. -* Validation of binding expressions diff --git a/docs_app/content/guide/api-page-class.md b/docs_app/content/guide/api-page-class.md deleted file mode 100644 index 989bd0f327..0000000000 --- a/docs_app/content/guide/api-page-class.md +++ /dev/null @@ -1,175 +0,0 @@ -
    - API / @core -
    -
    -

    Class Name

    -
    -
    - - -
    -

    Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.

    -
    -
    -

    Overview

    - 
    -        class Compiler {
-    compileModuleSync<T>(moduleType: Type<T>): NgModuleFactory<T>
-    compileModuleAsync<T>(moduleType: Type<T>): Promise<NgModuleFactory<T>>
-    compileModuleAndAllComponentsSync<T>(moduleType: Type<T>): ModuleWithComponentFactories<T>
-    compileModuleAndAllComponentsAsync<T>(moduleType: Type<T>): Promise<ModuleWithComponentFactories<T>>
-    clearCache(): void
-    clearCacheFor(type: Type<any>)
-    }
-
    -
    -
    -

    Description

    -

    The longer class description goes here which can include multiple paragraphs.

    -

    Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.

    -

    Subclasses

    - -

    See Also

    - -
    -
    -

    Constructor

    - - 
       
-        constructor(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
    -
    -
    -

    Properties

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    PropertyTypeDescription
    - Property1 - Description goes here
    - Property2 - TypeDescription goes here
    - Property3 - TypeDescription goes here
    -
    -
    -

    Methods

    - - - - - - - - - - - -
    Method1Name( )
    -

    Description goes here

    -
    -

    Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.

    -
    - - - - - - - - - - - -
    Method2Name( )
    -

    Description goes here

    -
    -
    Declaration
    - - 
    -                    class AnimationBuilder {build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory}
    -     -     -
    Parameters
    -
    Returns
    -

    Returns information and results goes here.

    -
    Errors
    -

    Error information goes here

    -
    -

    Further details provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.

    -
    Overloads
    - - - - - - - - - - - -
    - - 
       
-        constructor(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
    -     		Description goes here
    - - 
       
-        constructor(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
    -     		Description goes here
    -
    -
    Example: Descriptive Title of Method Example
    -

    Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.

    -
    -
    -
    -

    Example: Descriptive Title of Combined Example Goes Here

    -

    Intro description text about what the example is and how it can be used.

    - - 
       
-        constructor(element: any, keyframes: {
-        [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers: any[])
-
    -

    Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.

    -
    -
    \ No newline at end of file diff --git a/docs_app/content/guide/architecture-components.md b/docs_app/content/guide/architecture-components.md deleted file mode 100644 index 6441abfc45..0000000000 --- a/docs_app/content/guide/architecture-components.md +++ /dev/null @@ -1,180 +0,0 @@ -# Introduction to components - -Component - -A _component_ controls a patch of screen called a *view*. For example, individual components define and control each of the following views from the [Tutorial](tutorial/index): - -* The app root with the navigation links. -* The list of heroes. -* The hero editor. - -You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods. - -For example, the `HeroListComponent` has a `heroes` property that returns an array of heroes that it acquires from a service. `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list. - - - -Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()`. - -
    - -## Component metadata - -Metadata - -The `@Component` decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that `HeroListComponent` is just a class, with no special Angular notation or syntax at all. It's not a component until mark it as one with the `@Component` decorator. - -The metadata for a component tells Angular where to get the major building blocks it needs to create and present the component and its view. In particular, it associates a _template_ with the component, either directly with inline code, or by reference. Together, the component and its template describe a _view_. - -In addition to containing or pointing to the template, the `@Component` metadata configures, for example, how the component can be referenced in HTML and what services it requires. - - Here's an example of basic metadata for `HeroListComponent`: - - - - This example shows some of the most useful `@Component` configuration options: - -* `selector`: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML. For example, if an app's HTML contains ``, then -Angular inserts an instance of the `HeroListComponent` view between those tags. - -* `templateUrl`: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline, as the value of the `template` property. This template defines the component's _host view_. - -* `providers`: An array of **dependency injection providers** for services that the component requires. In the example, this tells Angular that the component's constructor requires a `HeroService` instance -in order to get the list of heroes to display. - -
    - -## Templates and views - -Template - -You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component. - -Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's _host view_. The component can also define a _view hierarchy_, which contains _embedded views_, hosted by other components. - -
    -Component tree -
    - -A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules. - -## Template syntax - -A template looks like regular HTML, except that it also contains Angular [template syntax](guide/template-syntax), which alters the HTML based on your app's logic and the state of app and DOM data. Your template can use _data binding_ to coordinate the app and DOM data, _pipes_ to transform data before it is displayed, and _directives_ to apply app logic to what gets displayed. - -For example, here is a template for the Tutorial's `HeroListComponent`: - - - -This template uses typical HTML elements like `

    ` and `

    `, and also includes Angular template-syntax elements, `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and ``. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data. - -* The `*ngFor` directive tells Angular to iterate over a list. -* The `{{hero.name}}`, `(click)`, and `[hero]` bind program data to and from the DOM, responding to user input. See more about [data binding](#data-binding) below. -* The `` tag in the example is an element that represents a new component, `HeroDetailComponent`. The `HeroDetailComponent` (code not shown) is a child component of the `HeroListComponent` that defines the Hero-detail view. Notice how custom components like this mix seamlessly with native HTML in the same layouts. - -### Data binding - -Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced jQuery programmer can attest. - -Angular supports *two-way data binding*, a mechanism for coordinating parts of a template with parts of a component. Add binding markup to the template HTML to tell Angular how to connect both sides. - -The following diagram shows the four forms of data binding markup. Each form has a direction—to the DOM, from the DOM, or in both directions. - -

    -Data Binding -
    - -This example from the `HeroListComponent` template uses three of these forms: - - - -* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation) -displays the component's `hero.name` property value within the `
  • ` element. - -* The `[hero]` [*property binding*](guide/template-syntax#property-binding) passes the value of `selectedHero` from -the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`. - -* The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name. - -**Two-way data binding** is an important fourth form that combines property and event binding in a single notation. Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive: - - - -In two-way binding, a data property value flows to the input box from the component as with property binding. -The user's changes also flow back to the component, resetting the property to the latest value, -as with event binding. - -Angular processes *all* data bindings once per JavaScript event cycle, -from the root of the application component tree through all child components. - -
    - Data Binding -
    - -Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components. - -
    - Parent/Child binding -
    - -### Pipes - - Angular pipes let you declare display-value transformations in your template HTML. A class with the `@Pipe` decorator defines a function that transforms input values to output values for display in a view. - - Angular defines various pipes, such as the [date](https://angular.io/api/common/DatePipe) pipe and [currency](https://angular.io/api/common/CurrencyPipe) pipe; for a complete list, see the [Pipes API list](https://angular.io/api?type=pipe). You can also define new pipes. - - To specify a value transformation in an HTML template, use the [pipe operator (|)](https://angular.io/guide/template-syntax#pipe): - - `{{interpolated_value | pipe_name}}` - - You can chain pipes, sending the output of one pipe function to be transformed by another pipe function. A pipe can also take arguments that control how it performs its transformation. For example, you can pass the desired format to the `date` pipe: - - ``` - -

    Today is {{today | date}}

    - - -

    The date is {{today | date:'fullDate'}}

    - - -

    The time is {{today | date:'shortTime'}}

    -``` - -
    - -### Directives - -Directives - -Angular templates are *dynamic*. When Angular renders them, it transforms the DOM according to the instructions given by *directives*. A directive is a class with a `@Directive` decorator. - -A component is technically a directive - but components are so distinctive and central to Angular applications that Angular defines the `@Component` decorator, which extends the `@Directive` decorator with template-oriented features. - -There are two kinds of directives besides components: _structural_ and _attribute_ directives. Just as for components, the metadata for a directive associates the class with a `selector` that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding. - -#### Structural directives - -Structural directives alter layout by adding, removing, and replacing elements in DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered: - - - - * [`*ngFor`](guide/displaying-data#ngFor) is an iterative; it tells Angular to stamp out one `
  • ` per hero in the `heroes` list. - * [`*ngIf`](guide/displaying-data#ngIf) is a conditional; it includes the `HeroDetail` component only if a selected hero exists. - -#### Attribute directives - -Attribute directives alter the appearance or behavior of an existing element. -In templates they look like regular HTML attributes, hence the name. - -The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive. `ngModel` modifies the behavior of an existing element (typically an ``) by setting its display value property and responding to change events. - - - -Angular has more pre-defined directives that either alter the layout structure -(for example, [ngSwitch](guide/template-syntax#ngSwitch)) -or modify aspects of DOM elements and components -(for example, [ngStyle](guide/template-syntax#ngStyle) and [ngClass](guide/template-syntax#ngClass)). - -You can also write your own directives. Components such as `HeroListComponent` are one kind of custom directive. You can also create custom structural and attribute directives. - - \ No newline at end of file diff --git a/docs_app/content/guide/architecture-modules.md b/docs_app/content/guide/architecture-modules.md deleted file mode 100644 index 5e0af13e81..0000000000 --- a/docs_app/content/guide/architecture-modules.md +++ /dev/null @@ -1,107 +0,0 @@ -# Introduction to modules - -Module - -Angular apps are modular and Angular has its own modularity system called _NgModules_. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule. It can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules. - -Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping), which is conventionally named `AppModule` and resides in a file named `app.module.ts`. You launch your app by *bootstrapping* the root NgModule. - -While a small application might have only one NgModule, most apps have many more _feature modules_. The _root_ NgModule for an app is so named because it can include child NgModules in a hierarchy of any depth. - -## NgModule metadata - -An NgModule is defined as a class decorated with `@NgModule`. The `@NgModule` decorator is a function that takes a single metadata object, whose properties describe the module. The most important properties are as follows. - -* `declarations`—The [components](guide/architecture-components), _directives_, and _pipes_ that belong to this NgModule. - -* `exports`—The subset of declarations that should be visible and usable in the _component templates_ of other NgModules. - -* `imports`—Other modules whose exported classes are needed by component templates declared in _this_ NgModule. - -* `providers`—Creators of [services](guide/architecture-services) that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.) - -* `bootstrap`—The main application view, called the _root component_, which hosts all other app views. Only the _root NgModule_ should set this `bootstrap` property. - -Here's a simple root NgModule definition: - - - -
    - - The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root NgModule has no reason to _export_ anything because other modules don't need to _import_ the root NgModule. - -
    - -## NgModules and components - -NgModules provide a _compilation context_ for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context. - -
    - -Component compilation context - -
    - -
    - -A component and its template together define a _view_. A component can contain a _view hierarchy_, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries. - -
    - -View hierarchy - -
    - -
    - -When you create a component, it is associated directly with a single view, called the _host view_. The host view can be the root of a view hierarchy, which can contain _embedded views_, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth. - -
    - The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data. -
    - -## NgModules and JavaScript modules - -The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are two different and _complementary_ module systems. You can use them both to write your apps. - -In JavaScript each _file_ is a module and all objects defined in the file belong to that module. -The module declares some objects to be public by marking them with the `export` key word. -Other JavaScript modules use *import statements* to access public objects from other modules. - - - - - -
    - Learn more about the JavaScript module system on the web. -
    - -## Angular libraries - -Component - -Angular ships as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the `@angular` prefix. Install them with the `npm` package manager and import parts of them with JavaScript `import` statements. - -
    - -For example, import Angular's `Component` decorator from the `@angular/core` library like this: - - - -You also import NgModules from Angular _libraries_ using JavaScript import statements: - - - -In the example of the simple root module above, the application module needs material from within the `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this. - - - -In this way you're using both the Angular and JavaScript module systems _together_. Although it's easy to confuse the two systems, which share the common vocabulary of "imports" and "exports", you will become familiar with the different contexts in which they are used. - -
    - - Learn more from the [NgModules](guide/ngmodules) page. - -
    - -
    diff --git a/docs_app/content/guide/architecture-next-steps.md b/docs_app/content/guide/architecture-next-steps.md deleted file mode 100644 index 713d206c68..0000000000 --- a/docs_app/content/guide/architecture-next-steps.md +++ /dev/null @@ -1,48 +0,0 @@ -# Next steps: tools and techniques - -Once you have understood the basic building blocks, you can begin to learn more about the features and tools that are available to help you develop and deliver Angular applications. Angular provides a lot more features and services that are covered in this documentation. - -#### Responsive programming tools - - * [Lifecycle hooks](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, by implementing the lifecycle hook interfaces. - - * [Observables and event processing](guide/observables): How to use observables with components and services to publish and subscribe to messages of any type, such as user-interaction events and asynchronous operation results. - -#### Client-server interaction tools - - * [HTTP](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. - - * [Server-side Rendering](guide/universal): Angular Universal generates static application pages on the server through server-side rendering (SSR). This allows you to run your Angular app on the server in order to improve performance and show the first page quickly on mobile and low-powered devices, and also facilitate web crawlers. - - * [Service Workers](guide/service-worker-intro): A service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept outgoing HTTP requests and can, for example, deliver a cached response if one is available. You can significantly improve the user experience by using a service worker to reduce dependency on the network. - -#### Domain-specific libraries - - * [Animations](guide/animations): Animate component behavior -without deep knowledge of animation techniques or CSS with Angular's animation library. - - * [Forms](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking. - -#### Support for the development cycle - - * [Testing Platform](guide/testing): Run unit tests on your application parts as they interact with the Angular framework. - - * [Internationalization](guide/i18n): Angular's internationalization (i18n) tools can help you make your app available in multiple languages. - - * [Compilation](guide/aot-compiler): Angular provides just-in-time (JIT) compilation for the development environment, and ahead-of-time (AOT) compilation for the production environment. - - * [Security guidelines](guide/security): Learn about Angular's built-in protections against common web-app vulnerabilities and attacks such as cross-site scripting attacks. - -#### Setup and deployment tools - - * [Setup for local development](guide/setup): Learn how to set up a new project for development with QuickStart. - - * [Installation](guide/npm-packages): The [Angular CLI](https://cli.angular.io/), Angular applications, and Angular itself depend on features and functionality provided by libraries that are available as [npm](https://docs.npmjs.com/) packages. - - * [Typescript Configuration](guide/typescript-configuration): TypeScript is the primary language for Angular application development. - - * [Browser support](guide/browser-support): Learn how to make your apps compatible across a wide range of browsers. - - * [Deployment](guide/deployment): Learn techniques for deploying your Angular application to a remote server. - -
    diff --git a/docs_app/content/guide/architecture-services.md b/docs_app/content/guide/architecture-services.md deleted file mode 100644 index 7e73d7b399..0000000000 --- a/docs_app/content/guide/architecture-services.md +++ /dev/null @@ -1,76 +0,0 @@ -# Introduction to services and dependency injection - -Service - -_Service_ is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. -
    - -Angular distinguishes components from services in order to increase modularity and reusability. - -* By separating a component's view-related functionality from other kinds of processing, you can make your component classes lean and efficient. Ideally, a component's job is to enable the user experience and nothing more. It should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a _model_). - -* A component should not need to define things like how to fetch data from the server, validate user input, or log directly to the console. Instead, it can delegate such tasks to services. By defining that kind of processing task in an injectable service class, you make it available to any component. You can also make your app more adaptable by injecting different providers of the same kind of service, as appropriate in different circumstances. - -Angular doesn't *enforce* these principles. Angular does help you *follow* these principles by making it easy to factor your -application logic into services and make those services available to components through *dependency injection*. - -## Service examples - -Here's an example of a service class that logs to the browser console: - - - -Services can depend on other services. For example, here's a `HeroService` that depends on the `Logger` service, and also uses `BackendService` to get heroes. That service in turn might depend on the `HttpClient` service to fetch heroes asynchronously from a server. - - - -
    - -## Dependency injection - -Service - -Components consume services; that is, you can *inject* a service into a component, giving the component access to that service class. - -To define a class as a service in Angular, use the `@Injectable` decorator to provide the metadata that allows Angular to inject it into a component as a *dependency*. - -Similarly, use the `@Injectable` decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) _has_ a dependency. A dependency doesn't have to be a service—it could be a function, for example, or a value. - -*Dependency injection* (often called DI) is wired into the Angular framework and used everywhere to provide new components with the services or other things they need. - -* The *injector* is the main mechanism. You don't have to create an Angular injector. Angular creates an application-wide injector for you during the bootstrap process. - -* The injector maintains a *container* of dependency instances that it has already created, and reuses them if possible. - -* A *provider* is a recipe for creating a dependency. For a service, this is typically the service class itself. For any dependency you need in your app, you must register a provider with the app's injector, so that the injector can use it to create new instances. - -When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the types of its constructor parameters. For example, the constructor of `HeroListComponent` needs a `HeroService`: - - - -When Angular discovers that a component depends on a service, it first checks if the injector already has any existing instances of that service. If a requested service instance does not yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular. - -When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments. - -The process of `HeroService` injection looks something like this: - -
    - Service -
    - -### Providing services - -You must register at least one *provider* of any service you are going to use. You can register providers in modules or in components. - -* When you add providers to the [root module](guide/architecture-modules), the same instance of a service is available to all components in your app. - - - -* When you register a provider at the component level, you get a new instance of the -service with each new instance of that component. At the component level, register a service provider in the `providers` property of the `@Component` metadata: - - - -For more detailed information, see the [Dependency Injection](guide/dependency-injection) section. - -
    diff --git a/docs_app/content/guide/architecture.md b/docs_app/content/guide/architecture.md deleted file mode 100644 index e1d37bff6c..0000000000 --- a/docs_app/content/guide/architecture.md +++ /dev/null @@ -1,137 +0,0 @@ -# Architecture overview - -Angular is a platform and framework for building client applications in HTML and TypeScript. -Angular is itself written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps. - -The basic building blocks of an Angular application are _NgModules_, which provide a compilation context for _components_. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a _root module_ that enables bootstrapping, and typically has many more _feature modules_. - -* Components define *views*, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Every app has at least a root component. - -* Components use *services*, which provide specific functionality not directly related to views. Service providers can be *injected* into components as *dependencies*, making your code modular, reusable, and efficient. - -Both components and services are simply classes, with *decorators* that mark their type and provide metadata that tells Angular how to use them. - -* The metadata for a component class associates it with a *template* that defines a view. A template combines ordinary HTML with Angular *directives* and *binding markup* that allow Angular to modify the HTML before rendering it for display. - -* The metadata for a service class provides the information Angular needs to make it available to components through *Dependency Injection (DI)*. - -An app's components typically define many views, arranged hierarchically. Angular provides the `Router` service to help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities. - -## Modules - -Angular defines the `NgModule`, which differs from and complements the JavaScript (ES2015) module. An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities. An NgModule can associate its components with related code, such as services, to form functional units. - -Every Angular app has a _root module_, conventionally named `AppModule`, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules. - -Like JavaScript modules, NgModules can import functionality from other NgModules, and allow their own functionality to be exported and used by other NgModules. For example, to use the router service in your app, you import the `Router` NgModule. - -Organizing your code into distinct functional modules helps in managing development of complex applications, and in designing for reusability. In addition, this technique lets you take advantage of _lazy-loading_—that is, loading modules on demand—in order to minimize the amount of code that needs to be loaded at startup. - -
    - - For a more detailed discussion, see [Introduction to modules](guide/architecture-modules). - -
    - -## Components - -Every Angular application has at least one component, the *root component* that connects a component hierarchy with the page DOM. Each component defines a class that contains application data and logic, and is associated with an HTML *template* that defines a view to be displayed in a target environment. - -The `@Component` decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata. - -
    - - Decorators are functions that modify JavaScript classes. Angular defines a number of such decorators that attach specific kinds of metadata to classes, so that it knows what those classes mean and how they should work. - - Learn more about decorators on the web. - -
    - -### Templates, directives, and data binding - -A template combines HTML with Angular markup that can modify the HTML elements before they are displayed. -Template *directives* provide program logic, and *binding markup* connects your application data and the document object model (DOM). - -* *Event binding* lets your app respond to user input in the target environment by updating your application data. -* *Property binding* lets you interpolate values that are computed from your application data into the HTML. - -Before a view is displayed, Angular evaluates the directives and resolves the binding syntax in the template to modify the HTML elements and the DOM, according to your program data and logic. Angular supports *two-way data binding*, meaning that changes in the DOM, such as user choices, can also be reflected back into your program data. - -Your templates can also use *pipes* to improve the user experience by transforming values for display. Use pipes to display, for example, dates and currency values in a way appropriate to the user's locale. Angular provides predefined pipes for common transformations, and you can also define your own. - -
    - - For a more detailed discussion of these concepts, see [Introduction to components](guide/architecture-components). - -
    - -{@a dependency-injection} - - -## Services and dependency injection - -For data or logic that is not associated with a specific view, and that you want to share across components, you create a *service* class. A service class definition is immediately preceded by the `@Injectable` decorator. The decorator provides the metadata that allows your service to be *injected* into client components as a dependency. - - *Dependency injection* (or DI) lets you keep your component classes lean and efficient. They don't fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services. - -
    - - For a more detailed discusssion, see [Introduction to services and DI](guide/architecture-services). - -
    - -### Routing - -The Angular `Router` NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app. It is modeled on the familiar browser navigation conventions: - -* Enter a URL in the address bar and the browser navigates to a corresponding page. -* Click links on the page and the browser navigates to a new page. -* Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen. - -The router maps URL-like paths to views instead of pages. When a user performs an action, such as clicking a link, that would load a new page in the browser, the router intercepts the browser's behavior, and shows or hides view hierarchies. - -If the router determines that the current application state requires particular functionality, and the module that defines it has not been loaded, the router can _lazy-load_ the module on demand. - -The router interprets a link URL according to your app's view navigation rules and data state. You can navigate to new views when the user clicks a button, selects from a drop box, or in response to some other stimulus from any source. The Router logs activity in the browser's history journal, so the back and forward buttons work as well. - -To define navigation rules, you associate *navigation paths* with your components. A path uses a URL-like syntax that integrates your program data, in much the same way that template syntax integrates your views with your program data. You can then apply program logic to choose which views to show or to hide, in response to user input and your own access rules. - -
    - - For a more detailed discussion, see [Routing and navigation](guide/router). - -
    - -
    - -## What's next - -You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related. - -
    - overview -
    - -* Together, a component and template define an Angular view. - * A decorator on a component class adds the metadata, including a pointer to the associated template. - * Directives and binding markup in a component's template modify views based on program data and logic. -* The dependency injector provides services to a component, such as the router service that lets you define navigation among views. - -Each of these subjects is introduced in more detail in the following pages. - -* [Modules](guide/architecture-modules) -* [Components](guide/architecture-components) - * [Templates](guide/architecture-components#templates-and-views) - * [Metadata](guide/architecture-components#component-metadata) - * [Data binding](guide/architecture-components#data-binding) - * [Directives](guide/architecture-components#directives) - * [Pipes](guide/architecture-components#pipes) -* [Services and dependency injection](guide/architecture-services) - -
    - - Note that the code referenced on these pages is available as a . -
    - -When you are familiar with these fundamental building blocks, you can explore them in more detail in the documentation. To learn about more tools and techniques that are available to help you build and deploy Angular applications, see [Next steps](guide/architecture-next-steps). - diff --git a/docs_app/content/guide/attribute-directives.md b/docs_app/content/guide/attribute-directives.md deleted file mode 100644 index f3ab4d5e54..0000000000 --- a/docs_app/content/guide/attribute-directives.md +++ /dev/null @@ -1,385 +0,0 @@ -# Attribute Directives - -An **Attribute** directive changes the appearance or behavior of a DOM element. - -Try the . - -{@a directive-overview} - -## Directives overview - -There are three kinds of directives in Angular: - -1. Components—directives with a template. -1. Structural directives—change the DOM layout by adding and removing DOM elements. -1. Attribute directives—change the appearance or behavior of an element, component, or another directive. - -*Components* are the most common of the three directives. -You saw a component for the first time in the [QuickStart](guide/quickstart) guide. - -*Structural Directives* change the structure of the view. -Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf). -Learn about them in the [Structural Directives](guide/structural-directives) guide. - -*Attribute directives* are used as attributes of elements. -The built-in [NgStyle](guide/template-syntax#ngStyle) directive in the -[Template Syntax](guide/template-syntax) guide, for example, -can change several element styles at the same time. - -## Build a simple attribute directive - -An attribute directive minimally requires building a controller class annotated with -`@Directive`, which specifies the selector that identifies -the attribute. -The controller class implements the desired directive behavior. - -This page demonstrates building a simple _appHighlight_ attribute -directive to set an element's background color -when the user hovers over that element. You can apply it like this: - - - -{@a write-directive} - -### Write the directive code - -Create the directive class file in a terminal window with this CLI command. - - -ng generate directive highlight - - -The CLI creates `src/app/highlight.directive.ts`, a corresponding test file (`.../spec.ts`, and _declares_ the directive class in the root `AppModule`. - -
    - -_Directives_ must be declared in [Angular Modules](guide/ngmodules) in the same manner as _components_. - -
    - -The generated `src/app/highlight.directive.ts` is as follows: - - - -The imported `Directive` symbol provides the Angular the `@Directive` decorator. - -The `@Directive` decorator's lone configuration property specifies the directive's -[CSS attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), `[appHighlight]`. - -It's the brackets (`[]`) that make it an attribute selector. -Angular locates each element in the template that has an attribute named `appHighlight` and applies the logic of this directive to that element. - -The _attribute selector_ pattern explains the name of this kind of directive. - -
    - -#### Why not "highlight"? - -Though *highlight* would be a more concise selector than *appHighlight* and it would work, -the best practice is to prefix selector names to ensure -they don't conflict with standard HTML attributes. -This also reduces the risk of colliding with third-party directive names. -The CLI added the `app` prefix for you. - -Make sure you do **not** prefix the `highlight` directive name with **`ng`** because -that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose. - -
    - -After the `@Directive` metadata comes the directive's controller class, -called `HighlightDirective`, which contains the (currently empty) logic for the directive. -Exporting `HighlightDirective` makes the directive accessible. - -Now edit the generated `src/app/highlight.directive.ts` to look as follows: - - - -The `import` statement specifies an additional `ElementRef` symbol from the Angular `core` library: - -You use the `ElementRef`in the directive's constructor -to [inject](guide/dependency-injection) a reference to the host DOM element, -the element to which you applied `appHighlight`. - -`ElementRef` grants direct access to the host DOM element -through its `nativeElement` property. - -This first implementation sets the background color of the host element to yellow. - -{@a apply-directive} - -## Apply the attribute directive - -To use the new `HighlightDirective`, add a paragraph (`

    `) element to the template of the root `AppComponent` and apply the directive as an attribute. - - - -Now run the application to see the `HighlightDirective` in action. - - - -ng serve - - -To summarize, Angular found the `appHighlight` attribute on the **host** `

    ` element. -It created an instance of the `HighlightDirective` class and -injected a reference to the `

    ` element into the directive's constructor -which sets the `

    ` element's background style to yellow. - -{@a respond-to-user} - -## Respond to user-initiated events - -Currently, `appHighlight` simply sets an element color. -The directive could be more dynamic. -It could detect when the user mouses into or out of the element -and respond by setting or clearing the highlight color. - -Begin by adding `HostListener` to the list of imported symbols. - - - -Then add two eventhandlers that respond when the mouse enters or leaves, -each adorned by the `HostListener` decorator. - - - -The `@HostListener` decorator lets you subscribe to events of the DOM -element that hosts an attribute directive, the `

    ` in this case. - -

    - -Of course you could reach into the DOM with standard JavaScript and attach event listeners manually. -There are at least three problems with _that_ approach: - -1. You have to write the listeners correctly. -1. The code must *detach* the listener when the directive is destroyed to avoid memory leaks. -1. Talking to DOM API directly isn't a best practice. - -
    - -The handlers delegate to a helper method that sets the color on the host DOM element, `el`. - -The helper method, `highlight`, was extracted from the constructor. -The revised constructor simply declares the injected `el: ElementRef`. - - - -Here's the updated directive in full: - - - -Run the app and confirm that the background color appears when -the mouse hovers over the `p` and disappears as it moves out. - -
    - Second Highlight -
    - -{@a bindings} - -## Pass values into the directive with an _@Input_ data binding - -Currently the highlight color is hard-coded _within_ the directive. That's inflexible. -In this section, you give the developer the power to set the highlight color while applying the directive. - -Begin by adding `Input` to the list of symbols imported from `@angular/core`. - - -Add a `highlightColor` property to the directive class like this: - - - -{@a input} - -### Binding to an _@Input_ property - -Notice the `@Input` decorator. It adds metadata to the class that makes the directive's `highlightColor` property available for binding. - -It's called an *input* property because data flows from the binding expression _into_ the directive. -Without that input metadata, Angular rejects the binding; see [below](guide/attribute-directives#why-input "Why add @Input?") for more about that. - -Try it by adding the following directive binding variations to the `AppComponent` template: - - - -Add a `color` property to the `AppComponent`. - - - -Let it control the highlight color with a property binding. - - - -That's good, but it would be nice to _simultaneously_ apply the directive and set the color _in the same attribute_ like this. - - - -The `[appHighlight]` attribute binding both applies the highlighting directive to the `

    ` element -and sets the directive's highlight color with a property binding. -You're re-using the directive's attribute selector (`[appHighlight]`) to do both jobs. -That's a crisp, compact syntax. - -You'll have to rename the directive's `highlightColor` property to `appHighlight` because that's now the color property binding name. - - - -This is disagreeable. The word, `appHighlight`, is a terrible property name and it doesn't convey the property's intent. - -{@a input-alias} - -### Bind to an _@Input_ alias - -Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes. - -Restore the original property name and specify the selector as the alias in the argument to `@Input`. - - - -_Inside_ the directive the property is known as `highlightColor`. -_Outside_ the directive, where you bind to it, it's known as `appHighlight`. - -You get the best of both worlds: the property name you want and the binding syntax you want: - - - -Now that you're binding via the alias to the `highlightColor`, modify the `onMouseEnter()` method to use that property. -If someone neglects to bind to `appHighlightColor`, highlight the host element in red: - - - -Here's the latest version of the directive class. - - - -## Write a harness to try it - -It may be difficult to imagine how this directive actually works. -In this section, you'll turn `AppComponent` into a harness that -lets you pick the highlight color with a radio button and bind your color choice to the directive. - -Update app.component.html as follows: - - - -Revise the `AppComponent.color` so that it has no initial value. - - - -Here are the harness and directive in action. - -

    - Highlight v.2 -
    - -{@a second-property} - -## Bind to a second property - -This highlight directive has a single customizable property. In a real app, it may need more. - -At the moment, the default color—the color that prevails until -the user picks a highlight color—is hard-coded as "red". -Let the template developer set the default color. - -Add a second **input** property to `HighlightDirective` called `defaultColor`: - - - -Revise the directive's `onMouseEnter` so that it first tries to highlight with the `highlightColor`, -then with the `defaultColor`, and falls back to "red" if both properties are undefined. - - - -How do you bind to a second property when you're already binding to the `appHighlight` attribute name? - -As with components, you can add as many directive property bindings as you need by stringing them along in the template. -The developer should be able to write the following template HTML to both bind to the `AppComponent.color` -and fall back to "violet" as the default color. - - - -Angular knows that the `defaultColor` binding belongs to the `HighlightDirective` -because you made it _public_ with the `@Input` decorator. - -Here's how the harness should work when you're done coding. - -
    - Final Highlight -
    - -## Summary - -This page covered how to: - -* [Build an **attribute directive**](guide/attribute-directives#write-directive) that modifies the behavior of an element. -* [Apply the directive](guide/attribute-directives#apply-directive) to an element in a template. -* [Respond to **events**](guide/attribute-directives#respond-to-user) that change the directive's behavior. -* [**Bind** values to the directive](guide/attribute-directives#bindings). - -The final source code follows: - - - - - - - - - - - - -You can also experience and download the . - -{@a why-input} - -### Appendix: Why add _@Input_? - -In this demo, the `highlightColor` property is an ***input*** property of -the `HighlightDirective`. You've seen it applied without an alias: - - - -You've seen it with an alias: - - - -Either way, the `@Input` decorator tells Angular that this property is -_public_ and available for binding by a parent component. -Without `@Input`, Angular refuses to bind to the property. - -You've bound template HTML to component properties before and never used `@Input`. -What's different? - -The difference is a matter of trust. -Angular treats a component's template as _belonging_ to the component. -The component and its template trust each other implicitly. -Therefore, the component's own template may bind to _any_ property of that component, -with or without the `@Input` decorator. - -But a component or directive shouldn't blindly trust _other_ components and directives. -The properties of a component or directive are hidden from binding by default. -They are _private_ from an Angular binding perspective. -When adorned with the `@Input` decorator, the property becomes _public_ from an Angular binding perspective. -Only then can it be bound by some other component or directive. - -You can tell if `@Input` is needed by the position of the property name in a binding. - -* When it appears in the template expression to the ***right*** of the equals (=), - it belongs to the template's component and does not require the `@Input` decorator. - -* When it appears in **square brackets** ([ ]) to the **left** of the equals (=), - the property belongs to some _other_ component or directive; - that property must be adorned with the `@Input` decorator. - -Now apply that reasoning to the following example: - - - -* The `color` property in the expression on the right belongs to the template's component. - The template and its component trust each other. - The `color` property doesn't require the `@Input` decorator. - -* The `appHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`, - not a property of the template's component. There are trust issues. - Therefore, the directive property must carry the `@Input` decorator. diff --git a/docs_app/content/guide/bootstrapping.md b/docs_app/content/guide/bootstrapping.md deleted file mode 100644 index 046555b18d..0000000000 --- a/docs_app/content/guide/bootstrapping.md +++ /dev/null @@ -1,180 +0,0 @@ -# Bootstrapping - -#### Prerequisites - -A basic understanding of the following: -* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule). - -
    - -An NgModule describes how the application parts fit together. -Every application has at least one Angular module, the _root_ module -that you bootstrap to launch the application. -By convention, it is usually called `AppModule`. - -If you use the CLI to generate an app, the default `AppModule` is as follows: - -```typescript -/* JavaScript imports */ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -import { AppComponent } from './app.component'; - -/* the AppModule class with the @NgModule decorator */ -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } - -``` - -After the import statements is a class with the -**`@NgModule`** [decorator](guide/glossary#decorator '"Decorator" explained'). - -The `@NgModule` decorator identifies `AppModule` as an `NgModule` class. -`@NgModule` takes a metadata object that tells Angular how to compile and launch the application. - -* **_declarations_**—this application's lone component. -* **_imports_**—import `BrowserModule` to have browser specific services such as DOM rendering, sanitization, and location. -* **_providers_**—the service providers. -* **_bootstrap_**—the _root_ component that Angular creates and inserts -into the `index.html` host web page. - -The default CLI application only has one component, `AppComponent`, so it -is in both the `declarations` and the `bootstrap` arrays. - -{@a declarations} - -## The `declarations` array - -The module's `declarations` array tells Angular which components belong to that module. -As you create more components, add them to `declarations`. - -You must declare every component in exactly one `NgModule` class. -If you use a component without declaring it, Angular returns an -error message. - -The `declarations` array only takes declarables. Declarables -are components, [directives](guide/attribute-directives) and [pipes](guide/pipes). -All of a module's declarables must be in the `declarations` array. -Declarables must belong to exactly one module. The compiler emits -an error if you try to declare the same class in more than one module. - -These declared classes are visible within the module but invisible -to components in a different module unless they are exported from -this module and the other module imports this one. - -An example of what goes into a declarations array follows: - -```typescript - declarations: [ - YourComponent, - YourPipe, - YourDirective - ], -``` - -A declarable can only belong to one module, so only declare it in -one `@NgModule`. When you need it elsewhere, -import the module that has the declarable you need in it. - -**Only `@NgModule` references** go in the `imports` array. - - -### Using directives with `@NgModule` - -Use the `declarations` array for directives. -To use a directive, component, or pipe in a module, you must do a few things: - -1. Export it from the file where you wrote it. -2. Import it into the appropriate module. -3. Declare it in the `@NgModule` `declarations` array. - - -Those three steps look like the following. In the file where you create your directive, export it. -The following example, named `ItemDirective` is the default directive structure that the CLI generates in its own file, `item.directive.ts`: - - - - -The key point here is that you have to export it so you can import it elsewhere. Next, import it -into the NgModule, in this example `app.module.ts`, with a JavaScript import statement: - - - - -And in the same file, add it to the `@NgModule` `declarations` array: - - - - - -Now you could use your `ItemDirective` in a component. This example uses `AppModule`, but you'd do it the same way for a feature module. For more about directives, see [Attribute Directives](guide/attribute-directives) and [Structural Directives](guide/structural-directives). You'd also use the same technique for [pipes](guide/pipes) and components. - -Remember, components, directives, and pipes belong to one module only. You only need to declare them once in your app because you share them by importing the necessary modules. This saves you time and helps keep your app lean. - - - - -{@a imports} - -## The `imports` array - -The module's `imports` array appears exclusively in the `@NgModule` metadata object. -It tells Angular about other NgModules that this particular module needs to function properly. - -This list of modules are those that export components, directives, or pipes -that the component templates in this module reference. In this case, the component is -`AppComponent`, which references components, directives, or pipes in `BrowserModule`, -`FormsModule`, or `HttpModule`. -A component template can reference another component, directive, -or pipe when the referenced class is declared in this module or -the class was imported from another module. - -You don't have any services to provide yet. -But you will create some before long and you may chose to provide many of them here. - -{@a bootstrap-array} - -## The `providers` array - -The providers array is where you list the services the app needs. When -you list services here, they are available app-wide. You can scope -them when using feature modules and lazy loading. For more information, see -[Providers](guide/providers). - -## The `bootstrap` array - -The application launches by bootstrapping the root `AppModule`, which is -also referred to as an `entryComponent`. -Among other things, the bootstrapping process creates the component(s) listed in the `bootstrap` array -and inserts each one into the browser DOM. - -Each bootstrapped component is the base of its own tree of components. -Inserting a bootstrapped component usually triggers a cascade of -component creations that fill out that tree. - -While you can put more than one component tree on a host web page, -most applications have only one component tree and bootstrap a single root component. - -This one root component is usually called `AppComponent` and is in the -root module's `bootstrap` array. - - - -## More about Angular Modules - -For more on NgModules you're likely to see frequently in apps, -see [Frequently Used Modules](#). diff --git a/docs_app/content/guide/browser-support.md b/docs_app/content/guide/browser-support.md deleted file mode 100644 index 9c91a715d8..0000000000 --- a/docs_app/content/guide/browser-support.md +++ /dev/null @@ -1,580 +0,0 @@ -# Browser support - -Angular supports most recent browsers. This includes the following specific versions: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Browser - - Supported versions -
    - Chrome - - latest -
    - Firefox - - latest -
    - Edge - - 2 most recent major versions -
    - IE - - 11
    10
    9 -
    - IE Mobile - - 11 -
    - Safari - - 2 most recent major versions -
    - iOS - - 2 most recent major versions -
    - Android - - Nougat (7.0)
    Marshmallow (6.0)
    Lollipop (5.0, 5.1)
    KitKat (4.4) -
    - -
    - -Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, -using SauceLabs and -Browserstack. - -
    - - -## Polyfills - -Angular is built on the latest standards of the web platform. -Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. - -You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support. -The [table below](#polyfill-libs) identifies most of the polyfills you might need. - -
    - -The suggested polyfills are the ones that run full Angular applications. -You may need additional polyfills to support features not covered by this list. -Note that polyfills cannot magically transform an old, slow browser into a modern, fast one. - -
    - -## Enabling polyfills - -[Angular CLI](https://github.com/angular/angular-cli/wiki) users enable polyfills through the `src/polyfills.ts` file that -the CLI created with your project. - -This file incorporates the mandatory and many of the optional polyfills as JavaScript `import` statements. - -The npm packages for the _mandatory_ polyfills (such as `zone.js`) were installed automatically for you when you created your project and their corresponding `import` statements are ready to go. You probably won't touch these. - -But if you need an optional polyfill, you'll have to install its npm package. -For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent): - - - # note that the web-animations-js polyfill is only here as an example - # it isn't a strict requirement of Angular anymore (more below) - npm install --save web-animations-js - - -Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example: - - - /** - * Required to support Web Animations `@angular/platform-browser/animations`. - * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation - **/ - import 'web-animations-js'; // Run `npm install --save web-animations-js`. - - -If you can't find the polyfill you want in `polyfills.ts`, -add it yourself, following the same pattern: - -1. install the npm package -1. `import` the file in `polyfills.ts` - -
    - -Non-CLI users should follow the instructions [below](#non-cli). -
    - -{@a polyfill-libs} - -### Mandatory polyfills -These are the polyfills required to run an Angular application on each supported browser: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Browsers (Desktop & Mobile) - - Polyfills Required -
    - Chrome, Firefox, Edge, Safari 9+ - - - [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only) - -
    - Safari 7 & 8, IE10 & 11, Android 4.1+ - - - [ES6](guide/browser-support#core-es6) - -
    - IE9 - - - [ES6
    classList](guide/browser-support#classlist) - -
    - - -### Optional browser features to polyfill - -Some features of Angular may require additional polyfills. - -For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today. -(note that the dependency of web-animations-js in Angular is only necessary if `AnimationBuilder` is used.) - -Here are the features which may require additional polyfills: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Feature - - Polyfill - - Browsers (Desktop & Mobile) -
    - - [JIT compilation](guide/aot-compiler). - - Required to reflect for metadata. - - - [ES7/reflect](guide/browser-support#core-es7-reflect) - - - All current browsers. Enabled by default. - Can remove if you always use AOT and only use Angular decorators. -
    - - [Animations](guide/animations) -
    Only if `Animation Builder` is used within the application--standard - animation support in Angular doesn't require any polyfills (as of NG6). - -     		- - [Web Animations](guide/browser-support#web-animations) - - -

    If AnimationBuilder is used then the polyfill will enable scrubbing - support for IE/Edge and Safari (Chrome and Firefox support this natively).

    -
    - - If you use the following deprecated i18n pipes: - - - [date](api/common/DeprecatedDatePipe), - - [currency](api/common/DeprecatedCurrencyPipe), - - [decimal](api/common/DeprecatedDecimalPipe), - - [percent](api/common/DeprecatedPercentPipe) - - - - [Intl API](guide/browser-support#intl) - - - All but Chrome, Firefox, Edge, IE11 and Safari 10 -
    - - [NgClass](api/common/NgClass) - - on SVG elements - - - [classList](guide/browser-support#classlist) - - - IE10, IE11 -
    - - [Http](guide/http) - - when sending and receiving binary data - - - [Typed Array](guide/browser-support#typedarray)
    - - [Blob](guide/browser-support#blob)
    - - [FormData](guide/browser-support#formdata) - -     		- IE 9 -
    - - - -### Suggested polyfills ## -Below are the polyfills which are used to test the framework itself. They are a good starting point for an application. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Polyfill - - License - - Size* -
    - - ES7/reflect - - - MIT - - 0.5KB -
    - - ES6 - - - MIT - - 27.4KB -
    - - classList - - - Public domain - - 1KB -
    - - Intl - - - MIT / Unicode license - - 13.5KB -
    - - Web Animations - - - Apache - - 14.8KB -
    - - Typed Array - - - MIT - - 4KB -
    - - Blob - - - MIT - - 1.3KB -
    - - FormData - - - MIT - - 0.4KB -
    - - -\* Figures are for minified and gzipped code, -computed with the closure compiler. - -{@a non-cli} -## Polyfills for non-CLI users - -If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this. - - - <!-- pre-zone polyfills --> - <script src="node_modules/core-js/client/shim.min.js"></script> - <script src="node_modules/web-animations-js/web-animations.min.js"></script> - <script> - /** - * you can configure some zone flags which can disable zone interception for some - * asynchronous activities to improve startup performance - use these options only - * if you know what you are doing as it could result in hard to trace down bugs.. - */ - // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - // __Zone_disable_on_property = true; // disable patch onProperty such as onclick - // __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - - /* - * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js - * with the following flag, it will bypass `zone.js` patch for IE/Edge - */ - // __Zone_enable_cross_context_check = true; - </script> - <!-- zone.js required by Angular --> - <script src="node_modules/zone.js/dist/zone.js"></script> - - <!-- application polyfills --> - diff --git a/docs_app/content/guide/change-log.md b/docs_app/content/guide/change-log.md deleted file mode 100644 index 2818161737..0000000000 --- a/docs_app/content/guide/change-log.md +++ /dev/null @@ -1,221 +0,0 @@ -# Change Log - - - -The Angular documentation is a living document with continuous improvements. -This log calls attention to recent significant changes. - -## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io). - -## All mention of moduleId removed. "Component relative paths" guide deleted (2017-03-13) -We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. -This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you. - -We strongly encourage you to only write component-relative paths. -That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you. - -## NEW: Downloadable examples for each guide (2017-02-28) -Now you can download the sample code for any guide and run it locally. -Look for the new download links next to the "live example" links. - -## Template Syntax/Structural Directives: refreshed (2017-02-06) -The [_Template-Syntax_](guide/template-syntax) and [_Structural Directives_](guide/structural-directives) -guides were significantly revised for clarity, accuracy, and current recommended practices. -Discusses ``. -Revised samples are more clear and cover all topics discussed. - -## NEW: Samples re-structured with `src/` folder (2017-02-02) -All documentation samples have been realigned with the default folder structure of the Angular CLI. -That's a step along the road to basing the sample in the Angular CLI. -But it's also good in its own right. -It helps clearly separate app code from setup and configuration files. - -All samples now have a `src/` folder at the project root. -The former `app/` folder moves under `src/`. -Read about moving your existing project to this structure in - -the QuickStart repo update instructions. - -Notably: - -* `app/main.ts` moved to `src/main.ts`. -* `app/` moved to `src/app/`. -* `index.html`, `styles.css` and `tsconfig.json` moved inside `src/`. -* `systemjs.config.js` now imports `main.js` instead of `app`. -* Added `lite-server` configuration (`bs-config.json`) to serve `src/`. - -## NEW: Reactive Forms guide (2017-01-31) -The new [**Reactive Forms**](guide/reactive-forms) guide explains how and why to build a "reactive form". -"Reactive Forms" are the code-based counterpart to the declarative "Template Driven" forms approach -introduced in the [Forms](guide/forms) guide. -Check it out before you decide how to add forms to your app. -Remember also that you can use both techniques in the same app, -choosing the approach that best fits each scenario. - -## NEW: Deployment guide (2017-01-30) - -The new [Deployment](guide/deployment) guide describes techniques for putting your application on a server. -It includes important advice on optimizing for production. - -## Hierarchical Dependency Injection: refreshed (2017-01-13) - -[Hierarchical Dependency Injection](guide/hierarchical-dependency-injection) guide is significantly revised. -Closes issue #3086. -Revised samples are clearer and cover all topics discussed. - -## Miscellaneous (2017-01-05) - -* [Setup](guide/setup) guide: -added (optional) instructions on how to remove _non-essential_ files. -* No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs. -* All samples prepend template/style URLs with `./` as a best practice. -* [Style Guide](guide/styleguide): copy edits and revised rules. - -## Router: more detail (2016-12-21) - -Added more information to the [Router](guide/router) guide -including sections named outlets, wildcard routes, and preload strategies. - -## HTTP: how to set default request headers (and other request options) (2016-12-14) - -Added section on how to set default request headers (and other request options) to -HTTP guide. - -## Testing: added component test plunkers (2016-12-02) - -Added two plunkers that each test _one simple component_ so you can write a component test plunker of your own: one for the QuickStart seed's `AppComponent` and another for the Testing guide's `BannerComponent`. -Linked to these plunkers in "Testing" and "Setup anatomy" guides. - -## Internationalization: pluralization and _select_ (2016-11-30) - -The [Internationalization (i18n)](guide/i18n) guide explains how to handle pluralization and -translation of alternative texts with `select`. -The sample demonstrates these features too. - -## Testing: karma file updates (2016-11-30) - -* `karma.config` + `karma-test-shim` can handle multiple spec source paths; -see quickstart issue: [angular/quickstart#294](https://github.com/angular/quickstart/issues/294). -* Displays Jasmine Runner output in the karma-launched browser. - -## QuickStart Rewrite (2016-11-18) - -The QuickStart is completely rewritten so that it actually is quick. -It references a minimal "Hello Angular" app running in Plunker. -The new [Setup](guide/setup) page tells you how to install a local development environment -by downloading (or cloning) the QuickStart github repository. -You are no longer asked to copy-and-paste code into setup files that were not explained anyway. - -## Sync with Angular v.2.2.0 (2016-11-14) - -Docs and code samples updated and tested with Angular v.2.2.0. - -## UPDATE: NgUpgrade Guide for the AOT friendly _upgrade/static_ module (2016-11-14) - -The updated [NgUpgrade Guide](guide/upgrade) guide covers the -new AOT friendly `upgrade/static` module -released in v.2.2.0, which is the recommended -facility for migrating from AngularJS to Angular. -The documentation for the version prior to v.2.2.0 has been removed. - -## ES6 described in "TypeScript to JavaScript" (2016-11-14) - -The updated TypeScript to JavaScript guide explains how to write apps in ES6/7 -by translating the common idioms in the TypeScript documentation examples -(and elsewhere on the web) to ES6/7 and ES5. - -This was [removed in August 2017](https://github.com/angular/angular/pull/18694) but can still be -viewed in the [v2 documentation](https://v2.angular.io/docs/ts/latest/cookbook/ts-to-js.html). - -## Sync with Angular v.2.1.1 (2016-10-21) - -Docs and code samples updated and tested with Angular v.2.1.1. - -## npm _@types_ packages replace _typings_ (2016-10-20) - -Documentation samples now get TypeScript type information for 3rd party libraries -from npm `@types` packages rather than with the _typings_ tooling. -The `typings.json` file is gone. - -The [AngularJS Upgrade](guide/upgrade) guide reflects this change. -The `package.json` installs `@types/angular` and several `@types/angular-...` -packages in support of upgrade; these are not needed for pure Angular development. - -## "Template Syntax" explains two-way data binding syntax (2016-10-20) - -Demonstrates how to two-way data bind to a custom Angular component and -re-explains `[(ngModel)]` in terms of the basic `[()]` syntax. - -## BREAKING CHANGE: `in-memory-web-api` (v.0.1.11) delivered as esm umd (2016-10-19) - -This change supports ES6 developers and aligns better with typical Angular libraries. -It does not affect the module's API but it does affect how you load and import it. -See the change note -in the `in-memory-web-api` repo. - -## "Router" _preload_ syntax and _:enter_/_:leave_ animations (2016-10-19) - -The router can lazily _preload_ modules _after_ the app starts and -_before_ the user navigates to them for improved perceived performance. - -New `:enter` and `:leave` aliases make animation more natural. - -## Sync with Angular v.2.1.0 (2016-10-12) - -Docs and code samples updated and tested with Angular v.2.1.0. - -## NEW "Ahead of time (AOT) Compilation" guide (2016-10-11) - -The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) guide -explains what AOT compilation is and why you'd want it. -It demonstrates the basics with a QuickStart app -followed by the more advanced considerations of compiling and bundling the Tour of Heroes. - -## Sync with Angular v.2.0.2 (2016-10-6) - -Docs and code samples updated and tested with Angular v.2.0.2. - -## "Routing and Navigation" guide with the _Router Module_ (2016-10-5) - -The [Routing and Navigation](guide/router) guide now locates route configuration -in a _Routing Module_. -The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`. - -All guided samples with routing use the _Routing Module_ and prose content has been updated, -most conspicuously in the -[NgModule](guide/ngmodules) guide and [NgModule FAQ](guide/ngmodule-faq) guide. - -## New "Internationalization" guide (2016-09-30) - -Added a new [Internationalization (i18n)](guide/i18n) guide that shows how -to use Angular "i18n" facilities to translate template text into multiple languages. - -## "angular-in-memory-web-api" package rename (2016-09-27) - -Many samples use the `angular-in-memory-web-api` to simulate a remote server. -This library is also useful to you during early development before you have a server to talk to. - -The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm. -The new "angular-in-memory-web-api" has new features. -Read about them on github. - -## "Style Guide" with _NgModules_ (2016-09-27) - -[StyleGuide](guide/styleguide) explains recommended conventions for NgModules. -Barrels now are far less useful and have been removed from the style guide; -they remain valuable but are not a matter of Angular style. -Also relaxed the rule that discouraged use of the `@Component.host` property. - -## _moduleId: module.id_ everywhere (2016-09-25) - -Sample components that get their templates or styles with `templateUrl` or `styleUrls` -have been converted to _module-relative_ URLs. -Added the `moduleId: module.id` property-and-value to their `@Component` metadata. - -This change is a requirement for compilation with AOT compiler when the app loads -modules with SystemJS as the samples currently do. - -## "Lifecycle Hooks" guide simplified (2016-09-24) - -The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and -draws more attention to the order in which Angular calls the hooks. diff --git a/docs_app/content/guide/cheatsheet.md b/docs_app/content/guide/cheatsheet.md deleted file mode 100644 index 7bdce13171..0000000000 --- a/docs_app/content/guide/cheatsheet.md +++ /dev/null @@ -1,392 +0,0 @@ -

    Cheat Sheet

    - -
    - - - - - - - - - -
    Bootstrapping

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -

    -
    platformBrowserDynamic().bootstrapModule(AppModule);

    Bootstraps the app, using the root component from the specified NgModule.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    NgModules

    import { NgModule } from '@angular/core'; -

    -
    @NgModule({ declarations: ..., imports: ...,
    exports: ..., providers: ..., bootstrap: ...})
    class MyModule {}

    Defines a module that contains components, directives, pipes, and providers.

    -
    declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]

    List of components, directives, and pipes that belong to this module.

    -
    imports: [BrowserModule, SomeOtherModule]

    List of modules to import into this module. Everything from the imported modules -is available to declarations of this module.

    -
    exports: [MyRedComponent, MyDatePipe]

    List of components, directives, and pipes visible to modules that import this module.

    -
    providers: [MyService, { provide: ... }]

    List of dependency injection providers visible both to the contents of this module and to importers of this module.

    -
    bootstrap: [MyAppComponent]

    List of components to bootstrap when this module is bootstrapped.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Template syntax
    <input [value]="firstName">

    Binds property value to the result of expression firstName.

    -
    <div [attr.role]="myAriaRole">

    Binds attribute role to the result of expression myAriaRole.

    -
    <div [class.extra-sparkle]="isDelightful">

    Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

    -
    <div [style.width.px]="mySize">

    Binds style property width to the result of expression mySize in pixels. Units are optional.

    -
    <button (click)="readRainbow($event)">

    Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.

    -
    <div title="Hello {{ponyName}}">

    Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: -<div [title]="'Hello ' + ponyName">

    -
    <p>Hello {{ponyName}}</p>

    Binds text content to an interpolated string, for example, "Hello Seabiscuit".

    -
    <my-cmp [(title)]="name">

    Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

    -
    <video #movieplayer ...>
    <button (click)="movieplayer.play()">
    </video>

    Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

    -
    <p *myUnless="myExpression">...</p>

    The * symbol turns the current element into an embedded template. Equivalent to: -<ng-template [myUnless]="myExpression"><p>...</p></ng-template>

    -
    <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>

    Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

    -
    <p>Employer: {{employer?.companyName}}</p>

    The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

    -
    <svg:rect x="0" y="0" width="100" height="100"/>

    An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

    -
    <svg>
    <rect x="0" y="0" width="100" height="100"/>
    </svg>

    An <svg> root element is detected as an SVG element automatically, without the prefix.

    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    Built-in directives

    import { CommonModule } from '@angular/common'; -

    -
    <section *ngIf="showSection">

    Removes or recreates a portion of the DOM tree based on the showSection expression.

    -
    <li *ngFor="let item of list">

    Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.

    -
    <div [ngSwitch]="conditionExpression">
    <ng-template [ngSwitchCase]="case1Exp">...</ng-template>
    <ng-template ngSwitchCase="case2LiteralString">...</ng-template>
    <ng-template ngSwitchDefault>...</ng-template>
    </div>

    Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of conditionExpression.

    -
    <div [ngClass]="{'active': isActive, 'disabled': isDisabled}">

    Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.

    -
    <div [ngStyle]="{'property': 'value'}">
    <div [ngStyle]="dynamicStyles()">

    Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.

    -
    - - - - - - - - - - -
    Forms

    import { FormsModule } from '@angular/forms'; -

    -
    <input [(ngModel)]="userName">

    Provides two-way data-binding, parsing, and validation for form controls.

    -
    - - - - - - - - - - - - - - - - - - - -
    Class decorators

    import { Directive, ... } from '@angular/core'; -

    -
    @Component({...})
    class MyComponent() {}

    Declares that a class is a component and provides metadata about the component.

    -
    @Directive({...})
    class MyDirective() {}

    Declares that a class is a directive and provides metadata about the directive.

    -
    @Pipe({...})
    class MyPipe() {}

    Declares that a class is a pipe and provides metadata about the pipe.

    -
    @Injectable()
    class MyService() {}

    Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. -

    -
    - - - - - - - - - - - - - -
    Directive configuration

    @Directive({ property1: value1, ... }) -

    -
    selector: '.cool-button:not(a)'

    Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, -[attribute], .class, and :not().

    -

    Does not support parent-child relationship selectors.

    -
    providers: [MyService, { provide: ... }]

    List of dependency injection providers for this directive and its children.

    -
    - - - - - - - - - - - - - - - - - - - -
    Component configuration

    -@Component extends @Directive, -so the @Directive configuration applies to components as well

    -
    moduleId: module.id

    If set, the templateUrl and styleUrl are resolved relative to the component.

    -
    viewProviders: [MyService, { provide: ... }]

    List of dependency injection providers scoped to this component's view.

    -
    template: 'Hello {{name}}'
    templateUrl: 'my-component.html'

    Inline template or external template URL of the component's view.

    -
    styles: ['.primary {color: red}']
    styleUrls: ['my-component.css']

    List of inline CSS styles or external stylesheet URLs for styling the component’s view.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Class field decorators for directives and components

    import { Input, ... } from '@angular/core'; -

    -
    @Input() myProperty;

    Declares an input property that you can update via property binding (example: -<my-cmp [myProperty]="someExpression">).

    -
    @Output() myEvent = new EventEmitter();

    Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

    -
    @HostBinding('class.valid') isValid;

    Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

    -
    @HostListener('click', ['$event']) onClick(e) {...}

    Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

    -
    @ContentChild(myPredicate) myChildComponent;

    Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

    -
    @ContentChildren(myPredicate) myChildComponents;

    Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

    -
    @ViewChild(myPredicate) myChildComponent;

    Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

    -
    @ViewChildren(myPredicate) myChildComponents;

    Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Directive and component change detection and lifecycle hooks

    (implemented as class methods) -

    -
    constructor(myService: MyService, ...) { ... }

    Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

    -
    ngOnChanges(changeRecord) { ... }

    Called after every change to input properties and before processing content or child views.

    -
    ngOnInit() { ... }

    Called after the constructor, initializing input properties, and the first call to ngOnChanges.

    -
    ngDoCheck() { ... }

    Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.

    -
    ngAfterContentInit() { ... }

    Called after ngOnInit when the component's or directive's content has been initialized.

    -
    ngAfterContentChecked() { ... }

    Called after every check of the component's or directive's content.

    -
    ngAfterViewInit() { ... }

    Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

    -
    ngAfterViewChecked() { ... }

    Called after every check of the component's view. Applies to components only.

    -
    ngOnDestroy() { ... }

    Called once, before the instance is destroyed.

    -
    - - - - - - - - - - - - - - - - -
    Dependency injection configuration
    { provide: MyService, useClass: MyMockService }

    Sets or overrides the provider for MyService to the MyMockService class.

    -
    { provide: MyService, useFactory: myFactory }

    Sets or overrides the provider for MyService to the myFactory factory function.

    -
    { provide: MyValue, useValue: 41 }

    Sets or overrides the provider for MyValue to the value 41.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Routing and navigation

    import { Routes, RouterModule, ... } from '@angular/router'; -

    -
    const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'path/:routeParam', component: MyComponent },
    { path: 'staticPath', component: ... },
    { path: '**', component: ... },
    { path: 'oldPath', redirectTo: '/staticPath' },
    { path: ..., component: ..., data: { message: 'Custom' } }
    ]);

    const routing = RouterModule.forRoot(routes);

    Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.

    -

    <router-outlet></router-outlet>
    <router-outlet name="aux"></router-outlet>

    Marks the location to load the component of the active route.

    -

    <a routerLink="/path">
    <a [routerLink]="[ '/path', routeParam ]">
    <a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
    <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
    <a [routerLink]="[ '/path' ]" fragment="anchor">

    Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the / prefix; for a child route, use the ./prefix; for a sibling or parent, use the ../ prefix.

    -
    <a [routerLink]="[ '/path' ]" routerLinkActive="active">

    The provided classes are added to the element when the routerLink becomes the current active route.

    -
    class CanActivateGuard implements CanActivate {
    canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
    }

    { path: ..., canActivate: [CanActivateGuard] }

    An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.

    -
    class CanDeactivateGuard implements CanDeactivate<T> {
    canDeactivate(
    component: T,
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
    }

    { path: ..., canDeactivate: [CanDeactivateGuard] }

    An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.

    -
    class CanActivateChildGuard implements CanActivateChild {
    canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
    }

    { path: ..., canActivateChild: [CanActivateGuard],
    children: ... }

    An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.

    -
    class ResolveGuard implements Resolve<T> {
    resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ): Observable<any>|Promise<any>|any { ... }
    }

    { path: ..., resolve: [ResolveGuard] }

    An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.

    -
    class CanLoadGuard implements CanLoad {
    canLoad(
    route: Route
    ): Observable<boolean>|Promise<boolean>|boolean { ... }
    }

    { path: ..., canLoad: [CanLoadGuard], loadChildren: ... }

    An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.

    -
    -
    diff --git a/docs_app/content/guide/comparing-observables.md b/docs_app/content/guide/comparing-observables.md deleted file mode 100644 index 5e7b9b0ca4..0000000000 --- a/docs_app/content/guide/comparing-observables.md +++ /dev/null @@ -1,315 +0,0 @@ -# Observables compared to other techniques - -You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays. - -Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences. - -## Observables compared to promises - -Observables are often compared to promises. Here are some key differences: - -* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result. - -* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time. - -* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed. - -* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling. - - -### Creation and subscription - -* Observables are not executed until a consumer subcribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values. - - -// declare a publishing operation -new Observable((observer) => { subscriber_fn }); -// initiate execution -observable.subscribe(() => { - // observer handles notifications - }); - - -* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation. - - -// initiate execution -new Promise((resolve, reject) => { executer_fn }); -// handle return value -promise.then((value) => { - // handle result here - }); - - -### Chaining - -* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values. - - -observable.map((v) => 2*v); - - -* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map). - - -promise.then((v) => 2*v); - - -### Cancellation - -* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work. - - -const sub = obs.subscribe(...); -sub.unsubscribe(); - - -* Promises are not cancellable. - -### Error handling - -* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable. - - -obs.subscribe(() => { - throw Error('my error'); -}); - - -* Promises push errors to the child promises. - - -promise.then(() => { - throw Error('my error'); -}); - - -### Cheat sheet - -The following code snippets illustrate how the same kind of operation is defined using observables and promises. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    OperationObservablePromise
    Creation - 
    new Observable((observer) => {
-  observer.next(123);
-});
    -     		- 
    new Promise((resolve, reject) => {
-  resolve(123);
-});
    -
    Transform
    obs.map((value) => value * 2 );
    promise.then((value) => value * 2);
    Subscribe - 
    sub = obs.subscribe((value) => {
-  console.log(value)
-});
    -     		- 
    promise.then((value) => {
-  console.log(value);
-});
    -
    Unsubscribe
    sub.unsubscribe();
    		Implied by promise resolution.
    - -## Observables compared to events API - -Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler. - -Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests. - -Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API. - - - - - - - - - - - - - - - - - - - - - - -
    ObservableEvents API
    Creation & cancellation -
    // Setup
-let clicks$ = fromEvent(buttonEl, ‘click’);
-// Begin listening
-let subscription = clicks$
-  .subscribe(e => console.log(‘Clicked’, e))
-// Stop listening
-subscription.unsubscribe();
    -     		-
    function handler(e) {
-  console.log(‘Clicked’, e);
-}
-
-// Setup & begin listening
-button.addEventListener(‘click’, handler);
-// Stop listening
-button.removeEventListener(‘click’, handler);
-
    -
    Subscription -
    observable.subscribe(() => {
-  // notification handlers here
-});
    -     		-
    element.addEventListener(eventName, (event) => {
-  // notification handler here
-});
    -
    ConfigurationListen for keystrokes, but provide a stream representing the value in the input. -
    fromEvent(inputEl, 'keydown').pipe(
-  map(e => e.target.value)
-);
    -     		Does not support configuration. -
    element.addEventListener(eventName, (event) => {
-  // Cannot change the passed Event into another
-  // value before it gets to the handler
-});
    -
    - - -## Observables compared to arrays - -An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ObservableArray
    Given - 
    obs: ➞1➞2➞3➞5➞7
    - 
    obsB: ➞'a'➞'b'➞'c'
    -     		- 
    arr: [1, 2, 3, 5, 7]
    - 
    arrB: ['a', 'b', 'c']
    - 
    concat()
    		 - 
    obs.concat(obsB)
    - 
    ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'
    -     		- 
    arr.concat(arrB)
    - 
    [1,2,3,5,7,'a','b','c']
    - 
    filter()
    		 - 
    obs.filter((v) => v>3)
    - 
    ➞5➞7
    -     		- 
    arr.filter((v) => v>3)
    - 
    [5, 7]
    - 
    find()
    		 - 
    obs.find((v) => v>3)
    - 
    ➞5
    -     		- 
    arr.find((v) => v>10)
    - 
    5
    - 
    findIndex()
    		 - 
    obs.findIndex((v) => v>3)
    - 
    ➞3
    -     		- 
    arr.findIndex((v) => v>3)
    - 
    3
    - 
    forEach()
    		 - 
    obs.forEach((v) => {
-  console.log(v);
-})
-1
-2
-3
-4
-5
    -     		- 
    arr.forEach((v) => {
-  console.log(v);
-})
-1
-2
-3
-4
-5
    - 
    map()
    		 - 
    obs.map((v) => -v)
    - 
    ➞-1➞-2➞-3➞-5➞-7
    -     		- 
    arr.map((v) => -v)
    - 
    [-1, -2, -3, -5, -7]
    - 
    reduce()
    		 - 
    obs.scan((s,v)=> s+v, 0)
    - 
    ➞1➞3➞6➞11➞18
    -     		- 
    arr.reduce((s,v) => s+v, 0)
    - 
    18
    -
    - - - diff --git a/docs_app/content/guide/component-interaction.md b/docs_app/content/guide/component-interaction.md deleted file mode 100644 index 3a07f918a9..0000000000 --- a/docs_app/content/guide/component-interaction.md +++ /dev/null @@ -1,442 +0,0 @@ -# Component Interaction - -{@a top} - -This cookbook contains recipes for common component communication scenarios -in which two or more components share information. -{@a toc} - - - -**See the **. - -{@a parent-to-child} - -## Pass data from parent to child with input binding - -`HeroChildComponent` has two ***input properties***, -typically adorned with [@Input decorations](guide/template-syntax#inputs-outputs). - - - - - - - - -The second `@Input` aliases the child component property name `masterName` as `'master'`. - -The `HeroParentComponent` nests the child `HeroChildComponent` inside an `*ngFor` repeater, -binding its `master` string property to the child's `master` alias, -and each iteration's `hero` instance to the child's `hero` property. - - - - - - - - -The running application displays three heroes: - - -
    - Parent-to-child -
    - - - -

    Test it

    - -E2E test that all children were instantiated and displayed as expected: - - - - - - - - -[Back to top](guide/component-interaction#top) - -{@a parent-to-child-setter} - -## Intercept input property changes with a setter - -Use an input property setter to intercept and act upon a value from the parent. - -The setter of the `name` input property in the child `NameChildComponent` -trims the whitespace from a name and replaces an empty value with default text. - - - - - - - - -Here's the `NameParentComponent` demonstrating name variations including a name with all spaces: - - - - - - - - -
    - Parent-to-child-setter -
    - - - -

    Test it

    - -E2E tests of input property setter with empty and non-empty names: - - - - - - - - -[Back to top](guide/component-interaction#top) - -{@a parent-to-child-on-changes} - -## Intercept input property changes with *ngOnChanges()* - -Detect and act upon changes to input property values with the `ngOnChanges()` method of the `OnChanges` lifecycle hook interface. - -
    - - - -You may prefer this approach to the property setter when watching multiple, interacting input properties. - -Learn about `ngOnChanges()` in the [LifeCycle Hooks](guide/lifecycle-hooks) chapter. - -
    - - - -This `VersionChildComponent` detects changes to the `major` and `minor` input properties and composes a log message reporting these changes: - - - - - - - - -The `VersionParentComponent` supplies the `minor` and `major` values and binds buttons to methods that change them. - - - - - - - - -Here's the output of a button-pushing sequence: - - -
    - Parent-to-child-onchanges -
    - - - -

    Test it

    - -Test that ***both*** input properties are set initially and that button clicks trigger -the expected `ngOnChanges` calls and values: - - - - - - - - -[Back to top](guide/component-interaction#top) - -{@a child-to-parent} - -## Parent listens for child event - -The child component exposes an `EventEmitter` property with which it `emits` events when something happens. -The parent binds to that event property and reacts to those events. - -The child's `EventEmitter` property is an ***output property***, - typically adorned with an [@Output decoration](guide/template-syntax#inputs-outputs) - as seen in this `VoterComponent`: - - - - - - - - -Clicking a button triggers emission of a `true` or `false`, the boolean *payload*. - -The parent `VoteTakerComponent` binds an event handler called `onVoted()` that responds to the child event -payload `$event` and updates a counter. - - - - - - - - -The framework passes the event argument—represented by `$event`—to the handler method, -and the method processes it: - - -
    - Child-to-parent -
    - - - -

    Test it

    - -Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters: - - - - - - - - -[Back to top](guide/component-interaction#top) - - - -## Parent interacts with child via *local variable* - -A parent component cannot use data binding to read child properties -or invoke child methods. You can do both -by creating a template reference variable for the child element -and then reference that variable *within the parent template* -as seen in the following example. - -{@a countdown-timer-example} -The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket. -It has `start` and `stop` methods that control the clock and it displays a -countdown status message in its own template. - - - - - - - -The `CountdownLocalVarParentComponent` that hosts the timer component is as follows: - - - - - - - - -The parent component cannot data bind to the child's -`start` and `stop` methods nor to its `seconds` property. - -You can place a local variable, `#timer`, on the tag `` representing the child component. -That gives you a reference to the child component and the ability to access -*any of its properties or methods* from within the parent template. - -This example wires parent buttons to the child's `start` and `stop` and -uses interpolation to display the child's `seconds` property. - -Here we see the parent and child working together. - - -
    - countdown timer -
    - - - -{@a countdown-tests} - - -

    Test it

    - -Test that the seconds displayed in the parent template -match the seconds displayed in the child's status message. -Test also that clicking the *Stop* button pauses the countdown timer: - - - - - - - - -[Back to top](guide/component-interaction#top) - -{@a parent-to-view-child} - -## Parent calls an _@ViewChild()_ - -The *local variable* approach is simple and easy. But it is limited because -the parent-child wiring must be done entirely within the parent template. -The parent component *itself* has no access to the child. - -You can't use the *local variable* technique if an instance of the parent component *class* -must read or write child component values or must call child component methods. - -When the parent component *class* requires that kind of access, -***inject*** the child component into the parent as a *ViewChild*. - -The following example illustrates this technique with the same -[Countdown Timer](guide/component-interaction#countdown-timer-example) example. -Neither its appearance nor its behavior will change. -The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well. - -
    - - - -The switch from the *local variable* to the *ViewChild* technique -is solely for the purpose of demonstration. - -
    - - - -Here is the parent, `CountdownViewChildParentComponent`: - - - - - - - -It takes a bit more work to get the child view into the parent component *class*. - -First, you have to import references to the `ViewChild` decorator and the `AfterViewInit` lifecycle hook. - -Next, inject the child `CountdownTimerComponent` into the private `timerComponent` property -via the `@ViewChild` property decoration. - -The `#timer` local variable is gone from the component metadata. -Instead, bind the buttons to the parent component's own `start` and `stop` methods and -present the ticking seconds in an interpolation around the parent component's `seconds` method. - -These methods access the injected timer component directly. - -The `ngAfterViewInit()` lifecycle hook is an important wrinkle. -The timer component isn't available until *after* Angular displays the parent view. -So it displays `0` seconds initially. - -Then Angular calls the `ngAfterViewInit` lifecycle hook at which time it is *too late* -to update the parent view's display of the countdown seconds. -Angular's unidirectional data flow rule prevents updating the parent view's -in the same cycle. The app has to *wait one turn* before it can display the seconds. - -Use `setTimeout()` to wait one tick and then revise the `seconds()` method so -that it takes future values from the timer component. - -

    Test it

    - -Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before. - -[Back to top](guide/component-interaction#top) - -{@a bidirectional-service} - -## Parent and children communicate via a service - -A parent component and its children share a service whose interface enables bi-directional communication -*within the family*. - -The scope of the service instance is the parent component and its children. -Components outside this component subtree have no access to the service or their communications. - -This `MissionService` connects the `MissionControlComponent` to multiple `AstronautComponent` children. - - - - - - - - -The `MissionControlComponent` both provides the instance of the service that it shares with its children -(through the `providers` metadata array) and injects that instance into itself through its constructor: - - - - - - - - -The `AstronautComponent` also injects the service in its constructor. -Each `AstronautComponent` is a child of the `MissionControlComponent` and therefore receives its parent's service instance: - - - - - - - - -
    - - - -Notice that this example captures the `subscription` and `unsubscribe()` when the `AstronautComponent` is destroyed. -This is a memory-leak guard step. There is no actual risk in this app because the -lifetime of a `AstronautComponent` is the same as the lifetime of the app itself. -That *would not* always be true in a more complex application. - -You don't add this guard to the `MissionControlComponent` because, as the parent, -it controls the lifetime of the `MissionService`. - -
    - - - -The *History* log demonstrates that messages travel in both directions between -the parent `MissionControlComponent` and the `AstronautComponent` children, -facilitated by the service: - - -
    - bidirectional-service -
    - - - -

    Test it

    - -Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children -and verify that the history meets expectations: - - - - - - - - -[Back to top](guide/component-interaction#top) diff --git a/docs_app/content/guide/component-styles.md b/docs_app/content/guide/component-styles.md deleted file mode 100644 index 3c0269dd59..0000000000 --- a/docs_app/content/guide/component-styles.md +++ /dev/null @@ -1,355 +0,0 @@ -# Component Styles - -Angular applications are styled with standard CSS. That means you can apply -everything you know about CSS stylesheets, selectors, rules, and media queries -directly to Angular applications. - -Additionally, Angular can bundle *component styles* -with components, enabling a more modular design than regular stylesheets. - -This page describes how to load and apply these component styles. - -You can run the in Stackblitz and download the code from there. - -## Using component styles - -For every Angular component you write, you may define not only an HTML template, -but also the CSS styles that go with that template, -specifying any selectors, rules, and media queries that you need. - -One way to do this is to set the `styles` property in the component metadata. -The `styles` property takes an array of strings that contain CSS code. -Usually you give it one string, as in the following example: - - - - -## Style scope - -
    - -The styles specified in `@Component` metadata _apply only within the template of that component_. - -
    - -They are _not inherited_ by any components nested within the template nor by any content projected into the component. - -In this example, the `h1` style applies only to the `HeroAppComponent`, -not to the nested `HeroMainComponent` nor to `

    ` tags anywhere else in the application. - -This scoping restriction is a ***styling modularity feature***. - -* You can use the CSS class names and selectors that make the most sense in the context of each component. - - -* Class names and selectors are local to the component and don't collide with - classes and selectors used elsewhere in the application. - - -* Changes to styles elsewhere in the application don't affect the component's styles. - - -* You can co-locate the CSS code of each component with the TypeScript and HTML code of the component, - which leads to a neat and tidy project structure. - - -* You can change or remove component CSS code without searching through the - whole application to find where else the code is used. - -{@a special-selectors} - -## Special selectors - -Component styles have a few special *selectors* from the world of shadow DOM style scoping -(described in the [CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1) page on the -[W3C](https://www.w3.org) site). -The following sections describe these selectors. - -### :host - -Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to -targeting elements *inside* the component's template). - - - - - -The `:host` selector is the only way to target the host element. You can't reach -the host element from inside the component with other selectors because it's not part of the -component's own template. The host element is in a parent component's template. - -Use the *function form* to apply host styles conditionally by -including another selector inside parentheses after `:host`. - -The next example targets the host element again, but only when it also has the `active` CSS class. - - - - -### :host-context - -Sometimes it's useful to apply styles based on some condition *outside* of a component's view. -For example, a CSS theme class could be applied to the document `` element, and -you want to change how your component looks based on that. - -Use the `:host-context()` pseudo-class selector, which works just like the function -form of `:host()`. The `:host-context()` selector looks for a CSS class in any ancestor of the component host element, -up to the document root. The `:host-context()` selector is useful when combined with another selector. - -The following example applies a `background-color` style to all `

    ` elements *inside* the component, only -if some ancestor element has the CSS class `theme-light`. - - - - -### (deprecated) `/deep/`, `>>>`, and `::ng-deep` - -Component styles normally apply only to the HTML in the component's own template. - -Use the `/deep/` shadow-piercing descendant combinator to force a style down through the child -component tree into all the child component views. -The `/deep/` combinator works to any depth of nested components, and it applies to both the view -children and content children of the component. - -The following example targets all `

    ` elements, from the host element down -through this component to all of its child elements in the DOM. - - - - - -The `/deep/` combinator also has the aliases `>>>`, and `::ng-deep`. - -
    - -Use `/deep/`, `>>>` and `::ng-deep` only with *emulated* view encapsulation. -Emulated is the default and most commonly used view encapsulation. For more information, see the -[Controlling view encapsulation](guide/component-styles#view-encapsulation) section. - -
    - -
    - -The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools. -As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`). -Until then `::ng-deep` should be preferred for a broader compatibility with the tools. - -
    - -{@a loading-styles} - -## Loading component styles - -There are several ways to add styles to a component: - -* By setting `styles` or `styleUrls` metadata. -* Inline in the template HTML. -* With CSS imports. - -The scoping rules outlined earlier apply to each of these loading patterns. - -### Styles in component metadata - -You can add a `styles` array property to the `@Component` decorator. - -Each string in the array defines some CSS for this component. - - - - -
    - -Reminder: these styles apply _only to this component_. -They are _not inherited_ by any components nested within the template nor by any content projected into the component. - -
    - -The CLI defines an empty `styles` array when you create the component with the `--inline-styles` flag. - - -ng generate component hero-app --inline-style - - -### Style files in component metadata - -You can load styles from external CSS files by adding a `styleUrls` property -to a component's `@Component` decorator: - - - - - - -
    - -Reminder: the styles in the style file apply _only to this component_. -They are _not inherited_ by any components nested within the template nor by any content projected into the component. - -
    - -
    - - You can specify more than one styles file or even a combination of `style` and `styleUrls`. - -
    - -The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`. - - -ng generate component hero-app - - -### Template inline styles - -You can embed CSS styles directly into the HTML template by putting them -inside ` - - - - - - - - - - - - - - - - - - - - - - - -
    FrameworkTaskSpeed
    AngularJSRoutingFast
    Angular v2Routing - - *Faster* - -
    Angular v4Routing - - **Fastest :)** - -
    - -Here is the markup for this table. - -```html - - - - - - - - - - - - - - - - - - - - - - - - -
    FrameworkTaskSpeed
    AngularJSRoutingFast
    Angular v2Routing - - *Faster* - -
    Angular v4Routing - - **Fastest :)** - -
    -``` - -## Images - -

    Image location

    - -Store images in the `content/images` directory in a folder with the same URL as the guide page. -Images for this "Authors Style Guide" page belong in the `content/images/guide/docs-style-guide` folder. - -Angular doc generation copies these image folders to the _runtime_ location, `generated/images`. -Set the image `src` attribute to begin in _that_ directory. - -Here's the `src` attribute for the "flying hero" image belonging to this page. -``` -src="generated/images/guide/docs-style-guide/flying-hero.png" -``` - -

    Use the HTML <img> tag

    - -**Do not use the markdown image syntax, \!\[\.\.\.\]\(\.\.\.\).** - -Images should be specified in an `` tag. - -For accessibility, always set the `alt` attribute with a meaningful description of the image. - -You should nest the `` tag within a `
    ` tag, which styles the image within a drop-shadow frame. You'll need the editor's permission to skip the `
    ` tag. - -Here's a conforming example - -
    - flying hero -
    - -```html -
    - flying hero -
    -``` - -_Note that the HTML image element does not have a closing tag._ - -

    Image dimensions

    - -The doc generator reads the image dimensions from the file and adds width and height attributes to the `img` tag automatically. If you want to control the size of the image, supply your own width and height attributes. - -Here's the "flying hero" at a more reasonable scale. - -
    - flying Angular hero -
    - -```html - -
    - flying Angular hero -
    -``` - -Wide images can be a problem. Most browsers try to rescale the image but wide images may overflow the document in certain viewports. - -**Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide: - - -
    - toh-pt6-bundle -
    -     - -

    Image compression

    - -Large image files can be slow to load, harming the user experience. Always compress the image. -Consider using an image compression web site such as [tinypng](https://tinypng.com/ "tinypng"). - -

    Floating images

    - -You can float the image to the left or right of text by applying the class="left" or class="right" attributes respectively. - -flying Angular hero - -This text wraps around to the right of the floating "flying hero" image. - -Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `
    ` where the text should break. - -
    - -The markup for the above example is: - -```html -flying Angular hero - -This text wraps around to the right of the floating "flying hero" image. - -Headings and code-examples automatically clear a floating image. If you need to force a piece of text to clear a floating image, add `
    ` where the text should break. - -
    -``` - -Note that you generally don't wrap a floating image in a `
    ` element. - -#### Floating within a subsection - -If you have a floating image inside an alert, callout, or a subsection, it is a good idea to apply the `clear-fix` class to the `div` to ensure that the image doesn't overflow its container. For example: - -
    - - flying Angular hero - - A subsection with **markdown** formatted text. - -
    - -```html -
    - - flying Angular hero - - A subsection with **markdown** formatted text. - -
    -``` diff --git a/docs_app/content/guide/dynamic-component-loader.md b/docs_app/content/guide/dynamic-component-loader.md deleted file mode 100644 index c2e3d77748..0000000000 --- a/docs_app/content/guide/dynamic-component-loader.md +++ /dev/null @@ -1,200 +0,0 @@ -# Dynamic Component Loader - -Component templates are not always fixed. An application may need to load new components at runtime. - -This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically. - -See the -of the code in this cookbook. - -{@a dynamic-loading} - -## Dynamic component loading - -The following example shows how to build a dynamic ad banner. - -The hero agency is planning an ad campaign with several different -ads cycling through the banner. New ad components are added -frequently by several different teams. This makes it impractical -to use a template with a static component structure. - -Instead, you need a way to load a new component without a fixed -reference to the component in the ad banner's template. - -Angular comes with its own API for loading components dynamically. - - -{@a directive} - -## The anchor directive - -Before you can add components you have to define an anchor point -to tell Angular where to insert components. - -The ad banner uses a helper directive called `AdDirective` to -mark valid insertion points in the template. - - - - - - - - -`AdDirective` injects `ViewContainerRef` to gain access to the view -container of the element that will host the dynamically added component. - -In the `@Directive` decorator, notice the selector name, `ad-host`; -that's what you use to apply the directive to the element. -The next section shows you how. - -{@a loading-components} - -## Loading components - -Most of the ad banner implementation is in `ad-banner.component.ts`. -To keep things simple in this example, the HTML is in the `@Component` -decorator's `template` property as a template string. - -The `` element is where you apply the directive you just made. -To apply the `AdDirective`, recall the selector from `ad.directive.ts`, -`ad-host`. Apply that to `` without the square brackets. Now Angular knows -where to dynamically load components. - - - - - - - - -The `` element is a good choice for dynamic components -because it doesn't render any additional output. - - -{@a resolving-components} - - -## Resolving components - -Take a closer look at the methods in `ad-banner.component.ts`. - -`AdBannerComponent` takes an array of `AdItem` objects as input, -which ultimately comes from `AdService`. `AdItem` objects specify -the type of component to load and any data to bind to the -component.`AdService` returns the actual ads making up the ad campaign. - -Passing an array of components to `AdBannerComponent` allows for a -dynamic list of ads without static elements in the template. - -With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems` -and loads a new component every 3 seconds by calling `loadComponent()`. - - - - - - - - -The `loadComponent()` method is doing a lot of the heavy lifting here. -Take it step by step. First, it picks an ad. - - -
    - - - -**How _loadComponent()_ chooses an ad** - -The `loadComponent()` method chooses an ad using some math. - -First, it sets the `currentAdIndex` by taking whatever it -currently is plus one, dividing that by the length of the `AdItem` array, and -using the _remainder_ as the new `currentAdIndex` value. Then, it uses that -value to select an `adItem` from the array. - - -
    - - - -After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver` -to resolve a `ComponentFactory` for each specific component. -The `ComponentFactory` then creates an instance of each component. - -Next, you're targeting the `viewContainerRef` that -exists on this specific instance of the component. How do you know it's -this specific instance? Because it's referring to `adHost` and `adHost` is the -directive you set up earlier to tell Angular where to insert dynamic components. - -As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor. -This is how the directive accesses the element that you want to use to host the dynamic component. - -To add the component to the template, you call `createComponent()` on `ViewContainerRef`. - -The `createComponent()` method returns a reference to the loaded component. -Use that reference to interact with the component by assigning to its properties or calling its methods. - - -{@a selector-references} - - -#### Selector references - -Generally, the Angular compiler generates a `ComponentFactory` -for any component referenced in a template. However, there are -no selector references in the templates for -dynamically loaded components since they load at runtime. - -To ensure that the compiler still generates a factory, -add dynamically loaded components to the `NgModule`'s `entryComponents` array: - - - - - - - -{@a common-interface} - - -## The _AdComponent_ interface - -In the ad banner, all components implement a common `AdComponent` interface to -standardize the API for passing data to the components. - -Here are two sample components and the `AdComponent` interface for reference: - - - - - - - - - - - - - - - - - - - - -{@a final-ad-baner} - - -## Final ad banner - The final ad banner looks like this: - -
    - Ads -
    - - - -See the . diff --git a/docs_app/content/guide/dynamic-form.md b/docs_app/content/guide/dynamic-form.md deleted file mode 100644 index c3add23dcb..0000000000 --- a/docs_app/content/guide/dynamic-form.md +++ /dev/null @@ -1,212 +0,0 @@ -# Dynamic Forms - -{@a top} - -Building handcrafted forms can be costly and time-consuming, -especially if you need a great number of them, they're similar to each other, and they change frequently -to meet rapidly changing business and regulatory requirements. - -It may be more economical to create the forms dynamically, based on -metadata that describes the business object model. - -This cookbook shows you how to use `formGroup` to dynamically -render a simple form with different control types and validation. -It's a primitive start. -It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience. -All such greatness has humble beginnings. - -The example in this cookbook is a dynamic form to build an -online application experience for heroes seeking employment. -The agency is constantly tinkering with the application process. -You can create the forms on the fly *without changing the application code*. -{@a toc} - -See the . - -{@a bootstrap} - -## Bootstrap - -Start by creating an `NgModule` called `AppModule`. - -This cookbook uses [reactive forms](guide/reactive-forms). - -Reactive forms belongs to a different `NgModule` called `ReactiveFormsModule`, -so in order to access any reactive forms directives, you have to import -`ReactiveFormsModule` from the `@angular/forms` library. - -Bootstrap the `AppModule` in `main.ts`. - - - - - - - - - - - - - - - -{@a object-model} - -## Question model - -The next step is to define an object model that can describe all scenarios needed by the form functionality. -The hero application process involves a form with a lot of questions. -The _question_ is the most fundamental object in the model. - -The following `QuestionBase` is a fundamental question class. - - - - - - - - -From this base you can derive two new classes in `TextboxQuestion` and `DropdownQuestion` -that represent textbox and dropdown questions. -The idea is that the form will be bound to specific question types and render the -appropriate controls dynamically. - -`TextboxQuestion` supports multiple HTML5 types such as text, email, and url -via the `type` property. - - - - - - - - -`DropdownQuestion` presents a list of choices in a select box. - - - - - - - - -Next is `QuestionControlService`, a simple service for transforming the questions to a `FormGroup`. -In a nutshell, the form group consumes the metadata from the question model and -allows you to specify default values and validation rules. - - - - - - -{@a form-component} - -## Question form components -Now that you have defined the complete model you are ready -to create components to represent the dynamic form. - - -`DynamicFormComponent` is the entry point and the main container for the form. - - - - - - - - - - - - - - - -It presents a list of questions, each bound to a `` component element. -The `` tag matches the `DynamicFormQuestionComponent`, -the component responsible for rendering the details of each _individual_ -question based on values in the data-bound question object. - - - - - - - - - - - - - - - - -Notice this component can present any type of question in your model. -You only have two types of questions at this point but you can imagine many more. -The `ngSwitch` determines which type of question to display. - -In both components you're relying on Angular's **formGroup** to connect the template HTML to the -underlying control objects, populated from the question model with display and validation rules. - -`formControlName` and `formGroup` are directives defined in -`ReactiveFormsModule`. The templates can access these directives -directly since you imported `ReactiveFormsModule` from `AppModule`. -{@a questionnaire-data} - -## Questionnaire data - -`DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`. - - The set of questions you've defined for the job application is returned from the `QuestionService`. - In a real app you'd retrieve these questions from storage. - - The key point is that you control the hero job application questions - entirely through the objects returned from `QuestionService`. - Questionnaire maintenance is a simple matter of adding, updating, - and removing objects from the `questions` array. - - - - - - - - -Finally, display an instance of the form in the `AppComponent` shell. - - - - - - -{@a dynamic-template} - -## Dynamic Template -Although in this example you're modelling a job application for heroes, there are -no references to any specific hero question -outside the objects returned by `QuestionService`. - -This is very important since it allows you to repurpose the components for any type of survey -as long as it's compatible with the *question* object model. -The key is the dynamic data binding of metadata used to render the form -without making any hardcoded assumptions about specific questions. -In addition to control metadata, you are also adding validation dynamically. - -The *Save* button is disabled until the form is in a valid state. -When the form is valid, you can click *Save* and the app renders the current form values as JSON. -This proves that any user input is bound back to the data model. -Saving and retrieving the data is an exercise for another time. - - -The final form looks like this: - -
    - Dynamic-Form -
    - - - -[Back to top](guide/dynamic-form#top) diff --git a/docs_app/content/guide/elements.md b/docs_app/content/guide/elements.md deleted file mode 100644 index 87ad0244b0..0000000000 --- a/docs_app/content/guide/elements.md +++ /dev/null @@ -1,155 +0,0 @@ -# Custom Elements Overview - -[Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) are a Web Platform feature currently supported by Chrome, Opera, and Safari, and available in other browsers through polyfills (see [Browser Support](#browser-support)). -A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. -The browser maintains a `CustomElementRegistry` of defined custom elements (also called Web Components), which maps an instantiable JavaScript class to an HTML tag. - -The `createCustomElement()` API provides a bridge from Angular's component interface and change detection functionality to the built-in DOM API. - -Transforming a component to a custom element makes all of the required Angular infrastructure available to the browser. Creating a custom element is simple and straightforward, and automatically connects your component-defined view with change detection and data binding, mapping Angular functionality to the corresponding native HTML equivalents. - -## Using custom elements - -Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions. - -- Easy dynamic content in an Angular app - - Transforming a component to a custom element provides an easy path to creating dynamic HTML content in your Angular app. HTML content that you add directly to the DOM in an Angular app is normally displayed without Angular processing, unless you define a _dynamic component_, adding your own code to connect the HTML tag to your app data, and participate in change detection. With a custom element, all of that wiring is taken care of automatically. - -- Content-rich applications - - If you have a content-rich app, such as the Angular app that presents this documentation, custom elements let you give your content providers sophisticated Angular functionality without requiring knowledge of Angular. For example, an Angular guide like this one is added directly to the DOM by the Angular navigation tools, but can include special elements like `` that perform complex operations. All you need to tell your content provider is the syntax of your custom element. They don't need to know anything about Angular, or anything about your component's data structures or implementation. - -### How it works - -Use the `createCustomElement()` function to convert a component into a class that can be registered with the browser as a custom element. -After you register your configured class with the browser's custom-element registry, you can use the new element just like a built-in HTML element in content that you add directly into the DOM: - -``` - -``` - -When your custom element is placed on a page, the browser creates an instance of the registered class and adds it to the DOM. The content is provided by the component's template, which uses Angular template syntax, and is rendered using the component and DOM data. Input properties in the component correspond to input attributes for the element. - -
    - -Custom element in browser - -
    - -
    - -
    - - We are working on custom elements that can be used by web apps built on other frameworks. - A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. - For more about the direction of development, check out this [video presentation](https://www.youtube.com/watch?v=vHI5C-9vH-E). - -
    - -## Transforming components to custom elements - -Angular provides the `createCustomElement()` function for converting an Angular component, -together with its dependencies, to a custom element. The function collects the component's -observable properties, along with the Angular functionality the browser needs to -create and destroy instances, and to detect and respond to changes. - -The conversion process implements the `NgElementConstructor` interface, and creates a -constructor class that is configured to produce a self-bootstrapping instance of your component. - -Use a JavaScript function, `customElements.define()`, to register the configured constructor -and its associated custom-element tag with the browser's `CustomElementRegistry`. -When the browser encounters the tag for the registered element, it uses the constructor to create a custom-element instance. - -
    - -Transform a component to a custom element - -
    - -### Mapping - -A custom element _hosts_ an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs. Component properties and logic maps directly into HTML attributes and the browser's event system. - -- The creation API parses the component looking for input properties, and defines corresponding attributes for the custom element. It transforms the property names to make them compatible with custom elements, which do not recognize case distinctions. The resulting attribute names use dash-separated lowercase. For example, for a component with `@Input('myInputProp') inputProp`, the corresponding custom element defines an attribute `my-input-prop`. - -- Component outputs are dispatched as HTML [Custom Events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent), with the name of the custom event matching the output name. For example, for a component with `@Output() valueChanged = new EventEmitter()`, the corresponding custom element will dispatch events with the name "valueChanged", and the emitted data will be stored on the event’s `detail` property. If you provide an alias, that value is used; for example, `@Output('myClick') clicks = new EventEmitter();` results in dispatch events with the name "myClick". - - -For more information, see Web Component documentation for [Creating custom events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Creating_custom_events). - - -{@a browser-support} - -## Browser support for custom elements - -The recently-developed [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers. - - - - - - - - - - - - - - - - - - - - - - - - - - -
    BrowserCustom Element Support
    ChromeSupported natively.
    OperaSupported natively.
    SafariSupported natively.
    Firefox Set the dom.webcomponents.enabled and dom.webcomponents.customelements.enabled preferences to true. Planned to be enabled by default in version 60/61.
    EdgeWorking on an implementation.
    - Use the CLI to automatically set up your project with the correct polyfill: ng add @angular/elements. -
    - - -- For more information about polyfills, see [polyfill documentation](https://www.webcomponents.org/polyfills). - -- For more information about Angular browser support, see [Browser Support](guide/browser-support). - - -## Example: A Popup Service - -Previously, when you wanted to add a component to an app at runtime, you had to define a _dynamic component_. The app module would have to list your dynamic component under `entryComponents`, so that the app wouldn't expect it to be present at startup, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling, as described in [Dynamic Component Loader](guide/dynamic-component-loader). - -Using an Angular custom element makes the process much simpler and more transparent, by providing all of the infrastructure and framework automatically—all you have to do is define the kind of event handling you want. (You do still have to exclude the component from compilation, if you are not going to use it in your app.) - -The Popup Service example app defines a component that you can either load dynamically or convert to a custom element. - -- `popup.component.ts` defines a simple pop-up element that displays an input message, with some animation and styling. -- `popup.service.ts` creates an injectable service that provides two different ways to invoke the PopupComponent; as a dynamic component, or as a custom element. Notice how much more setup is required for the dynamic-loading method. -- `app.module.ts` adds the PopupComponent in the module's `entryComponents` list, to exclude it from compilation and avoid startup warnings or errors. -- `app.component.ts` defines the app's root component, which uses the PopupService to add the pop-up to the DOM at run time. When the app runs, the root component's constructor converts PopupComponent to a custom element. - -For comparison, the demo shows both methods. One button adds the popup using the dynamic-loading method, and the other uses the custom element. You can see that the result is the same; only the preparation is different. - - - - - - - - - - - - - - - - - - - diff --git a/docs_app/content/guide/entry-components.md b/docs_app/content/guide/entry-components.md deleted file mode 100644 index d57654218d..0000000000 --- a/docs_app/content/guide/entry-components.md +++ /dev/null @@ -1,113 +0,0 @@ -# Entry Components - -#### Prerequisites: - -A basic understanding of the following concepts: -* [Bootstrapping](guide/bootstrapping). - -
    - -An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition. - -
    - -To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components. - -
    - - -There are two main kinds of entry components: - -* The bootstrapped root component. -* A component you specify in a route definition. - - -## A bootstrapped entry component - - -The following is an example of specifying a bootstrapped component, -`AppComponent`, in a basic `app.module.ts`: - -```typescript -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule, - AppRoutingModule - ], - providers: [], - bootstrap: [AppComponent] // bootstrapped entry component -}) -``` - -A bootstrapped component is an entry component -that Angular loads into the DOM during the bootstrap process (application launch). -Other entry components are loaded dynamically by other means, such as with the router. - -Angular loads a root `AppComponent` dynamically because it's listed by type in `@NgModule.bootstrap`. - -
    - -A component can also be bootstrapped imperatively in the module's `ngDoBootstrap()` method. -The `@NgModule.bootstrap` property tells the compiler that this is an entry component and -it should generate code to bootstrap the application with this component. - -
    - - -A bootstrapped component is necessarily an entry component because bootstrapping is an imperative process, thus it needs to have an entry component. - -## A routed entry component - - -The second kind of entry component occurs in a route definition like -this: - -```typescript -const routes: Routes = [ - { - path: '', - component: CustomerListComponent - } -]; -``` - -A route definition refers to a component by its type with `component: CustomerListComponent`. - -All router components must be entry components. Because this would require you to add the component in two places (router and `entryComponents`) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into `entryComponents`. - - -## The `entryComponents` array - -Though the `@NgModule` decorator has an `entryComponents` array, most of the time -you won't have to explicitly set any entry components because Angular adds components listed in `@NgModule.bootstrap` and those in route definitions to entry components automatically. Though these two mechanisms account for most entry components, if your app happens to bootstrap or dynamically load a component by type imperatively, -you must add it to `entryComponents` explicitly. - -### `entryComponents` and the compiler - -For production apps you want to load the smallest code possible. -The code should contain only the classes that you actually need and -exclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the `entryComponents`; This means that adding more references to `@NgModule.declarations` does not imply that they will necessarily be included in the final bundle. - -In fact, many libraries declare and export components you'll never use. -For example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all. -For the ones you don't reference, the tree shaker drops these components from the final code package. - -If a component isn't an _entry component_ and isn't found in a template, -the tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app -as trim as possible. - - -
    - -## More on Angular modules - -You may also be interested in the following: -* [Types of NgModules](guide/module-types) -* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules). -* [Providers](guide/providers). -* [NgModules FAQ](guide/ngmodule-faq). diff --git a/docs_app/content/guide/feature-modules.md b/docs_app/content/guide/feature-modules.md deleted file mode 100644 index 047a453de5..0000000000 --- a/docs_app/content/guide/feature-modules.md +++ /dev/null @@ -1,128 +0,0 @@ -# Feature Modules - -Feature modules are NgModules for the purpose of organizing code. - -#### Prerequisites -A basic understanding of the following: -* [Bootstrapping](guide/bootstrapping). -* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule). -* [Frequently Used Modules](guide/frequent-ngmodules). - -For the final sample app with a feature module that this page describes, -see the . - -
    - -As your app grows, you can organize code relevant for a specific feature. -This helps apply clear boundaries for features. With feature modules, -you can keep code related to a specific functionality or feature -separate from other code. Delineating areas of your -app helps with collaboration between developers and teams, separating -directives, and managing the size of the root module. - - -## Feature modules vs. root modules - -A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a -specific application need such as a user workflow, routing, or forms. -While you can do everything within the root module, feature modules -help you partition the app into focused areas. A feature module -collaborates with the root module and with other modules through -the services it provides and the components, directives, and -pipes that it shares. - -## How to make a feature module - -Assuming you already have a CLI generated app, create a feature -module using the CLI by entering the following command in the -root project directory. Replace `CustomerDashboard` with the -name of your module. You can omit the "Module" suffix from the name because the CLI appends it: - -```sh -ng generate module CustomerDashboard - -``` - - -This causes the CLI to create a folder called `customer-dashboard` with a file inside called `customer-dashboard.module.ts` with the following contents: - -```typescript -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - imports: [ - CommonModule - ], - declarations: [] -}) -export class CustomerDashboardModule { } -``` - -The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports `NgModule`, which, like the root module, lets you use the `@NgModule` decorator; the second imports `CommonModule`, which contributes many common directives such as `ngIf` and `ngFor`. Feature modules import `CommonModule` instead of `BrowserModule`, which is only imported once in the root module. `CommonModule` only contains information for common directives such as `ngIf` and `ngFor` which are needed in most templates, whereas `BrowserModule` configures the Angular app for the browser which needs to be done only once. - -The `declarations` array is available for you to add declarables, which -are components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where `customer-dashboard` is the directory where the CLI generated the feature module and `CustomerDashboard` is the name of the component: - -```sh -ng generate component customer-dashboard/CustomerDashboard - -``` - -This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the `CustomerDashboardComponent` info: - - - - - - - -The `CustomerDashboardComponent` is now in the JavaScript import list at the top and added to the `declarations` array, which lets Angular know to associate this new component with this feature module. - -## Importing a feature module - -To incorporate the feature module into your app, you have to let the root module, `app.module.ts`, know about it. Notice the `CustomerDashboardModule` export at the bottom of `customer-dashboard.module.ts`. This exposes it so that other modules can get to it. To import it into the `AppModule`, add it to the imports in `app.module.ts` and to the `imports` array: - - - - - -Now the `AppModule` knows about the feature module. If you were to add any service providers to the feature module, `AppModule` would know about those too, as would any other feature modules. However, NgModules don’t expose their components. - - -## Rendering a feature module’s component template - -When the CLI generated the `CustomerDashboardComponent` for the feature module, it included a template, `customer-dashboard.component.html`, with the following markup: - - - - - -To see this HTML in the `AppComponent`, you first have to export the `CustomerDashboardComponent` in the `CustomerDashboardModule`. In `customer-dashboard.module.ts`, just beneath the `declarations` array, add an `exports` array containing `CustomerDashboardModule`: - - - - - - -Next, in the `AppComponent`, `app.component.html`, add the tag ``: - - - - - -Now, in addition to the title that renders by default, the `CustomerDashboardComponent` template renders too: - - -
    - feature module component -
    - -
    - -## More on NgModules - -You may also be interested in the following: -* [Lazy Loading Modules with the Angular Router](guide/lazy-loading-ngmodules). -* [Providers](guide/providers). -* [Types of Feature Modules](guide/module-types). diff --git a/docs_app/content/guide/form-validation.md b/docs_app/content/guide/form-validation.md deleted file mode 100644 index 6be1a0293a..0000000000 --- a/docs_app/content/guide/form-validation.md +++ /dev/null @@ -1,212 +0,0 @@ -# Form Validation - - - - -Improve overall data quality by validating user input for accuracy and completeness. - -This page shows how to validate user input in the UI and display useful validation messages -using both reactive and template-driven forms. It assumes some basic knowledge of the two -forms modules. - -
    - -If you're new to forms, start by reviewing the [Forms](guide/forms) and -[Reactive Forms](guide/reactive-forms) guides. - -
    - - -## Template-driven validation - -To add validation to a template-driven form, you add the same validation attributes as you -would with [native HTML form validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). -Angular uses directives to match these attributes with validator functions in the framework. - -Every time the value of a form control changes, Angular runs validation and generates -either a list of validation errors, which results in an INVALID status, or null, which results in a VALID status. - -You can then inspect the control's state by exporting `ngModel` to a local template variable. -The following example exports `NgModel` into a variable called `name`: - - - - - - -Note the following: - -* The `` element carries the HTML validation attributes: `required` and `minlength`. It -also carries a custom validator directive, `forbiddenName`. For more -information, see [Custom validators](guide/form-validation#custom-validators) section. - -* `#name="ngModel"` exports `NgModel` into a local variable called `name`. `NgModel` mirrors many of the properties of its underlying -`FormControl` instance, so you can use this in the template to check for control states such as `valid` and `dirty`. For a full list of control properties, see the [AbstractControl](api/forms/AbstractControl) -API reference. - -* The `*ngIf` on the `
    ` element reveals a set of nested message `divs` -but only if the `name` is invalid and the control is either `dirty` or `touched`. - -* Each nested `
    ` can present a custom message for one of the possible validation errors. -There are messages for `required`, `minlength`, and `forbiddenName`. - - -
    - - - -#### Why check _dirty_ and _touched_? - -You may not want your application to display errors before the user has a chance to edit the form. -The checks for `dirty` and `touched` prevent errors from showing until the user -does one of two things: changes the value, -turning the control dirty; or blurs the form control element, setting the control to touched. - -
    - -## Reactive form validation - -In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class. Angular then calls these functions whenever the value of the control changes. - -### Validator functions - -There are two types of validator functions: sync validators and async validators. - -* **Sync validators**: functions that take a control instance and immediately return either a set of validation errors or `null`. You can pass these in as the second argument when you instantiate a `FormControl`. - -* **Async validators**: functions that take a control instance and return a Promise -or Observable that later emits a set of validation errors or `null`. You can -pass these in as the third argument when you instantiate a `FormControl`. - -Note: for performance reasons, Angular only runs async validators if all sync validators pass. Each must complete before errors are set. - -### Built-in validators - -You can choose to [write your own validator functions](guide/form-validation#custom-validators), or you can use some of -Angular's built-in validators. - -The same built-in validators that are available as attributes in template-driven forms, such as `required` and `minlength`, are all available to use as functions from the `Validators` class. For a full list of built-in validators, see the [Validators](api/forms/Validators) API reference. - -To update the hero form to be a reactive form, you can use some of the same -built-in validators—this time, in function form. See below: - -{@a reactive-component-class} - - - - -Note that: - -* The name control sets up two built-in validators—`Validators.required` and `Validators.minLength(4)`—and one custom validator, `forbiddenNameValidator`. For more details see the [Custom validators](guide/form-validation#custom-validators) section in this guide. -* As these validators are all sync validators, you pass them in as the second argument. -* Support multiple validators by passing the functions in as an array. -* This example adds a few getter methods. In a reactive form, you can always access any form control through the `get` method on its parent group, but sometimes it's useful to define getters as shorthands -for the template. - - -If you look at the template for the name input again, it is fairly similar to the template-driven example. - - - - -Key takeaways: - - * The form no longer exports any directives, and instead uses the `name` getter defined in - the component class. - * The `required` attribute is still present. While it's not necessary for validation purposes, - you may want to keep it in your template for CSS styling or accessibility reasons. - - -## Custom validators - -Since the built-in validators won't always match the exact use case of your application, sometimes you'll want to create a custom validator. - -Consider the `forbiddenNameValidator` function from previous -[examples](guide/form-validation#reactive-component-class) in -this guide. Here's what the definition of that function looks like: - - - - -The function is actually a factory that takes a regular expression to detect a _specific_ forbidden name and returns a validator function. - -In this sample, the forbidden name is "bob", so the validator will reject any hero name containing "bob". -Elsewhere it could reject "alice" or any name that the configuring regular expression matches. - -The `forbiddenNameValidator` factory returns the configured validator function. -That function takes an Angular control object and returns _either_ -null if the control value is valid _or_ a validation error object. -The validation error object typically has a property whose name is the validation key, `'forbiddenName'`, -and whose value is an arbitrary dictionary of values that you could insert into an error message, `{name}`. - -Custom async validators are similar to sync validators, but they must instead return a Promise or Observable -that later emits null or a validation error object. In the case of an Observable, the Observable must complete, -at which point the form uses the last value emitted for validation. - -### Adding to reactive forms - -In reactive forms, custom validators are fairly simple to add. All you have to do is pass the function directly -to the `FormControl`. - - - - -### Adding to template-driven forms - -In template-driven forms, you don't have direct access to the `FormControl` instance, so you can't pass the -validator in like you can for reactive forms. Instead, you need to add a directive to the template. - -The corresponding `ForbiddenValidatorDirective` serves as a wrapper around the `forbiddenNameValidator`. - -Angular recognizes the directive's role in the validation process because the directive registers itself -with the `NG_VALIDATORS` provider, a provider with an extensible collection of validators. - - - - -The directive class then implements the `Validator` interface, so that it can easily integrate -with Angular forms. Here is the rest of the directive to help you get an idea of how it all -comes together: - - - - -Once the `ForbiddenValidatorDirective` is ready, you can simply add its selector, `appForbiddenName`, to any input element to activate it. For example: - - - - - - -
    - -You may have noticed that the custom validation directive is instantiated with `useExisting` -rather than `useClass`. The registered validator must be _this instance_ of -the `ForbiddenValidatorDirective`—the instance in the form with -its `forbiddenName` property bound to “bob". If you were to replace -`useExisting` with `useClass`, then you’d be registering a new class instance, one that -doesn’t have a `forbiddenName`. - -
    - -## Control status CSS classes - -Like in AngularJS, Angular automatically mirrors many control properties onto the form control element as CSS classes. You can use these classes to style form control elements according to the state of the form. The following classes are currently supported: - -* `.ng-valid` -* `.ng-invalid` -* `.ng-pending` -* `.ng-pristine` -* `.ng-dirty` -* `.ng-untouched` -* `.ng-touched` - -The hero form uses the `.ng-valid` and `.ng-invalid` classes to -set the color of each form control's border. - - - - - - -**You can run the to see the complete reactive and template-driven example code.** diff --git a/docs_app/content/guide/forms.md b/docs_app/content/guide/forms.md deleted file mode 100644 index 7dc58f3ca3..0000000000 --- a/docs_app/content/guide/forms.md +++ /dev/null @@ -1,787 +0,0 @@ -# Forms - -Forms are the mainstay of business applications. -You use forms to log in, submit a help request, place an order, book a flight, -schedule a meeting, and perform countless other data-entry tasks. - -In developing a form, it's important to create a data-entry experience that guides the -user efficiently and effectively through the workflow. - -Developing forms requires design skills (which are out of scope for this page), as well as framework support for -*two-way data binding, change tracking, validation, and error handling*, -which you'll learn about on this page. - -This page shows you how to build a simple form from scratch. Along the way you'll learn how to: - -* Build an Angular form with a component and template. -* Use `ngModel` to create two-way data bindings for reading and writing input-control values. -* Track state changes and the validity of form controls. -* Provide visual feedback using special CSS classes that track the state of the controls. -* Display validation errors to users and enable/disable form controls. -* Share information across HTML elements using template reference variables. - -You can run the in Stackblitz and download the code from there. - -{@a template-driven} - -## Template-driven forms - -You can build forms by writing templates in the Angular [template syntax](guide/template-syntax) with -the form-specific directives and techniques described in this page. - -
    - - You can also use a reactive (or model-driven) approach to build forms. - However, this page focuses on template-driven forms. - -
    - -You can build almost any form with an Angular template—login forms, contact forms, and pretty much any business form. -You can lay out the controls creatively, bind them to data, specify validation rules and display validation errors, -conditionally enable or disable specific controls, trigger built-in visual feedback, and much more. - -Angular makes the process easy by handling many of the repetitive, boilerplate tasks you'd -otherwise wrestle with yourself. - -You'll learn to build a template-driven form that looks like this: - -
    - Clean Form -
    - -The *Hero Employment Agency* uses this form to maintain personal information about heroes. -Every hero needs a job. It's the company mission to match the right hero with the right crisis. - -Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot. - -If you delete the hero name, the form displays a validation error in an attention-grabbing style: - -
    - Invalid, Name Required -
    - -Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red. - -
    - - You can customize the colors and location of the "required" bar with standard CSS. - -
    - -You'll build this form in small steps: - -1. Create the `Hero` model class. -1. Create the component that controls the form. -1. Create a template with the initial form layout. -1. Bind data properties to each form control using the `ngModel` two-way data-binding syntax. -1. Add a `name` attribute to each form-input control. -1. Add custom CSS to provide visual feedback. -1. Show and hide validation-error messages. -1. Handle form submission with *ngSubmit*. -1. Disable the form’s *Submit* button until the form is valid. - -## Setup - -Create a new project named angular-forms: - - - - ng new angular-forms - - - -## Create the Hero model class - -As users enter form data, you'll capture their changes and update an instance of a model. -You can't lay out the form until you know what the model looks like. - -A model can be as simple as a "property bag" that holds facts about a thing of application importance. -That describes well the `Hero` class with its three required fields (`id`, `name`, `power`) -and one optional field (`alterEgo`). - -Using the Angular CLI, generate a new class named `Hero`: - - - - ng generate class Hero - - - -With this content: - - - - - -It's an anemic model with few requirements and no behavior. Perfect for the demo. - -The TypeScript compiler generates a public field for each `public` constructor parameter and -automatically assigns the parameter’s value to that field when you create heroes. - -The `alterEgo` is optional, so the constructor lets you omit it; note the question mark (?) in `alterEgo?`. - -You can create a new hero like this: - - - - - -## Create a form component - -An Angular form has two parts: an HTML-based _template_ and a component _class_ -to handle data and user interactions programmatically. -Begin with the class because it states, in brief, what the hero editor can do. - -Using the Angular CLI, generate a new component named `HeroForm`: - - - - ng generate component HeroForm - - - -With this content: - - - - - -There’s nothing special about this component, nothing form-specific, -nothing to distinguish it from any component you've written before. - -Understanding this component requires only the Angular concepts covered in previous pages. - -* The code imports the Angular core library and the `Hero` model you just created. -* The `@Component` selector value of "hero-form" means you can drop this form in a parent template with a `` tag. -* The `templateUrl` property points to a separate file for the template HTML. -* You defined dummy data for `model` and `powers`, as befits a demo. - -Down the road, you can inject a data service to get and save real data -or perhaps expose these properties as inputs and outputs -(see [Input and output properties](guide/template-syntax#inputs-outputs) on the -[Template Syntax](guide/template-syntax) page) for binding to a -parent component. This is not a concern now and these future changes won't affect the form. - -* You added a `diagnostic` property to return a JSON representation of the model. -It'll help you see what you're doing during development; you've left yourself a cleanup note to discard it later. - -## Revise *app.module.ts* - -`app.module.ts` defines the application's root module. In it you identify the external modules you'll use in the application -and declare the components that belong to this module, such as the `HeroFormComponent`. - -Because template-driven forms are in their own module, you need to add the `FormsModule` to the array of -`imports` for the application module before you can use forms. - -Update it with the following: - - - - - -
    - - There are two changes: - - 1. You import `FormsModule`. - - 1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application - access to all of the template-driven forms features, including `ngModel`. - -
    - -
    - - If a component, directive, or pipe belongs to a module in the `imports` array, ​_don't_​ re-declare it in the `declarations` array. - If you wrote it and it should belong to this module, ​_do_​ declare it in the `declarations` array. - -
    - -## Revise *app.component.html* - -`AppComponent` is the application's root component. It will host the new `HeroFormComponent`. - -Replace the contents of its template with the following: - - - - - -
    - - There are only two changes. - The `template` is simply the new element tag identified by the component's `selector` property. - This displays the hero form when the application component is loaded. - Don't forget to remove the `name` field from the class body as well. - -
    - -## Create an initial HTML form template - -Update the template file with the following contents: - - - - - -The language is simply HTML5. You're presenting two of the `Hero` fields, `name` and `alterEgo`, and -opening them up for user input in input boxes. - -The *Name* `` control has the HTML5 `required` attribute; -the *Alter Ego* `` control does not because `alterEgo` is optional. - -You added a *Submit* button at the bottom with some classes on it for styling. - -*You're not using Angular yet*. There are no bindings or extra directives, just layout. - -
    - - In template driven forms, if you've imported `FormsModule`, you don't have to do anything - to the `
    ` tag in order to make use of `FormsModule`. Continue on to see how this works. - -
    - -The `container`, `form-group`, `form-control`, and `btn` classes -come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic. -Bootstrap gives the form a little style. - -
    - -
    - Angular forms don't require a style library -
    - - Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or - the styles of any external library. Angular apps can use any CSS library or none at all. - -
    - -To add the stylesheet, open `styles.css` and add the following import line at the top: - - - - - -## Add powers with _*ngFor_ - -The hero must choose one superpower from a fixed list of agency-approved powers. -You maintain that list internally (in `HeroFormComponent`). - -You'll add a `select` to the -form and bind the options to the `powers` list using `ngFor`, -a technique seen previously in the [Displaying Data](guide/displaying-data) page. - -Add the following HTML *immediately below* the *Alter Ego* group: - - - - - -This code repeats the `