From fd72fad8fd334774162dd89ffcd8dc3e4e5ce21a Mon Sep 17 00:00:00 2001 From: Peter Bacon Darwin Date: Mon, 27 Mar 2017 16:08:53 +0100 Subject: [PATCH] docs(aio): update migrated content from anguar.io --- aio/content/cli-quickstart.md | 810 +++ aio/content/examples/.gitignore | 61 +- .../examples/_boilerplate/package.json | 2 +- .../_boilerplate/src/systemjs.config.js | 14 +- .../src/systemjs.config.web.build.js | 14 +- .../_boilerplate/src/systemjs.config.web.js | 14 +- .../examples/animations/{ts => }/.gitignore | 0 .../animations/{ts => }/example-config.json | 0 .../examples/animations/{ts => }/plnkr.json | 0 .../examples/animations/src/app/app.module.ts | 38 + .../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 + .../{ts => }/src/app/hero-list.component.css | 0 .../src/app/hero-team-builder.component.ts | 0 .../{ts => }/src/app/hero.service.ts | 0 .../animations/{ts => }/src/index.html | 0 .../examples/animations/{ts => }/src/main.ts | 0 .../examples/animations/ts/plnkr.no-link.html | 1011 ---- .../animations/ts/src/app/app.module.ts | 33 - .../ts/src/app/hero-list-auto.component.ts | 46 - .../ts/src/app/hero-list-basic.component.ts | 69 - ...ero-list-combined-transitions.component.ts | 58 - .../hero-list-enter-leave-states.component.ts | 62 - .../app/hero-list-enter-leave.component.ts | 50 - .../ts/src/app/hero-list-groups.component.ts | 79 - .../app/hero-list-inline-styles.component.ts | 59 - .../src/app/hero-list-multistep.component.ts | 70 - .../ts/src/app/hero-list-timings.component.ts | 57 - .../ts/src/app/hero-list-twoway.component.ts | 57 - .../architecture/{ts => }/example-config.json | 0 .../examples/architecture/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/backend.service.ts | 0 .../src/app/hero-detail.component.html | 0 .../src/app/hero-detail.component.ts | 11 + .../src/app/hero-list.component.1.html | 0 .../{ts => }/src/app/hero-list.component.html | 0 .../src/app/hero-list.component.ts | 29 + .../{ts => }/src/app/hero.service.ts | 0 .../architecture/{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/logger.service.ts | 0 .../architecture/{ts => }/src/app/mini-app.ts | 0 .../{ts => }/src/app/sales-tax.component.ts | 0 .../{ts => }/src/app/sales-tax.service.ts | 0 .../{ts => }/src/app/tax-rate.service.ts | 0 .../architecture/{ts => }/src/index.html | 0 .../architecture/{ts => }/src/main.ts | 0 .../architecture/ts/plnkr.no-link.html | 481 -- .../ts/src/app/hero-detail.component.ts | 12 - .../ts/src/app/hero-list.component.ts | 30 - .../examples/attribute-directives/e2e-spec.ts | 2 +- .../{ts => }/example-config.json | 0 .../attribute-directives/{ts => }/plnkr.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 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/dummy.module.1.ts | 0 .../{ts => }/src/app/highlight.directive.1.ts | 0 .../src/app/highlight.directive.2.ts | 41 + .../{ts => }/src/app/highlight.directive.3.ts | 0 .../src/app/highlight.directive.ts | 34 + .../{ts => }/src/index.html | 0 .../attribute-directives/{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 253 - .../ts/src/app/app.component.1.html | 20 - .../ts/src/app/app.component.1.ts | 12 - .../ts/src/app/app.component.html | 27 - .../ts/src/app/app.component.ts | 14 - .../ts/src/app/highlight.directive.2.ts | 45 - .../ts/src/app/highlight.directive.ts | 36 - .../{ts => }/example-config.json | 0 .../{ts => }/plnkr.json | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../{ts => }/src/app/app.component.css | 0 .../{ts => }/src/app/app.component.html | 0 .../src/app/app.component.ts | 32 + .../{ts => }/src/app/app.module.1.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/date.pipe.ts | 0 .../{ts => }/src/app/movie-list.component.css | 0 .../src/app/movie-list.component.html | 0 .../src/app/movie-list.component.ts | 42 + .../{ts => }/src/app/movie.service.ts | 0 .../{ts => }/src/app/movie.ts | 0 .../{ts => }/src/images/hero.png | Bin .../{ts => }/src/images/ng-logo.png | Bin .../{ts => }/src/images/villain.png | Bin .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 597 --- .../ts/src/app/app.component.ts | 33 - .../ts/src/app/movie-list.component.ts | 43 - .../cb-aot-compiler/{ts => }/.gitignore | 0 .../examples/cb-aot-compiler/e2e-spec.ts | 2 +- .../{ts => }/example-config.json | 0 .../cb-aot-compiler/{ts => }/rollup-config.js | 0 .../{ts => }/src/app/app.component.html | 0 .../cb-aot-compiler/src/app/app.component.ts | 15 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/index-jit.html | 0 .../examples/cb-aot-compiler/src/index.html | 20 + .../cb-aot-compiler/{ts => }/src/main-jit.ts | 0 .../cb-aot-compiler/{ts => }/src/main.ts | 0 .../ts/src/app/app.component.ts | 16 - .../cb-aot-compiler/ts/src/index.html | 23 - .../ts/tsconfig-aot.json.annotated | 25 - .../{ts => }/tsconfig-aot.json | 0 .../{ts => }/.gitignore | 0 .../{ts => }/example-config.json | 0 .../{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.html | 0 .../src/app/app.component.ts | 7 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/astronaut.component.ts | 0 .../src/app/countdown-parent.component.ts | 0 .../src/app/countdown-timer.component.ts | 0 .../{ts => }/src/app/hero-child.component.ts | 0 .../{ts => }/src/app/hero-parent.component.ts | 0 .../{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/mission.service.ts | 0 .../src/app/missioncontrol.component.ts | 0 .../{ts => }/src/app/name-child.component.ts | 0 .../{ts => }/src/app/name-parent.component.ts | 0 .../src/app/version-child.component.ts | 0 .../src/app/version-parent.component.ts | 0 .../{ts => }/src/app/voter.component.ts | 0 .../{ts => }/src/app/votetaker.component.ts | 0 .../{ts => }/src/demo.css | 0 .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 757 --- .../ts/src/app/app.component.ts | 8 - .../cb-component-relative-paths/e2e-spec.ts | 42 - .../cb-component-relative-paths/ts/plnkr.json | 9 - .../ts/plnkr.no-link.html | 277 -- .../ts/src/app/app.component.ts | 12 - .../ts/src/app/app.module.ts | 18 - .../ts/src/app/some.component.css | 22 - .../ts/src/app/some.component.html | 4 - .../ts/src/app/some.component.ts | 37 - .../ts/src/index.html | 30 - .../example-config.json | 0 .../{ts => }/plnkr.json | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../{ts => }/src/app/app.component.html | 0 .../src/app/app.component.ts | 29 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/date-logger.service.ts | 0 .../{ts => }/src/app/hero-bio.component.ts | 0 .../{ts => }/src/app/hero-bios.component.ts | 0 .../{ts => }/src/app/hero-cache.service.ts | 0 .../src/app/hero-contact.component.ts | 0 .../{ts => }/src/app/hero-data.ts | 0 .../src/app/hero-of-the-month.component.ts | 0 .../{ts => }/src/app/hero.service.ts | 0 .../{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/highlight.directive.ts | 0 .../{ts => }/src/app/logger.service.ts | 0 .../src/app/parent-finder.component.ts | 0 .../{ts => }/src/app/runners-up.ts | 0 .../src/app/sorted-heroes.component.ts | 0 .../{ts => }/src/app/user-context.service.ts | 0 .../{ts => }/src/app/user.service.ts | 0 .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../{ts => }/src/sample.css | 0 .../ts/plnkr.no-link.html | 989 ---- .../ts/src/app/app.component.ts | 30 - .../example-config.json | 0 .../{ts => }/src/app/ad-banner.component.ts | 0 .../{ts => }/src/app/ad-item.ts | 0 .../{ts => }/src/app/ad.component.ts | 0 .../{ts => }/src/app/ad.directive.ts | 0 .../{ts => }/src/app/ad.service.ts | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/hero-job-ad.component.ts | 0 .../src/app/hero-profile.component.ts | 0 .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../{ts => }/src/sample.css | 0 .../example-config.json | 0 .../cb-dynamic-form/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../app/dynamic-form-question.component.html | 0 .../app/dynamic-form-question.component.ts | 15 + .../src/app/dynamic-form.component.html | 0 .../src/app/dynamic-form.component.ts | 28 + .../{ts => }/src/app/question-base.ts | 0 .../src/app/question-control.service.ts | 0 .../{ts => }/src/app/question-dropdown.ts | 0 .../{ts => }/src/app/question-textbox.ts | 0 .../{ts => }/src/app/question.service.ts | 0 .../cb-dynamic-form/{ts => }/src/index.html | 0 .../cb-dynamic-form/{ts => }/src/main.ts | 0 .../cb-dynamic-form/{ts => }/src/sample.css | 0 .../cb-dynamic-form/ts/plnkr.no-link.html | 463 -- .../app/dynamic-form-question.component.ts | 16 - .../ts/src/app/dynamic-form.component.ts | 29 - .../example-config.json | 0 .../cb-form-validation/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../hero-form-reactive.component.html | 0 .../reactive/hero-form-reactive.component.ts | 116 + .../app/reactive/hero-form-reactive.module.ts | 0 .../app/shared/forbidden-name.directive.ts | 0 .../{ts => }/src/app/shared/hero.ts | 0 .../{ts => }/src/app/shared/shared.module.ts | 0 .../src/app/shared/submitted.component.ts | 0 .../app/template/hero-form-template.module.ts | 0 .../hero-form-template1.component.html | 0 .../template/hero-form-template1.component.ts | 47 + .../hero-form-template2.component.html | 0 .../template/hero-form-template2.component.ts | 99 + .../cb-form-validation/{ts => }/src/forms.css | 0 .../{ts => }/src/index.html | 0 .../cb-form-validation/{ts => }/src/main.ts | 0 .../cb-form-validation/ts/plnkr.no-link.html | 768 --- .../reactive/hero-form-reactive.component.ts | 117 - .../template/hero-form-template1.component.ts | 48 - .../template/hero-form-template2.component.ts | 100 - .../examples/cb-i18n/{ts => }/.gitignore | 0 .../ts => cb-i18n}/example-config.json | 0 .../examples/cb-i18n/{ts => }/messages.xlf | 0 aio/content/examples/cb-i18n/plnkr.json | 19 + .../{ts => }/src/app/app.component.1.html | 0 .../{ts => }/src/app/app.component.html | 0 .../examples/cb-i18n/src/app/app.component.ts | 19 + .../cb-i18n/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/i18n-providers.ts | 0 .../examples/cb-i18n/{ts => }/src/index.html | 0 .../{ts => }/src/locale/messages.es.xlf | 0 .../{ts => }/src/locale/messages.es.xlf.html | 0 .../examples/cb-i18n/{ts => }/src/main.1.ts | 0 .../examples/cb-i18n/{ts => }/src/main.ts | 0 aio/content/examples/cb-i18n/ts/plnkr.json | 18 - .../examples/cb-i18n/ts/plnkr.no-link.html | 329 -- .../cb-i18n/ts/src/app/app.component.ts | 20 - .../cb-i18n/ts/src/systemjs-text-plugin.js | 14 - .../example-config.json | 0 .../cb-set-document-title/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 228 - .../js-es6-decorators/plnkr.no-link.html | 209 - .../src/app/app.component.es6 | 1 - .../src/app/confirm.component.es6 | 1 - .../src/app/hero-title.component.es6 | 1 - .../src/systemjs-angular-loader.js | 45 + .../js-es6-decorators/src/systemjs.config.js | 52 + .../cb-ts-to-js/js-es6/plnkr.no-link.html | 208 - .../js-es6/src/app/app.component.es6 | 1 - .../js-es6/src/app/confirm.component.es6 | 1 - .../js-es6/src/app/hero-title.component.es6 | 1 - .../js-es6/src/systemjs-angular-loader.js | 45 + .../cb-ts-to-js/js-es6/src/systemjs.config.js | 52 + .../cb-ts-to-js/js/example-config.json | 3 + .../cb-ts-to-js/js/plnkr.no-link.html | 1022 ---- .../js/src/systemjs-angular-loader.js | 45 + .../cb-ts-to-js/js/src/systemjs.config.js | 52 + .../cb-ts-to-js/ts/plnkr.no-link.html | 652 --- .../cb-ts-to-js/ts/src/app/app.component.ts | 1 - .../ts/src/app/confirm.component.ts | 1 - .../ts/src/app/hero-title.component.ts | 1 - .../cb-visual-studio-2015/{ts => }/.gitignore | 0 .../{ts => }/tsconfig.json | 0 .../examples/cli-quickstart/.angular-cli.json | 57 + .../examples/cli-quickstart/.editorconfig | 13 + .../examples/cli-quickstart/.gitignore | 45 + aio/content/examples/cli-quickstart/README.md | 27 + .../{ts => }/bs-config.cli.json | 0 .../{ts => }/e2e/app.e2e-spec.ts | 0 .../cli-quickstart/{ts => }/e2e/app.po.ts | 0 .../cli-quickstart/e2e/tsconfig.e2e.json | 19 + .../{ts => }/example-config.json | 0 .../{ts => }/src/app/app.component.css | 0 .../{ts => }/src/app/app.component.html | 0 .../src/app/app.component.spec.ts | 32 + .../{ts => }/src/app/app.component.ts | 0 .../cli-quickstart/src/app/app.module.ts | 20 + .../{ts => }/src/assets/.gitkeep | 0 .../src/environments/environment.prod.ts | 0 .../src/environments/environment.ts | 8 + .../cli-quickstart/{ts => }/src/favicon.ico | Bin .../cli-quickstart/{ts => }/src/index.html | 0 .../examples/cli-quickstart/src/main.ts | 11 + .../examples/cli-quickstart/src/polyfills.ts | 68 + .../examples/cli-quickstart/src/test.ts | 32 + .../cli-quickstart/src/tsconfig.app.json | 22 + .../cli-quickstart/src/tsconfig.spec.json | 26 + .../examples/cli-quickstart/ts/.gitignore | 42 - .../examples/cli-quickstart/ts/README.md | 31 - .../cli-quickstart/ts/angular-cli.json | 59 - .../ts/src/app/app.component.spec.ts | 35 - .../cli-quickstart/ts/src/app/app.module.ts | 20 - .../ts/src/environments/environment.ts | 8 - .../examples/cli-quickstart/ts/src/main.ts | 12 - .../cli-quickstart/ts/src/polyfills.ts | 19 - .../examples/cli-quickstart/ts/src/test.ts | 32 - .../examples/cli-quickstart/tsconfig.json | 14 + .../examples/cli-quickstart/zipper.json | 11 + .../examples/component-styles/e2e-spec.ts | 7 +- .../example-config.json | 0 .../component-styles/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.module.ts | 0 .../src/app/hero-app-main.component.ts | 0 .../{ts => }/src/app/hero-app.component.ts | 0 .../src/app/hero-controls.component.ts | 0 .../{ts => }/src/app/hero-details-box.css | 0 .../src/app/hero-details.component.css | 0 .../src/app/hero-details.component.ts | 0 .../{ts => }/src/app/hero-team.component.css | 0 .../{ts => }/src/app/hero-team.component.ts | 0 .../component-styles/{ts => }/src/app/hero.ts | 0 .../src/app/quest-summary.component.css | 0 .../src/app/quest-summary.component.html | 0 .../src/app/quest-summary.component.ts | 20 + .../component-styles/{ts => }/src/index.html | 0 .../component-styles/{ts => }/src/main.ts | 0 .../component-styles/ts/plnkr.no-link.html | 409 -- .../ts/src/app/quest-summary.component.ts | 21 - .../examples/dependency-injection/e2e-spec.ts | 4 +- .../example-config.json | 0 .../dependency-injection/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.1.ts | 0 .../{ts => }/src/app/app.component.2.ts | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.config.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/car/car-creations.ts | 0 .../{ts => }/src/app/car/car-factory.ts | 0 .../{ts => }/src/app/car/car-injector.ts | 0 .../{ts => }/src/app/car/car-no-di.ts | 0 .../{ts => }/src/app/car/car.component.ts | 0 .../{ts => }/src/app/car/car.ts | 0 .../src/app/heroes/hero-list.component.1.ts | 0 .../src/app/heroes/hero-list.component.2.ts | 0 .../src/app/heroes/hero-list.component.ts | 0 .../{ts => }/src/app/heroes/hero.service.1.ts | 0 .../{ts => }/src/app/heroes/hero.service.2.ts | 0 .../src/app/heroes/hero.service.provider.ts | 0 .../{ts => }/src/app/heroes/hero.service.ts | 0 .../{ts => }/src/app/heroes/hero.ts | 0 .../src/app/heroes/heroes.component.1.ts | 0 .../src/app/heroes/heroes.component.ts | 0 .../{ts => }/src/app/heroes/mock-heroes.ts | 0 .../src/app/injector.component.ts | 49 + .../{ts => }/src/app/logger.service.ts | 0 .../{ts => }/src/app/providers.component.ts | 0 .../{ts => }/src/app/test.component.ts | 0 .../{ts => }/src/app/user.service.ts | 0 .../{ts => }/src/index.html | 0 .../dependency-injection/{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 986 ---- .../ts/src/app/injector.component.ts | 43 - .../examples/deployment/{ts => }/.gitignore | 0 .../ts => deployment}/example-config.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../deployment/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/crisis-list.component.ts | 0 .../{ts => }/src/app/hero-list.component.ts | 0 .../examples/deployment/src/index.html | 38 + .../examples/deployment/{ts => }/src/main.ts | 0 .../{ts => }/src/systemjs.config.server.js | 0 .../examples/deployment/ts/src/index.html | 38 - .../example-config.json | 0 .../displaying-data/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app-ctor.component.ts | 0 .../{ts => }/src/app/app.component.1.ts | 0 .../{ts => }/src/app/app.component.2.ts | 0 .../{ts => }/src/app/app.component.3.ts | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../displaying-data/{ts => }/src/app/hero.ts | 0 .../displaying-data/{ts => }/src/index.html | 0 .../displaying-data/{ts => }/src/main.ts | 0 .../displaying-data/ts/plnkr.no-link.html | 228 - .../ts => forms}/example-config.json | 0 .../examples/forms/js/example-config.json | 3 + .../examples/forms/js/plnkr.no-link.html | 440 -- .../forms/js/src/app/app.component.js | 11 - .../examples/forms/js/src/app/app.module.js | 19 - .../forms/js/src/app/hero-form.component.js | 52 - aio/content/examples/forms/js/src/app/hero.js | 11 - aio/content/examples/forms/js/src/index.html | 2 +- aio/content/examples/forms/js/src/main.js | 8 - .../examples/forms/{ts => }/plnkr.json | 0 .../forms/{ts => }/src/app/app.component.ts | 0 .../forms/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/hero-form.component.html | 0 .../forms/src/app/hero-form.component.ts | 59 + .../examples/forms/{ts => }/src/app/hero.ts | 0 .../examples/forms/{ts => }/src/forms.css | 0 .../examples/forms/{ts => }/src/index.html | 0 .../examples/forms/{ts => }/src/main.ts | 0 .../examples/forms/ts/plnkr.no-link.html | 461 -- .../forms/ts/src/app/hero-form.component.ts | 60 - .../example-config.json | 0 .../{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/car.components.ts | 0 .../{ts => }/src/app/car.services.ts | 0 .../src/app/hero-tax-return.component.css | 0 .../src/app/hero-tax-return.component.html | 0 .../src/app/hero-tax-return.component.ts | 44 + .../src/app/hero-tax-return.service.ts | 0 .../{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/heroes-list.component.ts | 0 .../{ts => }/src/app/heroes.service.ts | 0 .../src/app/villains-list.component.html | 6 + .../src/app/villains-list.component.ts | 20 + .../{ts => }/src/app/villains.service.ts | 0 .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 744 --- .../ts/src/app/hero-tax-return.component.ts | 44 - .../ts/src/app/villains-list.component.html | 6 - .../ts/src/app/villains-list.component.ts | 21 - .../example-config.json | 0 .../homepage-hello-world/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/hello_world.html | 0 .../src/app/hello_world.ts | 15 + .../homepage-hello-world/src/index.1.html | 32 + .../{ts => }/src/index.html | 0 .../homepage-hello-world/{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 217 - .../ts/src/app/hello_world.ts | 18 - .../homepage-hello-world/ts/src/index.1.html | 32 - .../ts => homepage-tabs}/example-config.json | 0 .../homepage-tabs/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.module.ts | 0 .../homepage-tabs/{ts => }/src/app/di_demo.ts | 0 .../homepage-tabs/{ts => }/src/app/ui_tabs.ts | 0 .../examples/homepage-tabs/src/index.1.html | 33 + .../homepage-tabs/{ts => }/src/index.html | 0 .../homepage-tabs/{ts => }/src/main.ts | 0 .../homepage-tabs/ts/plnkr.no-link.html | 292 -- .../homepage-tabs/ts/src/index.1.html | 33 - .../ts => homepage-todo}/example-config.json | 0 .../homepage-todo/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.module.ts | 0 .../homepage-todo/{ts => }/src/app/todo.ts | 0 .../{ts => }/src/app/todo_app.ts | 0 .../{ts => }/src/app/todo_form.ts | 0 .../{ts => }/src/app/todo_list.ts | 0 .../examples/homepage-todo/src/index.1.html | 33 + .../homepage-todo/{ts => }/src/index.html | 0 .../homepage-todo/{ts => }/src/main.ts | 0 .../homepage-todo/ts/plnkr.no-link.html | 303 -- .../homepage-todo/ts/src/index.1.html | 33 - .../example-config.json | 0 .../lifecycle-hooks/{ts => }/plnkr.json | 0 .../src/app/after-content.component.ts | 0 .../{ts => }/src/app/after-view.component.ts | 0 .../{ts => }/src/app/app.component.html | 0 .../lifecycle-hooks/src/app/app.component.ts | 7 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/counter.component.ts | 0 .../src/app/do-check-parent.component.html | 0 .../src/app/do-check.component.ts | 95 + .../{ts => }/src/app/logger.service.ts | 0 .../src/app/on-changes-parent.component.html | 0 .../src/app/on-changes.component.ts | 73 + .../src/app/peek-a-boo-parent.component.ts | 0 .../{ts => }/src/app/peek-a-boo.component.ts | 0 .../{ts => }/src/app/spy.component.html | 0 .../lifecycle-hooks/src/app/spy.component.ts | 40 + .../{ts => }/src/app/spy.directive.ts | 0 .../lifecycle-hooks/{ts => }/src/index.html | 0 .../lifecycle-hooks/{ts => }/src/main.ts | 0 .../lifecycle-hooks/{ts => }/src/sample.css | 0 .../lifecycle-hooks/ts/plnkr.no-link.html | 1097 ----- .../ts/src/app/app.component.ts | 8 - .../ts/src/app/do-check.component.ts | 96 - .../ts/src/app/on-changes.component.ts | 74 - .../ts/src/app/spy.component.ts | 41 - .../ts => ngcontainer}/example-config.json | 0 .../examples/ngcontainer/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.css | 0 .../{ts => }/src/app/app.component.html | 0 .../ngcontainer/src/app/app.component.ts | 24 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/content.component.ts | 0 .../{ts => }/src/app/hero.components.ts | 0 .../ngcontainer/{ts => }/src/app/hero.ts | 0 .../ngcontainer/{ts => }/src/index.html | 0 .../examples/ngcontainer/{ts => }/src/main.ts | 0 .../ngcontainer/ts/plnkr.no-link.html | 586 --- .../ngcontainer/ts/src/app/app.component.ts | 25 - .../ngmodule/{ts => }/contact.1b.plnkr.json | 0 .../ngmodule/{ts => }/contact.2.plnkr.json | 0 .../ts => ngmodule}/example-config.json | 0 .../ngmodule/{ts => }/minimal.0.plnkr.json | 0 .../examples/ngmodule/{ts => }/plnkr.json | 0 .../ngmodule/{ts => }/pre-shared.3.plnkr.json | 0 .../{ts => }/src/app/app-routing.module.3.ts | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../{ts => }/src/app/app.component.0.ts | 0 .../{ts => }/src/app/app.component.1.ts | 0 .../{ts => }/src/app/app.component.1b.ts | 0 .../{ts => }/src/app/app.component.2.ts | 0 .../{ts => }/src/app/app.component.3.ts | 0 .../{ts => }/src/app/app.component.ts | 0 .../ngmodule/{ts => }/src/app/app.module.0.ts | 0 .../ngmodule/{ts => }/src/app/app.module.1.ts | 0 .../{ts => }/src/app/app.module.1b.ts | 0 .../ngmodule/{ts => }/src/app/app.module.2.ts | 0 .../ngmodule/{ts => }/src/app/app.module.3.ts | 0 .../ngmodule/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/contact/awesome.pipe.ts | 0 .../app/contact/contact-routing.module.3.ts | 0 .../src/app/contact/contact-routing.module.ts | 0 .../src/app/contact/contact.component.3.ts | 53 + .../src/app/contact/contact.component.css | 0 .../src/app/contact/contact.component.html | 0 .../src/app/contact/contact.component.ts | 54 + .../src/app/contact/contact.module.2.ts | 0 .../src/app/contact/contact.module.3.ts | 0 .../src/app/contact/contact.module.ts | 0 .../src/app/contact/contact.service.ts | 0 .../src/app/contact/highlight.directive.ts | 0 .../{ts => }/src/app/core/core.module.ts | 0 .../src/app/core/title.component.html | 0 .../ngmodule/src/app/core/title.component.ts | 17 + .../{ts => }/src/app/core/user.service.ts | 0 .../src/app/crisis/crisis-detail.component.ts | 0 .../src/app/crisis/crisis-list.component.ts | 0 .../src/app/crisis/crisis-routing.module.ts | 0 .../{ts => }/src/app/crisis/crisis.module.ts | 0 .../{ts => }/src/app/crisis/crisis.service.ts | 0 .../src/app/hero/hero-detail.component.ts | 0 .../src/app/hero/hero-list.component.ts | 0 .../src/app/hero/hero-routing.module.3.ts | 0 .../src/app/hero/hero-routing.module.ts | 0 .../{ts => }/src/app/hero/hero.component.3.ts | 0 .../{ts => }/src/app/hero/hero.component.ts | 0 .../{ts => }/src/app/hero/hero.module.3.ts | 0 .../{ts => }/src/app/hero/hero.module.ts | 0 .../{ts => }/src/app/hero/hero.service.ts | 0 .../src/app/hero/highlight.directive.ts | 0 .../{ts => }/src/app/highlight.directive.ts | 0 .../{ts => }/src/app/shared/awesome.pipe.ts | 0 .../src/app/shared/highlight.directive.ts | 0 .../{ts => }/src/app/shared/shared.module.ts | 0 .../{ts => }/src/app/title.component.html | 0 .../ngmodule/src/app/title.component.ts | 24 + .../ngmodule/{ts => }/src/app/user.service.ts | 0 .../ngmodule/{ts => }/src/index.0.html | 0 .../ngmodule/{ts => }/src/index.1.html | 0 .../ngmodule/{ts => }/src/index.1b.html | 0 .../ngmodule/{ts => }/src/index.2.html | 0 .../ngmodule/{ts => }/src/index.3.html | 0 .../examples/ngmodule/{ts => }/src/index.html | 0 .../ngmodule/{ts => }/src/main-static.ts | 0 .../examples/ngmodule/{ts => }/src/main.0.ts | 0 .../examples/ngmodule/{ts => }/src/main.1.ts | 0 .../examples/ngmodule/{ts => }/src/main.1b.ts | 0 .../examples/ngmodule/{ts => }/src/main.2.ts | 0 .../examples/ngmodule/{ts => }/src/main.3.ts | 0 .../examples/ngmodule/{ts => }/src/main.ts | 0 .../ngmodule/ts/contact.1b.plnkr.no-link.html | 475 -- .../ngmodule/ts/contact.2.plnkr.no-link.html | 491 -- .../ngmodule/ts/minimal.0.plnkr.no-link.html | 195 - .../examples/ngmodule/ts/plnkr.no-link.html | 909 ---- .../ts/pre-shared.3.plnkr.no-link.html | 861 ---- .../ts/src/app/contact/contact.component.3.ts | 54 - .../ts/src/app/contact/contact.component.ts | 55 - .../ts/src/app/core/title.component.ts | 18 - .../ngmodule/ts/src/app/title.component.ts | 25 - aio/content/examples/package.json | 41 +- .../ts => pipes}/example-config.json | 0 .../examples/pipes/{ts => }/plnkr.json | 0 .../pipes/{ts => }/src/app/app.component.html | 0 .../examples/pipes/src/app/app.component.ts | 10 + .../pipes/{ts => }/src/app/app.module.ts | 0 .../src/app/exponential-strength.pipe.ts | 0 .../pipes/{ts => }/src/app/fetch-json.pipe.ts | 0 .../app/flying-heroes-impure.component.html | 0 .../src/app/flying-heroes.component.html | 0 .../pipes/src/app/flying-heroes.component.ts | 61 + .../{ts => }/src/app/flying-heroes.pipe.ts | 0 .../src/app/hero-async-message.component.ts | 0 .../src/app/hero-birthday1.component.ts | 0 .../src/app/hero-birthday2.component.ts | 0 .../{ts => }/src/app/hero-list.component.ts | 0 .../examples/pipes/{ts => }/src/app/heroes.ts | 0 .../app/power-boost-calculator.component.ts | 0 .../src/app/power-booster.component.ts | 0 .../examples/pipes/{ts => }/src/heroes.json | 0 .../examples/pipes/{ts => }/src/index.html | 0 .../examples/pipes/{ts => }/src/main.ts | 0 .../examples/pipes/ts/plnkr.no-link.html | 663 --- .../pipes/ts/src/app/app.component.ts | 11 - .../ts/src/app/flying-heroes.component.ts | 63 - .../quickstart/{ts => }/bs-config.1.json | 0 .../ts => quickstart}/example-config.json | 0 .../quickstart/js/example-config.json | 3 + .../examples/quickstart/js/package.1.json | 4 +- .../examples/quickstart/js/plnkr.no-link.html | 204 - .../quickstart/js/src/app/app.component.js | 27 - .../quickstart/js/src/app/app.module.js | 15 - .../examples/quickstart/js/src/main.js | 8 - .../examples/quickstart/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../quickstart/{ts => }/src/app/app.module.ts | 0 .../quickstart/{ts => }/src/index.html | 0 .../ts => quickstart}/src/main.ts | 0 .../quickstart/{ts => }/src/tsconfig.1.json | 0 .../examples/quickstart/ts/plnkr.no-link.html | 74 - .../ts => reactive-forms}/example-config.json | 0 .../reactive-forms/{ts => }/final.plnkr.json | 0 .../reactive-forms/{ts => }/plnkr.json | 0 .../reactive-forms/src/app/app.component.1.ts | 12 + .../reactive-forms/src/app/app.component.ts | 12 + .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/data-model.ts | 0 .../{ts => }/src/app/demo.component.html | 0 .../reactive-forms/src/app/demo.component.ts | 47 + .../{ts => }/src/app/demo.module.ts | 0 .../src/app/hero-detail-1.component.html | 0 .../src/app/hero-detail-1.component.ts | 14 + .../src/app/hero-detail-2.component.html | 0 .../src/app/hero-detail-2.component.ts | 17 + .../src/app/hero-detail-3.component.html | 0 .../src/app/hero-detail-3.component.ts | 27 + .../src/app/hero-detail-3a.component.ts | 25 + .../src/app/hero-detail-4.component.html | 0 .../src/app/hero-detail-4.component.ts | 34 + .../src/app/hero-detail-5.component.html | 0 .../src/app/hero-detail-5.component.ts | 35 + .../src/app/hero-detail-6.component.html | 0 .../src/app/hero-detail-6.component.ts | 58 + .../src/app/hero-detail-7.component.html | 0 .../src/app/hero-detail-7.component.ts | 69 + .../src/app/hero-detail-8.component.html | 0 .../src/app/hero-detail-8.component.ts | 68 + .../src/app/hero-detail.component.html | 0 .../src/app/hero-detail.component.ts | 107 + .../src/app/hero-list.component.1.html | 0 .../{ts => }/src/app/hero-list.component.html | 0 .../src/app/hero-list.component.ts | 31 + .../{ts => }/src/app/hero.service.ts | 0 .../{ts => }/src/index-final.html | 0 .../reactive-forms/{ts => }/src/index.html | 0 .../reactive-forms/{ts => }/src/main-final.ts | 0 .../reactive-forms/{ts => }/src/main.ts | 0 .../ts/final.plnkr.no-link.html | 515 -- .../reactive-forms/ts/plnkr.no-link.html | 1325 ----- .../ts/src/app/app.component.1.ts | 13 - .../ts/src/app/app.component.ts | 13 - .../ts/src/app/demo.component.ts | 48 - .../ts/src/app/hero-detail-1.component.ts | 15 - .../ts/src/app/hero-detail-2.component.ts | 18 - .../ts/src/app/hero-detail-3.component.ts | 28 - .../ts/src/app/hero-detail-3a.component.ts | 26 - .../ts/src/app/hero-detail-4.component.ts | 35 - .../ts/src/app/hero-detail-5.component.ts | 36 - .../ts/src/app/hero-detail-6.component.ts | 59 - .../ts/src/app/hero-detail-7.component.ts | 67 - .../ts/src/app/hero-detail-8.component.ts | 69 - .../ts/src/app/hero-detail.component.ts | 108 - .../ts/src/app/hero-list.component.ts | 32 - aio/content/examples/router/e2e-spec.ts | 218 +- .../ts => router}/example-config.json | 0 .../examples/router/{ts => }/plnkr.json | 0 .../app/admin/admin-dashboard.component.1.ts | 0 .../app/admin/admin-dashboard.component.2.ts | 0 .../app/admin/admin-dashboard.component.ts | 0 .../src/app/admin/admin-routing.module.1.ts | 0 .../src/app/admin/admin-routing.module.2.ts | 0 .../src/app/admin/admin-routing.module.3.ts | 0 .../src/app/admin/admin-routing.module.ts | 0 .../{ts => }/src/app/admin/admin.component.ts | 0 .../{ts => }/src/app/admin/admin.module.ts | 0 .../src/app/admin/manage-crises.component.ts | 0 .../src/app/admin/manage-heroes.component.ts | 0 .../router/{ts => }/src/app/animations.ts | 0 .../{ts => }/src/app/app-routing.module.1.ts | 0 .../{ts => }/src/app/app-routing.module.2.ts | 0 .../{ts => }/src/app/app-routing.module.3.ts | 0 .../{ts => }/src/app/app-routing.module.4.ts | 0 .../{ts => }/src/app/app-routing.module.5.ts | 0 .../{ts => }/src/app/app-routing.module.6.ts | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../{ts => }/src/app/app.component.1.ts | 0 .../{ts => }/src/app/app.component.2.ts | 0 .../{ts => }/src/app/app.component.3.ts | 0 .../{ts => }/src/app/app.component.4.ts | 0 .../{ts => }/src/app/app.component.5.ts | 0 .../router/{ts => }/src/app/app.component.ts | 0 .../router/{ts => }/src/app/app.module.0.ts | 0 .../router/{ts => }/src/app/app.module.1.ts | 0 .../router/{ts => }/src/app/app.module.2.ts | 0 .../router/{ts => }/src/app/app.module.3.ts | 0 .../router/{ts => }/src/app/app.module.4.ts | 0 .../router/{ts => }/src/app/app.module.5.ts | 0 .../router/{ts => }/src/app/app.module.6.ts | 0 .../router/{ts => }/src/app/app.module.7.ts | 0 .../examples/router/src/app/app.module.ts | 56 + .../{ts => }/src/app/auth-guard.service.1.ts | 0 .../{ts => }/src/app/auth-guard.service.2.ts | 0 .../{ts => }/src/app/auth-guard.service.3.ts | 0 .../{ts => }/src/app/auth-guard.service.4.ts | 0 .../{ts => }/src/app/auth-guard.service.ts | 0 .../router/{ts => }/src/app/auth.service.ts | 0 .../src/app/can-deactivate-guard.service.1.ts | 0 .../src/app/can-deactivate-guard.service.ts | 0 .../src/app/compose-message.component.html | 0 .../src/app/compose-message.component.ts | 43 + .../crisis-center-home.component.ts | 0 .../crisis-center-routing.module.1.ts | 0 .../crisis-center-routing.module.2.ts | 0 .../crisis-center-routing.module.3.ts | 0 .../crisis-center-routing.module.4.ts | 0 .../crisis-center-routing.module.ts | 0 .../crisis-center/crisis-center.component.ts | 0 .../crisis-center/crisis-center.module.1.ts | 0 .../app/crisis-center/crisis-center.module.ts | 0 .../crisis-detail-resolver.service.ts | 0 .../crisis-detail.component.1.ts | 0 .../crisis-center/crisis-detail.component.ts | 0 .../crisis-center/crisis-list.component.1.ts | 0 .../crisis-center/crisis-list.component.ts | 0 .../src/app/crisis-center/crisis.service.ts | 0 .../{ts => }/src/app/crisis-list.component.ts | 0 .../router/{ts => }/src/app/dialog.service.ts | 0 .../{ts => }/src/app/hero-list.component.ts | 0 .../src/app/heroes/hero-detail.component.1.ts | 0 .../src/app/heroes/hero-detail.component.2.ts | 0 .../src/app/heroes/hero-detail.component.ts | 0 .../src/app/heroes/hero-list.component.1.ts | 0 .../src/app/heroes/hero-list.component.ts | 0 .../{ts => }/src/app/heroes/hero.service.ts | 0 .../src/app/heroes/heroes-routing.module.ts | 0 .../{ts => }/src/app/heroes/heroes.module.ts | 0 .../{ts => }/src/app/login-routing.module.ts | 0 .../{ts => }/src/app/login.component.1.ts | 0 .../{ts => }/src/app/login.component.ts | 0 .../{ts => }/src/app/not-found.component.ts | 0 .../src/app/selective-preloading-strategy.ts | 24 + .../examples/router/{ts => }/src/index.html | 0 .../examples/router/{ts => }/src/main.ts | 0 .../examples/router/ts/plnkr.no-link.html | 1353 ----- .../examples/router/ts/src/app/app.module.ts | 47 - .../ts/src/app/compose-message.component.ts | 44 - .../src/app/selective-preloading-strategy.ts | 24 - .../ts => security}/example-config.json | 0 .../examples/security/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../security/{ts => }/src/app/app.module.ts | 0 .../src/app/bypass-security.component.html | 0 .../src/app/bypass-security.component.ts | 38 + .../src/app/inner-html-binding.component.html | 0 .../src/app/inner-html-binding.component.ts | 12 + .../examples/security/{ts => }/src/index.html | 0 .../examples/security/{ts => }/src/main.ts | 0 .../examples/security/ts/plnkr.no-link.html | 288 -- .../ts/src/app/bypass-security.component.ts | 39 - .../src/app/inner-html-binding.component.ts | 13 - .../examples/server-communication/e2e-spec.ts | 18 +- .../example-config.json | 0 .../server-communication/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.ts | 0 .../{ts => }/src/app/app.module.1.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../app/default-request-options.service.ts | 0 .../{ts => }/src/app/hero-data.ts | 0 .../{ts => }/src/app/heroes.json | 0 .../src/app/toh/hero-list.component.html | 0 .../app/toh/hero-list.component.promise.ts | 40 + .../src/app/toh/hero-list.component.ts | 44 + .../src/app/toh/hero.service.promise.ts | 0 .../src/app/toh/hero.service.ts | 80 + .../{ts => }/src/app/toh/hero.ts | 0 .../src/app/wiki/wiki-smart.component.ts | 47 + .../{ts => }/src/app/wiki/wiki.component.ts | 0 .../src/app/wiki/wikipedia.service.1.ts | 0 .../src/app/wiki/wikipedia.service.ts | 0 .../{ts => }/src/index.html | 0 .../server-communication/{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 610 --- .../app/toh/hero-list.component.promise.ts | 41 - .../ts/src/app/toh/hero-list.component.ts | 45 - .../ts/src/app/toh/hero.service.ts | 80 - .../ts/src/app/wiki/wiki-smart.component.ts | 48 - .../setup/{ts => }/example-config.json | 0 .../setup/{ts => }/non-essential-files.txt | 0 .../examples/setup/{ts => }/plnkr.json | 0 .../{ts => }/quickstart-specs.plnkr.json | 0 .../{ts => }/src/app/app.component.spec.ts | 0 .../setup/{ts => }/src/app/app.component.ts | 0 .../setup/{ts => }/src/app/app.module.ts | 0 .../examples/setup/{ts => }/src/index.html | 0 .../examples/setup/{ts => }/src/main.ts | 0 .../setup/{ts => }/src/quickstart-specs.html | 0 .../setup/src/systemjs.config.extras.js | 11 + .../examples/setup/ts/plnkr.no-link.html | 189 - .../ts/quickstart-specs.plnkr.no-link.html | 264 - .../example-config.json | 0 .../structural-directives/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.css | 0 .../src/app/app.component.html | 250 + .../src/app/app.component.ts | 23 + .../{ts => }/src/app/app.module.ts | 0 .../src/app/hero-switch.components.ts | 0 .../{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/scrap.txt | 0 .../src/app/unless.directive.ts | 51 + .../{ts => }/src/index.html | 0 .../{ts => }/src/main.ts | 0 .../ts/plnkr.no-link.html | 612 --- .../ts/src/app/app.component.html | 252 - .../ts/src/app/app.component.ts | 24 - .../ts/src/app/unless.directive.ts | 55 - .../examples/style-guide/{ts => }/.gitignore | 0 .../ts => style-guide}/example-config.json | 0 .../examples/style-guide/{ts => }/plnkr.json | 0 .../{ts => }/src/01-01/app/app.component.css | 0 .../src/01-01/app/app.component.ts | 14 + .../{ts => }/src/01-01/app/app.module.ts | 0 .../01-01/app/heroes/hero.component.avoid.ts | 0 .../src/01-01/app/heroes/heroes.component.ts | 0 .../{ts => }/src/01-01/app/heroes/index.ts | 0 .../src/01-01/app/heroes/shared/hero.model.ts | 0 .../01-01/app/heroes/shared/hero.service.ts | 0 .../src/01-01/app/heroes/shared/index.ts | 0 .../01-01/app/heroes/shared/mock-heroes.ts | 0 .../{ts => }/src/01-01/app/index.ts | 0 .../style-guide/{ts => }/src/01-01/main.ts | 0 .../src/02-05/app/app.component.ts | 10 + .../{ts => }/src/02-05/app/app.module.ts | 0 .../style-guide/{ts => }/src/02-05/main.ts | 0 .../{ts => }/src/02-07/app/app.component.ts | 0 .../{ts => }/src/02-07/app/app.module.ts | 0 .../02-07/app/heroes/hero.component.avoid.ts | 0 .../src/02-07/app/heroes/hero.component.ts | 0 .../{ts => }/src/02-07/app/heroes/index.ts | 0 .../{ts => }/src/02-07/app/index.ts | 0 .../{ts => }/src/02-07/app/users/index.ts | 0 .../02-07/app/users/users.component.avoid.ts | 0 .../src/02-07/app/users/users.component.ts | 0 .../{ts => }/src/02-08/app/app.component.ts | 0 .../{ts => }/src/02-08/app/app.module.ts | 0 .../{ts => }/src/02-08/app/index.ts | 0 .../{ts => }/src/02-08/app/shared/index.ts | 0 .../app/shared/input-highlight.directive.ts | 0 .../app/shared/validate.directive.avoid.ts | 0 .../02-08/app/shared/validate.directive.ts | 0 .../{ts => }/src/03-01/app/app.component.ts | 0 .../{ts => }/src/03-01/app/app.module.ts | 0 .../03-01/app/core/exception.service.avoid.ts | 0 .../src/03-01/app/core/exception.service.ts | 0 .../{ts => }/src/03-01/app/core/index.ts | 0 .../{ts => }/src/03-01/app/index.ts | 0 .../{ts => }/src/03-02/app/app.component.ts | 0 .../{ts => }/src/03-02/app/app.module.ts | 0 .../src/03-02/app/core/data.service.ts | 0 .../{ts => }/src/03-02/app/core/index.ts | 0 .../{ts => }/src/03-02/app/index.ts | 0 .../{ts => }/src/03-03/app/app.component.ts | 0 .../{ts => }/src/03-03/app/app.module.ts | 0 .../app/core/hero-collector.service.avoid.ts | 0 .../03-03/app/core/hero-collector.service.ts | 0 .../src/03-03/app/core/hero.model.avoid.ts | 0 .../{ts => }/src/03-03/app/core/hero.model.ts | 0 .../{ts => }/src/03-03/app/core/index.ts | 0 .../{ts => }/src/03-03/app/index.ts | 0 .../{ts => }/src/03-04/app/app.component.ts | 0 .../{ts => }/src/03-04/app/app.module.ts | 0 .../{ts => }/src/03-04/app/core/index.ts | 0 .../src/03-04/app/core/toast.service.avoid.ts | 0 .../src/03-04/app/core/toast.service.ts | 0 .../{ts => }/src/03-04/app/index.ts | 0 .../{ts => }/src/03-06/app/app.component.html | 0 .../src/03-06/app/app.component.ts | 21 + .../{ts => }/src/03-06/app/app.module.ts | 0 .../src/03-06/app/core/exception.service.ts | 0 .../{ts => }/src/03-06/app/core/index.ts | 0 .../src/03-06/app/core/spinner/index.ts | 0 .../app/core/spinner/spinner.component.ts | 0 .../03-06/app/core/spinner/spinner.service.ts | 0 .../src/03-06/app/core/toast/index.ts | 0 .../03-06/app/core/toast/toast.component.ts | 0 .../src/03-06/app/core/toast/toast.service.ts | 0 .../{ts => }/src/03-06/app/heroes/index.ts | 0 .../src/03-06/app/heroes/shared/hero.model.ts | 0 .../app/heroes/shared/hero.service.avoid.ts | 0 .../03-06/app/heroes/shared/hero.service.ts | 0 .../src/03-06/app/heroes/shared/index.ts | 0 .../{ts => }/src/03-06/app/index.ts | 0 .../03-06/app/shared/toast/toast.component.ts | 0 .../{ts => }/src/04-08/app/app.component.ts | 0 .../{ts => }/src/04-08/app/app.module.ts | 0 .../04-08/app/heroes/heroes.component.html | 0 .../src/04-08/app/heroes/heroes.component.ts | 11 + .../{ts => }/src/04-10/app/app.component.ts | 0 .../{ts => }/src/04-10/app/app.module.ts | 0 .../04-10/app/heroes/heroes.component.html | 0 .../src/04-10/app/heroes/heroes.component.ts | 27 + .../filter-text/filter-text.component.ts | 26 + .../shared/filter-text/filter-text.service.ts | 0 .../src/04-10/app/shared/init-caps.pipe.ts | 0 .../src/04-10/app/shared/shared.module.ts | 0 .../{ts => }/src/04-11/app/app.component.ts | 0 .../{ts => }/src/04-11/app/app.module.ts | 0 .../src/04-11/app/core/core.module.ts | 0 .../{ts => }/src/04-11/app/core/index.ts | 0 .../src/04-11/app/core/logger.service.ts | 0 .../src/04-11/app/core/nav/nav.component.css | 0 .../src/04-11/app/core/nav/nav.component.html | 0 .../src/04-11/app/core/nav/nav.component.ts | 19 + .../app/core/spinner/spinner.component.css | 0 .../app/core/spinner/spinner.component.html | 0 .../app/core/spinner/spinner.component.ts | 35 + .../04-11/app/core/spinner/spinner.service.ts | 0 .../04-11/app/heroes/heroes.component.html | 0 .../src/04-11/app/heroes/heroes.component.ts | 32 + .../{ts => }/src/04-12/app/app.component.ts | 0 .../{ts => }/src/04-12/app/app.module.ts | 0 .../src/04-12/app/core/core.module.ts | 0 .../{ts => }/src/04-12/app/core/index.ts | 0 .../src/04-12/app/core/logger.service.ts | 0 .../src/04-12/app/core/module-import-guard.ts | 0 .../src/04-12/app/core/nav/nav.component.css | 0 .../src/04-12/app/core/nav/nav.component.html | 0 .../src/04-12/app/core/nav/nav.component.ts | 19 + .../04-12/app/heroes/heroes.component.html | 0 .../src/04-12/app/heroes/heroes.component.ts | 24 + .../{ts => }/src/05-02/app/app.component.html | 0 .../src/05-02/app/app.component.ts | 7 + .../{ts => }/src/05-02/app/app.module.ts | 0 .../{ts => }/src/05-02/app/heroes/index.ts | 0 .../hero-button.component.avoid.ts | 11 + .../hero-button/hero-button.component.html | 0 .../hero-button/hero-button.component.ts | 9 + .../app/heroes/shared/hero-button/index.ts | 0 .../src/05-02/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-02/app/index.ts | 0 .../src/05-03/app/app.component.avoid.html | 0 .../{ts => }/src/05-03/app/app.component.html | 0 .../src/05-03/app/app.component.ts | 7 + .../{ts => }/src/05-03/app/app.module.ts | 0 .../{ts => }/src/05-03/app/heroes/index.ts | 0 .../hero-button.component.avoid.ts | 10 + .../hero-button/hero-button.component.html | 0 .../hero-button/hero-button.component.ts | 9 + .../app/heroes/shared/hero-button/index.ts | 0 .../src/05-03/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-03/app/index.ts | 0 .../{ts => }/src/05-04/app/app.component.ts | 0 .../{ts => }/src/05-04/app/app.module.ts | 0 .../app/heroes/heroes.component.avoid.ts | 0 .../src/05-04/app/heroes/heroes.component.css | 0 .../05-04/app/heroes/heroes.component.html | 0 .../src/05-04/app/heroes/heroes.component.ts | 22 + .../{ts => }/src/05-04/app/heroes/index.ts | 0 .../src/05-04/app/heroes/shared/hero.model.ts | 0 .../05-04/app/heroes/shared/hero.service.ts | 0 .../src/05-04/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-04/app/index.ts | 0 .../{ts => }/src/05-12/app/app.component.ts | 0 .../{ts => }/src/05-12/app/app.module.ts | 0 .../{ts => }/src/05-12/app/heroes/index.ts | 0 .../hero-button.component.avoid.ts | 0 .../hero-button/hero-button.component.ts | 0 .../app/heroes/shared/hero-button/index.ts | 0 .../src/05-12/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-12/app/index.ts | 0 .../src/05-13/app/app.component.avoid.html | 0 .../{ts => }/src/05-13/app/app.component.html | 0 .../src/05-13/app/app.component.ts | 7 + .../{ts => }/src/05-13/app/app.module.ts | 0 .../{ts => }/src/05-13/app/heroes/index.ts | 0 .../hero-button.component.avoid.ts | 0 .../hero-button/hero-button.component.ts | 0 .../app/heroes/shared/hero-button/index.ts | 0 .../heroes/shared/hero-highlight.directive.ts | 0 .../src/05-13/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-13/app/index.ts | 0 .../{ts => }/src/05-14/app/app.component.ts | 0 .../{ts => }/src/05-14/app/app.module.ts | 0 .../{ts => }/src/05-14/app/index.ts | 0 .../{ts => }/src/05-14/app/shared/index.ts | 0 .../src/05-14/app/shared/toast/index.ts | 0 .../app/shared/toast/toast.component.avoid.ts | 0 .../05-14/app/shared/toast/toast.component.ts | 0 .../{ts => }/src/05-15/app/app.component.ts | 0 .../{ts => }/src/05-15/app/app.module.ts | 0 .../hero-list/hero-list.component.avoid.ts | 0 .../heroes/hero-list/hero-list.component.ts | 0 .../src/05-15/app/heroes/hero-list/index.ts | 0 .../{ts => }/src/05-15/app/heroes/index.ts | 0 .../src/05-15/app/heroes/shared/hero.model.ts | 0 .../05-15/app/heroes/shared/hero.service.ts | 0 .../src/05-15/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-15/app/index.ts | 0 .../src/05-16/app/app.component.avoid.html | 0 .../{ts => }/src/05-16/app/app.component.html | 0 .../src/05-16/app/app.component.ts | 7 + .../{ts => }/src/05-16/app/app.module.ts | 0 .../05-16/app/heroes/hero.component.avoid.ts | 0 .../src/05-16/app/heroes/hero.component.ts | 0 .../{ts => }/src/05-16/app/heroes/index.ts | 0 .../{ts => }/src/05-16/app/index.ts | 0 .../{ts => }/src/05-17/app/app.component.ts | 0 .../{ts => }/src/05-17/app/app.module.ts | 0 .../hero-list/hero-list.component.avoid.ts | 0 .../heroes/hero-list/hero-list.component.ts | 0 .../src/05-17/app/heroes/hero-list/index.ts | 0 .../05-17/app/heroes/hero/hero.component.ts | 0 .../src/05-17/app/heroes/hero/index.ts | 0 .../{ts => }/src/05-17/app/heroes/index.ts | 0 .../src/05-17/app/heroes/shared/hero.model.ts | 0 .../src/05-17/app/heroes/shared/index.ts | 0 .../{ts => }/src/05-17/app/index.ts | 0 .../{ts => }/src/06-01/app/app.component.html | 0 .../src/06-01/app/app.component.ts | 7 + .../{ts => }/src/06-01/app/app.module.ts | 0 .../{ts => }/src/06-01/app/index.ts | 0 .../06-01/app/shared/highlight.directive.ts | 0 .../{ts => }/src/06-01/app/shared/index.ts | 0 .../{ts => }/src/06-03/app/app.component.ts | 0 .../{ts => }/src/06-03/app/app.module.ts | 0 .../{ts => }/src/06-03/app/index.ts | 0 .../{ts => }/src/06-03/app/shared/index.ts | 0 .../06-03/app/shared/validator.directive.ts | 0 .../06-03/app/shared/validator2.directive.ts | 0 .../{ts => }/src/07-01/app/app.component.html | 0 .../src/07-01/app/app.component.ts | 18 + .../{ts => }/src/07-01/app/app.module.ts | 0 .../{ts => }/src/07-01/app/heroes/index.ts | 0 .../src/07-01/app/heroes/shared/hero.model.ts | 0 .../07-01/app/heroes/shared/hero.service.ts | 0 .../src/07-01/app/heroes/shared/index.ts | 0 .../{ts => }/src/07-01/app/index.ts | 0 .../{ts => }/src/07-03/app/app.component.ts | 0 .../{ts => }/src/07-03/app/app.module.ts | 0 .../heroes/hero-list/hero-list.component.ts | 0 .../src/07-03/app/heroes/hero-list/index.ts | 0 .../{ts => }/src/07-03/app/heroes/index.ts | 0 .../src/07-03/app/heroes/shared/hero.model.ts | 0 .../07-03/app/heroes/shared/hero.service.ts | 0 .../src/07-03/app/heroes/shared/index.ts | 0 .../{ts => }/src/07-03/app/index.ts | 0 .../{ts => }/src/07-04/app/app.component.ts | 0 .../{ts => }/src/07-04/app/app.module.ts | 0 .../{ts => }/src/07-04/app/heroes/index.ts | 0 .../heroes/shared/hero-arena.service.avoid.ts | 0 .../app/heroes/shared/hero-arena.service.ts | 0 .../src/07-04/app/heroes/shared/hero.model.ts | 0 .../07-04/app/heroes/shared/hero.service.ts | 0 .../src/07-04/app/heroes/shared/index.ts | 0 .../{ts => }/src/07-04/app/index.ts | 0 .../{ts => }/src/09-01/app/app.component.ts | 0 .../{ts => }/src/09-01/app/app.module.ts | 0 .../{ts => }/src/09-01/app/heroes/index.ts | 0 .../hero-button.component.avoid.ts | 0 .../hero-button/hero-button.component.ts | 0 .../app/heroes/shared/hero-button/index.ts | 0 .../src/09-01/app/heroes/shared/index.ts | 0 .../{ts => }/src/09-01/app/index.ts | 0 .../{ts => }/src/app/app.component.html | 0 .../style-guide/src/app/app.component.ts | 7 + .../{ts => }/src/app/app.routes.ts | 0 .../style-guide/{ts => }/src/app/hero-data.ts | 0 .../style-guide/{ts => }/src/index.html | 0 .../examples/style-guide/{ts => }/src/main.ts | 0 .../style-guide/src/systemjs.custom.js | 51 + .../style-guide/ts/plnkr.no-link.html | 4350 ----------------- .../ts/src/01-01/app/app.component.ts | 15 - .../ts/src/02-05/app/app.component.ts | 11 - .../ts/src/03-06/app/app.component.ts | 22 - .../src/04-08/app/heroes/heroes.component.ts | 12 - .../src/04-10/app/heroes/heroes.component.ts | 28 - .../filter-text/filter-text.component.ts | 27 - .../src/04-11/app/core/nav/nav.component.ts | 20 - .../app/core/spinner/spinner.component.ts | 36 - .../src/04-11/app/heroes/heroes.component.ts | 33 - .../src/04-12/app/core/nav/nav.component.ts | 20 - .../src/04-12/app/heroes/heroes.component.ts | 25 - .../ts/src/05-02/app/app.component.ts | 8 - .../hero-button.component.avoid.ts | 12 - .../hero-button/hero-button.component.ts | 10 - .../ts/src/05-03/app/app.component.ts | 8 - .../hero-button.component.avoid.ts | 11 - .../hero-button/hero-button.component.ts | 10 - .../src/05-04/app/heroes/heroes.component.ts | 23 - .../ts/src/05-13/app/app.component.ts | 8 - .../ts/src/05-16/app/app.component.ts | 8 - .../ts/src/06-01/app/app.component.ts | 8 - .../ts/src/07-01/app/app.component.ts | 19 - .../style-guide/ts/src/app/app.component.ts | 8 - .../style-guide/ts/src/systemjs.custom.js | 51 - .../ts => styleguide}/example-config.json | 0 .../styleguide/js/example-config.json | 3 + aio/content/examples/styleguide/js/spec.js | 8 - aio/content/examples/styleguide/js/src/app.js | 55 - .../{ts => }/src/app/app.component.ts | 0 .../styleguide/{ts => }/src/app/app.module.ts | 0 .../styleguide/{ts => }/src/index.html | 0 .../examples/styleguide/{ts => }/src/main.ts | 0 .../example-config.json | 0 .../template-syntax/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.css | 0 .../src/app/app.component.html | 820 ++++ .../template-syntax/src/app/app.component.ts | 183 + .../{ts => }/src/app/app.module.1.ts | 0 .../{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/click.directive.ts | 0 .../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 | 0 .../examples/template-syntax/src/app/hero.ts | 34 + .../{ts => }/src/app/sizer.component.ts | 0 .../{ts => }/src/images/hero.png | Bin .../{ts => }/src/images/ng-logo.png | Bin .../{ts => }/src/images/villain.png | Bin .../template-syntax/{ts => }/src/index.html | 0 .../ts => template-syntax}/src/main.ts | 0 .../template-syntax/ts/plnkr.no-link.html | 1414 ------ .../ts/src/app/app.component.html | 822 ---- .../ts/src/app/app.component.ts | 213 - .../ts/src/app/hero-detail.component.ts | 80 - .../ts/src/app/hero-form.component.html | 16 - .../ts/src/app/hero-form.component.ts | 31 - .../template-syntax/ts/src/app/hero.ts | 33 - .../ts/src/template-syntax.css | 13 - .../examples/testing/{ts => }/.gitignore | 0 .../testing/{ts => }/1st-specs.plnkr.json | 0 .../testing/{ts => }/app-specs.plnkr.json | 0 .../testing/{ts => }/bag-specs.plnkr.json | 0 .../examples/testing/{ts => }/bag.plnkr.json | 0 .../{ts => }/banner-inline-specs.plnkr.json | 0 .../testing/{ts => }/banner-specs.plnkr.json | 0 .../ts => testing}/example-config.json | 0 .../examples/testing/karma-test-shim.js | 96 + aio/content/examples/testing/karma.conf.js | 98 + .../examples/testing/{ts => }/plnkr.json | 0 .../testing/{ts => }/src/1st-specs.html | 0 .../testing/{ts => }/src/app-specs.html | 0 .../testing/{ts => }/src/app/1st.spec.ts | 0 .../{ts => }/src/app/about.component.spec.ts | 0 .../{ts => }/src/app/about.component.ts | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../{ts => }/src/app/app.component.html | 0 .../src/app/app.component.router.spec.ts | 198 + .../{ts => }/src/app/app.component.spec.ts | 0 .../examples/testing/src/app/app.component.ts | 7 + .../testing/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/bag/async-helper.spec.ts | 0 .../src/app/bag/bag-external-template.html | 0 .../testing/{ts => }/src/app/bag/bag-main.ts | 0 .../src/app/bag/bag.no-testbed.spec.ts | 0 .../testing/{ts => }/src/app/bag/bag.spec.ts | 0 .../examples/testing/src/app/bag/bag.ts | 454 ++ .../src/app/banner-inline.component.spec.ts | 0 .../src/app/banner-inline.component.ts | 0 .../{ts => }/src/app/banner.component.css | 0 .../banner.component.detect-changes.spec.ts | 0 .../{ts => }/src/app/banner.component.html | 0 .../{ts => }/src/app/banner.component.spec.ts | 0 .../testing/src/app/banner.component.ts | 12 + .../dashboard/dashboard-hero.component.css | 0 .../dashboard/dashboard-hero.component.html | 0 .../dashboard-hero.component.spec.ts | 0 .../app/dashboard/dashboard-hero.component.ts | 17 + .../src/app/dashboard/dashboard.component.css | 0 .../app/dashboard/dashboard.component.html | 0 .../dashboard.component.no-testbed.spec.ts | 0 .../app/dashboard/dashboard.component.spec.ts | 0 .../src/app/dashboard/dashboard.component.ts | 40 + .../src/app/dashboard/dashboard.module.ts | 0 .../src/app/hero/hero-detail.component.css | 0 .../src/app/hero/hero-detail.component.html | 0 .../hero-detail.component.no-testbed.spec.ts | 0 .../app/hero/hero-detail.component.spec.ts | 0 .../src/app/hero/hero-detail.component.ts | 63 + .../src/app/hero/hero-detail.service.ts | 0 .../src/app/hero/hero-list.component.css | 0 .../src/app/hero/hero-list.component.html | 0 .../src/app/hero/hero-list.component.spec.ts | 0 .../src/app/hero/hero-list.component.ts | 27 + .../src/app/hero/hero-routing.module.ts | 0 .../{ts => }/src/app/hero/hero.module.ts | 0 .../{ts => }/src/app/model/hero.service.ts | 0 .../{ts => }/src/app/model/hero.spec.ts | 0 .../testing/{ts => }/src/app/model/hero.ts | 0 .../src/app/model/http-hero.service.spec.ts | 0 .../src/app/model/http-hero.service.ts | 0 .../testing/{ts => }/src/app/model/index.ts | 0 .../{ts => }/src/app/model/test-heroes.ts | 0 .../app/model/testing/fake-hero.service.ts | 0 .../{ts => }/src/app/model/testing/index.ts | 0 .../{ts => }/src/app/model/user.service.ts | 0 .../app/shared/highlight.directive.spec.ts | 0 .../src/app/shared/highlight.directive.ts | 0 .../{ts => }/src/app/shared/shared.module.ts | 0 .../src/app/shared/title-case.pipe.spec.ts | 0 .../src/app/shared/title-case.pipe.ts | 0 .../src/app/shared/twain.component.spec.ts | 0 .../twain.component.timer.spec.ts.no-work | 0 .../shared/twain.component.timer.ts.no-work | 0 .../src/app/shared/twain.component.ts | 0 .../{ts => }/src/app/shared/twain.service.ts | 0 .../src/app/welcome.component.spec.ts | 0 .../{ts => }/src/app/welcome.component.ts | 0 .../testing/{ts => }/src/bag-specs.html | 0 .../examples/testing/{ts => }/src/bag.html | 0 .../{ts => }/src/banner-inline-specs.html | 0 .../testing/{ts => }/src/banner-specs.html | 0 .../testing/{ts => }/src/browser-test-shim.js | 0 .../examples/testing/{ts => }/src/index.html | 0 .../examples/testing/{ts => }/src/main.ts | 0 .../testing/src/systemjs.config.extras.js | 9 + .../testing/{ts => }/src/testing/index.ts | 0 .../src/testing/jasmine-matchers.d.ts | 0 .../{ts => }/src/testing/jasmine-matchers.ts | 0 .../{ts => }/src/testing/router-stubs.ts | 0 .../testing/ts/1st-specs.plnkr.no-link.html | 339 -- .../testing/ts/app-specs.plnkr.no-link.html | 3378 ------------- .../testing/ts/bag-specs.plnkr.no-link.html | 1828 ------- .../testing/ts/bag.plnkr.no-link.html | 623 --- .../ts/banner-inline-specs.plnkr.no-link.html | 289 -- .../ts/banner-specs.plnkr.no-link.html | 311 -- .../examples/testing/ts/plnkr.no-link.html | 1160 ----- .../ts/src/app/app.component.router.spec.ts | 198 - .../testing/ts/src/app/app.component.ts | 8 - .../examples/testing/ts/src/app/bag/bag.ts | 456 -- .../testing/ts/src/app/banner.component.ts | 13 - .../app/dashboard/dashboard-hero.component.ts | 18 - .../src/app/dashboard/dashboard.component.ts | 41 - .../ts/src/app/hero/hero-detail.component.ts | 64 - .../ts/src/app/hero/hero-list.component.ts | 28 - .../examples/toh-1/app/app.component.1.ts | 44 + .../{testing/ts => toh-1}/example-config.json | 0 aio/content/examples/toh-1/plnkr.json | 10 + .../examples/toh-1/src/app/app.component.ts | 33 + .../examples/toh-1/src/app/app.module.ts | 18 + .../examples/toh-1/{ts => }/src/index.html | 0 .../examples/toh-1/{ts => }/src/main.ts | 0 .../ts-snippets/app.component.snippets.pt1.ts | 39 - aio/content/examples/toh-1/ts/plnkr.json | 9 - .../examples/toh-1/ts/plnkr.no-link.html | 215 - .../toh-1/ts/src/app/app.component.ts | 32 - .../examples/toh-2/app/app.component.1.html | 69 + aio/content/examples/toh-2/e2e-spec.ts | 2 +- .../{toh-1/ts => toh-2}/example-config.json | 0 aio/content/examples/toh-2/plnkr.json | 10 + .../toh-2/{ts => }/src/app/app.component.ts | 0 .../{toh-1/ts => toh-2}/src/app/app.module.ts | 0 .../examples/toh-2/{ts => }/src/index.html | 0 .../examples/toh-2/{ts => }/src/main.ts | 0 .../ts-snippets/app.component.snippets.pt2.ts | 69 - aio/content/examples/toh-2/ts/plnkr.json | 9 - .../examples/toh-2/ts/plnkr.no-link.html | 289 -- .../examples/toh-2/ts/src/app/app.module.ts | 18 - .../examples/toh-3/app/app.component.1.html | 12 + .../toh-3/app/hero-detail.component.1.ts | 35 + aio/content/examples/toh-3/e2e-spec.ts | 2 +- .../{toh-2/ts => toh-3}/example-config.json | 0 aio/content/examples/toh-3/plnkr.json | 10 + .../examples/toh-3/src/app/app.component.ts | 95 + .../examples/toh-3/src/app/app.module.ts | 24 + .../toh-3/src/app/hero-detail.component.ts | 29 + .../examples/toh-3/{ts => }/src/app/hero.ts | 0 .../examples/toh-3/{ts => }/src/index.html | 0 .../examples/toh-3/{ts => }/src/main.ts | 0 aio/content/examples/toh-3/ts/plnkr.json | 9 - .../examples/toh-3/ts/plnkr.no-link.html | 318 -- .../toh-3/ts/src/app/app.component.ts | 95 - .../examples/toh-3/ts/src/app/app.module.ts | 24 - .../toh-3/ts/src/app/hero-detail.component.ts | 39 - aio/content/examples/toh-4/e2e-spec.ts | 2 +- .../{toh-3/ts => toh-4}/example-config.json | 0 .../examples/toh-4/{ts => }/plnkr.json | 0 .../examples/toh-4/src/app/app.component.1.ts | 65 + .../examples/toh-4/src/app/app.component.ts | 97 + .../toh-4/{ts => }/src/app/app.module.ts | 0 .../toh-4/src/app/hero-detail.component.ts | 22 + .../toh-4/{ts => }/src/app/hero.service.1.ts | 0 .../toh-4/{ts => }/src/app/hero.service.2.ts | 0 .../toh-4/{ts => }/src/app/hero.service.ts | 0 .../examples/toh-4/{ts => }/src/app/hero.ts | 0 .../toh-4/{ts => }/src/app/mock-heroes.ts | 0 .../examples/toh-4/{ts => }/src/index.html | 0 .../examples/toh-4/{ts => }/src/main.1.ts | 0 .../examples/toh-4/{ts => }/src/main.ts | 0 .../examples/toh-4/ts/plnkr.no-link.html | 362 -- .../toh-4/ts/src/app/app.component.1.ts | 65 - .../toh-4/ts/src/app/app.component.ts | 97 - .../toh-4/ts/src/app/hero-detail.component.ts | 22 - aio/content/examples/toh-5/e2e-spec.ts | 2 +- .../{toh-4/ts => toh-5}/example-config.json | 0 .../examples/toh-5/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../toh-5/{ts => }/src/app/app.component.1.ts | 0 .../toh-5/{ts => }/src/app/app.component.css | 0 .../examples/toh-5/src/app/app.component.ts | 22 + .../toh-5/{ts => }/src/app/app.module.1.ts | 0 .../toh-5/{ts => }/src/app/app.module.2.ts | 0 .../toh-5/{ts => }/src/app/app.module.3.ts | 0 .../toh-5/{ts => }/src/app/app.module.ts | 0 .../src/app/dashboard.component.1.html | 0 .../{ts => }/src/app/dashboard.component.1.ts | 0 .../{ts => }/src/app/dashboard.component.css | 0 .../{ts => }/src/app/dashboard.component.html | 0 .../toh-5/src/app/dashboard.component.ts | 33 + .../toh-5/src/app/hero-detail.component.1.ts | 29 + .../src/app/hero-detail.component.css | 0 .../src/app/hero-detail.component.html | 0 .../toh-5/src/app/hero-detail.component.ts | 46 + .../toh-5/{ts => }/src/app/hero.service.ts | 0 .../examples/toh-5/{ts => }/src/app/hero.ts | 0 .../toh-5/src/app/heroes.component.css | 60 + .../{ts => }/src/app/heroes.component.html | 0 .../toh-5/src/app/heroes.component.ts | 46 + .../toh-5/{ts => }/src/app/mock-heroes.ts | 0 .../examples/toh-5/{ts => }/src/index.html | 0 .../examples/toh-5/{ts => }/src/main.ts | 0 .../examples/toh-5/ts/plnkr.no-link.html | 661 --- .../toh-5/ts/src/app/app.component.ts | 23 - .../toh-5/ts/src/app/dashboard.component.ts | 34 - .../ts/src/app/hero-detail.component.1.ts | 29 - .../toh-5/ts/src/app/hero-detail.component.ts | 47 - .../toh-5/ts/src/app/heroes.component.css | 59 - .../toh-5/ts/src/app/heroes.component.ts | 49 - .../examples/toh-6/{ts => }/.gitignore | 0 aio/content/examples/toh-6/aot/index.html | 19 + .../ts/src => toh-6/aot}/styles.css | 0 .../toh-6/{ts => }/bs-config.aot.json | 0 aio/content/examples/toh-6/e2e-spec.ts | 2 +- .../{toh-5/ts => toh-6}/example-config.json | 0 .../examples/toh-6/{ts => }/plnkr.json | 0 .../examples/toh-6/{ts => }/rollup-config.js | 0 .../{ts => }/src/app/app-routing.module.ts | 0 .../toh-6/{ts => }/src/app/app.component.css | 0 .../examples/toh-6/src/app/app.component.ts | 19 + .../toh-6/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/dashboard.component.css | 0 .../{ts => }/src/app/dashboard.component.html | 0 .../toh-6/src/app/dashboard.component.ts | 22 + .../src/app/hero-detail.component.css | 0 .../src/app/hero-detail.component.html | 0 .../toh-6/src/app/hero-detail.component.ts | 40 + .../toh-6/src/app/hero-search.component.css | 21 + .../src/app/hero-search.component.html | 0 .../toh-6/src/app/hero-search.component.ts | 69 + .../{ts => }/src/app/hero-search.service.ts | 0 .../examples/toh-6/src/app/hero.service.ts | 87 + .../examples/toh-6/{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/heroes.component.css | 0 .../{ts => }/src/app/heroes.component.html | 0 .../toh-6/src/app/heroes.component.ts | 61 + .../src/app/in-memory-data.service.ts | 0 .../examples/toh-6/{ts => }/src/index.html | 0 .../examples/toh-6/{ts => }/src/main-aot.ts | 0 .../examples/toh-6/{ts => }/src/main.ts | 0 .../examples/toh-6/src/tsconfig.1.json | 13 + aio/content/examples/toh-6/ts/aot/index.html | 22 - aio/content/examples/toh-6/ts/aot/styles.css | 116 - .../examples/toh-6/ts/plnkr.no-link.html | 883 ---- .../toh-6/ts/src/app/app.component.ts | 20 - .../toh-6/ts/src/app/dashboard.component.ts | 23 - .../toh-6/ts/src/app/hero-detail.component.ts | 41 - .../ts/src/app/hero-search.component.css | 16 - .../toh-6/ts/src/app/hero-search.component.ts | 70 - .../examples/toh-6/ts/src/app/hero.service.ts | 87 - .../toh-6/ts/src/app/heroes.component.ts | 62 - .../examples/toh-6/ts/src/tsconfig.1.json | 21 - .../toh-6/ts/tsconfig-aot.json.annotated | 28 - .../examples/toh-6/{ts => }/tsconfig-aot.json | 0 .../upgrade-module/{ts => }/.gitignore | 0 .../ts => upgrade-module}/example-config.json | 0 .../src/app/a-to-ajs-providers/app.module.ts | 0 .../hero-detail.component.ts | 0 .../src/app/a-to-ajs-providers/heroes.ts | 0 .../app/a-to-ajs-transclusion/app.module.ts | 0 .../container.component.ts | 0 .../hero-detail.component.ts | 0 .../app/ajs-a-hybrid-bootstrap/app.module.ts | 0 .../src/app/ajs-bootstrap/app.module.ts | 0 .../{ts => }/src/app/ajs-ng-app/app.module.ts | 0 .../src/app/ajs-to-a-projection/app.module.ts | 0 .../hero-detail.component.ts | 0 .../ajs-to-a-projection/main.controller.ts | 0 .../ajs-upgraded-providers.ts | 0 .../src/app/ajs-to-a-providers/app.module.ts | 0 .../hero-detail.component.ts | 0 .../app/ajs-to-a-providers/heroes.service.ts | 0 .../src/app/divide-routes/app.component.ts | 0 .../src/app/divide-routes/app.module.ts | 0 .../src/app/divide-routes/hero.module.ts | 0 .../{ts => }/src/app/divide-routes/main.ts | 0 .../src/app/downgrade-io/app.module.ts | 0 .../app/downgrade-io/hero-detail.component.ts | 0 .../src/app/downgrade-io/main.controller.ts | 0 .../src/app/downgrade-static/app.module.ts | 0 .../downgrade-static/hero-detail.component.ts | 0 .../{ts => }/src/app/hero-detail.directive.ts | 0 .../upgrade-module/{ts => }/src/app/hero.ts | 0 .../{ts => }/src/app/upgrade-io/app.module.ts | 0 .../src/app/upgrade-io/container.component.ts | 0 .../app/upgrade-io/hero-detail.component.ts | 0 .../src/app/upgrade-static/app.module.ts | 0 .../app/upgrade-static/container.component.ts | 0 .../upgrade-static/hero-detail.component.ts | 0 .../{ts => }/src/app/villain.ts | 0 .../src/index-a-to-ajs-providers.html | 0 .../src/index-a-to-ajs-transclusion.html | 0 .../src/index-ajs-a-hybrid-bootstrap.html | 0 .../src/index-ajs-to-a-projection.html | 0 .../src/index-ajs-to-a-providers.html | 0 .../{ts => }/src/index-bootstrap.html | 0 .../{ts => }/src/index-divide-routes.html | 0 .../{ts => }/src/index-downgrade-io.html | 0 .../{ts => }/src/index-downgrade-static.html | 0 .../{ts => }/src/index-ng-app.html | 0 .../{ts => }/src/index-upgrade-io.html | 0 .../{ts => }/src/index-upgrade-static.html | 0 .../{ts => }/src/systemjs.config.1.js | 0 .../{ts => }/.gitignore | 0 .../{ts => }/app/app.animations.css | 0 .../{ts => }/app/app.animations.ts | 0 .../{ts => }/app/app.config.ts | 0 .../{ts => }/app/app.css | 0 .../{ts => }/app/app.module.ts | 0 .../core/checkmark/checkmark.filter.spec.ts | 0 .../app/core/checkmark/checkmark.filter.ts | 0 .../{ts => }/app/core/core.module.ts | 0 .../{ts => }/app/core/phone/phone.module.ts | 0 .../app/core/phone/phone.service.spec.ts | 0 .../{ts => }/app/core/phone/phone.service.ts | 0 .../{ts => }/app/img/.gitkeep | 0 .../app/img/phones/dell-streak-7.0.jpg | Bin .../app/img/phones/dell-streak-7.1.jpg | Bin .../app/img/phones/dell-streak-7.2.jpg | Bin .../app/img/phones/dell-streak-7.3.jpg | Bin .../app/img/phones/dell-streak-7.4.jpg | Bin .../app/img/phones/motorola-atrix-4g.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.1.jpg | Bin .../app/img/phones/motorola-atrix-4g.2.jpg | Bin .../app/img/phones/motorola-atrix-4g.3.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.1.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.2.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.3.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.4.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.5.jpg | Bin .../app/img/phones/motorola-xoom.0.jpg | Bin .../app/img/phones/motorola-xoom.1.jpg | Bin .../app/img/phones/motorola-xoom.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.0.jpg | Bin .../{ts => }/app/img/phones/nexus-s.1.jpg | Bin .../{ts => }/app/img/phones/nexus-s.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.3.jpg | Bin .../{ts => }/app/index.html | 0 .../phone-detail.component.spec.ts | 0 .../phone-detail/phone-detail.component.ts | 0 .../app/phone-detail/phone-detail.module.ts | 0 .../phone-detail/phone-detail.template.html | 0 .../phone-list/phone-list.component.spec.ts | 0 .../app/phone-list/phone-list.component.ts | 0 .../app/phone-list/phone-list.module.ts | 0 .../app/phone-list/phone-list.template.html | 0 .../{ts => }/app/phones/dell-streak-7.json | 0 .../app/phones/motorola-atrix-4g.json | 0 .../app/phones/motorola-xoom-with-wi-fi.json | 0 .../{ts => }/app/phones/motorola-xoom.json | 0 .../{ts => }/app/phones/nexus-s.json | 0 .../{ts => }/app/phones/phones.json | 0 .../{ts => }/example-config.json | 0 .../{ts => }/karma.conf.ajs.js | 0 .../{ts => }/run-unit-tests.sh | 0 .../{ts => }/tsconfig.ajs.json | 0 .../{ts => }/tsconfig.json | 0 .../{ts => }/.gitignore | 0 .../{ts => }/aot/index.html | 0 .../{ts => }/app/ajs-upgraded-providers.ts | 0 .../{ts => }/app/app.animations.css | 0 .../{ts => }/app/app.animations.ts | 0 .../{ts => }/app/app.config.ts | 0 .../{ts => }/app/app.css | 0 .../{ts => }/app/app.module.ajs.ts | 0 .../{ts => }/app/app.module.ts | 0 .../app/core/checkmark/checkmark.pipe.spec.ts | 0 .../app/core/checkmark/checkmark.pipe.ts | 0 .../{ts => }/app/core/core.module.ts | 0 .../{ts => }/app/core/phone/phone.module.ts | 0 .../app/core/phone/phone.service.spec.ts | 0 .../{ts => }/app/core/phone/phone.service.ts | 0 .../{ts => }/app/img/.gitkeep | 0 .../app/img/phones/dell-streak-7.0.jpg | Bin .../app/img/phones/dell-streak-7.1.jpg | Bin .../app/img/phones/dell-streak-7.2.jpg | Bin .../app/img/phones/dell-streak-7.3.jpg | Bin .../app/img/phones/dell-streak-7.4.jpg | Bin .../{ts => }/app/img/phones/dell-venue.0.jpg | Bin .../phones/droid-2-global-by-motorola.0.jpg | Bin .../img/phones/droid-pro-by-motorola.0.jpg | Bin .../{ts => }/app/img/phones/lg-axis.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.1.jpg | Bin .../app/img/phones/motorola-atrix-4g.2.jpg | Bin .../app/img/phones/motorola-atrix-4g.3.jpg | Bin .../phones/motorola-bravo-with-motoblur.0.jpg | Bin .../phones/motorola-charm-with-motoblur.0.jpg | Bin .../phones/motorola-defy-with-motoblur.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.1.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.2.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.3.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.4.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.5.jpg | Bin .../app/img/phones/motorola-xoom.0.jpg | Bin .../app/img/phones/motorola-xoom.1.jpg | Bin .../app/img/phones/motorola-xoom.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.0.jpg | Bin .../{ts => }/app/img/phones/nexus-s.1.jpg | Bin .../{ts => }/app/img/phones/nexus-s.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.3.jpg | Bin .../app/img/phones/samsung-galaxy-tab.0.jpg | Bin .../{ts => }/app/img/phones/samsung-gem.0.jpg | Bin .../samsung-mesmerize-a-galaxy-s-phone.0.jpg | Bin .../samsung-showcase-a-galaxy-s-phone.0.jpg | Bin .../app/img/phones/samsung-transform.0.jpg | Bin .../{ts => }/app/img/phones/sanyo-zio.0.jpg | Bin .../{ts => }/app/img/phones/t-mobile-g2.0.jpg | Bin .../app/img/phones/t-mobile-mytouch-4g.0.jpg | Bin .../{ts => }/app/main-aot.ts | 0 .../{ts => }/app/main.ts | 0 .../phone-detail.component.ajs.ts | 0 .../phone-detail.component.spec.ts | 0 .../phone-detail/phone-detail.component.ts | 41 + .../app/phone-detail/phone-detail.module.ts | 0 .../phone-detail/phone-detail.template.html | 0 .../phone-list/phone-list.component.ajs.ts | 0 .../phone-list/phone-list.component.spec.ts | 0 .../app/phone-list/phone-list.component.ts | 72 + .../app/phone-list/phone-list.module.ts | 0 .../app/phone-list/phone-list.template.html | 0 .../{ts => }/app/phones/dell-streak-7.json | 0 .../app/phones/motorola-atrix-4g.json | 0 .../app/phones/motorola-xoom-with-wi-fi.json | 0 .../{ts => }/app/phones/motorola-xoom.json | 0 .../{ts => }/app/phones/nexus-s.json | 0 .../{ts => }/app/phones/phones.json | 0 .../{ts => }/bs-config.aot.json | 0 .../{ts => }/copy-dist-files.js | 0 .../{ts => }/example-config.json | 0 .../{ts => }/index.html | 0 .../karma-test-shim.1.js | 89 + .../{ts => }/karma.conf.ajs.js | 0 .../{ts => }/package.ajs.json | 0 .../{ts => }/rollup-config.js | 0 .../{ts => }/run-unit-tests.sh | 0 .../{ts => }/systemjs.config.1.js | 0 .../phone-detail/phone-detail.component.ts | 42 - .../ts/app/phone-list/phone-list.component.ts | 73 - .../{ts => }/tsconfig-aot.json | 0 .../{ts => }/tsconfig.json | 0 .../{ts => }/.gitignore | 0 .../{ts => }/aot/index.html | 0 .../{ts => }/app/ajs-upgraded-providers.ts | 0 .../{ts => }/app/app-routing.module.ts | 0 .../{ts => }/app/app.animations.css | 0 .../{ts => }/app/app.animations.ts | 0 .../{ts => }/app/app.component.ts | 0 .../{ts => }/app/app.config.ts | 0 .../{ts => }/app/app.css | 0 .../{ts => }/app/app.module.ajs.ts | 0 .../{ts => }/app/app.module.ts | 0 .../app/core/checkmark/checkmark.pipe.spec.ts | 0 .../app/core/checkmark/checkmark.pipe.ts | 0 .../{ts => }/app/core/core.module.ts | 0 .../{ts => }/app/core/phone/phone.module.ts | 0 .../app/core/phone/phone.service.spec.ts | 0 .../{ts => }/app/core/phone/phone.service.ts | 0 .../{ts => }/app/img/.gitkeep | 0 .../app/img/phones/dell-streak-7.0.jpg | Bin .../app/img/phones/dell-streak-7.1.jpg | Bin .../app/img/phones/dell-streak-7.2.jpg | Bin .../app/img/phones/dell-streak-7.3.jpg | Bin .../app/img/phones/dell-streak-7.4.jpg | Bin .../{ts => }/app/img/phones/dell-venue.0.jpg | Bin .../phones/droid-2-global-by-motorola.0.jpg | Bin .../img/phones/droid-pro-by-motorola.0.jpg | Bin .../{ts => }/app/img/phones/lg-axis.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.1.jpg | Bin .../app/img/phones/motorola-atrix-4g.2.jpg | Bin .../app/img/phones/motorola-atrix-4g.3.jpg | Bin .../phones/motorola-bravo-with-motoblur.0.jpg | Bin .../phones/motorola-charm-with-motoblur.0.jpg | Bin .../phones/motorola-defy-with-motoblur.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.1.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.2.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.3.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.4.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.5.jpg | Bin .../app/img/phones/motorola-xoom.0.jpg | Bin .../app/img/phones/motorola-xoom.1.jpg | Bin .../app/img/phones/motorola-xoom.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.0.jpg | Bin .../{ts => }/app/img/phones/nexus-s.1.jpg | Bin .../{ts => }/app/img/phones/nexus-s.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.3.jpg | Bin .../app/img/phones/samsung-galaxy-tab.0.jpg | Bin .../{ts => }/app/img/phones/samsung-gem.0.jpg | Bin .../samsung-mesmerize-a-galaxy-s-phone.0.jpg | Bin .../samsung-showcase-a-galaxy-s-phone.0.jpg | Bin .../app/img/phones/samsung-transform.0.jpg | Bin .../{ts => }/app/img/phones/sanyo-zio.0.jpg | Bin .../{ts => }/app/img/phones/t-mobile-g2.0.jpg | Bin .../app/img/phones/t-mobile-mytouch-4g.0.jpg | Bin .../{ts => }/app/main-aot.ts | 0 .../{ts => }/app/main.ts | 0 .../phone-detail.component.spec.ts | 0 .../phone-detail/phone-detail.component.ts | 33 + .../app/phone-detail/phone-detail.module.ts | 0 .../phone-detail/phone-detail.template.html | 0 .../phone-list/phone-list.component.spec.ts | 0 .../app/phone-list/phone-list.component.ts | 60 + .../app/phone-list/phone-list.module.ts | 0 .../app/phone-list/phone-list.template.html | 0 .../{ts => }/app/phones/dell-streak-7.json | 0 .../app/phones/motorola-atrix-4g.json | 0 .../app/phones/motorola-xoom-with-wi-fi.json | 0 .../{ts => }/app/phones/motorola-xoom.json | 0 .../{ts => }/app/phones/nexus-s.json | 0 .../{ts => }/app/phones/phones.json | 0 .../{ts => }/bs-config.aot.json | 0 .../{ts => }/copy-dist-files.js | 0 .../{ts => }/example-config.json | 0 .../{ts => }/index.html | 0 .../{ts => }/rollup-config.js | 0 .../{ts => }/systemjs.config.1.js | 0 .../ts/aot/bs-config.json | 5 - .../phone-detail/phone-detail.component.ts | 34 - .../ts/app/phone-list/phone-list.component.ts | 61 - .../{ts => }/tsconfig-aot.json | 0 .../{ts => }/tsconfig.json | 0 .../{ts => }/app/app-routing.module.ts | 0 .../{ts => }/app/app.component.ts | 0 .../{ts => }/app/app.css | 0 .../{ts => }/app/app.module.ts | 0 .../app/core/checkmark/checkmark.pipe.spec.ts | 0 .../app/core/checkmark/checkmark.pipe.ts | 0 .../app/core/phone/phone.service.spec.ts | 0 .../{ts => }/app/core/phone/phone.service.ts | 0 .../{ts => }/app/img/.gitkeep | 0 .../app/img/phones/dell-streak-7.0.jpg | Bin .../app/img/phones/dell-streak-7.1.jpg | Bin .../app/img/phones/dell-streak-7.2.jpg | Bin .../app/img/phones/dell-streak-7.3.jpg | Bin .../app/img/phones/dell-streak-7.4.jpg | Bin .../{ts => }/app/img/phones/dell-venue.0.jpg | Bin .../phones/droid-2-global-by-motorola.0.jpg | Bin .../img/phones/droid-pro-by-motorola.0.jpg | Bin .../{ts => }/app/img/phones/lg-axis.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.0.jpg | Bin .../app/img/phones/motorola-atrix-4g.1.jpg | Bin .../app/img/phones/motorola-atrix-4g.2.jpg | Bin .../app/img/phones/motorola-atrix-4g.3.jpg | Bin .../phones/motorola-bravo-with-motoblur.0.jpg | Bin .../phones/motorola-charm-with-motoblur.0.jpg | Bin .../phones/motorola-defy-with-motoblur.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.0.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.1.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.2.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.3.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.4.jpg | Bin .../img/phones/motorola-xoom-with-wi-fi.5.jpg | Bin .../app/img/phones/motorola-xoom.0.jpg | Bin .../app/img/phones/motorola-xoom.1.jpg | Bin .../app/img/phones/motorola-xoom.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.0.jpg | Bin .../{ts => }/app/img/phones/nexus-s.1.jpg | Bin .../{ts => }/app/img/phones/nexus-s.2.jpg | Bin .../{ts => }/app/img/phones/nexus-s.3.jpg | Bin .../app/img/phones/samsung-galaxy-tab.0.jpg | Bin .../{ts => }/app/img/phones/samsung-gem.0.jpg | Bin .../samsung-mesmerize-a-galaxy-s-phone.0.jpg | Bin .../samsung-showcase-a-galaxy-s-phone.0.jpg | Bin .../app/img/phones/samsung-transform.0.jpg | Bin .../{ts => }/app/img/phones/sanyo-zio.0.jpg | Bin .../{ts => }/app/img/phones/t-mobile-g2.0.jpg | Bin .../app/img/phones/t-mobile-mytouch-4g.0.jpg | Bin .../{ts => }/app/main.ts | 0 .../phone-detail.component.spec.ts | 0 .../phone-detail/phone-detail.component.ts | 27 + .../phone-detail/phone-detail.template.html | 0 .../phone-list/phone-list.component.spec.ts | 0 .../app/phone-list/phone-list.component.ts | 53 + .../app/phone-list/phone-list.template.html | 0 .../{ts => }/app/phones/dell-streak-7.json | 0 .../app/phones/motorola-atrix-4g.json | 0 .../app/phones/motorola-xoom-with-wi-fi.json | 0 .../{ts => }/app/phones/motorola-xoom.json | 0 .../{ts => }/app/phones/nexus-s.json | 0 .../{ts => }/app/phones/phones.json | 0 .../{ts => }/example-config.json | 0 .../{ts => }/index.html | 0 .../{ts => }/run-unit-tests.sh | 0 .../systemjs.config.1.js | 55 + .../phone-detail/phone-detail.component.ts | 28 - .../ts/app/phone-list/phone-list.component.ts | 54 - .../{ts => }/tsconfig.json | 0 .../ts => user-input}/example-config.json | 0 .../examples/user-input/{ts => }/plnkr.json | 0 .../{ts => }/src/app/app.component.html | 0 .../user-input/src/app/app.component.ts | 8 + .../user-input/{ts => }/src/app/app.module.ts | 0 .../{ts => }/src/app/click-me.component.ts | 0 .../{ts => }/src/app/click-me2.component.ts | 0 .../{ts => }/src/app/keyup.components.ts | 0 .../{ts => }/src/app/little-tour.component.ts | 0 .../{ts => }/src/app/loop-back.component.ts | 0 .../user-input/{ts => }/src/index.html | 0 .../ts => user-input}/src/main.ts | 0 .../{ts => }/src/user-input-styles.css | 0 .../user-input/ts/example-config.json | 0 .../examples/user-input/ts/plnkr.no-link.html | 433 -- .../user-input/ts/src/app/app.component.ts | 9 - .../examples/user-input/ts/src/main.ts | 5 - .../examples/webpack/{ts => }/.gitignore | 0 .../webpack/{ts => }/config/helpers.js | 0 .../{ts => }/config/karma-test-shim.js | 0 .../examples/webpack/config/karma.conf.js | 39 + .../examples/webpack/config/webpack.common.js | 81 + .../webpack/{ts => }/config/webpack.dev.js | 0 .../webpack/{ts => }/config/webpack.prod.js | 0 .../examples/webpack/config/webpack.test.js | 55 + .../webpack/{ts => }/example-config.json | 0 .../webpack/{ts => }/karma.webpack.conf.js | 0 .../examples/webpack/package.webpack.json | 49 + .../{ts => }/src/app/app.component.css | 0 .../webpack/src/app/app.component.html | 7 + .../{ts => }/src/app/app.component.spec.ts | 0 .../examples/webpack/src/app/app.component.ts | 16 + .../webpack/{ts => }/src/app/app.module.ts | 0 .../{ts/public => src/assets}/css/styles.css | 0 .../public => src/assets}/images/angular.png | Bin .../examples/webpack/{ts => }/src/index.html | 0 .../examples/webpack/{ts => }/src/main.ts | 0 .../webpack/{ts => }/src/polyfills.ts | 0 .../webpack/{ts => src}/tsconfig.1.json | 0 .../examples/webpack/{ts => }/src/vendor.ts | 0 .../ts-snippets/webpack.config.snippets.ts | 58 - .../examples/webpack/ts/config/karma.conf.js | 39 - .../webpack/ts/config/webpack.common.js | 75 - .../webpack/ts/config/webpack.test.js | 50 - .../examples/webpack/ts/package.webpack.json | 50 - .../webpack/ts/src/app/app.component.html | 7 - .../webpack/ts/src/app/app.component.ts | 12 - .../webpack/{ts => }/webpack.config.js | 0 aio/content/examples/webpack/zipper.json | 12 + aio/content/glossary.md | 726 +++ aio/content/guide/ajs-quick-reference.md | 236 +- aio/content/guide/animations.md | 90 +- aio/content/guide/aot-compiler.md | 437 +- aio/content/guide/appmodule.md | 19 +- aio/content/guide/architecture.md | 238 +- aio/content/guide/attribute-directives.md | 215 +- aio/content/guide/browser-support.md | 12 +- aio/content/guide/cb-dependency-injection.md | 324 +- aio/content/guide/cb-index.md | 31 +- aio/content/guide/change-log.md | 10 + aio/content/guide/cheatsheet.md | 392 ++ aio/content/guide/component-communication.md | 217 +- aio/content/guide/component-relative-paths.md | 194 - aio/content/guide/component-styles.md | 88 +- aio/content/guide/dependency-injection.md | 894 ++-- aio/content/guide/deployment.md | 72 +- aio/content/guide/displaying-data.md | 126 +- aio/content/guide/dynamic-component-loader.md | 70 +- aio/content/guide/dynamic-form.md | 75 +- aio/content/guide/form-validation.md | 520 +- aio/content/guide/forms.md | 253 +- aio/content/guide/glossary.md | 2 + .../hierarchical-dependency-injection.md | 51 +- aio/content/guide/i18n.md | 160 +- aio/content/guide/index.md | 2 + aio/content/guide/learning-angular.md | 9 +- aio/content/guide/lifecycle-hooks.md | 285 +- aio/content/guide/ngcontainer.md | 1 + aio/content/guide/ngmodule-faq.md | 1624 ++++++ aio/content/guide/ngmodule.md | 360 +- aio/content/guide/npm-packages.md | 33 +- aio/content/guide/pipes.md | 575 +++ aio/content/guide/reactive-forms.md | 306 +- aio/content/guide/router.md | 1052 +++- aio/content/guide/security.md | 176 +- aio/content/guide/server-communication.md | 459 +- aio/content/guide/set-document-title.md | 34 +- aio/content/guide/setup-systemjs-anatomy.md | 387 ++ aio/content/guide/setup.md | 85 +- aio/content/guide/structural-directives.md | 219 +- aio/content/guide/style-guide.md | 615 ++- aio/content/guide/template-syntax.md | 532 +- aio/content/guide/testing.md | 3555 ++++++++++++++ aio/content/guide/ts-to-js.md | 513 +- aio/content/guide/typescript-configuration.md | 119 + aio/content/guide/upgrade.md | 437 +- aio/content/guide/user-input.md | 85 +- aio/content/guide/visual-studio-2015.md | 37 +- aio/content/guide/webpack.md | 510 +- aio/content/help-new.md | 31 + aio/content/help.md | 1 + aio/content/index.md | 181 + aio/content/navigation.json | 15 +- aio/content/quickstart.md | 47 + aio/content/resources.md | 154 + aio/content/styleguide.md | 1 + aio/content/tutorial/index.md | 74 +- aio/content/tutorial/toh-pt1.md | 290 +- aio/content/tutorial/toh-pt2.md | 417 +- aio/content/tutorial/toh-pt3.md | 423 +- aio/content/tutorial/toh-pt4.md | 474 +- aio/content/tutorial/toh-pt5.md | 1172 +++-- aio/content/tutorial/toh-pt6.md | 885 +++- .../browser-background-template.png | Bin .../assets/images/backgrounds/lon-paper.png | Bin .../assets/images/backgrounds/sf-paper.png | Bin .../images/backgrounds/super-hero-large.png | Bin aio/src/assets/images/bios/alex-eagle.jpg | Bin .../assets/images/bios/alex-rickabaugh.jpg | Bin aio/src/assets/images/bios/alex-wolfe.jpg | Bin aio/src/assets/images/bios/ali.jpg | Bin .../bios/angular-gde-bio-placeholder.png | Bin aio/src/assets/images/bios/brad-green.jpg | Bin aio/src/assets/images/bios/brandonroberts.jpg | Bin aio/src/assets/images/bios/chuckj.jpg | Bin aio/src/assets/images/bios/crisbeto.jpg | Bin aio/src/assets/images/bios/david-east.jpg | Bin aio/src/assets/images/bios/deborah.jpg | Bin aio/src/assets/images/bios/devversion.jpg | Bin 0 -> 26753 bytes aio/src/assets/images/bios/eladbezalel.jpg | Bin aio/src/assets/images/bios/eric.jpg | Bin aio/src/assets/images/bios/fatima.jpg | Bin aio/src/assets/images/bios/filipe-silva.jpg | Bin aio/src/assets/images/bios/gkalpak.jpg | Bin aio/src/assets/images/bios/hansl.jpg | Bin aio/src/assets/images/bios/igor-minar.jpg | Bin aio/src/assets/images/bios/jasonaden.jpg | Bin 0 -> 25066 bytes aio/src/assets/images/bios/jbedard.jpg | Bin aio/src/assets/images/bios/jeff-cross.jpg | Bin aio/src/assets/images/bios/jeffwhelpley.jpg | Bin aio/src/assets/images/bios/jelbourn.jpg | Bin .../assets/images/bios/jesus-rodriguez.jpg | Bin aio/src/assets/images/bios/john-papa.jpg | Bin aio/src/assets/images/bios/juleskremer.jpg | Bin aio/src/assets/images/bios/julie-ralph.jpg | Bin aio/src/assets/images/bios/kapunahelewong.jpg | Bin aio/src/assets/images/bios/kara-erickson.jpg | Bin aio/src/assets/images/bios/kathy.jpg | Bin aio/src/assets/images/bios/lucas.jpg | Bin aio/src/assets/images/bios/marclaval.jpg | Bin aio/src/assets/images/bios/marcy.jpg | Bin aio/src/assets/images/bios/martin-probst.jpg | Bin aio/src/assets/images/bios/martinstaffa.jpg | Bin aio/src/assets/images/bios/matias.jpg | Bin aio/src/assets/images/bios/max-sills.jpg | Bin aio/src/assets/images/bios/michal.jpg | Bin aio/src/assets/images/bios/misko.jpg | Bin aio/src/assets/images/bios/mmalerba.jpg | Bin 0 -> 30618 bytes aio/src/assets/images/bios/naomi.jpg | Bin aio/src/assets/images/bios/pascalprecht.jpg | Bin .../assets/images/bios/patrick-stapleton.jpg | Bin aio/src/assets/images/bios/pawel.jpg | Bin aio/src/assets/images/bios/pete.jpg | Bin aio/src/assets/images/bios/rado.jpg | Bin aio/src/assets/images/bios/ralph.jpg | Bin aio/src/assets/images/bios/rex.jpg | Bin aio/src/assets/images/bios/rmesserle.jpg | Bin aio/src/assets/images/bios/rob-wormald.jpg | Bin aio/src/assets/images/bios/ryan.jpg | Bin aio/src/assets/images/bios/scott.jpg | Bin aio/src/assets/images/bios/shahar.jpg | Bin aio/src/assets/images/bios/shannon.jpg | Bin .../images/bios/shield-bio-placeholder.png | Bin aio/src/assets/images/bios/stephenfluin.jpg | Bin aio/src/assets/images/bios/teropa.jpg | Bin aio/src/assets/images/bios/thomas.jpg | Bin aio/src/assets/images/bios/tobias.jpg | Bin aio/src/assets/images/bios/tonyc.jpg | Bin aio/src/assets/images/bios/topherfangio.jpg | Bin .../assets/images/bios/torgeirhelgevold.jpg | Bin aio/src/assets/images/bios/victor.jpg | Bin aio/src/assets/images/bios/vikram.jpg | Bin aio/src/assets/images/bios/wardbell.jpg | Bin aio/src/assets/images/bios/xiaofei.jpg | Bin 0 -> 43492 bytes .../assets/images/cardboard/Ionic_Logo.png | Bin .../assets/images/cardboard/UC_Logo_Black.png | Bin aio/src/assets/images/cardboard/cardboard.png | Bin .../cookbooks/aot-compiler/toh6-bundle.png | Bin .../bidirectional-service.gif | Bin .../child-to-parent.gif | Bin .../contentchildren.png | Bin .../countdown-timer-anim.gif | Bin .../parent-to-child-on-changes.gif | Bin 22226 -> 44131 bytes .../parent-to-child.png | Bin .../component-communication/setter.png | Bin .../unrelated-service.gif | Bin .../cookbooks/dependency-injection/alex.png | Bin .../cookbooks/dependency-injection/alice.png | Bin .../date-logger-entry.png | Bin .../hero-bio-and-content.png | Bin .../hero-bio-contact-no-host.png | Bin .../hero-bios-and-contacts.png | Bin .../dependency-injection/hero-bios.png | Bin .../dependency-injection/hero-of-month.png | Bin .../dependency-injection/highlight.png | Bin .../dependency-injection/logged-in-user.png | Bin .../minimal-logger-intellisense.png | Bin .../dependency-injection/sorted-heroes.png | Bin .../dynamic-component-loader/ads.gif | Bin 0 -> 871000 bytes .../cookbooks/dynamic-form/dynamic-form.png | Bin .../cookbooks/form-validation/plunker.png | Bin .../set-document-title/set-title-anim.gif | Bin ..._transitions_inactive_active_wildcards.png | Bin 34058 -> 33839 bytes .../images/devguide/architecture/airplane.png | Bin 225830 -> 225355 bytes .../architecture/component-databinding.png | Bin 10156 -> 10152 bytes .../devguide/architecture/component-tree.png | Bin 7715 -> 7704 bytes .../devguide/architecture/databinding.png | Bin 19119 -> 19078 bytes .../architecture/dependency-injection.png | Bin 5621 -> 5618 bytes .../architecture/injector-injects.png | Bin 17258 -> 17227 bytes .../images/devguide/architecture/metadata.png | Bin 2232 -> 2230 bytes .../images/devguide/architecture/modules.png | Bin 6793 -> 6791 bytes .../images/devguide/architecture/overview.png | Bin 21218 -> 21195 bytes .../architecture/parent-child-binding.png | Bin 24875 -> 24863 bytes .../images/devguide/architecture/service.png | Bin 5932 -> 5931 bytes .../template-metadata-component.png | Bin 5674 -> 5669 bytes .../images/devguide/architecture/template.png | Bin 24663 -> 24653 bytes .../dependency-injection/car-components.png | Bin 2863 -> 2684 bytes .../component-hierarchy.png | Bin 11525 -> 11219 bytes .../dependency-injection/injector-tree.png | Bin 13273 -> 12958 bytes .../displaying-data/hero-names-list.png | Bin 8655 -> 8654 bytes .../displaying-data/title-and-hero.png | Bin 2959 -> 2958 bytes .../images/devguide/forms/hero-form-1.png | Bin 7503 -> 7498 bytes .../images/devguide/forms/hero-form-2.png | Bin 14728 -> 14727 bytes aio/src/assets/images/devguide/forms/hf-4.png | Bin 13873 -> 13869 bytes aio/src/assets/images/devguide/forms/hf-5.png | Bin 5373 -> 5371 bytes .../forms/ng-control-class-changes.png | Bin 41838 -> 41737 bytes .../assets/images/devguide/intro/people.png | Bin 17923 -> 16526 bytes .../lifecycle-hooks/hooks-in-sequence.png | Bin 15084 -> 14630 bytes .../images/devguide/pipes/power-booster.png | Bin 7298 -> 7290 bytes .../devguide/quickstart/hello-angular.png | Bin 4059 -> 2078 bytes .../devguide/quickstart/my-first-app.png | Bin 12910 -> 10061 bytes .../quickstart/quickstart-plnkr-big.png | Bin 22363 -> 20869 bytes .../devguide/quickstart/quickstart-plnkr.png | Bin 15149 -> 14674 bytes .../images/devguide/router/contact-popup.png | Bin 3996 -> 3907 bytes .../devguide/router/selected-crisis.png | Bin 8556 -> 8541 bytes .../images/devguide/router/selected-hero.png | Bin 4482 -> 4482 bytes .../security/bypass-security-component.png | Bin 63825 -> 55170 bytes .../server-communication/hero-list.png | Bin 4037 -> 4036 bytes .../structural-directives/bad-paragraph.png | Bin 2699 -> 2669 bytes .../structural-directives/bad-select.png | Bin 2356 -> 2088 bytes .../element-display-in-dom.png | Bin 6858 -> 6721 bytes .../structural-directives/good-paragraph.png | Bin 2822 -> 2524 bytes .../structural-directives/hero-div-in-dom.png | Bin 3525 -> 3490 bytes .../ngIf-and-myUnless.png | Bin 8775 -> 8772 bytes .../ngSwitch-rendering.png | Bin 18177 -> 17608 bytes .../template-rendering.png | Bin 7069 -> 7033 bytes .../devguide/template-syntax/input-output.png | Bin 8312 -> 8302 bytes .../devguide/toh/heroes-list-selected.png | Bin 6154 -> 6154 bytes .../images/devguide/toh/nav-diagram.png | Bin 39037 -> 38982 bytes .../examples/displaying-data-example1.png | Bin .../assets/images/examples/setup-example1.png | Bin .../images/examples/user-input-example1.png | Bin .../favicons/apple-touch-icon-144x144.png | Bin .../favicons/apple-touch-icon-152x152.png | Bin .../favicons/apple-touch-icon-180x180.png | Bin .../favicons/apple-touch-icon-precomposed.png | Bin .../images/favicons/apple-touch-icon.png | Bin .../assets/images/favicons/favicon-16x16.png | Bin .../images/favicons/favicon-194x194.png | Bin .../assets/images/favicons/favicon-32x32.png | Bin .../assets/images/favicons/favicon-96x96.png | Bin aio/src/assets/images/favicons/favicon.ico | Bin aio/src/assets/images/favicons/manifest.json | 41 + .../assets/images/home/joyful-development.gif | Bin .../assets/images/home/joyful-development.jpg | Bin .../assets/images/home/joyful-development.png | Bin .../assets/images/home/joyful-development.svg | 0 .../assets/images/home/loved-by-millions.png | Bin .../assets/images/home/loved-by-millions.svg | 0 .../images/home/responsive-framework.png | Bin .../images/home/responsive-framework.svg | 0 .../assets/images/home/speed-performance.svg | 0 aio/src/assets/images/icons/clippy.svg | 0 aio/src/assets/images/icons/favicon.ico | Bin .../ic_keyboard_arrow_down_black_24px.svg | 0 .../logos/anglebrackets/anglebrackets.png | Bin .../logos/anglebrackets/devintersection.png | Bin .../angular2/angular-banner-logo-grey.png | Bin 0 -> 1565 bytes .../logos/angular2/angular-logo-banner.png | Bin .../assets/images/logos/angular2/angular.png | Bin .../assets/images/logos/angular2/angular.svg | 0 .../logos/angular2/angular_solidBlack.png | Bin .../logos/angular2/angular_solidBlack.svg | 0 .../angular2/angular_whiteTransparent.png | Bin .../angular2/angular_whiteTransparent.svg | 4 +- .../logos/angular2/shield-with-beta.png | Bin .../angularconnect-logo-med.png | Bin .../angularconnect-logo-small.png | Bin .../angularconnect-logo-text.png | Bin .../angularconnect/angularconnect-logo.png | Bin .../logos/angularjs/AngularJS-Shield.svg | 74 + .../assets/images/logos/google/gdd-logo.png | Bin 0 -> 7167 bytes aio/src/assets/images/logos/html5/html5.png | Bin aio/src/assets/images/logos/html5/html5.svg | 0 .../assets/images/logos/html5/html5@2x.png | Bin .../images/logos/inverse/shield/128.png | Bin .../images/logos/inverse/shield/128@2x.png | Bin .../assets/images/logos/inverse/shield/16.png | Bin .../images/logos/inverse/shield/16@2x.png | Bin .../assets/images/logos/inverse/shield/22.png | Bin 554 -> 452 bytes .../images/logos/inverse/shield/22@2x.png | Bin 1045 -> 864 bytes .../images/logos/inverse/shield/22svg.svg | 0 .../images/logos/inverse/shield/256.png | Bin .../images/logos/inverse/shield/256@2x.png | Bin .../assets/images/logos/inverse/shield/32.png | Bin .../images/logos/inverse/shield/32@2x.png | Bin .../assets/images/logos/inverse/shield/48.png | Bin .../images/logos/inverse/shield/48@2x.png | Bin .../logos/inverse/shield/shield-large.png | Bin .../logos/inverse/shield/shield-large.svg | 0 .../logos/inverse/shield/shield-large@2x.png | Bin .../images/logos/license/open-source.png | Bin .../images/logos/license/open-source@2x.png | Bin .../images/logos/ng-conf/ng-conf-shield.png | Bin .../logos/ng-conf/ng-conf-shield@2x.png | Bin .../images/logos/ng-europe/ng-europe-logo.png | Bin .../logos/standard/angular-gde-logo@2x.png | Bin .../assets/images/logos/standard/logo-nav.png | Bin .../images/logos/standard/logo-nav@2x.png | Bin .../images/logos/standard/shield-large.png | Bin .../images/logos/standard/shield-large.svg | 0 .../images/logos/standard/shield-large@2x.png | Bin .../assets/images/plunker/click-to-run.png | Bin aio/src/assets/images/plunker/placeholder.png | Bin .../images/support/angular-gde-logo.png | Bin aio/src/assets/images/support/github-logo.png | Bin aio/src/assets/images/support/gitter-logo.png | Bin aio/src/assets/images/support/reddit-logo.png | Bin .../images/support/stackoverflow-logo.png | Bin 2065 files changed, 27452 insertions(+), 52434 deletions(-) create mode 100644 aio/content/cli-quickstart.md rename aio/content/examples/animations/{ts => }/.gitignore (100%) rename aio/content/examples/animations/{ts => }/example-config.json (100%) rename aio/content/examples/animations/{ts => }/plnkr.json (100%) create mode 100644 aio/content/examples/animations/src/app/app.module.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-auto.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-basic.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-groups.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-multistep.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-timings.component.ts create mode 100644 aio/content/examples/animations/src/app/hero-list-twoway.component.ts rename aio/content/examples/animations/{ts => }/src/app/hero-list.component.css (100%) rename aio/content/examples/animations/{ts => }/src/app/hero-team-builder.component.ts (100%) rename aio/content/examples/animations/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/animations/{ts => }/src/index.html (100%) rename aio/content/examples/animations/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/animations/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/animations/ts/src/app/app.module.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts delete mode 100644 aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts rename aio/content/examples/architecture/{ts => }/example-config.json (100%) rename aio/content/examples/architecture/{ts => }/plnkr.json (100%) rename aio/content/examples/architecture/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/backend.service.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/hero-detail.component.html (100%) create mode 100644 aio/content/examples/architecture/src/app/hero-detail.component.ts rename aio/content/examples/architecture/{ts => }/src/app/hero-list.component.1.html (100%) rename aio/content/examples/architecture/{ts => }/src/app/hero-list.component.html (100%) create mode 100644 aio/content/examples/architecture/src/app/hero-list.component.ts rename aio/content/examples/architecture/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/logger.service.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/mini-app.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/sales-tax.component.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/sales-tax.service.ts (100%) rename aio/content/examples/architecture/{ts => }/src/app/tax-rate.service.ts (100%) rename aio/content/examples/architecture/{ts => }/src/index.html (100%) rename aio/content/examples/architecture/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/architecture/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/architecture/ts/src/app/hero-detail.component.ts delete mode 100644 aio/content/examples/architecture/ts/src/app/hero-list.component.ts rename aio/content/examples/attribute-directives/{ts => }/example-config.json (100%) rename aio/content/examples/attribute-directives/{ts => }/plnkr.json (100%) create mode 100644 aio/content/examples/attribute-directives/src/app/app.component.1.html create mode 100644 aio/content/examples/attribute-directives/src/app/app.component.1.ts create mode 100644 aio/content/examples/attribute-directives/src/app/app.component.html create mode 100644 aio/content/examples/attribute-directives/src/app/app.component.ts rename aio/content/examples/attribute-directives/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/attribute-directives/{ts => }/src/app/dummy.module.1.ts (100%) rename aio/content/examples/attribute-directives/{ts => }/src/app/highlight.directive.1.ts (100%) create mode 100644 aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts rename aio/content/examples/attribute-directives/{ts => }/src/app/highlight.directive.3.ts (100%) create mode 100644 aio/content/examples/attribute-directives/src/app/highlight.directive.ts rename aio/content/examples/attribute-directives/{ts => }/src/index.html (100%) rename aio/content/examples/attribute-directives/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/attribute-directives/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/app.component.1.html delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/app.component.html delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts delete mode 100644 aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts rename aio/content/examples/cb-ajs-quick-reference/{ts => }/example-config.json (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/app.component.css (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/date.pipe.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/movie-list.component.css (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/movie-list.component.html (100%) create mode 100644 aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/movie.service.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/app/movie.ts (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/images/hero.png (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/images/ng-logo.png (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/images/villain.png (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/index.html (100%) rename aio/content/examples/cb-ajs-quick-reference/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts rename aio/content/examples/cb-aot-compiler/{ts => }/.gitignore (100%) rename aio/content/examples/cb-aot-compiler/{ts => }/example-config.json (100%) rename aio/content/examples/cb-aot-compiler/{ts => }/rollup-config.js (100%) rename aio/content/examples/cb-aot-compiler/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cb-aot-compiler/src/app/app.component.ts rename aio/content/examples/cb-aot-compiler/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-aot-compiler/{ts => }/src/index-jit.html (100%) create mode 100644 aio/content/examples/cb-aot-compiler/src/index.html rename aio/content/examples/cb-aot-compiler/{ts => }/src/main-jit.ts (100%) rename aio/content/examples/cb-aot-compiler/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/cb-aot-compiler/ts/src/index.html delete mode 100644 aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json.annotated rename aio/content/examples/cb-aot-compiler/{ts => }/tsconfig-aot.json (100%) rename aio/content/examples/cb-component-communication/{ts => }/.gitignore (100%) rename aio/content/examples/cb-component-communication/{ts => }/example-config.json (100%) rename aio/content/examples/cb-component-communication/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cb-component-communication/src/app/app.component.ts rename aio/content/examples/cb-component-communication/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/astronaut.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/countdown-parent.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/countdown-timer.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/hero-child.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/hero-parent.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/mission.service.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/missioncontrol.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/name-child.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/name-parent.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/version-child.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/version-parent.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/voter.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/app/votetaker.component.ts (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/demo.css (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/index.html (100%) rename aio/content/examples/cb-component-communication/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-component-communication/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-component-communication/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/cb-component-relative-paths/e2e-spec.ts delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/plnkr.json delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/app/app.module.ts delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.css delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.html delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.ts delete mode 100644 aio/content/examples/cb-component-relative-paths/ts/src/index.html rename aio/content/examples/{cb-component-relative-paths/ts => cb-dependency-injection}/example-config.json (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cb-dependency-injection/src/app/app.component.ts rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/date-logger.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-bio.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-bios.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-cache.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-contact.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-data.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero-of-the-month.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/highlight.directive.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/logger.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/parent-finder.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/runners-up.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/sorted-heroes.component.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/user-context.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/app/user.service.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/index.html (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/main.ts (100%) rename aio/content/examples/cb-dependency-injection/{ts => }/src/sample.css (100%) delete mode 100644 aio/content/examples/cb-dependency-injection/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-dependency-injection/ts/src/app/app.component.ts rename aio/content/examples/{cb-dependency-injection/ts => cb-dynamic-component-loader}/example-config.json (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/ad-banner.component.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/ad-item.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/ad.component.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/ad.directive.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/ad.service.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/hero-job-ad.component.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/app/hero-profile.component.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/index.html (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/main.ts (100%) rename aio/content/examples/cb-dynamic-component-loader/{ts => }/src/sample.css (100%) rename aio/content/examples/{cb-dynamic-component-loader/ts => cb-dynamic-form}/example-config.json (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/dynamic-form-question.component.html (100%) create mode 100644 aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/dynamic-form.component.html (100%) create mode 100644 aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/question-base.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/question-control.service.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/question-dropdown.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/question-textbox.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/app/question.service.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/index.html (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/main.ts (100%) rename aio/content/examples/cb-dynamic-form/{ts => }/src/sample.css (100%) delete mode 100644 aio/content/examples/cb-dynamic-form/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts delete mode 100644 aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts rename aio/content/examples/{cb-dynamic-form/ts => cb-form-validation}/example-config.json (100%) rename aio/content/examples/cb-form-validation/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/reactive/hero-form-reactive.component.html (100%) create mode 100644 aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts rename aio/content/examples/cb-form-validation/{ts => }/src/app/reactive/hero-form-reactive.module.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/shared/forbidden-name.directive.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/shared/hero.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/shared/shared.module.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/shared/submitted.component.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/template/hero-form-template.module.ts (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/app/template/hero-form-template1.component.html (100%) create mode 100644 aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts rename aio/content/examples/cb-form-validation/{ts => }/src/app/template/hero-form-template2.component.html (100%) create mode 100644 aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts rename aio/content/examples/cb-form-validation/{ts => }/src/forms.css (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/index.html (100%) rename aio/content/examples/cb-form-validation/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-form-validation/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts delete mode 100644 aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts delete mode 100644 aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts rename aio/content/examples/cb-i18n/{ts => }/.gitignore (100%) rename aio/content/examples/{cb-form-validation/ts => cb-i18n}/example-config.json (100%) rename aio/content/examples/cb-i18n/{ts => }/messages.xlf (100%) create mode 100644 aio/content/examples/cb-i18n/plnkr.json rename aio/content/examples/cb-i18n/{ts => }/src/app/app.component.1.html (100%) rename aio/content/examples/cb-i18n/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cb-i18n/src/app/app.component.ts rename aio/content/examples/cb-i18n/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-i18n/{ts => }/src/app/i18n-providers.ts (100%) rename aio/content/examples/cb-i18n/{ts => }/src/index.html (100%) rename aio/content/examples/cb-i18n/{ts => }/src/locale/messages.es.xlf (100%) rename aio/content/examples/cb-i18n/{ts => }/src/locale/messages.es.xlf.html (100%) rename aio/content/examples/cb-i18n/{ts => }/src/main.1.ts (100%) rename aio/content/examples/cb-i18n/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-i18n/ts/plnkr.json delete mode 100644 aio/content/examples/cb-i18n/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-i18n/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/cb-i18n/ts/src/systemjs-text-plugin.js rename aio/content/examples/{cb-i18n/ts => cb-set-document-title}/example-config.json (100%) rename aio/content/examples/cb-set-document-title/{ts => }/plnkr.json (100%) rename aio/content/examples/cb-set-document-title/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/cb-set-document-title/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/cb-set-document-title/{ts => }/src/index.html (100%) rename aio/content/examples/cb-set-document-title/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/cb-set-document-title/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.no-link.html create mode 100644 aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js create mode 100644 aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js delete mode 100644 aio/content/examples/cb-ts-to-js/js-es6/plnkr.no-link.html create mode 100644 aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js create mode 100644 aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js delete mode 100644 aio/content/examples/cb-ts-to-js/js/plnkr.no-link.html create mode 100644 aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js create mode 100644 aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js delete mode 100644 aio/content/examples/cb-ts-to-js/ts/plnkr.no-link.html rename aio/content/examples/cb-visual-studio-2015/{ts => }/.gitignore (100%) rename aio/content/examples/cb-visual-studio-2015/{ts => }/tsconfig.json (100%) create mode 100644 aio/content/examples/cli-quickstart/.angular-cli.json create mode 100644 aio/content/examples/cli-quickstart/.editorconfig create mode 100644 aio/content/examples/cli-quickstart/.gitignore create mode 100644 aio/content/examples/cli-quickstart/README.md rename aio/content/examples/cli-quickstart/{ts => }/bs-config.cli.json (100%) rename aio/content/examples/cli-quickstart/{ts => }/e2e/app.e2e-spec.ts (100%) rename aio/content/examples/cli-quickstart/{ts => }/e2e/app.po.ts (100%) create mode 100644 aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json rename aio/content/examples/cli-quickstart/{ts => }/example-config.json (100%) rename aio/content/examples/cli-quickstart/{ts => }/src/app/app.component.css (100%) rename aio/content/examples/cli-quickstart/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/cli-quickstart/src/app/app.component.spec.ts rename aio/content/examples/cli-quickstart/{ts => }/src/app/app.component.ts (100%) create mode 100644 aio/content/examples/cli-quickstart/src/app/app.module.ts rename aio/content/examples/cli-quickstart/{ts => }/src/assets/.gitkeep (100%) rename aio/content/examples/cli-quickstart/{ts => }/src/environments/environment.prod.ts (100%) create mode 100644 aio/content/examples/cli-quickstart/src/environments/environment.ts rename aio/content/examples/cli-quickstart/{ts => }/src/favicon.ico (100%) rename aio/content/examples/cli-quickstart/{ts => }/src/index.html (100%) create mode 100644 aio/content/examples/cli-quickstart/src/main.ts create mode 100644 aio/content/examples/cli-quickstart/src/polyfills.ts create mode 100644 aio/content/examples/cli-quickstart/src/test.ts create mode 100644 aio/content/examples/cli-quickstart/src/tsconfig.app.json create mode 100644 aio/content/examples/cli-quickstart/src/tsconfig.spec.json delete mode 100644 aio/content/examples/cli-quickstart/ts/.gitignore delete mode 100644 aio/content/examples/cli-quickstart/ts/README.md delete mode 100644 aio/content/examples/cli-quickstart/ts/angular-cli.json delete mode 100644 aio/content/examples/cli-quickstart/ts/src/app/app.component.spec.ts delete mode 100644 aio/content/examples/cli-quickstart/ts/src/app/app.module.ts delete mode 100644 aio/content/examples/cli-quickstart/ts/src/environments/environment.ts delete mode 100644 aio/content/examples/cli-quickstart/ts/src/main.ts delete mode 100644 aio/content/examples/cli-quickstart/ts/src/polyfills.ts delete mode 100644 aio/content/examples/cli-quickstart/ts/src/test.ts create mode 100644 aio/content/examples/cli-quickstart/tsconfig.json create mode 100644 aio/content/examples/cli-quickstart/zipper.json rename aio/content/examples/{cb-set-document-title/ts => component-styles}/example-config.json (100%) rename aio/content/examples/component-styles/{ts => }/plnkr.json (100%) rename aio/content/examples/component-styles/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-app-main.component.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-app.component.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-controls.component.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-details-box.css (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-details.component.css (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-details.component.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-team.component.css (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero-team.component.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/component-styles/{ts => }/src/app/quest-summary.component.css (100%) rename aio/content/examples/component-styles/{ts => }/src/app/quest-summary.component.html (100%) create mode 100644 aio/content/examples/component-styles/src/app/quest-summary.component.ts rename aio/content/examples/component-styles/{ts => }/src/index.html (100%) rename aio/content/examples/component-styles/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/component-styles/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/component-styles/ts/src/app/quest-summary.component.ts rename aio/content/examples/{component-styles/ts => dependency-injection}/example-config.json (100%) rename aio/content/examples/dependency-injection/{ts => }/plnkr.json (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/app.component.1.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/app.component.2.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/app.config.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car-creations.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car-factory.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car-injector.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car-no-di.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/car/car.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero-list.component.1.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero-list.component.2.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero-list.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero.service.1.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero.service.2.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero.service.provider.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero.service.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/hero.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/heroes.component.1.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/heroes.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/heroes/mock-heroes.ts (100%) create mode 100644 aio/content/examples/dependency-injection/src/app/injector.component.ts rename aio/content/examples/dependency-injection/{ts => }/src/app/logger.service.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/providers.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/test.component.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/app/user.service.ts (100%) rename aio/content/examples/dependency-injection/{ts => }/src/index.html (100%) rename aio/content/examples/dependency-injection/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/dependency-injection/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/dependency-injection/ts/src/app/injector.component.ts rename aio/content/examples/deployment/{ts => }/.gitignore (100%) rename aio/content/examples/{dependency-injection/ts => deployment}/example-config.json (100%) rename aio/content/examples/deployment/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/deployment/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/deployment/{ts => }/src/app/crisis-list.component.ts (100%) rename aio/content/examples/deployment/{ts => }/src/app/hero-list.component.ts (100%) create mode 100644 aio/content/examples/deployment/src/index.html rename aio/content/examples/deployment/{ts => }/src/main.ts (100%) rename aio/content/examples/deployment/{ts => }/src/systemjs.config.server.js (100%) delete mode 100644 aio/content/examples/deployment/ts/src/index.html rename aio/content/examples/{deployment/ts => displaying-data}/example-config.json (100%) rename aio/content/examples/displaying-data/{ts => }/plnkr.json (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app-ctor.component.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app.component.1.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app.component.2.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app.component.3.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/displaying-data/{ts => }/src/index.html (100%) rename aio/content/examples/displaying-data/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/displaying-data/ts/plnkr.no-link.html rename aio/content/examples/{displaying-data/ts => forms}/example-config.json (100%) delete mode 100644 aio/content/examples/forms/js/plnkr.no-link.html delete mode 100644 aio/content/examples/forms/js/src/app/app.component.js delete mode 100644 aio/content/examples/forms/js/src/app/app.module.js delete mode 100644 aio/content/examples/forms/js/src/app/hero-form.component.js delete mode 100644 aio/content/examples/forms/js/src/app/hero.js delete mode 100644 aio/content/examples/forms/js/src/main.js rename aio/content/examples/forms/{ts => }/plnkr.json (100%) rename aio/content/examples/forms/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/forms/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/forms/{ts => }/src/app/hero-form.component.html (100%) create mode 100644 aio/content/examples/forms/src/app/hero-form.component.ts rename aio/content/examples/forms/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/forms/{ts => }/src/forms.css (100%) rename aio/content/examples/forms/{ts => }/src/index.html (100%) rename aio/content/examples/forms/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/forms/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/forms/ts/src/app/hero-form.component.ts rename aio/content/examples/{forms/ts => hierarchical-dependency-injection}/example-config.json (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/plnkr.json (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/car.components.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/car.services.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/hero-tax-return.component.css (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/hero-tax-return.component.html (100%) create mode 100644 aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/hero-tax-return.service.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/heroes-list.component.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/heroes.service.ts (100%) create mode 100644 aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html create mode 100644 aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/app/villains.service.ts (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/index.html (100%) rename aio/content/examples/hierarchical-dependency-injection/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/hierarchical-dependency-injection/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts delete mode 100644 aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html delete mode 100644 aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts rename aio/content/examples/{hierarchical-dependency-injection/ts => homepage-hello-world}/example-config.json (100%) rename aio/content/examples/homepage-hello-world/{ts => }/plnkr.json (100%) rename aio/content/examples/homepage-hello-world/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/homepage-hello-world/{ts => }/src/app/hello_world.html (100%) create mode 100644 aio/content/examples/homepage-hello-world/src/app/hello_world.ts create mode 100644 aio/content/examples/homepage-hello-world/src/index.1.html rename aio/content/examples/homepage-hello-world/{ts => }/src/index.html (100%) rename aio/content/examples/homepage-hello-world/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/homepage-hello-world/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/homepage-hello-world/ts/src/app/hello_world.ts delete mode 100644 aio/content/examples/homepage-hello-world/ts/src/index.1.html rename aio/content/examples/{homepage-hello-world/ts => homepage-tabs}/example-config.json (100%) rename aio/content/examples/homepage-tabs/{ts => }/plnkr.json (100%) rename aio/content/examples/homepage-tabs/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/homepage-tabs/{ts => }/src/app/di_demo.ts (100%) rename aio/content/examples/homepage-tabs/{ts => }/src/app/ui_tabs.ts (100%) create mode 100644 aio/content/examples/homepage-tabs/src/index.1.html rename aio/content/examples/homepage-tabs/{ts => }/src/index.html (100%) rename aio/content/examples/homepage-tabs/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/homepage-tabs/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/homepage-tabs/ts/src/index.1.html rename aio/content/examples/{homepage-tabs/ts => homepage-todo}/example-config.json (100%) rename aio/content/examples/homepage-todo/{ts => }/plnkr.json (100%) rename aio/content/examples/homepage-todo/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/homepage-todo/{ts => }/src/app/todo.ts (100%) rename aio/content/examples/homepage-todo/{ts => }/src/app/todo_app.ts (100%) rename aio/content/examples/homepage-todo/{ts => }/src/app/todo_form.ts (100%) rename aio/content/examples/homepage-todo/{ts => }/src/app/todo_list.ts (100%) create mode 100644 aio/content/examples/homepage-todo/src/index.1.html rename aio/content/examples/homepage-todo/{ts => }/src/index.html (100%) rename aio/content/examples/homepage-todo/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/homepage-todo/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/homepage-todo/ts/src/index.1.html rename aio/content/examples/{homepage-todo/ts => lifecycle-hooks}/example-config.json (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/plnkr.json (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/after-content.component.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/after-view.component.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/lifecycle-hooks/src/app/app.component.ts rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/counter.component.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/do-check-parent.component.html (100%) create mode 100644 aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/logger.service.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/on-changes-parent.component.html (100%) create mode 100644 aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/peek-a-boo-parent.component.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/peek-a-boo.component.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/spy.component.html (100%) create mode 100644 aio/content/examples/lifecycle-hooks/src/app/spy.component.ts rename aio/content/examples/lifecycle-hooks/{ts => }/src/app/spy.directive.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/index.html (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/main.ts (100%) rename aio/content/examples/lifecycle-hooks/{ts => }/src/sample.css (100%) delete mode 100644 aio/content/examples/lifecycle-hooks/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/lifecycle-hooks/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/lifecycle-hooks/ts/src/app/do-check.component.ts delete mode 100644 aio/content/examples/lifecycle-hooks/ts/src/app/on-changes.component.ts delete mode 100644 aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.ts rename aio/content/examples/{lifecycle-hooks/ts => ngcontainer}/example-config.json (100%) rename aio/content/examples/ngcontainer/{ts => }/plnkr.json (100%) rename aio/content/examples/ngcontainer/{ts => }/src/app/app.component.css (100%) rename aio/content/examples/ngcontainer/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/ngcontainer/src/app/app.component.ts rename aio/content/examples/ngcontainer/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/ngcontainer/{ts => }/src/app/content.component.ts (100%) rename aio/content/examples/ngcontainer/{ts => }/src/app/hero.components.ts (100%) rename aio/content/examples/ngcontainer/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/ngcontainer/{ts => }/src/index.html (100%) rename aio/content/examples/ngcontainer/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/ngcontainer/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/ngcontainer/ts/src/app/app.component.ts rename aio/content/examples/ngmodule/{ts => }/contact.1b.plnkr.json (100%) rename aio/content/examples/ngmodule/{ts => }/contact.2.plnkr.json (100%) rename aio/content/examples/{ngcontainer/ts => ngmodule}/example-config.json (100%) rename aio/content/examples/ngmodule/{ts => }/minimal.0.plnkr.json (100%) rename aio/content/examples/ngmodule/{ts => }/plnkr.json (100%) rename aio/content/examples/ngmodule/{ts => }/pre-shared.3.plnkr.json (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app-routing.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.0.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.1.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.1b.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.2.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.0.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.1b.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.2.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/awesome.pipe.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact-routing.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact-routing.module.ts (100%) create mode 100644 aio/content/examples/ngmodule/src/app/contact/contact.component.3.ts rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.component.css (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.component.html (100%) create mode 100644 aio/content/examples/ngmodule/src/app/contact/contact.component.ts rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.module.2.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/contact.service.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/contact/highlight.directive.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/core/core.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/core/title.component.html (100%) create mode 100644 aio/content/examples/ngmodule/src/app/core/title.component.ts rename aio/content/examples/ngmodule/{ts => }/src/app/core/user.service.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/crisis/crisis-detail.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/crisis/crisis-list.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/crisis/crisis-routing.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/crisis/crisis.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/crisis/crisis.service.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero-detail.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero-list.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero-routing.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero-routing.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero.component.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero.component.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero.module.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/hero.service.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/hero/highlight.directive.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/highlight.directive.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/shared/awesome.pipe.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/shared/highlight.directive.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/shared/shared.module.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/app/title.component.html (100%) create mode 100644 aio/content/examples/ngmodule/src/app/title.component.ts rename aio/content/examples/ngmodule/{ts => }/src/app/user.service.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.0.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.1.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.1b.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.2.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.3.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/index.html (100%) rename aio/content/examples/ngmodule/{ts => }/src/main-static.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.0.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.1.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.1b.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.2.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.3.ts (100%) rename aio/content/examples/ngmodule/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/ngmodule/ts/contact.1b.plnkr.no-link.html delete mode 100644 aio/content/examples/ngmodule/ts/contact.2.plnkr.no-link.html delete mode 100644 aio/content/examples/ngmodule/ts/minimal.0.plnkr.no-link.html delete mode 100644 aio/content/examples/ngmodule/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.no-link.html delete mode 100644 aio/content/examples/ngmodule/ts/src/app/contact/contact.component.3.ts delete mode 100644 aio/content/examples/ngmodule/ts/src/app/contact/contact.component.ts delete mode 100644 aio/content/examples/ngmodule/ts/src/app/core/title.component.ts delete mode 100644 aio/content/examples/ngmodule/ts/src/app/title.component.ts rename aio/content/examples/{ngmodule/ts => pipes}/example-config.json (100%) rename aio/content/examples/pipes/{ts => }/plnkr.json (100%) rename aio/content/examples/pipes/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/pipes/src/app/app.component.ts rename aio/content/examples/pipes/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/exponential-strength.pipe.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/fetch-json.pipe.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/flying-heroes-impure.component.html (100%) rename aio/content/examples/pipes/{ts => }/src/app/flying-heroes.component.html (100%) create mode 100644 aio/content/examples/pipes/src/app/flying-heroes.component.ts rename aio/content/examples/pipes/{ts => }/src/app/flying-heroes.pipe.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/hero-async-message.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/hero-birthday1.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/hero-birthday2.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/hero-list.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/heroes.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/power-boost-calculator.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/app/power-booster.component.ts (100%) rename aio/content/examples/pipes/{ts => }/src/heroes.json (100%) rename aio/content/examples/pipes/{ts => }/src/index.html (100%) rename aio/content/examples/pipes/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/pipes/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/pipes/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/pipes/ts/src/app/flying-heroes.component.ts rename aio/content/examples/quickstart/{ts => }/bs-config.1.json (100%) rename aio/content/examples/{pipes/ts => quickstart}/example-config.json (100%) delete mode 100644 aio/content/examples/quickstart/js/plnkr.no-link.html delete mode 100644 aio/content/examples/quickstart/js/src/app/app.component.js delete mode 100644 aio/content/examples/quickstart/js/src/app/app.module.js delete mode 100644 aio/content/examples/quickstart/js/src/main.js rename aio/content/examples/quickstart/{ts => }/plnkr.json (100%) rename aio/content/examples/quickstart/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/quickstart/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/quickstart/{ts => }/src/index.html (100%) rename aio/content/examples/{cb-component-relative-paths/ts => quickstart}/src/main.ts (100%) rename aio/content/examples/quickstart/{ts => }/src/tsconfig.1.json (100%) delete mode 100644 aio/content/examples/quickstart/ts/plnkr.no-link.html rename aio/content/examples/{quickstart/ts => reactive-forms}/example-config.json (100%) rename aio/content/examples/reactive-forms/{ts => }/final.plnkr.json (100%) rename aio/content/examples/reactive-forms/{ts => }/plnkr.json (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/app.component.1.ts create mode 100644 aio/content/examples/reactive-forms/src/app/app.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/reactive-forms/{ts => }/src/app/data-model.ts (100%) rename aio/content/examples/reactive-forms/{ts => }/src/app/demo.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/demo.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/demo.module.ts (100%) rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-1.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-2.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-3.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-4.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-5.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-6.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-7.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail-8.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-detail.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-detail.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-list.component.1.html (100%) rename aio/content/examples/reactive-forms/{ts => }/src/app/hero-list.component.html (100%) create mode 100644 aio/content/examples/reactive-forms/src/app/hero-list.component.ts rename aio/content/examples/reactive-forms/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/reactive-forms/{ts => }/src/index-final.html (100%) rename aio/content/examples/reactive-forms/{ts => }/src/index.html (100%) rename aio/content/examples/reactive-forms/{ts => }/src/main-final.ts (100%) rename aio/content/examples/reactive-forms/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/reactive-forms/ts/final.plnkr.no-link.html delete mode 100644 aio/content/examples/reactive-forms/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/app.component.1.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/demo.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.ts delete mode 100644 aio/content/examples/reactive-forms/ts/src/app/hero-list.component.ts rename aio/content/examples/{reactive-forms/ts => router}/example-config.json (100%) rename aio/content/examples/router/{ts => }/plnkr.json (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-dashboard.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-dashboard.component.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-dashboard.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-routing.module.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-routing.module.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-routing.module.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin-routing.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/admin.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/manage-crises.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/admin/manage-heroes.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/animations.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.4.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.5.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.6.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.4.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.5.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.0.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.4.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.5.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.6.ts (100%) rename aio/content/examples/router/{ts => }/src/app/app.module.7.ts (100%) create mode 100644 aio/content/examples/router/src/app/app.module.ts rename aio/content/examples/router/{ts => }/src/app/auth-guard.service.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/auth-guard.service.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/auth-guard.service.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/auth-guard.service.4.ts (100%) rename aio/content/examples/router/{ts => }/src/app/auth-guard.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/auth.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/can-deactivate-guard.service.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/can-deactivate-guard.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/compose-message.component.html (100%) create mode 100644 aio/content/examples/router/src/app/compose-message.component.ts rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-home.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-routing.module.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-routing.module.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-routing.module.3.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-routing.module.4.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center-routing.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center.module.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-center.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-detail-resolver.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-detail.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-detail.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-list.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis-list.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-center/crisis.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/crisis-list.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/dialog.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/hero-list.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero-detail.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero-detail.component.2.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero-detail.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero-list.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero-list.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/hero.service.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/heroes-routing.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/heroes/heroes.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/login-routing.module.ts (100%) rename aio/content/examples/router/{ts => }/src/app/login.component.1.ts (100%) rename aio/content/examples/router/{ts => }/src/app/login.component.ts (100%) rename aio/content/examples/router/{ts => }/src/app/not-found.component.ts (100%) create mode 100644 aio/content/examples/router/src/app/selective-preloading-strategy.ts rename aio/content/examples/router/{ts => }/src/index.html (100%) rename aio/content/examples/router/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/router/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/router/ts/src/app/app.module.ts delete mode 100644 aio/content/examples/router/ts/src/app/compose-message.component.ts delete mode 100644 aio/content/examples/router/ts/src/app/selective-preloading-strategy.ts rename aio/content/examples/{router/ts => security}/example-config.json (100%) rename aio/content/examples/security/{ts => }/plnkr.json (100%) rename aio/content/examples/security/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/security/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/security/{ts => }/src/app/bypass-security.component.html (100%) create mode 100644 aio/content/examples/security/src/app/bypass-security.component.ts rename aio/content/examples/security/{ts => }/src/app/inner-html-binding.component.html (100%) create mode 100644 aio/content/examples/security/src/app/inner-html-binding.component.ts rename aio/content/examples/security/{ts => }/src/index.html (100%) rename aio/content/examples/security/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/security/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/security/ts/src/app/bypass-security.component.ts delete mode 100644 aio/content/examples/security/ts/src/app/inner-html-binding.component.ts rename aio/content/examples/{security/ts => server-communication}/example-config.json (100%) rename aio/content/examples/server-communication/{ts => }/plnkr.json (100%) rename aio/content/examples/server-communication/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/default-request-options.service.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/hero-data.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/heroes.json (100%) rename aio/content/examples/server-communication/{ts => }/src/app/toh/hero-list.component.html (100%) create mode 100644 aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts create mode 100644 aio/content/examples/server-communication/src/app/toh/hero-list.component.ts rename aio/content/examples/server-communication/{ts => }/src/app/toh/hero.service.promise.ts (100%) create mode 100644 aio/content/examples/server-communication/src/app/toh/hero.service.ts rename aio/content/examples/server-communication/{ts => }/src/app/toh/hero.ts (100%) create mode 100644 aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts rename aio/content/examples/server-communication/{ts => }/src/app/wiki/wiki.component.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/wiki/wikipedia.service.1.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/app/wiki/wikipedia.service.ts (100%) rename aio/content/examples/server-communication/{ts => }/src/index.html (100%) rename aio/content/examples/server-communication/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/server-communication/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts delete mode 100644 aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.ts delete mode 100644 aio/content/examples/server-communication/ts/src/app/toh/hero.service.ts delete mode 100644 aio/content/examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts rename aio/content/examples/setup/{ts => }/example-config.json (100%) rename aio/content/examples/setup/{ts => }/non-essential-files.txt (100%) rename aio/content/examples/setup/{ts => }/plnkr.json (100%) rename aio/content/examples/setup/{ts => }/quickstart-specs.plnkr.json (100%) rename aio/content/examples/setup/{ts => }/src/app/app.component.spec.ts (100%) rename aio/content/examples/setup/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/setup/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/setup/{ts => }/src/index.html (100%) rename aio/content/examples/setup/{ts => }/src/main.ts (100%) rename aio/content/examples/setup/{ts => }/src/quickstart-specs.html (100%) create mode 100644 aio/content/examples/setup/src/systemjs.config.extras.js delete mode 100644 aio/content/examples/setup/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/setup/ts/quickstart-specs.plnkr.no-link.html rename aio/content/examples/{server-communication/ts => structural-directives}/example-config.json (100%) rename aio/content/examples/structural-directives/{ts => }/plnkr.json (100%) rename aio/content/examples/structural-directives/{ts => }/src/app/app.component.css (100%) create mode 100644 aio/content/examples/structural-directives/src/app/app.component.html create mode 100644 aio/content/examples/structural-directives/src/app/app.component.ts rename aio/content/examples/structural-directives/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/structural-directives/{ts => }/src/app/hero-switch.components.ts (100%) rename aio/content/examples/structural-directives/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/structural-directives/{ts => }/src/app/scrap.txt (100%) create mode 100644 aio/content/examples/structural-directives/src/app/unless.directive.ts rename aio/content/examples/structural-directives/{ts => }/src/index.html (100%) rename aio/content/examples/structural-directives/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/structural-directives/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/structural-directives/ts/src/app/app.component.html delete mode 100644 aio/content/examples/structural-directives/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/structural-directives/ts/src/app/unless.directive.ts rename aio/content/examples/style-guide/{ts => }/.gitignore (100%) rename aio/content/examples/{structural-directives/ts => style-guide}/example-config.json (100%) rename aio/content/examples/style-guide/{ts => }/plnkr.json (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/app.component.css (100%) create mode 100644 aio/content/examples/style-guide/src/01-01/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/01-01/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/hero.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/heroes.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/heroes/shared/mock-heroes.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/01-01/main.ts (100%) create mode 100644 aio/content/examples/style-guide/src/02-05/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/02-05/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-05/main.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/heroes/hero.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/heroes/hero.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/users/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/users/users.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-07/app/users/users.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/shared/input-highlight.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/shared/validate.directive.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/02-08/app/shared/validate.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/core/exception.service.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/core/exception.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-01/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-02/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-02/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-02/app/core/data.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-02/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-02/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/core/hero-collector.service.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/core/hero-collector.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/core/hero.model.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/core/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-03/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/core/toast.service.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/core/toast.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-04/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/03-06/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/03-06/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/exception.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/spinner/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/spinner/spinner.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/spinner/spinner.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/toast/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/toast/toast.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/core/toast/toast.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/heroes/shared/hero.service.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/03-06/app/shared/toast/toast.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-08/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-08/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-08/app/heroes/heroes.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-10/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-10/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-10/app/heroes/heroes.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts create mode 100644 aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-10/app/shared/filter-text/filter-text.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-10/app/shared/init-caps.pipe.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-10/app/shared/shared.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/core.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/logger.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/nav/nav.component.css (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/nav/nav.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/spinner/spinner.component.css (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/spinner/spinner.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-11/app/core/spinner/spinner.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-11/app/heroes/heroes.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-12/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/core.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/logger.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/module-import-guard.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/nav/nav.component.css (100%) rename aio/content/examples/style-guide/{ts => }/src/04-12/app/core/nav/nav.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts rename aio/content/examples/style-guide/{ts => }/src/04-12/app/heroes/heroes.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-02/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-02/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-02/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-02/app/heroes/index.ts (100%) create mode 100644 aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts rename aio/content/examples/style-guide/{ts => }/src/05-02/app/heroes/shared/hero-button/hero-button.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-02/app/heroes/shared/hero-button/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-02/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-02/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-03/app/app.component.avoid.html (100%) rename aio/content/examples/style-guide/{ts => }/src/05-03/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-03/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-03/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-03/app/heroes/index.ts (100%) create mode 100644 aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts rename aio/content/examples/style-guide/{ts => }/src/05-03/app/heroes/shared/hero-button/hero-button.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-03/app/heroes/shared/hero-button/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-03/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-03/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/heroes.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/heroes.component.css (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/heroes.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-04/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/heroes/shared/hero-button/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-12/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/app.component.avoid.html (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-13/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-13/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/shared/hero-button/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/shared/hero-highlight.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-13/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/shared/toast/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/shared/toast/toast.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-14/app/shared/toast/toast.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/hero-list/hero-list.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/hero-list/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-15/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/app.component.avoid.html (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/05-16/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/05-16/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/heroes/hero.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/heroes/hero.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-16/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/hero-list/hero-list.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/hero-list/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/hero/hero.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/hero/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/05-17/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-01/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/06-01/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/06-01/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-01/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-01/app/shared/highlight.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-01/app/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/shared/validator.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/06-03/app/shared/validator2.directive.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/07-01/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/07-01/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-01/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/hero-list/hero-list.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/hero-list/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-03/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/shared/hero-arena.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/shared/hero.model.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/shared/hero.service.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/07-04/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/app.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/app.module.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/heroes/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/heroes/shared/hero-button/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/heroes/shared/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/09-01/app/index.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/style-guide/src/app/app.component.ts rename aio/content/examples/style-guide/{ts => }/src/app/app.routes.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/app/hero-data.ts (100%) rename aio/content/examples/style-guide/{ts => }/src/index.html (100%) rename aio/content/examples/style-guide/{ts => }/src/main.ts (100%) create mode 100644 aio/content/examples/style-guide/src/systemjs.custom.js delete mode 100644 aio/content/examples/style-guide/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/style-guide/ts/src/01-01/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/02-05/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/03-06/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-02/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-03/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-13/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/05-16/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/06-01/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/07-01/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/style-guide/ts/src/systemjs.custom.js rename aio/content/examples/{style-guide/ts => styleguide}/example-config.json (100%) delete mode 100644 aio/content/examples/styleguide/js/spec.js delete mode 100644 aio/content/examples/styleguide/js/src/app.js rename aio/content/examples/styleguide/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/styleguide/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/styleguide/{ts => }/src/index.html (100%) rename aio/content/examples/styleguide/{ts => }/src/main.ts (100%) rename aio/content/examples/{styleguide/ts => template-syntax}/example-config.json (100%) rename aio/content/examples/template-syntax/{ts => }/plnkr.json (100%) rename aio/content/examples/template-syntax/{ts => }/src/app/app.component.css (100%) create mode 100644 aio/content/examples/template-syntax/src/app/app.component.html create mode 100644 aio/content/examples/template-syntax/src/app/app.component.ts rename aio/content/examples/template-syntax/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/template-syntax/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/template-syntax/{ts => }/src/app/click.directive.ts (100%) create mode 100644 aio/content/examples/template-syntax/src/app/hero-detail.component.ts create mode 100644 aio/content/examples/template-syntax/src/app/hero-form.component.html create mode 100644 aio/content/examples/template-syntax/src/app/hero-form.component.ts rename aio/content/examples/template-syntax/{ts => }/src/app/hero-switch.components.ts (100%) create mode 100644 aio/content/examples/template-syntax/src/app/hero.ts rename aio/content/examples/template-syntax/{ts => }/src/app/sizer.component.ts (100%) rename aio/content/examples/template-syntax/{ts => }/src/images/hero.png (100%) rename aio/content/examples/template-syntax/{ts => }/src/images/ng-logo.png (100%) rename aio/content/examples/template-syntax/{ts => }/src/images/villain.png (100%) rename aio/content/examples/template-syntax/{ts => }/src/index.html (100%) rename aio/content/examples/{quickstart/ts => template-syntax}/src/main.ts (100%) delete mode 100644 aio/content/examples/template-syntax/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/template-syntax/ts/src/app/app.component.html delete mode 100644 aio/content/examples/template-syntax/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/template-syntax/ts/src/app/hero-detail.component.ts delete mode 100644 aio/content/examples/template-syntax/ts/src/app/hero-form.component.html delete mode 100644 aio/content/examples/template-syntax/ts/src/app/hero-form.component.ts delete mode 100644 aio/content/examples/template-syntax/ts/src/app/hero.ts delete mode 100644 aio/content/examples/template-syntax/ts/src/template-syntax.css rename aio/content/examples/testing/{ts => }/.gitignore (100%) rename aio/content/examples/testing/{ts => }/1st-specs.plnkr.json (100%) rename aio/content/examples/testing/{ts => }/app-specs.plnkr.json (100%) rename aio/content/examples/testing/{ts => }/bag-specs.plnkr.json (100%) rename aio/content/examples/testing/{ts => }/bag.plnkr.json (100%) rename aio/content/examples/testing/{ts => }/banner-inline-specs.plnkr.json (100%) rename aio/content/examples/testing/{ts => }/banner-specs.plnkr.json (100%) rename aio/content/examples/{template-syntax/ts => testing}/example-config.json (100%) create mode 100644 aio/content/examples/testing/karma-test-shim.js create mode 100644 aio/content/examples/testing/karma.conf.js rename aio/content/examples/testing/{ts => }/plnkr.json (100%) rename aio/content/examples/testing/{ts => }/src/1st-specs.html (100%) rename aio/content/examples/testing/{ts => }/src/app-specs.html (100%) rename aio/content/examples/testing/{ts => }/src/app/1st.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/about.component.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/about.component.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/testing/src/app/app.component.router.spec.ts rename aio/content/examples/testing/{ts => }/src/app/app.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/app.component.ts rename aio/content/examples/testing/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/bag/async-helper.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/bag/bag-external-template.html (100%) rename aio/content/examples/testing/{ts => }/src/app/bag/bag-main.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/bag/bag.no-testbed.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/bag/bag.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/bag/bag.ts rename aio/content/examples/testing/{ts => }/src/app/banner-inline.component.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/banner-inline.component.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/banner.component.css (100%) rename aio/content/examples/testing/{ts => }/src/app/banner.component.detect-changes.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/banner.component.html (100%) rename aio/content/examples/testing/{ts => }/src/app/banner.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/banner.component.ts rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard-hero.component.css (100%) rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard-hero.component.html (100%) rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard-hero.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard.component.css (100%) rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard.component.html (100%) rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard.component.no-testbed.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/dashboard/dashboard.component.ts rename aio/content/examples/testing/{ts => }/src/app/dashboard/dashboard.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-detail.component.css (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-detail.component.html (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-detail.component.no-testbed.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-detail.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/hero/hero-detail.component.ts rename aio/content/examples/testing/{ts => }/src/app/hero/hero-detail.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-list.component.css (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-list.component.html (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero-list.component.spec.ts (100%) create mode 100644 aio/content/examples/testing/src/app/hero/hero-list.component.ts rename aio/content/examples/testing/{ts => }/src/app/hero/hero-routing.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/hero/hero.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/hero.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/hero.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/hero.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/http-hero.service.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/http-hero.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/index.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/test-heroes.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/testing/fake-hero.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/testing/index.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/model/user.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/highlight.directive.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/highlight.directive.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/shared.module.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/title-case.pipe.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/title-case.pipe.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/twain.component.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/twain.component.timer.spec.ts.no-work (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/twain.component.timer.ts.no-work (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/twain.component.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/shared/twain.service.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/welcome.component.spec.ts (100%) rename aio/content/examples/testing/{ts => }/src/app/welcome.component.ts (100%) rename aio/content/examples/testing/{ts => }/src/bag-specs.html (100%) rename aio/content/examples/testing/{ts => }/src/bag.html (100%) rename aio/content/examples/testing/{ts => }/src/banner-inline-specs.html (100%) rename aio/content/examples/testing/{ts => }/src/banner-specs.html (100%) rename aio/content/examples/testing/{ts => }/src/browser-test-shim.js (100%) rename aio/content/examples/testing/{ts => }/src/index.html (100%) rename aio/content/examples/testing/{ts => }/src/main.ts (100%) create mode 100644 aio/content/examples/testing/src/systemjs.config.extras.js rename aio/content/examples/testing/{ts => }/src/testing/index.ts (100%) rename aio/content/examples/testing/{ts => }/src/testing/jasmine-matchers.d.ts (100%) rename aio/content/examples/testing/{ts => }/src/testing/jasmine-matchers.ts (100%) rename aio/content/examples/testing/{ts => }/src/testing/router-stubs.ts (100%) delete mode 100644 aio/content/examples/testing/ts/1st-specs.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/app-specs.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/bag-specs.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/bag.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/banner-inline-specs.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/banner-specs.plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/testing/ts/src/app/app.component.router.spec.ts delete mode 100644 aio/content/examples/testing/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/testing/ts/src/app/bag/bag.ts delete mode 100644 aio/content/examples/testing/ts/src/app/banner.component.ts delete mode 100644 aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts delete mode 100644 aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.ts delete mode 100644 aio/content/examples/testing/ts/src/app/hero/hero-detail.component.ts delete mode 100644 aio/content/examples/testing/ts/src/app/hero/hero-list.component.ts create mode 100644 aio/content/examples/toh-1/app/app.component.1.ts rename aio/content/examples/{testing/ts => toh-1}/example-config.json (100%) create mode 100644 aio/content/examples/toh-1/plnkr.json create mode 100644 aio/content/examples/toh-1/src/app/app.component.ts create mode 100644 aio/content/examples/toh-1/src/app/app.module.ts rename aio/content/examples/toh-1/{ts => }/src/index.html (100%) rename aio/content/examples/toh-1/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/toh-1/ts-snippets/app.component.snippets.pt1.ts delete mode 100644 aio/content/examples/toh-1/ts/plnkr.json delete mode 100644 aio/content/examples/toh-1/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-1/ts/src/app/app.component.ts create mode 100644 aio/content/examples/toh-2/app/app.component.1.html rename aio/content/examples/{toh-1/ts => toh-2}/example-config.json (100%) create mode 100644 aio/content/examples/toh-2/plnkr.json rename aio/content/examples/toh-2/{ts => }/src/app/app.component.ts (100%) rename aio/content/examples/{toh-1/ts => toh-2}/src/app/app.module.ts (100%) rename aio/content/examples/toh-2/{ts => }/src/index.html (100%) rename aio/content/examples/toh-2/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/toh-2/ts-snippets/app.component.snippets.pt2.ts delete mode 100644 aio/content/examples/toh-2/ts/plnkr.json delete mode 100644 aio/content/examples/toh-2/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-2/ts/src/app/app.module.ts create mode 100644 aio/content/examples/toh-3/app/app.component.1.html create mode 100644 aio/content/examples/toh-3/app/hero-detail.component.1.ts rename aio/content/examples/{toh-2/ts => toh-3}/example-config.json (100%) create mode 100644 aio/content/examples/toh-3/plnkr.json create mode 100644 aio/content/examples/toh-3/src/app/app.component.ts create mode 100644 aio/content/examples/toh-3/src/app/app.module.ts create mode 100644 aio/content/examples/toh-3/src/app/hero-detail.component.ts rename aio/content/examples/toh-3/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/toh-3/{ts => }/src/index.html (100%) rename aio/content/examples/toh-3/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/toh-3/ts/plnkr.json delete mode 100644 aio/content/examples/toh-3/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-3/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/toh-3/ts/src/app/app.module.ts delete mode 100644 aio/content/examples/toh-3/ts/src/app/hero-detail.component.ts rename aio/content/examples/{toh-3/ts => toh-4}/example-config.json (100%) rename aio/content/examples/toh-4/{ts => }/plnkr.json (100%) create mode 100644 aio/content/examples/toh-4/src/app/app.component.1.ts create mode 100644 aio/content/examples/toh-4/src/app/app.component.ts rename aio/content/examples/toh-4/{ts => }/src/app/app.module.ts (100%) create mode 100644 aio/content/examples/toh-4/src/app/hero-detail.component.ts rename aio/content/examples/toh-4/{ts => }/src/app/hero.service.1.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/app/hero.service.2.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/app/mock-heroes.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/index.html (100%) rename aio/content/examples/toh-4/{ts => }/src/main.1.ts (100%) rename aio/content/examples/toh-4/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/toh-4/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-4/ts/src/app/app.component.1.ts delete mode 100644 aio/content/examples/toh-4/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/toh-4/ts/src/app/hero-detail.component.ts rename aio/content/examples/{toh-4/ts => toh-5}/example-config.json (100%) rename aio/content/examples/toh-5/{ts => }/plnkr.json (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app.component.1.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app.component.css (100%) create mode 100644 aio/content/examples/toh-5/src/app/app.component.ts rename aio/content/examples/toh-5/{ts => }/src/app/app.module.1.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app.module.2.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app.module.3.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/dashboard.component.1.html (100%) rename aio/content/examples/toh-5/{ts => }/src/app/dashboard.component.1.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/dashboard.component.css (100%) rename aio/content/examples/toh-5/{ts => }/src/app/dashboard.component.html (100%) create mode 100644 aio/content/examples/toh-5/src/app/dashboard.component.ts create mode 100644 aio/content/examples/toh-5/src/app/hero-detail.component.1.ts rename aio/content/examples/toh-5/{ts => }/src/app/hero-detail.component.css (100%) rename aio/content/examples/toh-5/{ts => }/src/app/hero-detail.component.html (100%) create mode 100644 aio/content/examples/toh-5/src/app/hero-detail.component.ts rename aio/content/examples/toh-5/{ts => }/src/app/hero.service.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/app/hero.ts (100%) create mode 100644 aio/content/examples/toh-5/src/app/heroes.component.css rename aio/content/examples/toh-5/{ts => }/src/app/heroes.component.html (100%) create mode 100644 aio/content/examples/toh-5/src/app/heroes.component.ts rename aio/content/examples/toh-5/{ts => }/src/app/mock-heroes.ts (100%) rename aio/content/examples/toh-5/{ts => }/src/index.html (100%) rename aio/content/examples/toh-5/{ts => }/src/main.ts (100%) delete mode 100644 aio/content/examples/toh-5/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-5/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/toh-5/ts/src/app/dashboard.component.ts delete mode 100644 aio/content/examples/toh-5/ts/src/app/hero-detail.component.1.ts delete mode 100644 aio/content/examples/toh-5/ts/src/app/hero-detail.component.ts delete mode 100644 aio/content/examples/toh-5/ts/src/app/heroes.component.css delete mode 100644 aio/content/examples/toh-5/ts/src/app/heroes.component.ts rename aio/content/examples/toh-6/{ts => }/.gitignore (100%) create mode 100644 aio/content/examples/toh-6/aot/index.html rename aio/content/examples/{cli-quickstart/ts/src => toh-6/aot}/styles.css (100%) rename aio/content/examples/toh-6/{ts => }/bs-config.aot.json (100%) rename aio/content/examples/{toh-5/ts => toh-6}/example-config.json (100%) rename aio/content/examples/toh-6/{ts => }/plnkr.json (100%) rename aio/content/examples/toh-6/{ts => }/rollup-config.js (100%) rename aio/content/examples/toh-6/{ts => }/src/app/app-routing.module.ts (100%) rename aio/content/examples/toh-6/{ts => }/src/app/app.component.css (100%) create mode 100644 aio/content/examples/toh-6/src/app/app.component.ts rename aio/content/examples/toh-6/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/toh-6/{ts => }/src/app/dashboard.component.css (100%) rename aio/content/examples/toh-6/{ts => }/src/app/dashboard.component.html (100%) create mode 100644 aio/content/examples/toh-6/src/app/dashboard.component.ts rename aio/content/examples/toh-6/{ts => }/src/app/hero-detail.component.css (100%) rename aio/content/examples/toh-6/{ts => }/src/app/hero-detail.component.html (100%) create mode 100644 aio/content/examples/toh-6/src/app/hero-detail.component.ts create mode 100644 aio/content/examples/toh-6/src/app/hero-search.component.css rename aio/content/examples/toh-6/{ts => }/src/app/hero-search.component.html (100%) create mode 100644 aio/content/examples/toh-6/src/app/hero-search.component.ts rename aio/content/examples/toh-6/{ts => }/src/app/hero-search.service.ts (100%) create mode 100644 aio/content/examples/toh-6/src/app/hero.service.ts rename aio/content/examples/toh-6/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/toh-6/{ts => }/src/app/heroes.component.css (100%) rename aio/content/examples/toh-6/{ts => }/src/app/heroes.component.html (100%) create mode 100644 aio/content/examples/toh-6/src/app/heroes.component.ts rename aio/content/examples/toh-6/{ts => }/src/app/in-memory-data.service.ts (100%) rename aio/content/examples/toh-6/{ts => }/src/index.html (100%) rename aio/content/examples/toh-6/{ts => }/src/main-aot.ts (100%) rename aio/content/examples/toh-6/{ts => }/src/main.ts (100%) create mode 100644 aio/content/examples/toh-6/src/tsconfig.1.json delete mode 100644 aio/content/examples/toh-6/ts/aot/index.html delete mode 100644 aio/content/examples/toh-6/ts/aot/styles.css delete mode 100644 aio/content/examples/toh-6/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/toh-6/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/toh-6/ts/src/app/dashboard.component.ts delete mode 100644 aio/content/examples/toh-6/ts/src/app/hero-detail.component.ts delete mode 100644 aio/content/examples/toh-6/ts/src/app/hero-search.component.css delete mode 100644 aio/content/examples/toh-6/ts/src/app/hero-search.component.ts delete mode 100644 aio/content/examples/toh-6/ts/src/app/hero.service.ts delete mode 100644 aio/content/examples/toh-6/ts/src/app/heroes.component.ts delete mode 100644 aio/content/examples/toh-6/ts/src/tsconfig.1.json delete mode 100644 aio/content/examples/toh-6/ts/tsconfig-aot.json.annotated rename aio/content/examples/toh-6/{ts => }/tsconfig-aot.json (100%) rename aio/content/examples/upgrade-module/{ts => }/.gitignore (100%) rename aio/content/examples/{toh-6/ts => upgrade-module}/example-config.json (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-providers/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-providers/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-providers/heroes.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-transclusion/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-transclusion/container.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/a-to-ajs-transclusion/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-a-hybrid-bootstrap/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-bootstrap/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-ng-app/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-projection/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-projection/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-projection/main.controller.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-providers/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-providers/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/ajs-to-a-providers/heroes.service.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/divide-routes/app.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/divide-routes/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/divide-routes/hero.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/divide-routes/main.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/downgrade-io/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/downgrade-io/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/downgrade-io/main.controller.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/downgrade-static/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/downgrade-static/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/hero-detail.directive.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/hero.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-io/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-io/container.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-io/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-static/app.module.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-static/container.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/upgrade-static/hero-detail.component.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/app/villain.ts (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-a-to-ajs-providers.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-a-to-ajs-transclusion.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-ajs-a-hybrid-bootstrap.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-ajs-to-a-projection.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-ajs-to-a-providers.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-bootstrap.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-divide-routes.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-downgrade-io.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-downgrade-static.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-ng-app.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-upgrade-io.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/index-upgrade-static.html (100%) rename aio/content/examples/upgrade-module/{ts => }/src/systemjs.config.1.js (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/.gitignore (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/app.animations.css (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/app.animations.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/app.config.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/app.css (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/app.module.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/checkmark/checkmark.filter.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/checkmark/checkmark.filter.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/core.module.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/phone/phone.module.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/phone/phone.service.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/core/phone/phone.service.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/.gitkeep (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/dell-streak-7.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/dell-streak-7.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/dell-streak-7.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/dell-streak-7.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/dell-streak-7.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-atrix-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-atrix-4g.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-atrix-4g.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-atrix-4g.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.5.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/motorola-xoom.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/nexus-s.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/nexus-s.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/nexus-s.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/img/phones/nexus-s.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/index.html (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-detail/phone-detail.component.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-detail/phone-detail.component.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-detail/phone-detail.module.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-detail/phone-detail.template.html (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-list/phone-list.component.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-list/phone-list.component.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-list/phone-list.module.ts (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phone-list/phone-list.template.html (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/dell-streak-7.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/motorola-atrix-4g.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/motorola-xoom-with-wi-fi.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/motorola-xoom.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/nexus-s.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/app/phones/phones.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/example-config.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/karma.conf.ajs.js (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/run-unit-tests.sh (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/tsconfig.ajs.json (100%) rename aio/content/examples/upgrade-phonecat-1-typescript/{ts => }/tsconfig.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/.gitignore (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/aot/index.html (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/ajs-upgraded-providers.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.animations.css (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.animations.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.config.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.css (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.module.ajs.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/app.module.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/checkmark/checkmark.pipe.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/checkmark/checkmark.pipe.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/core.module.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/phone/phone.module.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/phone/phone.service.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/core/phone/phone.service.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/.gitkeep (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-streak-7.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-streak-7.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-streak-7.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-streak-7.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-streak-7.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/dell-venue.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/droid-2-global-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/droid-pro-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/lg-axis.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-atrix-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-atrix-4g.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-atrix-4g.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-atrix-4g.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-bravo-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-charm-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-defy-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.5.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/motorola-xoom.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/nexus-s.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/nexus-s.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/nexus-s.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/nexus-s.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/samsung-galaxy-tab.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/samsung-gem.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/samsung-transform.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/sanyo-zio.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/t-mobile-g2.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/img/phones/t-mobile-mytouch-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/main-aot.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/main.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-detail/phone-detail.component.ajs.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-detail/phone-detail.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-detail/phone-detail.module.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-detail/phone-detail.template.html (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-list/phone-list.component.ajs.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-list/phone-list.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-list/phone-list.module.ts (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phone-list/phone-list.template.html (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/dell-streak-7.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/motorola-atrix-4g.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/motorola-xoom-with-wi-fi.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/motorola-xoom.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/nexus-s.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/app/phones/phones.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/bs-config.aot.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/copy-dist-files.js (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/example-config.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/index.html (100%) create mode 100644 aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/karma.conf.ajs.js (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/package.ajs.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/rollup-config.js (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/run-unit-tests.sh (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/systemjs.config.1.js (100%) delete mode 100644 aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts delete mode 100644 aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/tsconfig-aot.json (100%) rename aio/content/examples/upgrade-phonecat-2-hybrid/{ts => }/tsconfig.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/.gitignore (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/aot/index.html (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/ajs-upgraded-providers.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app-routing.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.animations.css (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.animations.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.component.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.config.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.css (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.module.ajs.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/app.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/checkmark/checkmark.pipe.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/checkmark/checkmark.pipe.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/core.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/phone/phone.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/phone/phone.service.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/core/phone/phone.service.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/.gitkeep (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-streak-7.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-streak-7.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-streak-7.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-streak-7.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-streak-7.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/dell-venue.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/droid-2-global-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/droid-pro-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/lg-axis.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-atrix-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-atrix-4g.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-atrix-4g.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-atrix-4g.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-bravo-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-charm-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-defy-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.5.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/motorola-xoom.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/nexus-s.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/nexus-s.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/nexus-s.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/nexus-s.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/samsung-galaxy-tab.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/samsung-gem.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/samsung-transform.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/sanyo-zio.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/t-mobile-g2.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/img/phones/t-mobile-mytouch-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/main-aot.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/main.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-detail/phone-detail.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-detail/phone-detail.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-detail/phone-detail.template.html (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-list/phone-list.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-list/phone-list.module.ts (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phone-list/phone-list.template.html (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/dell-streak-7.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/motorola-atrix-4g.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/motorola-xoom-with-wi-fi.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/motorola-xoom.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/nexus-s.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/app/phones/phones.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/bs-config.aot.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/copy-dist-files.js (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/example-config.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/index.html (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/rollup-config.js (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/systemjs.config.1.js (100%) delete mode 100644 aio/content/examples/upgrade-phonecat-3-router/ts/aot/bs-config.json delete mode 100644 aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts delete mode 100644 aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/tsconfig-aot.json (100%) rename aio/content/examples/upgrade-phonecat-3-router/{ts => }/tsconfig.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/app-routing.module.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/app.component.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/app.css (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/app.module.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/core/checkmark/checkmark.pipe.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/core/checkmark/checkmark.pipe.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/core/phone/phone.service.spec.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/core/phone/phone.service.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/.gitkeep (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-streak-7.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-streak-7.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-streak-7.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-streak-7.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-streak-7.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/dell-venue.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/droid-2-global-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/droid-pro-by-motorola.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/lg-axis.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-atrix-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-atrix-4g.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-atrix-4g.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-atrix-4g.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-bravo-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-charm-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-defy-with-motoblur.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.4.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom-with-wi-fi.5.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/motorola-xoom.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/nexus-s.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/nexus-s.1.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/nexus-s.2.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/nexus-s.3.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/samsung-galaxy-tab.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/samsung-gem.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/samsung-transform.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/sanyo-zio.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/t-mobile-g2.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/img/phones/t-mobile-mytouch-4g.0.jpg (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/main.ts (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phone-detail/phone-detail.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phone-detail/phone-detail.template.html (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phone-list/phone-list.component.spec.ts (100%) create mode 100644 aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phone-list/phone-list.template.html (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/dell-streak-7.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/motorola-atrix-4g.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/motorola-xoom-with-wi-fi.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/motorola-xoom.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/nexus-s.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/app/phones/phones.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/example-config.json (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/index.html (100%) rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/run-unit-tests.sh (100%) create mode 100644 aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js delete mode 100644 aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts delete mode 100644 aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts rename aio/content/examples/upgrade-phonecat-4-final/{ts => }/tsconfig.json (100%) rename aio/content/examples/{upgrade-module/ts => user-input}/example-config.json (100%) rename aio/content/examples/user-input/{ts => }/plnkr.json (100%) rename aio/content/examples/user-input/{ts => }/src/app/app.component.html (100%) create mode 100644 aio/content/examples/user-input/src/app/app.component.ts rename aio/content/examples/user-input/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/user-input/{ts => }/src/app/click-me.component.ts (100%) rename aio/content/examples/user-input/{ts => }/src/app/click-me2.component.ts (100%) rename aio/content/examples/user-input/{ts => }/src/app/keyup.components.ts (100%) rename aio/content/examples/user-input/{ts => }/src/app/little-tour.component.ts (100%) rename aio/content/examples/user-input/{ts => }/src/app/loop-back.component.ts (100%) rename aio/content/examples/user-input/{ts => }/src/index.html (100%) rename aio/content/examples/{template-syntax/ts => user-input}/src/main.ts (100%) rename aio/content/examples/user-input/{ts => }/src/user-input-styles.css (100%) delete mode 100644 aio/content/examples/user-input/ts/example-config.json delete mode 100644 aio/content/examples/user-input/ts/plnkr.no-link.html delete mode 100644 aio/content/examples/user-input/ts/src/app/app.component.ts delete mode 100644 aio/content/examples/user-input/ts/src/main.ts rename aio/content/examples/webpack/{ts => }/.gitignore (100%) rename aio/content/examples/webpack/{ts => }/config/helpers.js (100%) rename aio/content/examples/webpack/{ts => }/config/karma-test-shim.js (100%) create mode 100644 aio/content/examples/webpack/config/karma.conf.js create mode 100644 aio/content/examples/webpack/config/webpack.common.js rename aio/content/examples/webpack/{ts => }/config/webpack.dev.js (100%) rename aio/content/examples/webpack/{ts => }/config/webpack.prod.js (100%) create mode 100644 aio/content/examples/webpack/config/webpack.test.js rename aio/content/examples/webpack/{ts => }/example-config.json (100%) rename aio/content/examples/webpack/{ts => }/karma.webpack.conf.js (100%) create mode 100644 aio/content/examples/webpack/package.webpack.json rename aio/content/examples/webpack/{ts => }/src/app/app.component.css (100%) create mode 100644 aio/content/examples/webpack/src/app/app.component.html rename aio/content/examples/webpack/{ts => }/src/app/app.component.spec.ts (100%) create mode 100644 aio/content/examples/webpack/src/app/app.component.ts rename aio/content/examples/webpack/{ts => }/src/app/app.module.ts (100%) rename aio/content/examples/webpack/{ts/public => src/assets}/css/styles.css (100%) rename aio/content/examples/webpack/{ts/public => src/assets}/images/angular.png (100%) rename aio/content/examples/webpack/{ts => }/src/index.html (100%) rename aio/content/examples/webpack/{ts => }/src/main.ts (100%) rename aio/content/examples/webpack/{ts => }/src/polyfills.ts (100%) rename aio/content/examples/webpack/{ts => src}/tsconfig.1.json (100%) rename aio/content/examples/webpack/{ts => }/src/vendor.ts (100%) delete mode 100644 aio/content/examples/webpack/ts-snippets/webpack.config.snippets.ts delete mode 100644 aio/content/examples/webpack/ts/config/karma.conf.js delete mode 100644 aio/content/examples/webpack/ts/config/webpack.common.js delete mode 100644 aio/content/examples/webpack/ts/config/webpack.test.js delete mode 100644 aio/content/examples/webpack/ts/package.webpack.json delete mode 100644 aio/content/examples/webpack/ts/src/app/app.component.html delete mode 100644 aio/content/examples/webpack/ts/src/app/app.component.ts rename aio/content/examples/webpack/{ts => }/webpack.config.js (100%) create mode 100644 aio/content/examples/webpack/zipper.json create mode 100644 aio/content/glossary.md delete mode 100644 aio/content/guide/component-relative-paths.md create mode 100644 aio/content/guide/ngmodule-faq.md create mode 100644 aio/content/guide/pipes.md create mode 100644 aio/content/guide/setup-systemjs-anatomy.md create mode 100644 aio/content/guide/testing.md create mode 100644 aio/content/guide/typescript-configuration.md create mode 100644 aio/content/help-new.md create mode 100644 aio/content/help.md create mode 100644 aio/content/index.md create mode 100644 aio/content/quickstart.md create mode 100644 aio/content/resources.md create mode 100644 aio/content/styleguide.md mode change 100755 => 100644 aio/src/assets/images/backgrounds/browser-background-template.png mode change 100755 => 100644 aio/src/assets/images/backgrounds/lon-paper.png mode change 100755 => 100644 aio/src/assets/images/backgrounds/sf-paper.png mode change 100755 => 100644 aio/src/assets/images/backgrounds/super-hero-large.png mode change 100755 => 100644 aio/src/assets/images/bios/alex-eagle.jpg mode change 100755 => 100644 aio/src/assets/images/bios/alex-rickabaugh.jpg mode change 100755 => 100644 aio/src/assets/images/bios/alex-wolfe.jpg mode change 100755 => 100644 aio/src/assets/images/bios/ali.jpg mode change 100755 => 100644 aio/src/assets/images/bios/angular-gde-bio-placeholder.png mode change 100755 => 100644 aio/src/assets/images/bios/brad-green.jpg mode change 100755 => 100644 aio/src/assets/images/bios/brandonroberts.jpg mode change 100755 => 100644 aio/src/assets/images/bios/chuckj.jpg mode change 100755 => 100644 aio/src/assets/images/bios/crisbeto.jpg mode change 100755 => 100644 aio/src/assets/images/bios/david-east.jpg mode change 100755 => 100644 aio/src/assets/images/bios/deborah.jpg create mode 100644 aio/src/assets/images/bios/devversion.jpg mode change 100755 => 100644 aio/src/assets/images/bios/eladbezalel.jpg mode change 100755 => 100644 aio/src/assets/images/bios/eric.jpg mode change 100755 => 100644 aio/src/assets/images/bios/fatima.jpg mode change 100755 => 100644 aio/src/assets/images/bios/filipe-silva.jpg mode change 100755 => 100644 aio/src/assets/images/bios/gkalpak.jpg mode change 100755 => 100644 aio/src/assets/images/bios/hansl.jpg mode change 100755 => 100644 aio/src/assets/images/bios/igor-minar.jpg create mode 100644 aio/src/assets/images/bios/jasonaden.jpg mode change 100755 => 100644 aio/src/assets/images/bios/jbedard.jpg mode change 100755 => 100644 aio/src/assets/images/bios/jeff-cross.jpg mode change 100755 => 100644 aio/src/assets/images/bios/jeffwhelpley.jpg mode change 100755 => 100644 aio/src/assets/images/bios/jelbourn.jpg mode change 100755 => 100644 aio/src/assets/images/bios/jesus-rodriguez.jpg mode change 100755 => 100644 aio/src/assets/images/bios/john-papa.jpg mode change 100755 => 100644 aio/src/assets/images/bios/juleskremer.jpg mode change 100755 => 100644 aio/src/assets/images/bios/julie-ralph.jpg mode change 100755 => 100644 aio/src/assets/images/bios/kapunahelewong.jpg mode change 100755 => 100644 aio/src/assets/images/bios/kara-erickson.jpg mode change 100755 => 100644 aio/src/assets/images/bios/kathy.jpg mode change 100755 => 100644 aio/src/assets/images/bios/lucas.jpg mode change 100755 => 100644 aio/src/assets/images/bios/marclaval.jpg mode change 100755 => 100644 aio/src/assets/images/bios/marcy.jpg mode change 100755 => 100644 aio/src/assets/images/bios/martin-probst.jpg mode change 100755 => 100644 aio/src/assets/images/bios/martinstaffa.jpg mode change 100755 => 100644 aio/src/assets/images/bios/matias.jpg mode change 100755 => 100644 aio/src/assets/images/bios/max-sills.jpg mode change 100755 => 100644 aio/src/assets/images/bios/michal.jpg mode change 100755 => 100644 aio/src/assets/images/bios/misko.jpg create mode 100644 aio/src/assets/images/bios/mmalerba.jpg mode change 100755 => 100644 aio/src/assets/images/bios/naomi.jpg mode change 100755 => 100644 aio/src/assets/images/bios/pascalprecht.jpg mode change 100755 => 100644 aio/src/assets/images/bios/patrick-stapleton.jpg mode change 100755 => 100644 aio/src/assets/images/bios/pawel.jpg mode change 100755 => 100644 aio/src/assets/images/bios/pete.jpg mode change 100755 => 100644 aio/src/assets/images/bios/rado.jpg mode change 100755 => 100644 aio/src/assets/images/bios/ralph.jpg mode change 100755 => 100644 aio/src/assets/images/bios/rex.jpg mode change 100755 => 100644 aio/src/assets/images/bios/rmesserle.jpg mode change 100755 => 100644 aio/src/assets/images/bios/rob-wormald.jpg mode change 100755 => 100644 aio/src/assets/images/bios/ryan.jpg mode change 100755 => 100644 aio/src/assets/images/bios/scott.jpg mode change 100755 => 100644 aio/src/assets/images/bios/shahar.jpg mode change 100755 => 100644 aio/src/assets/images/bios/shannon.jpg mode change 100755 => 100644 aio/src/assets/images/bios/shield-bio-placeholder.png mode change 100755 => 100644 aio/src/assets/images/bios/stephenfluin.jpg mode change 100755 => 100644 aio/src/assets/images/bios/teropa.jpg mode change 100755 => 100644 aio/src/assets/images/bios/thomas.jpg mode change 100755 => 100644 aio/src/assets/images/bios/tobias.jpg mode change 100755 => 100644 aio/src/assets/images/bios/tonyc.jpg mode change 100755 => 100644 aio/src/assets/images/bios/topherfangio.jpg mode change 100755 => 100644 aio/src/assets/images/bios/torgeirhelgevold.jpg mode change 100755 => 100644 aio/src/assets/images/bios/victor.jpg mode change 100755 => 100644 aio/src/assets/images/bios/vikram.jpg mode change 100755 => 100644 aio/src/assets/images/bios/wardbell.jpg create mode 100644 aio/src/assets/images/bios/xiaofei.jpg mode change 100755 => 100644 aio/src/assets/images/cardboard/Ionic_Logo.png mode change 100755 => 100644 aio/src/assets/images/cardboard/UC_Logo_Black.png mode change 100755 => 100644 aio/src/assets/images/cardboard/cardboard.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/aot-compiler/toh6-bundle.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/bidirectional-service.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/child-to-parent.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/contentchildren.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/countdown-timer-anim.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/parent-to-child-on-changes.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/parent-to-child.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/setter.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/component-communication/unrelated-service.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/alex.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/alice.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/date-logger-entry.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/hero-bio-and-content.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/hero-bio-contact-no-host.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/hero-bios-and-contacts.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/hero-bios.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/hero-of-month.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/highlight.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/logged-in-user.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/minimal-logger-intellisense.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/dependency-injection/sorted-heroes.png create mode 100644 aio/src/assets/images/cookbooks/dynamic-component-loader/ads.gif mode change 100755 => 100644 aio/src/assets/images/cookbooks/dynamic-form/dynamic-form.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/form-validation/plunker.png mode change 100755 => 100644 aio/src/assets/images/cookbooks/set-document-title/set-title-anim.gif mode change 100755 => 100644 aio/src/assets/images/examples/displaying-data-example1.png mode change 100755 => 100644 aio/src/assets/images/examples/setup-example1.png mode change 100755 => 100644 aio/src/assets/images/examples/user-input-example1.png mode change 100755 => 100644 aio/src/assets/images/favicons/apple-touch-icon-144x144.png mode change 100755 => 100644 aio/src/assets/images/favicons/apple-touch-icon-152x152.png mode change 100755 => 100644 aio/src/assets/images/favicons/apple-touch-icon-180x180.png mode change 100755 => 100644 aio/src/assets/images/favicons/apple-touch-icon-precomposed.png mode change 100755 => 100644 aio/src/assets/images/favicons/apple-touch-icon.png mode change 100755 => 100644 aio/src/assets/images/favicons/favicon-16x16.png mode change 100755 => 100644 aio/src/assets/images/favicons/favicon-194x194.png mode change 100755 => 100644 aio/src/assets/images/favicons/favicon-32x32.png mode change 100755 => 100644 aio/src/assets/images/favicons/favicon-96x96.png mode change 100755 => 100644 aio/src/assets/images/favicons/favicon.ico create mode 100644 aio/src/assets/images/favicons/manifest.json mode change 100755 => 100644 aio/src/assets/images/home/joyful-development.gif mode change 100755 => 100644 aio/src/assets/images/home/joyful-development.jpg mode change 100755 => 100644 aio/src/assets/images/home/joyful-development.png mode change 100755 => 100644 aio/src/assets/images/home/joyful-development.svg mode change 100755 => 100644 aio/src/assets/images/home/loved-by-millions.png mode change 100755 => 100644 aio/src/assets/images/home/loved-by-millions.svg mode change 100755 => 100644 aio/src/assets/images/home/responsive-framework.png mode change 100755 => 100644 aio/src/assets/images/home/responsive-framework.svg mode change 100755 => 100644 aio/src/assets/images/home/speed-performance.svg mode change 100755 => 100644 aio/src/assets/images/icons/clippy.svg mode change 100755 => 100644 aio/src/assets/images/icons/favicon.ico mode change 100755 => 100644 aio/src/assets/images/icons/ic_keyboard_arrow_down_black_24px.svg mode change 100755 => 100644 aio/src/assets/images/logos/anglebrackets/anglebrackets.png mode change 100755 => 100644 aio/src/assets/images/logos/anglebrackets/devintersection.png create mode 100644 aio/src/assets/images/logos/angular2/angular-banner-logo-grey.png mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular-logo-banner.png mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular.png mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular.svg mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular_solidBlack.png mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular_solidBlack.svg mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular_whiteTransparent.png mode change 100755 => 100644 aio/src/assets/images/logos/angular2/angular_whiteTransparent.svg mode change 100755 => 100644 aio/src/assets/images/logos/angular2/shield-with-beta.png mode change 100755 => 100644 aio/src/assets/images/logos/angularconnect/angularconnect-logo-med.png mode change 100755 => 100644 aio/src/assets/images/logos/angularconnect/angularconnect-logo-small.png mode change 100755 => 100644 aio/src/assets/images/logos/angularconnect/angularconnect-logo-text.png mode change 100755 => 100644 aio/src/assets/images/logos/angularconnect/angularconnect-logo.png create mode 100644 aio/src/assets/images/logos/angularjs/AngularJS-Shield.svg create mode 100644 aio/src/assets/images/logos/google/gdd-logo.png mode change 100755 => 100644 aio/src/assets/images/logos/html5/html5.png mode change 100755 => 100644 aio/src/assets/images/logos/html5/html5.svg mode change 100755 => 100644 aio/src/assets/images/logos/html5/html5@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/128.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/128@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/16.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/16@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/22.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/22@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/22svg.svg mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/256.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/256@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/32.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/32@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/48.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/48@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/shield-large.png mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/shield-large.svg mode change 100755 => 100644 aio/src/assets/images/logos/inverse/shield/shield-large@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/license/open-source.png mode change 100755 => 100644 aio/src/assets/images/logos/license/open-source@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/ng-conf/ng-conf-shield.png mode change 100755 => 100644 aio/src/assets/images/logos/ng-conf/ng-conf-shield@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/ng-europe/ng-europe-logo.png mode change 100755 => 100644 aio/src/assets/images/logos/standard/angular-gde-logo@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/standard/logo-nav.png mode change 100755 => 100644 aio/src/assets/images/logos/standard/logo-nav@2x.png mode change 100755 => 100644 aio/src/assets/images/logos/standard/shield-large.png mode change 100755 => 100644 aio/src/assets/images/logos/standard/shield-large.svg mode change 100755 => 100644 aio/src/assets/images/logos/standard/shield-large@2x.png mode change 100755 => 100644 aio/src/assets/images/plunker/click-to-run.png mode change 100755 => 100644 aio/src/assets/images/plunker/placeholder.png mode change 100755 => 100644 aio/src/assets/images/support/angular-gde-logo.png mode change 100755 => 100644 aio/src/assets/images/support/github-logo.png mode change 100755 => 100644 aio/src/assets/images/support/gitter-logo.png mode change 100755 => 100644 aio/src/assets/images/support/reddit-logo.png mode change 100755 => 100644 aio/src/assets/images/support/stackoverflow-logo.png diff --git a/aio/content/cli-quickstart.md b/aio/content/cli-quickstart.md new file mode 100644 index 00000000000..7905501ced7 --- /dev/null +++ b/aio/content/cli-quickstart.md @@ -0,0 +1,810 @@ +@description +Good tools make application development quicker and easier to maintain than +if you did everything by hand. + +The [**Angular CLI**](https://cli.angular.io/) is a **_command line interface_** tool +that can create a project, add files, and perform a variety of ongoing development tasks such +as testing, bundling, and deployment. + +The goal in this guide is to build and run a simple Angular +application in TypeScript, using the Angular CLI +while adhering to the [Style Guide](guide/style-guide) recommendations that +benefit _every_ Angular project. + +By the end of the chapter, you'll have a basic understanding of development with the CLI +and a foundation for both these documentation samples and for real world applications. + +You'll pursue these ends in the following high-level steps: + +1. [Set up](cli-quickstart#devenv) the development environment. +2. [Create](cli-quickstart#create-proj) a new project and skeleton application. +3. [Serve](cli-quickstart#serve) the application. +4. [Edit](cli-quickstart#first-component) the application. + +And you can also download the example. + + +

+ Step 1. Set up the Development Environment +

+ +You need to set up your development environment before you can do anything. + +Install **[Node.js® and npm](https://nodejs.org/en/download/)** +if they are not already on your machine. + +~~~ {.l-sub-section} + +**Verify that you are running at least node `6.9.x` and npm `3.x.x`** +by running `node -v` and `npm -v` in a terminal/console window. +Older versions produce errors, but newer versions are fine. + +~~~ + +Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globally. + + + npm install -g @angular/cli + + + + + +

+ Step 2. Create a new project +

+ +Open a terminal window. +Generate a new project and skeleton application by running the following commands: + + + ng new my-app + + + + + +~~~ {.l-sub-section} + +Patience please. +It takes time to set up a new project, most of it spent installing npm packages. + + +~~~ + + + +

+ Step 3: Serve the application +

+ +Go to the project directory and launch the server. + + + cd my-app + ng serve --open + + + +The `ng serve` command launches the server, watches your files, +and rebuilds the app as you make changes to those files. + +Using the `--open` (or just `-o`) option will automatically open your browser +on `http://localhost:4200/`. + +Your app greets you with a message: + +
+ The app works! +
+ + + +

+ Step 4: Edit your first Angular component +

+ +The CLI created the first Angular component for you. +This is the _root component_ and it is named `app-root`. +You can find it in `./src/app/app.component.ts`. +Open the component file and change the `title` property from _app works!_ to _My First Angular App_: + + + + + + +The browser reloads automatically with the revised title. That's nice, but it could look better. + +Open `src/app/app.component.css` and give the component some style. + + + + + + + +
+ Output of QuickStart app +
+ +Looking good! + +## What's next? +That's about all you'd expect to do in a "Hello, World" app. + +You're ready to take the [Tour of Heroes Tutorial](tutorial) and build +a small application that demonstrates the great things you can build with Angular. + +Or you can stick around a bit longer to learn about the files in your brand new project. + +## Project file review + +An Angular CLI project is the foundation for both quick experiments and enterprise solutions. + +The first file you should check out is `README.md`. +It has some basic information on how to use CLI commands. +Whenever you want to know more about how Angular CLI works make sure to visit +[the Angular CLI repository](https://github.com/angular/angular-cli) and +[Wiki](https://github.com/angular/angular-cli/wiki). + +Some of the generated files might be unfamiliar to you. + +### The `src` folder +Your app lives in the `src` folder. +All Angular components, templates, styles, images, and anything else your app needs go here. +Any files outside of this folder are meant to support building your app. + + + + + src + + app + + app.component.css + + + + + app.component.html + + + + + app.component.spec.ts + + + + + app.component.ts + + + + + app.module.ts + + + + + + + + assets + + .gitkeep + + + + + + + + environments + + environment.prod.ts + + + + + environment.ts + + + + + + + + favicon.ico + + + + + index.html + + + + + main.ts + + + + + polyfills.ts + + + + + styles.css + + + + + test.ts + + + + + tsconfig.app.json + + + + + tsconfig.spec.json + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -430,9 +450,11 @@ The following are some of the key AngularJS built-in directives and their equiva
+ File + + Purpose +
+ app/app.component.{ts,html,css,spec.ts} + + Defines the `AppComponent` along with an HTML template, CSS stylesheet, and a unit test. + It is the **root** component of what will become a tree of nested components + as the application evolves. +
+ app/app.module.ts + + Defines `AppModule`, the [root module](guide/appmodule) that tells Angular how to assemble the application. + Right now it declares only the `AppComponent`. + Soon there will be more components to declare. +
+ assets/* + + A folder where you can put images and anything else to be copied wholesale + when you build your application. +
+ environments/* + + This folder contains one file for each of your destination environments, + each exporting simple configuration variables to use in your application. + The files are replaced on-the-fly when you build your app. + You might use a different API endpoint for development than you do for production + or maybe different analytics tokens. + You might even use some mock services. + Either way, the CLI has you covered. +
+ favicon.ico + + Every site wants to look good on the bookmark bar. + Get started with your very own Angular icon. +
+ index.html + + The main HTML page that is served when someone visits your site. + Most of the time you'll never need to edit it. + The CLI automatically adds all `js` and `css` files when building your app so you + never need to add any ` - - - - - - - - - - - - - - - - - -

External H1 Title for E2E test

- - -
    -
  • External list for E2E test
  • -
- - - - - -"> \ No newline at end of file diff --git a/aio/content/examples/animations/ts/src/app/app.module.ts b/aio/content/examples/animations/ts/src/app/app.module.ts deleted file mode 100644 index 15500342362..00000000000 --- a/aio/content/examples/animations/ts/src/app/app.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -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'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - HeroTeamBuilderComponent, - HeroListBasicComponent, - HeroListInlineStylesComponent, - HeroListCombinedTransitionsComponent, - HeroListTwowayComponent, - HeroListEnterLeaveComponent, - HeroListEnterLeaveStatesComponent, - HeroListAutoComponent, - HeroListTimingsComponent, - HeroListMultistepComponent, - HeroListGroupsComponent - ], - bootstrap: [ HeroTeamBuilderComponent ] -}) -export class AppModule { } diff --git a/aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts deleted file mode 100644 index df7280d3eab..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-auto.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'hero-list-auto', - // #docregion template - template: ` -
    -
  • - {{hero.name}} -
  • -
- `, - // #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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts deleted file mode 100644 index a40f9ade943..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-basic.component.ts +++ /dev/null @@ -1,69 +0,0 @@ -// #docplaster -// #docregion -// #docregion imports -import { - Component, - Input, - trigger, - state, - style, - transition, - animate -} from '@angular/core'; -// #enddocregion imports - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts deleted file mode 100644 index b40a0c3514f..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-combined-transitions.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input, - trigger, - state, - style, - transition, - animate -} from '@angular/core'; -// #enddocregion imports - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts deleted file mode 100644 index a88e08f2511..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts deleted file mode 100644 index 05944c84f1e..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-enter-leave.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts deleted file mode 100644 index dda696eca2f..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-groups.component.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition, - group -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts deleted file mode 100644 index 19e6fb8cce6..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-inline-styles.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input, - trigger, - style, - transition, - animate -} from '@angular/core'; -// #enddocregion imports - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts deleted file mode 100644 index 25c10cc5334..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-multistep.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition, - keyframes, - AnimationTransitionEvent -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; - - animationStarted(event: AnimationTransitionEvent) { - console.warn('Animation started: ', event); - } - - animationDone(event: AnimationTransitionEvent) { - console.warn('Animation done: ', event); - } -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts deleted file mode 100644 index eed6f90004a..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-timings.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { - Component, - Input, - trigger, - state, - style, - animate, - transition -} from '@angular/core'; - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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 10 ease-out', style({ - opacity: 0, - transform: 'translateX(100%)' - })) - ]) - ]) - ] - // #enddocregion animationdef -}) -export class HeroListTimingsComponent { - @Input() heroes: Heroes; -} diff --git a/aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts b/aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts deleted file mode 100644 index c9ec43f9043..00000000000 --- a/aio/content/examples/animations/ts/src/app/hero-list-twoway.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -// #docregion -// #docregion imports -import { - Component, - Input, - trigger, - state, - style, - transition, - animate -} from '@angular/core'; -// #enddocregion imports - -import { Heroes } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: '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: Heroes; -} diff --git a/aio/content/examples/architecture/ts/example-config.json b/aio/content/examples/architecture/example-config.json similarity index 100% rename from aio/content/examples/architecture/ts/example-config.json rename to aio/content/examples/architecture/example-config.json diff --git a/aio/content/examples/architecture/ts/plnkr.json b/aio/content/examples/architecture/plnkr.json similarity index 100% rename from aio/content/examples/architecture/ts/plnkr.json rename to aio/content/examples/architecture/plnkr.json diff --git a/aio/content/examples/architecture/ts/src/app/app.component.ts b/aio/content/examples/architecture/src/app/app.component.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/app.component.ts rename to aio/content/examples/architecture/src/app/app.component.ts diff --git a/aio/content/examples/architecture/ts/src/app/app.module.ts b/aio/content/examples/architecture/src/app/app.module.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/app.module.ts rename to aio/content/examples/architecture/src/app/app.module.ts diff --git a/aio/content/examples/architecture/ts/src/app/backend.service.ts b/aio/content/examples/architecture/src/app/backend.service.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/backend.service.ts rename to aio/content/examples/architecture/src/app/backend.service.ts diff --git a/aio/content/examples/architecture/ts/src/app/hero-detail.component.html b/aio/content/examples/architecture/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/architecture/ts/src/app/hero-detail.component.html rename to aio/content/examples/architecture/src/app/hero-detail.component.html diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.ts b/aio/content/examples/architecture/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..b75d6dd225a --- /dev/null +++ b/aio/content/examples/architecture/src/app/hero-detail.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core'; + +import { Hero } from './hero'; + +@Component({ + selector: 'hero-detail', + templateUrl: './hero-detail.component.html' +}) +export class HeroDetailComponent { + @Input() hero: Hero; +} diff --git a/aio/content/examples/architecture/ts/src/app/hero-list.component.1.html b/aio/content/examples/architecture/src/app/hero-list.component.1.html similarity index 100% rename from aio/content/examples/architecture/ts/src/app/hero-list.component.1.html rename to aio/content/examples/architecture/src/app/hero-list.component.1.html diff --git a/aio/content/examples/architecture/ts/src/app/hero-list.component.html b/aio/content/examples/architecture/src/app/hero-list.component.html similarity index 100% rename from aio/content/examples/architecture/ts/src/app/hero-list.component.html rename to aio/content/examples/architecture/src/app/hero-list.component.html diff --git a/aio/content/examples/architecture/src/app/hero-list.component.ts b/aio/content/examples/architecture/src/app/hero-list.component.ts new file mode 100644 index 00000000000..a3d372f00ba --- /dev/null +++ b/aio/content/examples/architecture/src/app/hero-list.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +// #docregion metadata, providers +@Component({ + selector: '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/aio/content/examples/architecture/ts/src/app/hero.service.ts b/aio/content/examples/architecture/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/hero.service.ts rename to aio/content/examples/architecture/src/app/hero.service.ts diff --git a/aio/content/examples/architecture/ts/src/app/hero.ts b/aio/content/examples/architecture/src/app/hero.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/hero.ts rename to aio/content/examples/architecture/src/app/hero.ts diff --git a/aio/content/examples/architecture/ts/src/app/logger.service.ts b/aio/content/examples/architecture/src/app/logger.service.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/logger.service.ts rename to aio/content/examples/architecture/src/app/logger.service.ts diff --git a/aio/content/examples/architecture/ts/src/app/mini-app.ts b/aio/content/examples/architecture/src/app/mini-app.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/mini-app.ts rename to aio/content/examples/architecture/src/app/mini-app.ts diff --git a/aio/content/examples/architecture/ts/src/app/sales-tax.component.ts b/aio/content/examples/architecture/src/app/sales-tax.component.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/sales-tax.component.ts rename to aio/content/examples/architecture/src/app/sales-tax.component.ts diff --git a/aio/content/examples/architecture/ts/src/app/sales-tax.service.ts b/aio/content/examples/architecture/src/app/sales-tax.service.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/sales-tax.service.ts rename to aio/content/examples/architecture/src/app/sales-tax.service.ts diff --git a/aio/content/examples/architecture/ts/src/app/tax-rate.service.ts b/aio/content/examples/architecture/src/app/tax-rate.service.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/app/tax-rate.service.ts rename to aio/content/examples/architecture/src/app/tax-rate.service.ts diff --git a/aio/content/examples/architecture/ts/src/index.html b/aio/content/examples/architecture/src/index.html similarity index 100% rename from aio/content/examples/architecture/ts/src/index.html rename to aio/content/examples/architecture/src/index.html diff --git a/aio/content/examples/architecture/ts/src/main.ts b/aio/content/examples/architecture/src/main.ts similarity index 100% rename from aio/content/examples/architecture/ts/src/main.ts rename to aio/content/examples/architecture/src/main.ts diff --git a/aio/content/examples/architecture/ts/plnkr.no-link.html b/aio/content/examples/architecture/ts/plnkr.no-link.html deleted file mode 100644 index cf21ec2759e..00000000000 --- a/aio/content/examples/architecture/ts/plnkr.no-link.html +++ /dev/null @@ -1,481 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/architecture/ts/src/app/hero-detail.component.ts b/aio/content/examples/architecture/ts/src/app/hero-detail.component.ts deleted file mode 100644 index 44a702ad498..00000000000 --- a/aio/content/examples/architecture/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, Input } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - moduleId: module.id, - selector: 'hero-detail', - templateUrl: './hero-detail.component.html' -}) -export class HeroDetailComponent { - @Input() hero: Hero; -} diff --git a/aio/content/examples/architecture/ts/src/app/hero-list.component.ts b/aio/content/examples/architecture/ts/src/app/hero-list.component.ts deleted file mode 100644 index f72f57eef42..00000000000 --- a/aio/content/examples/architecture/ts/src/app/hero-list.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -// #docregion metadata, providers -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/attribute-directives/e2e-spec.ts b/aio/content/examples/attribute-directives/e2e-spec.ts index 25a0cf258e3..79425d7923b 100644 --- a/aio/content/examples/attribute-directives/e2e-spec.ts +++ b/aio/content/examples/attribute-directives/e2e-spec.ts @@ -15,7 +15,7 @@ describe('Attribute directives', function () { }); it('should be able to select green highlight', function () { - let highlightedEle = element(by.cssContainingText('p', 'Highlight me')); + let highlightedEle = element(by.cssContainingText('p', 'Highlight me!')); let lightGreen = 'rgba(144, 238, 144, 1)'; expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); diff --git a/aio/content/examples/attribute-directives/ts/example-config.json b/aio/content/examples/attribute-directives/example-config.json similarity index 100% rename from aio/content/examples/attribute-directives/ts/example-config.json rename to aio/content/examples/attribute-directives/example-config.json diff --git a/aio/content/examples/attribute-directives/ts/plnkr.json b/aio/content/examples/attribute-directives/plnkr.json similarity index 100% rename from aio/content/examples/attribute-directives/ts/plnkr.json rename to aio/content/examples/attribute-directives/plnkr.json diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.html b/aio/content/examples/attribute-directives/src/app/app.component.1.html new file mode 100644 index 00000000000..9505bc9dffd --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/app.component.1.html @@ -0,0 +1,14 @@ + +

My First Attribute Directive

+ +

Highlight me!

+ + + +

Highlighted in yellow

+

Highlighted in orange

+ + + +

Highlighted with parent component's color

+ diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.ts b/aio/content/examples/attribute-directives/src/app/app.component.1.ts new file mode 100644 index 00000000000..d9b98ef3fde --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/app.component.1.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.1.html' +}) +// #docregion class +export class AppComponent { + color = 'yellow'; +} diff --git a/aio/content/examples/attribute-directives/src/app/app.component.html b/aio/content/examples/attribute-directives/src/app/app.component.html new file mode 100644 index 00000000000..3adb52bc1e1 --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/app.component.html @@ -0,0 +1,24 @@ + +

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/aio/content/examples/attribute-directives/src/app/app.component.ts b/aio/content/examples/attribute-directives/src/app/app.component.ts new file mode 100644 index 00000000000..693918d8d6d --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/app.component.ts @@ -0,0 +1,11 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +// #docregion class +export class AppComponent { + color: string; +} diff --git a/aio/content/examples/attribute-directives/ts/src/app/app.module.ts b/aio/content/examples/attribute-directives/src/app/app.module.ts similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/app/app.module.ts rename to aio/content/examples/attribute-directives/src/app/app.module.ts diff --git a/aio/content/examples/attribute-directives/ts/src/app/dummy.module.1.ts b/aio/content/examples/attribute-directives/src/app/dummy.module.1.ts similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/app/dummy.module.1.ts rename to aio/content/examples/attribute-directives/src/app/dummy.module.1.ts diff --git a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.1.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/app/highlight.directive.1.ts rename to aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts new file mode 100644 index 00000000000..4696132f641 --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts @@ -0,0 +1,41 @@ +/* tslint:disable:no-unused-variable member-ordering */ +// #docplaster +// #docregion +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; + +@Directive({ + selector: '[myHighlight]' +}) +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() myHighlight: string; + // #enddocregion color-2 +} + diff --git a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/app/highlight.directive.3.ts rename to aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts new file mode 100644 index 00000000000..97b14970132 --- /dev/null +++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts @@ -0,0 +1,34 @@ +/* tslint:disable:member-ordering */ +// #docregion imports, +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; +// #enddocregion imports + +@Directive({ + selector: '[myHighlight]' +}) +export class HighlightDirective { + + constructor(private el: ElementRef) { } + + // #docregion defaultColor + @Input() defaultColor: string; + // #enddocregion defaultColor + + // #docregion color + @Input('myHighlight') 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/aio/content/examples/attribute-directives/ts/src/index.html b/aio/content/examples/attribute-directives/src/index.html similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/index.html rename to aio/content/examples/attribute-directives/src/index.html diff --git a/aio/content/examples/attribute-directives/ts/src/main.ts b/aio/content/examples/attribute-directives/src/main.ts similarity index 100% rename from aio/content/examples/attribute-directives/ts/src/main.ts rename to aio/content/examples/attribute-directives/src/main.ts diff --git a/aio/content/examples/attribute-directives/ts/plnkr.no-link.html b/aio/content/examples/attribute-directives/ts/plnkr.no-link.html deleted file mode 100644 index b4e52a09a3b..00000000000 --- a/aio/content/examples/attribute-directives/ts/plnkr.no-link.html +++ /dev/null @@ -1,253 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.html b/aio/content/examples/attribute-directives/ts/src/app/app.component.1.html deleted file mode 100644 index 9f8c13f0778..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.html +++ /dev/null @@ -1,20 +0,0 @@ - -

My First Attribute Directive

- -

Highlight me!

- - - - -

Highlighted in yellow

-

Highlighted in orange

- - - - -

Highlighted with parent component's color

- - - -

I am green with envy!

- diff --git a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts b/aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts deleted file mode 100644 index d65cb578506..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/app.component.1.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.1.html' -}) -// #docregion class -export class AppComponent { - color = 'yellow'; -} -// #enddocregion class diff --git a/aio/content/examples/attribute-directives/ts/src/app/app.component.html b/aio/content/examples/attribute-directives/ts/src/app/app.component.html deleted file mode 100644 index 0ef41b925df..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/app.component.html +++ /dev/null @@ -1,27 +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/aio/content/examples/attribute-directives/ts/src/app/app.component.ts b/aio/content/examples/attribute-directives/ts/src/app/app.component.ts deleted file mode 100644 index a88e8e49a37..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/app.component.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -// #docregion class -export class AppComponent { - color: string; -} -// #enddocregion class -// #enddocregion diff --git a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts deleted file mode 100644 index 156fabaaa87..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.2.ts +++ /dev/null @@ -1,45 +0,0 @@ -/* tslint:disable:no-unused-variable member-ordering */ -// #docplaster -// #docregion -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; - -@Directive({ - selector: '[myHighlight]' -}) -export class HighlightDirective { - // #docregion ctor - constructor(private el: ElementRef) { } - // #enddocregion ctor - // #enddocregion - - // #docregion color - @Input() highlightColor: string; - // #enddocregion color - - // #docregion color-2 - @Input() myHighlight: string; - // #enddocregion color-2 - - // #docregion - - // #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 - -} -// #enddocregion diff --git a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts deleted file mode 100644 index 68c9f0cc738..00000000000 --- a/aio/content/examples/attribute-directives/ts/src/app/highlight.directive.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* tslint:disable:member-ordering */ -// #docplaster -// #docregion -// #docregion imports -import { Directive, ElementRef, HostListener, Input } from '@angular/core'; -// #enddocregion imports - -@Directive({ - selector: '[myHighlight]' -}) -export class HighlightDirective { - - constructor(private el: ElementRef) { } - - // #docregion defaultColor - @Input() defaultColor: string; - // #enddocregion defaultColor - - // #docregion color - @Input('myHighlight') 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/aio/content/examples/cb-ajs-quick-reference/ts/example-config.json b/aio/content/examples/cb-ajs-quick-reference/example-config.json similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/example-config.json rename to aio/content/examples/cb-ajs-quick-reference/example-config.json diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.json b/aio/content/examples/cb-ajs-quick-reference/plnkr.json similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/plnkr.json rename to aio/content/examples/cb-ajs-quick-reference/plnkr.json diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/app-routing.module.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/app-routing.module.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.css b/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.css similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.css rename to aio/content/examples/cb-ajs-quick-reference/src/app/app.component.css diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.html b/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.html similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.html rename to aio/content/examples/cb-ajs-quick-reference/src/app/app.component.html diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts new file mode 100644 index 00000000000..e1b71e37dc7 --- /dev/null +++ b/aio/content/examples/cb-ajs-quick-reference/src/app/app.component.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; + +import { MovieService } from './movie.service'; +import { IMovie } from './movie'; + +@Component({ + selector: 'my-app', + 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: string = '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/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.1.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/app.module.1.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.module.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/app.module.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/date.pipe.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/date.pipe.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/date.pipe.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css b/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.css similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.css rename to aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.css diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html b/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.html similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.html rename to aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.html diff --git a/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts new file mode 100644 index 00000000000..b0b57f018cf --- /dev/null +++ b/aio/content/examples/cb-ajs-quick-reference/src/app/movie-list.component.ts @@ -0,0 +1,42 @@ +/* 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: '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: boolean = 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/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/movie.service.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.service.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/movie.service.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.ts b/aio/content/examples/cb-ajs-quick-reference/src/app/movie.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie.ts rename to aio/content/examples/cb-ajs-quick-reference/src/app/movie.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/hero.png b/aio/content/examples/cb-ajs-quick-reference/src/images/hero.png similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/images/hero.png rename to aio/content/examples/cb-ajs-quick-reference/src/images/hero.png diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png b/aio/content/examples/cb-ajs-quick-reference/src/images/ng-logo.png similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/images/ng-logo.png rename to aio/content/examples/cb-ajs-quick-reference/src/images/ng-logo.png diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/images/villain.png b/aio/content/examples/cb-ajs-quick-reference/src/images/villain.png similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/images/villain.png rename to aio/content/examples/cb-ajs-quick-reference/src/images/villain.png diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/index.html b/aio/content/examples/cb-ajs-quick-reference/src/index.html similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/index.html rename to aio/content/examples/cb-ajs-quick-reference/src/index.html diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/main.ts b/aio/content/examples/cb-ajs-quick-reference/src/main.ts similarity index 100% rename from aio/content/examples/cb-ajs-quick-reference/ts/src/main.ts rename to aio/content/examples/cb-ajs-quick-reference/src/main.ts diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html b/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html deleted file mode 100644 index 69d78ced3da..00000000000 --- a/aio/content/examples/cb-ajs-quick-reference/ts/plnkr.no-link.html +++ /dev/null @@ -1,597 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts deleted file mode 100644 index 4d708509a1d..00000000000 --- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/app.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from '@angular/core'; - -import { MovieService } from './movie.service'; -import { IMovie } from './movie'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - 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: string = '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/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts b/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts deleted file mode 100644 index c194bc50bdf..00000000000 --- a/aio/content/examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts +++ /dev/null @@ -1,43 +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({ - moduleId: module.id, - selector: '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: boolean = 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/aio/content/examples/cb-aot-compiler/ts/.gitignore b/aio/content/examples/cb-aot-compiler/.gitignore similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/.gitignore rename to aio/content/examples/cb-aot-compiler/.gitignore diff --git a/aio/content/examples/cb-aot-compiler/e2e-spec.ts b/aio/content/examples/cb-aot-compiler/e2e-spec.ts index ab914906041..4744f06e50e 100644 --- a/aio/content/examples/cb-aot-compiler/e2e-spec.ts +++ b/aio/content/examples/cb-aot-compiler/e2e-spec.ts @@ -9,7 +9,7 @@ describe('AOT Compilation', function () { browser.get(''); }); - it('should load page and click button', function (done) { + it('should load page and click button', function (done: any) { let headingSelector = element.all(by.css('h1')).get(0); expect(headingSelector.getText()).toEqual('Hello Angular'); diff --git a/aio/content/examples/cb-aot-compiler/ts/example-config.json b/aio/content/examples/cb-aot-compiler/example-config.json similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/example-config.json rename to aio/content/examples/cb-aot-compiler/example-config.json diff --git a/aio/content/examples/cb-aot-compiler/ts/rollup-config.js b/aio/content/examples/cb-aot-compiler/rollup-config.js similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/rollup-config.js rename to aio/content/examples/cb-aot-compiler/rollup-config.js diff --git a/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.html b/aio/content/examples/cb-aot-compiler/src/app/app.component.html similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/src/app/app.component.html rename to aio/content/examples/cb-aot-compiler/src/app/app.component.html diff --git a/aio/content/examples/cb-aot-compiler/src/app/app.component.ts b/aio/content/examples/cb-aot-compiler/src/app/app.component.ts new file mode 100644 index 00000000000..879f7f663cf --- /dev/null +++ b/aio/content/examples/cb-aot-compiler/src/app/app.component.ts @@ -0,0 +1,15 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { + showHeading = true; + heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado']; + + toggleHeading() { + this.showHeading = !this.showHeading; + } +} diff --git a/aio/content/examples/cb-aot-compiler/ts/src/app/app.module.ts b/aio/content/examples/cb-aot-compiler/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/src/app/app.module.ts rename to aio/content/examples/cb-aot-compiler/src/app/app.module.ts diff --git a/aio/content/examples/cb-aot-compiler/ts/src/index-jit.html b/aio/content/examples/cb-aot-compiler/src/index-jit.html similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/src/index-jit.html rename to aio/content/examples/cb-aot-compiler/src/index-jit.html diff --git a/aio/content/examples/cb-aot-compiler/src/index.html b/aio/content/examples/cb-aot-compiler/src/index.html new file mode 100644 index 00000000000..09e5f0de0ed --- /dev/null +++ b/aio/content/examples/cb-aot-compiler/src/index.html @@ -0,0 +1,20 @@ + + + + + Ahead of time compilation + + + + + + + + + + Loading... + + + + + diff --git a/aio/content/examples/cb-aot-compiler/ts/src/main-jit.ts b/aio/content/examples/cb-aot-compiler/src/main-jit.ts similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/src/main-jit.ts rename to aio/content/examples/cb-aot-compiler/src/main-jit.ts diff --git a/aio/content/examples/cb-aot-compiler/ts/src/main.ts b/aio/content/examples/cb-aot-compiler/src/main.ts similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/src/main.ts rename to aio/content/examples/cb-aot-compiler/src/main.ts diff --git a/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts b/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts deleted file mode 100644 index 680c07d6825..00000000000 --- a/aio/content/examples/cb-aot-compiler/ts/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { - showHeading = true; - heroes = ['Magneta', 'Bombasto', 'Magma', 'Tornado']; - - toggleHeading() { - this.showHeading = !this.showHeading; - } -} diff --git a/aio/content/examples/cb-aot-compiler/ts/src/index.html b/aio/content/examples/cb-aot-compiler/ts/src/index.html deleted file mode 100644 index 9016f3cbe1a..00000000000 --- a/aio/content/examples/cb-aot-compiler/ts/src/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - Ahead of time compilation - - - - - - - - - - - - - Loading... - - - - - diff --git a/aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json.annotated b/aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json.annotated deleted file mode 100644 index ada86a323e6..00000000000 --- a/aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json.annotated +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -{ - "compilerOptions": { - "target": "es5", - "module": "es2015", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true - }, - - "files": [ - "src/app/app.module.ts", - "src/main.ts" - ], - - "angularCompilerOptions": { - "genDir": "aot", - "skipMetadataEmit" : true - } -} -// #enddocregion diff --git a/aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json b/aio/content/examples/cb-aot-compiler/tsconfig-aot.json similarity index 100% rename from aio/content/examples/cb-aot-compiler/ts/tsconfig-aot.json rename to aio/content/examples/cb-aot-compiler/tsconfig-aot.json diff --git a/aio/content/examples/cb-component-communication/ts/.gitignore b/aio/content/examples/cb-component-communication/.gitignore similarity index 100% rename from aio/content/examples/cb-component-communication/ts/.gitignore rename to aio/content/examples/cb-component-communication/.gitignore diff --git a/aio/content/examples/cb-component-communication/ts/example-config.json b/aio/content/examples/cb-component-communication/example-config.json similarity index 100% rename from aio/content/examples/cb-component-communication/ts/example-config.json rename to aio/content/examples/cb-component-communication/example-config.json diff --git a/aio/content/examples/cb-component-communication/ts/plnkr.json b/aio/content/examples/cb-component-communication/plnkr.json similarity index 100% rename from aio/content/examples/cb-component-communication/ts/plnkr.json rename to aio/content/examples/cb-component-communication/plnkr.json diff --git a/aio/content/examples/cb-component-communication/ts/src/app/app.component.html b/aio/content/examples/cb-component-communication/src/app/app.component.html similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/app.component.html rename to aio/content/examples/cb-component-communication/src/app/app.component.html diff --git a/aio/content/examples/cb-component-communication/src/app/app.component.ts b/aio/content/examples/cb-component-communication/src/app/app.component.ts new file mode 100644 index 00000000000..7556beb1ff0 --- /dev/null +++ b/aio/content/examples/cb-component-communication/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/cb-component-communication/ts/src/app/app.module.ts b/aio/content/examples/cb-component-communication/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/app.module.ts rename to aio/content/examples/cb-component-communication/src/app/app.module.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/astronaut.component.ts b/aio/content/examples/cb-component-communication/src/app/astronaut.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/astronaut.component.ts rename to aio/content/examples/cb-component-communication/src/app/astronaut.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/countdown-parent.component.ts b/aio/content/examples/cb-component-communication/src/app/countdown-parent.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/countdown-parent.component.ts rename to aio/content/examples/cb-component-communication/src/app/countdown-parent.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/countdown-timer.component.ts b/aio/content/examples/cb-component-communication/src/app/countdown-timer.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/countdown-timer.component.ts rename to aio/content/examples/cb-component-communication/src/app/countdown-timer.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/hero-child.component.ts b/aio/content/examples/cb-component-communication/src/app/hero-child.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/hero-child.component.ts rename to aio/content/examples/cb-component-communication/src/app/hero-child.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/hero-parent.component.ts b/aio/content/examples/cb-component-communication/src/app/hero-parent.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/hero-parent.component.ts rename to aio/content/examples/cb-component-communication/src/app/hero-parent.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/hero.ts b/aio/content/examples/cb-component-communication/src/app/hero.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/hero.ts rename to aio/content/examples/cb-component-communication/src/app/hero.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/mission.service.ts b/aio/content/examples/cb-component-communication/src/app/mission.service.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/mission.service.ts rename to aio/content/examples/cb-component-communication/src/app/mission.service.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/missioncontrol.component.ts b/aio/content/examples/cb-component-communication/src/app/missioncontrol.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/missioncontrol.component.ts rename to aio/content/examples/cb-component-communication/src/app/missioncontrol.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/name-child.component.ts b/aio/content/examples/cb-component-communication/src/app/name-child.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/name-child.component.ts rename to aio/content/examples/cb-component-communication/src/app/name-child.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/name-parent.component.ts b/aio/content/examples/cb-component-communication/src/app/name-parent.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/name-parent.component.ts rename to aio/content/examples/cb-component-communication/src/app/name-parent.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/version-child.component.ts b/aio/content/examples/cb-component-communication/src/app/version-child.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/version-child.component.ts rename to aio/content/examples/cb-component-communication/src/app/version-child.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/version-parent.component.ts b/aio/content/examples/cb-component-communication/src/app/version-parent.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/version-parent.component.ts rename to aio/content/examples/cb-component-communication/src/app/version-parent.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/voter.component.ts b/aio/content/examples/cb-component-communication/src/app/voter.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/voter.component.ts rename to aio/content/examples/cb-component-communication/src/app/voter.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/app/votetaker.component.ts b/aio/content/examples/cb-component-communication/src/app/votetaker.component.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/app/votetaker.component.ts rename to aio/content/examples/cb-component-communication/src/app/votetaker.component.ts diff --git a/aio/content/examples/cb-component-communication/ts/src/demo.css b/aio/content/examples/cb-component-communication/src/demo.css similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/demo.css rename to aio/content/examples/cb-component-communication/src/demo.css diff --git a/aio/content/examples/cb-component-communication/ts/src/index.html b/aio/content/examples/cb-component-communication/src/index.html similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/index.html rename to aio/content/examples/cb-component-communication/src/index.html diff --git a/aio/content/examples/cb-component-communication/ts/src/main.ts b/aio/content/examples/cb-component-communication/src/main.ts similarity index 100% rename from aio/content/examples/cb-component-communication/ts/src/main.ts rename to aio/content/examples/cb-component-communication/src/main.ts diff --git a/aio/content/examples/cb-component-communication/ts/plnkr.no-link.html b/aio/content/examples/cb-component-communication/ts/plnkr.no-link.html deleted file mode 100644 index 82eab6a1f3d..00000000000 --- a/aio/content/examples/cb-component-communication/ts/plnkr.no-link.html +++ /dev/null @@ -1,757 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-component-communication/ts/src/app/app.component.ts b/aio/content/examples/cb-component-communication/ts/src/app/app.component.ts deleted file mode 100644 index ab2d3d9c332..00000000000 --- a/aio/content/examples/cb-component-communication/ts/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/cb-component-relative-paths/e2e-spec.ts b/aio/content/examples/cb-component-relative-paths/e2e-spec.ts deleted file mode 100644 index 13e1636f2e1..00000000000 --- a/aio/content/examples/cb-component-relative-paths/e2e-spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by, ElementFinder } from 'protractor'; - -describe('Cookbook: component-relative paths', function () { - - interface Page { - title: ElementFinder; - absComp: ElementFinder; - relComp: ElementFinder; - - } - function getPageStruct() { - return { - title: element( by.tagName( 'h1' )), - absComp: element( by.css( 'absolute-path div' ) ), - relComp: element( by.css( 'relative-path div' ) ) - }; - } - - let page: Page; - beforeAll(function () { - browser.get(''); - page = getPageStruct(); - }); - - it('should display title of the sample', function () { - expect(element(by.tagName('h1')).getText()).toContain('Paths'); - }); - - it('should have absolute-path element', function () { - expect(page.absComp.isPresent()).toBe(true, 'no element'); - }); - - it('should display the absolute path text', function () { - expect(page.absComp.getText()).toContain('Absolute'); - }); - - it('should display the component-relative path text', function () { - expect(page.relComp.getText()).toContain('Component-relative'); - }); -}); diff --git a/aio/content/examples/cb-component-relative-paths/ts/plnkr.json b/aio/content/examples/cb-component-relative-paths/ts/plnkr.json deleted file mode 100644 index 21002e1d2ff..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Module-relative Paths", - "basePath": "src/", - "files": [ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": [ "cookbook" ] -} diff --git a/aio/content/examples/cb-component-relative-paths/ts/plnkr.no-link.html b/aio/content/examples/cb-component-relative-paths/ts/plnkr.no-link.html deleted file mode 100644 index bd65444405e..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/plnkr.no-link.html +++ /dev/null @@ -1,277 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/app/app.component.ts b/aio/content/examples/cb-component-relative-paths/ts/src/app/app.component.ts deleted file mode 100644 index 8b469886ee1..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/app/app.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ -selector: 'my-app', -template: - `

Absolute & Component-Relative Paths

- - - ` -}) -export class AppComponent {} diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/app/app.module.ts b/aio/content/examples/cb-component-relative-paths/ts/src/app/app.module.ts deleted file mode 100644 index a13f4b144f4..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/app/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component'; - -@NgModule({ - imports: [ - BrowserModule - ], - declarations: [ - AppComponent, - SomeAbsoluteComponent, - SomeRelativeComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.css b/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.css deleted file mode 100644 index f43e11f60ed..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.css +++ /dev/null @@ -1,22 +0,0 @@ -/* #docregion */ -div.absolute { - background: beige; - border: 1px solid darkred; - color: red; - margin: 8px; - max-width: 20em; - padding: 4px; - text-align: center; -} - -div.relative { - background: powderblue; - border: 1px solid darkblue; - color: Blue; - font-style: italic; - margin: 8px; - max-width: 20em; - padding: 4px; - text-align: center; -} - diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.html b/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.html deleted file mode 100644 index 027741ce55e..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.html +++ /dev/null @@ -1,4 +0,0 @@ - -
- {{type}}
{{path}} -
diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.ts b/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.ts deleted file mode 100644 index 327727873c4..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/app/some.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -///////// Using Absolute Paths /////// - -// #docregion absolute-config -@Component({ - selector: 'absolute-path', - templateUrl: 'app/some.component.html', - styleUrls: ['app/some.component.css'] -}) -// #enddocregion absolute-config -export class SomeAbsoluteComponent { - class = 'absolute'; - type = 'Absolute template & style URLs'; - path = 'app/path.component.html'; -} - -///////// Using Relative Paths /////// - -// #docregion relative-config -@Component({ - // #docregion module-id - moduleId: module.id, - // #enddocregion module-id - selector: 'relative-path', - templateUrl: './some.component.html', - styleUrls: ['./some.component.css'] -}) -// #enddocregion relative-config - -export class SomeRelativeComponent { - class = 'relative'; - type = 'Component-relative template & style URLs'; - path = 'path.component.html'; - -} diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/index.html b/aio/content/examples/cb-component-relative-paths/ts/src/index.html deleted file mode 100644 index e951f9f016d..00000000000 --- a/aio/content/examples/cb-component-relative-paths/ts/src/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - Component-Relative Paths - - - - - - - - - - - - - - - - - Loading app... - - diff --git a/aio/content/examples/cb-component-relative-paths/ts/example-config.json b/aio/content/examples/cb-dependency-injection/example-config.json similarity index 100% rename from aio/content/examples/cb-component-relative-paths/ts/example-config.json rename to aio/content/examples/cb-dependency-injection/example-config.json diff --git a/aio/content/examples/cb-dependency-injection/ts/plnkr.json b/aio/content/examples/cb-dependency-injection/plnkr.json similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/plnkr.json rename to aio/content/examples/cb-dependency-injection/plnkr.json diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/app-routing.module.ts b/aio/content/examples/cb-dependency-injection/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/app-routing.module.ts rename to aio/content/examples/cb-dependency-injection/src/app/app-routing.module.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/app.component.html b/aio/content/examples/cb-dependency-injection/src/app/app.component.html similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/app.component.html rename to aio/content/examples/cb-dependency-injection/src/app/app.component.html diff --git a/aio/content/examples/cb-dependency-injection/src/app/app.component.ts b/aio/content/examples/cb-dependency-injection/src/app/app.component.ts new file mode 100644 index 00000000000..3045893c580 --- /dev/null +++ b/aio/content/examples/cb-dependency-injection/src/app/app.component.ts @@ -0,0 +1,29 @@ +// #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: 'my-app', + templateUrl: './app.component.html', +// #docregion providers + providers: [ LoggerService, UserContextService, UserService ] +// #enddocregion providers +}) +export class AppComponent { +// #enddocregion import-services + + private userId: number = 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/aio/content/examples/cb-dependency-injection/ts/src/app/app.module.ts b/aio/content/examples/cb-dependency-injection/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/app.module.ts rename to aio/content/examples/cb-dependency-injection/src/app/app.module.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/date-logger.service.ts b/aio/content/examples/cb-dependency-injection/src/app/date-logger.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/date-logger.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/date-logger.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-bio.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-bio.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-bio.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-bios.component.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-bios.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-bios.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-bios.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-cache.service.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-cache.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-cache.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-cache.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-contact.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-contact.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-contact.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-data.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-data.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-data.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-data.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts b/aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero-of-the-month.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero-of-the-month.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero.service.ts b/aio/content/examples/cb-dependency-injection/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/hero.ts b/aio/content/examples/cb-dependency-injection/src/app/hero.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/hero.ts rename to aio/content/examples/cb-dependency-injection/src/app/hero.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/highlight.directive.ts b/aio/content/examples/cb-dependency-injection/src/app/highlight.directive.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/highlight.directive.ts rename to aio/content/examples/cb-dependency-injection/src/app/highlight.directive.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/logger.service.ts b/aio/content/examples/cb-dependency-injection/src/app/logger.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/logger.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/logger.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts b/aio/content/examples/cb-dependency-injection/src/app/parent-finder.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/parent-finder.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/parent-finder.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/runners-up.ts b/aio/content/examples/cb-dependency-injection/src/app/runners-up.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/runners-up.ts rename to aio/content/examples/cb-dependency-injection/src/app/runners-up.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts b/aio/content/examples/cb-dependency-injection/src/app/sorted-heroes.component.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/sorted-heroes.component.ts rename to aio/content/examples/cb-dependency-injection/src/app/sorted-heroes.component.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/user-context.service.ts b/aio/content/examples/cb-dependency-injection/src/app/user-context.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/user-context.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/user-context.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/user.service.ts b/aio/content/examples/cb-dependency-injection/src/app/user.service.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/app/user.service.ts rename to aio/content/examples/cb-dependency-injection/src/app/user.service.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/index.html b/aio/content/examples/cb-dependency-injection/src/index.html similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/index.html rename to aio/content/examples/cb-dependency-injection/src/index.html diff --git a/aio/content/examples/cb-dependency-injection/ts/src/main.ts b/aio/content/examples/cb-dependency-injection/src/main.ts similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/main.ts rename to aio/content/examples/cb-dependency-injection/src/main.ts diff --git a/aio/content/examples/cb-dependency-injection/ts/src/sample.css b/aio/content/examples/cb-dependency-injection/src/sample.css similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/src/sample.css rename to aio/content/examples/cb-dependency-injection/src/sample.css diff --git a/aio/content/examples/cb-dependency-injection/ts/plnkr.no-link.html b/aio/content/examples/cb-dependency-injection/ts/plnkr.no-link.html deleted file mode 100644 index cf460b3b95c..00000000000 --- a/aio/content/examples/cb-dependency-injection/ts/plnkr.no-link.html +++ /dev/null @@ -1,989 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-dependency-injection/ts/src/app/app.component.ts b/aio/content/examples/cb-dependency-injection/ts/src/app/app.component.ts deleted file mode 100644 index a3b938f7e57..00000000000 --- a/aio/content/examples/cb-dependency-injection/ts/src/app/app.component.ts +++ /dev/null @@ -1,30 +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({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html', -// #docregion providers - providers: [ LoggerService, UserContextService, UserService ] -// #enddocregion providers -}) -export class AppComponent { -// #enddocregion import-services - - private userId: number = 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/aio/content/examples/cb-dependency-injection/ts/example-config.json b/aio/content/examples/cb-dynamic-component-loader/example-config.json similarity index 100% rename from aio/content/examples/cb-dependency-injection/ts/example-config.json rename to aio/content/examples/cb-dynamic-component-loader/example-config.json diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/ad-banner.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/ad-banner.component.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad-item.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/ad-item.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad-item.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/ad-item.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.component.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/ad.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.component.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/ad.component.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.directive.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/ad.directive.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.directive.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/ad.directive.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.service.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/ad.service.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/ad.service.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/ad.service.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/app.component.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/app.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/app.component.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/app.component.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/app.module.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/app.module.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/app.module.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/hero-job-ad.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/hero-job-ad.component.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts b/aio/content/examples/cb-dynamic-component-loader/src/app/hero-profile.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts rename to aio/content/examples/cb-dynamic-component-loader/src/app/hero-profile.component.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/index.html b/aio/content/examples/cb-dynamic-component-loader/src/index.html similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/index.html rename to aio/content/examples/cb-dynamic-component-loader/src/index.html diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/main.ts b/aio/content/examples/cb-dynamic-component-loader/src/main.ts similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/main.ts rename to aio/content/examples/cb-dynamic-component-loader/src/main.ts diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/src/sample.css b/aio/content/examples/cb-dynamic-component-loader/src/sample.css similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/src/sample.css rename to aio/content/examples/cb-dynamic-component-loader/src/sample.css diff --git a/aio/content/examples/cb-dynamic-component-loader/ts/example-config.json b/aio/content/examples/cb-dynamic-form/example-config.json similarity index 100% rename from aio/content/examples/cb-dynamic-component-loader/ts/example-config.json rename to aio/content/examples/cb-dynamic-form/example-config.json diff --git a/aio/content/examples/cb-dynamic-form/ts/plnkr.json b/aio/content/examples/cb-dynamic-form/plnkr.json similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/plnkr.json rename to aio/content/examples/cb-dynamic-form/plnkr.json diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/app.component.ts b/aio/content/examples/cb-dynamic-form/src/app/app.component.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/app.component.ts rename to aio/content/examples/cb-dynamic-form/src/app/app.component.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/app.module.ts b/aio/content/examples/cb-dynamic-form/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/app.module.ts rename to aio/content/examples/cb-dynamic-form/src/app/app.module.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.html b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.html similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.html rename to aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.html diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts new file mode 100644 index 00000000000..024571a7c2d --- /dev/null +++ b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form-question.component.ts @@ -0,0 +1,15 @@ +// #docregion +import { Component, Input } from '@angular/core'; +import { FormGroup } from '@angular/forms'; + +import { QuestionBase } from './question-base'; + +@Component({ + selector: 'df-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/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.html similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.html rename to aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.html diff --git a/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts new file mode 100644 index 00000000000..8d95c0d3a41 --- /dev/null +++ b/aio/content/examples/cb-dynamic-form/src/app/dynamic-form.component.ts @@ -0,0 +1,28 @@ +// #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: '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/aio/content/examples/cb-dynamic-form/ts/src/app/question-base.ts b/aio/content/examples/cb-dynamic-form/src/app/question-base.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/question-base.ts rename to aio/content/examples/cb-dynamic-form/src/app/question-base.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/question-control.service.ts b/aio/content/examples/cb-dynamic-form/src/app/question-control.service.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/question-control.service.ts rename to aio/content/examples/cb-dynamic-form/src/app/question-control.service.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/question-dropdown.ts b/aio/content/examples/cb-dynamic-form/src/app/question-dropdown.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/question-dropdown.ts rename to aio/content/examples/cb-dynamic-form/src/app/question-dropdown.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/question-textbox.ts b/aio/content/examples/cb-dynamic-form/src/app/question-textbox.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/question-textbox.ts rename to aio/content/examples/cb-dynamic-form/src/app/question-textbox.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/question.service.ts b/aio/content/examples/cb-dynamic-form/src/app/question.service.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/app/question.service.ts rename to aio/content/examples/cb-dynamic-form/src/app/question.service.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/index.html b/aio/content/examples/cb-dynamic-form/src/index.html similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/index.html rename to aio/content/examples/cb-dynamic-form/src/index.html diff --git a/aio/content/examples/cb-dynamic-form/ts/src/main.ts b/aio/content/examples/cb-dynamic-form/src/main.ts similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/main.ts rename to aio/content/examples/cb-dynamic-form/src/main.ts diff --git a/aio/content/examples/cb-dynamic-form/ts/src/sample.css b/aio/content/examples/cb-dynamic-form/src/sample.css similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/src/sample.css rename to aio/content/examples/cb-dynamic-form/src/sample.css diff --git a/aio/content/examples/cb-dynamic-form/ts/plnkr.no-link.html b/aio/content/examples/cb-dynamic-form/ts/plnkr.no-link.html deleted file mode 100644 index 93370216ad1..00000000000 --- a/aio/content/examples/cb-dynamic-form/ts/plnkr.no-link.html +++ /dev/null @@ -1,463 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts b/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts deleted file mode 100644 index 24d0bd168bc..00000000000 --- a/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { FormGroup } from '@angular/forms'; - -import { QuestionBase } from './question-base'; - -@Component({ - moduleId: module.id, - selector: 'df-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/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts b/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts deleted file mode 100644 index 32aaf731147..00000000000 --- a/aio/content/examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts +++ /dev/null @@ -1,29 +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({ - moduleId: module.id, - selector: '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/aio/content/examples/cb-dynamic-form/ts/example-config.json b/aio/content/examples/cb-form-validation/example-config.json similarity index 100% rename from aio/content/examples/cb-dynamic-form/ts/example-config.json rename to aio/content/examples/cb-form-validation/example-config.json diff --git a/aio/content/examples/cb-form-validation/ts/plnkr.json b/aio/content/examples/cb-form-validation/plnkr.json similarity index 100% rename from aio/content/examples/cb-form-validation/ts/plnkr.json rename to aio/content/examples/cb-form-validation/plnkr.json diff --git a/aio/content/examples/cb-form-validation/ts/src/app/app.component.ts b/aio/content/examples/cb-form-validation/src/app/app.component.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/app.component.ts rename to aio/content/examples/cb-form-validation/src/app/app.component.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/app.module.ts b/aio/content/examples/cb-form-validation/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/app.module.ts rename to aio/content/examples/cb-form-validation/src/app/app.module.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.html b/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.html similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.html rename to aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.html diff --git a/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts new file mode 100644 index 00000000000..241ff1e7828 --- /dev/null +++ b/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.component.ts @@ -0,0 +1,116 @@ +/* tslint:disable: member-ordering forin */ +// #docplaster +// #docregion +import { Component, OnInit } from '@angular/core'; +import { FormGroup, FormBuilder, Validators } from '@angular/forms'; + +import { Hero } from '../shared/hero'; +import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; + +@Component({ + selector: 'hero-form-reactive3', + templateUrl: './hero-form-reactive.component.html' +}) +export class HeroFormReactiveComponent implements OnInit { + + powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; + + hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What'); + + submitted = false; + + // #docregion on-submit + onSubmit() { + this.submitted = true; + this.hero = this.heroForm.value; + } + // #enddocregion on-submit +// #enddocregion + + // Reset the form with a new hero AND restore 'pristine' class state + // by toggling 'active' flag which causes the form + // to be removed/re-added in a tick via NgIf + // TODO: Workaround until NgForm has a reset method (#6822) + active = true; +// #docregion class + // #docregion add-hero + addHero() { + this.hero = new Hero(42, '', ''); + this.buildForm(); + // #enddocregion add-hero +// #enddocregion class + + this.active = false; + setTimeout(() => this.active = true, 0); +// #docregion + // #docregion add-hero + } + // #enddocregion add-hero + + // #docregion form-builder + heroForm: FormGroup; + constructor(private fb: FormBuilder) { } + + ngOnInit(): void { + this.buildForm(); + } + + buildForm(): void { + this.heroForm = this.fb.group({ + // #docregion name-validators + 'name': [this.hero.name, [ + Validators.required, + Validators.minLength(4), + Validators.maxLength(24), + forbiddenNameValidator(/bob/i) + ] + ], + // #enddocregion name-validators + 'alterEgo': [this.hero.alterEgo], + 'power': [this.hero.power, Validators.required] + }); + + this.heroForm.valueChanges + .subscribe(data => this.onValueChanged(data)); + + this.onValueChanged(); // (re)set validation messages now + } + + // #enddocregion form-builder + + onValueChanged(data?: any) { + if (!this.heroForm) { return; } + const form = this.heroForm; + + for (const field in this.formErrors) { + // clear previous error message (if any) + this.formErrors[field] = ''; + const control = form.get(field); + + if (control && control.dirty && !control.valid) { + const messages = this.validationMessages[field]; + for (const key in control.errors) { + this.formErrors[field] += messages[key] + ' '; + } + } + } + } + + formErrors = { + 'name': '', + 'power': '' + }; + + validationMessages = { + 'name': { + 'required': 'Name is required.', + 'minlength': 'Name must be at least 4 characters long.', + 'maxlength': 'Name cannot be more than 24 characters long.', + 'forbiddenName': 'Someone named "Bob" cannot be a hero.' + }, + 'power': { + 'required': 'Power is required.' + } + }; +} +// #enddocregion diff --git a/aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts b/aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.module.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts rename to aio/content/examples/cb-form-validation/src/app/reactive/hero-form-reactive.module.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/cb-form-validation/src/app/shared/forbidden-name.directive.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/shared/forbidden-name.directive.ts rename to aio/content/examples/cb-form-validation/src/app/shared/forbidden-name.directive.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/shared/hero.ts b/aio/content/examples/cb-form-validation/src/app/shared/hero.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/shared/hero.ts rename to aio/content/examples/cb-form-validation/src/app/shared/hero.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/shared/shared.module.ts b/aio/content/examples/cb-form-validation/src/app/shared/shared.module.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/shared/shared.module.ts rename to aio/content/examples/cb-form-validation/src/app/shared/shared.module.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/shared/submitted.component.ts b/aio/content/examples/cb-form-validation/src/app/shared/submitted.component.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/shared/submitted.component.ts rename to aio/content/examples/cb-form-validation/src/app/shared/submitted.component.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template.module.ts b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template.module.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template.module.ts rename to aio/content/examples/cb-form-validation/src/app/template/hero-form-template.module.ts diff --git a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.html b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.html similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.html rename to aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.html diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts new file mode 100644 index 00000000000..1bc29db44da --- /dev/null +++ b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template1.component.ts @@ -0,0 +1,47 @@ +/* tslint:disable: member-ordering */ +// #docplaster +// #docregion +import { Component } from '@angular/core'; + + +import { Hero } from '../shared/hero'; + +@Component({ + selector: 'hero-form-template1', + templateUrl: './hero-form-template1.component.html' +}) +// #docregion class +export class HeroFormTemplate1Component { + + powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; + + hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What'); + + submitted = false; + + onSubmit() { + this.submitted = true; + } +// #enddocregion class +// #enddocregion + // Reset the form with a new hero AND restore 'pristine' class state + // by toggling 'active' flag which causes the form + // to be removed/re-added in a tick via NgIf + // TODO: Workaround until NgForm has a reset method (#6822) + active = true; +// #docregion +// #docregion class + + addHero() { + this.hero = new Hero(42, '', ''); +// #enddocregion class +// #enddocregion + + this.active = false; + setTimeout(() => this.active = true, 0); +// #docregion +// #docregion class + } +} +// #enddocregion class +// #enddocregion diff --git a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.html b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.html similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.html rename to aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.html diff --git a/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts new file mode 100644 index 00000000000..320ef09efdf --- /dev/null +++ b/aio/content/examples/cb-form-validation/src/app/template/hero-form-template2.component.ts @@ -0,0 +1,99 @@ +/* tslint:disable: member-ordering forin */ +// #docplaster +// #docregion +import { Component, AfterViewChecked, ViewChild } from '@angular/core'; +import { NgForm } from '@angular/forms'; + +import { Hero } from '../shared/hero'; + +@Component({ + selector: 'hero-form-template2', + templateUrl: './hero-form-template2.component.html' +}) +export class HeroFormTemplate2Component implements AfterViewChecked { + + powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; + + hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What'); + + submitted = false; + + onSubmit() { + this.submitted = true; + } +// #enddocregion + + // Reset the form with a new hero AND restore 'pristine' class state + // by toggling 'active' flag which causes the form + // to be removed/re-added in a tick via NgIf + // TODO: Workaround until NgForm has a reset method (#6822) + active = true; +// #docregion + + addHero() { + this.hero = new Hero(42, '', ''); +// #enddocregion + + this.active = false; + setTimeout(() => this.active = true, 0); +// #docregion + } + + // #docregion view-child + heroForm: NgForm; + @ViewChild('heroForm') currentForm: NgForm; + + ngAfterViewChecked() { + this.formChanged(); + } + + formChanged() { + if (this.currentForm === this.heroForm) { return; } + this.heroForm = this.currentForm; + if (this.heroForm) { + this.heroForm.valueChanges + .subscribe(data => this.onValueChanged(data)); + } + } + // #enddocregion view-child + + // #docregion handler + onValueChanged(data?: any) { + if (!this.heroForm) { return; } + const form = this.heroForm.form; + + for (const field in this.formErrors) { + // clear previous error message (if any) + this.formErrors[field] = ''; + const control = form.get(field); + + if (control && control.dirty && !control.valid) { + const messages = this.validationMessages[field]; + for (const key in control.errors) { + this.formErrors[field] += messages[key] + ' '; + } + } + } + } + + formErrors = { + 'name': '', + 'power': '' + }; + // #enddocregion handler + + // #docregion messages + validationMessages = { + 'name': { + 'required': 'Name is required.', + 'minlength': 'Name must be at least 4 characters long.', + 'maxlength': 'Name cannot be more than 24 characters long.', + 'forbiddenName': 'Someone named "Bob" cannot be a hero.' + }, + 'power': { + 'required': 'Power is required.' + } + }; + // #enddocregion messages +} +// #enddocregion diff --git a/aio/content/examples/cb-form-validation/ts/src/forms.css b/aio/content/examples/cb-form-validation/src/forms.css similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/forms.css rename to aio/content/examples/cb-form-validation/src/forms.css diff --git a/aio/content/examples/cb-form-validation/ts/src/index.html b/aio/content/examples/cb-form-validation/src/index.html similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/index.html rename to aio/content/examples/cb-form-validation/src/index.html diff --git a/aio/content/examples/cb-form-validation/ts/src/main.ts b/aio/content/examples/cb-form-validation/src/main.ts similarity index 100% rename from aio/content/examples/cb-form-validation/ts/src/main.ts rename to aio/content/examples/cb-form-validation/src/main.ts diff --git a/aio/content/examples/cb-form-validation/ts/plnkr.no-link.html b/aio/content/examples/cb-form-validation/ts/plnkr.no-link.html deleted file mode 100644 index 626da532950..00000000000 --- a/aio/content/examples/cb-form-validation/ts/plnkr.no-link.html +++ /dev/null @@ -1,768 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts deleted file mode 100644 index 4bbefadb96c..00000000000 --- a/aio/content/examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts +++ /dev/null @@ -1,117 +0,0 @@ -/* tslint:disable: member-ordering forin */ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormBuilder, Validators } from '@angular/forms'; - -import { Hero } from '../shared/hero'; -import { forbiddenNameValidator } from '../shared/forbidden-name.directive'; - -@Component({ - moduleId: module.id, - selector: 'hero-form-reactive3', - templateUrl: './hero-form-reactive.component.html' -}) -export class HeroFormReactiveComponent implements OnInit { - - powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; - - hero = new Hero(18, 'Dr. WhatIsHisName', this.powers[0], 'Dr. What'); - - submitted = false; - - // #docregion on-submit - onSubmit() { - this.submitted = true; - this.hero = this.heroForm.value; - } - // #enddocregion on-submit -// #enddocregion - - // Reset the form with a new hero AND restore 'pristine' class state - // by toggling 'active' flag which causes the form - // to be removed/re-added in a tick via NgIf - // TODO: Workaround until NgForm has a reset method (#6822) - active = true; -// #docregion class - // #docregion add-hero - addHero() { - this.hero = new Hero(42, '', ''); - this.buildForm(); - // #enddocregion add-hero -// #enddocregion class - - this.active = false; - setTimeout(() => this.active = true, 0); -// #docregion - // #docregion add-hero - } - // #enddocregion add-hero - - // #docregion form-builder - heroForm: FormGroup; - constructor(private fb: FormBuilder) { } - - ngOnInit(): void { - this.buildForm(); - } - - buildForm(): void { - this.heroForm = this.fb.group({ - // #docregion name-validators - 'name': [this.hero.name, [ - Validators.required, - Validators.minLength(4), - Validators.maxLength(24), - forbiddenNameValidator(/bob/i) - ] - ], - // #enddocregion name-validators - 'alterEgo': [this.hero.alterEgo], - 'power': [this.hero.power, Validators.required] - }); - - this.heroForm.valueChanges - .subscribe(data => this.onValueChanged(data)); - - this.onValueChanged(); // (re)set validation messages now - } - - // #enddocregion form-builder - - onValueChanged(data?: any) { - if (!this.heroForm) { return; } - const form = this.heroForm; - - for (const field in this.formErrors) { - // clear previous error message (if any) - this.formErrors[field] = ''; - const control = form.get(field); - - if (control && control.dirty && !control.valid) { - const messages = this.validationMessages[field]; - for (const key in control.errors) { - this.formErrors[field] += messages[key] + ' '; - } - } - } - } - - formErrors = { - 'name': '', - 'power': '' - }; - - validationMessages = { - 'name': { - 'required': 'Name is required.', - 'minlength': 'Name must be at least 4 characters long.', - 'maxlength': 'Name cannot be more than 24 characters long.', - 'forbiddenName': 'Someone named "Bob" cannot be a hero.' - }, - 'power': { - 'required': 'Power is required.' - } - }; -} -// #enddocregion diff --git a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts b/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts deleted file mode 100644 index b096ca8cf4e..00000000000 --- a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable: member-ordering */ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - - -import { Hero } from '../shared/hero'; - -@Component({ - moduleId: module.id, - selector: 'hero-form-template1', - templateUrl: './hero-form-template1.component.html' -}) -// #docregion class -export class HeroFormTemplate1Component { - - powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; - - hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What'); - - submitted = false; - - onSubmit() { - this.submitted = true; - } -// #enddocregion class -// #enddocregion - // Reset the form with a new hero AND restore 'pristine' class state - // by toggling 'active' flag which causes the form - // to be removed/re-added in a tick via NgIf - // TODO: Workaround until NgForm has a reset method (#6822) - active = true; -// #docregion -// #docregion class - - addHero() { - this.hero = new Hero(42, '', ''); -// #enddocregion class -// #enddocregion - - this.active = false; - setTimeout(() => this.active = true, 0); -// #docregion -// #docregion class - } -} -// #enddocregion class -// #enddocregion diff --git a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts b/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts deleted file mode 100644 index 8b3e1503476..00000000000 --- a/aio/content/examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts +++ /dev/null @@ -1,100 +0,0 @@ -/* tslint:disable: member-ordering forin */ -// #docplaster -// #docregion -import { Component, AfterViewChecked, ViewChild } from '@angular/core'; -import { NgForm } from '@angular/forms'; - -import { Hero } from '../shared/hero'; - -@Component({ - moduleId: module.id, - selector: 'hero-form-template2', - templateUrl: './hero-form-template2.component.html' -}) -export class HeroFormTemplate2Component implements AfterViewChecked { - - powers = ['Really Smart', 'Super Flexible', 'Weather Changer']; - - hero = new Hero(18, 'Dr. WhatIsHisWayTooLongName', this.powers[0], 'Dr. What'); - - submitted = false; - - onSubmit() { - this.submitted = true; - } -// #enddocregion - - // Reset the form with a new hero AND restore 'pristine' class state - // by toggling 'active' flag which causes the form - // to be removed/re-added in a tick via NgIf - // TODO: Workaround until NgForm has a reset method (#6822) - active = true; -// #docregion - - addHero() { - this.hero = new Hero(42, '', ''); -// #enddocregion - - this.active = false; - setTimeout(() => this.active = true, 0); -// #docregion - } - - // #docregion view-child - heroForm: NgForm; - @ViewChild('heroForm') currentForm: NgForm; - - ngAfterViewChecked() { - this.formChanged(); - } - - formChanged() { - if (this.currentForm === this.heroForm) { return; } - this.heroForm = this.currentForm; - if (this.heroForm) { - this.heroForm.valueChanges - .subscribe(data => this.onValueChanged(data)); - } - } - // #enddocregion view-child - - // #docregion handler - onValueChanged(data?: any) { - if (!this.heroForm) { return; } - const form = this.heroForm.form; - - for (const field in this.formErrors) { - // clear previous error message (if any) - this.formErrors[field] = ''; - const control = form.get(field); - - if (control && control.dirty && !control.valid) { - const messages = this.validationMessages[field]; - for (const key in control.errors) { - this.formErrors[field] += messages[key] + ' '; - } - } - } - } - - formErrors = { - 'name': '', - 'power': '' - }; - // #enddocregion handler - - // #docregion messages - validationMessages = { - 'name': { - 'required': 'Name is required.', - 'minlength': 'Name must be at least 4 characters long.', - 'maxlength': 'Name cannot be more than 24 characters long.', - 'forbiddenName': 'Someone named "Bob" cannot be a hero.' - }, - 'power': { - 'required': 'Power is required.' - } - }; - // #enddocregion messages -} -// #enddocregion diff --git a/aio/content/examples/cb-i18n/ts/.gitignore b/aio/content/examples/cb-i18n/.gitignore similarity index 100% rename from aio/content/examples/cb-i18n/ts/.gitignore rename to aio/content/examples/cb-i18n/.gitignore diff --git a/aio/content/examples/cb-form-validation/ts/example-config.json b/aio/content/examples/cb-i18n/example-config.json similarity index 100% rename from aio/content/examples/cb-form-validation/ts/example-config.json rename to aio/content/examples/cb-i18n/example-config.json diff --git a/aio/content/examples/cb-i18n/ts/messages.xlf b/aio/content/examples/cb-i18n/messages.xlf similarity index 100% rename from aio/content/examples/cb-i18n/ts/messages.xlf rename to aio/content/examples/cb-i18n/messages.xlf diff --git a/aio/content/examples/cb-i18n/plnkr.json b/aio/content/examples/cb-i18n/plnkr.json new file mode 100644 index 00000000000..36f2685129d --- /dev/null +++ b/aio/content/examples/cb-i18n/plnkr.json @@ -0,0 +1,19 @@ +{ + "description": "i18n", + "basePath": "src/", + "files": [ + "app/**/*.css", + "app/**/*.html", + "app/**/*.ts", + "messages.xlf", + "locale/messages.*.xlf", + + "!**/*.[1].*", + + "main.ts", + "styles.css", + "systemjs-text-plugin.js", + "index.html" + ], + "tags": ["i18n"] +} diff --git a/aio/content/examples/cb-i18n/ts/src/app/app.component.1.html b/aio/content/examples/cb-i18n/src/app/app.component.1.html similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/app/app.component.1.html rename to aio/content/examples/cb-i18n/src/app/app.component.1.html diff --git a/aio/content/examples/cb-i18n/ts/src/app/app.component.html b/aio/content/examples/cb-i18n/src/app/app.component.html similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/app/app.component.html rename to aio/content/examples/cb-i18n/src/app/app.component.html diff --git a/aio/content/examples/cb-i18n/src/app/app.component.ts b/aio/content/examples/cb-i18n/src/app/app.component.ts new file mode 100644 index 00000000000..3b1f57671ee --- /dev/null +++ b/aio/content/examples/cb-i18n/src/app/app.component.ts @@ -0,0 +1,19 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { + wolves = 0; + gender = 'f'; + fly = true; + logo = 'https://angular.io/resources/images/logos/angular2/angular.png'; + inc(i: number) { + this.wolves = Math.min(5, Math.max(0, this.wolves + i)); + } + male() { this.gender = 'm'; } + female() { this.gender = 'f'; } +} + diff --git a/aio/content/examples/cb-i18n/ts/src/app/app.module.ts b/aio/content/examples/cb-i18n/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/app/app.module.ts rename to aio/content/examples/cb-i18n/src/app/app.module.ts diff --git a/aio/content/examples/cb-i18n/ts/src/app/i18n-providers.ts b/aio/content/examples/cb-i18n/src/app/i18n-providers.ts similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/app/i18n-providers.ts rename to aio/content/examples/cb-i18n/src/app/i18n-providers.ts diff --git a/aio/content/examples/cb-i18n/ts/src/index.html b/aio/content/examples/cb-i18n/src/index.html similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/index.html rename to aio/content/examples/cb-i18n/src/index.html diff --git a/aio/content/examples/cb-i18n/ts/src/locale/messages.es.xlf b/aio/content/examples/cb-i18n/src/locale/messages.es.xlf similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/locale/messages.es.xlf rename to aio/content/examples/cb-i18n/src/locale/messages.es.xlf diff --git a/aio/content/examples/cb-i18n/ts/src/locale/messages.es.xlf.html b/aio/content/examples/cb-i18n/src/locale/messages.es.xlf.html similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/locale/messages.es.xlf.html rename to aio/content/examples/cb-i18n/src/locale/messages.es.xlf.html diff --git a/aio/content/examples/cb-i18n/ts/src/main.1.ts b/aio/content/examples/cb-i18n/src/main.1.ts similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/main.1.ts rename to aio/content/examples/cb-i18n/src/main.1.ts diff --git a/aio/content/examples/cb-i18n/ts/src/main.ts b/aio/content/examples/cb-i18n/src/main.ts similarity index 100% rename from aio/content/examples/cb-i18n/ts/src/main.ts rename to aio/content/examples/cb-i18n/src/main.ts diff --git a/aio/content/examples/cb-i18n/ts/plnkr.json b/aio/content/examples/cb-i18n/ts/plnkr.json deleted file mode 100644 index e2cbd40afeb..00000000000 --- a/aio/content/examples/cb-i18n/ts/plnkr.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "description": "i18n", - "basePath": "src/", - "files": [ - "app/**/*.css", - "app/**/*.html", - "app/**/*.ts", - "messages.xlf", - "locale/messages.*.xlf", - - "!**/*.[1].*", - - "styles.css", - "systemjs-text-plugin.js", - "index.html" - ], - "tags": ["i18n"] -} diff --git a/aio/content/examples/cb-i18n/ts/plnkr.no-link.html b/aio/content/examples/cb-i18n/ts/plnkr.no-link.html deleted file mode 100644 index 0a3fd393ec1..00000000000 --- a/aio/content/examples/cb-i18n/ts/plnkr.no-link.html +++ /dev/null @@ -1,329 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-i18n/ts/src/app/app.component.ts b/aio/content/examples/cb-i18n/ts/src/app/app.component.ts deleted file mode 100644 index 09adc99d2aa..00000000000 --- a/aio/content/examples/cb-i18n/ts/src/app/app.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { - wolves = 0; - gender = 'f'; - fly = true; - logo = 'https://angular.io/resources/images/logos/angular2/angular.png'; - inc(i: number) { - this.wolves = Math.min(5, Math.max(0, this.wolves + i)); - } - male() { this.gender = 'm'; } - female() { this.gender = 'f'; } -} - diff --git a/aio/content/examples/cb-i18n/ts/src/systemjs-text-plugin.js b/aio/content/examples/cb-i18n/ts/src/systemjs-text-plugin.js deleted file mode 100644 index d5ca508fe0d..00000000000 --- a/aio/content/examples/cb-i18n/ts/src/systemjs-text-plugin.js +++ /dev/null @@ -1,14 +0,0 @@ -// #docregion -/* - SystemJS Text plugin from - https://github.com/systemjs/plugin-text/blob/master/text.js -*/ -exports.translate = function(load) { - if (this.builder && this.transpiler) { - load.metadata.format = 'esm'; - return 'exp' + 'ort var __useDefault = true; exp' + 'ort default ' + JSON.stringify(load.source) + ';'; - } - - load.metadata.format = 'amd'; - return 'def' + 'ine(function() {\nreturn ' + JSON.stringify(load.source) + ';\n});'; -} diff --git a/aio/content/examples/cb-i18n/ts/example-config.json b/aio/content/examples/cb-set-document-title/example-config.json similarity index 100% rename from aio/content/examples/cb-i18n/ts/example-config.json rename to aio/content/examples/cb-set-document-title/example-config.json diff --git a/aio/content/examples/cb-set-document-title/ts/plnkr.json b/aio/content/examples/cb-set-document-title/plnkr.json similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/plnkr.json rename to aio/content/examples/cb-set-document-title/plnkr.json diff --git a/aio/content/examples/cb-set-document-title/ts/src/app/app.component.ts b/aio/content/examples/cb-set-document-title/src/app/app.component.ts similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/src/app/app.component.ts rename to aio/content/examples/cb-set-document-title/src/app/app.component.ts diff --git a/aio/content/examples/cb-set-document-title/ts/src/app/app.module.ts b/aio/content/examples/cb-set-document-title/src/app/app.module.ts similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/src/app/app.module.ts rename to aio/content/examples/cb-set-document-title/src/app/app.module.ts diff --git a/aio/content/examples/cb-set-document-title/ts/src/index.html b/aio/content/examples/cb-set-document-title/src/index.html similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/src/index.html rename to aio/content/examples/cb-set-document-title/src/index.html diff --git a/aio/content/examples/cb-set-document-title/ts/src/main.ts b/aio/content/examples/cb-set-document-title/src/main.ts similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/src/main.ts rename to aio/content/examples/cb-set-document-title/src/main.ts diff --git a/aio/content/examples/cb-set-document-title/ts/plnkr.no-link.html b/aio/content/examples/cb-set-document-title/ts/plnkr.no-link.html deleted file mode 100644 index 915ea603b58..00000000000 --- a/aio/content/examples/cb-set-document-title/ts/plnkr.no-link.html +++ /dev/null @@ -1,228 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.no-link.html b/aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.no-link.html deleted file mode 100644 index 618489fc11a..00000000000 --- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/plnkr.no-link.html +++ /dev/null @@ -1,209 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 index 8e65fff539f..d425788f46c 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; @Component({ - moduleId: module.id, selector: 'my-app', templateUrl: './app.component.html', styles: [ diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 index c9be28c44c1..f01fa4de401 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 @@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; // #docregion @Component({ - moduleId: module.id, selector: 'app-confirm', templateUrl: './confirm.component.html' }) diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 index 32988dcdda2..04c14a9631c 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 @@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core'; // #docregion // #docregion templateUrl @Component({ - moduleId: module.id, selector: 'hero-title', templateUrl: './hero-title.component.html' }) diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js new file mode 100644 index 00000000000..a0f7c54538e --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs-angular-loader.js @@ -0,0 +1,45 @@ +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + basePath = basePath.replace(baseHref, ''); + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + let resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js new file mode 100644 index 00000000000..ea7a3879ac5 --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js-es6-decorators/src/systemjs.config.js @@ -0,0 +1,52 @@ +/** + * 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/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/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', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/aio/content/examples/cb-ts-to-js/js-es6/plnkr.no-link.html b/aio/content/examples/cb-ts-to-js/js-es6/plnkr.no-link.html deleted file mode 100644 index f47b7742b63..00000000000 --- a/aio/content/examples/cb-ts-to-js/js-es6/plnkr.no-link.html +++ /dev/null @@ -1,208 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6 index 3084439b2a5..6079f7f246d 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6/src/app/app.component.es6 @@ -8,7 +8,6 @@ export class AppComponent { AppComponent.annotations = [ new Component({ - moduleId: module.id, selector: 'my-app', templateUrl: './app.component.html', styles: [ diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 index 3e720369520..296268dda49 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 @@ -16,7 +16,6 @@ export class ConfirmComponent { ConfirmComponent.annotations = [ new Component({ - moduleId: module.id, selector: 'app-confirm', templateUrl: './confirm.component.html', inputs: [ diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 b/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 index 16562266029..4b89dfba835 100644 --- a/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 +++ b/aio/content/examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 @@ -16,7 +16,6 @@ export class HeroTitleComponent { // #docregion templateUrl HeroTitleComponent.annotations = [ new Component({ - moduleId: module.id, selector: 'hero-title', templateUrl: './hero-title.component.html' }) diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js new file mode 100644 index 00000000000..a0f7c54538e --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs-angular-loader.js @@ -0,0 +1,45 @@ +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + basePath = basePath.replace(baseHref, ''); + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + let resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js new file mode 100644 index 00000000000..ea7a3879ac5 --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js-es6/src/systemjs.config.js @@ -0,0 +1,52 @@ +/** + * 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/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/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', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/aio/content/examples/cb-ts-to-js/js/example-config.json b/aio/content/examples/cb-ts-to-js/js/example-config.json index e69de29bb2d..81f31aaf0d9 100644 --- a/aio/content/examples/cb-ts-to-js/js/example-config.json +++ b/aio/content/examples/cb-ts-to-js/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/aio/content/examples/cb-ts-to-js/js/plnkr.no-link.html b/aio/content/examples/cb-ts-to-js/js/plnkr.no-link.html deleted file mode 100644 index d01f4940df0..00000000000 --- a/aio/content/examples/cb-ts-to-js/js/plnkr.no-link.html +++ /dev/null @@ -1,1022 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js b/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js new file mode 100644 index 00000000000..a0f7c54538e --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js/src/systemjs-angular-loader.js @@ -0,0 +1,45 @@ +var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; +var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; +var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; + +module.exports.translate = function(load){ + var url = document.createElement('a'); + url.href = load.address; + + var basePathParts = url.pathname.split('/'); + + basePathParts.pop(); + var basePath = basePathParts.join('/'); + + var baseHref = document.createElement('a'); + baseHref.href = this.baseURL; + baseHref = baseHref.pathname; + + basePath = basePath.replace(baseHref, ''); + + load.source = load.source + .replace(templateUrlRegex, function(match, quote, url){ + let resolvedUrl = url; + + if (url.startsWith('.')) { + resolvedUrl = basePath + url.substr(1); + } + + return 'templateUrl: "' + resolvedUrl + '"'; + }) + .replace(stylesRegex, function(match, relativeUrls) { + var urls = []; + + while ((match = stringRegex.exec(relativeUrls)) !== null) { + if (match[2].startsWith('.')) { + urls.push('"' + basePath + match[2].substr(1) + '"'); + } else { + urls.push('"' + match[2] + '"'); + } + } + + return "styleUrls: [" + urls.join(', ') + "]"; + }); + + return load; +}; diff --git a/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js b/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js new file mode 100644 index 00000000000..ea7a3879ac5 --- /dev/null +++ b/aio/content/examples/cb-ts-to-js/js/src/systemjs.config.js @@ -0,0 +1,52 @@ +/** + * 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/animations': 'npm:@angular/animations/bundles/animations.umd.js', + '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js', + '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/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', + meta: { + './*.js': { + loader: 'systemjs-angular-loader.js' + } + } + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/aio/content/examples/cb-ts-to-js/ts/plnkr.no-link.html b/aio/content/examples/cb-ts-to-js/ts/plnkr.no-link.html deleted file mode 100644 index 56a3e2e5c4d..00000000000 --- a/aio/content/examples/cb-ts-to-js/ts/plnkr.no-link.html +++ /dev/null @@ -1,652 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts b/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts index 8e7afad0dfe..912c9e1a803 100644 --- a/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts +++ b/aio/content/examples/cb-ts-to-js/ts/src/app/app.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; @Component({ - moduleId: module.id, selector: 'my-app', templateUrl: './app.component.html', styles: [ diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts b/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts index c9be28c44c1..f01fa4de401 100644 --- a/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts +++ b/aio/content/examples/cb-ts-to-js/ts/src/app/confirm.component.ts @@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; // #docregion @Component({ - moduleId: module.id, selector: 'app-confirm', templateUrl: './confirm.component.html' }) diff --git a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts index e8e68684e2c..48aaae7d449 100644 --- a/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts +++ b/aio/content/examples/cb-ts-to-js/ts/src/app/hero-title.component.ts @@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core'; // #docregion // #docregion templateUrl @Component({ - moduleId: module.id, selector: 'hero-title', templateUrl: './hero-title.component.html' }) diff --git a/aio/content/examples/cb-visual-studio-2015/ts/.gitignore b/aio/content/examples/cb-visual-studio-2015/.gitignore similarity index 100% rename from aio/content/examples/cb-visual-studio-2015/ts/.gitignore rename to aio/content/examples/cb-visual-studio-2015/.gitignore diff --git a/aio/content/examples/cb-visual-studio-2015/ts/tsconfig.json b/aio/content/examples/cb-visual-studio-2015/tsconfig.json similarity index 100% rename from aio/content/examples/cb-visual-studio-2015/ts/tsconfig.json rename to aio/content/examples/cb-visual-studio-2015/tsconfig.json diff --git a/aio/content/examples/cli-quickstart/.angular-cli.json b/aio/content/examples/cli-quickstart/.angular-cli.json new file mode 100644 index 00000000000..49a6b93bd0a --- /dev/null +++ b/aio/content/examples/cli-quickstart/.angular-cli.json @@ -0,0 +1,57 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "project": { + "name": "master-project" + }, + "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", + "styles": [ + "styles.css" + ], + "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" + }, + { + "project": "src/tsconfig.spec.json" + }, + { + "project": "e2e/tsconfig.e2e.json" + } + ], + "test": { + "karma": { + "config": "./karma.conf.js" + } + }, + "defaults": { + "styleExt": "css", + "component": {} + } +} diff --git a/aio/content/examples/cli-quickstart/.editorconfig b/aio/content/examples/cli-quickstart/.editorconfig new file mode 100644 index 00000000000..6e87a003da8 --- /dev/null +++ b/aio/content/examples/cli-quickstart/.editorconfig @@ -0,0 +1,13 @@ +# Editor configuration, see http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/aio/content/examples/cli-quickstart/.gitignore b/aio/content/examples/cli-quickstart/.gitignore new file mode 100644 index 00000000000..04a48dc6432 --- /dev/null +++ b/aio/content/examples/cli-quickstart/.gitignore @@ -0,0 +1,45 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp + +# dependencies +/node_modules + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage/* +/libpeerconnection.log +npm-debug.log +testem.log +/typings + +# e2e +/e2e/*.js +/e2e/*.map + +#System Files +.DS_Store +Thumbs.db + +!src/styles.css +!karma.conf.js +!protractor.conf.js diff --git a/aio/content/examples/cli-quickstart/README.md b/aio/content/examples/cli-quickstart/README.md new file mode 100644 index 00000000000..efe9ec67ae7 --- /dev/null +++ b/aio/content/examples/cli-quickstart/README.md @@ -0,0 +1,27 @@ +# 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/aio/content/examples/cli-quickstart/ts/bs-config.cli.json b/aio/content/examples/cli-quickstart/bs-config.cli.json similarity index 100% rename from aio/content/examples/cli-quickstart/ts/bs-config.cli.json rename to aio/content/examples/cli-quickstart/bs-config.cli.json diff --git a/aio/content/examples/cli-quickstart/ts/e2e/app.e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts similarity index 100% rename from aio/content/examples/cli-quickstart/ts/e2e/app.e2e-spec.ts rename to aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts diff --git a/aio/content/examples/cli-quickstart/ts/e2e/app.po.ts b/aio/content/examples/cli-quickstart/e2e/app.po.ts similarity index 100% rename from aio/content/examples/cli-quickstart/ts/e2e/app.po.ts rename to aio/content/examples/cli-quickstart/e2e/app.po.ts diff --git a/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json b/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json new file mode 100644 index 00000000000..74c2bca131a --- /dev/null +++ b/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ], + "outDir": "../dist/out-tsc-e2e", + "module": "commonjs", + "target": "es6", + "types":[ + "jasmine", + "node" + ] + } +} diff --git a/aio/content/examples/cli-quickstart/ts/example-config.json b/aio/content/examples/cli-quickstart/example-config.json similarity index 100% rename from aio/content/examples/cli-quickstart/ts/example-config.json rename to aio/content/examples/cli-quickstart/example-config.json diff --git a/aio/content/examples/cli-quickstart/ts/src/app/app.component.css b/aio/content/examples/cli-quickstart/src/app/app.component.css similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/app/app.component.css rename to aio/content/examples/cli-quickstart/src/app/app.component.css diff --git a/aio/content/examples/cli-quickstart/ts/src/app/app.component.html b/aio/content/examples/cli-quickstart/src/app/app.component.html similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/app/app.component.html rename to aio/content/examples/cli-quickstart/src/app/app.component.html diff --git a/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts new file mode 100644 index 00000000000..c740bcd745e --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/app/app.component.spec.ts @@ -0,0 +1,32 @@ +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 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/aio/content/examples/cli-quickstart/ts/src/app/app.component.ts b/aio/content/examples/cli-quickstart/src/app/app.component.ts similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/app/app.component.ts rename to aio/content/examples/cli-quickstart/src/app/app.component.ts diff --git a/aio/content/examples/cli-quickstart/src/app/app.module.ts b/aio/content/examples/cli-quickstart/src/app/app.module.ts new file mode 100644 index 00000000000..67ae49119ba --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/app/app.module.ts @@ -0,0 +1,20 @@ +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'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + HttpModule + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/aio/content/examples/cli-quickstart/ts/src/assets/.gitkeep b/aio/content/examples/cli-quickstart/src/assets/.gitkeep similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/assets/.gitkeep rename to aio/content/examples/cli-quickstart/src/assets/.gitkeep diff --git a/aio/content/examples/cli-quickstart/ts/src/environments/environment.prod.ts b/aio/content/examples/cli-quickstart/src/environments/environment.prod.ts similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/environments/environment.prod.ts rename to aio/content/examples/cli-quickstart/src/environments/environment.prod.ts diff --git a/aio/content/examples/cli-quickstart/src/environments/environment.ts b/aio/content/examples/cli-quickstart/src/environments/environment.ts new file mode 100644 index 00000000000..b7f639aecac --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `.angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/aio/content/examples/cli-quickstart/ts/src/favicon.ico b/aio/content/examples/cli-quickstart/src/favicon.ico similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/favicon.ico rename to aio/content/examples/cli-quickstart/src/favicon.ico diff --git a/aio/content/examples/cli-quickstart/ts/src/index.html b/aio/content/examples/cli-quickstart/src/index.html similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/index.html rename to aio/content/examples/cli-quickstart/src/index.html diff --git a/aio/content/examples/cli-quickstart/src/main.ts b/aio/content/examples/cli-quickstart/src/main.ts new file mode 100644 index 00000000000..a9ca1caf8ce --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/main.ts @@ -0,0 +1,11 @@ +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/aio/content/examples/cli-quickstart/src/polyfills.ts b/aio/content/examples/cli-quickstart/src/polyfills.ts new file mode 100644 index 00000000000..53bdaf1b864 --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/polyfills.ts @@ -0,0 +1,68 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following to support `@angular/animation`. */ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + +/** Evergreen browsers require these. **/ +import 'core-js/es6/reflect'; +import 'core-js/es7/reflect'; + + +/** ALL Firefox browsers require the following to support `@angular/animation`. **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. diff --git a/aio/content/examples/cli-quickstart/src/test.ts b/aio/content/examples/cli-quickstart/src/test.ts new file mode 100644 index 00000000000..9bf72267e9b --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/test.ts @@ -0,0 +1,32 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +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 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare var __karma__: any; +declare var require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.app.json b/aio/content/examples/cli-quickstart/src/tsconfig.app.json new file mode 100644 index 00000000000..9f12c4b8498 --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/tsconfig.app.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016", + "dom" + ], + "outDir": "../out-tsc/app", + "target": "es5", + "module": "es2015", + "baseUrl": "", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.spec.json b/aio/content/examples/cli-quickstart/src/tsconfig.spec.json new file mode 100644 index 00000000000..6c5160e12e9 --- /dev/null +++ b/aio/content/examples/cli-quickstart/src/tsconfig.spec.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ], + "outDir": "../out-tsc/spec", + "module": "commonjs", + "target": "es6", + "baseUrl": "", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts" + ] +} diff --git a/aio/content/examples/cli-quickstart/ts/.gitignore b/aio/content/examples/cli-quickstart/ts/.gitignore deleted file mode 100644 index fd172dea98f..00000000000 --- a/aio/content/examples/cli-quickstart/ts/.gitignore +++ /dev/null @@ -1,42 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp - -# dependencies -/node_modules - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ - -# IDE - VSCode -.vscode/ -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json - -# misc -/.sass-cache -/connect.lock -/coverage/* -/libpeerconnection.log -npm-debug.log -testem.log -/typings - -# e2e -/e2e/*.js -/e2e/*.map - -#System Files -.DS_Store -Thumbs.db - -!src/styles.css diff --git a/aio/content/examples/cli-quickstart/ts/README.md b/aio/content/examples/cli-quickstart/ts/README.md deleted file mode 100644 index ae9b1a3643f..00000000000 --- a/aio/content/examples/cli-quickstart/ts/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# MyApp - -This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5. - -## 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`. - -## Deploying to GitHub Pages - -Run `ng github-pages:deploy` to deploy to GitHub Pages. - -## 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/aio/content/examples/cli-quickstart/ts/angular-cli.json b/aio/content/examples/cli-quickstart/ts/angular-cli.json deleted file mode 100644 index 9f23ed85fbd..00000000000 --- a/aio/content/examples/cli-quickstart/ts/angular-cli.json +++ /dev/null @@ -1,59 +0,0 @@ -{ - "project": { - "version": "1.0.0-beta.25.5", - "name": "my-app" - }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": [ - "assets", - "favicon.ico" - ], - "index": "index.html", - "main": "main.ts", - "test": "test.ts", - "tsconfig": "tsconfig.json", - "prefix": "app", - "mobile": false, - "styles": [ - "styles.css" - ], - "scripts": [], - "environments": { - "source": "environments/environment.ts", - "dev": "environments/environment.ts", - "prod": "environments/environment.prod.ts" - } - } - ], - "addons": [], - "packages": [], - "e2e": { - "protractor": { - "config": "./protractor.conf.js" - } - }, - "test": { - "karma": { - "config": "./karma.conf.js" - } - }, - "defaults": { - "styleExt": "css", - "prefixInterfaces": false, - "inline": { - "style": false, - "template": false - }, - "spec": { - "class": false, - "component": true, - "directive": true, - "module": false, - "pipe": true, - "service": true - } - } -} diff --git a/aio/content/examples/cli-quickstart/ts/src/app/app.component.spec.ts b/aio/content/examples/cli-quickstart/ts/src/app/app.component.spec.ts deleted file mode 100644 index 72ee705d0ba..00000000000 --- a/aio/content/examples/cli-quickstart/ts/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* tslint:disable:no-unused-variable */ - -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/aio/content/examples/cli-quickstart/ts/src/app/app.module.ts b/aio/content/examples/cli-quickstart/ts/src/app/app.module.ts deleted file mode 100644 index 33ec8682323..00000000000 --- a/aio/content/examples/cli-quickstart/ts/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 { HttpModule } from '@angular/http'; - -import { AppComponent } from './app.component'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/aio/content/examples/cli-quickstart/ts/src/environments/environment.ts b/aio/content/examples/cli-quickstart/ts/src/environments/environment.ts deleted file mode 100644 index 00313f16648..00000000000 --- a/aio/content/examples/cli-quickstart/ts/src/environments/environment.ts +++ /dev/null @@ -1,8 +0,0 @@ -// The file contents for the current environment will overwrite these during build. -// The build system defaults to the dev environment which uses `environment.ts`, but if you do -// `ng build --env=prod` then `environment.prod.ts` will be used instead. -// The list of which env maps to which file can be found in `angular-cli.json`. - -export const environment = { - production: false -}; diff --git a/aio/content/examples/cli-quickstart/ts/src/main.ts b/aio/content/examples/cli-quickstart/ts/src/main.ts deleted file mode 100644 index ac78a713c2d..00000000000 --- a/aio/content/examples/cli-quickstart/ts/src/main.ts +++ /dev/null @@ -1,12 +0,0 @@ -import './polyfills.ts'; - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { enableProdMode } from '@angular/core'; -import { environment } from './environments/environment'; -import { AppModule } from './app/app.module'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/aio/content/examples/cli-quickstart/ts/src/polyfills.ts b/aio/content/examples/cli-quickstart/ts/src/polyfills.ts deleted file mode 100644 index 4749399c2da..00000000000 --- a/aio/content/examples/cli-quickstart/ts/src/polyfills.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file includes polyfills needed by Angular and is loaded before -// the app. You can add your own extra polyfills to this file. -import 'core-js/es6/symbol'; -import 'core-js/es6/object'; -import 'core-js/es6/function'; -import 'core-js/es6/parse-int'; -import 'core-js/es6/parse-float'; -import 'core-js/es6/number'; -import 'core-js/es6/math'; -import 'core-js/es6/string'; -import 'core-js/es6/date'; -import 'core-js/es6/array'; -import 'core-js/es6/regexp'; -import 'core-js/es6/map'; -import 'core-js/es6/set'; -import 'core-js/es6/reflect'; - -import 'core-js/es7/reflect'; -import 'zone.js/dist/zone'; diff --git a/aio/content/examples/cli-quickstart/ts/src/test.ts b/aio/content/examples/cli-quickstart/ts/src/test.ts deleted file mode 100644 index f9d51efd05f..00000000000 --- a/aio/content/examples/cli-quickstart/ts/src/test.ts +++ /dev/null @@ -1,32 +0,0 @@ -import './polyfills.ts'; - -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 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; -import { getTestBed } from '@angular/core/testing'; -import { - BrowserDynamicTestingModule, - platformBrowserDynamicTesting -} from '@angular/platform-browser-dynamic/testing'; - -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare var __karma__: any; -declare var require: any; - -// Prevent Karma from running prematurely. -__karma__.loaded = function () {}; - -// First, initialize the Angular testing environment. -getTestBed().initTestEnvironment( - BrowserDynamicTestingModule, - platformBrowserDynamicTesting() -); -// Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); -// And load the modules. -context.keys().map(context); -// Finally, start Karma to run the tests. -__karma__.start(); diff --git a/aio/content/examples/cli-quickstart/tsconfig.json b/aio/content/examples/cli-quickstart/tsconfig.json new file mode 100644 index 00000000000..cde5e35054a --- /dev/null +++ b/aio/content/examples/cli-quickstart/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "sourceMap": true, + "declaration": false, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2016" + ] + } +} diff --git a/aio/content/examples/cli-quickstart/zipper.json b/aio/content/examples/cli-quickstart/zipper.json new file mode 100644 index 00000000000..70bf41659e4 --- /dev/null +++ b/aio/content/examples/cli-quickstart/zipper.json @@ -0,0 +1,11 @@ +{ + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[0-9].*", + ".angular-cli.json", + "protractor.conf.js" + ], + "removeSystemJsConfig": true, + "type": "cli" +} diff --git a/aio/content/examples/component-styles/e2e-spec.ts b/aio/content/examples/component-styles/e2e-spec.ts index 28a44221a4e..32bd30832c7 100644 --- a/aio/content/examples/component-styles/e2e-spec.ts +++ b/aio/content/examples/component-styles/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by } from 'protractor'; @@ -65,9 +65,4 @@ describe('Component Style Tests', function () { expect(externalLi.getCssValue('listStyleType')).not.toEqual('square'); }); - it('supports relative loading with moduleId', function() { - let host = element(by.css('quest-summary')); - expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff - }); - }); diff --git a/aio/content/examples/cb-set-document-title/ts/example-config.json b/aio/content/examples/component-styles/example-config.json similarity index 100% rename from aio/content/examples/cb-set-document-title/ts/example-config.json rename to aio/content/examples/component-styles/example-config.json diff --git a/aio/content/examples/component-styles/ts/plnkr.json b/aio/content/examples/component-styles/plnkr.json similarity index 100% rename from aio/content/examples/component-styles/ts/plnkr.json rename to aio/content/examples/component-styles/plnkr.json diff --git a/aio/content/examples/component-styles/ts/src/app/app.module.ts b/aio/content/examples/component-styles/src/app/app.module.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/app.module.ts rename to aio/content/examples/component-styles/src/app/app.module.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero-app-main.component.ts b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-app-main.component.ts rename to aio/content/examples/component-styles/src/app/hero-app-main.component.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero-app.component.ts b/aio/content/examples/component-styles/src/app/hero-app.component.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-app.component.ts rename to aio/content/examples/component-styles/src/app/hero-app.component.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero-controls.component.ts b/aio/content/examples/component-styles/src/app/hero-controls.component.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-controls.component.ts rename to aio/content/examples/component-styles/src/app/hero-controls.component.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero-details-box.css b/aio/content/examples/component-styles/src/app/hero-details-box.css similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-details-box.css rename to aio/content/examples/component-styles/src/app/hero-details-box.css diff --git a/aio/content/examples/component-styles/ts/src/app/hero-details.component.css b/aio/content/examples/component-styles/src/app/hero-details.component.css similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-details.component.css rename to aio/content/examples/component-styles/src/app/hero-details.component.css diff --git a/aio/content/examples/component-styles/ts/src/app/hero-details.component.ts b/aio/content/examples/component-styles/src/app/hero-details.component.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-details.component.ts rename to aio/content/examples/component-styles/src/app/hero-details.component.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero-team.component.css b/aio/content/examples/component-styles/src/app/hero-team.component.css similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-team.component.css rename to aio/content/examples/component-styles/src/app/hero-team.component.css diff --git a/aio/content/examples/component-styles/ts/src/app/hero-team.component.ts b/aio/content/examples/component-styles/src/app/hero-team.component.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero-team.component.ts rename to aio/content/examples/component-styles/src/app/hero-team.component.ts diff --git a/aio/content/examples/component-styles/ts/src/app/hero.ts b/aio/content/examples/component-styles/src/app/hero.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/hero.ts rename to aio/content/examples/component-styles/src/app/hero.ts diff --git a/aio/content/examples/component-styles/ts/src/app/quest-summary.component.css b/aio/content/examples/component-styles/src/app/quest-summary.component.css similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/quest-summary.component.css rename to aio/content/examples/component-styles/src/app/quest-summary.component.css diff --git a/aio/content/examples/component-styles/ts/src/app/quest-summary.component.html b/aio/content/examples/component-styles/src/app/quest-summary.component.html similarity index 100% rename from aio/content/examples/component-styles/ts/src/app/quest-summary.component.html rename to aio/content/examples/component-styles/src/app/quest-summary.component.html diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.ts b/aio/content/examples/component-styles/src/app/quest-summary.component.ts new file mode 100644 index 00000000000..2a2dc65fe08 --- /dev/null +++ b/aio/content/examples/component-styles/src/app/quest-summary.component.ts @@ -0,0 +1,20 @@ +/* tslint:disable:no-unused-variable */ +// #docplaster +import { Component, ViewEncapsulation } from '@angular/core'; + +// #docregion +@Component({ + selector: '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/aio/content/examples/component-styles/ts/src/index.html b/aio/content/examples/component-styles/src/index.html similarity index 100% rename from aio/content/examples/component-styles/ts/src/index.html rename to aio/content/examples/component-styles/src/index.html diff --git a/aio/content/examples/component-styles/ts/src/main.ts b/aio/content/examples/component-styles/src/main.ts similarity index 100% rename from aio/content/examples/component-styles/ts/src/main.ts rename to aio/content/examples/component-styles/src/main.ts diff --git a/aio/content/examples/component-styles/ts/plnkr.no-link.html b/aio/content/examples/component-styles/ts/plnkr.no-link.html deleted file mode 100644 index 12978b40771..00000000000 --- a/aio/content/examples/component-styles/ts/plnkr.no-link.html +++ /dev/null @@ -1,409 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/component-styles/ts/src/app/quest-summary.component.ts b/aio/content/examples/component-styles/ts/src/app/quest-summary.component.ts deleted file mode 100644 index c43239e3687..00000000000 --- a/aio/content/examples/component-styles/ts/src/app/quest-summary.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* tslint:disable:no-unused-variable */ -// #docplaster -import { Component, ViewEncapsulation } from '@angular/core'; - -// #docregion -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/dependency-injection/e2e-spec.ts b/aio/content/examples/dependency-injection/e2e-spec.ts index 28fe22a9cbc..5b46dd77d91 100644 --- a/aio/content/examples/dependency-injection/e2e-spec.ts +++ b/aio/content/examples/dependency-injection/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by, ElementFinder } from 'protractor'; @@ -163,7 +163,7 @@ describe('Dependency Injection Tests', function () { describe('after button click', function() { - beforeAll(function (done) { + beforeAll(function (done: any) { let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0); buttonEle.click().then(done, done); }); diff --git a/aio/content/examples/component-styles/ts/example-config.json b/aio/content/examples/dependency-injection/example-config.json similarity index 100% rename from aio/content/examples/component-styles/ts/example-config.json rename to aio/content/examples/dependency-injection/example-config.json diff --git a/aio/content/examples/dependency-injection/ts/plnkr.json b/aio/content/examples/dependency-injection/plnkr.json similarity index 100% rename from aio/content/examples/dependency-injection/ts/plnkr.json rename to aio/content/examples/dependency-injection/plnkr.json diff --git a/aio/content/examples/dependency-injection/ts/src/app/app.component.1.ts b/aio/content/examples/dependency-injection/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/app.component.1.ts rename to aio/content/examples/dependency-injection/src/app/app.component.1.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/app.component.2.ts b/aio/content/examples/dependency-injection/src/app/app.component.2.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/app.component.2.ts rename to aio/content/examples/dependency-injection/src/app/app.component.2.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/app.component.ts b/aio/content/examples/dependency-injection/src/app/app.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/app.component.ts rename to aio/content/examples/dependency-injection/src/app/app.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/app.config.ts b/aio/content/examples/dependency-injection/src/app/app.config.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/app.config.ts rename to aio/content/examples/dependency-injection/src/app/app.config.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/app.module.ts b/aio/content/examples/dependency-injection/src/app/app.module.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/app.module.ts rename to aio/content/examples/dependency-injection/src/app/app.module.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car-creations.ts b/aio/content/examples/dependency-injection/src/app/car/car-creations.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car-creations.ts rename to aio/content/examples/dependency-injection/src/app/car/car-creations.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car-factory.ts b/aio/content/examples/dependency-injection/src/app/car/car-factory.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car-factory.ts rename to aio/content/examples/dependency-injection/src/app/car/car-factory.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car-injector.ts b/aio/content/examples/dependency-injection/src/app/car/car-injector.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car-injector.ts rename to aio/content/examples/dependency-injection/src/app/car/car-injector.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car-no-di.ts b/aio/content/examples/dependency-injection/src/app/car/car-no-di.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car-no-di.ts rename to aio/content/examples/dependency-injection/src/app/car/car-no-di.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car.component.ts b/aio/content/examples/dependency-injection/src/app/car/car.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car.component.ts rename to aio/content/examples/dependency-injection/src/app/car/car.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/car/car.ts b/aio/content/examples/dependency-injection/src/app/car/car.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/car/car.ts rename to aio/content/examples/dependency-injection/src/app/car/car.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.1.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.2.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero-list.component.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.1.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.2.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.provider.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero.service.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero.service.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/hero.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/hero.ts rename to aio/content/examples/dependency-injection/src/app/heroes/hero.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/heroes.component.1.ts rename to aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/heroes.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/heroes.component.ts rename to aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/heroes/mock-heroes.ts b/aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/heroes/mock-heroes.ts rename to aio/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts diff --git a/aio/content/examples/dependency-injection/src/app/injector.component.ts b/aio/content/examples/dependency-injection/src/app/injector.component.ts new file mode 100644 index 00000000000..1b1a065e4c6 --- /dev/null +++ b/aio/content/examples/dependency-injection/src/app/injector.component.ts @@ -0,0 +1,49 @@ +// #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: 'my-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/aio/content/examples/dependency-injection/ts/src/app/logger.service.ts b/aio/content/examples/dependency-injection/src/app/logger.service.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/logger.service.ts rename to aio/content/examples/dependency-injection/src/app/logger.service.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/providers.component.ts rename to aio/content/examples/dependency-injection/src/app/providers.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/test.component.ts b/aio/content/examples/dependency-injection/src/app/test.component.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/test.component.ts rename to aio/content/examples/dependency-injection/src/app/test.component.ts diff --git a/aio/content/examples/dependency-injection/ts/src/app/user.service.ts b/aio/content/examples/dependency-injection/src/app/user.service.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/app/user.service.ts rename to aio/content/examples/dependency-injection/src/app/user.service.ts diff --git a/aio/content/examples/dependency-injection/ts/src/index.html b/aio/content/examples/dependency-injection/src/index.html similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/index.html rename to aio/content/examples/dependency-injection/src/index.html diff --git a/aio/content/examples/dependency-injection/ts/src/main.ts b/aio/content/examples/dependency-injection/src/main.ts similarity index 100% rename from aio/content/examples/dependency-injection/ts/src/main.ts rename to aio/content/examples/dependency-injection/src/main.ts diff --git a/aio/content/examples/dependency-injection/ts/plnkr.no-link.html b/aio/content/examples/dependency-injection/ts/plnkr.no-link.html deleted file mode 100644 index d4219166e9a..00000000000 --- a/aio/content/examples/dependency-injection/ts/plnkr.no-link.html +++ /dev/null @@ -1,986 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/dependency-injection/ts/src/app/injector.component.ts b/aio/content/examples/dependency-injection/ts/src/app/injector.component.ts deleted file mode 100644 index 7c9e8a56e53..00000000000 --- a/aio/content/examples/dependency-injection/ts/src/app/injector.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -// #docplaster -// #docregion -import { Component, Injector } 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: 'my-injectors', - template: ` -

Other Injections

-
{{car.drive()}}
-
{{hero.name}}
-
{{rodent}}
- `, - providers: [Car, Engine, Tires, heroServiceProvider, Logger] -}) -export class InjectorComponent { - car: Car = this.injector.get(Car); - - // #docregion get-hero-service - heroService: HeroService = this.injector.get(HeroService); - // #enddocregion get-hero-service - hero: Hero = this.heroService.getHeroes()[0]; - - constructor(private injector: Injector) { } - - 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/aio/content/examples/deployment/ts/.gitignore b/aio/content/examples/deployment/.gitignore similarity index 100% rename from aio/content/examples/deployment/ts/.gitignore rename to aio/content/examples/deployment/.gitignore diff --git a/aio/content/examples/dependency-injection/ts/example-config.json b/aio/content/examples/deployment/example-config.json similarity index 100% rename from aio/content/examples/dependency-injection/ts/example-config.json rename to aio/content/examples/deployment/example-config.json diff --git a/aio/content/examples/deployment/ts/src/app/app.component.ts b/aio/content/examples/deployment/src/app/app.component.ts similarity index 100% rename from aio/content/examples/deployment/ts/src/app/app.component.ts rename to aio/content/examples/deployment/src/app/app.component.ts diff --git a/aio/content/examples/deployment/ts/src/app/app.module.ts b/aio/content/examples/deployment/src/app/app.module.ts similarity index 100% rename from aio/content/examples/deployment/ts/src/app/app.module.ts rename to aio/content/examples/deployment/src/app/app.module.ts diff --git a/aio/content/examples/deployment/ts/src/app/crisis-list.component.ts b/aio/content/examples/deployment/src/app/crisis-list.component.ts similarity index 100% rename from aio/content/examples/deployment/ts/src/app/crisis-list.component.ts rename to aio/content/examples/deployment/src/app/crisis-list.component.ts diff --git a/aio/content/examples/deployment/ts/src/app/hero-list.component.ts b/aio/content/examples/deployment/src/app/hero-list.component.ts similarity index 100% rename from aio/content/examples/deployment/ts/src/app/hero-list.component.ts rename to aio/content/examples/deployment/src/app/hero-list.component.ts diff --git a/aio/content/examples/deployment/src/index.html b/aio/content/examples/deployment/src/index.html new file mode 100644 index 00000000000..770e64bc4de --- /dev/null +++ b/aio/content/examples/deployment/src/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Simple Deployment + + + + + + + + + + + + + + + + + + + + + + + loading... + + + diff --git a/aio/content/examples/deployment/ts/src/main.ts b/aio/content/examples/deployment/src/main.ts similarity index 100% rename from aio/content/examples/deployment/ts/src/main.ts rename to aio/content/examples/deployment/src/main.ts diff --git a/aio/content/examples/deployment/ts/src/systemjs.config.server.js b/aio/content/examples/deployment/src/systemjs.config.server.js similarity index 100% rename from aio/content/examples/deployment/ts/src/systemjs.config.server.js rename to aio/content/examples/deployment/src/systemjs.config.server.js diff --git a/aio/content/examples/deployment/ts/src/index.html b/aio/content/examples/deployment/ts/src/index.html deleted file mode 100644 index ba6ba3dea67..00000000000 --- a/aio/content/examples/deployment/ts/src/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - Simple Deployment - - - - - - - - - - - - - - - - - - - - - - - loading... - - - diff --git a/aio/content/examples/deployment/ts/example-config.json b/aio/content/examples/displaying-data/example-config.json similarity index 100% rename from aio/content/examples/deployment/ts/example-config.json rename to aio/content/examples/displaying-data/example-config.json diff --git a/aio/content/examples/displaying-data/ts/plnkr.json b/aio/content/examples/displaying-data/plnkr.json similarity index 100% rename from aio/content/examples/displaying-data/ts/plnkr.json rename to aio/content/examples/displaying-data/plnkr.json diff --git a/aio/content/examples/displaying-data/ts/src/app/app-ctor.component.ts b/aio/content/examples/displaying-data/src/app/app-ctor.component.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app-ctor.component.ts rename to aio/content/examples/displaying-data/src/app/app-ctor.component.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/app.component.1.ts b/aio/content/examples/displaying-data/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app.component.1.ts rename to aio/content/examples/displaying-data/src/app/app.component.1.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/app.component.2.ts b/aio/content/examples/displaying-data/src/app/app.component.2.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app.component.2.ts rename to aio/content/examples/displaying-data/src/app/app.component.2.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/app.component.3.ts b/aio/content/examples/displaying-data/src/app/app.component.3.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app.component.3.ts rename to aio/content/examples/displaying-data/src/app/app.component.3.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/app.component.ts b/aio/content/examples/displaying-data/src/app/app.component.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app.component.ts rename to aio/content/examples/displaying-data/src/app/app.component.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/app.module.ts b/aio/content/examples/displaying-data/src/app/app.module.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/app.module.ts rename to aio/content/examples/displaying-data/src/app/app.module.ts diff --git a/aio/content/examples/displaying-data/ts/src/app/hero.ts b/aio/content/examples/displaying-data/src/app/hero.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/app/hero.ts rename to aio/content/examples/displaying-data/src/app/hero.ts diff --git a/aio/content/examples/displaying-data/ts/src/index.html b/aio/content/examples/displaying-data/src/index.html similarity index 100% rename from aio/content/examples/displaying-data/ts/src/index.html rename to aio/content/examples/displaying-data/src/index.html diff --git a/aio/content/examples/displaying-data/ts/src/main.ts b/aio/content/examples/displaying-data/src/main.ts similarity index 100% rename from aio/content/examples/displaying-data/ts/src/main.ts rename to aio/content/examples/displaying-data/src/main.ts diff --git a/aio/content/examples/displaying-data/ts/plnkr.no-link.html b/aio/content/examples/displaying-data/ts/plnkr.no-link.html deleted file mode 100644 index 067e72dea27..00000000000 --- a/aio/content/examples/displaying-data/ts/plnkr.no-link.html +++ /dev/null @@ -1,228 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/displaying-data/ts/example-config.json b/aio/content/examples/forms/example-config.json similarity index 100% rename from aio/content/examples/displaying-data/ts/example-config.json rename to aio/content/examples/forms/example-config.json diff --git a/aio/content/examples/forms/js/example-config.json b/aio/content/examples/forms/js/example-config.json index e69de29bb2d..81f31aaf0d9 100644 --- a/aio/content/examples/forms/js/example-config.json +++ b/aio/content/examples/forms/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/aio/content/examples/forms/js/plnkr.no-link.html b/aio/content/examples/forms/js/plnkr.no-link.html deleted file mode 100644 index 67697d6b1a4..00000000000 --- a/aio/content/examples/forms/js/plnkr.no-link.html +++ /dev/null @@ -1,440 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/forms/js/src/app/app.component.js b/aio/content/examples/forms/js/src/app/app.component.js deleted file mode 100644 index 56bd9824161..00000000000 --- a/aio/content/examples/forms/js/src/app/app.component.js +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -(function(app) { - app.AppComponent = ng.core - .Component({ - selector: 'my-app', - template: '' - }) - .Class({ - constructor: function() {} - }); -})(window.app || (window.app = {})); diff --git a/aio/content/examples/forms/js/src/app/app.module.js b/aio/content/examples/forms/js/src/app/app.module.js deleted file mode 100644 index 92c7f8b9e54..00000000000 --- a/aio/content/examples/forms/js/src/app/app.module.js +++ /dev/null @@ -1,19 +0,0 @@ -// #docplaster -// #docregion -(function(app) { - app.AppModule = - ng.core.NgModule({ - imports: [ - ng.platformBrowser.BrowserModule, - ng.forms.FormsModule - ], - declarations: [ - app.AppComponent, - app.HeroFormComponent - ], - bootstrap: [ app.AppComponent ] - }) - .Class({ - constructor: function() {} - }); -})(window.app || (window.app = {})); diff --git a/aio/content/examples/forms/js/src/app/hero-form.component.js b/aio/content/examples/forms/js/src/app/hero-form.component.js deleted file mode 100644 index 505993a1fd5..00000000000 --- a/aio/content/examples/forms/js/src/app/hero-form.component.js +++ /dev/null @@ -1,52 +0,0 @@ -// #docplaster -// #docregion -// #docregion first, final -(function(app) { - app.HeroFormComponent = ng.core - .Component({ - selector: 'hero-form', - templateUrl: 'app/hero-form.component.html' - }) - .Class({ - // #docregion submitted - constructor: [function() { - // #enddocregion submitted - this.powers = ['Really Smart', 'Super Flexible', - 'Super Hot', 'Weather Changer' - ]; - - this.model = new app.Hero(18, 'Dr IQ', this.powers[0], - 'Chuck Overstreet'); - - // #docregion submitted - this.submitted = false; - }], - onSubmit: function() { - this.submitted = true; - }, - // #enddocregion submitted - - // #enddocregion final - // TODO: Remove this when we're done - diagnostic: function() { - return JSON.stringify(this.model); - }, - // #enddocregion first - - - //////// DO NOT SHOW IN DOCS //////// - - // Reveal in html: - // AlterEgo via form.controls = {{showFormControls(hf)}} - showFormControls: function(form) { - return form.controls['alterEgo'] && - // #docregion form-controls - form.controls['name'].value; // Dr. IQ - // #enddocregion form-controls - }, - ///////////////////////////// - - // #docregion first, final - }); -})(window.app || (window.app = {})); -// #enddocregion first, final diff --git a/aio/content/examples/forms/js/src/app/hero.js b/aio/content/examples/forms/js/src/app/hero.js deleted file mode 100644 index 9c2449c9229..00000000000 --- a/aio/content/examples/forms/js/src/app/hero.js +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -(function(app) { - app.Hero = Hero; - - function Hero(id, name, power, alterEgo) { - this.id = id; - this.name = name; - this.power = power; - this.alterEgo = alterEgo; - } -})(window.app || (window.app = {})); diff --git a/aio/content/examples/forms/js/src/index.html b/aio/content/examples/forms/js/src/index.html index 9715d2476ee..3a41d74a3b7 100644 --- a/aio/content/examples/forms/js/src/index.html +++ b/aio/content/examples/forms/js/src/index.html @@ -24,9 +24,9 @@ - + diff --git a/aio/content/examples/forms/js/src/main.js b/aio/content/examples/forms/js/src/main.js deleted file mode 100644 index 785823fa846..00000000000 --- a/aio/content/examples/forms/js/src/main.js +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -(function(app) { - document.addEventListener('DOMContentLoaded', function() { - ng.platformBrowserDynamic - .platformBrowserDynamic() - .bootstrapModule(app.AppModule); - }); -})(window.app || (window.app = {})); diff --git a/aio/content/examples/forms/ts/plnkr.json b/aio/content/examples/forms/plnkr.json similarity index 100% rename from aio/content/examples/forms/ts/plnkr.json rename to aio/content/examples/forms/plnkr.json diff --git a/aio/content/examples/forms/ts/src/app/app.component.ts b/aio/content/examples/forms/src/app/app.component.ts similarity index 100% rename from aio/content/examples/forms/ts/src/app/app.component.ts rename to aio/content/examples/forms/src/app/app.component.ts diff --git a/aio/content/examples/forms/ts/src/app/app.module.ts b/aio/content/examples/forms/src/app/app.module.ts similarity index 100% rename from aio/content/examples/forms/ts/src/app/app.module.ts rename to aio/content/examples/forms/src/app/app.module.ts diff --git a/aio/content/examples/forms/ts/src/app/hero-form.component.html b/aio/content/examples/forms/src/app/hero-form.component.html similarity index 100% rename from aio/content/examples/forms/ts/src/app/hero-form.component.html rename to aio/content/examples/forms/src/app/hero-form.component.html diff --git a/aio/content/examples/forms/src/app/hero-form.component.ts b/aio/content/examples/forms/src/app/hero-form.component.ts new file mode 100644 index 00000000000..34be523a7f1 --- /dev/null +++ b/aio/content/examples/forms/src/app/hero-form.component.ts @@ -0,0 +1,59 @@ +// #docplaster +// #docregion , v1, final +import { Component } from '@angular/core'; + +import { Hero } from './hero'; + +@Component({ + selector: 'hero-form', + templateUrl: './hero-form.component.html' +}) +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/aio/content/examples/forms/ts/src/app/hero.ts b/aio/content/examples/forms/src/app/hero.ts similarity index 100% rename from aio/content/examples/forms/ts/src/app/hero.ts rename to aio/content/examples/forms/src/app/hero.ts diff --git a/aio/content/examples/forms/ts/src/forms.css b/aio/content/examples/forms/src/forms.css similarity index 100% rename from aio/content/examples/forms/ts/src/forms.css rename to aio/content/examples/forms/src/forms.css diff --git a/aio/content/examples/forms/ts/src/index.html b/aio/content/examples/forms/src/index.html similarity index 100% rename from aio/content/examples/forms/ts/src/index.html rename to aio/content/examples/forms/src/index.html diff --git a/aio/content/examples/forms/ts/src/main.ts b/aio/content/examples/forms/src/main.ts similarity index 100% rename from aio/content/examples/forms/ts/src/main.ts rename to aio/content/examples/forms/src/main.ts diff --git a/aio/content/examples/forms/ts/plnkr.no-link.html b/aio/content/examples/forms/ts/plnkr.no-link.html deleted file mode 100644 index 7ce8c13e4e9..00000000000 --- a/aio/content/examples/forms/ts/plnkr.no-link.html +++ /dev/null @@ -1,461 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/forms/ts/src/app/hero-form.component.ts b/aio/content/examples/forms/ts/src/app/hero-form.component.ts deleted file mode 100644 index b2db8aaafd0..00000000000 --- a/aio/content/examples/forms/ts/src/app/hero-form.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -// #docplaster -// #docregion , v1, final -import { Component } from '@angular/core'; - -import { Hero } from './hero'; - -@Component({ - moduleId: module.id, - selector: 'hero-form', - templateUrl: './hero-form.component.html' -}) -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/aio/content/examples/forms/ts/example-config.json b/aio/content/examples/hierarchical-dependency-injection/example-config.json similarity index 100% rename from aio/content/examples/forms/ts/example-config.json rename to aio/content/examples/hierarchical-dependency-injection/example-config.json diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/plnkr.json b/aio/content/examples/hierarchical-dependency-injection/plnkr.json similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/plnkr.json rename to aio/content/examples/hierarchical-dependency-injection/plnkr.json diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/app.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/app.component.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/app.module.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/app.module.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/app.module.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/car.components.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/car.components.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/car.services.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/car.services.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/car.services.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/car.services.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.css b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.css rename to aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.html rename to aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts new file mode 100644 index 00000000000..ad8e0153d95 --- /dev/null +++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts @@ -0,0 +1,44 @@ +// #docregion +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { HeroTaxReturn } from './hero'; +import { HeroTaxReturnService } from './hero-tax-return.service'; + +@Component({ + selector: '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/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.service.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/hero.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/heroes-list.component.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/heroes.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/heroes.service.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html new file mode 100644 index 00000000000..75e5ba3237a --- /dev/null +++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html @@ -0,0 +1,6 @@ +
+

Villains

+
    +
  • {{villain.name}}
  • +
+
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts new file mode 100644 index 00000000000..5226d4f2a9a --- /dev/null +++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts @@ -0,0 +1,20 @@ +// #docregion +import { Component } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { Villain, VillainsService } from './villains.service'; + +// #docregion metadata +@Component({ + selector: '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/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains.service.ts rename to aio/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/index.html b/aio/content/examples/hierarchical-dependency-injection/src/index.html similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/index.html rename to aio/content/examples/hierarchical-dependency-injection/src/index.html diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/main.ts b/aio/content/examples/hierarchical-dependency-injection/src/main.ts similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/src/main.ts rename to aio/content/examples/hierarchical-dependency-injection/src/main.ts diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/plnkr.no-link.html b/aio/content/examples/hierarchical-dependency-injection/ts/plnkr.no-link.html deleted file mode 100644 index 797e470d2e5..00000000000 --- a/aio/content/examples/hierarchical-dependency-injection/ts/plnkr.no-link.html +++ /dev/null @@ -1,744 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts deleted file mode 100644 index 78d0f977630..00000000000 --- a/aio/content/examples/hierarchical-dependency-injection/ts/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({ - moduleId: module.id, - selector: '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(); - @Input() - get taxReturn(): HeroTaxReturn { - return this.heroTaxReturnService.taxReturn; - } - 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/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html b/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html deleted file mode 100644 index 4d1fb55482e..00000000000 --- a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-

Villains

-
    -
  • {{villain.name}}
  • -
-
diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts deleted file mode 100644 index 105aaca14f9..00000000000 --- a/aio/content/examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -import { Observable } from 'rxjs/Observable'; - -import { Villain, VillainsService } from './villains.service'; - -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'villains-list', - templateUrl: './villains-list.component.html', - providers: [ VillainsService ] -}) -// #enddocregion metadata -export class VillainsListComponent { - villaines: Observable; - - constructor(private villainesService: VillainsService) { - this.villaines = villainesService.getVillains(); - } -} diff --git a/aio/content/examples/hierarchical-dependency-injection/ts/example-config.json b/aio/content/examples/homepage-hello-world/example-config.json similarity index 100% rename from aio/content/examples/hierarchical-dependency-injection/ts/example-config.json rename to aio/content/examples/homepage-hello-world/example-config.json diff --git a/aio/content/examples/homepage-hello-world/ts/plnkr.json b/aio/content/examples/homepage-hello-world/plnkr.json similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/plnkr.json rename to aio/content/examples/homepage-hello-world/plnkr.json diff --git a/aio/content/examples/homepage-hello-world/ts/src/app/app.module.ts b/aio/content/examples/homepage-hello-world/src/app/app.module.ts similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/src/app/app.module.ts rename to aio/content/examples/homepage-hello-world/src/app/app.module.ts diff --git a/aio/content/examples/homepage-hello-world/ts/src/app/hello_world.html b/aio/content/examples/homepage-hello-world/src/app/hello_world.html similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/src/app/hello_world.html rename to aio/content/examples/homepage-hello-world/src/app/hello_world.html diff --git a/aio/content/examples/homepage-hello-world/src/app/hello_world.ts b/aio/content/examples/homepage-hello-world/src/app/hello_world.ts new file mode 100644 index 00000000000..145d22e1e91 --- /dev/null +++ b/aio/content/examples/homepage-hello-world/src/app/hello_world.ts @@ -0,0 +1,15 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + // Declare the tag name in index.html to where the component attaches + selector: 'hello-world', + + // Location of the template for this component + templateUrl: './hello_world.html' +}) +export class HelloWorldComponent { + + // Declaring the variable for binding with initial value + yourName: string = ''; +} diff --git a/aio/content/examples/homepage-hello-world/src/index.1.html b/aio/content/examples/homepage-hello-world/src/index.1.html new file mode 100644 index 00000000000..37c1bf787c6 --- /dev/null +++ b/aio/content/examples/homepage-hello-world/src/index.1.html @@ -0,0 +1,32 @@ + + + + + Angular Hello World + + + + + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/aio/content/examples/homepage-hello-world/ts/src/index.html b/aio/content/examples/homepage-hello-world/src/index.html similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/src/index.html rename to aio/content/examples/homepage-hello-world/src/index.html diff --git a/aio/content/examples/homepage-hello-world/ts/src/main.ts b/aio/content/examples/homepage-hello-world/src/main.ts similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/src/main.ts rename to aio/content/examples/homepage-hello-world/src/main.ts diff --git a/aio/content/examples/homepage-hello-world/ts/plnkr.no-link.html b/aio/content/examples/homepage-hello-world/ts/plnkr.no-link.html deleted file mode 100644 index be5787c68f9..00000000000 --- a/aio/content/examples/homepage-hello-world/ts/plnkr.no-link.html +++ /dev/null @@ -1,217 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/homepage-hello-world/ts/src/app/hello_world.ts b/aio/content/examples/homepage-hello-world/ts/src/app/hello_world.ts deleted file mode 100644 index 7bdf9944367..00000000000 --- a/aio/content/examples/homepage-hello-world/ts/src/app/hello_world.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - // Set the base for module-relative URLs - moduleId: module.id, - - // Declare the tag name in index.html to where the component attaches - selector: 'hello-world', - - // Location of the template for this component - templateUrl: './hello_world.html' -}) -export class HelloWorldComponent { - - // Declaring the variable for binding with initial value - yourName: string = ''; -} diff --git a/aio/content/examples/homepage-hello-world/ts/src/index.1.html b/aio/content/examples/homepage-hello-world/ts/src/index.1.html deleted file mode 100644 index a92d32fa9c9..00000000000 --- a/aio/content/examples/homepage-hello-world/ts/src/index.1.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - Angular Hello World - - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/homepage-hello-world/ts/example-config.json b/aio/content/examples/homepage-tabs/example-config.json similarity index 100% rename from aio/content/examples/homepage-hello-world/ts/example-config.json rename to aio/content/examples/homepage-tabs/example-config.json diff --git a/aio/content/examples/homepage-tabs/ts/plnkr.json b/aio/content/examples/homepage-tabs/plnkr.json similarity index 100% rename from aio/content/examples/homepage-tabs/ts/plnkr.json rename to aio/content/examples/homepage-tabs/plnkr.json diff --git a/aio/content/examples/homepage-tabs/ts/src/app/app.module.ts b/aio/content/examples/homepage-tabs/src/app/app.module.ts similarity index 100% rename from aio/content/examples/homepage-tabs/ts/src/app/app.module.ts rename to aio/content/examples/homepage-tabs/src/app/app.module.ts diff --git a/aio/content/examples/homepage-tabs/ts/src/app/di_demo.ts b/aio/content/examples/homepage-tabs/src/app/di_demo.ts similarity index 100% rename from aio/content/examples/homepage-tabs/ts/src/app/di_demo.ts rename to aio/content/examples/homepage-tabs/src/app/di_demo.ts diff --git a/aio/content/examples/homepage-tabs/ts/src/app/ui_tabs.ts b/aio/content/examples/homepage-tabs/src/app/ui_tabs.ts similarity index 100% rename from aio/content/examples/homepage-tabs/ts/src/app/ui_tabs.ts rename to aio/content/examples/homepage-tabs/src/app/ui_tabs.ts diff --git a/aio/content/examples/homepage-tabs/src/index.1.html b/aio/content/examples/homepage-tabs/src/index.1.html new file mode 100644 index 00000000000..a25071b4848 --- /dev/null +++ b/aio/content/examples/homepage-tabs/src/index.1.html @@ -0,0 +1,33 @@ + + + + + Angular Tabs + + + + + + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/aio/content/examples/homepage-tabs/ts/src/index.html b/aio/content/examples/homepage-tabs/src/index.html similarity index 100% rename from aio/content/examples/homepage-tabs/ts/src/index.html rename to aio/content/examples/homepage-tabs/src/index.html diff --git a/aio/content/examples/homepage-tabs/ts/src/main.ts b/aio/content/examples/homepage-tabs/src/main.ts similarity index 100% rename from aio/content/examples/homepage-tabs/ts/src/main.ts rename to aio/content/examples/homepage-tabs/src/main.ts diff --git a/aio/content/examples/homepage-tabs/ts/plnkr.no-link.html b/aio/content/examples/homepage-tabs/ts/plnkr.no-link.html deleted file mode 100644 index 5bcce585ea5..00000000000 --- a/aio/content/examples/homepage-tabs/ts/plnkr.no-link.html +++ /dev/null @@ -1,292 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/homepage-tabs/ts/src/index.1.html b/aio/content/examples/homepage-tabs/ts/src/index.1.html deleted file mode 100644 index 7d0a0131e6c..00000000000 --- a/aio/content/examples/homepage-tabs/ts/src/index.1.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - Angular Tabs - - - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/homepage-tabs/ts/example-config.json b/aio/content/examples/homepage-todo/example-config.json similarity index 100% rename from aio/content/examples/homepage-tabs/ts/example-config.json rename to aio/content/examples/homepage-todo/example-config.json diff --git a/aio/content/examples/homepage-todo/ts/plnkr.json b/aio/content/examples/homepage-todo/plnkr.json similarity index 100% rename from aio/content/examples/homepage-todo/ts/plnkr.json rename to aio/content/examples/homepage-todo/plnkr.json diff --git a/aio/content/examples/homepage-todo/ts/src/app/app.module.ts b/aio/content/examples/homepage-todo/src/app/app.module.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/app/app.module.ts rename to aio/content/examples/homepage-todo/src/app/app.module.ts diff --git a/aio/content/examples/homepage-todo/ts/src/app/todo.ts b/aio/content/examples/homepage-todo/src/app/todo.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/app/todo.ts rename to aio/content/examples/homepage-todo/src/app/todo.ts diff --git a/aio/content/examples/homepage-todo/ts/src/app/todo_app.ts b/aio/content/examples/homepage-todo/src/app/todo_app.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/app/todo_app.ts rename to aio/content/examples/homepage-todo/src/app/todo_app.ts diff --git a/aio/content/examples/homepage-todo/ts/src/app/todo_form.ts b/aio/content/examples/homepage-todo/src/app/todo_form.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/app/todo_form.ts rename to aio/content/examples/homepage-todo/src/app/todo_form.ts diff --git a/aio/content/examples/homepage-todo/ts/src/app/todo_list.ts b/aio/content/examples/homepage-todo/src/app/todo_list.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/app/todo_list.ts rename to aio/content/examples/homepage-todo/src/app/todo_list.ts diff --git a/aio/content/examples/homepage-todo/src/index.1.html b/aio/content/examples/homepage-todo/src/index.1.html new file mode 100644 index 00000000000..4e8d034fd30 --- /dev/null +++ b/aio/content/examples/homepage-todo/src/index.1.html @@ -0,0 +1,33 @@ + + + + + Angular Todos + + + + + + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/aio/content/examples/homepage-todo/ts/src/index.html b/aio/content/examples/homepage-todo/src/index.html similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/index.html rename to aio/content/examples/homepage-todo/src/index.html diff --git a/aio/content/examples/homepage-todo/ts/src/main.ts b/aio/content/examples/homepage-todo/src/main.ts similarity index 100% rename from aio/content/examples/homepage-todo/ts/src/main.ts rename to aio/content/examples/homepage-todo/src/main.ts diff --git a/aio/content/examples/homepage-todo/ts/plnkr.no-link.html b/aio/content/examples/homepage-todo/ts/plnkr.no-link.html deleted file mode 100644 index c067783ced9..00000000000 --- a/aio/content/examples/homepage-todo/ts/plnkr.no-link.html +++ /dev/null @@ -1,303 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/homepage-todo/ts/src/index.1.html b/aio/content/examples/homepage-todo/ts/src/index.1.html deleted file mode 100644 index 2fcc1e01e93..00000000000 --- a/aio/content/examples/homepage-todo/ts/src/index.1.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - Angular Todos - - - - - - - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/homepage-todo/ts/example-config.json b/aio/content/examples/lifecycle-hooks/example-config.json similarity index 100% rename from aio/content/examples/homepage-todo/ts/example-config.json rename to aio/content/examples/lifecycle-hooks/example-config.json diff --git a/aio/content/examples/lifecycle-hooks/ts/plnkr.json b/aio/content/examples/lifecycle-hooks/plnkr.json similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/plnkr.json rename to aio/content/examples/lifecycle-hooks/plnkr.json diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/after-content.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/after-content.component.ts rename to aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/after-view.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/after-view.component.ts rename to aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/app.component.html b/aio/content/examples/lifecycle-hooks/src/app/app.component.html similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/app.component.html rename to aio/content/examples/lifecycle-hooks/src/app/app.component.html diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.ts b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts new file mode 100644 index 00000000000..5bd535a1135 --- /dev/null +++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts @@ -0,0 +1,7 @@ +// #docregion +import { Component } from '@angular/core'; +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/app.module.ts b/aio/content/examples/lifecycle-hooks/src/app/app.module.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/app.module.ts rename to aio/content/examples/lifecycle-hooks/src/app/app.module.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/counter.component.ts rename to aio/content/examples/lifecycle-hooks/src/app/counter.component.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/do-check-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/do-check-parent.component.html rename to aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts new file mode 100644 index 00000000000..6196dd8edd8 --- /dev/null +++ b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts @@ -0,0 +1,95 @@ +/* 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.length = 0; + } +} + +/***************************************/ + +@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/aio/content/examples/lifecycle-hooks/ts/src/app/logger.service.ts b/aio/content/examples/lifecycle-hooks/src/app/logger.service.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/logger.service.ts rename to aio/content/examples/lifecycle-hooks/src/app/logger.service.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/on-changes-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/on-changes-parent.component.html rename to aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts new file mode 100644 index 00000000000..a5a49a61e96 --- /dev/null +++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts @@ -0,0 +1,73 @@ +/* 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.length = 0; } +} + +/***************************************/ + +@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/aio/content/examples/lifecycle-hooks/ts/src/app/peek-a-boo-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/peek-a-boo-parent.component.ts rename to aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/peek-a-boo.component.ts rename to aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.html b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.html rename to aio/content/examples/lifecycle-hooks/src/app/spy.component.html diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts new file mode 100644 index 00000000000..0f3b0d35f18 --- /dev/null +++ b/aio/content/examples/lifecycle-hooks/src/app/spy.component.ts @@ -0,0 +1,40 @@ +// #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']; + spyLog: string[]; + + constructor(private logger: LoggerService) { + this.spyLog = logger.logs; + } + + 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.length = 0; + this.logger.tick(); + } +} diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/spy.directive.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/app/spy.directive.ts rename to aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/index.html b/aio/content/examples/lifecycle-hooks/src/index.html similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/index.html rename to aio/content/examples/lifecycle-hooks/src/index.html diff --git a/aio/content/examples/lifecycle-hooks/ts/src/main.ts b/aio/content/examples/lifecycle-hooks/src/main.ts similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/main.ts rename to aio/content/examples/lifecycle-hooks/src/main.ts diff --git a/aio/content/examples/lifecycle-hooks/ts/src/sample.css b/aio/content/examples/lifecycle-hooks/src/sample.css similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/src/sample.css rename to aio/content/examples/lifecycle-hooks/src/sample.css diff --git a/aio/content/examples/lifecycle-hooks/ts/plnkr.no-link.html b/aio/content/examples/lifecycle-hooks/ts/plnkr.no-link.html deleted file mode 100644 index 5cf37127609..00000000000 --- a/aio/content/examples/lifecycle-hooks/ts/plnkr.no-link.html +++ /dev/null @@ -1,1097 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/app.component.ts b/aio/content/examples/lifecycle-hooks/ts/src/app/app.component.ts deleted file mode 100644 index a9170884108..00000000000 --- a/aio/content/examples/lifecycle-hooks/ts/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/lifecycle-hooks/ts/src/app/do-check.component.ts b/aio/content/examples/lifecycle-hooks/ts/src/app/do-check.component.ts deleted file mode 100644 index bdd96ed65b8..00000000000 --- a/aio/content/examples/lifecycle-hooks/ts/src/app/do-check.component.ts +++ /dev/null @@ -1,96 +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.length = 0; - } -} - -/***************************************/ - -@Component({ - moduleId: module.id, - 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/aio/content/examples/lifecycle-hooks/ts/src/app/on-changes.component.ts b/aio/content/examples/lifecycle-hooks/ts/src/app/on-changes.component.ts deleted file mode 100644 index c9a243a5f04..00000000000 --- a/aio/content/examples/lifecycle-hooks/ts/src/app/on-changes.component.ts +++ /dev/null @@ -1,74 +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.length = 0; } -} - -/***************************************/ - -@Component({ - moduleId: module.id, - 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/aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.ts b/aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.ts deleted file mode 100644 index 6cbed98d1d7..00000000000 --- a/aio/content/examples/lifecycle-hooks/ts/src/app/spy.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { LoggerService } from './logger.service'; - -@Component({ - moduleId: module.id, - 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']; - spyLog: string[]; - - constructor(private logger: LoggerService) { - this.spyLog = logger.logs; - } - - 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.length = 0; - this.logger.tick(); - } -} diff --git a/aio/content/examples/lifecycle-hooks/ts/example-config.json b/aio/content/examples/ngcontainer/example-config.json similarity index 100% rename from aio/content/examples/lifecycle-hooks/ts/example-config.json rename to aio/content/examples/ngcontainer/example-config.json diff --git a/aio/content/examples/ngcontainer/ts/plnkr.json b/aio/content/examples/ngcontainer/plnkr.json similarity index 100% rename from aio/content/examples/ngcontainer/ts/plnkr.json rename to aio/content/examples/ngcontainer/plnkr.json diff --git a/aio/content/examples/ngcontainer/ts/src/app/app.component.css b/aio/content/examples/ngcontainer/src/app/app.component.css similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/app.component.css rename to aio/content/examples/ngcontainer/src/app/app.component.css diff --git a/aio/content/examples/ngcontainer/ts/src/app/app.component.html b/aio/content/examples/ngcontainer/src/app/app.component.html similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/app.component.html rename to aio/content/examples/ngcontainer/src/app/app.component.html diff --git a/aio/content/examples/ngcontainer/src/app/app.component.ts b/aio/content/examples/ngcontainer/src/app/app.component.ts new file mode 100644 index 00000000000..65c511acd2b --- /dev/null +++ b/aio/content/examples/ngcontainer/src/app/app.component.ts @@ -0,0 +1,24 @@ +// #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/aio/content/examples/ngcontainer/ts/src/app/app.module.ts b/aio/content/examples/ngcontainer/src/app/app.module.ts similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/app.module.ts rename to aio/content/examples/ngcontainer/src/app/app.module.ts diff --git a/aio/content/examples/ngcontainer/ts/src/app/content.component.ts b/aio/content/examples/ngcontainer/src/app/content.component.ts similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/content.component.ts rename to aio/content/examples/ngcontainer/src/app/content.component.ts diff --git a/aio/content/examples/ngcontainer/ts/src/app/hero.components.ts b/aio/content/examples/ngcontainer/src/app/hero.components.ts similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/hero.components.ts rename to aio/content/examples/ngcontainer/src/app/hero.components.ts diff --git a/aio/content/examples/ngcontainer/ts/src/app/hero.ts b/aio/content/examples/ngcontainer/src/app/hero.ts similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/app/hero.ts rename to aio/content/examples/ngcontainer/src/app/hero.ts diff --git a/aio/content/examples/ngcontainer/ts/src/index.html b/aio/content/examples/ngcontainer/src/index.html similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/index.html rename to aio/content/examples/ngcontainer/src/index.html diff --git a/aio/content/examples/ngcontainer/ts/src/main.ts b/aio/content/examples/ngcontainer/src/main.ts similarity index 100% rename from aio/content/examples/ngcontainer/ts/src/main.ts rename to aio/content/examples/ngcontainer/src/main.ts diff --git a/aio/content/examples/ngcontainer/ts/plnkr.no-link.html b/aio/content/examples/ngcontainer/ts/plnkr.no-link.html deleted file mode 100644 index 2e1baa19e2f..00000000000 --- a/aio/content/examples/ngcontainer/ts/plnkr.no-link.html +++ /dev/null @@ -1,586 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngcontainer/ts/src/app/app.component.ts b/aio/content/examples/ngcontainer/ts/src/app/app.component.ts deleted file mode 100644 index 2d6d7f959cf..00000000000 --- a/aio/content/examples/ngcontainer/ts/src/app/app.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { heroes } from './hero'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/ngmodule/ts/contact.1b.plnkr.json b/aio/content/examples/ngmodule/contact.1b.plnkr.json similarity index 100% rename from aio/content/examples/ngmodule/ts/contact.1b.plnkr.json rename to aio/content/examples/ngmodule/contact.1b.plnkr.json diff --git a/aio/content/examples/ngmodule/ts/contact.2.plnkr.json b/aio/content/examples/ngmodule/contact.2.plnkr.json similarity index 100% rename from aio/content/examples/ngmodule/ts/contact.2.plnkr.json rename to aio/content/examples/ngmodule/contact.2.plnkr.json diff --git a/aio/content/examples/ngcontainer/ts/example-config.json b/aio/content/examples/ngmodule/example-config.json similarity index 100% rename from aio/content/examples/ngcontainer/ts/example-config.json rename to aio/content/examples/ngmodule/example-config.json diff --git a/aio/content/examples/ngmodule/ts/minimal.0.plnkr.json b/aio/content/examples/ngmodule/minimal.0.plnkr.json similarity index 100% rename from aio/content/examples/ngmodule/ts/minimal.0.plnkr.json rename to aio/content/examples/ngmodule/minimal.0.plnkr.json diff --git a/aio/content/examples/ngmodule/ts/plnkr.json b/aio/content/examples/ngmodule/plnkr.json similarity index 100% rename from aio/content/examples/ngmodule/ts/plnkr.json rename to aio/content/examples/ngmodule/plnkr.json diff --git a/aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.json b/aio/content/examples/ngmodule/pre-shared.3.plnkr.json similarity index 100% rename from aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.json rename to aio/content/examples/ngmodule/pre-shared.3.plnkr.json diff --git a/aio/content/examples/ngmodule/ts/src/app/app-routing.module.3.ts b/aio/content/examples/ngmodule/src/app/app-routing.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app-routing.module.3.ts rename to aio/content/examples/ngmodule/src/app/app-routing.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app-routing.module.ts b/aio/content/examples/ngmodule/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app-routing.module.ts rename to aio/content/examples/ngmodule/src/app/app-routing.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.0.ts b/aio/content/examples/ngmodule/src/app/app.component.0.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.0.ts rename to aio/content/examples/ngmodule/src/app/app.component.0.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.1.ts b/aio/content/examples/ngmodule/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.1.ts rename to aio/content/examples/ngmodule/src/app/app.component.1.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.1b.ts b/aio/content/examples/ngmodule/src/app/app.component.1b.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.1b.ts rename to aio/content/examples/ngmodule/src/app/app.component.1b.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.2.ts b/aio/content/examples/ngmodule/src/app/app.component.2.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.2.ts rename to aio/content/examples/ngmodule/src/app/app.component.2.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.3.ts b/aio/content/examples/ngmodule/src/app/app.component.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.3.ts rename to aio/content/examples/ngmodule/src/app/app.component.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.component.ts b/aio/content/examples/ngmodule/src/app/app.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.component.ts rename to aio/content/examples/ngmodule/src/app/app.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.0.ts b/aio/content/examples/ngmodule/src/app/app.module.0.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.0.ts rename to aio/content/examples/ngmodule/src/app/app.module.0.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.1.ts b/aio/content/examples/ngmodule/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.1.ts rename to aio/content/examples/ngmodule/src/app/app.module.1.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.1b.ts b/aio/content/examples/ngmodule/src/app/app.module.1b.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.1b.ts rename to aio/content/examples/ngmodule/src/app/app.module.1b.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.2.ts b/aio/content/examples/ngmodule/src/app/app.module.2.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.2.ts rename to aio/content/examples/ngmodule/src/app/app.module.2.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.3.ts b/aio/content/examples/ngmodule/src/app/app.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.3.ts rename to aio/content/examples/ngmodule/src/app/app.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/app.module.ts b/aio/content/examples/ngmodule/src/app/app.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/app.module.ts rename to aio/content/examples/ngmodule/src/app/app.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/awesome.pipe.ts b/aio/content/examples/ngmodule/src/app/contact/awesome.pipe.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/awesome.pipe.ts rename to aio/content/examples/ngmodule/src/app/contact/awesome.pipe.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact-routing.module.3.ts b/aio/content/examples/ngmodule/src/app/contact/contact-routing.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact-routing.module.3.ts rename to aio/content/examples/ngmodule/src/app/contact/contact-routing.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact-routing.module.ts b/aio/content/examples/ngmodule/src/app/contact/contact-routing.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact-routing.module.ts rename to aio/content/examples/ngmodule/src/app/contact/contact-routing.module.ts diff --git a/aio/content/examples/ngmodule/src/app/contact/contact.component.3.ts b/aio/content/examples/ngmodule/src/app/contact/contact.component.3.ts new file mode 100644 index 00000000000..ea6e9868ba9 --- /dev/null +++ b/aio/content/examples/ngmodule/src/app/contact/contact.component.3.ts @@ -0,0 +1,53 @@ +// #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().then(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/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.css b/aio/content/examples/ngmodule/src/app/contact/contact.component.css similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.component.css rename to aio/content/examples/ngmodule/src/app/contact/contact.component.css diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.html b/aio/content/examples/ngmodule/src/app/contact/contact.component.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.component.html rename to aio/content/examples/ngmodule/src/app/contact/contact.component.html diff --git a/aio/content/examples/ngmodule/src/app/contact/contact.component.ts b/aio/content/examples/ngmodule/src/app/contact/contact.component.ts new file mode 100644 index 00000000000..d6dcbbc53f9 --- /dev/null +++ b/aio/content/examples/ngmodule/src/app/contact/contact.component.ts @@ -0,0 +1,54 @@ +// 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().then(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/aio/content/examples/ngmodule/ts/src/app/contact/contact.module.2.ts b/aio/content/examples/ngmodule/src/app/contact/contact.module.2.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.module.2.ts rename to aio/content/examples/ngmodule/src/app/contact/contact.module.2.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact.module.3.ts b/aio/content/examples/ngmodule/src/app/contact/contact.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.module.3.ts rename to aio/content/examples/ngmodule/src/app/contact/contact.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact.module.ts b/aio/content/examples/ngmodule/src/app/contact/contact.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.module.ts rename to aio/content/examples/ngmodule/src/app/contact/contact.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact.service.ts b/aio/content/examples/ngmodule/src/app/contact/contact.service.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/contact.service.ts rename to aio/content/examples/ngmodule/src/app/contact/contact.service.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/highlight.directive.ts b/aio/content/examples/ngmodule/src/app/contact/highlight.directive.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/contact/highlight.directive.ts rename to aio/content/examples/ngmodule/src/app/contact/highlight.directive.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/core/core.module.ts b/aio/content/examples/ngmodule/src/app/core/core.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/core/core.module.ts rename to aio/content/examples/ngmodule/src/app/core/core.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/core/title.component.html b/aio/content/examples/ngmodule/src/app/core/title.component.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/core/title.component.html rename to aio/content/examples/ngmodule/src/app/core/title.component.html diff --git a/aio/content/examples/ngmodule/src/app/core/title.component.ts b/aio/content/examples/ngmodule/src/app/core/title.component.ts new file mode 100644 index 00000000000..b52a57aa139 --- /dev/null +++ b/aio/content/examples/ngmodule/src/app/core/title.component.ts @@ -0,0 +1,17 @@ +// 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 { + @Input() subtitle = ''; + title = 'Angular Modules'; + user = ''; + + constructor(userService: UserService) { + this.user = userService.userName; + } +} diff --git a/aio/content/examples/ngmodule/ts/src/app/core/user.service.ts b/aio/content/examples/ngmodule/src/app/core/user.service.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/core/user.service.ts rename to aio/content/examples/ngmodule/src/app/core/user.service.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/crisis/crisis-detail.component.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/crisis/crisis-detail.component.ts rename to aio/content/examples/ngmodule/src/app/crisis/crisis-detail.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/crisis/crisis-list.component.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis-list.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/crisis/crisis-list.component.ts rename to aio/content/examples/ngmodule/src/app/crisis/crisis-list.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/crisis/crisis-routing.module.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis-routing.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/crisis/crisis-routing.module.ts rename to aio/content/examples/ngmodule/src/app/crisis/crisis-routing.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/crisis/crisis.module.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/crisis/crisis.module.ts rename to aio/content/examples/ngmodule/src/app/crisis/crisis.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/crisis/crisis.service.ts b/aio/content/examples/ngmodule/src/app/crisis/crisis.service.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/crisis/crisis.service.ts rename to aio/content/examples/ngmodule/src/app/crisis/crisis.service.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero-detail.component.ts b/aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero-detail.component.ts rename to aio/content/examples/ngmodule/src/app/hero/hero-detail.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero-list.component.ts b/aio/content/examples/ngmodule/src/app/hero/hero-list.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero-list.component.ts rename to aio/content/examples/ngmodule/src/app/hero/hero-list.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero-routing.module.3.ts b/aio/content/examples/ngmodule/src/app/hero/hero-routing.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero-routing.module.3.ts rename to aio/content/examples/ngmodule/src/app/hero/hero-routing.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero-routing.module.ts b/aio/content/examples/ngmodule/src/app/hero/hero-routing.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero-routing.module.ts rename to aio/content/examples/ngmodule/src/app/hero/hero-routing.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero.component.3.ts b/aio/content/examples/ngmodule/src/app/hero/hero.component.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero.component.3.ts rename to aio/content/examples/ngmodule/src/app/hero/hero.component.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero.component.ts b/aio/content/examples/ngmodule/src/app/hero/hero.component.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero.component.ts rename to aio/content/examples/ngmodule/src/app/hero/hero.component.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero.module.3.ts b/aio/content/examples/ngmodule/src/app/hero/hero.module.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero.module.3.ts rename to aio/content/examples/ngmodule/src/app/hero/hero.module.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero.module.ts b/aio/content/examples/ngmodule/src/app/hero/hero.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero.module.ts rename to aio/content/examples/ngmodule/src/app/hero/hero.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/hero.service.ts b/aio/content/examples/ngmodule/src/app/hero/hero.service.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/hero.service.ts rename to aio/content/examples/ngmodule/src/app/hero/hero.service.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/hero/highlight.directive.ts b/aio/content/examples/ngmodule/src/app/hero/highlight.directive.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/hero/highlight.directive.ts rename to aio/content/examples/ngmodule/src/app/hero/highlight.directive.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/highlight.directive.ts b/aio/content/examples/ngmodule/src/app/highlight.directive.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/highlight.directive.ts rename to aio/content/examples/ngmodule/src/app/highlight.directive.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/shared/awesome.pipe.ts b/aio/content/examples/ngmodule/src/app/shared/awesome.pipe.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/shared/awesome.pipe.ts rename to aio/content/examples/ngmodule/src/app/shared/awesome.pipe.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/shared/highlight.directive.ts b/aio/content/examples/ngmodule/src/app/shared/highlight.directive.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/shared/highlight.directive.ts rename to aio/content/examples/ngmodule/src/app/shared/highlight.directive.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/shared/shared.module.ts b/aio/content/examples/ngmodule/src/app/shared/shared.module.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/shared/shared.module.ts rename to aio/content/examples/ngmodule/src/app/shared/shared.module.ts diff --git a/aio/content/examples/ngmodule/ts/src/app/title.component.html b/aio/content/examples/ngmodule/src/app/title.component.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/title.component.html rename to aio/content/examples/ngmodule/src/app/title.component.html diff --git a/aio/content/examples/ngmodule/src/app/title.component.ts b/aio/content/examples/ngmodule/src/app/title.component.ts new file mode 100644 index 00000000000..9a2ef1c4b80 --- /dev/null +++ b/aio/content/examples/ngmodule/src/app/title.component.ts @@ -0,0 +1,24 @@ +// #docplaster +// #docregion +// #docregion v1 +import { Component, Input } from '@angular/core'; +// #enddocregion v1 +import { UserService } from './user.service'; +// #docregion v1 + +@Component({ + selector: 'app-title', + templateUrl: './title.component.html', +}) +export class TitleComponent { + @Input() subtitle = ''; + title = 'Angular Modules'; +// #enddocregion v1 + user = ''; + + constructor(userService: UserService) { + this.user = userService.userName; + } +// #docregion v1 +} +// #enddocregion v1 diff --git a/aio/content/examples/ngmodule/ts/src/app/user.service.ts b/aio/content/examples/ngmodule/src/app/user.service.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/app/user.service.ts rename to aio/content/examples/ngmodule/src/app/user.service.ts diff --git a/aio/content/examples/ngmodule/ts/src/index.0.html b/aio/content/examples/ngmodule/src/index.0.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.0.html rename to aio/content/examples/ngmodule/src/index.0.html diff --git a/aio/content/examples/ngmodule/ts/src/index.1.html b/aio/content/examples/ngmodule/src/index.1.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.1.html rename to aio/content/examples/ngmodule/src/index.1.html diff --git a/aio/content/examples/ngmodule/ts/src/index.1b.html b/aio/content/examples/ngmodule/src/index.1b.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.1b.html rename to aio/content/examples/ngmodule/src/index.1b.html diff --git a/aio/content/examples/ngmodule/ts/src/index.2.html b/aio/content/examples/ngmodule/src/index.2.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.2.html rename to aio/content/examples/ngmodule/src/index.2.html diff --git a/aio/content/examples/ngmodule/ts/src/index.3.html b/aio/content/examples/ngmodule/src/index.3.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.3.html rename to aio/content/examples/ngmodule/src/index.3.html diff --git a/aio/content/examples/ngmodule/ts/src/index.html b/aio/content/examples/ngmodule/src/index.html similarity index 100% rename from aio/content/examples/ngmodule/ts/src/index.html rename to aio/content/examples/ngmodule/src/index.html diff --git a/aio/content/examples/ngmodule/ts/src/main-static.ts b/aio/content/examples/ngmodule/src/main-static.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main-static.ts rename to aio/content/examples/ngmodule/src/main-static.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.0.ts b/aio/content/examples/ngmodule/src/main.0.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.0.ts rename to aio/content/examples/ngmodule/src/main.0.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.1.ts b/aio/content/examples/ngmodule/src/main.1.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.1.ts rename to aio/content/examples/ngmodule/src/main.1.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.1b.ts b/aio/content/examples/ngmodule/src/main.1b.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.1b.ts rename to aio/content/examples/ngmodule/src/main.1b.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.2.ts b/aio/content/examples/ngmodule/src/main.2.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.2.ts rename to aio/content/examples/ngmodule/src/main.2.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.3.ts b/aio/content/examples/ngmodule/src/main.3.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.3.ts rename to aio/content/examples/ngmodule/src/main.3.ts diff --git a/aio/content/examples/ngmodule/ts/src/main.ts b/aio/content/examples/ngmodule/src/main.ts similarity index 100% rename from aio/content/examples/ngmodule/ts/src/main.ts rename to aio/content/examples/ngmodule/src/main.ts diff --git a/aio/content/examples/ngmodule/ts/contact.1b.plnkr.no-link.html b/aio/content/examples/ngmodule/ts/contact.1b.plnkr.no-link.html deleted file mode 100644 index ef8bffbbbe5..00000000000 --- a/aio/content/examples/ngmodule/ts/contact.1b.plnkr.no-link.html +++ /dev/null @@ -1,475 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngmodule/ts/contact.2.plnkr.no-link.html b/aio/content/examples/ngmodule/ts/contact.2.plnkr.no-link.html deleted file mode 100644 index 2fd5e40230b..00000000000 --- a/aio/content/examples/ngmodule/ts/contact.2.plnkr.no-link.html +++ /dev/null @@ -1,491 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngmodule/ts/minimal.0.plnkr.no-link.html b/aio/content/examples/ngmodule/ts/minimal.0.plnkr.no-link.html deleted file mode 100644 index 4c6469a5124..00000000000 --- a/aio/content/examples/ngmodule/ts/minimal.0.plnkr.no-link.html +++ /dev/null @@ -1,195 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngmodule/ts/plnkr.no-link.html b/aio/content/examples/ngmodule/ts/plnkr.no-link.html deleted file mode 100644 index 4364d1e5890..00000000000 --- a/aio/content/examples/ngmodule/ts/plnkr.no-link.html +++ /dev/null @@ -1,909 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.no-link.html b/aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.no-link.html deleted file mode 100644 index 458da3fb33c..00000000000 --- a/aio/content/examples/ngmodule/ts/pre-shared.3.plnkr.no-link.html +++ /dev/null @@ -1,861 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.3.ts b/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.3.ts deleted file mode 100644 index fcc409b9af1..00000000000 --- a/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.3.ts +++ /dev/null @@ -1,54 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -import { Contact, ContactService } from './contact.service'; -import { UserService } from '../user.service'; - -@Component({ - moduleId: module.id, - 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().then(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/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.ts b/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.ts deleted file mode 100644 index f9116a4213b..00000000000 --- a/aio/content/examples/ngmodule/ts/src/app/contact/contact.component.ts +++ /dev/null @@ -1,55 +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({ - moduleId: module.id, - 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().then(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/aio/content/examples/ngmodule/ts/src/app/core/title.component.ts b/aio/content/examples/ngmodule/ts/src/app/core/title.component.ts deleted file mode 100644 index 5fbd64d5fda..00000000000 --- a/aio/content/examples/ngmodule/ts/src/app/core/title.component.ts +++ /dev/null @@ -1,18 +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({ - moduleId: module.id, - selector: 'app-title', - templateUrl: './title.component.html', -}) -export class TitleComponent { - @Input() subtitle = ''; - title = 'Angular Modules'; - user = ''; - - constructor(userService: UserService) { - this.user = userService.userName; - } -} diff --git a/aio/content/examples/ngmodule/ts/src/app/title.component.ts b/aio/content/examples/ngmodule/ts/src/app/title.component.ts deleted file mode 100644 index c5815edcbdc..00000000000 --- a/aio/content/examples/ngmodule/ts/src/app/title.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -// #docplaster -// #docregion -// #docregion v1 -import { Component, Input } from '@angular/core'; -// #enddocregion v1 -import { UserService } from './user.service'; -// #docregion v1 - -@Component({ - moduleId: module.id, - selector: 'app-title', - templateUrl: './title.component.html', -}) -export class TitleComponent { - @Input() subtitle = ''; - title = 'Angular Modules'; -// #enddocregion v1 - user = ''; - - constructor(userService: UserService) { - this.user = userService.userName; - } -// #docregion v1 -} -// #enddocregion v1 diff --git a/aio/content/examples/package.json b/aio/content/examples/package.json index 6b20c9fda12..155a738fe34 100644 --- a/aio/content/examples/package.json +++ b/aio/content/examples/package.json @@ -12,25 +12,27 @@ "author": "", "license": "MIT", "dependencies": { - "@angular/common": "2.4.5", - "@angular/compiler": "2.4.5", - "@angular/compiler-cli": "2.4.5", - "@angular/core": "2.4.5", - "@angular/forms": "2.4.5", - "@angular/http": "2.4.5", - "@angular/platform-browser": "2.4.5", - "@angular/platform-browser-dynamic": "2.4.5", - "@angular/platform-server": "2.4.5", - "@angular/router": "3.4.5", - "@angular/tsc-wrapped": "^0.5.0", - "@angular/upgrade": "2.4.5", - "angular-in-memory-web-api": "~0.2.4", + "@angular/animations": "~4.0.0", + "@angular/common": "~4.0.0", + "@angular/compiler": "~4.0.0", + "@angular/compiler-cli": "~4.0.0", + "@angular/core": "~4.0.0", + "@angular/forms": "~4.0.0", + "@angular/http": "~4.0.0", + "@angular/platform-browser": "~4.0.0", + "@angular/platform-browser-dynamic": "~4.0.0", + "@angular/platform-server": "~4.0.0", + "@angular/router": "~4.0.0", + "@angular/tsc-wrapped": "~4.0.0", + "@angular/upgrade": "~4.0.0", + "angular-in-memory-web-api": "~0.3.1", "core-js": "^2.4.1", "rxjs": "5.0.1", "systemjs": "0.19.39", - "zone.js": "^0.7.4" + "zone.js": "^0.8.4" }, "devDependencies": { + "@angular/cli": "^1.0.0", "@types/angular": "^1.5.16", "@types/angular-animate": "^1.5.5", "@types/angular-cookies": "^1.4.2", @@ -40,9 +42,8 @@ "@types/angular-sanitize": "^1.3.3", "@types/jasmine": "2.5.36", "@types/node": "^6.0.45", - "angular-cli": "^1.0.0-beta.26", "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.0-beta.18", + "awesome-typescript-loader": "^3.0.4", "babel-cli": "^6.16.0", "babel-preset-angular2": "^0.0.2", "babel-preset-es2015": "^6.16.0", @@ -79,10 +80,10 @@ "style-loader": "^0.13.1", "ts-node": "^1.3.0", "tslint": "^3.15.1", - "typescript": "~2.0.10", - "webpack": "2.2.0", - "webpack-dev-server": "2.2.0-rc.0", - "webpack-merge": "^2.4.0" + "typescript": "~2.2.0", + "webpack": "2.2.1", + "webpack-dev-server": "2.4.1", + "webpack-merge": "^3.0.0" }, "repository": {} } diff --git a/aio/content/examples/ngmodule/ts/example-config.json b/aio/content/examples/pipes/example-config.json similarity index 100% rename from aio/content/examples/ngmodule/ts/example-config.json rename to aio/content/examples/pipes/example-config.json diff --git a/aio/content/examples/pipes/ts/plnkr.json b/aio/content/examples/pipes/plnkr.json similarity index 100% rename from aio/content/examples/pipes/ts/plnkr.json rename to aio/content/examples/pipes/plnkr.json diff --git a/aio/content/examples/pipes/ts/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html similarity index 100% rename from aio/content/examples/pipes/ts/src/app/app.component.html rename to aio/content/examples/pipes/src/app/app.component.html diff --git a/aio/content/examples/pipes/src/app/app.component.ts b/aio/content/examples/pipes/src/app/app.component.ts new file mode 100644 index 00000000000..090eae77664 --- /dev/null +++ b/aio/content/examples/pipes/src/app/app.component.ts @@ -0,0 +1,10 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { + birthday = new Date(1988, 3, 15); // April 15, 1988 +} diff --git a/aio/content/examples/pipes/ts/src/app/app.module.ts b/aio/content/examples/pipes/src/app/app.module.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/app.module.ts rename to aio/content/examples/pipes/src/app/app.module.ts diff --git a/aio/content/examples/pipes/ts/src/app/exponential-strength.pipe.ts b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/exponential-strength.pipe.ts rename to aio/content/examples/pipes/src/app/exponential-strength.pipe.ts diff --git a/aio/content/examples/pipes/ts/src/app/fetch-json.pipe.ts b/aio/content/examples/pipes/src/app/fetch-json.pipe.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/fetch-json.pipe.ts rename to aio/content/examples/pipes/src/app/fetch-json.pipe.ts diff --git a/aio/content/examples/pipes/ts/src/app/flying-heroes-impure.component.html b/aio/content/examples/pipes/src/app/flying-heroes-impure.component.html similarity index 100% rename from aio/content/examples/pipes/ts/src/app/flying-heroes-impure.component.html rename to aio/content/examples/pipes/src/app/flying-heroes-impure.component.html diff --git a/aio/content/examples/pipes/ts/src/app/flying-heroes.component.html b/aio/content/examples/pipes/src/app/flying-heroes.component.html similarity index 100% rename from aio/content/examples/pipes/ts/src/app/flying-heroes.component.html rename to aio/content/examples/pipes/src/app/flying-heroes.component.html diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.ts b/aio/content/examples/pipes/src/app/flying-heroes.component.ts new file mode 100644 index 00000000000..e4abb09a2fc --- /dev/null +++ b/aio/content/examples/pipes/src/app/flying-heroes.component.ts @@ -0,0 +1,61 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; + +import { HEROES } from './heroes'; + +@Component({ + selector: '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: '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/aio/content/examples/pipes/ts/src/app/flying-heroes.pipe.ts b/aio/content/examples/pipes/src/app/flying-heroes.pipe.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/flying-heroes.pipe.ts rename to aio/content/examples/pipes/src/app/flying-heroes.pipe.ts diff --git a/aio/content/examples/pipes/ts/src/app/hero-async-message.component.ts b/aio/content/examples/pipes/src/app/hero-async-message.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/hero-async-message.component.ts rename to aio/content/examples/pipes/src/app/hero-async-message.component.ts diff --git a/aio/content/examples/pipes/ts/src/app/hero-birthday1.component.ts b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/hero-birthday1.component.ts rename to aio/content/examples/pipes/src/app/hero-birthday1.component.ts diff --git a/aio/content/examples/pipes/ts/src/app/hero-birthday2.component.ts b/aio/content/examples/pipes/src/app/hero-birthday2.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/hero-birthday2.component.ts rename to aio/content/examples/pipes/src/app/hero-birthday2.component.ts diff --git a/aio/content/examples/pipes/ts/src/app/hero-list.component.ts b/aio/content/examples/pipes/src/app/hero-list.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/hero-list.component.ts rename to aio/content/examples/pipes/src/app/hero-list.component.ts diff --git a/aio/content/examples/pipes/ts/src/app/heroes.ts b/aio/content/examples/pipes/src/app/heroes.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/heroes.ts rename to aio/content/examples/pipes/src/app/heroes.ts diff --git a/aio/content/examples/pipes/ts/src/app/power-boost-calculator.component.ts b/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/power-boost-calculator.component.ts rename to aio/content/examples/pipes/src/app/power-boost-calculator.component.ts diff --git a/aio/content/examples/pipes/ts/src/app/power-booster.component.ts b/aio/content/examples/pipes/src/app/power-booster.component.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/app/power-booster.component.ts rename to aio/content/examples/pipes/src/app/power-booster.component.ts diff --git a/aio/content/examples/pipes/ts/src/heroes.json b/aio/content/examples/pipes/src/heroes.json similarity index 100% rename from aio/content/examples/pipes/ts/src/heroes.json rename to aio/content/examples/pipes/src/heroes.json diff --git a/aio/content/examples/pipes/ts/src/index.html b/aio/content/examples/pipes/src/index.html similarity index 100% rename from aio/content/examples/pipes/ts/src/index.html rename to aio/content/examples/pipes/src/index.html diff --git a/aio/content/examples/pipes/ts/src/main.ts b/aio/content/examples/pipes/src/main.ts similarity index 100% rename from aio/content/examples/pipes/ts/src/main.ts rename to aio/content/examples/pipes/src/main.ts diff --git a/aio/content/examples/pipes/ts/plnkr.no-link.html b/aio/content/examples/pipes/ts/plnkr.no-link.html deleted file mode 100644 index 009b0e1944f..00000000000 --- a/aio/content/examples/pipes/ts/plnkr.no-link.html +++ /dev/null @@ -1,663 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/pipes/ts/src/app/app.component.ts b/aio/content/examples/pipes/ts/src/app/app.component.ts deleted file mode 100644 index d21801ddcfa..00000000000 --- a/aio/content/examples/pipes/ts/src/app/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { - birthday = new Date(1988, 3, 15); // April 15, 1988 -} diff --git a/aio/content/examples/pipes/ts/src/app/flying-heroes.component.ts b/aio/content/examples/pipes/ts/src/app/flying-heroes.component.ts deleted file mode 100644 index 295620310b0..00000000000 --- a/aio/content/examples/pipes/ts/src/app/flying-heroes.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -import { HEROES } from './heroes'; - -@Component({ - moduleId: module.id, - selector: '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({ - moduleId: module.id, - selector: '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/aio/content/examples/quickstart/ts/bs-config.1.json b/aio/content/examples/quickstart/bs-config.1.json similarity index 100% rename from aio/content/examples/quickstart/ts/bs-config.1.json rename to aio/content/examples/quickstart/bs-config.1.json diff --git a/aio/content/examples/pipes/ts/example-config.json b/aio/content/examples/quickstart/example-config.json similarity index 100% rename from aio/content/examples/pipes/ts/example-config.json rename to aio/content/examples/quickstart/example-config.json diff --git a/aio/content/examples/quickstart/js/example-config.json b/aio/content/examples/quickstart/js/example-config.json index e69de29bb2d..81f31aaf0d9 100644 --- a/aio/content/examples/quickstart/js/example-config.json +++ b/aio/content/examples/quickstart/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/aio/content/examples/quickstart/js/package.1.json b/aio/content/examples/quickstart/js/package.1.json index 541a11373ae..28aee2b92e7 100644 --- a/aio/content/examples/quickstart/js/package.1.json +++ b/aio/content/examples/quickstart/js/package.1.json @@ -17,10 +17,10 @@ "@angular/router": "~3.4.0", "@angular/upgrade": "~2.4.0", - "angular-in-memory-web-api": "~0.2.4", + "angular-in-memory-web-api": "~0.3.1", "core-js": "^2.4.1", "rxjs": "5.0.1", - "zone.js": "^0.7.4" + "zone.js": "^0.8.4" }, "devDependencies": { "concurrently": "^3.0.0", diff --git a/aio/content/examples/quickstart/js/plnkr.no-link.html b/aio/content/examples/quickstart/js/plnkr.no-link.html deleted file mode 100644 index 152dbf3f077..00000000000 --- a/aio/content/examples/quickstart/js/plnkr.no-link.html +++ /dev/null @@ -1,204 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/quickstart/js/src/app/app.component.js b/aio/content/examples/quickstart/js/src/app/app.component.js deleted file mode 100644 index 26ba116efec..00000000000 --- a/aio/content/examples/quickstart/js/src/app/app.component.js +++ /dev/null @@ -1,27 +0,0 @@ -// #docplaster -// #docregion -// #docregion iife -(function(app) { - // #enddocregion iife - // #docregion ng-namespace-funcs, export - app.AppComponent = - // #enddocregion export - // #docregion component - ng.core.Component({ - // #enddocregion ng-namespace-funcs - selector: 'my-app', - template: '

Hello Angular

' - // #docregion ng-namespace-funcs - }) - // #enddocregion component - // #docregion class - .Class({ - // #enddocregion ng-namespace-funcs - constructor: function() {} - // #docregion ng-namespace-funcs - }); - // #enddocregion class - // #enddocregion ng-namespace-funcs -// #docregion iife -})(window.app || (window.app = {})); -// #enddocregion iife diff --git a/aio/content/examples/quickstart/js/src/app/app.module.js b/aio/content/examples/quickstart/js/src/app/app.module.js deleted file mode 100644 index 0f3d5f82cfc..00000000000 --- a/aio/content/examples/quickstart/js/src/app/app.module.js +++ /dev/null @@ -1,15 +0,0 @@ -// #docplaster -// #docregion -(function(app) { - app.AppModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - // #docregion import - declarations: [ app.AppComponent ], - // #enddocregion import - bootstrap: [ app.AppComponent ] - }) - .Class({ - constructor: function() {} - }); -})(window.app || (window.app = {})); diff --git a/aio/content/examples/quickstart/js/src/main.js b/aio/content/examples/quickstart/js/src/main.js deleted file mode 100644 index 785823fa846..00000000000 --- a/aio/content/examples/quickstart/js/src/main.js +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -(function(app) { - document.addEventListener('DOMContentLoaded', function() { - ng.platformBrowserDynamic - .platformBrowserDynamic() - .bootstrapModule(app.AppModule); - }); -})(window.app || (window.app = {})); diff --git a/aio/content/examples/quickstart/ts/plnkr.json b/aio/content/examples/quickstart/plnkr.json similarity index 100% rename from aio/content/examples/quickstart/ts/plnkr.json rename to aio/content/examples/quickstart/plnkr.json diff --git a/aio/content/examples/quickstart/ts/src/app/app.component.ts b/aio/content/examples/quickstart/src/app/app.component.ts similarity index 100% rename from aio/content/examples/quickstart/ts/src/app/app.component.ts rename to aio/content/examples/quickstart/src/app/app.component.ts diff --git a/aio/content/examples/quickstart/ts/src/app/app.module.ts b/aio/content/examples/quickstart/src/app/app.module.ts similarity index 100% rename from aio/content/examples/quickstart/ts/src/app/app.module.ts rename to aio/content/examples/quickstart/src/app/app.module.ts diff --git a/aio/content/examples/quickstart/ts/src/index.html b/aio/content/examples/quickstart/src/index.html similarity index 100% rename from aio/content/examples/quickstart/ts/src/index.html rename to aio/content/examples/quickstart/src/index.html diff --git a/aio/content/examples/cb-component-relative-paths/ts/src/main.ts b/aio/content/examples/quickstart/src/main.ts similarity index 100% rename from aio/content/examples/cb-component-relative-paths/ts/src/main.ts rename to aio/content/examples/quickstart/src/main.ts diff --git a/aio/content/examples/quickstart/ts/src/tsconfig.1.json b/aio/content/examples/quickstart/src/tsconfig.1.json similarity index 100% rename from aio/content/examples/quickstart/ts/src/tsconfig.1.json rename to aio/content/examples/quickstart/src/tsconfig.1.json diff --git a/aio/content/examples/quickstart/ts/plnkr.no-link.html b/aio/content/examples/quickstart/ts/plnkr.no-link.html deleted file mode 100644 index 63a97cf8d80..00000000000 --- a/aio/content/examples/quickstart/ts/plnkr.no-link.html +++ /dev/null @@ -1,74 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/quickstart/ts/example-config.json b/aio/content/examples/reactive-forms/example-config.json similarity index 100% rename from aio/content/examples/quickstart/ts/example-config.json rename to aio/content/examples/reactive-forms/example-config.json diff --git a/aio/content/examples/reactive-forms/ts/final.plnkr.json b/aio/content/examples/reactive-forms/final.plnkr.json similarity index 100% rename from aio/content/examples/reactive-forms/ts/final.plnkr.json rename to aio/content/examples/reactive-forms/final.plnkr.json diff --git a/aio/content/examples/reactive-forms/ts/plnkr.json b/aio/content/examples/reactive-forms/plnkr.json similarity index 100% rename from aio/content/examples/reactive-forms/ts/plnkr.json rename to aio/content/examples/reactive-forms/plnkr.json diff --git a/aio/content/examples/reactive-forms/src/app/app.component.1.ts b/aio/content/examples/reactive-forms/src/app/app.component.1.ts new file mode 100644 index 00000000000..30236183342 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/app.component.1.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + template: ` +
+

Reactive Forms

+ +
` +}) +export class AppComponent { } diff --git a/aio/content/examples/reactive-forms/src/app/app.component.ts b/aio/content/examples/reactive-forms/src/app/app.component.ts new file mode 100644 index 00000000000..d30a38e979b --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/app.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + template: ` +
+

Reactive Forms

+ +
` +}) +export class AppComponent { } diff --git a/aio/content/examples/reactive-forms/ts/src/app/app.module.ts b/aio/content/examples/reactive-forms/src/app/app.module.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/app.module.ts rename to aio/content/examples/reactive-forms/src/app/app.module.ts diff --git a/aio/content/examples/reactive-forms/ts/src/app/data-model.ts b/aio/content/examples/reactive-forms/src/app/data-model.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/data-model.ts rename to aio/content/examples/reactive-forms/src/app/data-model.ts diff --git a/aio/content/examples/reactive-forms/ts/src/app/demo.component.html b/aio/content/examples/reactive-forms/src/app/demo.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/demo.component.html rename to aio/content/examples/reactive-forms/src/app/demo.component.html diff --git a/aio/content/examples/reactive-forms/src/app/demo.component.ts b/aio/content/examples/reactive-forms/src/app/demo.component.ts new file mode 100644 index 00000000000..181726eb665 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/demo.component.ts @@ -0,0 +1,47 @@ +/* tslint:disable:member-ordering */ +import { Component } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { Hero } from './data-model'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'my-app', + 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() + .finally(() => this.isLoading = false); + this.selectedHero = undefined; + } + + select(hero: Hero) { this.selectedHero = hero; } + + selectDemo(demo: number) { + this.demo = demo + 1; + this.getHeroes(); + } +} diff --git a/aio/content/examples/reactive-forms/ts/src/app/demo.module.ts b/aio/content/examples/reactive-forms/src/app/demo.module.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/demo.module.ts rename to aio/content/examples/reactive-forms/src/app/demo.module.ts diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-1.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts new file mode 100644 index 00000000000..318dfff1459 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts @@ -0,0 +1,14 @@ +/* tslint:disable:component-class-suffix */ +// #docregion imports +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; +// #enddocregion + +@Component({ + selector: 'hero-detail-1', + templateUrl: './hero-detail-1.component.html' +}) +// #docregion v1 +export class HeroDetailComponent1 { + name = new FormControl(); +} diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-2.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts new file mode 100644 index 00000000000..6aa3c1ed3a3 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts @@ -0,0 +1,17 @@ +/* tslint:disable:component-class-suffix */ +// #docregion imports +import { Component } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; +// #enddocregion imports + +@Component({ + selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-3.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts new file mode 100644 index 00000000000..54a4e933613 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts @@ -0,0 +1,27 @@ +/* tslint:disable:component-class-suffix */ +// #docregion imports +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +// #enddocregion imports + +@Component({ + selector: '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/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts new file mode 100644 index 00000000000..23478699673 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts @@ -0,0 +1,25 @@ +/* tslint:disable:component-class-suffix */ +// #docregion imports +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +// #enddocregion imports + +@Component({ + selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-4.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts new file mode 100644 index 00000000000..d2f1ea2f967 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts @@ -0,0 +1,34 @@ +/* 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: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-5.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts new file mode 100644 index 00000000000..f4be33389fb --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts @@ -0,0 +1,35 @@ +/* tslint:disable:component-class-suffix */ +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +import { states } from './data-model'; + +@Component({ + selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-6.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts new file mode 100644 index 00000000000..d5136822d17 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts @@ -0,0 +1,58 @@ +/* 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: '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() { // <-- wrap patchValue in ngOnChanges + this.heroForm.reset(); + // #docregion patch-value + this.heroForm.patchValue({ + name: this.hero.name + }); + // #enddocregion patch-value + } + // #enddocregion patch-value-on-changes +} + +// #enddocregion v6 diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-7.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts new file mode 100644 index 00000000000..497c7f6a56f --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts @@ -0,0 +1,69 @@ +/* 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: '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.heroForm.reset({ + name: this.hero.name, + address: this.hero.addresses[0] || new Address() + }); + } + // #enddocregion ngOnChanges + + /* First version of ngOnChanges + // #docregion ngOnChanges-1 + ngOnChanges() + // #enddocregion ngOnChanges-1 + */ + ngOnChanges1() { + // #docregion reset + this.heroForm.reset(); + // #enddocregion reset + // #docregion ngOnChanges-1 + // #docregion set-value + this.heroForm.setValue({ + name: this.hero.name, + // #docregion set-value-address + address: this.hero.addresses[0] || new Address() + // #enddocregion set-value-address + }); + // #enddocregion set-value + } + // #enddocregion ngOnChanges-1 +} + diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail-8.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts new file mode 100644 index 00000000000..1141c836a79 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts @@ -0,0 +1,68 @@ +/* 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: '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.heroForm.reset({ + name: this.hero.name + }); + this.setAddresses(this.hero.addresses); + } + // #enddocregion onchanges + + // #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/aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.html rename to aio/content/examples/reactive-forms/src/app/hero-detail.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..4cb69aaedf9 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts @@ -0,0 +1,107 @@ +// #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 + +// #docregion metadata +@Component({ + selector: 'hero-detail', + templateUrl: './hero-detail.component.html' +}) +// #enddocregion metadata +export class HeroDetailComponent implements OnChanges { + @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.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.ngOnChanges(); + } + // #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.ngOnChanges(); } + // #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/aio/content/examples/reactive-forms/ts/src/app/hero-list.component.1.html b/aio/content/examples/reactive-forms/src/app/hero-list.component.1.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-list.component.1.html rename to aio/content/examples/reactive-forms/src/app/hero-list.component.1.html diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-list.component.html b/aio/content/examples/reactive-forms/src/app/hero-list.component.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero-list.component.html rename to aio/content/examples/reactive-forms/src/app/hero-list.component.html diff --git a/aio/content/examples/reactive-forms/src/app/hero-list.component.ts b/aio/content/examples/reactive-forms/src/app/hero-list.component.ts new file mode 100644 index 00000000000..98092adcdb1 --- /dev/null +++ b/aio/content/examples/reactive-forms/src/app/hero-list.component.ts @@ -0,0 +1,31 @@ +// #docregion +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/finally'; + +import { Hero } from './data-model'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'hero-list', + templateUrl: './hero-list.component.html' +}) +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 + .finally(() => this.isLoading = false); + this.selectedHero = undefined; + } + + select(hero: Hero) { this.selectedHero = hero; } +} diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero.service.ts b/aio/content/examples/reactive-forms/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/app/hero.service.ts rename to aio/content/examples/reactive-forms/src/app/hero.service.ts diff --git a/aio/content/examples/reactive-forms/ts/src/index-final.html b/aio/content/examples/reactive-forms/src/index-final.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/index-final.html rename to aio/content/examples/reactive-forms/src/index-final.html diff --git a/aio/content/examples/reactive-forms/ts/src/index.html b/aio/content/examples/reactive-forms/src/index.html similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/index.html rename to aio/content/examples/reactive-forms/src/index.html diff --git a/aio/content/examples/reactive-forms/ts/src/main-final.ts b/aio/content/examples/reactive-forms/src/main-final.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/main-final.ts rename to aio/content/examples/reactive-forms/src/main-final.ts diff --git a/aio/content/examples/reactive-forms/ts/src/main.ts b/aio/content/examples/reactive-forms/src/main.ts similarity index 100% rename from aio/content/examples/reactive-forms/ts/src/main.ts rename to aio/content/examples/reactive-forms/src/main.ts diff --git a/aio/content/examples/reactive-forms/ts/final.plnkr.no-link.html b/aio/content/examples/reactive-forms/ts/final.plnkr.no-link.html deleted file mode 100644 index 758f006eafd..00000000000 --- a/aio/content/examples/reactive-forms/ts/final.plnkr.no-link.html +++ /dev/null @@ -1,515 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/reactive-forms/ts/plnkr.no-link.html b/aio/content/examples/reactive-forms/ts/plnkr.no-link.html deleted file mode 100644 index fb7fd71c4d8..00000000000 --- a/aio/content/examples/reactive-forms/ts/plnkr.no-link.html +++ /dev/null @@ -1,1325 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/reactive-forms/ts/src/app/app.component.1.ts b/aio/content/examples/reactive-forms/ts/src/app/app.component.1.ts deleted file mode 100644 index 4ab39498631..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/app.component.1.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - template: ` -
-

Reactive Forms

- -
` -}) -export class AppComponent { } diff --git a/aio/content/examples/reactive-forms/ts/src/app/app.component.ts b/aio/content/examples/reactive-forms/ts/src/app/app.component.ts deleted file mode 100644 index e41b9f8b350..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/app.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - template: ` -
-

Reactive Forms

- -
` -}) -export class AppComponent { } diff --git a/aio/content/examples/reactive-forms/ts/src/app/demo.component.ts b/aio/content/examples/reactive-forms/ts/src/app/demo.component.ts deleted file mode 100644 index 5e3a95636d3..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/demo.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable:member-ordering */ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs/Observable'; - -import { Hero } from './data-model'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - 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() - .finally(() => this.isLoading = false); - this.selectedHero = undefined; - } - - select(hero: Hero) { this.selectedHero = hero; } - - selectDemo(demo: number) { - this.demo = demo + 1; - this.getHeroes(); - } -} diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.ts deleted file mode 100644 index 586ca36e769..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-1.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormControl } from '@angular/forms'; -// #enddocregion - -@Component({ - moduleId: module.id, - selector: 'hero-detail-1', - templateUrl: './hero-detail-1.component.html' -}) -// #docregion v1 -export class HeroDetailComponent1 { - name = new FormControl(); -} diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.ts deleted file mode 100644 index e3c0448a7fe..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-2.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -// #enddocregion imports - -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.ts deleted file mode 100644 index 400c6911d69..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -// #enddocregion imports - -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts deleted file mode 100644 index b76803d7ede..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docregion imports -import { Component } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; -// #enddocregion imports - -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.ts deleted file mode 100644 index 8705765a56f..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-4.component.ts +++ /dev/null @@ -1,35 +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({ - moduleId: module.id, - selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.ts deleted file mode 100644 index 2bafd0709ee..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-5.component.ts +++ /dev/null @@ -1,36 +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({ - moduleId: module.id, - selector: '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/aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.ts deleted file mode 100644 index 9c592a953eb..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-6.component.ts +++ /dev/null @@ -1,59 +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({ - moduleId: module.id, - selector: '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() { // <-- wrap patchValue in ngOnChanges - this.heroForm.reset(); - // #docregion patch-value - this.heroForm.patchValue({ - name: this.hero.name - }); - // #enddocregion patch-value - } - // #enddocregion patch-value-on-changes -} - -// #enddocregion v6 diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.ts deleted file mode 100644 index 60a220b6bdc..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-7.component.ts +++ /dev/null @@ -1,67 +0,0 @@ -/* tslint:disable:component-class-suffix */ -// #docplaster -// #docregion imports -import { Component, Input, OnChanges } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -import { Address, Hero, states } from './data-model'; -// #enddocregion imports - -@Component({ - moduleId: module.id, - selector: '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.heroForm.reset({ - name: this.hero.name, - address: this.hero.addresses[0] || new Address() - }); - } - // #enddocregion ngOnChanges - - /* First version of ngOnChanges - // #docregion ngOnChanges-1 - ngOnChanges() - // #enddocregion ngOnChanges-1 - */ - ngOnChanges1() { - // #docregion reset - this.heroForm.reset(); - // #enddocregion reset - // #docregion ngOnChanges-1 - // #docregion set-value - this.heroForm.setValue({ - name: this.hero.name, - // #docregion set-value-address - address: this.hero.addresses[0] || new Address() - // #enddocregion set-value-address - }); - // #enddocregion set-value - } - // #enddocregion ngOnChanges-1 -} - diff --git a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.ts deleted file mode 100644 index 99cd6f822a8..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail-8.component.ts +++ /dev/null @@ -1,69 +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({ - moduleId: module.id, - selector: '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.heroForm.reset({ - name: this.hero.name - }); - this.setAddresses(this.hero.addresses); - } - // #enddocregion onchanges - - // #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/aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.ts deleted file mode 100644 index a644e54ffb9..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,108 +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 - -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'hero-detail', - templateUrl: './hero-detail.component.html' -}) -// #enddocregion metadata -export class HeroDetailComponent implements OnChanges { - @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.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.ngOnChanges(); - } - // #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.ngOnChanges(); } - // #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/aio/content/examples/reactive-forms/ts/src/app/hero-list.component.ts b/aio/content/examples/reactive-forms/ts/src/app/hero-list.component.ts deleted file mode 100644 index 58fb2e79914..00000000000 --- a/aio/content/examples/reactive-forms/ts/src/app/hero-list.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/operator/finally'; - -import { Hero } from './data-model'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'hero-list', - templateUrl: 'hero-list.component.html' -}) -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 - .finally(() => this.isLoading = false); - this.selectedHero = undefined; - } - - select(hero: Hero) { this.selectedHero = hero; } -} diff --git a/aio/content/examples/router/e2e-spec.ts b/aio/content/examples/router/e2e-spec.ts index ed93fa20d72..2e9c6bafeb5 100644 --- a/aio/content/examples/router/e2e-spec.ts +++ b/aio/content/examples/router/e2e-spec.ts @@ -1,30 +1,34 @@ 'use strict'; // necessary for es6 output in node -import { browser, element, by, ElementFinder } from 'protractor'; +import { browser, element, by, ExpectedConditions } from 'protractor'; -describe('Router', function () { +const numDashboardTabs = 5; +const numCrises = 4; +const numHeroes = 6; +const EC = ExpectedConditions; - beforeAll(function () { - browser.get(''); - }); +describe('Router', () => { + + beforeAll(() => browser.get('')); function getPageStruct() { - let hrefEles = element.all(by.css('my-app a')); + const hrefEles = element.all(by.css('my-app a')); + const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first(); + const heroDetail = element(by.css('my-app > ng-component > div')); return { hrefs: hrefEles, - routerParent: element(by.css('my-app > ng-component')), - routerTitle: element(by.css('my-app > ng-component > h2')), + activeHref: element(by.css('my-app a.active')), crisisHref: hrefEles.get(0), crisisList: element.all(by.css('my-app > ng-component > ng-component li')), - crisisDetail: element(by.css('my-app > ng-component > ng-component > ng-component > div')), - crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > ng-component > div > h3')), + crisisDetail: crisisDetail, + crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')), heroesHref: hrefEles.get(1), heroesList: element.all(by.css('my-app > ng-component li')), - heroDetail: element(by.css('my-app > ng-component > div')), - heroDetailTitle: element(by.css('my-app > ng-component > div > h3')), + heroDetail: heroDetail, + heroDetailTitle: heroDetail.element(by.xpath('*[1]')), adminHref: hrefEles.get(2), adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')), @@ -39,9 +43,9 @@ describe('Router', function () { }; } - it('should be able to see the start screen', function () { - let page = getPageStruct(); - expect(page.hrefs.count()).toEqual(5, 'should be 5 dashboard choices'); + 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'); @@ -49,118 +53,110 @@ describe('Router', function () { expect(page.contactHref.getText()).toEqual('Contact'); }); - it('should be able to see crises center items', function () { - let page = getPageStruct(); - page.crisisHref.click().then(function() { - expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start'); - }); + it('has heroes selected as opening tab', () => { + const page = getPageStruct(); + expect(page.activeHref.getText()).toEqual('Heroes'); }); - it('should be able to see hero items', function () { - let page = getPageStruct(); - page.heroesHref.click().then(function() { - expect(page.routerTitle.getText()).toContain('HEROES'); - expect(page.heroesList.count()).toBe(6, 'should be 6 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('should be able to toggle the views', function () { - let page = getPageStruct(); - page.crisisHref.click().then(function() { - expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries'); - return page.heroesHref.click(); - }).then(function() { - expect(page.heroesList.count()).toBe(6, 'should be 6 heroes'); - }); + 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('should be able to edit and save details from the crisis center view', function () { - let page = getPageStruct(); - page.crisisHref.click().then(function() { - crisisCenterEdit(2, true); - }); + 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'); }); - xit('should be able to edit and cancel details from the crisis center view', function () { - let page = getPageStruct(); - page.crisisHref.click().then(function() { - crisisCenterEdit(3, false); - }); + it('saves changed crisis details', async () => { + const page = getPageStruct(); + await page.crisisHref.click(); + await crisisCenterEdit(2, true); }); - it('should be able to edit and save details from the heroes view', function () { - let page = getPageStruct(); - let heroEle: ElementFinder; - let heroText: string; - page.heroesHref.click().then(function() { - heroEle = page.heroesList.get(4); - return heroEle.getText(); - }).then(function(text: string) { - expect(text.length).toBeGreaterThan(0, 'should have some text'); - // remove leading id from text - heroText = text.substr(text.indexOf(' ')).trim(); - return heroEle.click(); - }).then(function() { - expect(page.heroesList.count()).toBe(0, 'should no longer see crisis center entries'); - expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); - expect(page.heroDetailTitle.getText()).toContain(heroText); - let inputEle = page.heroDetail.element(by.css('input')); - inputEle.sendKeys('-foo'); - expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); - let buttonEle = page.heroDetail.element(by.css('button')); - return buttonEle.click(); - }).then(function() { - expect(heroEle.getText()).toContain(heroText + '-foo'); - }); + it('can cancel changed crisis details', async () => { + const page = getPageStruct(); + await page.crisisHref.click(); + await crisisCenterEdit(3, false); }); - it('should be able to see the preloaded modules', function () { - let page = getPageStruct(); - page.loginHref.click().then(function() { - return page.loginButton.click(); - }).then(function() { - expect(page.adminPreloadList.count()).toBe(1, 'should be 1 preloaded module'); - expect(page.adminPreloadList.first().getText()).toBe('crisis-center', 'first preload should be crisis center'); - }); + 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('should be able to see the secondary route', function () { - let page = getPageStruct(); - page.heroesHref.click().then(function() { - return page.contactHref.click(); - }).then(function() { - expect(page.outletComponents.count()).toBe(2, 'should be 2 displayed routes'); - }); + 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'); }); - function crisisCenterEdit(index: number, shouldSave: boolean) { - let page = getPageStruct(); - let crisisEle: ElementFinder; - let crisisText: string; - page.crisisHref.click() - .then(function () { - crisisEle = page.crisisList.get(index); - return crisisEle.getText(); - }).then(function(text: string) { - expect(text.length).toBeGreaterThan(0, 'should have some text'); - // remove leading id from text - crisisText = text.substr(text.indexOf(' ')).trim(); - return crisisEle.click(); - }).then(function () { - expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail'); - expect(page.crisisDetailTitle.getText()).toContain(crisisText); - let inputEle = page.crisisDetail.element(by.css('input')); - inputEle.sendKeys('-foo'); - expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo'); - let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel')); - return buttonEle.click(); - }).then(function () { - if (shouldSave) { - expect(crisisEle.getText()).toContain(crisisText + '-foo'); - } else { - expect(crisisEle.getText()).not.toContain(crisisText + '-foo'); - } - }); + 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()).toEqual(crisisText + '-foo'); + } else { + await browser.wait(EC.alertIsPresent(), 4000); + await browser.switchTo().alert().accept(); + expect(crisisEle.getText()).toEqual(crisisText); + } } }); diff --git a/aio/content/examples/reactive-forms/ts/example-config.json b/aio/content/examples/router/example-config.json similarity index 100% rename from aio/content/examples/reactive-forms/ts/example-config.json rename to aio/content/examples/router/example-config.json diff --git a/aio/content/examples/router/ts/plnkr.json b/aio/content/examples/router/plnkr.json similarity index 100% rename from aio/content/examples/router/ts/plnkr.json rename to aio/content/examples/router/plnkr.json diff --git a/aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.1.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.1.ts rename to aio/content/examples/router/src/app/admin/admin-dashboard.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.2.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.2.ts rename to aio/content/examples/router/src/app/admin/admin-dashboard.component.2.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.ts b/aio/content/examples/router/src/app/admin/admin-dashboard.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-dashboard.component.ts rename to aio/content/examples/router/src/app/admin/admin-dashboard.component.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-routing.module.1.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-routing.module.1.ts rename to aio/content/examples/router/src/app/admin/admin-routing.module.1.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-routing.module.2.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-routing.module.2.ts rename to aio/content/examples/router/src/app/admin/admin-routing.module.2.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-routing.module.3.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-routing.module.3.ts rename to aio/content/examples/router/src/app/admin/admin-routing.module.3.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin-routing.module.ts b/aio/content/examples/router/src/app/admin/admin-routing.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin-routing.module.ts rename to aio/content/examples/router/src/app/admin/admin-routing.module.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin.component.ts b/aio/content/examples/router/src/app/admin/admin.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin.component.ts rename to aio/content/examples/router/src/app/admin/admin.component.ts diff --git a/aio/content/examples/router/ts/src/app/admin/admin.module.ts b/aio/content/examples/router/src/app/admin/admin.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/admin.module.ts rename to aio/content/examples/router/src/app/admin/admin.module.ts diff --git a/aio/content/examples/router/ts/src/app/admin/manage-crises.component.ts b/aio/content/examples/router/src/app/admin/manage-crises.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/manage-crises.component.ts rename to aio/content/examples/router/src/app/admin/manage-crises.component.ts diff --git a/aio/content/examples/router/ts/src/app/admin/manage-heroes.component.ts b/aio/content/examples/router/src/app/admin/manage-heroes.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/admin/manage-heroes.component.ts rename to aio/content/examples/router/src/app/admin/manage-heroes.component.ts diff --git a/aio/content/examples/router/ts/src/app/animations.ts b/aio/content/examples/router/src/app/animations.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/animations.ts rename to aio/content/examples/router/src/app/animations.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.1.ts b/aio/content/examples/router/src/app/app-routing.module.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.1.ts rename to aio/content/examples/router/src/app/app-routing.module.1.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.2.ts b/aio/content/examples/router/src/app/app-routing.module.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.2.ts rename to aio/content/examples/router/src/app/app-routing.module.2.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.3.ts b/aio/content/examples/router/src/app/app-routing.module.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.3.ts rename to aio/content/examples/router/src/app/app-routing.module.3.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.4.ts b/aio/content/examples/router/src/app/app-routing.module.4.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.4.ts rename to aio/content/examples/router/src/app/app-routing.module.4.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.5.ts b/aio/content/examples/router/src/app/app-routing.module.5.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.5.ts rename to aio/content/examples/router/src/app/app-routing.module.5.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.6.ts b/aio/content/examples/router/src/app/app-routing.module.6.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.6.ts rename to aio/content/examples/router/src/app/app-routing.module.6.ts diff --git a/aio/content/examples/router/ts/src/app/app-routing.module.ts b/aio/content/examples/router/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app-routing.module.ts rename to aio/content/examples/router/src/app/app-routing.module.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.1.ts b/aio/content/examples/router/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.1.ts rename to aio/content/examples/router/src/app/app.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.2.ts b/aio/content/examples/router/src/app/app.component.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.2.ts rename to aio/content/examples/router/src/app/app.component.2.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.3.ts b/aio/content/examples/router/src/app/app.component.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.3.ts rename to aio/content/examples/router/src/app/app.component.3.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.4.ts b/aio/content/examples/router/src/app/app.component.4.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.4.ts rename to aio/content/examples/router/src/app/app.component.4.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.5.ts b/aio/content/examples/router/src/app/app.component.5.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.5.ts rename to aio/content/examples/router/src/app/app.component.5.ts diff --git a/aio/content/examples/router/ts/src/app/app.component.ts b/aio/content/examples/router/src/app/app.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.component.ts rename to aio/content/examples/router/src/app/app.component.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.0.ts b/aio/content/examples/router/src/app/app.module.0.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.0.ts rename to aio/content/examples/router/src/app/app.module.0.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.1.ts b/aio/content/examples/router/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.1.ts rename to aio/content/examples/router/src/app/app.module.1.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.2.ts b/aio/content/examples/router/src/app/app.module.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.2.ts rename to aio/content/examples/router/src/app/app.module.2.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.3.ts b/aio/content/examples/router/src/app/app.module.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.3.ts rename to aio/content/examples/router/src/app/app.module.3.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.4.ts b/aio/content/examples/router/src/app/app.module.4.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.4.ts rename to aio/content/examples/router/src/app/app.module.4.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.5.ts b/aio/content/examples/router/src/app/app.module.5.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.5.ts rename to aio/content/examples/router/src/app/app.module.5.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.6.ts b/aio/content/examples/router/src/app/app.module.6.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.6.ts rename to aio/content/examples/router/src/app/app.module.6.ts diff --git a/aio/content/examples/router/ts/src/app/app.module.7.ts b/aio/content/examples/router/src/app/app.module.7.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/app.module.7.ts rename to aio/content/examples/router/src/app/app.module.7.ts diff --git a/aio/content/examples/router/src/app/app.module.ts b/aio/content/examples/router/src/app/app.module.ts new file mode 100644 index 00000000000..dcf3401ded7 --- /dev/null +++ b/aio/content/examples/router/src/app/app.module.ts @@ -0,0 +1,56 @@ +// #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/aio/content/examples/router/ts/src/app/auth-guard.service.1.ts b/aio/content/examples/router/src/app/auth-guard.service.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth-guard.service.1.ts rename to aio/content/examples/router/src/app/auth-guard.service.1.ts diff --git a/aio/content/examples/router/ts/src/app/auth-guard.service.2.ts b/aio/content/examples/router/src/app/auth-guard.service.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth-guard.service.2.ts rename to aio/content/examples/router/src/app/auth-guard.service.2.ts diff --git a/aio/content/examples/router/ts/src/app/auth-guard.service.3.ts b/aio/content/examples/router/src/app/auth-guard.service.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth-guard.service.3.ts rename to aio/content/examples/router/src/app/auth-guard.service.3.ts diff --git a/aio/content/examples/router/ts/src/app/auth-guard.service.4.ts b/aio/content/examples/router/src/app/auth-guard.service.4.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth-guard.service.4.ts rename to aio/content/examples/router/src/app/auth-guard.service.4.ts diff --git a/aio/content/examples/router/ts/src/app/auth-guard.service.ts b/aio/content/examples/router/src/app/auth-guard.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth-guard.service.ts rename to aio/content/examples/router/src/app/auth-guard.service.ts diff --git a/aio/content/examples/router/ts/src/app/auth.service.ts b/aio/content/examples/router/src/app/auth.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/auth.service.ts rename to aio/content/examples/router/src/app/auth.service.ts diff --git a/aio/content/examples/router/ts/src/app/can-deactivate-guard.service.1.ts b/aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/can-deactivate-guard.service.1.ts rename to aio/content/examples/router/src/app/can-deactivate-guard.service.1.ts diff --git a/aio/content/examples/router/ts/src/app/can-deactivate-guard.service.ts b/aio/content/examples/router/src/app/can-deactivate-guard.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/can-deactivate-guard.service.ts rename to aio/content/examples/router/src/app/can-deactivate-guard.service.ts diff --git a/aio/content/examples/router/ts/src/app/compose-message.component.html b/aio/content/examples/router/src/app/compose-message.component.html similarity index 100% rename from aio/content/examples/router/ts/src/app/compose-message.component.html rename to aio/content/examples/router/src/app/compose-message.component.html diff --git a/aio/content/examples/router/src/app/compose-message.component.ts b/aio/content/examples/router/src/app/compose-message.component.ts new file mode 100644 index 00000000000..17a09533786 --- /dev/null +++ b/aio/content/examples/router/src/app/compose-message.component.ts @@ -0,0 +1,43 @@ +// #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: boolean = 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/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-home.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-home.component.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.1.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.2.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.2.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.3.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.3.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.4.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.4.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center-routing.module.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center.component.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center.component.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center.module.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center.module.1.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-center.module.ts b/aio/content/examples/router/src/app/crisis-center/crisis-center.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-center.module.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-center.module.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-detail-resolver.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-detail-resolver.service.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-detail.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-detail.component.1.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-detail.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-detail.component.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-detail.component.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-list.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-list.component.1.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis-list.component.ts rename to aio/content/examples/router/src/app/crisis-center/crisis-list.component.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-center/crisis.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-center/crisis.service.ts rename to aio/content/examples/router/src/app/crisis-center/crisis.service.ts diff --git a/aio/content/examples/router/ts/src/app/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-list.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/crisis-list.component.ts rename to aio/content/examples/router/src/app/crisis-list.component.ts diff --git a/aio/content/examples/router/ts/src/app/dialog.service.ts b/aio/content/examples/router/src/app/dialog.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/dialog.service.ts rename to aio/content/examples/router/src/app/dialog.service.ts diff --git a/aio/content/examples/router/ts/src/app/hero-list.component.ts b/aio/content/examples/router/src/app/hero-list.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/hero-list.component.ts rename to aio/content/examples/router/src/app/hero-list.component.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero-detail.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero-detail.component.1.ts rename to aio/content/examples/router/src/app/heroes/hero-detail.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero-detail.component.2.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero-detail.component.2.ts rename to aio/content/examples/router/src/app/heroes/hero-detail.component.2.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero-detail.component.ts b/aio/content/examples/router/src/app/heroes/hero-detail.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero-detail.component.ts rename to aio/content/examples/router/src/app/heroes/hero-detail.component.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-list.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero-list.component.1.ts rename to aio/content/examples/router/src/app/heroes/hero-list.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero-list.component.ts b/aio/content/examples/router/src/app/heroes/hero-list.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero-list.component.ts rename to aio/content/examples/router/src/app/heroes/hero-list.component.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/hero.service.ts b/aio/content/examples/router/src/app/heroes/hero.service.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/hero.service.ts rename to aio/content/examples/router/src/app/heroes/hero.service.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/heroes-routing.module.ts b/aio/content/examples/router/src/app/heroes/heroes-routing.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/heroes-routing.module.ts rename to aio/content/examples/router/src/app/heroes/heroes-routing.module.ts diff --git a/aio/content/examples/router/ts/src/app/heroes/heroes.module.ts b/aio/content/examples/router/src/app/heroes/heroes.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/heroes/heroes.module.ts rename to aio/content/examples/router/src/app/heroes/heroes.module.ts diff --git a/aio/content/examples/router/ts/src/app/login-routing.module.ts b/aio/content/examples/router/src/app/login-routing.module.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/login-routing.module.ts rename to aio/content/examples/router/src/app/login-routing.module.ts diff --git a/aio/content/examples/router/ts/src/app/login.component.1.ts b/aio/content/examples/router/src/app/login.component.1.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/login.component.1.ts rename to aio/content/examples/router/src/app/login.component.1.ts diff --git a/aio/content/examples/router/ts/src/app/login.component.ts b/aio/content/examples/router/src/app/login.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/login.component.ts rename to aio/content/examples/router/src/app/login.component.ts diff --git a/aio/content/examples/router/ts/src/app/not-found.component.ts b/aio/content/examples/router/src/app/not-found.component.ts similarity index 100% rename from aio/content/examples/router/ts/src/app/not-found.component.ts rename to aio/content/examples/router/src/app/not-found.component.ts diff --git a/aio/content/examples/router/src/app/selective-preloading-strategy.ts b/aio/content/examples/router/src/app/selective-preloading-strategy.ts new file mode 100644 index 00000000000..395f1056ef5 --- /dev/null +++ b/aio/content/examples/router/src/app/selective-preloading-strategy.ts @@ -0,0 +1,24 @@ +// #docregion +import 'rxjs/add/observable/of'; +import { Injectable } from '@angular/core'; +import { PreloadingStrategy, Route } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; + +@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 Observable.of(null); + } + } +} diff --git a/aio/content/examples/router/ts/src/index.html b/aio/content/examples/router/src/index.html similarity index 100% rename from aio/content/examples/router/ts/src/index.html rename to aio/content/examples/router/src/index.html diff --git a/aio/content/examples/router/ts/src/main.ts b/aio/content/examples/router/src/main.ts similarity index 100% rename from aio/content/examples/router/ts/src/main.ts rename to aio/content/examples/router/src/main.ts diff --git a/aio/content/examples/router/ts/plnkr.no-link.html b/aio/content/examples/router/ts/plnkr.no-link.html deleted file mode 100644 index c275a01f140..00000000000 --- a/aio/content/examples/router/ts/plnkr.no-link.html +++ /dev/null @@ -1,1353 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/router/ts/src/app/app.module.ts b/aio/content/examples/router/ts/src/app/app.module.ts deleted file mode 100644 index d580964e529..00000000000 --- a/aio/content/examples/router/ts/src/app/app.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docplaster -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -// #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'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule, - HeroesModule, - LoginRoutingModule, - AppRoutingModule - ], - 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/aio/content/examples/router/ts/src/app/compose-message.component.ts b/aio/content/examples/router/ts/src/app/compose-message.component.ts deleted file mode 100644 index 38fd47fded6..00000000000 --- a/aio/content/examples/router/ts/src/app/compose-message.component.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docregion -import { Component, HostBinding } from '@angular/core'; -import { Router } from '@angular/router'; - -import { slideInDownAnimation } from './animations'; - -@Component({ - moduleId: module.id, - 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: boolean = 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/aio/content/examples/router/ts/src/app/selective-preloading-strategy.ts b/aio/content/examples/router/ts/src/app/selective-preloading-strategy.ts deleted file mode 100644 index 0e06cd8a386..00000000000 --- a/aio/content/examples/router/ts/src/app/selective-preloading-strategy.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import 'rxjs/add/observable/of'; -import { Injectable } from '@angular/core'; -import { PreloadingStrategy, Route } from '@angular/router'; -import { Observable } from 'rxjs/Observable'; - -@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 our preloaded module array - this.preloadedModules.push(route.path); - - // log the route path to the console - console.log('Preloaded: ' + route.path); - - return load(); - } else { - return Observable.of(null); - } - } -} diff --git a/aio/content/examples/router/ts/example-config.json b/aio/content/examples/security/example-config.json similarity index 100% rename from aio/content/examples/router/ts/example-config.json rename to aio/content/examples/security/example-config.json diff --git a/aio/content/examples/security/ts/plnkr.json b/aio/content/examples/security/plnkr.json similarity index 100% rename from aio/content/examples/security/ts/plnkr.json rename to aio/content/examples/security/plnkr.json diff --git a/aio/content/examples/security/ts/src/app/app.component.ts b/aio/content/examples/security/src/app/app.component.ts similarity index 100% rename from aio/content/examples/security/ts/src/app/app.component.ts rename to aio/content/examples/security/src/app/app.component.ts diff --git a/aio/content/examples/security/ts/src/app/app.module.ts b/aio/content/examples/security/src/app/app.module.ts similarity index 100% rename from aio/content/examples/security/ts/src/app/app.module.ts rename to aio/content/examples/security/src/app/app.module.ts diff --git a/aio/content/examples/security/ts/src/app/bypass-security.component.html b/aio/content/examples/security/src/app/bypass-security.component.html similarity index 100% rename from aio/content/examples/security/ts/src/app/bypass-security.component.html rename to aio/content/examples/security/src/app/bypass-security.component.html diff --git a/aio/content/examples/security/src/app/bypass-security.component.ts b/aio/content/examples/security/src/app/bypass-security.component.ts new file mode 100644 index 00000000000..ff41e287bac --- /dev/null +++ b/aio/content/examples/security/src/app/bypass-security.component.ts @@ -0,0 +1,38 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; + +@Component({ + selector: '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/aio/content/examples/security/ts/src/app/inner-html-binding.component.html b/aio/content/examples/security/src/app/inner-html-binding.component.html similarity index 100% rename from aio/content/examples/security/ts/src/app/inner-html-binding.component.html rename to aio/content/examples/security/src/app/inner-html-binding.component.html diff --git a/aio/content/examples/security/src/app/inner-html-binding.component.ts b/aio/content/examples/security/src/app/inner-html-binding.component.ts new file mode 100644 index 00000000000..83195036861 --- /dev/null +++ b/aio/content/examples/security/src/app/inner-html-binding.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: '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/aio/content/examples/security/ts/src/index.html b/aio/content/examples/security/src/index.html similarity index 100% rename from aio/content/examples/security/ts/src/index.html rename to aio/content/examples/security/src/index.html diff --git a/aio/content/examples/security/ts/src/main.ts b/aio/content/examples/security/src/main.ts similarity index 100% rename from aio/content/examples/security/ts/src/main.ts rename to aio/content/examples/security/src/main.ts diff --git a/aio/content/examples/security/ts/plnkr.no-link.html b/aio/content/examples/security/ts/plnkr.no-link.html deleted file mode 100644 index 1e348b36013..00000000000 --- a/aio/content/examples/security/ts/plnkr.no-link.html +++ /dev/null @@ -1,288 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/security/ts/src/app/bypass-security.component.ts b/aio/content/examples/security/ts/src/app/bypass-security.component.ts deleted file mode 100644 index 769c0ba95a9..00000000000 --- a/aio/content/examples/security/ts/src/app/bypass-security.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; - -@Component({ - selector: 'bypass-security', - moduleId: module.id, - 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/aio/content/examples/security/ts/src/app/inner-html-binding.component.ts b/aio/content/examples/security/ts/src/app/inner-html-binding.component.ts deleted file mode 100644 index 23c921e9793..00000000000 --- a/aio/content/examples/security/ts/src/app/inner-html-binding.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/server-communication/e2e-spec.ts b/aio/content/examples/server-communication/e2e-spec.ts index 2b6571b039d..a85c7489f88 100644 --- a/aio/content/examples/server-communication/e2e-spec.ts +++ b/aio/content/examples/server-communication/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by } from 'protractor'; @@ -56,19 +56,19 @@ describe('Server Communication', function () { }); describe('Fetches after each keystroke', function () { - it('should fetch results after "B"', function(done) { + it('should fetch results after "B"', function(done: any) { testForRefreshedResult('B', done); }); - it('should fetch results after "Ba"', function(done) { + it('should fetch results after "Ba"', function(done: any) { testForRefreshedResult('a', done); }); - it('should fetch results after "Bas"', function(done) { + it('should fetch results after "Bas"', function(done: any) { testForRefreshedResult('s', done); }); - it('should fetch results after "Basic"', function(done) { + it('should fetch results after "Basic"', function(done: any) { testForRefreshedResult('ic', done); }); }); @@ -87,19 +87,19 @@ describe('Server Communication', function () { expect(resultList.count()).toBe(0, 'result list must be empty'); }); - it('should fetch results after "Java"', function(done) { + it('should fetch results after "Java"', function(done: any) { testForNewResult('Java', done); }); - it('should fetch results after "JavaS"', function(done) { + it('should fetch results after "JavaS"', function(done: any) { testForStaleResult('S', done); }); - it('should fetch results after "JavaSc"', function(done) { + it('should fetch results after "JavaSc"', function(done: any) { testForStaleResult('c', done); }); - it('should fetch results after "JavaScript"', function(done) { + it('should fetch results after "JavaScript"', function(done: any) { testForStaleResult('ript', done); }); diff --git a/aio/content/examples/security/ts/example-config.json b/aio/content/examples/server-communication/example-config.json similarity index 100% rename from aio/content/examples/security/ts/example-config.json rename to aio/content/examples/server-communication/example-config.json diff --git a/aio/content/examples/server-communication/ts/plnkr.json b/aio/content/examples/server-communication/plnkr.json similarity index 100% rename from aio/content/examples/server-communication/ts/plnkr.json rename to aio/content/examples/server-communication/plnkr.json diff --git a/aio/content/examples/server-communication/ts/src/app/app.component.ts b/aio/content/examples/server-communication/src/app/app.component.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/app.component.ts rename to aio/content/examples/server-communication/src/app/app.component.ts diff --git a/aio/content/examples/server-communication/ts/src/app/app.module.1.ts b/aio/content/examples/server-communication/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/app.module.1.ts rename to aio/content/examples/server-communication/src/app/app.module.1.ts diff --git a/aio/content/examples/server-communication/ts/src/app/app.module.ts b/aio/content/examples/server-communication/src/app/app.module.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/app.module.ts rename to aio/content/examples/server-communication/src/app/app.module.ts diff --git a/aio/content/examples/server-communication/ts/src/app/default-request-options.service.ts b/aio/content/examples/server-communication/src/app/default-request-options.service.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/default-request-options.service.ts rename to aio/content/examples/server-communication/src/app/default-request-options.service.ts diff --git a/aio/content/examples/server-communication/ts/src/app/hero-data.ts b/aio/content/examples/server-communication/src/app/hero-data.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/hero-data.ts rename to aio/content/examples/server-communication/src/app/hero-data.ts diff --git a/aio/content/examples/server-communication/ts/src/app/heroes.json b/aio/content/examples/server-communication/src/app/heroes.json similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/heroes.json rename to aio/content/examples/server-communication/src/app/heroes.json diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.html b/aio/content/examples/server-communication/src/app/toh/hero-list.component.html similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.html rename to aio/content/examples/server-communication/src/app/toh/hero-list.component.html diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts new file mode 100644 index 00000000000..4bbe7eade22 --- /dev/null +++ b/aio/content/examples/server-communication/src/app/toh/hero-list.component.promise.ts @@ -0,0 +1,40 @@ +// #docregion +// Promise Version +import { Component, OnInit } from '@angular/core'; +import { Hero } from './hero'; +import { HeroService } from './hero.service.promise'; + +@Component({ + selector: 'hero-list-promise', + templateUrl: './hero-list.component.html', + providers: [ HeroService ], + styles: ['.error {color:red;}'] +}) +// #docregion component +export class HeroListPromiseComponent implements OnInit { + errorMessage: string; + heroes: Hero[]; + mode = 'Promise'; + + constructor (private heroService: HeroService) {} + + ngOnInit() { this.getHeroes(); } + + // #docregion methods + getHeroes() { + this.heroService.getHeroes() + .then( + heroes => this.heroes = heroes, + error => this.errorMessage = error); + } + + addHero (name: string) { + if (!name) { return; } + this.heroService.addHero(name) + .then( + hero => this.heroes.push(hero), + error => this.errorMessage = error); + } + // #enddocregion methods +} +// #enddocregion component diff --git a/aio/content/examples/server-communication/src/app/toh/hero-list.component.ts b/aio/content/examples/server-communication/src/app/toh/hero-list.component.ts new file mode 100644 index 00000000000..8cca5047624 --- /dev/null +++ b/aio/content/examples/server-communication/src/app/toh/hero-list.component.ts @@ -0,0 +1,44 @@ +// #docregion +// Observable Version +import { Component, OnInit } from '@angular/core'; +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'hero-list', + templateUrl: './hero-list.component.html', + providers: [ HeroService ], + styles: ['.error {color:red;}'] +}) +// #docregion component +export class HeroListComponent implements OnInit { + errorMessage: string; + heroes: Hero[]; + mode = 'Observable'; + + constructor (private heroService: HeroService) {} + + ngOnInit() { this.getHeroes(); } + + // #docregion methods + // #docregion getHeroes + getHeroes() { + this.heroService.getHeroes() + .subscribe( + heroes => this.heroes = heroes, + error => this.errorMessage = error); + } + // #enddocregion getHeroes + + // #docregion addHero + addHero(name: string) { + if (!name) { return; } + this.heroService.create(name) + .subscribe( + hero => this.heroes.push(hero), + error => this.errorMessage = error); + } + // #enddocregion addHero + // #enddocregion methods +} +// #enddocregion component diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero.service.promise.ts b/aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/toh/hero.service.promise.ts rename to aio/content/examples/server-communication/src/app/toh/hero.service.promise.ts diff --git a/aio/content/examples/server-communication/src/app/toh/hero.service.ts b/aio/content/examples/server-communication/src/app/toh/hero.service.ts new file mode 100644 index 00000000000..4f0da490212 --- /dev/null +++ b/aio/content/examples/server-communication/src/app/toh/hero.service.ts @@ -0,0 +1,80 @@ +// #docplaster +// #docregion +// Observable Version +// #docregion v1 +import { Injectable } from '@angular/core'; +import { Http, Response } from '@angular/http'; +// #enddocregion v1 +// #docregion import-request-options +import { Headers, RequestOptions } from '@angular/http'; +// #enddocregion import-request-options +// #docregion v1 + +// #docregion rxjs-imports +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/map'; +// #enddocregion rxjs-imports + +import { Hero } from './hero'; + +@Injectable() +export class HeroService { + // #docregion endpoint + private heroesUrl = 'api/heroes'; // URL to web API + // #enddocregion endpoint + + // #docregion ctor + constructor (private http: Http) {} + // #enddocregion ctor + + // #docregion methods, error-handling, http-get + getHeroes(): Observable { + return this.http.get(this.heroesUrl) + .map(this.extractData) + .catch(this.handleError); + } + // #enddocregion error-handling, http-get, v1 + + // #docregion create, create-sig + create(name: string): Observable { + // #enddocregion create-sig + let headers = new Headers({ 'Content-Type': 'application/json' }); + let options = new RequestOptions({ headers: headers }); + + return this.http.post(this.heroesUrl, { name }, options) + .map(this.extractData) + .catch(this.handleError); + } + // #enddocregion create + + // #docregion v1, extract-data + private extractData(res: Response) { + let body = res.json(); + return body.data || { }; + } + // #enddocregion extract-data + // #docregion error-handling + + private handleError (error: Response | any) { + // In a real world app, you might use a remote logging infrastructure + let errMsg: string; + if (error instanceof Response) { + const body = error.json() || ''; + const err = body.error || JSON.stringify(body); + errMsg = `${error.status} - ${error.statusText || ''} ${err}`; + } else { + errMsg = error.message ? error.message : error.toString(); + } + console.error(errMsg); + return Observable.throw(errMsg); + } + // #enddocregion error-handling, methods +} +// #enddocregion + +/* + // #docregion endpoint-json + private heroesUrl = 'app/heroes.json'; // URL to JSON file + // #enddocregion endpoint-json +*/ diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero.ts b/aio/content/examples/server-communication/src/app/toh/hero.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/toh/hero.ts rename to aio/content/examples/server-communication/src/app/toh/hero.ts diff --git a/aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts b/aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts new file mode 100644 index 00000000000..fc453a820eb --- /dev/null +++ b/aio/content/examples/server-communication/src/app/wiki/wiki-smart.component.ts @@ -0,0 +1,47 @@ +/* tslint:disable: member-ordering forin */ +// #docplaster +// #docregion +import { Component, OnInit } from '@angular/core'; + +// #docregion rxjs-imports +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/operator/switchMap'; + +// #docregion import-subject +import { Subject } from 'rxjs/Subject'; +// #enddocregion import-subject + +import { WikipediaService } from './wikipedia.service'; + +@Component({ + selector: 'my-wiki-smart', + template: ` +

Smarter Wikipedia Demo

+

Search when typing stops

+ +
    +
  • {{item}}
  • +
`, + providers: [ WikipediaService ] +}) +export class WikiSmartComponent implements OnInit { + items: Observable; + + constructor (private wikipediaService: WikipediaService) {} + + // #docregion subject + private searchTermStream = new Subject(); + search(term: string) { this.searchTermStream.next(term); } + // #enddocregion subject + + ngOnInit() { + // #docregion observable-operators + this.items = this.searchTermStream + .debounceTime(300) + .distinctUntilChanged() + .switchMap((term: string) => this.wikipediaService.search(term)); + // #enddocregion observable-operators + } +} diff --git a/aio/content/examples/server-communication/ts/src/app/wiki/wiki.component.ts b/aio/content/examples/server-communication/src/app/wiki/wiki.component.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/wiki/wiki.component.ts rename to aio/content/examples/server-communication/src/app/wiki/wiki.component.ts diff --git a/aio/content/examples/server-communication/ts/src/app/wiki/wikipedia.service.1.ts b/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/wiki/wikipedia.service.1.ts rename to aio/content/examples/server-communication/src/app/wiki/wikipedia.service.1.ts diff --git a/aio/content/examples/server-communication/ts/src/app/wiki/wikipedia.service.ts b/aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/app/wiki/wikipedia.service.ts rename to aio/content/examples/server-communication/src/app/wiki/wikipedia.service.ts diff --git a/aio/content/examples/server-communication/ts/src/index.html b/aio/content/examples/server-communication/src/index.html similarity index 100% rename from aio/content/examples/server-communication/ts/src/index.html rename to aio/content/examples/server-communication/src/index.html diff --git a/aio/content/examples/server-communication/ts/src/main.ts b/aio/content/examples/server-communication/src/main.ts similarity index 100% rename from aio/content/examples/server-communication/ts/src/main.ts rename to aio/content/examples/server-communication/src/main.ts diff --git a/aio/content/examples/server-communication/ts/plnkr.no-link.html b/aio/content/examples/server-communication/ts/plnkr.no-link.html deleted file mode 100644 index c54e18ab92b..00000000000 --- a/aio/content/examples/server-communication/ts/plnkr.no-link.html +++ /dev/null @@ -1,610 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts b/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts deleted file mode 100644 index abe6a554e92..00000000000 --- a/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docregion -// Promise Version -import { Component, OnInit } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service.promise'; - -@Component({ - selector: 'hero-list-promise', - moduleId: module.id, - templateUrl: './hero-list.component.html', - providers: [ HeroService ], - styles: ['.error {color:red;}'] -}) -// #docregion component -export class HeroListPromiseComponent implements OnInit { - errorMessage: string; - heroes: Hero[]; - mode = 'Promise'; - - constructor (private heroService: HeroService) {} - - ngOnInit() { this.getHeroes(); } - - // #docregion methods - getHeroes() { - this.heroService.getHeroes() - .then( - heroes => this.heroes = heroes, - error => this.errorMessage = error); - } - - addHero (name: string) { - if (!name) { return; } - this.heroService.addHero(name) - .then( - hero => this.heroes.push(hero), - error => this.errorMessage = error); - } - // #enddocregion methods -} -// #enddocregion component diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.ts b/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.ts deleted file mode 100644 index e28faacc0eb..00000000000 --- a/aio/content/examples/server-communication/ts/src/app/toh/hero-list.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -// #docregion -// Observable Version -import { Component, OnInit } from '@angular/core'; -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'hero-list', - templateUrl: './hero-list.component.html', - providers: [ HeroService ], - styles: ['.error {color:red;}'] -}) -// #docregion component -export class HeroListComponent implements OnInit { - errorMessage: string; - heroes: Hero[]; - mode = 'Observable'; - - constructor (private heroService: HeroService) {} - - ngOnInit() { this.getHeroes(); } - - // #docregion methods - // #docregion getHeroes - getHeroes() { - this.heroService.getHeroes() - .subscribe( - heroes => this.heroes = heroes, - error => this.errorMessage = error); - } - // #enddocregion getHeroes - - // #docregion addHero - addHero (name: string) { - if (!name) { return; } - this.heroService.addHero(name) - .subscribe( - hero => this.heroes.push(hero), - error => this.errorMessage = error); - } - // #enddocregion addHero - // #enddocregion methods -} -// #enddocregion component diff --git a/aio/content/examples/server-communication/ts/src/app/toh/hero.service.ts b/aio/content/examples/server-communication/ts/src/app/toh/hero.service.ts deleted file mode 100644 index 804883d0e83..00000000000 --- a/aio/content/examples/server-communication/ts/src/app/toh/hero.service.ts +++ /dev/null @@ -1,80 +0,0 @@ -// #docplaster -// #docregion -// Observable Version -// #docregion v1 -import { Injectable } from '@angular/core'; -import { Http, Response } from '@angular/http'; -// #enddocregion v1 -// #docregion import-request-options -import { Headers, RequestOptions } from '@angular/http'; -// #enddocregion import-request-options -// #docregion v1 - -// #docregion rxjs-imports -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/map'; -// #enddocregion rxjs-imports - -import { Hero } from './hero'; - -@Injectable() -export class HeroService { - // #docregion endpoint - private heroesUrl = 'app/heroes'; // URL to web API - // #enddocregion endpoint - - // #docregion ctor - constructor (private http: Http) {} - // #enddocregion ctor - - // #docregion methods, error-handling, http-get - getHeroes (): Observable { - return this.http.get(this.heroesUrl) - .map(this.extractData) - .catch(this.handleError); - } - // #enddocregion error-handling, http-get, v1 - - // #docregion addhero, addhero-sig - addHero (name: string): Observable { - // #enddocregion addhero-sig - let headers = new Headers({ 'Content-Type': 'application/json' }); - let options = new RequestOptions({ headers: headers }); - - return this.http.post(this.heroesUrl, { name }, options) - .map(this.extractData) - .catch(this.handleError); - } - // #enddocregion addhero - - // #docregion v1, extract-data - private extractData(res: Response) { - let body = res.json(); - return body.data || { }; - } - // #enddocregion extract-data - // #docregion error-handling - - private handleError (error: Response | any) { - // In a real world app, we might use a remote logging infrastructure - let errMsg: string; - if (error instanceof Response) { - const body = error.json() || ''; - const err = body.error || JSON.stringify(body); - errMsg = `${error.status} - ${error.statusText || ''} ${err}`; - } else { - errMsg = error.message ? error.message : error.toString(); - } - console.error(errMsg); - return Observable.throw(errMsg); - } - // #enddocregion error-handling, methods -} -// #enddocregion - -/* - // #docregion endpoint-json - private heroesUrl = 'app/heroes.json'; // URL to JSON file - // #enddocregion endpoint-json -*/ diff --git a/aio/content/examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts b/aio/content/examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts deleted file mode 100644 index ec95472b983..00000000000 --- a/aio/content/examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/* tslint:disable: member-ordering forin */ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; - -// #docregion rxjs-imports -import { Observable } from 'rxjs/Observable'; -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/operator/distinctUntilChanged'; -import 'rxjs/add/operator/switchMap'; - -// #docregion import-subject -import { Subject } from 'rxjs/Subject'; -// #enddocregion import-subject - -import { WikipediaService } from './wikipedia.service'; - -@Component({ - moduleId: module.id, - selector: 'my-wiki-smart', - template: ` -

Smarter Wikipedia Demo

-

Search when typing stops

- -
    -
  • {{item}}
  • -
`, - providers: [ WikipediaService ] -}) -export class WikiSmartComponent implements OnInit { - items: Observable; - - constructor (private wikipediaService: WikipediaService) {} - - // #docregion subject - private searchTermStream = new Subject(); - search(term: string) { this.searchTermStream.next(term); } - // #enddocregion subject - - ngOnInit() { - // #docregion observable-operators - this.items = this.searchTermStream - .debounceTime(300) - .distinctUntilChanged() - .switchMap((term: string) => this.wikipediaService.search(term)); - // #enddocregion observable-operators - } -} diff --git a/aio/content/examples/setup/ts/example-config.json b/aio/content/examples/setup/example-config.json similarity index 100% rename from aio/content/examples/setup/ts/example-config.json rename to aio/content/examples/setup/example-config.json diff --git a/aio/content/examples/setup/ts/non-essential-files.txt b/aio/content/examples/setup/non-essential-files.txt similarity index 100% rename from aio/content/examples/setup/ts/non-essential-files.txt rename to aio/content/examples/setup/non-essential-files.txt diff --git a/aio/content/examples/setup/ts/plnkr.json b/aio/content/examples/setup/plnkr.json similarity index 100% rename from aio/content/examples/setup/ts/plnkr.json rename to aio/content/examples/setup/plnkr.json diff --git a/aio/content/examples/setup/ts/quickstart-specs.plnkr.json b/aio/content/examples/setup/quickstart-specs.plnkr.json similarity index 100% rename from aio/content/examples/setup/ts/quickstart-specs.plnkr.json rename to aio/content/examples/setup/quickstart-specs.plnkr.json diff --git a/aio/content/examples/setup/ts/src/app/app.component.spec.ts b/aio/content/examples/setup/src/app/app.component.spec.ts similarity index 100% rename from aio/content/examples/setup/ts/src/app/app.component.spec.ts rename to aio/content/examples/setup/src/app/app.component.spec.ts diff --git a/aio/content/examples/setup/ts/src/app/app.component.ts b/aio/content/examples/setup/src/app/app.component.ts similarity index 100% rename from aio/content/examples/setup/ts/src/app/app.component.ts rename to aio/content/examples/setup/src/app/app.component.ts diff --git a/aio/content/examples/setup/ts/src/app/app.module.ts b/aio/content/examples/setup/src/app/app.module.ts similarity index 100% rename from aio/content/examples/setup/ts/src/app/app.module.ts rename to aio/content/examples/setup/src/app/app.module.ts diff --git a/aio/content/examples/setup/ts/src/index.html b/aio/content/examples/setup/src/index.html similarity index 100% rename from aio/content/examples/setup/ts/src/index.html rename to aio/content/examples/setup/src/index.html diff --git a/aio/content/examples/setup/ts/src/main.ts b/aio/content/examples/setup/src/main.ts similarity index 100% rename from aio/content/examples/setup/ts/src/main.ts rename to aio/content/examples/setup/src/main.ts diff --git a/aio/content/examples/setup/ts/src/quickstart-specs.html b/aio/content/examples/setup/src/quickstart-specs.html similarity index 100% rename from aio/content/examples/setup/ts/src/quickstart-specs.html rename to aio/content/examples/setup/src/quickstart-specs.html diff --git a/aio/content/examples/setup/src/systemjs.config.extras.js b/aio/content/examples/setup/src/systemjs.config.extras.js new file mode 100644 index 00000000000..027dfe58cf2 --- /dev/null +++ b/aio/content/examples/setup/src/systemjs.config.extras.js @@ -0,0 +1,11 @@ +/** + * Add barrels and stuff + * Adjust as necessary for your application needs. + */ +// (function (global) { +// System.config({ +// packages: { +// // add packages here +// } +// }); +// })(this); diff --git a/aio/content/examples/setup/ts/plnkr.no-link.html b/aio/content/examples/setup/ts/plnkr.no-link.html deleted file mode 100644 index 0d03a82e7aa..00000000000 --- a/aio/content/examples/setup/ts/plnkr.no-link.html +++ /dev/null @@ -1,189 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/setup/ts/quickstart-specs.plnkr.no-link.html b/aio/content/examples/setup/ts/quickstart-specs.plnkr.no-link.html deleted file mode 100644 index d1dbb02d71f..00000000000 --- a/aio/content/examples/setup/ts/quickstart-specs.plnkr.no-link.html +++ /dev/null @@ -1,264 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/server-communication/ts/example-config.json b/aio/content/examples/structural-directives/example-config.json similarity index 100% rename from aio/content/examples/server-communication/ts/example-config.json rename to aio/content/examples/structural-directives/example-config.json diff --git a/aio/content/examples/structural-directives/ts/plnkr.json b/aio/content/examples/structural-directives/plnkr.json similarity index 100% rename from aio/content/examples/structural-directives/ts/plnkr.json rename to aio/content/examples/structural-directives/plnkr.json diff --git a/aio/content/examples/structural-directives/ts/src/app/app.component.css b/aio/content/examples/structural-directives/src/app/app.component.css similarity index 100% rename from aio/content/examples/structural-directives/ts/src/app/app.component.css rename to aio/content/examples/structural-directives/src/app/app.component.css diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html new file mode 100644 index 00000000000..309d2bb5f73 --- /dev/null +++ b/aio/content/examples/structural-directives/src/app/app.component.html @@ -0,0 +1,250 @@ + + +

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

+

<template> element

+ + + + +

template attribute

+ +
{{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}} +
+ + +

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

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

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

+ + + + +
+
+ +

NgSwitch

+ +
Pick your favorite hero
+

+ + +

+ +

NgSwitch

+ + +
+ + + + +
+ + +

NgSwitch with template attribute

+ +
+ + + + +
+ + +

NgSwitch with <template>

+ +
+ + + + +
+ + +
+ +

<template>

+ +

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 myUnless is set to false. +

+ + + +

UnlessDirective with template

+ + +

Show this sentence unless the condition is true.

+ + +

+ (A) <p template="myUnless condition" class="code unless"> +

+ + + diff --git a/aio/content/examples/structural-directives/src/app/app.component.ts b/aio/content/examples/structural-directives/src/app/app.component.ts new file mode 100644 index 00000000000..ff6f0e65a12 --- /dev/null +++ b/aio/content/examples/structural-directives/src/app/app.component.ts @@ -0,0 +1,23 @@ +// #docregion +import { Component } from '@angular/core'; + +import { Hero, heroes } from './hero'; + +@Component({ + selector: 'my-app', + 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/aio/content/examples/structural-directives/ts/src/app/app.module.ts b/aio/content/examples/structural-directives/src/app/app.module.ts similarity index 100% rename from aio/content/examples/structural-directives/ts/src/app/app.module.ts rename to aio/content/examples/structural-directives/src/app/app.module.ts diff --git a/aio/content/examples/structural-directives/ts/src/app/hero-switch.components.ts b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts similarity index 100% rename from aio/content/examples/structural-directives/ts/src/app/hero-switch.components.ts rename to aio/content/examples/structural-directives/src/app/hero-switch.components.ts diff --git a/aio/content/examples/structural-directives/ts/src/app/hero.ts b/aio/content/examples/structural-directives/src/app/hero.ts similarity index 100% rename from aio/content/examples/structural-directives/ts/src/app/hero.ts rename to aio/content/examples/structural-directives/src/app/hero.ts diff --git a/aio/content/examples/structural-directives/ts/src/app/scrap.txt b/aio/content/examples/structural-directives/src/app/scrap.txt similarity index 100% rename from aio/content/examples/structural-directives/ts/src/app/scrap.txt rename to aio/content/examples/structural-directives/src/app/scrap.txt diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts new file mode 100644 index 00000000000..470bbd932f1 --- /dev/null +++ b/aio/content/examples/structural-directives/src/app/unless.directive.ts @@ -0,0 +1,51 @@ +// #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 `myUnless` 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: '[myUnless]'}) +export class UnlessDirective { + // #enddocregion skeleton + private hasView = false; + + // #docregion ctor + constructor( + private templateRef: TemplateRef, + private viewContainer: ViewContainerRef) { } + // #enddocregion ctor + + // #docregion set + @Input() set myUnless(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/aio/content/examples/structural-directives/ts/src/index.html b/aio/content/examples/structural-directives/src/index.html similarity index 100% rename from aio/content/examples/structural-directives/ts/src/index.html rename to aio/content/examples/structural-directives/src/index.html diff --git a/aio/content/examples/structural-directives/ts/src/main.ts b/aio/content/examples/structural-directives/src/main.ts similarity index 100% rename from aio/content/examples/structural-directives/ts/src/main.ts rename to aio/content/examples/structural-directives/src/main.ts diff --git a/aio/content/examples/structural-directives/ts/plnkr.no-link.html b/aio/content/examples/structural-directives/ts/plnkr.no-link.html deleted file mode 100644 index 1f7888664f4..00000000000 --- a/aio/content/examples/structural-directives/ts/plnkr.no-link.html +++ /dev/null @@ -1,612 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/structural-directives/ts/src/app/app.component.html b/aio/content/examples/structural-directives/ts/src/app/app.component.html deleted file mode 100644 index 2758553e39c..00000000000 --- a/aio/content/examples/structural-directives/ts/src/app/app.component.html +++ /dev/null @@ -1,252 +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

-

<template> element

- - - - -

template attribute

- -
{{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}} -
- - -

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

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

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

- - - - -
-
- -

NgSwitch

- -
Pick your favorite hero
-

- - - - -

- -

NgSwitch

- - -
- - - - -
- - -

NgSwitch with template attribute

- -
- - - - -
- - -

NgSwitch with <template>

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

<template>

- -

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 myUnless is set to false. -

- - - -

UnlessDirective with template

- - -

Show this sentence unless the condition is true.

- - -

- (A) <p template="myUnless condition" class="code unless"> -

- - - diff --git a/aio/content/examples/structural-directives/ts/src/app/app.component.ts b/aio/content/examples/structural-directives/ts/src/app/app.component.ts deleted file mode 100644 index 5fd9dc417f5..00000000000 --- a/aio/content/examples/structural-directives/ts/src/app/app.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Hero, heroes } from './hero'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - 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/aio/content/examples/structural-directives/ts/src/app/unless.directive.ts b/aio/content/examples/structural-directives/ts/src/app/unless.directive.ts deleted file mode 100644 index 19d48b4453b..00000000000 --- a/aio/content/examples/structural-directives/ts/src/app/unless.directive.ts +++ /dev/null @@ -1,55 +0,0 @@ -// #docplaster -// #docregion -// #docregion no-docs -// #docregion 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 `myUnless` 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: '[myUnless]'}) -export class UnlessDirective { - // #enddocregion skeleton - private hasView = false; - - // #docregion ctor - constructor( - private templateRef: TemplateRef, - private viewContainer: ViewContainerRef) { } - // #enddocregion ctor - - // #docregion set - @Input() set myUnless(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 -} -// #enddocregion skeleton -// #enddocregion no-docs -// #enddocregion diff --git a/aio/content/examples/style-guide/ts/.gitignore b/aio/content/examples/style-guide/.gitignore similarity index 100% rename from aio/content/examples/style-guide/ts/.gitignore rename to aio/content/examples/style-guide/.gitignore diff --git a/aio/content/examples/structural-directives/ts/example-config.json b/aio/content/examples/style-guide/example-config.json similarity index 100% rename from aio/content/examples/structural-directives/ts/example-config.json rename to aio/content/examples/style-guide/example-config.json diff --git a/aio/content/examples/style-guide/ts/plnkr.json b/aio/content/examples/style-guide/plnkr.json similarity index 100% rename from aio/content/examples/style-guide/ts/plnkr.json rename to aio/content/examples/style-guide/plnkr.json diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/app.component.css b/aio/content/examples/style-guide/src/01-01/app/app.component.css similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/app.component.css rename to aio/content/examples/style-guide/src/01-01/app/app.component.css diff --git a/aio/content/examples/style-guide/src/01-01/app/app.component.ts b/aio/content/examples/style-guide/src/01-01/app/app.component.ts new file mode 100644 index 00000000000..d5bb9535409 --- /dev/null +++ b/aio/content/examples/style-guide/src/01-01/app/app.component.ts @@ -0,0 +1,14 @@ +// #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/aio/content/examples/style-guide/ts/src/01-01/app/app.module.ts b/aio/content/examples/style-guide/src/01-01/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/app.module.ts rename to aio/content/examples/style-guide/src/01-01/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/hero.component.avoid.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/hero.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/hero.component.avoid.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/hero.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/heroes.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/heroes.component.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/heroes.component.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/index.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/index.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/mock-heroes.ts b/aio/content/examples/style-guide/src/01-01/app/heroes/shared/mock-heroes.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/heroes/shared/mock-heroes.ts rename to aio/content/examples/style-guide/src/01-01/app/heroes/shared/mock-heroes.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/index.ts b/aio/content/examples/style-guide/src/01-01/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/app/index.ts rename to aio/content/examples/style-guide/src/01-01/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/01-01/main.ts b/aio/content/examples/style-guide/src/01-01/main.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/01-01/main.ts rename to aio/content/examples/style-guide/src/01-01/main.ts diff --git a/aio/content/examples/style-guide/src/02-05/app/app.component.ts b/aio/content/examples/style-guide/src/02-05/app/app.component.ts new file mode 100644 index 00000000000..66ebfa954e5 --- /dev/null +++ b/aio/content/examples/style-guide/src/02-05/app/app.component.ts @@ -0,0 +1,10 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'toh-app', + template: ` + Tour of Heroes + ` +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/02-05/app/app.module.ts b/aio/content/examples/style-guide/src/02-05/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-05/app/app.module.ts rename to aio/content/examples/style-guide/src/02-05/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/02-05/main.ts b/aio/content/examples/style-guide/src/02-05/main.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-05/main.ts rename to aio/content/examples/style-guide/src/02-05/main.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/app.component.ts b/aio/content/examples/style-guide/src/02-07/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/app.component.ts rename to aio/content/examples/style-guide/src/02-07/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/app.module.ts b/aio/content/examples/style-guide/src/02-07/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/app.module.ts rename to aio/content/examples/style-guide/src/02-07/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.avoid.ts b/aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.avoid.ts rename to aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.ts b/aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/heroes/hero.component.ts rename to aio/content/examples/style-guide/src/02-07/app/heroes/hero.component.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/heroes/index.ts b/aio/content/examples/style-guide/src/02-07/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/heroes/index.ts rename to aio/content/examples/style-guide/src/02-07/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/index.ts b/aio/content/examples/style-guide/src/02-07/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/index.ts rename to aio/content/examples/style-guide/src/02-07/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/users/index.ts b/aio/content/examples/style-guide/src/02-07/app/users/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/users/index.ts rename to aio/content/examples/style-guide/src/02-07/app/users/index.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.avoid.ts b/aio/content/examples/style-guide/src/02-07/app/users/users.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.avoid.ts rename to aio/content/examples/style-guide/src/02-07/app/users/users.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.ts b/aio/content/examples/style-guide/src/02-07/app/users/users.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-07/app/users/users.component.ts rename to aio/content/examples/style-guide/src/02-07/app/users/users.component.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/app.component.ts b/aio/content/examples/style-guide/src/02-08/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/app.component.ts rename to aio/content/examples/style-guide/src/02-08/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/app.module.ts b/aio/content/examples/style-guide/src/02-08/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/app.module.ts rename to aio/content/examples/style-guide/src/02-08/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/index.ts b/aio/content/examples/style-guide/src/02-08/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/index.ts rename to aio/content/examples/style-guide/src/02-08/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/shared/index.ts b/aio/content/examples/style-guide/src/02-08/app/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/shared/index.ts rename to aio/content/examples/style-guide/src/02-08/app/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/shared/input-highlight.directive.ts b/aio/content/examples/style-guide/src/02-08/app/shared/input-highlight.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/shared/input-highlight.directive.ts rename to aio/content/examples/style-guide/src/02-08/app/shared/input-highlight.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.avoid.ts b/aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.avoid.ts rename to aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.ts b/aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/02-08/app/shared/validate.directive.ts rename to aio/content/examples/style-guide/src/02-08/app/shared/validate.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/app.component.ts b/aio/content/examples/style-guide/src/03-01/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/app.component.ts rename to aio/content/examples/style-guide/src/03-01/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/app.module.ts b/aio/content/examples/style-guide/src/03-01/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/app.module.ts rename to aio/content/examples/style-guide/src/03-01/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.avoid.ts b/aio/content/examples/style-guide/src/03-01/app/core/exception.service.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.avoid.ts rename to aio/content/examples/style-guide/src/03-01/app/core/exception.service.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.ts b/aio/content/examples/style-guide/src/03-01/app/core/exception.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/core/exception.service.ts rename to aio/content/examples/style-guide/src/03-01/app/core/exception.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/core/index.ts b/aio/content/examples/style-guide/src/03-01/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/core/index.ts rename to aio/content/examples/style-guide/src/03-01/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-01/app/index.ts b/aio/content/examples/style-guide/src/03-01/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-01/app/index.ts rename to aio/content/examples/style-guide/src/03-01/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-02/app/app.component.ts b/aio/content/examples/style-guide/src/03-02/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-02/app/app.component.ts rename to aio/content/examples/style-guide/src/03-02/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-02/app/app.module.ts b/aio/content/examples/style-guide/src/03-02/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-02/app/app.module.ts rename to aio/content/examples/style-guide/src/03-02/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/03-02/app/core/data.service.ts b/aio/content/examples/style-guide/src/03-02/app/core/data.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-02/app/core/data.service.ts rename to aio/content/examples/style-guide/src/03-02/app/core/data.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-02/app/core/index.ts b/aio/content/examples/style-guide/src/03-02/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-02/app/core/index.ts rename to aio/content/examples/style-guide/src/03-02/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-02/app/index.ts b/aio/content/examples/style-guide/src/03-02/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-02/app/index.ts rename to aio/content/examples/style-guide/src/03-02/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/app.component.ts b/aio/content/examples/style-guide/src/03-03/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/app.component.ts rename to aio/content/examples/style-guide/src/03-03/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/app.module.ts b/aio/content/examples/style-guide/src/03-03/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/app.module.ts rename to aio/content/examples/style-guide/src/03-03/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.avoid.ts b/aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.avoid.ts rename to aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.ts b/aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/core/hero-collector.service.ts rename to aio/content/examples/style-guide/src/03-03/app/core/hero-collector.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/core/hero.model.avoid.ts b/aio/content/examples/style-guide/src/03-03/app/core/hero.model.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/core/hero.model.avoid.ts rename to aio/content/examples/style-guide/src/03-03/app/core/hero.model.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/core/hero.model.ts b/aio/content/examples/style-guide/src/03-03/app/core/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/core/hero.model.ts rename to aio/content/examples/style-guide/src/03-03/app/core/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/core/index.ts b/aio/content/examples/style-guide/src/03-03/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/core/index.ts rename to aio/content/examples/style-guide/src/03-03/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-03/app/index.ts b/aio/content/examples/style-guide/src/03-03/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-03/app/index.ts rename to aio/content/examples/style-guide/src/03-03/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/app.component.ts b/aio/content/examples/style-guide/src/03-04/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/app.component.ts rename to aio/content/examples/style-guide/src/03-04/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/app.module.ts b/aio/content/examples/style-guide/src/03-04/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/app.module.ts rename to aio/content/examples/style-guide/src/03-04/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/core/index.ts b/aio/content/examples/style-guide/src/03-04/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/core/index.ts rename to aio/content/examples/style-guide/src/03-04/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.avoid.ts b/aio/content/examples/style-guide/src/03-04/app/core/toast.service.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.avoid.ts rename to aio/content/examples/style-guide/src/03-04/app/core/toast.service.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.ts b/aio/content/examples/style-guide/src/03-04/app/core/toast.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/core/toast.service.ts rename to aio/content/examples/style-guide/src/03-04/app/core/toast.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-04/app/index.ts b/aio/content/examples/style-guide/src/03-04/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-04/app/index.ts rename to aio/content/examples/style-guide/src/03-04/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/app.component.html b/aio/content/examples/style-guide/src/03-06/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/app.component.html rename to aio/content/examples/style-guide/src/03-06/app/app.component.html diff --git a/aio/content/examples/style-guide/src/03-06/app/app.component.ts b/aio/content/examples/style-guide/src/03-06/app/app.component.ts new file mode 100644 index 00000000000..8ec308bc6a8 --- /dev/null +++ b/aio/content/examples/style-guide/src/03-06/app/app.component.ts @@ -0,0 +1,21 @@ +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/aio/content/examples/style-guide/ts/src/03-06/app/app.module.ts b/aio/content/examples/style-guide/src/03-06/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/app.module.ts rename to aio/content/examples/style-guide/src/03-06/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/exception.service.ts b/aio/content/examples/style-guide/src/03-06/app/core/exception.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/exception.service.ts rename to aio/content/examples/style-guide/src/03-06/app/core/exception.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/index.ts b/aio/content/examples/style-guide/src/03-06/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/index.ts rename to aio/content/examples/style-guide/src/03-06/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/index.ts b/aio/content/examples/style-guide/src/03-06/app/core/spinner/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/index.ts rename to aio/content/examples/style-guide/src/03-06/app/core/spinner/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.component.ts b/aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.component.ts rename to aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.service.ts b/aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/spinner/spinner.service.ts rename to aio/content/examples/style-guide/src/03-06/app/core/spinner/spinner.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/toast/index.ts b/aio/content/examples/style-guide/src/03-06/app/core/toast/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/toast/index.ts rename to aio/content/examples/style-guide/src/03-06/app/core/toast/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.component.ts b/aio/content/examples/style-guide/src/03-06/app/core/toast/toast.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.component.ts rename to aio/content/examples/style-guide/src/03-06/app/core/toast/toast.component.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.service.ts b/aio/content/examples/style-guide/src/03-06/app/core/toast/toast.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/core/toast/toast.service.ts rename to aio/content/examples/style-guide/src/03-06/app/core/toast/toast.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/heroes/index.ts b/aio/content/examples/style-guide/src/03-06/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/heroes/index.ts rename to aio/content/examples/style-guide/src/03-06/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.avoid.ts b/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.avoid.ts rename to aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/03-06/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/03-06/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/03-06/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/index.ts b/aio/content/examples/style-guide/src/03-06/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/index.ts rename to aio/content/examples/style-guide/src/03-06/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/shared/toast/toast.component.ts b/aio/content/examples/style-guide/src/03-06/app/shared/toast/toast.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/03-06/app/shared/toast/toast.component.ts rename to aio/content/examples/style-guide/src/03-06/app/shared/toast/toast.component.ts diff --git a/aio/content/examples/style-guide/ts/src/04-08/app/app.component.ts b/aio/content/examples/style-guide/src/04-08/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-08/app/app.component.ts rename to aio/content/examples/style-guide/src/04-08/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/04-08/app/app.module.ts b/aio/content/examples/style-guide/src/04-08/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-08/app/app.module.ts rename to aio/content/examples/style-guide/src/04-08/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.html b/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.html rename to aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.html diff --git a/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts new file mode 100644 index 00000000000..e2df4c91fda --- /dev/null +++ b/aio/content/examples/style-guide/src/04-08/app/heroes/heroes.component.ts @@ -0,0 +1,11 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'toh-heroes', + templateUrl: './heroes.component.html' +}) +export class HeroesComponent implements OnInit { + constructor() { /* ... */ } + + ngOnInit() { /* ... */ } +} diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/app.component.ts b/aio/content/examples/style-guide/src/04-10/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/app.component.ts rename to aio/content/examples/style-guide/src/04-10/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/app.module.ts b/aio/content/examples/style-guide/src/04-10/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/app.module.ts rename to aio/content/examples/style-guide/src/04-10/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.html b/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.html rename to aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.html diff --git a/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts new file mode 100644 index 00000000000..376567650e3 --- /dev/null +++ b/aio/content/examples/style-guide/src/04-10/app/heroes/heroes.component.ts @@ -0,0 +1,27 @@ +// #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/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts b/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts new file mode 100644 index 00000000000..fffe4bf0b70 --- /dev/null +++ b/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.component.ts @@ -0,0 +1,26 @@ +// #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/aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.service.ts b/aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.service.ts rename to aio/content/examples/style-guide/src/04-10/app/shared/filter-text/filter-text.service.ts diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/shared/init-caps.pipe.ts b/aio/content/examples/style-guide/src/04-10/app/shared/init-caps.pipe.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/shared/init-caps.pipe.ts rename to aio/content/examples/style-guide/src/04-10/app/shared/init-caps.pipe.ts diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/shared/shared.module.ts b/aio/content/examples/style-guide/src/04-10/app/shared/shared.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-10/app/shared/shared.module.ts rename to aio/content/examples/style-guide/src/04-10/app/shared/shared.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/app.component.ts b/aio/content/examples/style-guide/src/04-11/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/app.component.ts rename to aio/content/examples/style-guide/src/04-11/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/app.module.ts b/aio/content/examples/style-guide/src/04-11/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/app.module.ts rename to aio/content/examples/style-guide/src/04-11/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/core.module.ts b/aio/content/examples/style-guide/src/04-11/app/core/core.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/core.module.ts rename to aio/content/examples/style-guide/src/04-11/app/core/core.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/index.ts b/aio/content/examples/style-guide/src/04-11/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/index.ts rename to aio/content/examples/style-guide/src/04-11/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/logger.service.ts b/aio/content/examples/style-guide/src/04-11/app/core/logger.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/logger.service.ts rename to aio/content/examples/style-guide/src/04-11/app/core/logger.service.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.css b/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.css similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.css rename to aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.css diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.html b/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.html rename to aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.html diff --git a/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts b/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts new file mode 100644 index 00000000000..7e21016e2be --- /dev/null +++ b/aio/content/examples/style-guide/src/04-11/app/core/nav/nav.component.ts @@ -0,0 +1,19 @@ +// #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/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.css b/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.css similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.css rename to aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.css diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.html b/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.html rename to aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.html diff --git a/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts b/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts new file mode 100644 index 00000000000..de24167a2bc --- /dev/null +++ b/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.component.ts @@ -0,0 +1,35 @@ +// #docregion +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Subscription } from 'rxjs/Subscription'; + +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/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.service.ts b/aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.service.ts rename to aio/content/examples/style-guide/src/04-11/app/core/spinner/spinner.service.ts diff --git a/aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.html b/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.html rename to aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.html diff --git a/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts new file mode 100644 index 00000000000..856baadd74b --- /dev/null +++ b/aio/content/examples/style-guide/src/04-11/app/heroes/heroes.component.ts @@ -0,0 +1,32 @@ +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/aio/content/examples/style-guide/ts/src/04-12/app/app.component.ts b/aio/content/examples/style-guide/src/04-12/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/app.component.ts rename to aio/content/examples/style-guide/src/04-12/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/app.module.ts b/aio/content/examples/style-guide/src/04-12/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/app.module.ts rename to aio/content/examples/style-guide/src/04-12/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/core.module.ts b/aio/content/examples/style-guide/src/04-12/app/core/core.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/core.module.ts rename to aio/content/examples/style-guide/src/04-12/app/core/core.module.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/index.ts b/aio/content/examples/style-guide/src/04-12/app/core/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/index.ts rename to aio/content/examples/style-guide/src/04-12/app/core/index.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/logger.service.ts b/aio/content/examples/style-guide/src/04-12/app/core/logger.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/logger.service.ts rename to aio/content/examples/style-guide/src/04-12/app/core/logger.service.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/module-import-guard.ts b/aio/content/examples/style-guide/src/04-12/app/core/module-import-guard.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/module-import-guard.ts rename to aio/content/examples/style-guide/src/04-12/app/core/module-import-guard.ts diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.css b/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.css similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.css rename to aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.css diff --git a/aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.html b/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.html rename to aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.html diff --git a/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts b/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts new file mode 100644 index 00000000000..7e21016e2be --- /dev/null +++ b/aio/content/examples/style-guide/src/04-12/app/core/nav/nav.component.ts @@ -0,0 +1,19 @@ +// #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/aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.html b/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.html rename to aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.html diff --git a/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts new file mode 100644 index 00000000000..f84b16c1406 --- /dev/null +++ b/aio/content/examples/style-guide/src/04-12/app/heroes/heroes.component.ts @@ -0,0 +1,24 @@ +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/aio/content/examples/style-guide/ts/src/05-02/app/app.component.html b/aio/content/examples/style-guide/src/05-02/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/app.component.html rename to aio/content/examples/style-guide/src/05-02/app/app.component.html diff --git a/aio/content/examples/style-guide/src/05-02/app/app.component.ts b/aio/content/examples/style-guide/src/05-02/app/app.component.ts new file mode 100644 index 00000000000..7c9f37919f4 --- /dev/null +++ b/aio/content/examples/style-guide/src/05-02/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sg-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/app.module.ts b/aio/content/examples/style-guide/src/05-02/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/app.module.ts rename to aio/content/examples/style-guide/src/05-02/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-02/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-02/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts new file mode 100644 index 00000000000..e48d41f7218 --- /dev/null +++ b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -0,0 +1,11 @@ +// #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/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.html b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.html rename to aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html diff --git a/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts new file mode 100644 index 00000000000..c90c966f1af --- /dev/null +++ b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts @@ -0,0 +1,9 @@ +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/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/index.ts b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/index.ts rename to aio/content/examples/style-guide/src/05-02/app/heroes/shared/hero-button/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-02/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-02/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/index.ts b/aio/content/examples/style-guide/src/05-02/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-02/app/index.ts rename to aio/content/examples/style-guide/src/05-02/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/app.component.avoid.html b/aio/content/examples/style-guide/src/05-03/app/app.component.avoid.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/app.component.avoid.html rename to aio/content/examples/style-guide/src/05-03/app/app.component.avoid.html diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/app.component.html b/aio/content/examples/style-guide/src/05-03/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/app.component.html rename to aio/content/examples/style-guide/src/05-03/app/app.component.html diff --git a/aio/content/examples/style-guide/src/05-03/app/app.component.ts b/aio/content/examples/style-guide/src/05-03/app/app.component.ts new file mode 100644 index 00000000000..7c9f37919f4 --- /dev/null +++ b/aio/content/examples/style-guide/src/05-03/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sg-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/app.module.ts b/aio/content/examples/style-guide/src/05-03/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/app.module.ts rename to aio/content/examples/style-guide/src/05-03/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-03/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-03/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts new file mode 100644 index 00000000000..74f5c36339d --- /dev/null +++ b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; +// #docregion example +/* avoid */ + +@Component({ + selector: '[tohHeroButton]', + templateUrl: './hero-button.component.html' +}) +export class HeroButtonComponent {} +// #enddocregion example diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.html b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.html rename to aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html diff --git a/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts new file mode 100644 index 00000000000..c90c966f1af --- /dev/null +++ b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts @@ -0,0 +1,9 @@ +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/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/index.ts b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/index.ts rename to aio/content/examples/style-guide/src/05-03/app/heroes/shared/hero-button/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-03/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-03/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/index.ts b/aio/content/examples/style-guide/src/05-03/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-03/app/index.ts rename to aio/content/examples/style-guide/src/05-03/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/app.component.ts b/aio/content/examples/style-guide/src/05-04/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/app.component.ts rename to aio/content/examples/style-guide/src/05-04/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/app.module.ts b/aio/content/examples/style-guide/src/05-04/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/app.module.ts rename to aio/content/examples/style-guide/src/05-04/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.avoid.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.avoid.ts rename to aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.css b/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.css similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.css rename to aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.css diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.html b/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.html rename to aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.html diff --git a/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts new file mode 100644 index 00000000000..c19bc997aed --- /dev/null +++ b/aio/content/examples/style-guide/src/05-04/app/heroes/heroes.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +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/aio/content/examples/style-guide/ts/src/05-04/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-04/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/05-04/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-04/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-04/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/index.ts b/aio/content/examples/style-guide/src/05-04/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-04/app/index.ts rename to aio/content/examples/style-guide/src/05-04/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/app.component.ts b/aio/content/examples/style-guide/src/05-12/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/app.component.ts rename to aio/content/examples/style-guide/src/05-12/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/app.module.ts b/aio/content/examples/style-guide/src/05-12/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/app.module.ts rename to aio/content/examples/style-guide/src/05-12/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-12/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-12/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts rename to aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts rename to aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/index.ts b/aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/hero-button/index.ts rename to aio/content/examples/style-guide/src/05-12/app/heroes/shared/hero-button/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-12/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-12/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-12/app/index.ts b/aio/content/examples/style-guide/src/05-12/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-12/app/index.ts rename to aio/content/examples/style-guide/src/05-12/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/app.component.avoid.html b/aio/content/examples/style-guide/src/05-13/app/app.component.avoid.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/app.component.avoid.html rename to aio/content/examples/style-guide/src/05-13/app/app.component.avoid.html diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/app.component.html b/aio/content/examples/style-guide/src/05-13/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/app.component.html rename to aio/content/examples/style-guide/src/05-13/app/app.component.html diff --git a/aio/content/examples/style-guide/src/05-13/app/app.component.ts b/aio/content/examples/style-guide/src/05-13/app/app.component.ts new file mode 100644 index 00000000000..7c9f37919f4 --- /dev/null +++ b/aio/content/examples/style-guide/src/05-13/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sg-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/app.module.ts b/aio/content/examples/style-guide/src/05-13/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/app.module.ts rename to aio/content/examples/style-guide/src/05-13/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/index.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-button/index.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-button/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-highlight.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/hero-highlight.directive.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/shared/hero-highlight.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-13/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-13/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-13/app/index.ts b/aio/content/examples/style-guide/src/05-13/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-13/app/index.ts rename to aio/content/examples/style-guide/src/05-13/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/app.component.ts b/aio/content/examples/style-guide/src/05-14/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/app.component.ts rename to aio/content/examples/style-guide/src/05-14/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/app.module.ts b/aio/content/examples/style-guide/src/05-14/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/app.module.ts rename to aio/content/examples/style-guide/src/05-14/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/index.ts b/aio/content/examples/style-guide/src/05-14/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/index.ts rename to aio/content/examples/style-guide/src/05-14/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/shared/index.ts b/aio/content/examples/style-guide/src/05-14/app/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/shared/index.ts rename to aio/content/examples/style-guide/src/05-14/app/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/index.ts b/aio/content/examples/style-guide/src/05-14/app/shared/toast/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/index.ts rename to aio/content/examples/style-guide/src/05-14/app/shared/toast/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/toast.component.avoid.ts b/aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/toast.component.avoid.ts rename to aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/toast.component.ts b/aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-14/app/shared/toast/toast.component.ts rename to aio/content/examples/style-guide/src/05-14/app/shared/toast/toast.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/app.component.ts b/aio/content/examples/style-guide/src/05-15/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/app.component.ts rename to aio/content/examples/style-guide/src/05-15/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/app.module.ts b/aio/content/examples/style-guide/src/05-15/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/app.module.ts rename to aio/content/examples/style-guide/src/05-15/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/hero-list.component.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/hero-list.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/index.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/hero-list/index.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/hero-list/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-15/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-15/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-15/app/index.ts b/aio/content/examples/style-guide/src/05-15/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-15/app/index.ts rename to aio/content/examples/style-guide/src/05-15/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/app.component.avoid.html b/aio/content/examples/style-guide/src/05-16/app/app.component.avoid.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/app.component.avoid.html rename to aio/content/examples/style-guide/src/05-16/app/app.component.avoid.html diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/app.component.html b/aio/content/examples/style-guide/src/05-16/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/app.component.html rename to aio/content/examples/style-guide/src/05-16/app/app.component.html diff --git a/aio/content/examples/style-guide/src/05-16/app/app.component.ts b/aio/content/examples/style-guide/src/05-16/app/app.component.ts new file mode 100644 index 00000000000..7c9f37919f4 --- /dev/null +++ b/aio/content/examples/style-guide/src/05-16/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sg-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/app.module.ts b/aio/content/examples/style-guide/src/05-16/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/app.module.ts rename to aio/content/examples/style-guide/src/05-16/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/heroes/hero.component.avoid.ts b/aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/heroes/hero.component.avoid.ts rename to aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/heroes/hero.component.ts b/aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/heroes/hero.component.ts rename to aio/content/examples/style-guide/src/05-16/app/heroes/hero.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-16/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-16/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/index.ts b/aio/content/examples/style-guide/src/05-16/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-16/app/index.ts rename to aio/content/examples/style-guide/src/05-16/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/app.component.ts b/aio/content/examples/style-guide/src/05-17/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/app.component.ts rename to aio/content/examples/style-guide/src/05-17/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/app.module.ts b/aio/content/examples/style-guide/src/05-17/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/app.module.ts rename to aio/content/examples/style-guide/src/05-17/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/hero-list.component.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/hero-list.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/index.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero-list/index.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/hero-list/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero/hero.component.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/hero/hero.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero/hero.component.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/hero/hero.component.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero/index.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/hero/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/hero/index.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/hero/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/index.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/index.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/05-17/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/05-17/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/05-17/app/index.ts b/aio/content/examples/style-guide/src/05-17/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/05-17/app/index.ts rename to aio/content/examples/style-guide/src/05-17/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/app.component.html b/aio/content/examples/style-guide/src/06-01/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-01/app/app.component.html rename to aio/content/examples/style-guide/src/06-01/app/app.component.html diff --git a/aio/content/examples/style-guide/src/06-01/app/app.component.ts b/aio/content/examples/style-guide/src/06-01/app/app.component.ts new file mode 100644 index 00000000000..7c9f37919f4 --- /dev/null +++ b/aio/content/examples/style-guide/src/06-01/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'sg-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/app.module.ts b/aio/content/examples/style-guide/src/06-01/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-01/app/app.module.ts rename to aio/content/examples/style-guide/src/06-01/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/index.ts b/aio/content/examples/style-guide/src/06-01/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-01/app/index.ts rename to aio/content/examples/style-guide/src/06-01/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/shared/highlight.directive.ts b/aio/content/examples/style-guide/src/06-01/app/shared/highlight.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-01/app/shared/highlight.directive.ts rename to aio/content/examples/style-guide/src/06-01/app/shared/highlight.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/shared/index.ts b/aio/content/examples/style-guide/src/06-01/app/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-01/app/shared/index.ts rename to aio/content/examples/style-guide/src/06-01/app/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/app.component.ts b/aio/content/examples/style-guide/src/06-03/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/app.component.ts rename to aio/content/examples/style-guide/src/06-03/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/app.module.ts b/aio/content/examples/style-guide/src/06-03/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/app.module.ts rename to aio/content/examples/style-guide/src/06-03/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/index.ts b/aio/content/examples/style-guide/src/06-03/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/index.ts rename to aio/content/examples/style-guide/src/06-03/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/shared/index.ts b/aio/content/examples/style-guide/src/06-03/app/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/shared/index.ts rename to aio/content/examples/style-guide/src/06-03/app/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/shared/validator.directive.ts b/aio/content/examples/style-guide/src/06-03/app/shared/validator.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/shared/validator.directive.ts rename to aio/content/examples/style-guide/src/06-03/app/shared/validator.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/06-03/app/shared/validator2.directive.ts b/aio/content/examples/style-guide/src/06-03/app/shared/validator2.directive.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/06-03/app/shared/validator2.directive.ts rename to aio/content/examples/style-guide/src/06-03/app/shared/validator2.directive.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/app.component.html b/aio/content/examples/style-guide/src/07-01/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/app.component.html rename to aio/content/examples/style-guide/src/07-01/app/app.component.html diff --git a/aio/content/examples/style-guide/src/07-01/app/app.component.ts b/aio/content/examples/style-guide/src/07-01/app/app.component.ts new file mode 100644 index 00000000000..354b0ec303f --- /dev/null +++ b/aio/content/examples/style-guide/src/07-01/app/app.component.ts @@ -0,0 +1,18 @@ +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/aio/content/examples/style-guide/ts/src/07-01/app/app.module.ts b/aio/content/examples/style-guide/src/07-01/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/app.module.ts rename to aio/content/examples/style-guide/src/07-01/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/heroes/index.ts b/aio/content/examples/style-guide/src/07-01/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/heroes/index.ts rename to aio/content/examples/style-guide/src/07-01/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/07-01/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/07-01/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/07-01/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/index.ts b/aio/content/examples/style-guide/src/07-01/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-01/app/index.ts rename to aio/content/examples/style-guide/src/07-01/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/app.component.ts b/aio/content/examples/style-guide/src/07-03/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/app.component.ts rename to aio/content/examples/style-guide/src/07-03/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/app.module.ts b/aio/content/examples/style-guide/src/07-03/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/app.module.ts rename to aio/content/examples/style-guide/src/07-03/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/hero-list.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/hero-list/hero-list.component.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/hero-list.component.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/hero-list/index.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/hero-list/index.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/hero-list/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/index.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/index.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/07-03/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/07-03/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-03/app/index.ts b/aio/content/examples/style-guide/src/07-03/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-03/app/index.ts rename to aio/content/examples/style-guide/src/07-03/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/app.component.ts b/aio/content/examples/style-guide/src/07-04/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/app.component.ts rename to aio/content/examples/style-guide/src/07-04/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/app.module.ts b/aio/content/examples/style-guide/src/07-04/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/app.module.ts rename to aio/content/examples/style-guide/src/07-04/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/index.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/index.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero-arena.service.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero-arena.service.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero-arena.service.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero.model.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.model.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero.model.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.model.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero.service.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.service.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/hero.service.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/shared/hero.service.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/07-04/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/07-04/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/07-04/app/index.ts b/aio/content/examples/style-guide/src/07-04/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/07-04/app/index.ts rename to aio/content/examples/style-guide/src/07-04/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/app.component.ts b/aio/content/examples/style-guide/src/09-01/app/app.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/app.component.ts rename to aio/content/examples/style-guide/src/09-01/app/app.component.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/app.module.ts b/aio/content/examples/style-guide/src/09-01/app/app.module.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/app.module.ts rename to aio/content/examples/style-guide/src/09-01/app/app.module.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/heroes/index.ts b/aio/content/examples/style-guide/src/09-01/app/heroes/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/heroes/index.ts rename to aio/content/examples/style-guide/src/09-01/app/heroes/index.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts rename to aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts rename to aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/index.ts b/aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/hero-button/index.ts rename to aio/content/examples/style-guide/src/09-01/app/heroes/shared/hero-button/index.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/index.ts b/aio/content/examples/style-guide/src/09-01/app/heroes/shared/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/heroes/shared/index.ts rename to aio/content/examples/style-guide/src/09-01/app/heroes/shared/index.ts diff --git a/aio/content/examples/style-guide/ts/src/09-01/app/index.ts b/aio/content/examples/style-guide/src/09-01/app/index.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/09-01/app/index.ts rename to aio/content/examples/style-guide/src/09-01/app/index.ts diff --git a/aio/content/examples/style-guide/ts/src/app/app.component.html b/aio/content/examples/style-guide/src/app/app.component.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/app/app.component.html rename to aio/content/examples/style-guide/src/app/app.component.html diff --git a/aio/content/examples/style-guide/src/app/app.component.ts b/aio/content/examples/style-guide/src/app/app.component.ts new file mode 100644 index 00000000000..7556beb1ff0 --- /dev/null +++ b/aio/content/examples/style-guide/src/app/app.component.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/app/app.routes.ts b/aio/content/examples/style-guide/src/app/app.routes.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/app/app.routes.ts rename to aio/content/examples/style-guide/src/app/app.routes.ts diff --git a/aio/content/examples/style-guide/ts/src/app/hero-data.ts b/aio/content/examples/style-guide/src/app/hero-data.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/app/hero-data.ts rename to aio/content/examples/style-guide/src/app/hero-data.ts diff --git a/aio/content/examples/style-guide/ts/src/index.html b/aio/content/examples/style-guide/src/index.html similarity index 100% rename from aio/content/examples/style-guide/ts/src/index.html rename to aio/content/examples/style-guide/src/index.html diff --git a/aio/content/examples/style-guide/ts/src/main.ts b/aio/content/examples/style-guide/src/main.ts similarity index 100% rename from aio/content/examples/style-guide/ts/src/main.ts rename to aio/content/examples/style-guide/src/main.ts diff --git a/aio/content/examples/style-guide/src/systemjs.custom.js b/aio/content/examples/style-guide/src/systemjs.custom.js new file mode 100644 index 00000000000..3424b2b62d6 --- /dev/null +++ b/aio/content/examples/style-guide/src/systemjs.custom.js @@ -0,0 +1,51 @@ +(function(global) { + // extra local packages + var packageNames = [ + '01-01', '01-01/app', '01-01/app/heroes', '01-01/app/heroes/shared', + '02-05', '02-05/app', + '02-07', '02-07/app', '02-07/app/heroes', '02-07/app/users', + '02-08', '02-08/app', '02-08/app/shared', + '03-01', '03-01/app', '03-01/app/core', + '03-02', '03-02/app', '03-02/app/core', + '03-03', '03-03/app', '03-03/app/core', + '03-04', '03-04/app', '03-04/app/core', + '03-05', '03-05/app', '03-05/app/core', '03-05/app/core/spinner', '03-05/app/core/toast', + '03-05/app/heroes', '03-05/app/heroes/shared', + '03-06', '03-06/app', '03-06/app/core', '03-06/app/core/spinner', '03-06/app/core/toast', + '03-06/app/heroes', '03-06/app/heroes/shared', + '04-08', '04-08/app', '04-08/app/heroes', + '04-10', '04-10/app', '04-10/app/shared', '04-10/app/heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast', + '04-10/app/shared/filter-text', + '04-11', '04-11/app', '04-11/app/core', '04-11/app/heroes', '04-11/app/core/spinner', + '04-11/app/core/nav', + '04-12', '04-12/app', '04-12/app/core', '04-12/app/heroes', '04-12/app/core/nav', + '05-02', '05-02/app', '05-02/app/heroes', '05-02/app/heroes/shared', '05-02/app/heroes/shared/hero-button', + '05-03', '05-03/app', '05-03/app/heroes', '05-03/app/heroes/shared', '05-03/app/heroes/shared/hero-button', + '05-04', '05-04/app', '05-04/app/heroes', '05-04/app/heroes/shared', + '05-12', '05-12/app', '05-12/app/heroes', '05-12/app/heroes/shared', '05-12/app/heroes/shared/hero-button', + '05-13', '05-13/app', '05-13/app/heroes', '05-13/app/heroes/shared', '05-13/app/heroes/shared/hero-button', + '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast', + '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared', + '05-16', '05-16/app', '05-16/app/heroes', + '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list', + '05-17/app/heroes/shared', + '06-01', '06-01/app', '06-01/app/shared', + '06-03', '06-03/app', '06-03/app/shared', + '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared', + '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared', + '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared', + '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button' + ]; + + var packages = {}; + packageNames.forEach(function(pkgName) { + packages[pkgName] = { main: 'index.js', defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' }} }; + }); + + var config = { + packages: packages + } + + System.config(config); + +})(this); diff --git a/aio/content/examples/style-guide/ts/plnkr.no-link.html b/aio/content/examples/style-guide/ts/plnkr.no-link.html deleted file mode 100644 index f1edc0fe499..00000000000 --- a/aio/content/examples/style-guide/ts/plnkr.no-link.html +++ /dev/null @@ -1,4350 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/style-guide/ts/src/01-01/app/app.component.ts b/aio/content/examples/style-guide/ts/src/01-01/app/app.component.ts deleted file mode 100644 index 7997c4433c2..00000000000 --- a/aio/content/examples/style-guide/ts/src/01-01/app/app.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { HeroService } from './heroes'; - -@Component({ - moduleId: module.id, - selector: 'toh-app', - template: ` - - `, - styleUrls: ['./app.component.css'], - providers: [ HeroService ] -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/02-05/app/app.component.ts b/aio/content/examples/style-guide/ts/src/02-05/app/app.component.ts deleted file mode 100644 index 268a2f940b0..00000000000 --- a/aio/content/examples/style-guide/ts/src/02-05/app/app.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'toh-app', - template: ` - Tour of Heroes - ` -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/03-06/app/app.component.ts b/aio/content/examples/style-guide/ts/src/03-06/app/app.component.ts deleted file mode 100644 index b7c47f72d08..00000000000 --- a/aio/content/examples/style-guide/ts/src/03-06/app/app.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './heroes'; -import { ExceptionService, SpinnerService, ToastService } from './core'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts deleted file mode 100644 index f9e67391ec8..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'toh-heroes', - templateUrl: './heroes.component.html' -}) -export class HeroesComponent implements OnInit { - constructor() { /* ... */ } - - ngOnInit() { /* ... */ } -} diff --git a/aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts deleted file mode 100644 index eb496ccde53..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { FilterTextService } from '../shared/filter-text/filter-text.service'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts b/aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts deleted file mode 100644 index e23987d2f0c..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// #docregion -import { Component, EventEmitter, Output } from '@angular/core'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts b/aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts deleted file mode 100644 index 571040cce58..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts b/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts deleted file mode 100644 index ccd6ece7fba..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -// #docregion -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { Subscription } from 'rxjs/Subscription'; - -import { LoggerService } from '../logger.service'; -import { SpinnerState, SpinnerService } from './spinner.service'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts deleted file mode 100644 index cdbf1135f2c..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from '@angular/core'; - -import { LoggerService } from '../core/logger.service'; -import { SpinnerService } from '../core/spinner/spinner.service'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts b/aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts deleted file mode 100644 index 571040cce58..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts deleted file mode 100644 index 3b3e169c0cf..00000000000 --- a/aio/content/examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component } from '@angular/core'; - -import { LoggerService } from '../core/logger.service'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/05-02/app/app.component.ts b/aio/content/examples/style-guide/ts/src/05-02/app/app.component.ts deleted file mode 100644 index d57163f06fd..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-02/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index fd055bf64fc..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docplaster -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - moduleId: module.id, - selector: 'tohHeroButton', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index 8b9fbf95e55..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - moduleId: module.id, - selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/app.component.ts b/aio/content/examples/style-guide/ts/src/05-03/app/app.component.ts deleted file mode 100644 index d57163f06fd..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-03/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts deleted file mode 100644 index 6edbc4cd9ec..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -// #docregion example -/* avoid */ - -@Component({ - moduleId: module.id, - selector: '[tohHeroButton]', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts deleted file mode 100644 index 8b9fbf95e55..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -// #docregion example -@Component({ - moduleId: module.id, - selector: 'toh-hero-button', - templateUrl: './hero-button.component.html' -}) -export class HeroButtonComponent {} -// #enddocregion example diff --git a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts b/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts deleted file mode 100644 index ec5dadc4a00..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Observable } from 'rxjs/Observable'; - -import { Hero, HeroService } from './shared'; - -// #docregion example -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/05-13/app/app.component.ts b/aio/content/examples/style-guide/ts/src/05-13/app/app.component.ts deleted file mode 100644 index d57163f06fd..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-13/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/05-16/app/app.component.ts b/aio/content/examples/style-guide/ts/src/05-16/app/app.component.ts deleted file mode 100644 index d57163f06fd..00000000000 --- a/aio/content/examples/style-guide/ts/src/05-16/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/06-01/app/app.component.ts b/aio/content/examples/style-guide/ts/src/06-01/app/app.component.ts deleted file mode 100644 index d57163f06fd..00000000000 --- a/aio/content/examples/style-guide/ts/src/06-01/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'sg-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/07-01/app/app.component.ts b/aio/content/examples/style-guide/ts/src/07-01/app/app.component.ts deleted file mode 100644 index 638da66cafc..00000000000 --- a/aio/content/examples/style-guide/ts/src/07-01/app/app.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { Hero, HeroService } from './heroes'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/style-guide/ts/src/app/app.component.ts b/aio/content/examples/style-guide/ts/src/app/app.component.ts deleted file mode 100644 index ab2d3d9c332..00000000000 --- a/aio/content/examples/style-guide/ts/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/style-guide/ts/src/systemjs.custom.js b/aio/content/examples/style-guide/ts/src/systemjs.custom.js deleted file mode 100644 index 8181979346f..00000000000 --- a/aio/content/examples/style-guide/ts/src/systemjs.custom.js +++ /dev/null @@ -1,51 +0,0 @@ -(function(global) { - // extra local packages - var packageNames = [ - '01-01', '01-01/app', '01-01/app/heroes', '01-01/app/heroes/shared', - '02-05', '02-05/app', - '02-07', '02-07/app', '02-07/app/heroes', '02-07/app/users', - '02-08', '02-08/app', '02-08/app/shared', - '03-01', '03-01/app', '03-01/app/core', - '03-02', '03-02/app', '03-02/app/core', - '03-03', '03-03/app', '03-03/app/core', - '03-04', '03-04/app', '03-04/app/core', - '03-05', '03-05/app', '03-05/app/core', '03-05/app/core/spinner', '03-05/app/core/toast', - '03-05/app/heroes', '03-05/app/heroes/shared', - '03-06', '03-06/app', '03-06/app/core', '03-06/app/core/spinner', '03-06/app/core/toast', - '03-06/app/heroes', '03-06/app/heroes/shared', - '04-08', '04-08/app', '04-08/app/heroes', - '04-10', '04-10/app', '04-10/app/shared', '04-10/app/heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast', - '04-10/app/shared/filter-text', - '04-11', '04-11/app', '04-11/app/core', '04-11/app/heroes', '04-11/app/core/spinner', - '04-11/app/core/nav', - '04-12', '04-12/app', '04-12/app/core', '04-12/app/heroes', '04-12/app/core/nav', - '05-02', '05-02/app', '05-02/app/heroes', '05-02/app/heroes/shared', '05-02/app/heroes/shared/hero-button', - '05-03', '05-03/app', '05-03/app/heroes', '05-03/app/heroes/shared', '05-03/app/heroes/shared/hero-button', - '05-04', '05-04/app', '05-04/app/heroes', '05-04/app/heroes/shared', - '05-12', '05-12/app', '05-12/app/heroes', '05-12/app/heroes/shared', '05-12/app/heroes/shared/hero-button', - '05-13', '05-13/app', '05-13/app/heroes', '05-13/app/heroes/shared', '05-13/app/heroes/shared/hero-button', - '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast', - '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared', - '05-16', '05-16/app', '05-16/app/heroes', - '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list', - '05-17/app/heroes/shared', - '06-01', '06-01/app', '06-01/app/shared', - '06-03', '06-03/app', '06-03/app/shared', - '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared', - '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared', - '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared', - '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button' - ]; - - var packages = {}; - packageNames.forEach(function(pkgName) { - packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; - }); - - var config = { - packages: packages - } - - System.config(config); - -})(this); diff --git a/aio/content/examples/style-guide/ts/example-config.json b/aio/content/examples/styleguide/example-config.json similarity index 100% rename from aio/content/examples/style-guide/ts/example-config.json rename to aio/content/examples/styleguide/example-config.json diff --git a/aio/content/examples/styleguide/js/example-config.json b/aio/content/examples/styleguide/js/example-config.json index e69de29bb2d..81f31aaf0d9 100644 --- a/aio/content/examples/styleguide/js/example-config.json +++ b/aio/content/examples/styleguide/js/example-config.json @@ -0,0 +1,3 @@ +{ + "build": "build:babel" +} diff --git a/aio/content/examples/styleguide/js/spec.js b/aio/content/examples/styleguide/js/spec.js deleted file mode 100644 index 590ccc5dc45..00000000000 --- a/aio/content/examples/styleguide/js/spec.js +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -describe("Jasmine sample test", function() { - - it("1+1 should be 2", function() { - var result = 1 + 1; - expect(result).toBe(2); - }); -}); \ No newline at end of file diff --git a/aio/content/examples/styleguide/js/src/app.js b/aio/content/examples/styleguide/js/src/app.js deleted file mode 100644 index d38669cd785..00000000000 --- a/aio/content/examples/styleguide/js/src/app.js +++ /dev/null @@ -1,55 +0,0 @@ -(function(app) { - -// #docregion -// #docregion class-w-annotations -app.AppComponent = - // #docregion component - ng.core.Component({ - selector: 'my-app', - // #enddocregion - // #docregion view - template: '

My First Angular App

' - }) - // #enddocregion - // #docregion class - .Class({ - constructor: function () { } - }); - // #enddocregion -// #enddocregion - -// #docregion bootstrap -app.AppModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ app.AppComponent ], - bootstrap: [ app.AppComponent ] - }) - .Class({ - constructor: function() {} - }); - -document.addEventListener('DOMContentLoaded', function() { - ng.platformBrowserDynamic - .platformBrowserDynamic() - .bootstrapModule(app.AppModule); -}); -// #enddocregion -// #enddocregion - -})(window.app || (window.app = {})); - -/* Non DSL Approach */ -(function(app) { - -// #docregion no-dsl -app.AppComponent = function AppComponent () {} - -app.AppComponent.annotations = [ - new ng.core.Component({ - selector: 'my-app', - template: '

My First Angular App

' - }) -]; -// #enddocregion -})(window.app || (window.app = {})); diff --git a/aio/content/examples/styleguide/ts/src/app/app.component.ts b/aio/content/examples/styleguide/src/app/app.component.ts similarity index 100% rename from aio/content/examples/styleguide/ts/src/app/app.component.ts rename to aio/content/examples/styleguide/src/app/app.component.ts diff --git a/aio/content/examples/styleguide/ts/src/app/app.module.ts b/aio/content/examples/styleguide/src/app/app.module.ts similarity index 100% rename from aio/content/examples/styleguide/ts/src/app/app.module.ts rename to aio/content/examples/styleguide/src/app/app.module.ts diff --git a/aio/content/examples/styleguide/ts/src/index.html b/aio/content/examples/styleguide/src/index.html similarity index 100% rename from aio/content/examples/styleguide/ts/src/index.html rename to aio/content/examples/styleguide/src/index.html diff --git a/aio/content/examples/styleguide/ts/src/main.ts b/aio/content/examples/styleguide/src/main.ts similarity index 100% rename from aio/content/examples/styleguide/ts/src/main.ts rename to aio/content/examples/styleguide/src/main.ts diff --git a/aio/content/examples/styleguide/ts/example-config.json b/aio/content/examples/template-syntax/example-config.json similarity index 100% rename from aio/content/examples/styleguide/ts/example-config.json rename to aio/content/examples/template-syntax/example-config.json diff --git a/aio/content/examples/template-syntax/ts/plnkr.json b/aio/content/examples/template-syntax/plnkr.json similarity index 100% rename from aio/content/examples/template-syntax/ts/plnkr.json rename to aio/content/examples/template-syntax/plnkr.json diff --git a/aio/content/examples/template-syntax/ts/src/app/app.component.css b/aio/content/examples/template-syntax/src/app/app.component.css similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/app.component.css rename to aio/content/examples/template-syntax/src/app/app.component.css diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html new file mode 100644 index 00000000000..e58460bf890 --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/app.component.html @@ -0,0 +1,820 @@ + + +

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 ?.
+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)

+ + + +

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}}
+ + + + + + + +
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 + + + +

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/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts new file mode 100644 index 00000000000..f0fa2a2d234 --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/app.component.ts @@ -0,0 +1,183 @@ +/* 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: 'my-app', + 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 = '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 = 'images/villain.png'; + + iconUrl = '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).innerText : ''; + 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.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(); + // Is every changed ElemRef the same as old and in the same position + const isSame = oldRefs.every((v, i) => v === changedRefs[i]); + if (!isSame) { + oldRefs = changedRefs; + // wait a tick because called after views are constructed + setTimeout(changed, 0); + } + }); +} diff --git a/aio/content/examples/template-syntax/ts/src/app/app.module.1.ts b/aio/content/examples/template-syntax/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/app.module.1.ts rename to aio/content/examples/template-syntax/src/app/app.module.1.ts diff --git a/aio/content/examples/template-syntax/ts/src/app/app.module.ts b/aio/content/examples/template-syntax/src/app/app.module.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/app.module.ts rename to aio/content/examples/template-syntax/src/app/app.module.ts diff --git a/aio/content/examples/template-syntax/ts/src/app/click.directive.ts b/aio/content/examples/template-syntax/src/app/click.directive.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/click.directive.ts rename to aio/content/examples/template-syntax/src/app/click.directive.ts diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..725849d692d --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts @@ -0,0 +1,80 @@ +/* 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: '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 = 'images/hero.png'; + lineThrough = ''; + @Input() prefix = ''; + + // #docregion deleteRequest + // This component make 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: '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/aio/content/examples/template-syntax/src/app/hero-form.component.html b/aio/content/examples/template-syntax/src/app/hero-form.component.html new file mode 100644 index 00000000000..071aab429eb --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/hero-form.component.html @@ -0,0 +1,15 @@ +
+ +
+
+ +
+ +
+
+ {{submitMessage}} +
+ +
diff --git a/aio/content/examples/template-syntax/src/app/hero-form.component.ts b/aio/content/examples/template-syntax/src/app/hero-form.component.ts new file mode 100644 index 00000000000..8191117d1d4 --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/hero-form.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, ViewChild } from '@angular/core'; +import { NgForm } from '@angular/forms'; + +import { Hero } from './hero'; + +@Component({ + selector: '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/aio/content/examples/template-syntax/ts/src/app/hero-switch.components.ts b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/hero-switch.components.ts rename to aio/content/examples/template-syntax/src/app/hero-switch.components.ts diff --git a/aio/content/examples/template-syntax/src/app/hero.ts b/aio/content/examples/template-syntax/src/app/hero.ts new file mode 100644 index 00000000000..f8cc3b16a6c --- /dev/null +++ b/aio/content/examples/template-syntax/src/app/hero.ts @@ -0,0 +1,34 @@ +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/aio/content/examples/template-syntax/ts/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/app/sizer.component.ts rename to aio/content/examples/template-syntax/src/app/sizer.component.ts diff --git a/aio/content/examples/template-syntax/ts/src/images/hero.png b/aio/content/examples/template-syntax/src/images/hero.png similarity index 100% rename from aio/content/examples/template-syntax/ts/src/images/hero.png rename to aio/content/examples/template-syntax/src/images/hero.png diff --git a/aio/content/examples/template-syntax/ts/src/images/ng-logo.png b/aio/content/examples/template-syntax/src/images/ng-logo.png similarity index 100% rename from aio/content/examples/template-syntax/ts/src/images/ng-logo.png rename to aio/content/examples/template-syntax/src/images/ng-logo.png diff --git a/aio/content/examples/template-syntax/ts/src/images/villain.png b/aio/content/examples/template-syntax/src/images/villain.png similarity index 100% rename from aio/content/examples/template-syntax/ts/src/images/villain.png rename to aio/content/examples/template-syntax/src/images/villain.png diff --git a/aio/content/examples/template-syntax/ts/src/index.html b/aio/content/examples/template-syntax/src/index.html similarity index 100% rename from aio/content/examples/template-syntax/ts/src/index.html rename to aio/content/examples/template-syntax/src/index.html diff --git a/aio/content/examples/quickstart/ts/src/main.ts b/aio/content/examples/template-syntax/src/main.ts similarity index 100% rename from aio/content/examples/quickstart/ts/src/main.ts rename to aio/content/examples/template-syntax/src/main.ts diff --git a/aio/content/examples/template-syntax/ts/plnkr.no-link.html b/aio/content/examples/template-syntax/ts/plnkr.no-link.html deleted file mode 100644 index 4650d4a520a..00000000000 --- a/aio/content/examples/template-syntax/ts/plnkr.no-link.html +++ /dev/null @@ -1,1414 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/template-syntax/ts/src/app/app.component.html b/aio/content/examples/template-syntax/ts/src/app/app.component.html deleted file mode 100644 index b3d6c29be5e..00000000000 --- a/aio/content/examples/template-syntax/ts/src/app/app.component.html +++ /dev/null @@ -1,822 +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 ?.
-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)

- - - -

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: - - - - {{heroName}} -
-

- - - - -

- - -
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 returns {{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. -
- - -

[ngStyle] binding to `currentStyles` - CSS property names

-

currentStyles returns {{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}}
- - - - - - - -
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 - - - -

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/aio/content/examples/template-syntax/ts/src/app/app.component.ts b/aio/content/examples/template-syntax/ts/src/app/app.component.ts deleted file mode 100644 index 166948362fb..00000000000 --- a/aio/content/examples/template-syntax/ts/src/app/app.component.ts +++ /dev/null @@ -1,213 +0,0 @@ -/* tslint:disable:forin member-ordering */ -// #docplaster - -import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core'; - -import { Hero } from './hero'; - -// Alerter fn: monkey patch during test -export function alerter(msg?: string) { - window.alert(msg); -} - -export enum Color {Red, Green, Blue}; - -/** - * Giant grab bag of stuff to drive the chapter - */ -@Component({ - moduleId: module.id, - selector: 'my-app', - 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 += 1); - trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount += 1); - } - - @ViewChildren('noTrackBy') heroesNoTrackBy: QueryList; - @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList; - - actionName = 'Go for it'; - alert = alerter; - badCurly = 'bad curly'; - classes = 'special'; - - 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'; - - getStyles(el: Element) { - let styles = window.getComputedStyle(el); - let showStyles = {}; - for (let p in this.currentStyles) { // only interested in these styles - showStyles[p] = styles[p]; - } - return JSON.stringify(showStyles); - } - - getVal() { return this.val; } - - 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 = 'images/hero.png'; - - iconUrl = 'images/ng-logo.png'; - isActive = false; - isSpecial = true; - isUnchanged = true; - - nullHero: Hero = null; - - onCancel(event: KeyboardEvent) { - let evtMsg = event ? ' Event target is ' + (event.target).innerHTML : ''; - this.alert('Canceled.' + evtMsg); - } - - 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).innerText : ''; - this.alert('Saved.' + evtMsg); - } - - 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.heroesWithTrackByCountReset = 0; - } - - private samenessCount = 5; - moreOfTheSame() { this.samenessCount++; }; - get sameAsItEverWas() { - let result: string[] = Array(this.samenessCount); - for ( let i = result.length; i-- > 0; ) { result[i] = 'same as it ever was ...'; } - return result; - // return [1,2,3,4,5].map(id => { - // return {id:id, text: 'same as it ever was ...'}; - // }); - } - - 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() { - this.currentStyles = { - // CSS styles: set per current state of component properties - '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 - - val = 2; - // 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 = 'images/villain.png'; -} - -// 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(); - // Is every changed ElemRef the same as old and in the same position - const isSame = oldRefs.every((v, i) => v === changedRefs[i]); - if (!isSame) { - oldRefs = changedRefs; - // wait a tick because called after views are constructed - setTimeout(changed, 0); - } - }); -} diff --git a/aio/content/examples/template-syntax/ts/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/ts/src/app/hero-detail.component.ts deleted file mode 100644 index 486e6ac3706..00000000000 --- a/aio/content/examples/template-syntax/ts/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: '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 = 'images/hero.png'; - lineThrough = ''; - @Input() prefix = ''; - -// #docregion deleteRequest - // This component make 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: '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/aio/content/examples/template-syntax/ts/src/app/hero-form.component.html b/aio/content/examples/template-syntax/ts/src/app/hero-form.component.html deleted file mode 100644 index e61e268f74a..00000000000 --- a/aio/content/examples/template-syntax/ts/src/app/hero-form.component.html +++ /dev/null @@ -1,16 +0,0 @@ -
- -
-
- -
- -
-
- {{submitMessage}} -
- -
- diff --git a/aio/content/examples/template-syntax/ts/src/app/hero-form.component.ts b/aio/content/examples/template-syntax/ts/src/app/hero-form.component.ts deleted file mode 100644 index 83685284e56..00000000000 --- a/aio/content/examples/template-syntax/ts/src/app/hero-form.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, Input, ViewChild } from '@angular/core'; -import { NgForm } from '@angular/forms'; - -import { Hero } from './hero'; - -@Component({ - moduleId: module.id, - selector: '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/aio/content/examples/template-syntax/ts/src/app/hero.ts b/aio/content/examples/template-syntax/ts/src/app/hero.ts deleted file mode 100644 index 6331b62a7b1..00000000000 --- a/aio/content/examples/template-syntax/ts/src/app/hero.ts +++ /dev/null @@ -1,33 +0,0 @@ -export class Hero { - static nextId = 1; - - static heroes: Hero[] = [ - new Hero( - 325, - 'Hercules', - 'happy', - new Date(1970, 1, 25), - 'http://www.imdb.com/title/tt0065832/' - ), - 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/aio/content/examples/template-syntax/ts/src/template-syntax.css b/aio/content/examples/template-syntax/ts/src/template-syntax.css deleted file mode 100644 index 6ae25b396c6..00000000000 --- a/aio/content/examples/template-syntax/ts/src/template-syntax.css +++ /dev/null @@ -1,13 +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; 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/aio/content/examples/testing/ts/.gitignore b/aio/content/examples/testing/.gitignore similarity index 100% rename from aio/content/examples/testing/ts/.gitignore rename to aio/content/examples/testing/.gitignore diff --git a/aio/content/examples/testing/ts/1st-specs.plnkr.json b/aio/content/examples/testing/1st-specs.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/1st-specs.plnkr.json rename to aio/content/examples/testing/1st-specs.plnkr.json diff --git a/aio/content/examples/testing/ts/app-specs.plnkr.json b/aio/content/examples/testing/app-specs.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/app-specs.plnkr.json rename to aio/content/examples/testing/app-specs.plnkr.json diff --git a/aio/content/examples/testing/ts/bag-specs.plnkr.json b/aio/content/examples/testing/bag-specs.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/bag-specs.plnkr.json rename to aio/content/examples/testing/bag-specs.plnkr.json diff --git a/aio/content/examples/testing/ts/bag.plnkr.json b/aio/content/examples/testing/bag.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/bag.plnkr.json rename to aio/content/examples/testing/bag.plnkr.json diff --git a/aio/content/examples/testing/ts/banner-inline-specs.plnkr.json b/aio/content/examples/testing/banner-inline-specs.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/banner-inline-specs.plnkr.json rename to aio/content/examples/testing/banner-inline-specs.plnkr.json diff --git a/aio/content/examples/testing/ts/banner-specs.plnkr.json b/aio/content/examples/testing/banner-specs.plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/banner-specs.plnkr.json rename to aio/content/examples/testing/banner-specs.plnkr.json diff --git a/aio/content/examples/template-syntax/ts/example-config.json b/aio/content/examples/testing/example-config.json similarity index 100% rename from aio/content/examples/template-syntax/ts/example-config.json rename to aio/content/examples/testing/example-config.json diff --git a/aio/content/examples/testing/karma-test-shim.js b/aio/content/examples/testing/karma-test-shim.js new file mode 100644 index 00000000000..1b8d6acdd4d --- /dev/null +++ b/aio/content/examples/testing/karma-test-shim.js @@ -0,0 +1,96 @@ +// #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/aio/content/examples/testing/karma.conf.js b/aio/content/examples/testing/karma.conf.js new file mode 100644 index 00000000000..a00b8add542 --- /dev/null +++ b/aio/content/examples/testing/karma.conf.js @@ -0,0 +1,98 @@ +// #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/aio/content/examples/testing/ts/plnkr.json b/aio/content/examples/testing/plnkr.json similarity index 100% rename from aio/content/examples/testing/ts/plnkr.json rename to aio/content/examples/testing/plnkr.json diff --git a/aio/content/examples/testing/ts/src/1st-specs.html b/aio/content/examples/testing/src/1st-specs.html similarity index 100% rename from aio/content/examples/testing/ts/src/1st-specs.html rename to aio/content/examples/testing/src/1st-specs.html diff --git a/aio/content/examples/testing/ts/src/app-specs.html b/aio/content/examples/testing/src/app-specs.html similarity index 100% rename from aio/content/examples/testing/ts/src/app-specs.html rename to aio/content/examples/testing/src/app-specs.html diff --git a/aio/content/examples/testing/ts/src/app/1st.spec.ts b/aio/content/examples/testing/src/app/1st.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/1st.spec.ts rename to aio/content/examples/testing/src/app/1st.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/about.component.spec.ts b/aio/content/examples/testing/src/app/about.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/about.component.spec.ts rename to aio/content/examples/testing/src/app/about.component.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/about.component.ts b/aio/content/examples/testing/src/app/about.component.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/about.component.ts rename to aio/content/examples/testing/src/app/about.component.ts diff --git a/aio/content/examples/testing/ts/src/app/app-routing.module.ts b/aio/content/examples/testing/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/app-routing.module.ts rename to aio/content/examples/testing/src/app/app-routing.module.ts diff --git a/aio/content/examples/testing/ts/src/app/app.component.html b/aio/content/examples/testing/src/app/app.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/app.component.html rename to aio/content/examples/testing/src/app/app.component.html diff --git a/aio/content/examples/testing/src/app/app.component.router.spec.ts b/aio/content/examples/testing/src/app/app.component.router.spec.ts new file mode 100644 index 00000000000..de22db8ceb5 --- /dev/null +++ b/aio/content/examples/testing/src/app/app.component.router.spec.ts @@ -0,0 +1,198 @@ +// 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 { RouterTestingModule } from '@angular/router/testing'; +import { SpyLocation } from '@angular/common/testing'; + +import { click } from '../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 { AppModule } from './app.module'; +import { AppComponent } from './app.component'; +import { AboutComponent } from './about.component'; +import { DashboardHeroComponent } from './dashboard/dashboard-hero.component'; +import { TwainService } from './shared/twain.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 ] + }) + .compileComponents(); + })); + + it('should navigate to "Dashboard" immediately', fakeAsync(() => { + createComponent(); + expect(location.path()).toEqual('/dashboard', 'after initialNavigation()'); + expectElementOf(DashboardHeroComponent); + })); + + 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); + + page.expectEvents([ + [r.NavigationStart, '/about'], [r.RoutesRecognized, '/about'], + [r.NavigationEnd, '/about'] + ]); + })); + + it('should navigate to "About" w/ browser location URL change', fakeAsync(() => { + createComponent(); + location.simulateHashChange('/about'); + // location.go('/about'); // also works ... except in plunker + advance(); + expectPathToBe('/about'); + expectElementOf(AboutComponent); + })); + + // Can't navigate to lazy loaded modules with this technique + xit('should navigate to "Heroes" on click', 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', () => { + + 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('dummy', () => expect(true).toBe(true) ); + + + it('should navigate to "Heroes" on click', async(() => { + page.heroesLinkDe.nativeElement.click(); + advance(); + expectPathToBe('/heroes'); + expectElementOf(HeroListComponent); + })); + + xit('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => { + location.go('/heroes'); + advance(); + expectPathToBe('/heroes'); + expectElementOf(HeroListComponent); + + page.expectEvents([ + [r.NavigationStart, '/heroes'], [r.RoutesRecognized, '/heroes'], + [r.NavigationEnd, '/heroes'] + ]); + })); +}); + +////// Helpers ///////// + +/** Wait a tick, then detect changes */ +function advance(): void { + tick(); + fixture.detectChanges(); +} + +function createComponent() { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + + const injector = fixture.debugElement.injector; + location = injector.get(Location); + router = injector.get(Router); + router.initialNavigation(); + spyOn(injector.get(TwainService), 'getQuote') + .and.returnValue(Promise.resolve('Test Quote')); // fakes it + + advance(); + + page = new Page(); +} + +class Page { + aboutLinkDe: DebugElement; + dashboardLinkDe: DebugElement; + heroesLinkDe: DebugElement; + recordedEvents: any[] = []; + + // for debugging + comp: AppComponent; + location: SpyLocation; + router: Router; + fixture: ComponentFixture; + + expectEvents(pairs: any[]) { + const events = this.recordedEvents; + expect(events.length).toEqual(pairs.length, 'actual/expected events length mismatch'); + for (let i = 0; i < events.length; ++i) { + expect((events[i].constructor).name).toBe(pairs[i][0].name, 'unexpected event name'); + expect((events[i]).url).toBe(pairs[i][1], 'unexpected event url'); + } + } + + constructor() { + router.events.subscribe(e => this.recordedEvents.push(e)); + 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/aio/content/examples/testing/ts/src/app/app.component.spec.ts b/aio/content/examples/testing/src/app/app.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/app.component.spec.ts rename to aio/content/examples/testing/src/app/app.component.spec.ts diff --git a/aio/content/examples/testing/src/app/app.component.ts b/aio/content/examples/testing/src/app/app.component.ts new file mode 100644 index 00000000000..5bd535a1135 --- /dev/null +++ b/aio/content/examples/testing/src/app/app.component.ts @@ -0,0 +1,7 @@ +// #docregion +import { Component } from '@angular/core'; +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/testing/ts/src/app/app.module.ts b/aio/content/examples/testing/src/app/app.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/app.module.ts rename to aio/content/examples/testing/src/app/app.module.ts diff --git a/aio/content/examples/testing/ts/src/app/bag/async-helper.spec.ts b/aio/content/examples/testing/src/app/bag/async-helper.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/bag/async-helper.spec.ts rename to aio/content/examples/testing/src/app/bag/async-helper.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/bag/bag-external-template.html b/aio/content/examples/testing/src/app/bag/bag-external-template.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/bag/bag-external-template.html rename to aio/content/examples/testing/src/app/bag/bag-external-template.html diff --git a/aio/content/examples/testing/ts/src/app/bag/bag-main.ts b/aio/content/examples/testing/src/app/bag/bag-main.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/bag/bag-main.ts rename to aio/content/examples/testing/src/app/bag/bag-main.ts diff --git a/aio/content/examples/testing/ts/src/app/bag/bag.no-testbed.spec.ts b/aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/bag/bag.no-testbed.spec.ts rename to aio/content/examples/testing/src/app/bag/bag.no-testbed.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/bag/bag.spec.ts b/aio/content/examples/testing/src/app/bag/bag.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/bag/bag.spec.ts rename to aio/content/examples/testing/src/app/bag/bag.spec.ts diff --git a/aio/content/examples/testing/src/app/bag/bag.ts b/aio/content/examples/testing/src/app/bag/bag.ts new file mode 100644 index 00000000000..cbf1c21136c --- /dev/null +++ b/aio/content/examples/testing/src/app/bag/bag.ts @@ -0,0 +1,454 @@ +/* tslint:disable:forin */ +import { Component, ContentChildren, Directive, EventEmitter, + Injectable, Input, Output, Optional, + HostBinding, HostListener, + OnInit, OnChanges, OnDestroy, + Pipe, PipeTransform, + SimpleChange } from '@angular/core'; + +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/observable/of'; +import 'rxjs/add/operator/delay'; + +////////// The App: Services and Components for the tests. ////////////// + +export class Hero { + name: string; +} + +////////// Services /////////////// +// #docregion FancyService +@Injectable() +export class FancyService { + protected value: string = 'real value'; + + getValue() { return this.value; } + setValue(value: string) { this.value = value; } + + getAsyncValue() { return Promise.resolve('async value'); } + + getObservableValue() { return Observable.of('observable value'); } + + getTimeoutValue() { + return new Promise((resolve) => { + setTimeout(() => { resolve('timeout value'); }, 10); + }); + } + + getObservableDelayValue() { + return Observable.of('observable delay value').delay(10); + } +} +// #enddocregion FancyService + +// #docregion DependentService +@Injectable() +export class DependentService { + constructor(private dependentService: FancyService) { } + getValue() { return this.dependentService.getValue(); } +} +// #enddocregion DependentService + +/////////// 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 ButtonComp +@Component({ + selector: 'button-comp', + template: ` + + {{message}}` +}) +export class ButtonComponent { + isOn = false; + clicked() { this.isOn = !this.isOn; } + get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; } +} +// #enddocregion ButtonComp + +@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 style-guide 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: {{fancyService.value}}`, + providers: [FancyService] +}) +export class TestProvidersComponent { + constructor(private fancyService: FancyService) {} +} + + +@Component({ + selector: 'my-service-comp', + template: `injected value: {{fancyService.value}}`, + viewProviders: [FancyService] +}) +export class TestViewProvidersComponent { + constructor(private fancyService: FancyService) {} +} + +@Component({ + selector: 'external-template-comp', + templateUrl: './bag-external-template.html' +}) +export class ExternalTemplateComponent implements OnInit { + serviceValue: string; + + constructor(@Optional() private service: FancyService) { } + + 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: 'bad-template-comp', + templateUrl: './non-existant.html' +}) +export class BadTemplateUrlComponent { } + + + +@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: 'bag-comp', + template: ` +

Specs Bag

+ +
+

Input/Output Component

+ +
+

External Template Component

+ +
+

Component With External Template Component

+ +
+

Reverse Pipe

+ +
+

InputValueBinder Directive

+ +
+

Button Component

+ +
+

Needs Content

+ + + + + +
!
+
+ ` +}) +export class BagComponent { } +//////// Aggregations //////////// + +export const bagDeclarations = [ + BagComponent, + BankAccountComponent, BankAccountParentComponent, + ButtonComponent, + Child1Component, Child2Component, Child3Component, + ExternalTemplateComponent, InnerCompWithExternalTemplateComponent, + InputComponent, + InputValueBinderDirective, InputValueBinderComponent, + IoComponent, IoParentComponent, + MyIfComponent, MyIfChildComponent, MyIfParentComponent, + NeedsContentComponent, ParentComponent, + TestProvidersComponent, TestViewProvidersComponent, + ReversePipe, ReversePipeComponent, ShellComponent +]; + +export const bagProviders = [DependentService, FancyService]; + +//////////////////// +//////////// +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +@NgModule({ + imports: [BrowserModule, FormsModule], + declarations: bagDeclarations, + providers: bagProviders, + entryComponents: [BagComponent], + bootstrap: [BagComponent] +}) +export class BagModule { } + diff --git a/aio/content/examples/testing/ts/src/app/banner-inline.component.spec.ts b/aio/content/examples/testing/src/app/banner-inline.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner-inline.component.spec.ts rename to aio/content/examples/testing/src/app/banner-inline.component.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/banner-inline.component.ts b/aio/content/examples/testing/src/app/banner-inline.component.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner-inline.component.ts rename to aio/content/examples/testing/src/app/banner-inline.component.ts diff --git a/aio/content/examples/testing/ts/src/app/banner.component.css b/aio/content/examples/testing/src/app/banner.component.css similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner.component.css rename to aio/content/examples/testing/src/app/banner.component.css diff --git a/aio/content/examples/testing/ts/src/app/banner.component.detect-changes.spec.ts b/aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner.component.detect-changes.spec.ts rename to aio/content/examples/testing/src/app/banner.component.detect-changes.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/banner.component.html b/aio/content/examples/testing/src/app/banner.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner.component.html rename to aio/content/examples/testing/src/app/banner.component.html diff --git a/aio/content/examples/testing/ts/src/app/banner.component.spec.ts b/aio/content/examples/testing/src/app/banner.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/banner.component.spec.ts rename to aio/content/examples/testing/src/app/banner.component.spec.ts diff --git a/aio/content/examples/testing/src/app/banner.component.ts b/aio/content/examples/testing/src/app/banner.component.ts new file mode 100644 index 00000000000..4355a40867b --- /dev/null +++ b/aio/content/examples/testing/src/app/banner.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-banner', + templateUrl: './banner.component.html', + styleUrls: ['./banner.component.css'] +}) +export class BannerComponent { + title = 'Test Tour of Heroes'; +} + diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.css rename to aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.html rename to aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.html diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.spec.ts rename to aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts new file mode 100644 index 00000000000..9f6be16d7d3 --- /dev/null +++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts @@ -0,0 +1,17 @@ +// #docregion +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +import { Hero } from '../model'; + +// #docregion component +@Component({ + selector: 'dashboard-hero', + templateUrl: './dashboard-hero.component.html', + styleUrls: [ './dashboard-hero.component.css' ] +}) +export class DashboardHeroComponent { + @Input() hero: Hero; + @Output() selected = new EventEmitter(); + click() { this.selected.emit(this.hero); } +} +// #enddocregion component diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard.component.css similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.css rename to aio/content/examples/testing/src/app/dashboard/dashboard.component.css diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.html b/aio/content/examples/testing/src/app/dashboard/dashboard.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.html rename to aio/content/examples/testing/src/app/dashboard/dashboard.component.html diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.no-testbed.spec.ts rename to aio/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.spec.ts rename to aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts new file mode 100644 index 00000000000..3edaa0c0ab2 --- /dev/null +++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,40 @@ +// #docregion +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Hero, HeroService } from '../model'; + +@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() + .then(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/aio/content/examples/testing/ts/src/app/dashboard/dashboard.module.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/dashboard/dashboard.module.ts rename to aio/content/examples/testing/src/app/dashboard/dashboard.module.ts diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.css b/aio/content/examples/testing/src/app/hero/hero-detail.component.css similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-detail.component.css rename to aio/content/examples/testing/src/app/hero/hero-detail.component.css diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.html b/aio/content/examples/testing/src/app/hero/hero-detail.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-detail.component.html rename to aio/content/examples/testing/src/app/hero/hero-detail.component.html diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.no-testbed.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-detail.component.no-testbed.spec.ts rename to aio/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-detail.component.spec.ts rename to aio/content/examples/testing/src/app/hero/hero-detail.component.spec.ts diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts new file mode 100644 index 00000000000..25f13b0cd5f --- /dev/null +++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts @@ -0,0 +1,63 @@ +/* tslint:disable:member-ordering */ +// #docplaster +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import 'rxjs/add/operator/map'; + +import { Hero } from '../model'; +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.params.subscribe(p => this.getHero(p && p['id'])); + } + // #enddocregion ng-on-init + + private getHero(id: string): void { + // when no id or id===0, create new hero + if (!id) { + this.hero = new Hero(); + return; + } + + this.heroDetailService.getHero(id).then(hero => { + if (hero) { + this.hero = hero; + } else { + this.gotoList(); // id not found; navigate to list + } + }); + } + + save(): void { + this.heroDetailService.saveHero(this.hero).then(() => this.gotoList()); + } + + cancel() { this.gotoList(); } + + gotoList() { + this.router.navigate(['../'], {relativeTo: this.route}); + } +// #docregion prototype +} +// #enddocregion prototype diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-detail.service.ts rename to aio/content/examples/testing/src/app/hero/hero-detail.service.ts diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-list.component.css rename to aio/content/examples/testing/src/app/hero/hero-list.component.css diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-list.component.html b/aio/content/examples/testing/src/app/hero/hero-list.component.html similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-list.component.html rename to aio/content/examples/testing/src/app/hero/hero-list.component.html diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-list.component.spec.ts rename to aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts new file mode 100644 index 00000000000..c61ff23f0e6 --- /dev/null +++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Hero, HeroService } from '../model'; + +@Component({ + selector: 'app-heroes', + templateUrl: './hero-list.component.html', + styleUrls: [ './hero-list.component.css' ] +}) +export class HeroListComponent implements OnInit { + heroes: Promise; + 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/aio/content/examples/testing/ts/src/app/hero/hero-routing.module.ts b/aio/content/examples/testing/src/app/hero/hero-routing.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero-routing.module.ts rename to aio/content/examples/testing/src/app/hero/hero-routing.module.ts diff --git a/aio/content/examples/testing/ts/src/app/hero/hero.module.ts b/aio/content/examples/testing/src/app/hero/hero.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/hero/hero.module.ts rename to aio/content/examples/testing/src/app/hero/hero.module.ts diff --git a/aio/content/examples/testing/ts/src/app/model/hero.service.ts b/aio/content/examples/testing/src/app/model/hero.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/hero.service.ts rename to aio/content/examples/testing/src/app/model/hero.service.ts diff --git a/aio/content/examples/testing/ts/src/app/model/hero.spec.ts b/aio/content/examples/testing/src/app/model/hero.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/hero.spec.ts rename to aio/content/examples/testing/src/app/model/hero.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/model/hero.ts b/aio/content/examples/testing/src/app/model/hero.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/hero.ts rename to aio/content/examples/testing/src/app/model/hero.ts diff --git a/aio/content/examples/testing/ts/src/app/model/http-hero.service.spec.ts b/aio/content/examples/testing/src/app/model/http-hero.service.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/http-hero.service.spec.ts rename to aio/content/examples/testing/src/app/model/http-hero.service.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/model/http-hero.service.ts b/aio/content/examples/testing/src/app/model/http-hero.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/http-hero.service.ts rename to aio/content/examples/testing/src/app/model/http-hero.service.ts diff --git a/aio/content/examples/testing/ts/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/index.ts rename to aio/content/examples/testing/src/app/model/index.ts diff --git a/aio/content/examples/testing/ts/src/app/model/test-heroes.ts b/aio/content/examples/testing/src/app/model/test-heroes.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/test-heroes.ts rename to aio/content/examples/testing/src/app/model/test-heroes.ts diff --git a/aio/content/examples/testing/ts/src/app/model/testing/fake-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/testing/fake-hero.service.ts rename to aio/content/examples/testing/src/app/model/testing/fake-hero.service.ts diff --git a/aio/content/examples/testing/ts/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/testing/index.ts rename to aio/content/examples/testing/src/app/model/testing/index.ts diff --git a/aio/content/examples/testing/ts/src/app/model/user.service.ts b/aio/content/examples/testing/src/app/model/user.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/model/user.service.ts rename to aio/content/examples/testing/src/app/model/user.service.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/highlight.directive.spec.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/highlight.directive.spec.ts rename to aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/highlight.directive.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/highlight.directive.ts rename to aio/content/examples/testing/src/app/shared/highlight.directive.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/shared.module.ts b/aio/content/examples/testing/src/app/shared/shared.module.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/shared.module.ts rename to aio/content/examples/testing/src/app/shared/shared.module.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/title-case.pipe.spec.ts b/aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/title-case.pipe.spec.ts rename to aio/content/examples/testing/src/app/shared/title-case.pipe.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/title-case.pipe.ts b/aio/content/examples/testing/src/app/shared/title-case.pipe.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/title-case.pipe.ts rename to aio/content/examples/testing/src/app/shared/title-case.pipe.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/twain.component.spec.ts b/aio/content/examples/testing/src/app/shared/twain.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/twain.component.spec.ts rename to aio/content/examples/testing/src/app/shared/twain.component.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/twain.component.timer.spec.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/twain.component.timer.spec.ts.no-work rename to aio/content/examples/testing/src/app/shared/twain.component.timer.spec.ts.no-work diff --git a/aio/content/examples/testing/ts/src/app/shared/twain.component.timer.ts.no-work b/aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/twain.component.timer.ts.no-work rename to aio/content/examples/testing/src/app/shared/twain.component.timer.ts.no-work diff --git a/aio/content/examples/testing/ts/src/app/shared/twain.component.ts b/aio/content/examples/testing/src/app/shared/twain.component.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/twain.component.ts rename to aio/content/examples/testing/src/app/shared/twain.component.ts diff --git a/aio/content/examples/testing/ts/src/app/shared/twain.service.ts b/aio/content/examples/testing/src/app/shared/twain.service.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/shared/twain.service.ts rename to aio/content/examples/testing/src/app/shared/twain.service.ts diff --git a/aio/content/examples/testing/ts/src/app/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome.component.spec.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/welcome.component.spec.ts rename to aio/content/examples/testing/src/app/welcome.component.spec.ts diff --git a/aio/content/examples/testing/ts/src/app/welcome.component.ts b/aio/content/examples/testing/src/app/welcome.component.ts similarity index 100% rename from aio/content/examples/testing/ts/src/app/welcome.component.ts rename to aio/content/examples/testing/src/app/welcome.component.ts diff --git a/aio/content/examples/testing/ts/src/bag-specs.html b/aio/content/examples/testing/src/bag-specs.html similarity index 100% rename from aio/content/examples/testing/ts/src/bag-specs.html rename to aio/content/examples/testing/src/bag-specs.html diff --git a/aio/content/examples/testing/ts/src/bag.html b/aio/content/examples/testing/src/bag.html similarity index 100% rename from aio/content/examples/testing/ts/src/bag.html rename to aio/content/examples/testing/src/bag.html diff --git a/aio/content/examples/testing/ts/src/banner-inline-specs.html b/aio/content/examples/testing/src/banner-inline-specs.html similarity index 100% rename from aio/content/examples/testing/ts/src/banner-inline-specs.html rename to aio/content/examples/testing/src/banner-inline-specs.html diff --git a/aio/content/examples/testing/ts/src/banner-specs.html b/aio/content/examples/testing/src/banner-specs.html similarity index 100% rename from aio/content/examples/testing/ts/src/banner-specs.html rename to aio/content/examples/testing/src/banner-specs.html diff --git a/aio/content/examples/testing/ts/src/browser-test-shim.js b/aio/content/examples/testing/src/browser-test-shim.js similarity index 100% rename from aio/content/examples/testing/ts/src/browser-test-shim.js rename to aio/content/examples/testing/src/browser-test-shim.js diff --git a/aio/content/examples/testing/ts/src/index.html b/aio/content/examples/testing/src/index.html similarity index 100% rename from aio/content/examples/testing/ts/src/index.html rename to aio/content/examples/testing/src/index.html diff --git a/aio/content/examples/testing/ts/src/main.ts b/aio/content/examples/testing/src/main.ts similarity index 100% rename from aio/content/examples/testing/ts/src/main.ts rename to aio/content/examples/testing/src/main.ts diff --git a/aio/content/examples/testing/src/systemjs.config.extras.js b/aio/content/examples/testing/src/systemjs.config.extras.js new file mode 100644 index 00000000000..218e65715cb --- /dev/null +++ b/aio/content/examples/testing/src/systemjs.config.extras.js @@ -0,0 +1,9 @@ +// #docregion +/** App specific SystemJS configuration */ +System.config({ + packages: { + // barrels + 'app/model': {main:'index.js', defaultExtension:'js'}, + 'app/model/testing': {main:'index.js', defaultExtension:'js'} + } +}); diff --git a/aio/content/examples/testing/ts/src/testing/index.ts b/aio/content/examples/testing/src/testing/index.ts similarity index 100% rename from aio/content/examples/testing/ts/src/testing/index.ts rename to aio/content/examples/testing/src/testing/index.ts diff --git a/aio/content/examples/testing/ts/src/testing/jasmine-matchers.d.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts similarity index 100% rename from aio/content/examples/testing/ts/src/testing/jasmine-matchers.d.ts rename to aio/content/examples/testing/src/testing/jasmine-matchers.d.ts diff --git a/aio/content/examples/testing/ts/src/testing/jasmine-matchers.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.ts similarity index 100% rename from aio/content/examples/testing/ts/src/testing/jasmine-matchers.ts rename to aio/content/examples/testing/src/testing/jasmine-matchers.ts diff --git a/aio/content/examples/testing/ts/src/testing/router-stubs.ts b/aio/content/examples/testing/src/testing/router-stubs.ts similarity index 100% rename from aio/content/examples/testing/ts/src/testing/router-stubs.ts rename to aio/content/examples/testing/src/testing/router-stubs.ts diff --git a/aio/content/examples/testing/ts/1st-specs.plnkr.no-link.html b/aio/content/examples/testing/ts/1st-specs.plnkr.no-link.html deleted file mode 100644 index 41897d0b0d5..00000000000 --- a/aio/content/examples/testing/ts/1st-specs.plnkr.no-link.html +++ /dev/null @@ -1,339 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/app-specs.plnkr.no-link.html b/aio/content/examples/testing/ts/app-specs.plnkr.no-link.html deleted file mode 100644 index 6676c8179ac..00000000000 --- a/aio/content/examples/testing/ts/app-specs.plnkr.no-link.html +++ /dev/null @@ -1,3378 +0,0 @@ -
diff --git a/aio/content/examples/testing/ts/bag-specs.plnkr.no-link.html b/aio/content/examples/testing/ts/bag-specs.plnkr.no-link.html deleted file mode 100644 index 04d30a5e0c2..00000000000 --- a/aio/content/examples/testing/ts/bag-specs.plnkr.no-link.html +++ /dev/null @@ -1,1828 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/bag.plnkr.no-link.html b/aio/content/examples/testing/ts/bag.plnkr.no-link.html deleted file mode 100644 index c1b05024a37..00000000000 --- a/aio/content/examples/testing/ts/bag.plnkr.no-link.html +++ /dev/null @@ -1,623 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/banner-inline-specs.plnkr.no-link.html b/aio/content/examples/testing/ts/banner-inline-specs.plnkr.no-link.html deleted file mode 100644 index d7aadb19635..00000000000 --- a/aio/content/examples/testing/ts/banner-inline-specs.plnkr.no-link.html +++ /dev/null @@ -1,289 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/banner-specs.plnkr.no-link.html b/aio/content/examples/testing/ts/banner-specs.plnkr.no-link.html deleted file mode 100644 index 4c0fcce8612..00000000000 --- a/aio/content/examples/testing/ts/banner-specs.plnkr.no-link.html +++ /dev/null @@ -1,311 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/plnkr.no-link.html b/aio/content/examples/testing/ts/plnkr.no-link.html deleted file mode 100644 index a85bd8674c1..00000000000 --- a/aio/content/examples/testing/ts/plnkr.no-link.html +++ /dev/null @@ -1,1160 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/testing/ts/src/app/app.component.router.spec.ts b/aio/content/examples/testing/ts/src/app/app.component.router.spec.ts deleted file mode 100644 index dac70d8fb63..00000000000 --- a/aio/content/examples/testing/ts/src/app/app.component.router.spec.ts +++ /dev/null @@ -1,198 +0,0 @@ -// For more examples: -// https://github.com/angular/angular/blob/master/packages/router/test/integration.spec.ts - -import { async, ComponentFixture, fakeAsync, TestBed, tick, -} from '@angular/core/testing'; - -import { RouterTestingModule } from '@angular/router/testing'; -import { SpyLocation } from '@angular/common/testing'; - -import { click } from '../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 { AppModule } from './app.module'; -import { AppComponent } from './app.component'; -import { AboutComponent } from './about.component'; -import { DashboardHeroComponent } from './dashboard/dashboard-hero.component'; -import { TwainService } from './shared/twain.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 ] - }) - .compileComponents(); - })); - - it('should navigate to "Dashboard" immediately', fakeAsync(() => { - createComponent(); - expect(location.path()).toEqual('/dashboard', 'after initialNavigation()'); - expectElementOf(DashboardHeroComponent); - })); - - 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); - - page.expectEvents([ - [r.NavigationStart, '/about'], [r.RoutesRecognized, '/about'], - [r.NavigationEnd, '/about'] - ]); - })); - - it('should navigate to "About" w/ browser location URL change', fakeAsync(() => { - createComponent(); - location.simulateHashChange('/about'); - // location.go('/about'); // also works ... except in plunker - advance(); - expectPathToBe('/about'); - expectElementOf(AboutComponent); - })); - - // Can't navigate to lazy loaded modules with this technique - xit('should navigate to "Heroes" on click', 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', () => { - - 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('dummy', () => expect(true).toBe(true) ); - - - it('should navigate to "Heroes" on click', async(() => { - page.heroesLinkDe.nativeElement.click(); - advance(); - expectPathToBe('/heroes'); - expectElementOf(HeroListComponent); - })); - - xit('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => { - location.go('/heroes'); - advance(); - expectPathToBe('/heroes'); - expectElementOf(HeroListComponent); - - page.expectEvents([ - [r.NavigationStart, '/heroes'], [r.RoutesRecognized, '/heroes'], - [r.NavigationEnd, '/heroes'] - ]); - })); -}); - -////// Helpers ///////// - -/** Wait a tick, then detect changes */ -function advance(): void { - tick(); - fixture.detectChanges(); -} - -function createComponent() { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - - const injector = fixture.debugElement.injector; - location = injector.get(Location); - router = injector.get(Router); - router.initialNavigation(); - spyOn(injector.get(TwainService), 'getQuote') - .and.returnValue(Promise.resolve('Test Quote')); // fakes it - - advance(); - - page = new Page(); -} - -class Page { - aboutLinkDe: DebugElement; - dashboardLinkDe: DebugElement; - heroesLinkDe: DebugElement; - recordedEvents: any[] = []; - - // for debugging - comp: AppComponent; - location: SpyLocation; - router: Router; - fixture: ComponentFixture; - - expectEvents(pairs: any[]) { - const events = this.recordedEvents; - expect(events.length).toEqual(pairs.length, 'actual/expected events length mismatch'); - for (let i = 0; i < events.length; ++i) { - expect((events[i].constructor).name).toBe(pairs[i][0].name, 'unexpected event name'); - expect((events[i]).url).toBe(pairs[i][1], 'unexpected event url'); - } - } - - constructor() { - router.events.subscribe(e => this.recordedEvents.push(e)); - 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/aio/content/examples/testing/ts/src/app/app.component.ts b/aio/content/examples/testing/ts/src/app/app.component.ts deleted file mode 100644 index a9170884108..00000000000 --- a/aio/content/examples/testing/ts/src/app/app.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/testing/ts/src/app/bag/bag.ts b/aio/content/examples/testing/ts/src/app/bag/bag.ts deleted file mode 100644 index 41608d7acdb..00000000000 --- a/aio/content/examples/testing/ts/src/app/bag/bag.ts +++ /dev/null @@ -1,456 +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 { Observable } from 'rxjs/Observable'; -import 'rxjs/add/observable/of'; -import 'rxjs/add/operator/delay'; - -////////// The App: Services and Components for the tests. ////////////// - -export class Hero { - name: string; -} - -////////// Services /////////////// -// #docregion FancyService -@Injectable() -export class FancyService { - protected value: string = 'real value'; - - getValue() { return this.value; } - setValue(value: string) { this.value = value; } - - getAsyncValue() { return Promise.resolve('async value'); } - - getObservableValue() { return Observable.of('observable value'); } - - getTimeoutValue() { - return new Promise((resolve) => { - setTimeout(() => { resolve('timeout value'); }, 10); - }); - } - - getObservableDelayValue() { - return Observable.of('observable delay value').delay(10); - } -} -// #enddocregion FancyService - -// #docregion DependentService -@Injectable() -export class DependentService { - constructor(private dependentService: FancyService) { } - getValue() { return this.dependentService.getValue(); } -} -// #enddocregion DependentService - -/////////// 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 ButtonComp -@Component({ - selector: 'button-comp', - template: ` - - {{message}}` -}) -export class ButtonComponent { - isOn = false; - clicked() { this.isOn = !this.isOn; } - get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; } -} -// #enddocregion ButtonComp - -@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 style-guide 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: {{fancyService.value}}`, - providers: [FancyService] -}) -export class TestProvidersComponent { - constructor(private fancyService: FancyService) {} -} - - -@Component({ - selector: 'my-service-comp', - template: `injected value: {{fancyService.value}}`, - viewProviders: [FancyService] -}) -export class TestViewProvidersComponent { - constructor(private fancyService: FancyService) {} -} - -@Component({ - moduleId: module.id, - selector: 'external-template-comp', - templateUrl: './bag-external-template.html' -}) -export class ExternalTemplateComponent implements OnInit { - serviceValue: string; - - constructor(@Optional() private service: FancyService) { } - - ngOnInit() { - if (this.service) { this.serviceValue = this.service.getValue(); } - } -} - -@Component({ - selector: 'comp-w-ext-comp', - template: ` -

comp-w-ext-comp

- - ` -}) -export class InnerCompWithExternalTemplateComponent { } - -@Component({ - moduleId: module.id, - selector: 'bad-template-comp', - templateUrl: './non-existant.html' -}) -export class BadTemplateUrlComponent { } - - - -@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: 'bag-comp', - template: ` -

Specs Bag

- -
-

Input/Output Component

- -
-

External Template Component

- -
-

Component With External Template Component

- -
-

Reverse Pipe

- -
-

InputValueBinder Directive

- -
-

Button Component

- -
-

Needs Content

- - - - - -
!
-
- ` -}) -export class BagComponent { } -//////// Aggregations //////////// - -export const bagDeclarations = [ - BagComponent, - BankAccountComponent, BankAccountParentComponent, - ButtonComponent, - Child1Component, Child2Component, Child3Component, - ExternalTemplateComponent, InnerCompWithExternalTemplateComponent, - InputComponent, - InputValueBinderDirective, InputValueBinderComponent, - IoComponent, IoParentComponent, - MyIfComponent, MyIfChildComponent, MyIfParentComponent, - NeedsContentComponent, ParentComponent, - TestProvidersComponent, TestViewProvidersComponent, - ReversePipe, ReversePipeComponent, ShellComponent -]; - -export const bagProviders = [DependentService, FancyService]; - -//////////////////// -//////////// -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -@NgModule({ - imports: [BrowserModule, FormsModule], - declarations: bagDeclarations, - providers: bagProviders, - entryComponents: [BagComponent], - bootstrap: [BagComponent] -}) -export class BagModule { } - diff --git a/aio/content/examples/testing/ts/src/app/banner.component.ts b/aio/content/examples/testing/ts/src/app/banner.component.ts deleted file mode 100644 index 333f37bbcd3..00000000000 --- a/aio/content/examples/testing/ts/src/app/banner.component.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'app-banner', - templateUrl: './banner.component.html', - styleUrls: ['./banner.component.css'] -}) -export class BannerComponent { - title = 'Test Tour of Heroes'; -} - diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts deleted file mode 100644 index 4a8c4974fd0..00000000000 --- a/aio/content/examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; - -import { Hero } from '../model'; - -// #docregion component -@Component({ - moduleId: module.id, - selector: 'dashboard-hero', - templateUrl: './dashboard-hero.component.html', - styleUrls: [ './dashboard-hero.component.css' ] -}) -export class DashboardHeroComponent { - @Input() hero: Hero; - @Output() selected = new EventEmitter(); - click() { this.selected.emit(this.hero); } -} -// #enddocregion component diff --git a/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/ts/src/app/dashboard/dashboard.component.ts deleted file mode 100644 index 40581094f66..00000000000 --- a/aio/content/examples/testing/ts/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, HeroService } from '../model'; - -@Component({ - moduleId: module.id, - 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() - .then(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/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.ts deleted file mode 100644 index 763c921650a..00000000000 --- a/aio/content/examples/testing/ts/src/app/hero/hero-detail.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -/* tslint:disable:member-ordering */ -// #docplaster -import { Component, Input, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import 'rxjs/add/operator/map'; - -import { Hero } from '../model'; -import { HeroDetailService } from './hero-detail.service'; - -// #docregion prototype -@Component({ - moduleId: module.id, - 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.params.subscribe(p => this.getHero(p && p['id'])); - } - // #enddocregion ng-on-init - - private getHero(id: string): void { - // when no id or id===0, create new hero - if (!id) { - this.hero = new Hero(); - return; - } - - this.heroDetailService.getHero(id).then(hero => { - if (hero) { - this.hero = hero; - } else { - this.gotoList(); // id not found; navigate to list - } - }); - } - - save(): void { - this.heroDetailService.saveHero(this.hero).then(() => this.gotoList()); - } - - cancel() { this.gotoList(); } - - gotoList() { - this.router.navigate(['../'], {relativeTo: this.route}); - } -// #docregion prototype -} -// #enddocregion prototype diff --git a/aio/content/examples/testing/ts/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/ts/src/app/hero/hero-list.component.ts deleted file mode 100644 index 501e0000b68..00000000000 --- a/aio/content/examples/testing/ts/src/app/hero/hero-list.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Hero, HeroService } from '../model'; - -@Component({ - moduleId: module.id, - selector: 'app-heroes', - templateUrl: './hero-list.component.html', - styleUrls: [ './hero-list.component.css' ] -}) -export class HeroListComponent implements OnInit { - heroes: Promise; - 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/aio/content/examples/toh-1/app/app.component.1.ts b/aio/content/examples/toh-1/app/app.component.1.ts new file mode 100644 index 00000000000..cebe8e6759c --- /dev/null +++ b/aio/content/examples/toh-1/app/app.component.1.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +let t = { +// #docregion show-hero +template: `

{{title}}

{{hero}} details!

` +// #enddocregion show-hero +}; + +t = { +// #docregion show-hero-2 +template: `

{{title}}

{{hero.name}} details!

` +// #enddocregion show-hero-2 +}; + +t = { +// #docregion multi-line-strings +template: ` +

{{title}}

+

{{hero.name}} details!

+
{{hero.id}}
+
{{hero.name}}
+ ` +// #enddocregion multi-line-strings +}; + + +/* +// #docregion name-input +
+ + +
+// #enddocregion name-input +*/ + +///////////////// + +@Component(t) +// #docregion app-component-1 +export class AppComponent { + title = 'Tour of Heroes'; + hero = 'Windstorm'; +} +// #enddocregion app-component-1 diff --git a/aio/content/examples/testing/ts/example-config.json b/aio/content/examples/toh-1/example-config.json similarity index 100% rename from aio/content/examples/testing/ts/example-config.json rename to aio/content/examples/toh-1/example-config.json diff --git a/aio/content/examples/toh-1/plnkr.json b/aio/content/examples/toh-1/plnkr.json new file mode 100644 index 00000000000..ca75131d96f --- /dev/null +++ b/aio/content/examples/toh-1/plnkr.json @@ -0,0 +1,10 @@ +{ + "description": "Tour of Heroes: Part 1", + "basePath": "src/", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/aio/content/examples/toh-1/src/app/app.component.ts b/aio/content/examples/toh-1/src/app/app.component.ts new file mode 100644 index 00000000000..602781b9bae --- /dev/null +++ b/aio/content/examples/toh-1/src/app/app.component.ts @@ -0,0 +1,33 @@ +// #docregion +import { Component } from '@angular/core'; + +// #docregion hero-class-1 +export class Hero { + id: number; + name: string; +} +// #enddocregion hero-class-1 + +@Component({ + selector: 'my-app', + // #docregion editing-Hero + template: ` +

{{title}}

+

{{hero.name}} details!

+
{{hero.id}}
+
+ + +
+ ` + // #enddocregion editing-Hero +}) +export class AppComponent { + title = 'Tour of Heroes'; + // #docregion hero-property-1 + hero: Hero = { + id: 1, + name: 'Windstorm' + }; + // #enddocregion hero-property-1 +} diff --git a/aio/content/examples/toh-1/src/app/app.module.ts b/aio/content/examples/toh-1/src/app/app.module.ts new file mode 100644 index 00000000000..8e87678efcb --- /dev/null +++ b/aio/content/examples/toh-1/src/app/app.module.ts @@ -0,0 +1,18 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; // <-- NgModel lives here + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule, + FormsModule // <-- import the FormsModule before binding with [(ngModel)] + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/aio/content/examples/toh-1/ts/src/index.html b/aio/content/examples/toh-1/src/index.html similarity index 100% rename from aio/content/examples/toh-1/ts/src/index.html rename to aio/content/examples/toh-1/src/index.html diff --git a/aio/content/examples/toh-1/ts/src/main.ts b/aio/content/examples/toh-1/src/main.ts similarity index 100% rename from aio/content/examples/toh-1/ts/src/main.ts rename to aio/content/examples/toh-1/src/main.ts diff --git a/aio/content/examples/toh-1/ts-snippets/app.component.snippets.pt1.ts b/aio/content/examples/toh-1/ts-snippets/app.component.snippets.pt1.ts deleted file mode 100644 index 05180b0c83e..00000000000 --- a/aio/content/examples/toh-1/ts-snippets/app.component.snippets.pt1.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docregion show-hero -template: '

{{title}}

{{hero}} details!

' -// #enddocregion show-hero - -// #docregion show-hero-2 -template: '

{{title}}

{{hero.name}} details!

' -// #enddocregion show-hero-2 - -// #docregion show-hero-properties -template: '

{{title}}

{{hero.name}} details!

{{hero.id}}
{{hero.name}}
' -// #enddocregion show-hero-properties - -// #docregion multi-line-strings -template:` -

{{title}}

-

{{hero.name}} details!

-
{{hero.id}}
-
{{hero.name}}
- ` -// #enddocregion multi-line-strings - -// #docregion editing-Hero -template:` -

{{title}}

-

{{hero.name}} details!

-
{{hero.id}}
-
- - -
- ` -// #enddocregion editing-Hero - -// #docregion app-component-1 -export class AppComponent { - title = 'Tour of Heroes'; - hero = 'Windstorm'; -} -// #enddocregion app-component-1 diff --git a/aio/content/examples/toh-1/ts/plnkr.json b/aio/content/examples/toh-1/ts/plnkr.json deleted file mode 100644 index b5d016f282e..00000000000 --- a/aio/content/examples/toh-1/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 1", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/aio/content/examples/toh-1/ts/plnkr.no-link.html b/aio/content/examples/toh-1/ts/plnkr.no-link.html deleted file mode 100644 index 47d25fa4af4..00000000000 --- a/aio/content/examples/toh-1/ts/plnkr.no-link.html +++ /dev/null @@ -1,215 +0,0 @@ -
\ No newline at end of file diff --git a/aio/content/examples/toh-1/ts/src/app/app.component.ts b/aio/content/examples/toh-1/ts/src/app/app.component.ts deleted file mode 100644 index b61fac3c0ba..00000000000 --- a/aio/content/examples/toh-1/ts/src/app/app.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -// #docregion pt1 -import { Component } from '@angular/core'; - -// #docregion hero-class-1 -export class Hero { - id: number; - name: string; -} -// #enddocregion hero-class-1 - -@Component({ - selector: 'my-app', - template: ` -

{{title}}

-

{{hero.name}} details!

-
{{hero.id}}
-
- - -
- ` -}) -export class AppComponent { - title = 'Tour of Heroes'; - // #docregion hero-property-1 - hero: Hero = { - id: 1, - name: 'Windstorm' - }; - // #enddocregion hero-property-1 -} -// #enddocregion pt1 diff --git a/aio/content/examples/toh-2/app/app.component.1.html b/aio/content/examples/toh-2/app/app.component.1.html new file mode 100644 index 00000000000..86f82287238 --- /dev/null +++ b/aio/content/examples/toh-2/app/app.component.1.html @@ -0,0 +1,69 @@ + +
  • + {{hero.id}} {{hero.name}} +
  • + + + +

    My Heroes

    +
      +
    • + {{hero.id}} {{hero.name}} +
    • +
    + + + +
  • + ... +
  • + + + +

    {{selectedHero.name}} details!

    +
    {{selectedHero.id}}
    +
    + + +
    + + + +
    +

    {{selectedHero.name}} details!

    +
    {{selectedHero.id}}
    +
    + + +
    +
    + + + +heroes = HEROES; + + + +

    My Heroes

    +
      +
    • + +
    • +
    + + + +
  • + + + +[class.selected]="hero === selectedHero" + + + +
  • + {{hero.id}} {{hero.name}} +
  • + diff --git a/aio/content/examples/toh-2/e2e-spec.ts b/aio/content/examples/toh-2/e2e-spec.ts index b5df938cd39..34f9fba5735 100644 --- a/aio/content/examples/toh-2/e2e-spec.ts +++ b/aio/content/examples/toh-2/e2e-spec.ts @@ -128,6 +128,6 @@ function getPageElts() { return { heroes: element.all(by.css('my-app li')), selected: element(by.css('my-app li.selected')), - heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div')) + heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) }; } diff --git a/aio/content/examples/toh-1/ts/example-config.json b/aio/content/examples/toh-2/example-config.json similarity index 100% rename from aio/content/examples/toh-1/ts/example-config.json rename to aio/content/examples/toh-2/example-config.json diff --git a/aio/content/examples/toh-2/plnkr.json b/aio/content/examples/toh-2/plnkr.json new file mode 100644 index 00000000000..08c7b9581aa --- /dev/null +++ b/aio/content/examples/toh-2/plnkr.json @@ -0,0 +1,10 @@ +{ + "description": "Tour of Heroes: Part 2", + "basePath": "src/", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/aio/content/examples/toh-2/ts/src/app/app.component.ts b/aio/content/examples/toh-2/src/app/app.component.ts similarity index 100% rename from aio/content/examples/toh-2/ts/src/app/app.component.ts rename to aio/content/examples/toh-2/src/app/app.component.ts diff --git a/aio/content/examples/toh-1/ts/src/app/app.module.ts b/aio/content/examples/toh-2/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-1/ts/src/app/app.module.ts rename to aio/content/examples/toh-2/src/app/app.module.ts diff --git a/aio/content/examples/toh-2/ts/src/index.html b/aio/content/examples/toh-2/src/index.html similarity index 100% rename from aio/content/examples/toh-2/ts/src/index.html rename to aio/content/examples/toh-2/src/index.html diff --git a/aio/content/examples/toh-2/ts/src/main.ts b/aio/content/examples/toh-2/src/main.ts similarity index 100% rename from aio/content/examples/toh-2/ts/src/main.ts rename to aio/content/examples/toh-2/src/main.ts diff --git a/aio/content/examples/toh-2/ts-snippets/app.component.snippets.pt2.ts b/aio/content/examples/toh-2/ts-snippets/app.component.snippets.pt2.ts deleted file mode 100644 index 801c5501302..00000000000 --- a/aio/content/examples/toh-2/ts-snippets/app.component.snippets.pt2.ts +++ /dev/null @@ -1,69 +0,0 @@ -// #docregion ng-for -
  • - {{hero.id}} {{hero.name}} -
  • -// #enddocregion ng-for - -// #docregion heroes-styled -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
    • -
    -// #enddocregion heroes-styled - -// #docregion selectedHero-click -
  • - {{hero.id}} {{hero.name}} -
  • -// #enddocregion selectedHero-click - -// #docregion selectedHero-details -

    {{selectedHero.name}} details!

    -
    {{selectedHero.id}}
    -
    - - -
    -// #enddocregion selectedHero-details - -// #docregion ng-if -
    -

    {{selectedHero.name}} details!

    -
    {{selectedHero.id}}
    -
    - - -
    -
    -// #enddocregion ng-if - -// #docregion hero-array-1 -heroes = HEROES; -// #enddocregion hero-array-1 - -// #docregion heroes-template-1 -

    My Heroes

    -
      -
    • - -
    • -
    -// #enddocregion heroes-template-1 - -// #docregion heroes-ngfor-1 -
  • -// #enddocregion heroes-ngfor-1 - -// #docregion class-selected-1 -[class.selected]="hero === selectedHero" -// #enddocregion class-selected-1 - -// #docregion class-selected-2 -
  • - {{hero.id}} {{hero.name}} -
  • -// #enddocregion class-selected-2 diff --git a/aio/content/examples/toh-2/ts/plnkr.json b/aio/content/examples/toh-2/ts/plnkr.json deleted file mode 100644 index 19c4e7f7203..00000000000 --- a/aio/content/examples/toh-2/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 2", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/aio/content/examples/toh-2/ts/plnkr.no-link.html b/aio/content/examples/toh-2/ts/plnkr.no-link.html deleted file mode 100644 index 254fbe58d84..00000000000 --- a/aio/content/examples/toh-2/ts/plnkr.no-link.html +++ /dev/null @@ -1,289 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/toh-2/ts/src/app/app.module.ts b/aio/content/examples/toh-2/ts/src/app/app.module.ts deleted file mode 100644 index 4c0b77ea480..00000000000 --- a/aio/content/examples/toh-2/ts/src/app/app.module.ts +++ /dev/null @@ -1,18 +0,0 @@ -// #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } diff --git a/aio/content/examples/toh-3/app/app.component.1.html b/aio/content/examples/toh-3/app/app.component.1.html new file mode 100644 index 00000000000..8b6c3b0d829 --- /dev/null +++ b/aio/content/examples/toh-3/app/app.component.1.html @@ -0,0 +1,12 @@ +

    {{title}}

    +

    My Heroes

    +
      +
    • + {{hero.id}} {{hero.name}} +
    • +
    + + + diff --git a/aio/content/examples/toh-3/app/hero-detail.component.1.ts b/aio/content/examples/toh-3/app/hero-detail.component.1.ts new file mode 100644 index 00000000000..fec477fbd7c --- /dev/null +++ b/aio/content/examples/toh-3/app/hero-detail.component.1.ts @@ -0,0 +1,35 @@ +// #docplaster +// #docregion v1 +import { Component } from '@angular/core'; + +// #enddocregion v1 +// #docregion hero-import +import { Hero } from './hero'; +// #enddocregion hero-import + +// #docregion v1 +@Component({ + selector: 'hero-detail', +// #enddocregion v1 + // #docregion template + template: ` +
    +

    {{hero.name}} details!

    +
    {{hero.id}}
    +
    + + +
    +
    + ` + // #enddocregion template +// #docregion v1 +}) +export class HeroDetailComponent { +// #enddocregion v1 +// #docregion hero + hero: Hero; +// #enddocregion hero +// #docregion v1 +} +// #enddocregion v1 diff --git a/aio/content/examples/toh-3/e2e-spec.ts b/aio/content/examples/toh-3/e2e-spec.ts index cce266dcaab..842716c5fc2 100644 --- a/aio/content/examples/toh-3/e2e-spec.ts +++ b/aio/content/examples/toh-3/e2e-spec.ts @@ -128,6 +128,6 @@ function getPageElts() { return { heroes: element.all(by.css('my-app li')), selected: element(by.css('my-app li.selected')), - heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div')) + heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) }; } diff --git a/aio/content/examples/toh-2/ts/example-config.json b/aio/content/examples/toh-3/example-config.json similarity index 100% rename from aio/content/examples/toh-2/ts/example-config.json rename to aio/content/examples/toh-3/example-config.json diff --git a/aio/content/examples/toh-3/plnkr.json b/aio/content/examples/toh-3/plnkr.json new file mode 100644 index 00000000000..829715877ef --- /dev/null +++ b/aio/content/examples/toh-3/plnkr.json @@ -0,0 +1,10 @@ +{ + "description": "Tour of Heroes: Part 3", + "basePath": "src/", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ], + "tags": ["tutorial", "tour", "heroes"] +} diff --git a/aio/content/examples/toh-3/src/app/app.component.ts b/aio/content/examples/toh-3/src/app/app.component.ts new file mode 100644 index 00000000000..3e242914aa1 --- /dev/null +++ b/aio/content/examples/toh-3/src/app/app.component.ts @@ -0,0 +1,95 @@ +// #docregion +import { Component } from '@angular/core'; + +// #docregion hero-import +import { Hero } from './hero'; +// #enddocregion hero-import + +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' } +]; + +@Component({ + selector: 'my-app', +// #docregion hero-detail-template + template: ` +

    {{title}}

    +

    My Heroes

    +
      +
    • + {{hero.id}} {{hero.name}} +
    • +
    + + `, +// #enddocregion hero-detail-template + 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; + } + `] +}) +export class AppComponent { + title = 'Tour of Heroes'; + heroes = HEROES; + selectedHero: Hero; + + onSelect(hero: Hero): void { + this.selectedHero = hero; + } +} diff --git a/aio/content/examples/toh-3/src/app/app.module.ts b/aio/content/examples/toh-3/src/app/app.module.ts new file mode 100644 index 00000000000..e04b8d304be --- /dev/null +++ b/aio/content/examples/toh-3/src/app/app.module.ts @@ -0,0 +1,24 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.component'; +// #docregion hero-detail-import +import { HeroDetailComponent } from './hero-detail.component'; +// #enddocregion hero-detail-import + +@NgModule({ + imports: [ + BrowserModule, + FormsModule + ], +// #docregion declarations + declarations: [ + AppComponent, + HeroDetailComponent + ], +// #enddocregion declarations + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/aio/content/examples/toh-3/src/app/hero-detail.component.ts b/aio/content/examples/toh-3/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..45a1a1e7e16 --- /dev/null +++ b/aio/content/examples/toh-3/src/app/hero-detail.component.ts @@ -0,0 +1,29 @@ +// #docregion +// #docregion import-input +import { Component, Input } from '@angular/core'; +// #enddocregion import-input + +import { Hero } from './hero'; +// #docregion template +@Component({ + selector: 'hero-detail', + template: ` +
    +

    {{hero.name}} details!

    +
    {{hero.id}}
    +
    + + +
    +
    + ` +}) +// #enddocregion template +// #docregion class +export class HeroDetailComponent { +// #docregion hero + @Input() hero: Hero; +// #enddocregion hero +} +// #enddocregion class + diff --git a/aio/content/examples/toh-3/ts/src/app/hero.ts b/aio/content/examples/toh-3/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-3/ts/src/app/hero.ts rename to aio/content/examples/toh-3/src/app/hero.ts diff --git a/aio/content/examples/toh-3/ts/src/index.html b/aio/content/examples/toh-3/src/index.html similarity index 100% rename from aio/content/examples/toh-3/ts/src/index.html rename to aio/content/examples/toh-3/src/index.html diff --git a/aio/content/examples/toh-3/ts/src/main.ts b/aio/content/examples/toh-3/src/main.ts similarity index 100% rename from aio/content/examples/toh-3/ts/src/main.ts rename to aio/content/examples/toh-3/src/main.ts diff --git a/aio/content/examples/toh-3/ts/plnkr.json b/aio/content/examples/toh-3/ts/plnkr.json deleted file mode 100644 index 086f8bd05cf..00000000000 --- a/aio/content/examples/toh-3/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Tour of Heroes: Part 3", - "basePath": "src/", - "files":[ - "!**/*.d.ts", - "!**/*.js" - ], - "tags": ["tutorial", "tour", "heroes"] -} diff --git a/aio/content/examples/toh-3/ts/plnkr.no-link.html b/aio/content/examples/toh-3/ts/plnkr.no-link.html deleted file mode 100644 index 766bb4578e8..00000000000 --- a/aio/content/examples/toh-3/ts/plnkr.no-link.html +++ /dev/null @@ -1,318 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/toh-3/ts/src/app/app.component.ts b/aio/content/examples/toh-3/ts/src/app/app.component.ts deleted file mode 100644 index 022efc31ebd..00000000000 --- a/aio/content/examples/toh-3/ts/src/app/app.component.ts +++ /dev/null @@ -1,95 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -// #docregion hero-import -import { Hero } from './hero'; -// #enddocregion hero-import - -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' } -]; - -@Component({ - selector: 'my-app', -// #docregion hero-detail-template - template: ` -

    {{title}}

    -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
    • -
    - - `, -// #enddocregion hero-detail-template - 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; - } - `] -}) -export class AppComponent { - title = 'Tour of Heroes'; - heroes = HEROES; - selectedHero: Hero; - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } -} diff --git a/aio/content/examples/toh-3/ts/src/app/app.module.ts b/aio/content/examples/toh-3/ts/src/app/app.module.ts deleted file mode 100644 index 26b63938ad6..00000000000 --- a/aio/content/examples/toh-3/ts/src/app/app.module.ts +++ /dev/null @@ -1,24 +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 hero-detail-import -import { HeroDetailComponent } from './hero-detail.component'; -// #enddocregion hero-detail-import - -// #docregion declarations -@NgModule({ - imports: [ - BrowserModule, - FormsModule - ], - declarations: [ - AppComponent, - HeroDetailComponent - ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -// #enddocregion declarations diff --git a/aio/content/examples/toh-3/ts/src/app/hero-detail.component.ts b/aio/content/examples/toh-3/ts/src/app/hero-detail.component.ts deleted file mode 100644 index a2f1942904e..00000000000 --- a/aio/content/examples/toh-3/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -// #docplaster -// #docregion -// #docregion v1 -import { Component, Input } from '@angular/core'; - -// #enddocregion v1 -// #docregion hero-import -import { Hero } from './hero'; -// #enddocregion hero-import - -// #docregion v1 -@Component({ - selector: 'my-hero-detail', -// #enddocregion v1 - // #docregion template - template: ` -
    -

    {{hero.name}} details!

    -
    {{hero.id}}
    -
    - - -
    -
    - ` - // #enddocregion template -// #docregion v1 -}) -export class HeroDetailComponent { -// #enddocregion v1 -// #docregion hero-input - @Input() -// #docregion hero - hero: Hero; -// #enddocregion hero -// #enddocregion hero-input -// #docregion v1 -} -// #enddocregion v1 diff --git a/aio/content/examples/toh-4/e2e-spec.ts b/aio/content/examples/toh-4/e2e-spec.ts index 2307ba17c93..d6a223dd127 100644 --- a/aio/content/examples/toh-4/e2e-spec.ts +++ b/aio/content/examples/toh-4/e2e-spec.ts @@ -128,6 +128,6 @@ function getPageElts() { return { heroes: element.all(by.css('my-app li')), selected: element(by.css('my-app li.selected')), - heroDetail: element(by.css('my-app > div, my-app > my-hero-detail > div')) + heroDetail: element(by.css('my-app > div, my-app > hero-detail > div')) }; } diff --git a/aio/content/examples/toh-3/ts/example-config.json b/aio/content/examples/toh-4/example-config.json similarity index 100% rename from aio/content/examples/toh-3/ts/example-config.json rename to aio/content/examples/toh-4/example-config.json diff --git a/aio/content/examples/toh-4/ts/plnkr.json b/aio/content/examples/toh-4/plnkr.json similarity index 100% rename from aio/content/examples/toh-4/ts/plnkr.json rename to aio/content/examples/toh-4/plnkr.json diff --git a/aio/content/examples/toh-4/src/app/app.component.1.ts b/aio/content/examples/toh-4/src/app/app.component.1.ts new file mode 100644 index 00000000000..cfddbab5375 --- /dev/null +++ b/aio/content/examples/toh-4/src/app/app.component.1.ts @@ -0,0 +1,65 @@ +// #docplaster +// #docregion on-init +import { OnInit } from '@angular/core'; + +// #enddocregion on-init +import { Component } from '@angular/core'; + +import { Hero } from './hero'; +// #docregion hero-service-import +import { HeroService } from './hero.service.2'; +// #enddocregion hero-service-import + +// Testable but never shown +@Component({ + selector: 'my-app', + template: ` +
    + {{hero.name}} +
    + + `, + // #docregion providers + providers: [HeroService] + // #enddocregion providers +}) +// #docregion on-init +export class AppComponent implements OnInit { + // #enddocregion on-init + title = 'Tour of Heroes'; + // #docregion heroes-prop + heroes: Hero[]; + // #enddocregion heroes-prop + selectedHero: Hero; + + /* + // #docregion new-service + heroService = new HeroService(); // don't do this + // #enddocregion new-service + */ + // #docregion ctor + constructor(private heroService: HeroService) { } + // #enddocregion ctor + // #docregion getHeroes + getHeroes(): void { + // #docregion get-heroes + this.heroes = this.heroService.getHeroes(); + // #enddocregion get-heroes + } + // #enddocregion getHeroes + + // #docregion ng-on-init + // #docregion on-init + ngOnInit(): void { + // #enddocregion on-init + this.getHeroes(); + // #docregion on-init + } + // #enddocregion on-init + // #enddocregion ng-on-init + + onSelect(hero: Hero): void { + this.selectedHero = hero; + } + // #docregion on-init +} diff --git a/aio/content/examples/toh-4/src/app/app.component.ts b/aio/content/examples/toh-4/src/app/app.component.ts new file mode 100644 index 00000000000..0d57acb5b06 --- /dev/null +++ b/aio/content/examples/toh-4/src/app/app.component.ts @@ -0,0 +1,97 @@ +// #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: 'my-app', + // #docregion template + template: ` +

    {{title}}

    +

    My Heroes

    +
      +
    • + {{hero.id}} {{hero.name}} +
    • +
    + + `, + // #enddocregion template + 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; + } + `], + providers: [HeroService] +}) +export class AppComponent implements OnInit { + title = 'Tour of Heroes'; + heroes: Hero[]; + selectedHero: Hero; + + constructor(private heroService: HeroService) { } + +// #docregion get-heroes + getHeroes(): void { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } +// #enddocregion get-heroes + + ngOnInit(): void { + this.getHeroes(); + } + + onSelect(hero: Hero): void { + this.selectedHero = hero; + } +} diff --git a/aio/content/examples/toh-4/ts/src/app/app.module.ts b/aio/content/examples/toh-4/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/app.module.ts rename to aio/content/examples/toh-4/src/app/app.module.ts diff --git a/aio/content/examples/toh-4/src/app/hero-detail.component.ts b/aio/content/examples/toh-4/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..865fb98da74 --- /dev/null +++ b/aio/content/examples/toh-4/src/app/hero-detail.component.ts @@ -0,0 +1,22 @@ +// #docregion +import { Component, Input } from '@angular/core'; +import { Hero } from './hero'; + +@Component({ + selector: 'hero-detail', + template: ` +
    +

    {{hero.name}} details!

    +
    + {{hero.id}} +
    +
    + + +
    +
    + ` +}) +export class HeroDetailComponent { + @Input() hero: Hero; +} diff --git a/aio/content/examples/toh-4/ts/src/app/hero.service.1.ts b/aio/content/examples/toh-4/src/app/hero.service.1.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/hero.service.1.ts rename to aio/content/examples/toh-4/src/app/hero.service.1.ts diff --git a/aio/content/examples/toh-4/ts/src/app/hero.service.2.ts b/aio/content/examples/toh-4/src/app/hero.service.2.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/hero.service.2.ts rename to aio/content/examples/toh-4/src/app/hero.service.2.ts diff --git a/aio/content/examples/toh-4/ts/src/app/hero.service.ts b/aio/content/examples/toh-4/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/hero.service.ts rename to aio/content/examples/toh-4/src/app/hero.service.ts diff --git a/aio/content/examples/toh-4/ts/src/app/hero.ts b/aio/content/examples/toh-4/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/hero.ts rename to aio/content/examples/toh-4/src/app/hero.ts diff --git a/aio/content/examples/toh-4/ts/src/app/mock-heroes.ts b/aio/content/examples/toh-4/src/app/mock-heroes.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/app/mock-heroes.ts rename to aio/content/examples/toh-4/src/app/mock-heroes.ts diff --git a/aio/content/examples/toh-4/ts/src/index.html b/aio/content/examples/toh-4/src/index.html similarity index 100% rename from aio/content/examples/toh-4/ts/src/index.html rename to aio/content/examples/toh-4/src/index.html diff --git a/aio/content/examples/toh-4/ts/src/main.1.ts b/aio/content/examples/toh-4/src/main.1.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/main.1.ts rename to aio/content/examples/toh-4/src/main.1.ts diff --git a/aio/content/examples/toh-4/ts/src/main.ts b/aio/content/examples/toh-4/src/main.ts similarity index 100% rename from aio/content/examples/toh-4/ts/src/main.ts rename to aio/content/examples/toh-4/src/main.ts diff --git a/aio/content/examples/toh-4/ts/plnkr.no-link.html b/aio/content/examples/toh-4/ts/plnkr.no-link.html deleted file mode 100644 index 265b4fa6ced..00000000000 --- a/aio/content/examples/toh-4/ts/plnkr.no-link.html +++ /dev/null @@ -1,362 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/toh-4/ts/src/app/app.component.1.ts b/aio/content/examples/toh-4/ts/src/app/app.component.1.ts deleted file mode 100644 index 675c7a64d03..00000000000 --- a/aio/content/examples/toh-4/ts/src/app/app.component.1.ts +++ /dev/null @@ -1,65 +0,0 @@ -// #docplaster -// #docregion on-init -import { OnInit } from '@angular/core'; - -// #enddocregion on-init -import { Component } from '@angular/core'; - -import { Hero } from './hero'; -// #docregion hero-service-import -import { HeroService } from './hero.service.2'; -// #enddocregion hero-service-import - -// Testable but never shown -@Component({ - selector: 'my-app', - template: ` -
    - {{hero.name}} -
    - - `, - // #docregion providers - providers: [HeroService] - // #enddocregion providers -}) -// #docregion on-init -export class AppComponent implements OnInit { - // #enddocregion on-init - title = 'Tour of Heroes'; - // #docregion heroes-prop - heroes: Hero[]; - // #enddocregion heroes-prop - selectedHero: Hero; - - /* - // #docregion new-service - heroService = new HeroService(); // don't do this - // #enddocregion new-service - */ - // #docregion ctor - constructor(private heroService: HeroService) { } - // #enddocregion ctor - // #docregion getHeroes - getHeroes(): void { - // #docregion get-heroes - this.heroes = this.heroService.getHeroes(); - // #enddocregion get-heroes - } - // #enddocregion getHeroes - - // #docregion ng-on-init - // #docregion on-init - ngOnInit(): void { - // #enddocregion on-init - this.getHeroes(); - // #docregion on-init - } - // #enddocregion on-init - // #enddocregion ng-on-init - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } - // #docregion on-init -} diff --git a/aio/content/examples/toh-4/ts/src/app/app.component.ts b/aio/content/examples/toh-4/ts/src/app/app.component.ts deleted file mode 100644 index b16acb83752..00000000000 --- a/aio/content/examples/toh-4/ts/src/app/app.component.ts +++ /dev/null @@ -1,97 +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: 'my-app', - // #docregion template - template: ` -

    {{title}}

    -

    My Heroes

    -
      -
    • - {{hero.id}} {{hero.name}} -
    • -
    - - `, - // #enddocregion template - 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; - } - `], - providers: [HeroService] -}) -export class AppComponent implements OnInit { - title = 'Tour of Heroes'; - heroes: Hero[]; - selectedHero: Hero; - - constructor(private heroService: HeroService) { } - -// #docregion get-heroes - getHeroes(): void { - this.heroService.getHeroes().then(heroes => this.heroes = heroes); - } -// #enddocregion get-heroes - - ngOnInit(): void { - this.getHeroes(); - } - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } -} diff --git a/aio/content/examples/toh-4/ts/src/app/hero-detail.component.ts b/aio/content/examples/toh-4/ts/src/app/hero-detail.component.ts deleted file mode 100644 index b36b0ae36ca..00000000000 --- a/aio/content/examples/toh-4/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docregion -import { Component, Input } from '@angular/core'; -import { Hero } from './hero'; - -@Component({ - selector: 'my-hero-detail', - template: ` -
    -

    {{hero.name}} details!

    -
    - {{hero.id}} -
    -
    - - -
    -
    - ` -}) -export class HeroDetailComponent { - @Input() hero: Hero; -} diff --git a/aio/content/examples/toh-5/e2e-spec.ts b/aio/content/examples/toh-5/e2e-spec.ts index 9da4fc77653..a49f2ddb62c 100644 --- a/aio/content/examples/toh-5/e2e-spec.ts +++ b/aio/content/examples/toh-5/e2e-spec.ts @@ -57,7 +57,7 @@ describe('Tutorial part 5', () => { selectedHero: element(by.css('my-app li.selected')), selectedHeroSubview: element(by.css('my-app my-heroes > div')), - heroDetail: element(by.css('my-app my-hero-detail > div')) + heroDetail: element(by.css('my-app hero-detail > div')) }; } diff --git a/aio/content/examples/toh-4/ts/example-config.json b/aio/content/examples/toh-5/example-config.json similarity index 100% rename from aio/content/examples/toh-4/ts/example-config.json rename to aio/content/examples/toh-5/example-config.json diff --git a/aio/content/examples/toh-5/ts/plnkr.json b/aio/content/examples/toh-5/plnkr.json similarity index 100% rename from aio/content/examples/toh-5/ts/plnkr.json rename to aio/content/examples/toh-5/plnkr.json diff --git a/aio/content/examples/toh-5/ts/src/app/app-routing.module.ts b/aio/content/examples/toh-5/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app-routing.module.ts rename to aio/content/examples/toh-5/src/app/app-routing.module.ts diff --git a/aio/content/examples/toh-5/ts/src/app/app.component.1.ts b/aio/content/examples/toh-5/src/app/app.component.1.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.component.1.ts rename to aio/content/examples/toh-5/src/app/app.component.1.ts diff --git a/aio/content/examples/toh-5/ts/src/app/app.component.css b/aio/content/examples/toh-5/src/app/app.component.css similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.component.css rename to aio/content/examples/toh-5/src/app/app.component.css diff --git a/aio/content/examples/toh-5/src/app/app.component.ts b/aio/content/examples/toh-5/src/app/app.component.ts new file mode 100644 index 00000000000..96bc3fe6940 --- /dev/null +++ b/aio/content/examples/toh-5/src/app/app.component.ts @@ -0,0 +1,22 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + // #docregion template + template: ` +

    {{title}}

    + + + `, + // #enddocregion template + // #docregion styleUrls + styleUrls: ['./app.component.css'], + // #enddocregion styleUrls +}) +export class AppComponent { + title = 'Tour of Heroes'; +} diff --git a/aio/content/examples/toh-5/ts/src/app/app.module.1.ts b/aio/content/examples/toh-5/src/app/app.module.1.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.module.1.ts rename to aio/content/examples/toh-5/src/app/app.module.1.ts diff --git a/aio/content/examples/toh-5/ts/src/app/app.module.2.ts b/aio/content/examples/toh-5/src/app/app.module.2.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.module.2.ts rename to aio/content/examples/toh-5/src/app/app.module.2.ts diff --git a/aio/content/examples/toh-5/ts/src/app/app.module.3.ts b/aio/content/examples/toh-5/src/app/app.module.3.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.module.3.ts rename to aio/content/examples/toh-5/src/app/app.module.3.ts diff --git a/aio/content/examples/toh-5/ts/src/app/app.module.ts b/aio/content/examples/toh-5/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/app.module.ts rename to aio/content/examples/toh-5/src/app/app.module.ts diff --git a/aio/content/examples/toh-5/ts/src/app/dashboard.component.1.html b/aio/content/examples/toh-5/src/app/dashboard.component.1.html similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/dashboard.component.1.html rename to aio/content/examples/toh-5/src/app/dashboard.component.1.html diff --git a/aio/content/examples/toh-5/ts/src/app/dashboard.component.1.ts b/aio/content/examples/toh-5/src/app/dashboard.component.1.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/dashboard.component.1.ts rename to aio/content/examples/toh-5/src/app/dashboard.component.1.ts diff --git a/aio/content/examples/toh-5/ts/src/app/dashboard.component.css b/aio/content/examples/toh-5/src/app/dashboard.component.css similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/dashboard.component.css rename to aio/content/examples/toh-5/src/app/dashboard.component.css diff --git a/aio/content/examples/toh-5/ts/src/app/dashboard.component.html b/aio/content/examples/toh-5/src/app/dashboard.component.html similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/dashboard.component.html rename to aio/content/examples/toh-5/src/app/dashboard.component.html diff --git a/aio/content/examples/toh-5/src/app/dashboard.component.ts b/aio/content/examples/toh-5/src/app/dashboard.component.ts new file mode 100644 index 00000000000..416cf8868ee --- /dev/null +++ b/aio/content/examples/toh-5/src/app/dashboard.component.ts @@ -0,0 +1,33 @@ +// #docplaster +// #docregion , imports +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; +// #enddocregion imports + +// #docregion metadata +@Component({ + selector: 'my-dashboard', + templateUrl: './dashboard.component.html', + // #enddocregion metadata + // #docregion css + styleUrls: [ './dashboard.component.css' ] + // #enddocregion css + // #docregion metadata +}) +// #enddocregion metadata +// #docregion class +export class DashboardComponent implements OnInit { + + heroes: Hero[] = []; + + // #docregion ctor + constructor(private heroService: HeroService) { } + // #enddocregion ctor + + ngOnInit(): void { + this.heroService.getHeroes() + .then(heroes => this.heroes = heroes.slice(1, 5)); + } +} diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts b/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts new file mode 100644 index 00000000000..2f5081bdce0 --- /dev/null +++ b/aio/content/examples/toh-5/src/app/hero-detail.component.1.ts @@ -0,0 +1,29 @@ +// Imports in comments cause problems when the app is executed +// (some error about 'traceur' missing). Hence this separate file +// is solely for containing the transitory state of the imports. + +// #docregion added-imports +// Keep the Input import for now, you'll remove it later: +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; + +import { HeroService } from './hero.service'; +// #enddocregion added-imports + +// Bogus code below this point. It is only here to make lint happy. +import { Hero } from './hero'; + +@Component({}) +export class HeroDetailComponent implements OnInit { + @Input() hero: Hero; + bogus: Params; + + constructor( + private heroService: HeroService, + private route: ActivatedRoute, + private location: Location + ) {} + + ngOnInit() {} +} diff --git a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.css b/aio/content/examples/toh-5/src/app/hero-detail.component.css similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/hero-detail.component.css rename to aio/content/examples/toh-5/src/app/hero-detail.component.css diff --git a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.html b/aio/content/examples/toh-5/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/hero-detail.component.html rename to aio/content/examples/toh-5/src/app/hero-detail.component.html diff --git a/aio/content/examples/toh-5/src/app/hero-detail.component.ts b/aio/content/examples/toh-5/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..222b6705d7f --- /dev/null +++ b/aio/content/examples/toh-5/src/app/hero-detail.component.ts @@ -0,0 +1,46 @@ +// #docplaster +// #docregion , v2, rxjs-import +import 'rxjs/add/operator/switchMap'; +// #enddocregion rxjs-import +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; +// #docregion metadata +@Component({ + selector: 'hero-detail', + templateUrl: './hero-detail.component.html', + // #enddocregion metadata, v2 + styleUrls: [ './hero-detail.component.css' ] + // #docregion metadata, v2 +}) +// #enddocregion metadata +// #docregion implement +export class HeroDetailComponent implements OnInit { +// #enddocregion implement + hero: Hero; + + // #docregion ctor + constructor( + private heroService: HeroService, + private route: ActivatedRoute, + private location: Location + ) {} + // #enddocregion ctor + + // #docregion ngOnInit + ngOnInit(): void { + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); + } + // #enddocregion ngOnInit + + // #docregion goBack + goBack(): void { + this.location.back(); + } +// #enddocregion goBack +} diff --git a/aio/content/examples/toh-5/ts/src/app/hero.service.ts b/aio/content/examples/toh-5/src/app/hero.service.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/hero.service.ts rename to aio/content/examples/toh-5/src/app/hero.service.ts diff --git a/aio/content/examples/toh-5/ts/src/app/hero.ts b/aio/content/examples/toh-5/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/hero.ts rename to aio/content/examples/toh-5/src/app/hero.ts diff --git a/aio/content/examples/toh-5/src/app/heroes.component.css b/aio/content/examples/toh-5/src/app/heroes.component.css new file mode 100644 index 00000000000..b49fa0a4196 --- /dev/null +++ b/aio/content/examples/toh-5/src/app/heroes.component.css @@ -0,0 +1,60 @@ +/* #docregion */ +.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/aio/content/examples/toh-5/ts/src/app/heroes.component.html b/aio/content/examples/toh-5/src/app/heroes.component.html similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/heroes.component.html rename to aio/content/examples/toh-5/src/app/heroes.component.html diff --git a/aio/content/examples/toh-5/src/app/heroes.component.ts b/aio/content/examples/toh-5/src/app/heroes.component.ts new file mode 100644 index 00000000000..def615e6b92 --- /dev/null +++ b/aio/content/examples/toh-5/src/app/heroes.component.ts @@ -0,0 +1,46 @@ +// #docplaster +// #docregion +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +// #docregion renaming, metadata +@Component({ + selector: 'my-heroes', + // #enddocregion renaming + templateUrl: './heroes.component.html', + styleUrls: [ './heroes.component.css' ] + // #docregion renaming +}) +// #enddocregion metadata +// #docregion class +export class HeroesComponent implements OnInit { + // #enddocregion renaming + heroes: Hero[]; + selectedHero: Hero; + + constructor( + private router: Router, + private heroService: HeroService) { } + + getHeroes(): void { + this.heroService.getHeroes().then(heroes => this.heroes = heroes); + } + + ngOnInit(): void { + this.getHeroes(); + } + + onSelect(hero: Hero): void { + this.selectedHero = hero; + } + + // #docregion gotoDetail + gotoDetail(): void { + this.router.navigate(['/detail', this.selectedHero.id]); + } + // #enddocregion gotoDetail + // #docregion renaming +} diff --git a/aio/content/examples/toh-5/ts/src/app/mock-heroes.ts b/aio/content/examples/toh-5/src/app/mock-heroes.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/app/mock-heroes.ts rename to aio/content/examples/toh-5/src/app/mock-heroes.ts diff --git a/aio/content/examples/toh-5/ts/src/index.html b/aio/content/examples/toh-5/src/index.html similarity index 100% rename from aio/content/examples/toh-5/ts/src/index.html rename to aio/content/examples/toh-5/src/index.html diff --git a/aio/content/examples/toh-5/ts/src/main.ts b/aio/content/examples/toh-5/src/main.ts similarity index 100% rename from aio/content/examples/toh-5/ts/src/main.ts rename to aio/content/examples/toh-5/src/main.ts diff --git a/aio/content/examples/toh-5/ts/plnkr.no-link.html b/aio/content/examples/toh-5/ts/plnkr.no-link.html deleted file mode 100644 index 12a5e236300..00000000000 --- a/aio/content/examples/toh-5/ts/plnkr.no-link.html +++ /dev/null @@ -1,661 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/toh-5/ts/src/app/app.component.ts b/aio/content/examples/toh-5/ts/src/app/app.component.ts deleted file mode 100644 index c3f92ec46b0..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/app.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - // #docregion template - template: ` -

    {{title}}

    - - - `, - // #enddocregion template - // #docregion styleUrls - styleUrls: ['./app.component.css'], - // #enddocregion styleUrls -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/aio/content/examples/toh-5/ts/src/app/dashboard.component.ts b/aio/content/examples/toh-5/ts/src/app/dashboard.component.ts deleted file mode 100644 index eb026eb6beb..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/dashboard.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion , imports -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -// #enddocregion imports - -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'my-dashboard', - templateUrl: './dashboard.component.html', - // #enddocregion metadata - // #docregion css - styleUrls: [ './dashboard.component.css' ] - // #enddocregion css - // #docregion metadata -}) -// #enddocregion metadata -// #docregion class -export class DashboardComponent implements OnInit { - - heroes: Hero[] = []; - - // #docregion ctor - constructor(private heroService: HeroService) { } - // #enddocregion ctor - - ngOnInit(): void { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes.slice(1, 5)); - } -} diff --git a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.1.ts b/aio/content/examples/toh-5/ts/src/app/hero-detail.component.1.ts deleted file mode 100644 index 6713ce4dc77..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.1.ts +++ /dev/null @@ -1,29 +0,0 @@ -// Imports in comments cause problems when the app is executed -// (some error about 'traceur' missing). Hence this separate file -// is solely for containing the transitory state of the imports. - -// #docregion added-imports -// Keep the Input import for now, we'll remove it later: -import { Component, Input, OnInit } from '@angular/core'; -import { ActivatedRoute, Params } from '@angular/router'; -import { Location } from '@angular/common'; - -import { HeroService } from './hero.service'; -// #enddocregion added-imports - -// Bogus code below this point. It is only here to make lint happy. -import { Hero } from './hero'; - -@Component({}) -export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; - bogus: Params; - - constructor( - private heroService: HeroService, - private route: ActivatedRoute, - private location: Location - ) {} - - ngOnInit() {} -} diff --git a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.ts b/aio/content/examples/toh-5/ts/src/app/hero-detail.component.ts deleted file mode 100644 index 5b9bea89fac..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -// #docplaster -// #docregion , v2, rxjs-import -import 'rxjs/add/operator/switchMap'; -// #enddocregion rxjs-import -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Params } from '@angular/router'; -import { Location } from '@angular/common'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'my-hero-detail', - templateUrl: './hero-detail.component.html', - // #enddocregion metadata, v2 - styleUrls: [ './hero-detail.component.css' ] - // #docregion metadata, v2 -}) -// #enddocregion metadata -// #docregion implement -export class HeroDetailComponent implements OnInit { -// #enddocregion implement - hero: Hero; - - // #docregion ctor - constructor( - private heroService: HeroService, - private route: ActivatedRoute, - private location: Location - ) {} - // #enddocregion ctor - - // #docregion ngOnInit - ngOnInit(): void { - this.route.params - .switchMap((params: Params) => this.heroService.getHero(+params['id'])) - .subscribe(hero => this.hero = hero); - } - // #enddocregion ngOnInit - - // #docregion goBack - goBack(): void { - this.location.back(); - } -// #enddocregion goBack -} diff --git a/aio/content/examples/toh-5/ts/src/app/heroes.component.css b/aio/content/examples/toh-5/ts/src/app/heroes.component.css deleted file mode 100644 index 35e45af98d1..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/heroes.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/aio/content/examples/toh-5/ts/src/app/heroes.component.ts b/aio/content/examples/toh-5/ts/src/app/heroes.component.ts deleted file mode 100644 index ab6928adddd..00000000000 --- a/aio/content/examples/toh-5/ts/src/app/heroes.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -// #docregion renaming, metadata -@Component({ - // #enddocregion renaming - moduleId: module.id, - // #docregion renaming - selector: 'my-heroes', - // #enddocregion renaming - templateUrl: './heroes.component.html', - styleUrls: [ './heroes.component.css' ] - // #docregion renaming -}) -// #enddocregion metadata -// #docregion class -export class HeroesComponent implements OnInit { - // #enddocregion renaming - heroes: Hero[]; - selectedHero: Hero; - - constructor( - private router: Router, - private heroService: HeroService) { } - - getHeroes(): void { - this.heroService.getHeroes().then(heroes => this.heroes = heroes); - } - - ngOnInit(): void { - this.getHeroes(); - } - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } - - // #docregion gotoDetail - gotoDetail(): void { - this.router.navigate(['/detail', this.selectedHero.id]); - } - // #enddocregion gotoDetail - // #docregion renaming -} diff --git a/aio/content/examples/toh-6/ts/.gitignore b/aio/content/examples/toh-6/.gitignore similarity index 100% rename from aio/content/examples/toh-6/ts/.gitignore rename to aio/content/examples/toh-6/.gitignore diff --git a/aio/content/examples/toh-6/aot/index.html b/aio/content/examples/toh-6/aot/index.html new file mode 100644 index 00000000000..cb8ecc44610 --- /dev/null +++ b/aio/content/examples/toh-6/aot/index.html @@ -0,0 +1,19 @@ + + + + + + Angular Tour of Heroes + + + + + + + + + + Loading... + + + diff --git a/aio/content/examples/cli-quickstart/ts/src/styles.css b/aio/content/examples/toh-6/aot/styles.css similarity index 100% rename from aio/content/examples/cli-quickstart/ts/src/styles.css rename to aio/content/examples/toh-6/aot/styles.css diff --git a/aio/content/examples/toh-6/ts/bs-config.aot.json b/aio/content/examples/toh-6/bs-config.aot.json similarity index 100% rename from aio/content/examples/toh-6/ts/bs-config.aot.json rename to aio/content/examples/toh-6/bs-config.aot.json diff --git a/aio/content/examples/toh-6/e2e-spec.ts b/aio/content/examples/toh-6/e2e-spec.ts index c4a68aec522..80d96602638 100644 --- a/aio/content/examples/toh-6/e2e-spec.ts +++ b/aio/content/examples/toh-6/e2e-spec.ts @@ -63,7 +63,7 @@ describe('Tutorial part 6', () => { selectedHero: element(by.css('my-app li.selected')), selectedHeroSubview: element(by.css('my-app my-heroes > div:last-child')), - heroDetail: element(by.css('my-app my-hero-detail > div')), + heroDetail: element(by.css('my-app hero-detail > div')), searchBox: element(by.css('#search-box')), searchResults: element.all(by.css('.search-result')) diff --git a/aio/content/examples/toh-5/ts/example-config.json b/aio/content/examples/toh-6/example-config.json similarity index 100% rename from aio/content/examples/toh-5/ts/example-config.json rename to aio/content/examples/toh-6/example-config.json diff --git a/aio/content/examples/toh-6/ts/plnkr.json b/aio/content/examples/toh-6/plnkr.json similarity index 100% rename from aio/content/examples/toh-6/ts/plnkr.json rename to aio/content/examples/toh-6/plnkr.json diff --git a/aio/content/examples/toh-6/ts/rollup-config.js b/aio/content/examples/toh-6/rollup-config.js similarity index 100% rename from aio/content/examples/toh-6/ts/rollup-config.js rename to aio/content/examples/toh-6/rollup-config.js diff --git a/aio/content/examples/toh-6/ts/src/app/app-routing.module.ts b/aio/content/examples/toh-6/src/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/app-routing.module.ts rename to aio/content/examples/toh-6/src/app/app-routing.module.ts diff --git a/aio/content/examples/toh-6/ts/src/app/app.component.css b/aio/content/examples/toh-6/src/app/app.component.css similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/app.component.css rename to aio/content/examples/toh-6/src/app/app.component.css diff --git a/aio/content/examples/toh-6/src/app/app.component.ts b/aio/content/examples/toh-6/src/app/app.component.ts new file mode 100644 index 00000000000..a9fe05a9a81 --- /dev/null +++ b/aio/content/examples/toh-6/src/app/app.component.ts @@ -0,0 +1,19 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + template: ` +

    {{title}}

    + + + `, + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + title = 'Tour of Heroes'; +} diff --git a/aio/content/examples/toh-6/ts/src/app/app.module.ts b/aio/content/examples/toh-6/src/app/app.module.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/app.module.ts rename to aio/content/examples/toh-6/src/app/app.module.ts diff --git a/aio/content/examples/toh-6/ts/src/app/dashboard.component.css b/aio/content/examples/toh-6/src/app/dashboard.component.css similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/dashboard.component.css rename to aio/content/examples/toh-6/src/app/dashboard.component.css diff --git a/aio/content/examples/toh-6/ts/src/app/dashboard.component.html b/aio/content/examples/toh-6/src/app/dashboard.component.html similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/dashboard.component.html rename to aio/content/examples/toh-6/src/app/dashboard.component.html diff --git a/aio/content/examples/toh-6/src/app/dashboard.component.ts b/aio/content/examples/toh-6/src/app/dashboard.component.ts new file mode 100644 index 00000000000..9960aa77d47 --- /dev/null +++ b/aio/content/examples/toh-6/src/app/dashboard.component.ts @@ -0,0 +1,22 @@ +// #docregion , search +import { Component, OnInit } from '@angular/core'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'my-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: [ './dashboard.component.css' ] +}) +// #enddocregion search +export class DashboardComponent implements OnInit { + heroes: Hero[] = []; + + constructor(private heroService: HeroService) { } + + ngOnInit(): void { + this.heroService.getHeroes() + .then(heroes => this.heroes = heroes.slice(1, 5)); + } +} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-detail.component.css b/aio/content/examples/toh-6/src/app/hero-detail.component.css similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/hero-detail.component.css rename to aio/content/examples/toh-6/src/app/hero-detail.component.css diff --git a/aio/content/examples/toh-6/ts/src/app/hero-detail.component.html b/aio/content/examples/toh-6/src/app/hero-detail.component.html similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/hero-detail.component.html rename to aio/content/examples/toh-6/src/app/hero-detail.component.html diff --git a/aio/content/examples/toh-6/src/app/hero-detail.component.ts b/aio/content/examples/toh-6/src/app/hero-detail.component.ts new file mode 100644 index 00000000000..6224f10ac1c --- /dev/null +++ b/aio/content/examples/toh-6/src/app/hero-detail.component.ts @@ -0,0 +1,40 @@ +// #docregion +import 'rxjs/add/operator/switchMap'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Params } from '@angular/router'; +import { Location } from '@angular/common'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'hero-detail', + templateUrl: './hero-detail.component.html', + styleUrls: [ './hero-detail.component.css' ] +}) +export class HeroDetailComponent implements OnInit { + hero: Hero; + + constructor( + private heroService: HeroService, + private route: ActivatedRoute, + private location: Location + ) {} + + ngOnInit(): void { + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); + } + + // #docregion save + save(): void { + this.heroService.update(this.hero) + .then(() => this.goBack()); + } + // #enddocregion save + + goBack(): void { + this.location.back(); + } +} diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.css b/aio/content/examples/toh-6/src/app/hero-search.component.css new file mode 100644 index 00000000000..9bf8d134572 --- /dev/null +++ b/aio/content/examples/toh-6/src/app/hero-search.component.css @@ -0,0 +1,21 @@ +/* #docregion */ +.search-result{ + 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; +} + +.search-result:hover { + color: #eee; + background-color: #607D8B; +} + +#search-box{ + width: 200px; + height: 20px; +} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-search.component.html b/aio/content/examples/toh-6/src/app/hero-search.component.html similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/hero-search.component.html rename to aio/content/examples/toh-6/src/app/hero-search.component.html diff --git a/aio/content/examples/toh-6/src/app/hero-search.component.ts b/aio/content/examples/toh-6/src/app/hero-search.component.ts new file mode 100644 index 00000000000..8b2d32f06b6 --- /dev/null +++ b/aio/content/examples/toh-6/src/app/hero-search.component.ts @@ -0,0 +1,69 @@ +// #docplaster +// #docregion +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +// #docregion rxjs-imports +import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; + +// Observable class extensions +import 'rxjs/add/observable/of'; + +// Observable operators +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; +// #enddocregion rxjs-imports + +import { HeroSearchService } from './hero-search.service'; +import { Hero } from './hero'; + +@Component({ + selector: 'hero-search', + templateUrl: './hero-search.component.html', + styleUrls: [ './hero-search.component.css' ], + providers: [HeroSearchService] +}) +export class HeroSearchComponent implements OnInit { + // #docregion search + heroes: Observable; + // #enddocregion search + // #docregion searchTerms + private searchTerms = new Subject(); + // #enddocregion searchTerms + + constructor( + private heroSearchService: HeroSearchService, + private router: Router) {} + // #docregion searchTerms + + // Push a search term into the observable stream. + search(term: string): void { + this.searchTerms.next(term); + } + // #enddocregion searchTerms + // #docregion search + + ngOnInit(): void { + this.heroes = this.searchTerms + .debounceTime(300) // wait 300ms after each keystroke before considering the term + .distinctUntilChanged() // ignore if next search term is same as previous + .switchMap(term => term // switch to new observable each time the term changes + // return the http search observable + ? this.heroSearchService.search(term) + // or the observable of empty heroes if there was no search term + : Observable.of([])) + .catch(error => { + // TODO: add real error handling + console.log(error); + return Observable.of([]); + }); + } + // #enddocregion search + + gotoDetail(hero: Hero): void { + let link = ['/detail', hero.id]; + this.router.navigate(link); + } +} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-search.service.ts b/aio/content/examples/toh-6/src/app/hero-search.service.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/hero-search.service.ts rename to aio/content/examples/toh-6/src/app/hero-search.service.ts diff --git a/aio/content/examples/toh-6/src/app/hero.service.ts b/aio/content/examples/toh-6/src/app/hero.service.ts new file mode 100644 index 00000000000..29fe5c2e0ea --- /dev/null +++ b/aio/content/examples/toh-6/src/app/hero.service.ts @@ -0,0 +1,87 @@ +// #docplaster +// #docregion , imports +import { Injectable } from '@angular/core'; +import { Headers, Http } from '@angular/http'; + +// #docregion rxjs +import 'rxjs/add/operator/toPromise'; +// #enddocregion rxjs + +import { Hero } from './hero'; +// #enddocregion imports + +@Injectable() +export class HeroService { + + // #docregion update + private headers = new Headers({'Content-Type': 'application/json'}); + // #enddocregion update + // #docregion getHeroes + private heroesUrl = 'api/heroes'; // URL to web api + + constructor(private http: Http) { } + + getHeroes(): Promise { + return this.http.get(this.heroesUrl) + // #docregion to-promise + .toPromise() + // #enddocregion to-promise + // #docregion to-data + .then(response => response.json().data as Hero[]) + // #enddocregion to-data + // #docregion catch + .catch(this.handleError); + // #enddocregion catch + } + + // #enddocregion getHeroes + + // #docregion getHero + getHero(id: number): Promise { + const url = `${this.heroesUrl}/${id}`; + return this.http.get(url) + .toPromise() + .then(response => response.json().data as Hero) + .catch(this.handleError); + } + // #enddocregion getHero + + // #docregion delete + delete(id: number): Promise { + const url = `${this.heroesUrl}/${id}`; + return this.http.delete(url, {headers: this.headers}) + .toPromise() + .then(() => null) + .catch(this.handleError); + } + // #enddocregion delete + + // #docregion create + create(name: string): Promise { + return this.http + .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}) + .toPromise() + .then(res => res.json().data as Hero) + .catch(this.handleError); + } + // #enddocregion create + // #docregion update + + update(hero: Hero): Promise { + const url = `${this.heroesUrl}/${hero.id}`; + return this.http + .put(url, JSON.stringify(hero), {headers: this.headers}) + .toPromise() + .then(() => hero) + .catch(this.handleError); + } + // #enddocregion update + + // #docregion getHeroes, handleError + private handleError(error: any): Promise { + console.error('An error occurred', error); // for demo purposes only + return Promise.reject(error.message || error); + } + // #enddocregion getHeroes, handleError +} + diff --git a/aio/content/examples/toh-6/ts/src/app/hero.ts b/aio/content/examples/toh-6/src/app/hero.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/hero.ts rename to aio/content/examples/toh-6/src/app/hero.ts diff --git a/aio/content/examples/toh-6/ts/src/app/heroes.component.css b/aio/content/examples/toh-6/src/app/heroes.component.css similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/heroes.component.css rename to aio/content/examples/toh-6/src/app/heroes.component.css diff --git a/aio/content/examples/toh-6/ts/src/app/heroes.component.html b/aio/content/examples/toh-6/src/app/heroes.component.html similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/heroes.component.html rename to aio/content/examples/toh-6/src/app/heroes.component.html diff --git a/aio/content/examples/toh-6/src/app/heroes.component.ts b/aio/content/examples/toh-6/src/app/heroes.component.ts new file mode 100644 index 00000000000..6350b803c4a --- /dev/null +++ b/aio/content/examples/toh-6/src/app/heroes.component.ts @@ -0,0 +1,61 @@ +// #docregion +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Hero } from './hero'; +import { HeroService } from './hero.service'; + +@Component({ + selector: 'my-heroes', + templateUrl: './heroes.component.html', + styleUrls: [ './heroes.component.css' ] +}) +export class HeroesComponent implements OnInit { + heroes: Hero[]; + selectedHero: Hero; + + constructor( + private heroService: HeroService, + private router: Router) { } + + getHeroes(): void { + this.heroService + .getHeroes() + .then(heroes => this.heroes = heroes); + } + + // #docregion add + add(name: string): void { + name = name.trim(); + if (!name) { return; } + this.heroService.create(name) + .then(hero => { + this.heroes.push(hero); + this.selectedHero = null; + }); + } + // #enddocregion add + + // #docregion delete + delete(hero: Hero): void { + this.heroService + .delete(hero.id) + .then(() => { + this.heroes = this.heroes.filter(h => h !== hero); + if (this.selectedHero === hero) { this.selectedHero = null; } + }); + } + // #enddocregion delete + + ngOnInit(): void { + this.getHeroes(); + } + + onSelect(hero: Hero): void { + this.selectedHero = hero; + } + + gotoDetail(): void { + this.router.navigate(['/detail', this.selectedHero.id]); + } +} diff --git a/aio/content/examples/toh-6/ts/src/app/in-memory-data.service.ts b/aio/content/examples/toh-6/src/app/in-memory-data.service.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/app/in-memory-data.service.ts rename to aio/content/examples/toh-6/src/app/in-memory-data.service.ts diff --git a/aio/content/examples/toh-6/ts/src/index.html b/aio/content/examples/toh-6/src/index.html similarity index 100% rename from aio/content/examples/toh-6/ts/src/index.html rename to aio/content/examples/toh-6/src/index.html diff --git a/aio/content/examples/toh-6/ts/src/main-aot.ts b/aio/content/examples/toh-6/src/main-aot.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/main-aot.ts rename to aio/content/examples/toh-6/src/main-aot.ts diff --git a/aio/content/examples/toh-6/ts/src/main.ts b/aio/content/examples/toh-6/src/main.ts similarity index 100% rename from aio/content/examples/toh-6/ts/src/main.ts rename to aio/content/examples/toh-6/src/main.ts diff --git a/aio/content/examples/toh-6/src/tsconfig.1.json b/aio/content/examples/toh-6/src/tsconfig.1.json new file mode 100644 index 00000000000..fb3d43db909 --- /dev/null +++ b/aio/content/examples/toh-6/src/tsconfig.1.json @@ -0,0 +1,13 @@ +{ + "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/aio/content/examples/toh-6/ts/aot/index.html b/aio/content/examples/toh-6/ts/aot/index.html deleted file mode 100644 index 1a64ca8cac4..00000000000 --- a/aio/content/examples/toh-6/ts/aot/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - Angular Tour of Heroes - - - - - - - - - - - - - Loading... - - - diff --git a/aio/content/examples/toh-6/ts/aot/styles.css b/aio/content/examples/toh-6/ts/aot/styles.css deleted file mode 100644 index d81835d0cd3..00000000000 --- a/aio/content/examples/toh-6/ts/aot/styles.css +++ /dev/null @@ -1,116 +0,0 @@ -/* #docregion , quickstart, toh */ -/* Master 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; -} -/* #enddocregion quickstart */ -body, input[text], button { - color: #888; - font-family: Cambria, Georgia; -} -/* #enddocregion toh */ -a { - cursor: pointer; - cursor: hand; -} -button { - 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; -} - -/* Navigation link styles */ -nav a { - padding: 5px 10px; - text-decoration: none; - margin-right: 10px; - 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; -} - -/* 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: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; -} -/* #docregion toh */ -/* everywhere else */ -* { - font-family: Arial, Helvetica, sans-serif; -} diff --git a/aio/content/examples/toh-6/ts/plnkr.no-link.html b/aio/content/examples/toh-6/ts/plnkr.no-link.html deleted file mode 100644 index 0407009dc24..00000000000 --- a/aio/content/examples/toh-6/ts/plnkr.no-link.html +++ /dev/null @@ -1,883 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/toh-6/ts/src/app/app.component.ts b/aio/content/examples/toh-6/ts/src/app/app.component.ts deleted file mode 100644 index d8a85079859..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/app.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - template: ` -

    {{title}}

    - - - `, - styleUrls: ['./app.component.css'] -}) -export class AppComponent { - title = 'Tour of Heroes'; -} diff --git a/aio/content/examples/toh-6/ts/src/app/dashboard.component.ts b/aio/content/examples/toh-6/ts/src/app/dashboard.component.ts deleted file mode 100644 index 1eb93f9c011..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/dashboard.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -// #docregion , search -import { Component, OnInit } from '@angular/core'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'my-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: [ './dashboard.component.css' ] -}) -// #enddocregion search -export class DashboardComponent implements OnInit { - heroes: Hero[] = []; - - constructor(private heroService: HeroService) { } - - ngOnInit(): void { - this.heroService.getHeroes() - .then(heroes => this.heroes = heroes.slice(1, 5)); - } -} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-detail.component.ts b/aio/content/examples/toh-6/ts/src/app/hero-detail.component.ts deleted file mode 100644 index 3f1c7b72f97..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/hero-detail.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -// #docregion -import 'rxjs/add/operator/switchMap'; -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Params } from '@angular/router'; -import { Location } from '@angular/common'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'my-hero-detail', - templateUrl: './hero-detail.component.html', - styleUrls: [ './hero-detail.component.css' ] -}) -export class HeroDetailComponent implements OnInit { - hero: Hero; - - constructor( - private heroService: HeroService, - private route: ActivatedRoute, - private location: Location - ) {} - - ngOnInit(): void { - this.route.params - .switchMap((params: Params) => this.heroService.getHero(+params['id'])) - .subscribe(hero => this.hero = hero); - } - - // #docregion save - save(): void { - this.heroService.update(this.hero) - .then(() => this.goBack()); - } - // #enddocregion save - - goBack(): void { - this.location.back(); - } -} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-search.component.css b/aio/content/examples/toh-6/ts/src/app/hero-search.component.css deleted file mode 100644 index 741b3793569..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/hero-search.component.css +++ /dev/null @@ -1,16 +0,0 @@ -/* #docregion */ -.search-result{ - border-bottom: 1px solid gray; - border-left: 1px solid gray; - border-right: 1px solid gray; - width:195px; - height: 20px; - padding: 5px; - background-color: white; - cursor: pointer; -} - -#search-box{ - width: 200px; - height: 20px; -} diff --git a/aio/content/examples/toh-6/ts/src/app/hero-search.component.ts b/aio/content/examples/toh-6/ts/src/app/hero-search.component.ts deleted file mode 100644 index 949ef897db8..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/hero-search.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -// #docplaster -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -// #docregion rxjs-imports -import { Observable } from 'rxjs/Observable'; -import { Subject } from 'rxjs/Subject'; - -// Observable class extensions -import 'rxjs/add/observable/of'; - -// Observable operators -import 'rxjs/add/operator/catch'; -import 'rxjs/add/operator/debounceTime'; -import 'rxjs/add/operator/distinctUntilChanged'; -// #enddocregion rxjs-imports - -import { HeroSearchService } from './hero-search.service'; -import { Hero } from './hero'; - -@Component({ - moduleId: module.id, - selector: 'hero-search', - templateUrl: './hero-search.component.html', - styleUrls: [ './hero-search.component.css' ], - providers: [HeroSearchService] -}) -export class HeroSearchComponent implements OnInit { - // #docregion search - heroes: Observable; - // #enddocregion search - // #docregion searchTerms - private searchTerms = new Subject(); - // #enddocregion searchTerms - - constructor( - private heroSearchService: HeroSearchService, - private router: Router) {} - // #docregion searchTerms - - // Push a search term into the observable stream. - search(term: string): void { - this.searchTerms.next(term); - } - // #enddocregion searchTerms - // #docregion search - - ngOnInit(): void { - this.heroes = this.searchTerms - .debounceTime(300) // wait 300ms after each keystroke before considering the term - .distinctUntilChanged() // ignore if next search term is same as previous - .switchMap(term => term // switch to new observable each time the term changes - // return the http search observable - ? this.heroSearchService.search(term) - // or the observable of empty heroes if there was no search term - : Observable.of([])) - .catch(error => { - // TODO: add real error handling - console.log(error); - return Observable.of([]); - }); - } - // #enddocregion search - - gotoDetail(hero: Hero): void { - let link = ['/detail', hero.id]; - this.router.navigate(link); - } -} diff --git a/aio/content/examples/toh-6/ts/src/app/hero.service.ts b/aio/content/examples/toh-6/ts/src/app/hero.service.ts deleted file mode 100644 index 18af4761235..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/hero.service.ts +++ /dev/null @@ -1,87 +0,0 @@ -// #docplaster -// #docregion , imports -import { Injectable } from '@angular/core'; -import { Headers, Http } from '@angular/http'; - -// #docregion rxjs -import 'rxjs/add/operator/toPromise'; -// #enddocregion rxjs - -import { Hero } from './hero'; -// #enddocregion imports - -@Injectable() -export class HeroService { - - // #docregion update - private headers = new Headers({'Content-Type': 'application/json'}); - // #enddocregion update - // #docregion getHeroes - private heroesUrl = 'api/heroes'; // URL to web api - - constructor(private http: Http) { } - - getHeroes(): Promise { - return this.http.get(this.heroesUrl) - // #docregion to-promise - .toPromise() - // #enddocregion to-promise - // #docregion to-data - .then(response => response.json().data as Hero[]) - // #enddocregion to-data - // #docregion catch - .catch(this.handleError); - // #enddocregion catch - } - - // #enddocregion getHeroes - - // #docregion getHero - getHero(id: number): Promise { - const url = `${this.heroesUrl}/${id}`; - return this.http.get(url) - .toPromise() - .then(response => response.json().data as Hero) - .catch(this.handleError); - } - // #enddocregion getHero - - // #docregion delete - delete(id: number): Promise { - const url = `${this.heroesUrl}/${id}`; - return this.http.delete(url, {headers: this.headers}) - .toPromise() - .then(() => null) - .catch(this.handleError); - } - // #enddocregion delete - - // #docregion create - create(name: string): Promise { - return this.http - .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers}) - .toPromise() - .then(res => res.json().data) - .catch(this.handleError); - } - // #enddocregion create - // #docregion update - - update(hero: Hero): Promise { - const url = `${this.heroesUrl}/${hero.id}`; - return this.http - .put(url, JSON.stringify(hero), {headers: this.headers}) - .toPromise() - .then(() => hero) - .catch(this.handleError); - } - // #enddocregion update - - // #docregion getHeroes, handleError - private handleError(error: any): Promise { - console.error('An error occurred', error); // for demo purposes only - return Promise.reject(error.message || error); - } - // #enddocregion getHeroes, handleError -} - diff --git a/aio/content/examples/toh-6/ts/src/app/heroes.component.ts b/aio/content/examples/toh-6/ts/src/app/heroes.component.ts deleted file mode 100644 index 2a92adfaa82..00000000000 --- a/aio/content/examples/toh-6/ts/src/app/heroes.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -// #docregion -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; - -import { Hero } from './hero'; -import { HeroService } from './hero.service'; - -@Component({ - moduleId: module.id, - selector: 'my-heroes', - templateUrl: './heroes.component.html', - styleUrls: [ './heroes.component.css' ] -}) -export class HeroesComponent implements OnInit { - heroes: Hero[]; - selectedHero: Hero; - - constructor( - private heroService: HeroService, - private router: Router) { } - - getHeroes(): void { - this.heroService - .getHeroes() - .then(heroes => this.heroes = heroes); - } - - // #docregion add - add(name: string): void { - name = name.trim(); - if (!name) { return; } - this.heroService.create(name) - .then(hero => { - this.heroes.push(hero); - this.selectedHero = null; - }); - } - // #enddocregion add - - // #docregion delete - delete(hero: Hero): void { - this.heroService - .delete(hero.id) - .then(() => { - this.heroes = this.heroes.filter(h => h !== hero); - if (this.selectedHero === hero) { this.selectedHero = null; } - }); - } - // #enddocregion delete - - ngOnInit(): void { - this.getHeroes(); - } - - onSelect(hero: Hero): void { - this.selectedHero = hero; - } - - gotoDetail(): void { - this.router.navigate(['/detail', this.selectedHero.id]); - } -} diff --git a/aio/content/examples/toh-6/ts/src/tsconfig.1.json b/aio/content/examples/toh-6/ts/src/tsconfig.1.json deleted file mode 100644 index 05839ec2fff..00000000000 --- a/aio/content/examples/toh-6/ts/src/tsconfig.1.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ "es2015", "dom" ], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "../../../node_modules/@types/" - ] - }, - "compileOnSave": true, - "exclude": [ - "node_modules/*", - "**/*-aot.ts" - ] -} diff --git a/aio/content/examples/toh-6/ts/tsconfig-aot.json.annotated b/aio/content/examples/toh-6/ts/tsconfig-aot.json.annotated deleted file mode 100644 index d11a88c599e..00000000000 --- a/aio/content/examples/toh-6/ts/tsconfig-aot.json.annotated +++ /dev/null @@ -1,28 +0,0 @@ -// #docregion -{ - "compilerOptions": { - "target": "es5", - "module": "es2015", - "moduleResolution": "node", - "sourceMap": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": ["es2015", "dom"], - "noImplicitAny": true, - "suppressImplicitAnyIndexErrors": true, - "typeRoots": [ - "../../node_modules/@types/" - ] - }, - - "files": [ - "src/app/app.module.ts", - "src/main-aot.ts" - ], - - "angularCompilerOptions": { - "genDir": "aot", - "skipMetadataEmit" : true - } -} -// #enddocregion \ No newline at end of file diff --git a/aio/content/examples/toh-6/ts/tsconfig-aot.json b/aio/content/examples/toh-6/tsconfig-aot.json similarity index 100% rename from aio/content/examples/toh-6/ts/tsconfig-aot.json rename to aio/content/examples/toh-6/tsconfig-aot.json diff --git a/aio/content/examples/upgrade-module/ts/.gitignore b/aio/content/examples/upgrade-module/.gitignore similarity index 100% rename from aio/content/examples/upgrade-module/ts/.gitignore rename to aio/content/examples/upgrade-module/.gitignore diff --git a/aio/content/examples/toh-6/ts/example-config.json b/aio/content/examples/upgrade-module/example-config.json similarity index 100% rename from aio/content/examples/toh-6/ts/example-config.json rename to aio/content/examples/upgrade-module/example-config.json diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/app.module.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/heroes.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-providers/heroes.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-providers/heroes.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/app.module.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/app.module.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/container.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/container.component.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/container.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/a-to-ajs-transclusion/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-a-hybrid-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-a-hybrid-bootstrap/app.module.ts rename to aio/content/examples/upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-bootstrap/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-bootstrap/app.module.ts rename to aio/content/examples/upgrade-module/src/app/ajs-bootstrap/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-ng-app/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-ng-app/app.module.ts rename to aio/content/examples/upgrade-module/src/app/ajs-ng-app/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/app.module.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/main.controller.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-projection/main.controller.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/main.controller.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/ajs-upgraded-providers.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/app.module.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/heroes.service.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/ajs-to-a-providers/heroes.service.ts rename to aio/content/examples/upgrade-module/src/app/ajs-to-a-providers/heroes.service.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/divide-routes/app.component.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/divide-routes/app.component.ts rename to aio/content/examples/upgrade-module/src/app/divide-routes/app.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/divide-routes/app.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/divide-routes/app.module.ts rename to aio/content/examples/upgrade-module/src/app/divide-routes/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/divide-routes/hero.module.ts rename to aio/content/examples/upgrade-module/src/app/divide-routes/hero.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/divide-routes/main.ts b/aio/content/examples/upgrade-module/src/app/divide-routes/main.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/divide-routes/main.ts rename to aio/content/examples/upgrade-module/src/app/divide-routes/main.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/downgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/downgrade-io/app.module.ts rename to aio/content/examples/upgrade-module/src/app/downgrade-io/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/downgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/downgrade-io/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/downgrade-io/main.controller.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/downgrade-io/main.controller.ts rename to aio/content/examples/upgrade-module/src/app/downgrade-io/main.controller.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/downgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/downgrade-static/app.module.ts rename to aio/content/examples/upgrade-module/src/app/downgrade-static/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/downgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/downgrade-static/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/hero-detail.directive.ts b/aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/hero-detail.directive.ts rename to aio/content/examples/upgrade-module/src/app/hero-detail.directive.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/hero.ts b/aio/content/examples/upgrade-module/src/app/hero.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/hero.ts rename to aio/content/examples/upgrade-module/src/app/hero.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-io/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-io/app.module.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-io/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-io/container.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-io/container.component.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-io/container.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-io/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-static/app.module.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-static/app.module.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-static/app.module.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-static/container.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-static/container.component.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-static/container.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/upgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/upgrade-static/hero-detail.component.ts rename to aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts diff --git a/aio/content/examples/upgrade-module/ts/src/app/villain.ts b/aio/content/examples/upgrade-module/src/app/villain.ts similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/app/villain.ts rename to aio/content/examples/upgrade-module/src/app/villain.ts diff --git a/aio/content/examples/upgrade-module/ts/src/index-a-to-ajs-providers.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-a-to-ajs-providers.html rename to aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-a-to-ajs-transclusion.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-a-to-ajs-transclusion.html rename to aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-ajs-a-hybrid-bootstrap.html b/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-ajs-a-hybrid-bootstrap.html rename to aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-ajs-to-a-projection.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-ajs-to-a-projection.html rename to aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-ajs-to-a-providers.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-ajs-to-a-providers.html rename to aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-bootstrap.html b/aio/content/examples/upgrade-module/src/index-bootstrap.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-bootstrap.html rename to aio/content/examples/upgrade-module/src/index-bootstrap.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-divide-routes.html b/aio/content/examples/upgrade-module/src/index-divide-routes.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-divide-routes.html rename to aio/content/examples/upgrade-module/src/index-divide-routes.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-downgrade-io.html b/aio/content/examples/upgrade-module/src/index-downgrade-io.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-downgrade-io.html rename to aio/content/examples/upgrade-module/src/index-downgrade-io.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-downgrade-static.html b/aio/content/examples/upgrade-module/src/index-downgrade-static.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-downgrade-static.html rename to aio/content/examples/upgrade-module/src/index-downgrade-static.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-ng-app.html b/aio/content/examples/upgrade-module/src/index-ng-app.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-ng-app.html rename to aio/content/examples/upgrade-module/src/index-ng-app.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-upgrade-io.html b/aio/content/examples/upgrade-module/src/index-upgrade-io.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-upgrade-io.html rename to aio/content/examples/upgrade-module/src/index-upgrade-io.html diff --git a/aio/content/examples/upgrade-module/ts/src/index-upgrade-static.html b/aio/content/examples/upgrade-module/src/index-upgrade-static.html similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/index-upgrade-static.html rename to aio/content/examples/upgrade-module/src/index-upgrade-static.html diff --git a/aio/content/examples/upgrade-module/ts/src/systemjs.config.1.js b/aio/content/examples/upgrade-module/src/systemjs.config.1.js similarity index 100% rename from aio/content/examples/upgrade-module/ts/src/systemjs.config.1.js rename to aio/content/examples/upgrade-module/src/systemjs.config.1.js diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/.gitignore b/aio/content/examples/upgrade-phonecat-1-typescript/.gitignore similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/.gitignore rename to aio/content/examples/upgrade-phonecat-1-typescript/.gitignore diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.animations.css b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.animations.css rename to aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.css diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.animations.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/app.animations.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.config.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.config.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/app.config.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.css b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.css rename to aio/content/examples/upgrade-phonecat-1-typescript/app/app.css diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/app.module.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/app.module.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.spec.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/checkmark/checkmark.filter.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/core.module.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/core.module.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.module.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.module.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.service.spec.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/core/phone/phone.service.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/core/phone/phone.service.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/.gitkeep similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/.gitkeep rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/.gitkeep diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.0.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.1.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.2.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.3.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/dell-streak-7.4.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/dell-streak-7.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.1.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.2.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-atrix-4g.3.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.0.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.1.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/motorola-xoom.2.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/motorola-xoom.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.0.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.1.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.2.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/img/phones/nexus-s.3.jpg rename to aio/content/examples/upgrade-phonecat-1-typescript/app/img/phones/nexus-s.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/index.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/index.html rename to aio/content/examples/upgrade-phonecat-1-typescript/app/index.html diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.spec.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.module.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.module.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.template.html rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.component.spec.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.component.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.component.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.module.ts rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.module.ts diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phone-list/phone-list.template.html rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phone-list/phone-list.template.html diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/dell-streak-7.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/dell-streak-7.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-atrix-4g.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-atrix-4g.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-xoom-with-wi-fi.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom-with-wi-fi.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/motorola-xoom.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/motorola-xoom.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/nexus-s.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/nexus-s.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/app/phones/phones.json rename to aio/content/examples/upgrade-phonecat-1-typescript/app/phones/phones.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/example-config.json b/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/example-config.json rename to aio/content/examples/upgrade-phonecat-1-typescript/example-config.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/karma.conf.ajs.js b/aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/karma.conf.ajs.js rename to aio/content/examples/upgrade-phonecat-1-typescript/karma.conf.ajs.js diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh rename to aio/content/examples/upgrade-phonecat-1-typescript/run-unit-tests.sh diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/tsconfig.ajs.json b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/tsconfig.ajs.json rename to aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.ajs.json diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/ts/tsconfig.json b/aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-1-typescript/ts/tsconfig.json rename to aio/content/examples/upgrade-phonecat-1-typescript/tsconfig.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/.gitignore b/aio/content/examples/upgrade-phonecat-2-hybrid/.gitignore similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/.gitignore rename to aio/content/examples/upgrade-phonecat-2-hybrid/.gitignore diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/aot/index.html b/aio/content/examples/upgrade-phonecat-2-hybrid/aot/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/aot/index.html rename to aio/content/examples/upgrade-phonecat-2-hybrid/aot/index.html diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/ajs-upgraded-providers.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/ajs-upgraded-providers.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.animations.css b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.animations.css rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.css diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.animations.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.animations.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.config.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.config.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.config.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.css b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.css rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.css diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ajs.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ajs.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/app.module.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/checkmark/checkmark.pipe.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/core.module.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/core.module.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.module.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.module.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/core/phone/phone.service.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/.gitkeep similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/.gitkeep rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/.gitkeep diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.1.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.2.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.3.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-streak-7.4.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-streak-7.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-venue.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/dell-venue.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/dell-venue.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-2-global-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/droid-2-global-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-2-global-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-pro-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/droid-pro-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/droid-pro-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/lg-axis.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/lg-axis.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/lg-axis.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.1.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.2.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-atrix-4g.3.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-bravo-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-bravo-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-charm-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-charm-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-defy-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-defy-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.1.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/motorola-xoom.2.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/motorola-xoom.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.1.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.2.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/nexus-s.3.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/nexus-s.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-galaxy-tab.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-galaxy-tab.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-galaxy-tab.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-gem.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-gem.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-gem.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-transform.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/samsung-transform.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/samsung-transform.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/sanyo-zio.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/sanyo-zio.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/sanyo-zio.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-g2.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/t-mobile-g2.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-g2.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-mytouch-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/img/phones/t-mobile-mytouch-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/main-aot.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/main.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/main.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ajs.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts new file mode 100644 index 00000000000..aa20ebb8013 --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts @@ -0,0 +1,41 @@ +// #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/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.module.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.module.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.template.html rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ajs.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ajs.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ajs.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts new file mode 100644 index 00000000000..1f51c6faa24 --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.component.ts @@ -0,0 +1,72 @@ +// #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/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.module.ts rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.module.ts diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.template.html rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-list/phone-list.template.html diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/dell-streak-7.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/dell-streak-7.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-atrix-4g.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-atrix-4g.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-xoom-with-wi-fi.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom-with-wi-fi.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/motorola-xoom.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/motorola-xoom.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/nexus-s.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/nexus-s.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phones/phones.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/app/phones/phones.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/bs-config.aot.json b/aio/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/bs-config.aot.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/bs-config.aot.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/copy-dist-files.js b/aio/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/copy-dist-files.js rename to aio/content/examples/upgrade-phonecat-2-hybrid/copy-dist-files.js diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/example-config.json b/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/example-config.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/index.html b/aio/content/examples/upgrade-phonecat-2-hybrid/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/index.html rename to aio/content/examples/upgrade-phonecat-2-hybrid/index.html diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js new file mode 100644 index 00000000000..19fcc89fe9d --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.1.js @@ -0,0 +1,89 @@ +// #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/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/aio/content/examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ajs.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ajs.js rename to aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.ajs.js diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/package.ajs.json b/aio/content/examples/upgrade-phonecat-2-hybrid/package.ajs.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/package.ajs.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/package.ajs.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js b/aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js rename to aio/content/examples/upgrade-phonecat-2-hybrid/rollup-config.js diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh rename to aio/content/examples/upgrade-phonecat-2-hybrid/run-unit-tests.sh diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/systemjs.config.1.js rename to aio/content/examples/upgrade-phonecat-2-hybrid/systemjs.config.1.js diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index e486ab3e6dc..00000000000 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,42 +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({ - moduleId: module.id, - 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/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts deleted file mode 100644 index bdd5930b79a..00000000000 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,73 +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({ - moduleId: module.id, - 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/aio/content/examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig-aot.json diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/ts/tsconfig.json b/aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-2-hybrid/ts/tsconfig.json rename to aio/content/examples/upgrade-phonecat-2-hybrid/tsconfig.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/.gitignore b/aio/content/examples/upgrade-phonecat-3-router/.gitignore similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/.gitignore rename to aio/content/examples/upgrade-phonecat-3-router/.gitignore diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/aot/index.html b/aio/content/examples/upgrade-phonecat-3-router/aot/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/aot/index.html rename to aio/content/examples/upgrade-phonecat-3-router/aot/index.html diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/ajs-upgraded-providers.ts b/aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/ajs-upgraded-providers.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/ajs-upgraded-providers.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app-routing.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app-routing.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.animations.css b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.animations.css rename to aio/content/examples/upgrade-phonecat-3-router/app/app.animations.css diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.animations.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.animations.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app.animations.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.component.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app.component.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.config.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.config.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app.config.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.css b/aio/content/examples/upgrade-phonecat-3-router/app/app.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.css rename to aio/content/examples/upgrade-phonecat-3-router/app/app.css diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.module.ajs.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.module.ajs.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app.module.ajs.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/app.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/app.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/app.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/checkmark/checkmark.pipe.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/checkmark/checkmark.pipe.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/core.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/core.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/core.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.spec.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/core/phone/phone.service.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/core/phone/phone.service.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/.gitkeep rename to aio/content/examples/upgrade-phonecat-3-router/app/img/.gitkeep diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.1.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.2.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.3.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-streak-7.4.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-streak-7.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/dell-venue.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/dell-venue.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-2-global-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-2-global-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/droid-pro-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/droid-pro-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/lg-axis.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/lg-axis.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.1.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.2.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-atrix-4g.3.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-bravo-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-charm-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-defy-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.1.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/motorola-xoom.2.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/motorola-xoom.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.1.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.2.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/nexus-s.3.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/nexus-s.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-galaxy-tab.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-galaxy-tab.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-gem.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-gem.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/samsung-transform.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/samsung-transform.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/sanyo-zio.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/sanyo-zio.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-g2.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-g2.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-3-router/app/img/phones/t-mobile-mytouch-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/main-aot.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/main-aot.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/main-aot.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/main.ts b/aio/content/examples/upgrade-phonecat-3-router/app/main.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/main.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/main.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.spec.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts new file mode 100644 index 00000000000..32a3d40790d --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.component.ts @@ -0,0 +1,33 @@ +// #docplaster +// #docregion +declare var angular: angular.IAngularStatic; +import { downgradeComponent } from '@angular/upgrade/static'; +import { Component } from '@angular/core'; + +import { Phone, PhoneData } from '../core/phone/phone.service'; +import { RouteParams } from '../ajs-upgraded-providers'; + +@Component({ + templateUrl: 'phone-detail.template.html', +}) +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; + } +} + +angular.module('phoneDetail') + .directive( + 'phoneDetail', + downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory + ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.template.html rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-detail/phone-detail.template.html diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.spec.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts new file mode 100644 index 00000000000..40f522bec84 --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.component.ts @@ -0,0 +1,60 @@ +// #docregion +declare var angular: angular.IAngularStatic; +import { downgradeComponent } from '@angular/upgrade/static'; + +import { Component } from '@angular/core'; +import { Phone, PhoneData } from '../core/phone/phone.service'; + +@Component({ + 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; + } +} + +angular.module('phoneList') + .directive( + 'phoneList', + downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory + ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.module.ts b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.module.ts rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.module.ts diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.template.html rename to aio/content/examples/upgrade-phonecat-3-router/app/phone-list/phone-list.template.html diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/dell-streak-7.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/dell-streak-7.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-atrix-4g.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-atrix-4g.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom-with-wi-fi.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom-with-wi-fi.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/motorola-xoom.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/motorola-xoom.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/nexus-s.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/nexus-s.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/app/phones/phones.json rename to aio/content/examples/upgrade-phonecat-3-router/app/phones/phones.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/bs-config.aot.json b/aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/bs-config.aot.json rename to aio/content/examples/upgrade-phonecat-3-router/bs-config.aot.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/copy-dist-files.js b/aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/copy-dist-files.js rename to aio/content/examples/upgrade-phonecat-3-router/copy-dist-files.js diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/example-config.json b/aio/content/examples/upgrade-phonecat-3-router/example-config.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/example-config.json rename to aio/content/examples/upgrade-phonecat-3-router/example-config.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/index.html b/aio/content/examples/upgrade-phonecat-3-router/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/index.html rename to aio/content/examples/upgrade-phonecat-3-router/index.html diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/rollup-config.js b/aio/content/examples/upgrade-phonecat-3-router/rollup-config.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/rollup-config.js rename to aio/content/examples/upgrade-phonecat-3-router/rollup-config.js diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/systemjs.config.1.js rename to aio/content/examples/upgrade-phonecat-3-router/systemjs.config.1.js diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/aot/bs-config.json b/aio/content/examples/upgrade-phonecat-3-router/ts/aot/bs-config.json deleted file mode 100644 index 7c85d6eddd2..00000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/ts/aot/bs-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "port": 8000, - "files": ["./aot/**/*.{html,htm,css,js}"], - "server": { "baseDir": "./aot" } -} diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index 048a4104c8f..00000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,34 +0,0 @@ -// #docplaster -// #docregion -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; -import { Component } from '@angular/core'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; -import { RouteParams } from '../ajs-upgraded-providers'; - -@Component({ - moduleId: module.id, - templateUrl: 'phone-detail.template.html', -}) -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; - } -} - -angular.module('phoneDetail') - .directive( - 'phoneDetail', - downgradeComponent({component: PhoneDetailComponent}) as angular.IDirectiveFactory - ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts deleted file mode 100644 index d198774debd..00000000000 --- a/aio/content/examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -// #docregion -declare var angular: angular.IAngularStatic; -import { downgradeComponent } from '@angular/upgrade/static'; - -import { Component } from '@angular/core'; -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - moduleId: module.id, - 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; - } -} - -angular.module('phoneList') - .directive( - 'phoneList', - downgradeComponent({component: PhoneListComponent}) as angular.IDirectiveFactory - ); diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/tsconfig-aot.json b/aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/tsconfig-aot.json rename to aio/content/examples/upgrade-phonecat-3-router/tsconfig-aot.json diff --git a/aio/content/examples/upgrade-phonecat-3-router/ts/tsconfig.json b/aio/content/examples/upgrade-phonecat-3-router/tsconfig.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-3-router/ts/tsconfig.json rename to aio/content/examples/upgrade-phonecat-3-router/tsconfig.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/app-routing.module.ts b/aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/app-routing.module.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/app-routing.module.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/app.component.ts b/aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/app.component.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/app.component.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/app.css b/aio/content/examples/upgrade-phonecat-4-final/app/app.css similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/app.css rename to aio/content/examples/upgrade-phonecat-4-final/app/app.css diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/app.module.ts b/aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/app.module.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/app.module.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.spec.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/core/checkmark/checkmark.pipe.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/core/checkmark/checkmark.pipe.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.spec.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.ts b/aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/core/phone/phone.service.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/core/phone/phone.service.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/.gitkeep b/aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/.gitkeep rename to aio/content/examples/upgrade-phonecat-4-final/app/img/.gitkeep diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.1.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.2.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.3.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-streak-7.4.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-streak-7.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-venue.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/dell-venue.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/dell-venue.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-2-global-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-2-global-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/droid-pro-by-motorola.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/droid-pro-by-motorola.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/lg-axis.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/lg-axis.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/lg-axis.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.1.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.2.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-atrix-4g.3.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-atrix-4g.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-bravo-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-bravo-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-charm-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-charm-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-defy-with-motoblur.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-defy-with-motoblur.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.1.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.2.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.3.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.4.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.4.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom-with-wi-fi.5.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom-with-wi-fi.5.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.1.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/motorola-xoom.2.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/motorola-xoom.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.1.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.1.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.1.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.2.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.2.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.2.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.3.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/nexus-s.3.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/nexus-s.3.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-galaxy-tab.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-galaxy-tab.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-gem.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-gem.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-gem.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-transform.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/samsung-transform.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/samsung-transform.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/sanyo-zio.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/sanyo-zio.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/sanyo-zio.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-g2.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-g2.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-g2.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg b/aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/img/phones/t-mobile-mytouch-4g.0.jpg rename to aio/content/examples/upgrade-phonecat-4-final/app/img/phones/t-mobile-mytouch-4g.0.jpg diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/main.ts b/aio/content/examples/upgrade-phonecat-4-final/app/main.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/main.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/main.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.spec.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts new file mode 100644 index 00000000000..dd47f746f66 --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.component.ts @@ -0,0 +1,27 @@ +// #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.params['phoneId']) + .subscribe((p: PhoneData) => { + this.phone = p; + this.setImage(p.images[0]); + }); + } + + setImage(imageUrl: string) { + this.mainImageUrl = imageUrl; + } +} diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.template.html rename to aio/content/examples/upgrade-phonecat-4-final/app/phone-detail/phone-detail.template.html diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.spec.ts rename to aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.spec.ts diff --git a/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts new file mode 100644 index 00000000000..6cfd172027c --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.component.ts @@ -0,0 +1,53 @@ +// #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/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.template.html b/aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.template.html rename to aio/content/examples/upgrade-phonecat-4-final/app/phone-list/phone-list.template.html diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/dell-streak-7.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/dell-streak-7.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/dell-streak-7.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-atrix-4g.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-atrix-4g.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-atrix-4g.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom-with-wi-fi.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom-with-wi-fi.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom-with-wi-fi.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/motorola-xoom.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/motorola-xoom.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/nexus-s.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/nexus-s.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/nexus-s.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/phones.json b/aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/app/phones/phones.json rename to aio/content/examples/upgrade-phonecat-4-final/app/phones/phones.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/example-config.json b/aio/content/examples/upgrade-phonecat-4-final/example-config.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/example-config.json rename to aio/content/examples/upgrade-phonecat-4-final/example-config.json diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/index.html b/aio/content/examples/upgrade-phonecat-4-final/index.html similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/index.html rename to aio/content/examples/upgrade-phonecat-4-final/index.html diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/run-unit-tests.sh b/aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/run-unit-tests.sh rename to aio/content/examples/upgrade-phonecat-4-final/run-unit-tests.sh diff --git a/aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js b/aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js new file mode 100644 index 00000000000..c48bb7ca39d --- /dev/null +++ b/aio/content/examples/upgrade-phonecat-4-final/systemjs.config.1.js @@ -0,0 +1,55 @@ +/** + * 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' + } + } + }, + rxjs: { + defaultExtension: 'js' + }, + 'angular-in-memory-web-api': { + main: './index.js', + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts b/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts deleted file mode 100644 index 579dd5601e3..00000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// #docplaster -// #docregion -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - moduleId: module.id, - selector: 'phone-detail', - templateUrl: './phone-detail.template.html' -}) -export class PhoneDetailComponent { - phone: PhoneData; - mainImageUrl: string; - - constructor(activatedRoute: ActivatedRoute, phone: Phone) { - phone.get(activatedRoute.snapshot.params['phoneId']) - .subscribe((p: PhoneData) => { - this.phone = p; - this.setImage(p.images[0]); - }); - } - - setImage(imageUrl: string) { - this.mainImageUrl = imageUrl; - } -} diff --git a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts b/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts deleted file mode 100644 index 0d9eb07e21b..00000000000 --- a/aio/content/examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import { Phone, PhoneData } from '../core/phone/phone.service'; - -@Component({ - moduleId: module.id, - 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/aio/content/examples/upgrade-phonecat-4-final/ts/tsconfig.json b/aio/content/examples/upgrade-phonecat-4-final/tsconfig.json similarity index 100% rename from aio/content/examples/upgrade-phonecat-4-final/ts/tsconfig.json rename to aio/content/examples/upgrade-phonecat-4-final/tsconfig.json diff --git a/aio/content/examples/upgrade-module/ts/example-config.json b/aio/content/examples/user-input/example-config.json similarity index 100% rename from aio/content/examples/upgrade-module/ts/example-config.json rename to aio/content/examples/user-input/example-config.json diff --git a/aio/content/examples/user-input/ts/plnkr.json b/aio/content/examples/user-input/plnkr.json similarity index 100% rename from aio/content/examples/user-input/ts/plnkr.json rename to aio/content/examples/user-input/plnkr.json diff --git a/aio/content/examples/user-input/ts/src/app/app.component.html b/aio/content/examples/user-input/src/app/app.component.html similarity index 100% rename from aio/content/examples/user-input/ts/src/app/app.component.html rename to aio/content/examples/user-input/src/app/app.component.html diff --git a/aio/content/examples/user-input/src/app/app.component.ts b/aio/content/examples/user-input/src/app/app.component.ts new file mode 100644 index 00000000000..5f885d5105b --- /dev/null +++ b/aio/content/examples/user-input/src/app/app.component.ts @@ -0,0 +1,8 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html' +}) +export class AppComponent { } diff --git a/aio/content/examples/user-input/ts/src/app/app.module.ts b/aio/content/examples/user-input/src/app/app.module.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/app.module.ts rename to aio/content/examples/user-input/src/app/app.module.ts diff --git a/aio/content/examples/user-input/ts/src/app/click-me.component.ts b/aio/content/examples/user-input/src/app/click-me.component.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/click-me.component.ts rename to aio/content/examples/user-input/src/app/click-me.component.ts diff --git a/aio/content/examples/user-input/ts/src/app/click-me2.component.ts b/aio/content/examples/user-input/src/app/click-me2.component.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/click-me2.component.ts rename to aio/content/examples/user-input/src/app/click-me2.component.ts diff --git a/aio/content/examples/user-input/ts/src/app/keyup.components.ts b/aio/content/examples/user-input/src/app/keyup.components.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/keyup.components.ts rename to aio/content/examples/user-input/src/app/keyup.components.ts diff --git a/aio/content/examples/user-input/ts/src/app/little-tour.component.ts b/aio/content/examples/user-input/src/app/little-tour.component.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/little-tour.component.ts rename to aio/content/examples/user-input/src/app/little-tour.component.ts diff --git a/aio/content/examples/user-input/ts/src/app/loop-back.component.ts b/aio/content/examples/user-input/src/app/loop-back.component.ts similarity index 100% rename from aio/content/examples/user-input/ts/src/app/loop-back.component.ts rename to aio/content/examples/user-input/src/app/loop-back.component.ts diff --git a/aio/content/examples/user-input/ts/src/index.html b/aio/content/examples/user-input/src/index.html similarity index 100% rename from aio/content/examples/user-input/ts/src/index.html rename to aio/content/examples/user-input/src/index.html diff --git a/aio/content/examples/template-syntax/ts/src/main.ts b/aio/content/examples/user-input/src/main.ts similarity index 100% rename from aio/content/examples/template-syntax/ts/src/main.ts rename to aio/content/examples/user-input/src/main.ts diff --git a/aio/content/examples/user-input/ts/src/user-input-styles.css b/aio/content/examples/user-input/src/user-input-styles.css similarity index 100% rename from aio/content/examples/user-input/ts/src/user-input-styles.css rename to aio/content/examples/user-input/src/user-input-styles.css diff --git a/aio/content/examples/user-input/ts/example-config.json b/aio/content/examples/user-input/ts/example-config.json deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/aio/content/examples/user-input/ts/plnkr.no-link.html b/aio/content/examples/user-input/ts/plnkr.no-link.html deleted file mode 100644 index d3d8c0aa269..00000000000 --- a/aio/content/examples/user-input/ts/plnkr.no-link.html +++ /dev/null @@ -1,433 +0,0 @@ -
    \ No newline at end of file diff --git a/aio/content/examples/user-input/ts/src/app/app.component.ts b/aio/content/examples/user-input/ts/src/app/app.component.ts deleted file mode 100644 index 56906ef0487..00000000000 --- a/aio/content/examples/user-input/ts/src/app/app.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'my-app', - templateUrl: './app.component.html' -}) -export class AppComponent { } diff --git a/aio/content/examples/user-input/ts/src/main.ts b/aio/content/examples/user-input/ts/src/main.ts deleted file mode 100644 index 311c44b76de..00000000000 --- a/aio/content/examples/user-input/ts/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/aio/content/examples/webpack/ts/.gitignore b/aio/content/examples/webpack/.gitignore similarity index 100% rename from aio/content/examples/webpack/ts/.gitignore rename to aio/content/examples/webpack/.gitignore diff --git a/aio/content/examples/webpack/ts/config/helpers.js b/aio/content/examples/webpack/config/helpers.js similarity index 100% rename from aio/content/examples/webpack/ts/config/helpers.js rename to aio/content/examples/webpack/config/helpers.js diff --git a/aio/content/examples/webpack/ts/config/karma-test-shim.js b/aio/content/examples/webpack/config/karma-test-shim.js similarity index 100% rename from aio/content/examples/webpack/ts/config/karma-test-shim.js rename to aio/content/examples/webpack/config/karma-test-shim.js diff --git a/aio/content/examples/webpack/config/karma.conf.js b/aio/content/examples/webpack/config/karma.conf.js new file mode 100644 index 00000000000..7bbb4617db5 --- /dev/null +++ b/aio/content/examples/webpack/config/karma.conf.js @@ -0,0 +1,39 @@ +// #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: ['kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: false, + browsers: ['Chrome'], + singleRun: true + }; + + config.set(_config); +}; +// #enddocregion diff --git a/aio/content/examples/webpack/config/webpack.common.js b/aio/content/examples/webpack/config/webpack.common.js new file mode 100644 index 00000000000..be01ad56034 --- /dev/null +++ b/aio/content/examples/webpack/config/webpack.common.js @@ -0,0 +1,81 @@ +// #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(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + 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/aio/content/examples/webpack/ts/config/webpack.dev.js b/aio/content/examples/webpack/config/webpack.dev.js similarity index 100% rename from aio/content/examples/webpack/ts/config/webpack.dev.js rename to aio/content/examples/webpack/config/webpack.dev.js diff --git a/aio/content/examples/webpack/ts/config/webpack.prod.js b/aio/content/examples/webpack/config/webpack.prod.js similarity index 100% rename from aio/content/examples/webpack/ts/config/webpack.prod.js rename to aio/content/examples/webpack/config/webpack.prod.js diff --git a/aio/content/examples/webpack/config/webpack.test.js b/aio/content/examples/webpack/config/webpack.test.js new file mode 100644 index 00000000000..e668504c67a --- /dev/null +++ b/aio/content/examples/webpack/config/webpack.test.js @@ -0,0 +1,55 @@ +// #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(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + helpers.root('./src'), // location of your src + {} // a map of your routes + ) + ] +} + +// #enddocregion diff --git a/aio/content/examples/webpack/ts/example-config.json b/aio/content/examples/webpack/example-config.json similarity index 100% rename from aio/content/examples/webpack/ts/example-config.json rename to aio/content/examples/webpack/example-config.json diff --git a/aio/content/examples/webpack/ts/karma.webpack.conf.js b/aio/content/examples/webpack/karma.webpack.conf.js similarity index 100% rename from aio/content/examples/webpack/ts/karma.webpack.conf.js rename to aio/content/examples/webpack/karma.webpack.conf.js diff --git a/aio/content/examples/webpack/package.webpack.json b/aio/content/examples/webpack/package.webpack.json new file mode 100644 index 00000000000..8f9e3954c2e --- /dev/null +++ b/aio/content/examples/webpack/package.webpack.json @@ -0,0 +1,49 @@ +{ + "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.0.0", + "@angular/compiler": "~4.0.0", + "@angular/core": "~4.0.0", + "@angular/forms": "~4.0.0", + "@angular/http": "~4.0.0", + "@angular/platform-browser": "~4.0.0", + "@angular/platform-browser-dynamic": "~4.0.0", + "@angular/router": "~4.0.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.0.10", + "webpack": "2.2.1", + "webpack-dev-server": "2.4.1", + "webpack-merge": "^3.0.0" + } +} diff --git a/aio/content/examples/webpack/ts/src/app/app.component.css b/aio/content/examples/webpack/src/app/app.component.css similarity index 100% rename from aio/content/examples/webpack/ts/src/app/app.component.css rename to aio/content/examples/webpack/src/app/app.component.css diff --git a/aio/content/examples/webpack/src/app/app.component.html b/aio/content/examples/webpack/src/app/app.component.html new file mode 100644 index 00000000000..9e60cd2ad58 --- /dev/null +++ b/aio/content/examples/webpack/src/app/app.component.html @@ -0,0 +1,7 @@ + +
    +

    Hello from Angular App with Webpack

    + + +
    + diff --git a/aio/content/examples/webpack/ts/src/app/app.component.spec.ts b/aio/content/examples/webpack/src/app/app.component.spec.ts similarity index 100% rename from aio/content/examples/webpack/ts/src/app/app.component.spec.ts rename to aio/content/examples/webpack/src/app/app.component.spec.ts diff --git a/aio/content/examples/webpack/src/app/app.component.ts b/aio/content/examples/webpack/src/app/app.component.ts new file mode 100644 index 00000000000..2c5eac01470 --- /dev/null +++ b/aio/content/examples/webpack/src/app/app.component.ts @@ -0,0 +1,16 @@ +// #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/aio/content/examples/webpack/ts/src/app/app.module.ts b/aio/content/examples/webpack/src/app/app.module.ts similarity index 100% rename from aio/content/examples/webpack/ts/src/app/app.module.ts rename to aio/content/examples/webpack/src/app/app.module.ts diff --git a/aio/content/examples/webpack/ts/public/css/styles.css b/aio/content/examples/webpack/src/assets/css/styles.css similarity index 100% rename from aio/content/examples/webpack/ts/public/css/styles.css rename to aio/content/examples/webpack/src/assets/css/styles.css diff --git a/aio/content/examples/webpack/ts/public/images/angular.png b/aio/content/examples/webpack/src/assets/images/angular.png similarity index 100% rename from aio/content/examples/webpack/ts/public/images/angular.png rename to aio/content/examples/webpack/src/assets/images/angular.png diff --git a/aio/content/examples/webpack/ts/src/index.html b/aio/content/examples/webpack/src/index.html similarity index 100% rename from aio/content/examples/webpack/ts/src/index.html rename to aio/content/examples/webpack/src/index.html diff --git a/aio/content/examples/webpack/ts/src/main.ts b/aio/content/examples/webpack/src/main.ts similarity index 100% rename from aio/content/examples/webpack/ts/src/main.ts rename to aio/content/examples/webpack/src/main.ts diff --git a/aio/content/examples/webpack/ts/src/polyfills.ts b/aio/content/examples/webpack/src/polyfills.ts similarity index 100% rename from aio/content/examples/webpack/ts/src/polyfills.ts rename to aio/content/examples/webpack/src/polyfills.ts diff --git a/aio/content/examples/webpack/ts/tsconfig.1.json b/aio/content/examples/webpack/src/tsconfig.1.json similarity index 100% rename from aio/content/examples/webpack/ts/tsconfig.1.json rename to aio/content/examples/webpack/src/tsconfig.1.json diff --git a/aio/content/examples/webpack/ts/src/vendor.ts b/aio/content/examples/webpack/src/vendor.ts similarity index 100% rename from aio/content/examples/webpack/ts/src/vendor.ts rename to aio/content/examples/webpack/src/vendor.ts diff --git a/aio/content/examples/webpack/ts-snippets/webpack.config.snippets.ts b/aio/content/examples/webpack/ts-snippets/webpack.config.snippets.ts deleted file mode 100644 index 2a3c596359c..00000000000 --- a/aio/content/examples/webpack/ts-snippets/webpack.config.snippets.ts +++ /dev/null @@ -1,58 +0,0 @@ -/* tslint:disable */ -// #docregion one-entry -entry: { - app: 'src/app.ts' -} -// #enddocregion one-entry - -// #docregion app-example -import { Component } from '@angular/core'; - -@Component({ - ... -}) -export class AppComponent {} -// #enddocregion app-example - -// #docregion one-output -output: { - filename: 'app.js' -} -// #enddocregion one-output - -// #docregion two-entries -entry: { - app: 'src/app.ts', - vendor: 'src/vendor.ts' -}, - -output: { - filename: '[name].js' -} -// #enddocregion two-entries - -// #docregion loaders -rules: [ - { - test: /\.ts$/, - loader: 'awesome-typescript-loader' - }, - { - test: /\.css$/, - loaders: 'style-loader!css-loader' - } -] -// #enddocregion loaders - -// #docregion imports -// #docregion single-import -import { AppComponent } from './app.component.ts'; -// #enddocregion single-import -import 'uiframework/dist/uiframework.css'; -// #enddocregion imports - -// #docregion plugins -plugins: [ - new webpack.optimize.UglifyJsPlugin() -] -// #enddocregion plugins diff --git a/aio/content/examples/webpack/ts/config/karma.conf.js b/aio/content/examples/webpack/ts/config/karma.conf.js deleted file mode 100644 index 3e2e34072f1..00000000000 --- a/aio/content/examples/webpack/ts/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'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: ['PhantomJS'], - singleRun: true - }; - - config.set(_config); -}; -// #enddocregion diff --git a/aio/content/examples/webpack/ts/config/webpack.common.js b/aio/content/examples/webpack/ts/config/webpack.common.js deleted file mode 100644 index 49dd91e3342..00000000000 --- a/aio/content/examples/webpack/ts/config/webpack.common.js +++ /dev/null @@ -1,75 +0,0 @@ -// #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 - entry: { - 'polyfills': './src/polyfills.ts', - 'vendor': './src/vendor.ts', - 'app': './src/main.ts' - }, - // #enddocregion - - // #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(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, - 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/aio/content/examples/webpack/ts/config/webpack.test.js b/aio/content/examples/webpack/ts/config/webpack.test.js deleted file mode 100644 index f9e15d46796..00000000000 --- a/aio/content/examples/webpack/ts/config/webpack.test.js +++ /dev/null @@ -1,50 +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: ['awesome-typescript-loader', '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(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, - helpers.root('./src'), // location of your src - {} // a map of your routes - ) - ] -} - -// #enddocregion diff --git a/aio/content/examples/webpack/ts/package.webpack.json b/aio/content/examples/webpack/ts/package.webpack.json deleted file mode 100644 index 7f51557376c..00000000000 --- a/aio/content/examples/webpack/ts/package.webpack.json +++ /dev/null @@ -1,50 +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": "~2.4.0", - "@angular/compiler": "~2.4.0", - "@angular/core": "~2.4.0", - "@angular/forms": "~2.4.0", - "@angular/http": "~2.4.0", - "@angular/platform-browser": "~2.4.0", - "@angular/platform-browser-dynamic": "~2.4.0", - "@angular/router": "~3.4.0", - "core-js": "^2.4.1", - "rxjs": "5.0.1", - "zone.js": "^0.7.4" - }, - "devDependencies": { - "@types/node": "^6.0.45", - "@types/jasmine": "^2.5.35", - "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.0-beta.18", - "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-jasmine": "^1.0.2", - "karma-phantomjs-launcher": "^1.0.2", - "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.1", - "null-loader": "^0.1.1", - "phantomjs-prebuilt": "^2.1.7", - "raw-loader": "^0.5.1", - "rimraf": "^2.5.2", - "style-loader": "^0.13.1", - "typescript": "~2.0.10", - "webpack": "2.2.0", - "webpack-dev-server": "2.2.0-rc.0", - "webpack-merge": "^2.4.0" - } -} diff --git a/aio/content/examples/webpack/ts/src/app/app.component.html b/aio/content/examples/webpack/ts/src/app/app.component.html deleted file mode 100644 index b06ff16d11d..00000000000 --- a/aio/content/examples/webpack/ts/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ - -
    -

    Hello from Angular App with Webpack

    - - -
    - diff --git a/aio/content/examples/webpack/ts/src/app/app.component.ts b/aio/content/examples/webpack/ts/src/app/app.component.ts deleted file mode 100644 index 2b79d055b2c..00000000000 --- a/aio/content/examples/webpack/ts/src/app/app.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #docregion -import { Component } from '@angular/core'; - -import '../../public/css/styles.css'; - -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { } -// #enddocregion diff --git a/aio/content/examples/webpack/ts/webpack.config.js b/aio/content/examples/webpack/webpack.config.js similarity index 100% rename from aio/content/examples/webpack/ts/webpack.config.js rename to aio/content/examples/webpack/webpack.config.js diff --git a/aio/content/examples/webpack/zipper.json b/aio/content/examples/webpack/zipper.json new file mode 100644 index 00000000000..73ea46a406b --- /dev/null +++ b/aio/content/examples/webpack/zipper.json @@ -0,0 +1,12 @@ +{ + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[0-9].*", + "config/**/*", + "webpack.config.js", + "karma.webpack.conf.js" + ], + "removeSystemJsConfig": true, + "type": "webpack" +} diff --git a/aio/content/glossary.md b/aio/content/glossary.md new file mode 100644 index 00000000000..32650fac40c --- /dev/null +++ b/aio/content/glossary.md @@ -0,0 +1,726 @@ +@description + +Angular has its own vocabulary. +Most Angular terms are common English words +with a specific meaning within the Angular system. + +This glossary lists the most prominent terms +and a few less familiar ones that have unusual or +unexpected definitions. + +[A](glossary#A) [B](glossary#B) [C](glossary#C) [D](glossary#D) [E](glossary#E) [F](glossary#F) [G](glossary#G) [H](glossary#H) [I](glossary#I) +[J](glossary#J) [K](glossary#K) [L](glossary#L) [M](glossary#M) [N](glossary#N) [O](glossary#O) [P](glossary#P) [Q](glossary#Q) [R](glossary#R) +[S](glossary#S) [T](glossary#T) [U](glossary#U) [V](glossary#V) [W](glossary#W) [X](glossary#X) [Y](glossary#Y) [Z](glossary#Z) + + + +{@a aot} +## Ahead-of-time (AOT) compilation + +~~~ {.l-sub-section} + +You can compile Angular applications at build time. +By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly +to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle. +Ahead-of-time compiled applications also benefit from decreased load time and increased performance. + + +~~~ + + + +{@a attribute-directive} + + +{@a attribute-directives} +## Attribute directives + +~~~ {.l-sub-section} + +A category of [directive](glossary#directive) that can listen to and modify the behavior of +other HTML elements, attributes, properties, and components. They are usually represented +as HTML attributes, hence the name. + +For example, you can use the `ngClass` directive to add and remove CSS class names. + +Learn about them in the [_Attribute Directives_](!{docsLatest}/guide/attribute-directives) guide. + + +~~~ + + +## Binding + +~~~ {.l-sub-section} + +Usually refers to [data binding](glossary#data-binding) and the act of +binding an HTML object property to a data object property. + +Sometimes refers to a [dependency-injection](glossary#dependency-injection) binding +between a "token"—also referred to as a "key"—and a dependency [provider](glossary#provider). +When using this more rare usage, be clear in context. + + +~~~ + +## Bootstrap + +~~~ {.l-sub-section} + + +You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](glossary#component), which is the first component that is loaded for the application. +For more information, see the [Setup](!{docsLatest}/guide/setup) page.You can bootstrap multiple apps in the same `index.html`, each app with its own top-level root. + + +~~~ + + +## camelCase + +~~~ {.l-sub-section} + +The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter +_except the first letter, which is lowercase_. + +Function, property, and method names are typically spelled in camelCase. For example, `square`, `firstName`, and `getHeroes`. Notice that `square` is an example of how you write a single word in camelCase. + +camelCase is also known as *lower camel case* to distinguish it from *upper camel case*, or [PascalCase](glossary#pascalcase). +In Angular documentation, "camelCase" always means *lower camel case*. + + +~~~ + + + +{@a component} +## Component + +~~~ {.l-sub-section} + +An Angular class responsible for exposing data to a [view](glossary#view) and handling most of the view’s display and user-interaction logic. + +The *component* is one of the most important building blocks in the Angular system. +It is, in fact, an Angular [directive](glossary#directive) with a companion [template](glossary#template). + +Apply the `!{_at}Component` !{_decoratorLink} to +the component class, thereby attaching to the class the essential component metadata +that Angular needs to create a component instance and render the component with its template +as a view. + +Those familiar with "MVC" and "MVVM" patterns will recognize +the component in the role of "controller" or "view model". + + +~~~ + + +## dash-case + +~~~ {.l-sub-section} + +The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`). +This form is also known as kebab-case. + +[Directive](glossary#directive) selectors (like `my-app`) and +the root of filenames (such as `hero-list.component.ts`) are often +spelled in dash-case. + + +~~~ + +## Data binding + +~~~ {.l-sub-section} + +Applications display data values to a user and respond to user +actions (such as clicks, touches, and keystrokes). + +In data binding, you declare the relationship between an HTML widget and data source +and let the framework handle the details. +Data binding is an alternative to manually pushing application data values into HTML, attaching +event listeners, pulling changed values from the screen, and +updating application data values. + +Angular has a rich data-binding framework with a variety of data-binding +operations and supporting declaration syntax. + + Read about the following forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax) page: + * [Interpolation](!{docsLatest}/guide/template-syntax). + * [Property binding](!{docsLatest}/guide/template-syntax). + * [Event binding](!{docsLatest}/guide/template-syntax). + * [Attribute binding](!{docsLatest}/guide/template-syntax). + * [Class binding](!{docsLatest}/guide/template-syntax). + * [Style binding](!{docsLatest}/guide/template-syntax). + * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax). + + + +~~~ + +## Dependency injection + +~~~ {.l-sub-section} + +A design pattern and mechanism +for creating and delivering parts of an application to other +parts of an application that request them. + +Angular developers prefer to build applications by defining many simple parts +that each do one thing well and then wiring them together at runtime. + +These parts often rely on other parts. An Angular [component](glossary#component) +part might rely on a service part to get data or perform a calculation. When +part "A" relies on another part "B," you say that "A" depends on "B" and +that "B" is a dependency of "A." + +You can ask a "dependency injection system" to create "A" +for us and handle all the dependencies. +If "A" needs "B" and "B" needs "C," the system resolves that chain of dependencies +and returns a fully prepared instance of "A." + + +Angular provides and relies upon its own sophisticated +dependency-injection system +to assemble and run applications by "injecting" application parts +into other application parts where and when needed. + +At the core, an [`injector`](glossary#injector) returns dependency values on request. +The expression `injector.get(token)` returns the value associated with the given token. + +A token is an Angular type (`OpaqueToken`). You rarely need to work with tokens directly; most +methods accept a class name (`Foo`) or a string ("foo") and Angular converts it +to a token. When you write `injector.get(Foo)`, the injector returns +the value associated with the token for the `Foo` class, typically an instance of `Foo` itself. + +During many of its operations, Angular makes similar requests internally, such as when it creates a [`component`](glossary#component) for display. + +The `Injector` maintains an internal map of tokens to dependency values. +If the `Injector` can't find a value for a given token, it creates +a new value using a `Provider` for that token. + +A [provider](glossary#provider) is a recipe for +creating new instances of a dependency value associated with a particular token. + +An injector can only create a value for a given token if it has +a `provider` for that token in its internal provider registry. +Registering providers is a critical preparatory step. + +Angular registers some of its own providers with every injector. +You can register your own providers. + +Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection) page. + + +~~~ + + + +{@a directive} + + +{@a directives} +## Directive + +~~~ {.l-sub-section} + +An Angular class responsible for creating, reshaping, and interacting with HTML elements +in the browser DOM. The directive is Angular's most fundamental feature. + +A directive is ususally associated with an HTML element or attribute. +This element or attribute is often referred to as the directive itself. + +When Angular finds a directive in an HTML template, +it creates the matching directive class instance +and gives the instance control over that portion of the browser DOM. + +You can invent custom HTML markup (for example, ``) to +associate with your custom directives. You add this custom markup to HTML templates +as if you were writing native HTML. In this way, directives become extensions of +HTML itself. + + +Directives fall into one of the following categories: + +* [Components](glossary#component) combine application logic with an HTML template to +render application [views](glossary#view). Components are usually represented as HTML elements. +They are the building blocks of an Angular application. + +1. [Attribute directives](glossary#attribute-directive) can listen to and modify the behavior of +other HTML elements, attributes, properties, and components. They are usually represented +as HTML attributes, hence the name. + +1. [Structural directives](glossary#structural-directive) are responsible for +shaping or reshaping HTML layout, typically by adding, removing, or manipulating +elements and their children. + + + +~~~ + + +## ECMAScript + +~~~ {.l-sub-section} + +The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript). + +The latest approved version of JavaScript is +[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/) +(also known as "ES2016" or "ES7"). Many Angular developers write their applications +in ES7 or a dialect that strives to be +compatible with it, such as [TypeScript](glossary#typescript). + +Most modern browsers only support the much older "ECMAScript 5" (also known as "ES5") standard. +Applications written in ES2016, ES2015, or one of their dialects must be [transpiled](glossary#transpile) +to ES5 JavaScript. + +Angular developers can write in ES5 directly. + + +~~~ + +## ES2015 + +~~~ {.l-sub-section} + +Short hand for [ECMAScript](glossary#ecmascript) 2015. + +~~~ + +## ES5 + +~~~ {.l-sub-section} + +Short hand for [ECMAScript](glossary#ecmascript) 5, the version of JavaScript run by most modern browsers. + +~~~ + +## ES6 + +~~~ {.l-sub-section} + +Short hand for [ECMAScript](glossary#ecmascript) 2015. + + +~~~ + + + +{@a F} + + +{@a G} + + +{@a H} + +## Injector + +~~~ {.l-sub-section} + +An object in the Angular [dependency-injection system](glossary#dependency-injection) +that can find a named dependency in its cache or create a dependency +with a registered [provider](glossary#provider). + + +~~~ + +## Input + +~~~ {.l-sub-section} + +A directive property that can be the *target* of a +[property binding](!{docsLatest}/guide/template-syntax) (explained in detail in the [Template Syntax](!{docsLatest}/guide/template-syntax) page). +Data values flow *into* this property from the data source identified +in the template expression to the right of the equal sign. + +See the [Input and output properties](!{docsLatest}/guide/template-syntax) section of the [Template Syntax](!{docsLatest}/guide/template-syntax) page. + + +~~~ + +## Interpolation + +~~~ {.l-sub-section} + +A form of [property data binding](glossary#data-binding) in which a +[template expression](glossary#template-expression) between double-curly braces +renders as text. That text may be concatenated with neighboring text +before it is assigned to an element property +or displayed between element tags, as in this example. + + + + + + +Read more about [interpolation](!{docsLatest}/guide/template-syntax) in the +[Template Syntax](!{docsLatest}/guide/template-syntax) page. + + +~~~ + + + + +{@a jit} +## Just-in-time (JIT) compilation + +~~~ {.l-sub-section} + +A bootstrapping method of compiling components and modules in the browser +and launching the application dynamically. Just-in-time mode is a good choice during development. +Consider using the [ahead-of-time](glossary#aot) mode for production apps. + + +~~~ + + +## kebab-case + +~~~ {.l-sub-section} + +See [dash-case](glossary#dash-case). + + +~~~ + + +## Lifecycle hooks + +~~~ {.l-sub-section} + +[Directives](glossary#directive) and [components](glossary#component) have a lifecycle +managed by Angular as it creates, updates, and destroys them. + +You can tap into key moments in that lifecycle by implementing +one or more of the lifecycle hook interfaces. + +Each interface has a single hook method whose name is the interface name prefixed with `ng`. +For example, the `OnInit` interface has a hook method named `ngOnInit`. + +Angular calls these hook methods in the following order: +* `ngOnChanges`: when an [input](glossary#input)/[output](glossary#output) binding value changes. +* `ngOnInit`: after the first `ngOnChanges`. +* `ngDoCheck`: developer's custom change detection. +* `ngAfterContentInit`: after component content initialized. +* `ngAfterContentChecked`: after every check of component content. +* `ngAfterViewInit`: after a component's views are initialized. +* `ngAfterViewChecked`: after every check of a component's views. +* `ngOnDestroy`: just before the directive is destroyed. + +Read more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks) page. + + +~~~ + + +## Module + +~~~ {.l-sub-section} + + + + +~~~ {.alert.is-important} + +Angular has the following types of modules: +- [Angular modules](glossary#angular-module). +For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule) page. +- ES2015 modules, as described in this section. + + +~~~ + +A cohesive block of code dedicated to a single purpose. + +Angular apps are modular. + +In general, you assemble an application from many modules, both the ones you write and the ones you acquire from others. + +A module *exports* something of value in that code, typically one thing such as a class; +a module that needs that class *imports* it. + +The structure of Angular modules and the import/export syntax +is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html). + +An application that adheres to this standard requires a module loader to +load modules on request and resolve inter-module dependencies. +Angular doesn't include a module loader and doesn't have a preference +for any particular third-party library (although most examples use SystemJS). +You can use any module library that conforms to the standard. + +Modules are typically named after the file in which the exported thing is defined. +The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts) +class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. + +You rarely access Angular feature modules directly. You usually import them from an Angular [scoped package](glossary#scoped-package) such as `@angular/core`. + + +~~~ + + + +{@a N} + +## Output + +~~~ {.l-sub-section} + +A directive property that can be the *target* of event binding +(read more in the [event binding](!{docsLatest}/guide/template-syntax) +section of the [Template Syntax](!{docsLatest}/guide/template-syntax) page). +Events stream *out* of this property to the receiver identified +in the template expression to the right of the equal sign. + +See the [Input and output properties](!{docsLatest}/guide/template-syntax) section of the [Template Syntax](!{docsLatest}/guide/template-syntax) page. + + +~~~ + + +## PascalCase + +~~~ {.l-sub-section} + +The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter. +Class names are typically spelled in PascalCase. For example, `Person` and `HeroDetailComponent`. + +This form is also known as *upper camel case* to distinguish it from *lower camel case* or simply [camelCase](glossary#camelcase). +In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*. + + +~~~ + +## Pipe + +~~~ {.l-sub-section} + +An Angular pipe is a function that transforms input values to output values for +display in a [view](glossary#view). +Here's an example that uses the built-in `currency` pipe to display +a numeric value in the local currency. + + + {{product.price | currency}} + + + +You can also write your own custom pipes. +Read more in the page on [pipes](!{docsLatest}/guide/pipes). + + +~~~ + +## Provider + +~~~ {.l-sub-section} + +A _provider_ creates a new instance of a dependency for the +[dependency injection](glossary#dependency-injection) system. +It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value. + + +~~~ + + + +{@a Q} + +## Router + +~~~ {.l-sub-section} + +Most applications consist of many screens or [views](glossary#view). +The user navigates among them by clicking links and buttons, +and performing other similar actions that cause the application to +replace one view with another. + +The Angular component router is a richly featured mechanism for configuring and managing the entire view navigation process, including the creation and destruction +of views. + +~~~ + +## Routing component + +~~~ {.l-sub-section} + +An Angular [component](glossary#component) with a `RouterOutlet` that displays views based on router navigations. + +For more information, see the [Routing & Navigation](!{docsLatest}/guide/router) page. + + +~~~ + + +## Service + +~~~ {.l-sub-section} + +For data or logic that is not associated +with a specific view or that you want to share across components, build services. + +Applications often require services such as a hero data service or a logging service. + +A service is a class with a focused purpose. +You often create a service to implement features that are +independent from any specific view, +provide shared data or logic across components, or encapsulate external interactions. + +Applications often require services such as a data service or a logging service. + +For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4) page of the [Tour of Heroes](!{docsLatest}/tutorial/) tutorial. + + +~~~ + + + +{@a snake-case} +## snake_case + + +~~~ {.l-sub-section} + + +The practice of writing compound words or phrases such that an +underscore (`_`) separates one word from the next. This form is also known as *underscore case*. + + +~~~ + + + +{@a structural-directive} + + +{@a structural-directives} +## Structural directives + +~~~ {.l-sub-section} + +A category of [directive](glossary#directive) that can +shape or reshape HTML layout, typically by adding and removing elements in the DOM. +The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are well-known examples. + +Read more in the [_Structural Directives_](!{docsLatest}/guide/structural-directives) guide. + + +~~~ + + +## Template + +~~~ {.l-sub-section} + +A chunk of HTML that Angular uses to render a [view](glossary#view) with +the support and guidance of an Angular [directive](glossary#directive), +most notably a [component](glossary#component). + + + +~~~ + +## Template expression + +~~~ {.l-sub-section} + +A !{_Lang}-like syntax that Angular evaluates within +a [data binding](glossary#data-binding). + +Read about how to write template expressions +in the [Template expressions](!{docsLatest}/guide/template-syntax) section +of the [Template Syntax](!{docsLatest}/guide/template-syntax) page. + + +~~~ + +## Transpile + +~~~ {.l-sub-section} + +The process of transforming code written in one form of JavaScript +(such as TypeScript) into another form of JavaScript (such as [ES5](glossary#es5)). + + +~~~ + +## TypeScript + +~~~ {.l-sub-section} + +A version of JavaScript that supports most [ECMAScript 2015](glossary#es2015) +language features such as [decorators](glossary#decorator). + +TypeScript is also notable for its optional typing system, which provides +compile-time type checking and strong tooling support (such as "intellisense," +code completion, refactoring, and intelligent search). Many code editors +and IDEs support TypeScript either natively or with plugins. + +TypeScript is the preferred language for Angular development, although +you can use other JavaScript dialects such as [ES5](glossary#es5). + +Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/). + + +~~~ + + + +{@a U} + +## View + +~~~ {.l-sub-section} + +A portion of the screen that displays information and responds +to user actions such as clicks, mouse moves, and keystrokes. + +Angular renders a view under the control of one or more [directives](glossary#directive), +especially [component](glossary#component) directives and their companion [templates](glossary#template). +The component plays such a prominent role that it's often +convenient to refer to a component as a view. + +Views often contain other views. Any view might be loaded and unloaded +dynamically as the user navigates through the application, typically +under the control of a [router](glossary#router). + + +~~~ + + + +{@a W} + + +{@a X} + + +{@a Y} + +## Zone + +~~~ {.l-sub-section} + + +A mechanism for encapsulating and intercepting +a JavaScript application's asynchronous activity. + +The browser DOM and JavaScript have a limited number +of asynchronous activities, such as DOM events (for example, clicks), +[promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and +[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) +calls to remote servers. + +Zones intercept all of these activities and give a "zone client" the opportunity +to take action before and after the async activity finishes. + +Angular runs your application in a zone where it can respond to +asynchronous events by checking for data changes and updating +the information it displays via [data bindings](glossary#data-binding). + +Learn more about zones in this +[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). + +~~~ + diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md index 880eb0cb186..66392b18dc1 100644 --- a/aio/content/guide/ajs-quick-reference.md +++ b/aio/content/guide/ajs-quick-reference.md @@ -79,9 +79,11 @@ The following table lists some of the key AngularJS template features with their
    ### Bindings/interpolation - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='interpolation'} - - In Angular, a template expression in curly braces still denotes one-way binding. + + + + + 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. @@ -111,9 +113,11 @@ The following table lists some of the key AngularJS template features with their ### Pipes - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='uppercase'} - - In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **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. @@ -141,9 +145,11 @@ The following table lists some of the key AngularJS template features with their ### Input variables - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='local'} - - Angular has true template input variables that are explicitly defined using the `let` keyword. + + + + + 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) section of the [Template Syntax](guide/template-syntax) page. @@ -208,13 +214,17 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bootstrapping - {@example 'cb-ajs-quick-reference/ts/src/main.ts'} + + + + +
    -
    - - {@example 'cb-ajs-quick-reference/ts/src/app/app.module.1.ts'} - - Angular doesn't have a bootstrap directive. + + + + + 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`. @@ -250,9 +260,11 @@ The following are some of the key AngularJS built-in directives and their equiva
    ### ngClass - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='ngClass'} - - In Angular, the `ngClass` directive works similarly. + + + + + 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. @@ -292,9 +304,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `click` event - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='event-binding'} - - AngularJS event-based directives do not exist in Angular. + + + + + 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 @@ -335,9 +349,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Component decorator - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='component'} - - In Angular, the template no longer specifies its associated controller. + + + + + 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). @@ -391,9 +407,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `href` property - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='href'} - - Angular uses property binding; there is no built-in *href* directive. + + + + + 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) @@ -401,9 +419,11 @@ The following are some of the key AngularJS built-in directives and their equiva In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the following example. - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='router-link'} - - For more information on routing, see the [RouterLink binding](guide/router) + + + + + For more information on routing, see the [RouterLink binding](guide/router) section of the [Routing & Navigation](guide/router) page. ### *ngIf - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='ngIf'} - - The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes + + + + + 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. @@ -461,9 +483,11 @@ The following are some of the key AngularJS built-in directives and their equiva ` in this example) and its contents into a template and uses that template to instantiate a view for each item in the list. @@ -532,9 +558,11 @@ The following are some of the key AngularJS built-in directives and their equiva @@ -740,7 +776,7 @@ For more information on pipes, see [Pipes](guide/pipes). @@ -797,9 +835,11 @@ For more information on pipes, see [Pipes](guide/pipes). @@ -822,9 +862,11 @@ For more information on pipes, see [Pipes](guide/pipes). @@ -863,7 +907,7 @@ For more information on pipes, see [Pipes](guide/pipes). diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 3661e33d3ff..1b6578b66e1 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -41,9 +41,16 @@ add it to your page. * [Parallel animation groups](guide/animations#parallel-animation-groups). * [Animation callbacks](guide/animations#animation-callbacks). + +~~~ {.l-sub-section} + The examples in this page are available as a . +~~~ + + + {@a example-transitioning-between-states} ## Quickstart example: Transitioning between two states @@ -55,17 +62,27 @@ You can build a simple animation that transitions an element between two states driven by a model attribute. Animations are defined inside `@Component` metadata. Before you can add animations, you need -to import a few animation-specific functions: +to import a few animation-specific imports and functions: -{@example 'animations/ts/src/app/hero-list-basic.component.ts' region='imports'} + + + + + + + + + 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. -{@example 'animations/ts/src/app/hero-list-basic.component.ts' region='animationdef'} + + + @@ -81,7 +98,9 @@ Now, using the `[@triggerName]` syntax, attach the animation that you just defin one or more elements in the component's template. -{@example 'animations/ts/src/app/hero-list-basic.component.ts' region='template'} + + + Here, the animation trigger applies to every element repeated by an `ngFor`. Each of the repeated elements animates independently. The value of the @@ -91,7 +110,9 @@ With this setup, an animated transition appears whenever a hero object changes s Here's the full component implementation: -{@example 'animations/ts/src/app/hero-list-basic.component.ts'} + + + ## States and transitions @@ -107,7 +128,9 @@ component's template. You can define *styles* for each animation state: -{@example 'animations/ts/src/app/hero-list-basic.component.ts' region='states'} + + + 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 @@ -117,7 +140,9 @@ After you define states, you can define *transitions* between the states. Each t controls the timing of switching between one set of styles and the next: -{@example 'animations/ts/src/app/hero-list-basic.component.ts' region='transitions'} + + +
    @@ -128,13 +153,17 @@ If several transitions have the same timing configuration, you can combine them into the same `transition` definition: -{@example 'animations/ts/src/app/hero-list-combined-transitions.component.ts' region='transitions'} + + + When both directions of a transition have the same timing, as in the previous example, you can use the shorthand syntax `<=>`: -{@example 'animations/ts/src/app/hero-list-twoway.component.ts' region='transitions'} + + + 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, @@ -143,7 +172,9 @@ When the transition finishes, none of these styles are kept because they're not defined in a `state`. -{@example 'animations/ts/src/app/hero-list-inline-styles.component.ts' region='transitions'} + + + ### The wildcard state `*` @@ -187,13 +218,18 @@ entering and leaving of elements: 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. -{@example 'animations/ts/src/app/hero-list-enter-leave.component.ts' region='animationdef'} + + + 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. + +~~~ {.l-sub-section} + These two common animations have their own aliases: transition(':enter', [ ... ]); // void => * @@ -201,6 +237,10 @@ These two common animations have their own aliases: + + +~~~ + ## Example: Entering and leaving from different states
    Enter and leave animations combined with state animations @@ -224,7 +264,9 @@ This gives you fine-grained control over each transition: -{@example 'animations/ts/src/app/hero-list-enter-leave-states.component.ts' region='animationdef'} + + + ## Animatable properties and units @@ -262,7 +304,9 @@ In this example, the leave animation takes whatever height the element has befor leaves and animates from that height to zero: -{@example 'animations/ts/src/app/hero-list-auto.component.ts' region='animationdef'} + + + ## Animation timing @@ -310,7 +354,9 @@ slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`: -{@example 'animations/ts/src/app/hero-list-timings.component.ts' region='animationdef'} + + + ## Multi-step animations with keyframes
    @@ -328,7 +374,9 @@ This example adds some "bounce" to the enter and leave animations with keyframes: -{@example 'animations/ts/src/app/hero-list-multistep.component.ts' region='animationdef'} + + + 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 @@ -354,7 +402,9 @@ enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other: -{@example 'animations/ts/src/app/hero-list-groups.component.ts' region='animationdef'} + + + One group animates the element transform and width; the other group animates the opacity. ## Animation callbacks @@ -365,9 +415,11 @@ In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook those callbacks like this: -{@example 'animations/ts/src/app/hero-list-multistep.component.ts' region='template'} + -The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`, -`toState` and `totalTime`. + + +The callbacks receive an `AnimationEvent` that contains contains useful properties such as +`fromState`, `toState` and `totalTime`. Those callbacks will fire whether or not an animation is picked up. \ No newline at end of file diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index a9a15b14996..8065290b367 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -2,37 +2,54 @@ Ahead-of-Time Compilation @intro -Learn how to use Ahead-of-time compilation. +Learn how to use ahead-of-time compilation. @description -This cookbook describes how to radically improve performance by compiling _Ahead of Time_ (AOT) +This cookbook describes how to radically improve performance by compiling _ahead-of-time_ (AOT) during a build process. {@a toc} -## Table of Contents -* [Overview](guide/aot-compiler#overview) -* [_Ahead-of-Time_ vs _Just-in-Time_](guide/aot-compiler#aot-jit) -* [Compile with AOT](guide/aot-compiler#compile) -* [Bootstrap](guide/aot-compiler#bootstrap) -* [Tree Shaking](guide/aot-compiler#tree-shaking) -* [Load the bundle](guide/aot-compiler#load) -* [Serve the app](guide/aot-compiler#serve) -* [Workflow and convenience script](guide/aot-compiler#workflow) -* [Source Code](guide/aot-compiler#source-code) -* [Tour of Heroes](guide/aot-compiler#toh) +# Contents +- [Overview](guide/overview) +- [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit) +- [Why do AOT compilation?](guide/aot-compiler#why-aot) +- [Compile with AOT](guide/aot-compiler#compile) +- [Bootstrap](guide/aot-compiler#bootstrap) +- [Tree shaking](guide/aot-compiler#tree-shaking) + - [Rollup](guide/aot-compiler#rollup) + - [Rollup Plugins](guide/aot-compiler#rollup-plugins) + - [Run Rollup](guide/aot-compiler#run-rollup) +- [Load the bundle](guide/aot-compiler#load) +- [Serve the app](guide/aot-compiler#serve) +- [AOT QuickStart source code](guide/aot-compiler#source-code) +- [Workflow and convenience script](guide/aot-compiler#workflow) + - [Develop JIT along with AOT](guide/aot-compiler#run-jit) +- [Tour of Heroes](guide/aot-compiler#toh) + - [JIT in development, AOT in production](guide/aot-compiler#jit-dev-aot-prod) + - [Tree shaking](guide/aot-compiler#shaking) + - [Running the application](guide/aot-compiler#running-app) + - [Inspect the Bundle](guide/aot-compiler#inspect-bundle) + {@a overview} ## Overview -An Angular application consist largely of components and their HTML templates. +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 the _Angular compiler_. -Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016.You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JIT) compiler**. + +~~~ {.l-sub-section} + +Watch compiler author Tobias Bosch explain the Angular Compiler at AngularConnect 2016. + +~~~ + +You can compile the app in the browser, at runtime, as the application loads, using the **_just-in-time_ (JIT) compiler**. This is the standard development approach shown throughout the documentation. -It's great .. but it has shortcomings. +It's great but it has shortcomings. JIT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. @@ -41,22 +58,23 @@ and a lot of library code that the application won't actually need. Bigger apps take longer to transmit and are slower to load. Compilation can uncover many component-template binding errors. -JIT compilation discovers them at runtime which is later than we'd like. +JIT compilation discovers them at runtime, which is late in the process. -The **_Ahead-of-Time_ (AOT) compiler** can catch template errors early and improve performance -by compiling at build time as you'll learn in this chapter. +The **_ahead-of-time_ (AOT) compiler** can catch template errors early and improve performance +by compiling at build time. {@a aot-jit} -## _Ahead-of-time_ (AOT) vs _Just-in-time_ (JIT) +## _Ahead-of-time_ (AOT) vs _just-in-time_ (JIT) There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; -With JIT it runs every time for every user at runtime using a different set of libraries. +with JIT it runs every time for every user at runtime using a different set of libraries. -### Why do AOT compilation? +{@a why-aot} +## Why do AOT compilation? *Faster rendering* @@ -65,7 +83,7 @@ The browser loads executable code so it can render the application immediately, *Fewer asynchronous requests* -The compiler _inlines_ external html templates and css style sheets within the application JavaScript, +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* @@ -91,23 +109,24 @@ there are fewer opportunities for injection attacks. ## Compile with AOT -### Prepare for offline compilation +Preparing for offline compilation takes a few simple steps. Take the Setup as a starting point. -A few minor changes to the lone `app.component` lead to these two class and html files: - - - - - {@example 'cb-aot-compiler/ts/src/app/app.component.html'} - +A few minor changes to the lone `app.component` lead to these two class and HTML files: - - {@example 'cb-aot-compiler/ts/src/app/app.component.ts'} - + + + + + - + + + + + + Install a few new npm dependencies with the following command: @@ -120,39 +139,32 @@ instead of the TypeScript compiler (`tsc`). `ngc` is a drop-in replacement for `tsc` and is configured much the same way. `ngc` requires its own `tsconfig.json` with AOT-oriented settings. -Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` (on the project root), -then modify it to look as follows. +Copy the original `src/tsconfig.json` to a file called `tsconfig-aot.json` on the project root, +then modify it as follows. -{@example 'cb-aot-compiler/ts/tsconfig-aot.json'} + + + The `compilerOptions` section is unchanged except for one property. **Set the `module` to `es2015`**. This is important as explained later in the [Tree Shaking](guide/aot-compiler#tree-shaking) section. What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. -Its `"genDir"` property tells the compiler +Its `genDir` property tells the compiler to store the compiled output files in a new `aot` folder. The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application. Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them. -***Component-relative Template URLS*** +***Component-relative template URLS*** -The AOT compiler requires that `@Component` URLS for external templates and css files be _component-relative_. +The AOT compiler requires that `@Component` URLS for external templates and CSS files be _component-relative_. That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file. For example, an `'app.component.html'` URL means that the template file is a sibling of its companion `app.component.ts` file. While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation. - -JIT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`. -The `module` object is undefined when an AOT-compiled app runs. -The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this: - -{@example 'cb-aot-compiler/ts/src/index.html' region='moduleId'} - - -Setting a global `module` is a temporary expedient. -### Compiling the application +***Compiling the application*** Initiate AOT compilation from the command line using the previously installed `ngc` compiler by executing: @@ -160,26 +172,41 @@ Initiate AOT compilation from the command line using the previously installed `n + +~~~ {.l-sub-section} + Windows users should surround the `ngc` command in double quotes: "node_modules/.bin/ngc" -p tsconfig-aot.json + + +~~~ + `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file. -After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`). +After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder. +The `aot` folder is the directory specified as `genDir` in `tsconfig-aot.json`. These factory files are essential to the compiled application. Each component factory creates an instance of the component at runtime by combining the original class file and a JavaScript representation of the component's template. Note that the original component class is still referenced internally by the generated factory. -The curious can open the `aot/app.component.ngfactory.ts` to see the original Angular template syntax -in its intermediate, compiled-to-TypeScript form. + +~~~ {.l-sub-section} + +The curious can open `aot/app.component.ngfactory.ts` to see the original Angular template syntax +compiled to TypeScript, its intermediate form. JIT compilation generates these same _NgFactories_ in memory where they are largely invisible. AOT compilation reveals them as separate, physical files. +~~~ + + + ~~~ {.alert.is-important} Do not edit the _NgFactories_! Re-compilation replaces these files and all edits will be lost. @@ -193,7 +220,7 @@ Do not edit the _NgFactories_! Re-compilation replaces these files and all edits ## Bootstrap -The AOT path changes application bootstrapping. +The AOT approach changes application bootstrapping. Instead of bootstrapping `AppModule`, you bootstrap the application with the generated module factory, `AppModuleNgFactory`. @@ -206,54 +233,64 @@ Switch from the `platformBrowserDynamic.bootstrap` used in JIT compilation to Here is AOT bootstrap in `main.ts` next to the original JIT version: - - - {@example 'cb-aot-compiler/ts/src/main.ts'} - + + + + + - - {@example 'cb-aot-compiler/ts/src/main-jit.ts'} - + + + - + -Be sure to recompile with `ngc`! +Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`! {@a tree-shaking} -## Tree Shaking +## Tree shaking -AOT compilation sets the stage for further optimization through a process called _Tree Shaking_. -A Tree Shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like -dead needles in a Christmas tree. +AOT compilation sets the stage for further optimization through a process called _tree shaking_. +A tree shaker walks the dependency graph, top to bottom, and _shakes out_ unused code like +dead leaves in a tree. -Tree Shaking can greatly reduce the downloaded size of the application +Tree shaking can greatly reduce the downloaded size of the application by removing unused portions of both source and library code. In fact, most of the reduction in small apps comes from removing unreferenced Angular features. For example, this demo application doesn't use anything from the `@angular/forms` library. -There is no reason to download Forms-related Angular code and tree shaking ensures that you don't. +There is no reason to download forms-related Angular code and tree shaking ensures that you don't. -Tree Shaking and AOT compilation are separate steps. -Tree Shaking can only target JavaScript code. +Tree shaking and AOT compilation are separate steps. +Tree shaking can only target JavaScript code. AOT compilation converts more of the application to JavaScript, -which in turn makes more of the application "Tree Shakable". +which in turn makes more of the application "tree shakable". + +{@a rollup} ### Rollup -This cookbook illustrates a Tree Shaking utility called _Rollup_. +This cookbook illustrates a tree shaking utility called _Rollup_. Rollup statically analyzes the application by following the trail of `import` and `export` statements. It produces a final code _bundle_ that excludes code that is exported, but never imported. -Rollup can only Tree Shake `ES2015` modules which have `import` and `export` statements. +Rollup can only tree shake `ES2015` modules which have `import` and `export` statements. + +~~~ {.l-sub-section} + Recall that `tsconfig-aot.json` is configured to produce `ES2015` modules. It's not important that the code itself be written with `ES2015` syntax such as `class` and `const`. -What matters is that the code uses ES `import` and `export` statements rather than `require` statements.Install the Rollup dependencies with this command: - +What matters is that the code uses ES `import` and `export` statements rather than `require` statements. + +~~~ + +In the terminal window, install the Rollup dependencies with this command: + npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev @@ -262,66 +299,98 @@ in the project root directory to tell Rollup how to process the application. The cookbook configuration file looks like this. -{@example 'cb-aot-compiler/ts/rollup-config.js'} + -It tells Rollup that the app entry point is `src/app/main.js` . + + +This config file tells Rollup that the app entry point is `src/app/main.js` . The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder. It overrides the default `onwarn` method in order to skip annoying messages about the AOT compiler's use of the `this` keyword. -Then there are plugins. +The next section covers the plugins in more depth. + + +{@a rollup-plugins} ### Rollup Plugins Optional plugins filter and transform the Rollup inputs and output. *RxJS* + Rollup expects application source code to use `ES2015` modules. Not all external dependencies are published as `ES2015` modules. In fact, most are not. Many of them are published as _CommonJS_ modules. -The _RxJs_ observable library is an essential Angular dependency published as an ES5 JavaScript _CommonJS_ module. +The _RxJs_ Observable library is an essential Angular dependency published as an ES5 JavaScript _CommonJS_ module. -Luckily there is a Rollup plugin that modifies _RxJs_ +Luckily, there is a Rollup plugin that modifies _RxJs_ to use the ES `import` and `export` statements that Rollup requires. -Rollup then preserves in the final bundle the parts of `RxJS` referenced by the application. +Rollup then preserves the parts of `RxJS` referenced by the application +in the final bundle. Using it is straigthforward. Add the following to +the `plugins` !{_array} in `rollup-config.js`: -{@example 'cb-aot-compiler/ts/rollup-config.js' region='commonjs'} + + + *Minification* -Rollup Tree Shaking reduces code size considerably. Minification makes it smaller still. -This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code. +Rollup tree shaking reduces code size considerably. Minification makes it smaller still. +This cookbook relies on the _uglify_ Rollup plugin to minify and mangle the code. +Add the following to the `plugins` !{_array}: -{@example 'cb-aot-compiler/ts/rollup-config.js' region='uglify'} + + + + + +~~~ {.l-sub-section} In a production setting, you would also enable gzip on the web server to compress the code into an even smaller package going over the wire. + + +~~~ + + + +{@a run-rollup} ### Run Rollup Execute the Rollup process with this command: - + node_modules/.bin/rollup -c rollup-config.js + +~~~ {.l-sub-section} + Windows users should surround the `rollup` command in double quotes: - + "node_modules/.bin/rollup" -c rollup-config.js +~~~ + + + {@a load} -## Load the Bundle +## Load the bundle Loading the generated application bundle does not require a module loader like SystemJS. Remove the scripts that concern SystemJS. -Instead, load the bundle file using a single `script` tag **_after_** the `` tag: +Instead, load the bundle file using a single `
    ### ngModel - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='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) + + + + + 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 @@ -493,9 +517,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### *ngFor - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='ngFor'} - - The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats + + + + + 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 (`
    ### Bind to the `hidden` property - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='hidden'} - - Angular uses property binding; there is no built-in *show* directive. + + + + + 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 @@ -567,9 +595,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### Bind to the `src` property - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='src'} - - Angular uses property binding; there is no built-in *src* directive. + + + + + 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) @@ -600,9 +630,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngStyle - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='ngStyle'} - - In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. + + + + + 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. @@ -651,9 +683,11 @@ The following are some of the key AngularJS built-in directives and their equiva ### ngSwitch - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='ngSwitch'} - - In Angular, the `ngSwitch` directive works similarly. + + + + + 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` @@ -726,9 +760,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### currency - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='currency'} - - The Angular `currency` pipe is similar although some of the parameters have changed. + + + + + The Angular `currency` pipe is similar although some of the parameters have changed. ### date - <td>{{movie.releaseDate | date}}</td> + <td>{{movie.releaseDate | date}}</td> Formats a date to a string based on the requested format. @@ -750,9 +786,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### date - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='date'} - - The Angular `date` pipe is similar. + + + + + The Angular `date` pipe is similar. ### json - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='json'} - - The Angular `json` pipe does the same thing. + + + + + The Angular `json` pipe does the same thing. ### slice - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='slice'} - - The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping + + + + + 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. @@ -849,9 +891,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### lowercase - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='lowercase'} - - The Angular `lowercase` pipe does the same thing. + + + + + The Angular `lowercase` pipe does the same thing. ### number - <td>{{movie.starRating | number}}</td> + <td>{{movie.starRating | number}}</td> Formats a number as text. @@ -873,9 +917,11 @@ For more information on pipes, see [Pipes](guide/pipes). ### number - {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='number'} - - The Angular `number` pipe is similar. + + + + + The Angular `number` pipe is similar. It provides more functionality when defining the decimal places, as shown in the second example above. @@ -999,9 +1045,11 @@ The Angular code is shown using TypeScript. ### Angular modules - {@example 'cb-ajs-quick-reference/ts/src/app/app.module.1.ts'} - - Angular modules, defined with the `NgModule` decorator, serve the same purpose: + + + + + Angular modules, 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. @@ -1035,9 +1083,11 @@ The Angular code is shown using TypeScript. ### Component decorator - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='component'} - - Angular adds a decorator to the component class to provide any required metadata. + + + + + 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. @@ -1067,9 +1117,11 @@ The Angular code is shown using TypeScript. ### Component class - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='class'} - - In Angular, you create a 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. @@ -1102,9 +1154,11 @@ The Angular code is shown using TypeScript. ### Dependency injection - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='di'} - - In Angular, you pass in dependencies as arguments to the component class constructor. + + + + + 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. @@ -1173,16 +1227,20 @@ also encapsulate a style sheet within a specific component. ### Link tag - {@example 'cb-ajs-quick-reference/ts/src/index.html' region='style'} - - In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file. + + + + + In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file. But now you can also encapsulate styles for your components. ### StyleUrls In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define a style sheet for a particular component. - {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='style-url'} - - This allows you to set appropriate styles for individual components that won’t leak into + + + + + This allows you to set appropriate styles for individual components that won’t leak into other parts of the application.