From d79adb2422907f9cc652b570db6d48f9a080cca3 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin
Date: Tue, 9 Aug 2016 17:38:25 +0100
Subject: [PATCH] docs(rc5): update docs and plunkers for rc5
---
gulpfile.js | 2 +-
package.json | 2 +-
.../_examples/animations/ts/app/app.module.ts | 33 +
.../ts/app/hero-team-builder.component.ts | 22 -
.../docs/_examples/animations/ts/app/main.ts | 7 +-
.../architecture/ts/app/app.component.ts | 9 +-
.../architecture/ts/app/app.module.ts | 36 ++
.../ts/app/hero-detail.component.ts | 3 +-
.../ts/app/hero-list.component.ts | 9 +-
.../_examples/architecture/ts/app/main.ts | 14 +-
.../_examples/architecture/ts/app/mini-app.ts | 45 ++
.../ts/app/sales-tax.component.ts | 2 +-
.../ts/mini-app.html} | 11 +-
.../ts/app/app.component.ts | 6 +-
.../attribute-directives/ts/app/app.module.ts | 16 +
.../attribute-directives/ts/app/main.ts | 8 +-
.../ts/app/app.component.ts | 5 -
.../ts/app/app.module.1.ts | 12 +
.../ts/app/app.module.ts | 23 +
.../ts/app/app.routes.ts | 8 +-
.../cb-a1-a2-quick-reference/ts/app/main.1.ts | 5 -
.../cb-a1-a2-quick-reference/ts/app/main.ts | 9 +-
.../ts/app/movie-list.component.ts | 7 +-
.../ts/app/app.component.ts | 27 +-
.../ts/app/app.module.ts | 48 ++
.../ts/app/countdown-parent.component.ts | 2 -
.../ts/app/hero-parent.component.ts | 4 +-
.../cb-component-communication/ts/app/main.ts | 6 +-
.../ts/app/missioncontrol.component.ts | 2 -
.../ts/app/name-parent.component.ts | 5 +-
.../ts/app/version-parent.component.ts | 5 +-
.../ts/app/votetaker.component.ts | 5 +-
.../ts/app/app.module.ts | 15 +
.../ts/app/main.ts | 6 +-
.../ts/app/app.component.ts | 17 -
.../ts/app/app.module.ts | 74 +++
.../ts/app/hero-bios.component.ts | 4 -
.../cb-dependency-injection/ts/app/main.ts | 23 +-
.../ts/app/parent-finder.component.ts | 17 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
.../cb-dynamic-form-deprecated/ts/app/main.ts | 3 +-
.../cb-dynamic-form/ts/app/app.component.ts | 2 -
.../cb-dynamic-form/ts/app/app.module.ts | 18 +
.../ts/app/dynamic-form-question.component.ts | 5 +-
.../ts/app/dynamic-form.component.ts | 10 +-
.../_examples/cb-dynamic-form/ts/app/main.ts | 12 +-
.../ts/app/app.module.ts | 19 +
.../cb-set-document-title/ts/app/main.ts | 22 +-
.../hero-di-inject-additional.component.js | 18 +-
.../js/app/hero-di-inject.component.js | 22 +-
.../js/app/hero-di-inline.component.js | 13 +-
.../cb-ts-to-js/js/app/hero-di.component.js | 11 +
.../cb-ts-to-js/js/app/hero-dsl.component.js | 10 +-
.../cb-ts-to-js/js/app/hero-io.component.js | 17 +-
.../js/app/hero-lifecycle.component.js | 10 +-
.../cb-ts-to-js/js/app/hero.component.js | 10 +
.../js/app/heroes-bindings.component.js | 11 +-
.../js/app/heroes-queries.component.js | 25 +-
.../docs/_examples/cb-ts-to-js/js/app/main.js | 29 +-
.../hero-di-inject-additional.component.ts | 21 +-
.../ts/app/hero-di-inject.component.ts | 13 +-
.../cb-ts-to-js/ts/app/hero-di.component.ts | 13 +-
.../cb-ts-to-js/ts/app/hero-io.component.ts | 27 +-
.../ts/app/hero-lifecycle.component.ts | 17 +-
.../cb-ts-to-js/ts/app/hero.component.ts | 12 +
.../ts/app/heroes-bindings.component.ts | 19 +-
.../ts/app/heroes-queries.component.ts | 23 +-
.../docs/_examples/cb-ts-to-js/ts/app/main.ts | 39 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
.../component-styles/ts/app/app.module.ts | 23 +
.../ts/app/hero-app-main.component.ts | 6 +-
.../ts/app/hero-app.component.ts | 4 +-
.../ts/app/hero-details.component.ts | 4 +-
.../_examples/component-styles/ts/app/main.ts | 7 +-
.../ts/app/app.component.1.ts | 6 +-
.../ts/app/app.component.2.ts | 17 +-
.../ts/app/app.component.ts | 22 +-
.../dependency-injection/ts/app/app.module.ts | 36 ++
.../ts/app/heroes/hero-list.component.2.ts | 2 +-
.../ts/app/heroes/heroes.component.1.ts | 19 +-
.../ts/app/heroes/heroes.component.ts | 4 +-
.../dependency-injection/ts/app/main.1.ts | 13 -
.../dependency-injection/ts/app/main.ts | 8 +-
.../displaying-data/ts/app/app.component.3.ts | 1 +
.../displaying-data/ts/app/app.component.ts | 1 +
.../displaying-data/ts/app/app.module.ts | 16 +
.../_examples/displaying-data/ts/app/main.ts | 6 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
.../_examples/forms/js/app/app.component.js | 3 +-
.../docs/_examples/forms/js/app/app.module.js | 19 +
.../forms/js/app/hero-form.component.js | 4 +-
public/docs/_examples/forms/js/app/main.js | 7 +-
public/docs/_examples/forms/js/index.html | 1 +
.../_examples/forms/ts/app/app.component.ts | 6 +-
.../docs/_examples/forms/ts/app/app.module.ts | 20 +
.../forms/ts/app/hero-form.component.html | 67 +-
.../forms/ts/app/hero-form.component.ts | 3 +-
public/docs/_examples/forms/ts/app/main.ts | 15 +-
public/docs/_examples/forms/ts/index.html | 3 +-
.../ts/app/app.module.ts | 43 ++
.../ts/app/heroes-list.component.ts | 5 +-
.../ts/app/main.ts | 15 +-
.../homepage-hello-world/ts/app/app.module.ts | 16 +
.../homepage-hello-world/ts/app/main.ts | 7 +-
.../homepage-todo/ts/app/app.module.ts | 16 +
.../_examples/homepage-todo/ts/app/main.ts | 7 +-
.../_examples/lifecycle-hooks/e2e-spec.ts | 2 +-
.../ts/app/after-content.component.ts | 3 +-
.../ts/app/after-view.component.ts | 10 +-
.../lifecycle-hooks/ts/app/app.component.ts | 23 +-
.../lifecycle-hooks/ts/app/app.module.ts | 67 ++
.../ts/app/counter.component.ts | 5 +-
.../ts/app/do-check-parent.component.html | 13 +
.../ts/app/do-check.component.ts | 5 +-
.../_examples/lifecycle-hooks/ts/app/main.ts | 8 +-
.../ts/app/on-changes-parent.component.html | 1 -
.../ts/app/on-changes.component.ts | 4 +-
.../ts/app/peek-a-boo-parent.component.ts | 4 +-
.../lifecycle-hooks/ts/app/spy.component.ts | 2 -
public/docs/_examples/package.json | 20 +-
.../_examples/pipes/ts/app/app.component.ts | 21 +-
.../docs/_examples/pipes/ts/app/app.module.ts | 48 ++
.../app/flying-heroes-impure.component.html | 38 ++
.../pipes/ts/app/flying-heroes.component.ts | 8 +-
.../pipes/ts/app/flying-heroes.pipe.ts | 2 +-
.../pipes/ts/app/hero-list.component.ts | 5 +-
public/docs/_examples/pipes/ts/app/main.ts | 8 +-
.../app/power-boost-calculator.component.ts | 5 +-
.../pipes/ts/app/power-booster.component.ts | 5 +-
.../_examples/quickstart/js/app/app.module.js | 15 +
.../docs/_examples/quickstart/js/app/main.js | 6 +-
.../docs/_examples/quickstart/js/index.html | 1 +
.../_examples/quickstart/js/package.1.json | 20 +-
.../_examples/quickstart/ts/app/app.module.ts | 12 +
.../docs/_examples/quickstart/ts/app/main.ts | 8 +-
.../_examples/quickstart/ts/package.1.json | 20 +-
.../_examples/quickstart/ts/typings.1.json | 2 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
public/docs/_examples/router/e2e-spec.ts | 32 +-
.../router/ts/app/app.component.1.ts | 10 +-
.../router/ts/app/app.component.2.ts | 25 +-
.../router/ts/app/app.component.3.ts | 8 +-
.../router/ts/app/app.component.4.ts | 11 +-
.../_examples/router/ts/app/app.component.ts | 11 +-
.../_examples/router/ts/app/app.module.1.ts | 35 +
.../_examples/router/ts/app/app.module.2.ts | 35 +
.../_examples/router/ts/app/app.module.3.ts | 33 +
.../_examples/router/ts/app/app.module.4.ts | 28 +
.../_examples/router/ts/app/app.module.ts | 35 +
.../_examples/router/ts/app/app.routes.3.ts | 15 -
.../_examples/router/ts/app/app.routes.4.ts | 14 -
.../_examples/router/ts/app/app.routes.5.ts | 19 -
.../_examples/router/ts/app/app.routes.ts | 22 -
.../app/{app.routes.1.ts => app.routing.1.ts} | 18 +-
.../app/{app.routes.2.ts => app.routing.2.ts} | 10 +-
.../_examples/router/ts/app/app.routing.3.ts | 15 +
.../_examples/router/ts/app/app.routing.4.ts | 12 +
.../_examples/router/ts/app/app.routing.5.ts | 15 +
.../_examples/router/ts/app/app.routing.ts | 45 ++
.../router/ts/app/auth-guard.service.ts | 5 +-
.../ts/app/can-deactivate-guard.service.1.ts | 32 +
.../ts/app/can-deactivate-guard.service.ts | 2 +-
.../crisis-center/crisis-admin.component.1.ts | 3 +-
.../crisis-center/crisis-admin.component.ts | 17 +-
.../crisis-center.component.1.ts | 18 -
.../crisis-center/crisis-center.component.ts | 12 +-
.../crisis-center/crisis-center.module.1.ts | 32 +
.../app/crisis-center/crisis-center.module.ts | 42 ++
...routes.1.ts => crisis-center.routing.1.ts} | 7 +-
...routes.2.ts => crisis-center.routing.2.ts} | 7 +-
...routes.3.ts => crisis-center.routing.3.ts} | 7 +-
...routes.4.ts => crisis-center.routing.4.ts} | 7 +-
...r.routes.ts => crisis-center.routing.5.ts} | 21 +-
.../crisis-center/crisis-center.routing.ts | 50 ++
.../crisis-detail-resolve.service.ts | 25 +
.../crisis-detail.component.1.ts | 18 +-
.../crisis-center/crisis-detail.component.ts | 51 +-
.../crisis-center/crisis-list.component.1.ts | 3 +-
.../crisis-center/crisis-list.component.ts | 5 +-
.../ts/app/heroes/hero-detail.component.1.ts | 5 +-
.../ts/app/heroes/hero-detail.component.2.ts | 2 +-
.../ts/app/heroes/hero-detail.component.ts | 7 +-
.../ts/app/heroes/hero-list.component.ts | 5 +-
.../router/ts/app/heroes/heroes.module.1.ts | 25 +
.../router/ts/app/heroes/heroes.module.ts | 30 +
.../{heroes.routes.ts => heroes.routing.ts} | 7 +-
.../router/ts/app/login.component.1.ts | 46 ++
.../router/ts/app/login.component.ts | 18 +-
.../_examples/router/ts/app/login.routes.ts | 11 -
.../_examples/router/ts/app/login.routing.ts | 14 +
public/docs/_examples/router/ts/app/main.1.ts | 25 -
public/docs/_examples/router/ts/app/main.2.ts | 33 -
public/docs/_examples/router/ts/app/main.3.ts | 11 -
public/docs/_examples/router/ts/app/main.ts | 12 +-
public/docs/_examples/router/ts/index.2.html | 36 --
public/docs/_examples/router/ts/plnkr.json | 3 +-
.../security/ts/app/app.component.ts | 9 +-
.../_examples/security/ts/app/app.module.ts | 18 +
public/docs/_examples/security/ts/app/main.ts | 8 +-
.../ts/app/app.component.ts | 19 +-
.../ts/app/app.module.1.ts | 22 +
.../server-communication/ts/app/app.module.ts | 41 ++
.../server-communication/ts/app/main.ts | 32 +-
.../ts/app/wiki/wiki-smart.component.ts | 3 +-
.../ts/app/wiki/wiki.component.ts | 3 +-
.../ts/app/wiki/wikipedia.service.ts | 2 +-
.../ts/app/app.module.ts | 18 +
.../structural-directives/ts/app/main.ts | 7 +-
.../ts/app/structural-directives.component.ts | 5 +-
.../style-guide/ts/01-01/app/app.component.ts | 5 +-
.../style-guide/ts/01-01/app/app.module.ts | 27 +
.../01-01/app/heroes/hero.component.avoid.ts | 15 +-
.../_examples/style-guide/ts/01-01/main.ts | 6 +-
.../style-guide/ts/02-07/app/app.component.ts | 6 +-
.../style-guide/ts/02-07/app/app.module.ts | 19 +
.../style-guide/ts/02-08/app/app.component.ts | 5 +-
.../style-guide/ts/02-08/app/app.module.ts | 17 +
.../style-guide/ts/03-01/app/app.module.ts | 15 +
.../style-guide/ts/03-02/app/app.module.ts | 17 +
.../style-guide/ts/03-03/app/app.module.ts | 15 +
.../style-guide/ts/03-04/app/app.module.ts | 17 +
.../style-guide/ts/03-05/app/app.module.ts | 19 +
.../style-guide/ts/03-06/app/app.module.ts | 17 +
.../style-guide/ts/04-10/app/+heroes/index.ts | 1 -
.../style-guide/ts/04-10/app/app.component.ts | 10 +-
.../style-guide/ts/04-10/app/app.module.ts | 22 +
.../heroes.component.avoid.ts | 1 +
.../{+heroes => heroes}/heroes.component.html | 0
.../{+heroes => heroes}/heroes.component.ts | 4 -
.../style-guide/ts/04-10/app/index.ts | 3 -
.../ts/04-10/app/shared/shared.module.ts | 20 +
.../style-guide/ts/04-14/app/app.component.ts | 5 +-
.../style-guide/ts/04-14/app/app.module.ts | 19 +
.../style-guide/ts/05-02/app/app.component.ts | 5 +-
.../style-guide/ts/05-02/app/app.module.ts | 17 +
.../style-guide/ts/05-03/app/app.component.ts | 5 +-
.../style-guide/ts/05-03/app/app.module.ts | 17 +
.../style-guide/ts/05-04/app/app.component.ts | 5 +-
.../style-guide/ts/05-04/app/app.module.ts | 19 +
.../style-guide/ts/05-12/app/app.component.ts | 5 +-
.../style-guide/ts/05-12/app/app.module.ts | 17 +
.../style-guide/ts/05-13/app/app.component.ts | 5 +-
.../style-guide/ts/05-13/app/app.module.ts | 17 +
.../style-guide/ts/05-14/app/app.component.ts | 5 +-
.../style-guide/ts/05-14/app/app.module.ts | 17 +
.../style-guide/ts/05-15/app/app.component.ts | 3 +-
.../style-guide/ts/05-15/app/app.module.ts | 19 +
.../style-guide/ts/05-16/app/app.component.ts | 5 +-
.../style-guide/ts/05-16/app/app.module.ts | 19 +
.../style-guide/ts/05-17/app/app.component.ts | 5 +-
.../style-guide/ts/05-17/app/app.module.ts | 20 +
.../heroes/hero-list/hero-list.component.ts | 4 +-
.../05-17/app/heroes/hero/hero.component.ts | 13 +
.../ts/05-17/app/heroes/hero/index.ts | 1 +
.../style-guide/ts/05-17/app/heroes/index.ts | 1 +
.../style-guide/ts/06-01/app/app.component.ts | 5 +-
.../style-guide/ts/06-01/app/app.module.ts | 17 +
.../style-guide/ts/06-03/app/app.component.ts | 5 +-
.../style-guide/ts/06-03/app/app.module.ts | 17 +
.../style-guide/ts/07-01/app/app.module.ts | 17 +
.../style-guide/ts/07-03/app/app.component.ts | 3 +-
.../style-guide/ts/07-03/app/app.module.ts | 19 +
.../style-guide/ts/07-04/app/app.module.ts | 17 +
.../style-guide/ts/09-01/app/app.component.ts | 5 +-
.../style-guide/ts/09-01/app/app.module.ts | 17 +
.../style-guide/ts/app/app.component.ts | 4 +-
.../style-guide/ts/app/app.routes.ts | 107 ++--
.../docs/_examples/style-guide/ts/app/main.ts | 109 +++-
.../style-guide/ts/systemjs.custom.js | 3 +-
public/docs/_examples/styleguide/js/app.js | 14 +-
.../_examples/styleguide/ts/app/app.module.ts | 11 +
.../docs/_examples/styleguide/ts/app/main.ts | 8 +-
public/docs/_examples/systemjs.config.js | 3 -
.../systemjs.config.plunker.build.js | 105 +++
.../docs/_examples/systemjs.config.plunker.js | 19 +-
.../template-syntax/ts/app/app.component.html | 3 +-
.../template-syntax/ts/app/app.component.ts | 10 +-
.../template-syntax/ts/app/app.module.1.ts | 18 +
.../template-syntax/ts/app/app.module.ts | 23 +
.../_examples/template-syntax/ts/app/main.ts | 6 +-
.../docs/_examples/toh-1/ts/app/app.module.ts | 18 +
public/docs/_examples/toh-1/ts/app/main.ts | 11 +-
.../docs/_examples/toh-2/ts/app/app.module.ts | 18 +
public/docs/_examples/toh-2/ts/app/main.ts | 9 +-
.../_examples/toh-3/ts/app/app.component.ts | 8 +-
.../docs/_examples/toh-3/ts/app/app.module.ts | 24 +
public/docs/_examples/toh-3/ts/app/main.ts | 7 +-
.../_examples/toh-4/ts/app/app.component.1.ts | 2 -
.../_examples/toh-4/ts/app/app.component.ts | 2 -
.../docs/_examples/toh-4/ts/app/app.module.ts | 19 +
public/docs/_examples/toh-4/ts/app/main.1.ts | 7 +-
public/docs/_examples/toh-4/ts/app/main.ts | 7 +-
.../_examples/toh-5/ts/app/app.component.1.ts | 15 +-
.../_examples/toh-5/ts/app/app.component.2.ts | 15 +-
.../_examples/toh-5/ts/app/app.component.3.ts | 13 +-
.../_examples/toh-5/ts/app/app.component.ts | 11 +-
.../_examples/toh-5/ts/app/app.module.1.ts | 28 +
.../_examples/toh-5/ts/app/app.module.2.ts | 30 +
.../_examples/toh-5/ts/app/app.module.3.ts | 47 ++
.../docs/_examples/toh-5/ts/app/app.module.ts | 34 +
.../_examples/toh-5/ts/app/app.routes.2.ts | 14 -
.../_examples/toh-5/ts/app/app.routing.1.ts | 17 +
.../app/{app.routes.1.ts => app.routing.2.ts} | 11 +-
.../ts/app/{app.routes.ts => app.routing.ts} | 12 +-
.../toh-5/ts/app/hero-detail.component.ts | 15 +-
public/docs/_examples/toh-5/ts/app/main.ts | 11 +-
.../_examples/toh-6/ts/app/app.component.ts | 12 +-
.../_examples/toh-6/ts/app/app.module.1.ts | 44 ++
.../_examples/toh-6/ts/app/app.module.2.ts | 44 ++
.../docs/_examples/toh-6/ts/app/app.module.ts | 45 ++
.../ts/app/{app.routes.ts => app.routing.ts} | 12 +-
.../toh-6/ts/app/dashboard.component.ts | 6 +-
.../toh-6/ts/app/hero-detail.component.ts | 13 +-
.../toh-6/ts/app/heroes.component.ts | 4 +-
public/docs/_examples/toh-6/ts/app/main.ts | 37 +-
public/docs/_examples/typings.json | 2 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
...pec.ts => checkmark.pipe.spec.ts.disabled} | 5 +-
...spec.ts => phone.service.spec.ts.disabled} | 0
...> phone-detail.component.spec.ts.disabled} | 0
... => phone-list.component.spec.ts.disabled} | 0
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
...pec.ts => checkmark.pipe.spec.ts.disabled} | 0
...spec.ts => phone.service.spec.ts.disabled} | 0
.../upgrade-phonecat-3-final/ts/app/main.ts | 18 +-
...> phone-detail.component.spec.ts.disabled} | 0
... => phone-list.component.spec.ts.disabled} | 0
.../user-input/ts/app/app.component.ts | 20 +-
.../_examples/user-input/ts/app/app.module.ts | 37 ++
.../docs/_examples/user-input/ts/app/main.ts | 6 +-
.../{e2e-spec.ts => e2e-spec.ts.disabled} | 0
.../_examples/webpack/ts/package.webpack.json | 16 +-
.../webpack/ts/src/app/app.component.spec.ts | 13 +-
.../webpack/ts/src/app/app.module.ts | 16 +
public/docs/_examples/webpack/ts/src/main.ts | 6 +-
.../docs/_examples/webpack/ts/typings.1.json | 2 +-
public/docs/js/latest/_data.json | 2 +-
public/docs/js/latest/guide/_data.json | 2 +-
.../js/latest/guide/forms-deprecated.jade | 2 +-
public/docs/js/latest/quickstart.jade | 96 ++-
public/docs/ts/latest/_data.json | 2 +-
public/docs/ts/latest/cookbook/_data.json | 8 +-
.../cookbook/a1-a2-quick-reference.jade | 58 +-
.../latest/cookbook/dependency-injection.jade | 33 +-
.../cookbook/dynamic-form-deprecated.jade | 2 +-
.../docs/ts/latest/cookbook/dynamic-form.jade | 31 +-
.../latest/cookbook/set-document-title.jade | 21 +-
public/docs/ts/latest/glossary.jade | 144 ++++-
public/docs/ts/latest/guide/_data.json | 6 +-
public/docs/ts/latest/guide/architecture.jade | 222 +++----
.../ts/latest/guide/attribute-directives.jade | 15 +-
.../ts/latest/guide/dependency-injection.jade | 46 +-
.../docs/ts/latest/guide/displaying-data.jade | 5 +-
.../ts/latest/guide/forms-deprecated.jade | 2 +-
public/docs/ts/latest/guide/forms.jade | 160 ++---
.../hierarchical-dependency-injection.jade | 8 +-
public/docs/ts/latest/guide/pipes.jade | 8 +-
public/docs/ts/latest/guide/router.jade | 600 ++++++++++++------
.../ts/latest/guide/server-communication.jade | 43 +-
.../latest/guide/structural-directives.jade | 2 +-
public/docs/ts/latest/guide/style-guide.jade | 7 +
.../docs/ts/latest/guide/template-syntax.jade | 14 +-
public/docs/ts/latest/guide/testing.jade | 5 +
public/docs/ts/latest/guide/upgrade.jade | 5 +
public/docs/ts/latest/guide/webpack.jade | 6 +-
public/docs/ts/latest/quickstart.jade | 86 ++-
public/docs/ts/latest/tutorial/toh-pt1.jade | 21 +-
public/docs/ts/latest/tutorial/toh-pt2.jade | 1 +
public/docs/ts/latest/tutorial/toh-pt3.jade | 47 +-
public/docs/ts/latest/tutorial/toh-pt4.jade | 2 +
public/docs/ts/latest/tutorial/toh-pt5.jade | 130 ++--
public/docs/ts/latest/tutorial/toh-pt6.jade | 80 +--
tools/plunker-builder/plunkerBuilder.js | 10 +-
374 files changed, 4612 insertions(+), 2294 deletions(-)
create mode 100644 public/docs/_examples/animations/ts/app/app.module.ts
create mode 100644 public/docs/_examples/architecture/ts/app/app.module.ts
create mode 100644 public/docs/_examples/architecture/ts/app/mini-app.ts
rename public/docs/_examples/{router/ts/index.3.html => architecture/ts/mini-app.html} (68%)
create mode 100644 public/docs/_examples/attribute-directives/ts/app/app.module.ts
create mode 100644 public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
delete mode 100644 public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts
create mode 100644 public/docs/_examples/cb-component-communication/ts/app/app.module.ts
create mode 100644 public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts
create mode 100644 public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
rename public/docs/_examples/cb-dynamic-form-deprecated/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts
create mode 100644 public/docs/_examples/cb-set-document-title/ts/app/app.module.ts
rename public/docs/_examples/cli-quickstart/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/component-styles/ts/app/app.module.ts
create mode 100644 public/docs/_examples/dependency-injection/ts/app/app.module.ts
delete mode 100644 public/docs/_examples/dependency-injection/ts/app/main.1.ts
create mode 100644 public/docs/_examples/displaying-data/ts/app/app.module.ts
rename public/docs/_examples/forms-deprecated/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/forms/js/app/app.module.js
create mode 100644 public/docs/_examples/forms/ts/app/app.module.ts
create mode 100644 public/docs/_examples/hierarchical-dependency-injection/ts/app/app.module.ts
create mode 100644 public/docs/_examples/homepage-hello-world/ts/app/app.module.ts
create mode 100644 public/docs/_examples/homepage-todo/ts/app/app.module.ts
create mode 100644 public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts
create mode 100644 public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html
create mode 100644 public/docs/_examples/pipes/ts/app/app.module.ts
create mode 100644 public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html
create mode 100644 public/docs/_examples/quickstart/js/app/app.module.js
create mode 100644 public/docs/_examples/quickstart/ts/app/app.module.ts
rename public/docs/_examples/router-deprecated/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/router/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/router/ts/app/app.module.2.ts
create mode 100644 public/docs/_examples/router/ts/app/app.module.3.ts
create mode 100644 public/docs/_examples/router/ts/app/app.module.4.ts
create mode 100644 public/docs/_examples/router/ts/app/app.module.ts
delete mode 100644 public/docs/_examples/router/ts/app/app.routes.3.ts
delete mode 100644 public/docs/_examples/router/ts/app/app.routes.4.ts
delete mode 100644 public/docs/_examples/router/ts/app/app.routes.5.ts
delete mode 100644 public/docs/_examples/router/ts/app/app.routes.ts
rename public/docs/_examples/router/ts/app/{app.routes.1.ts => app.routing.1.ts} (73%)
rename public/docs/_examples/router/ts/app/{app.routes.2.ts => app.routing.2.ts} (67%)
create mode 100644 public/docs/_examples/router/ts/app/app.routing.3.ts
create mode 100644 public/docs/_examples/router/ts/app/app.routing.4.ts
create mode 100644 public/docs/_examples/router/ts/app/app.routing.5.ts
create mode 100644 public/docs/_examples/router/ts/app/app.routing.ts
create mode 100644 public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts
delete mode 100644 public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
create mode 100644 public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
create mode 100644 public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
rename public/docs/_examples/router/ts/app/crisis-center/{crisis-center.routes.1.ts => crisis-center.routing.1.ts} (72%)
rename public/docs/_examples/router/ts/app/crisis-center/{crisis-center.routes.2.ts => crisis-center.routing.2.ts} (77%)
rename public/docs/_examples/router/ts/app/crisis-center/{crisis-center.routes.3.ts => crisis-center.routing.3.ts} (86%)
rename public/docs/_examples/router/ts/app/crisis-center/{crisis-center.routes.4.ts => crisis-center.routing.4.ts} (87%)
rename public/docs/_examples/router/ts/app/crisis-center/{crisis-center.routes.ts => crisis-center.routing.5.ts} (63%)
create mode 100644 public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
create mode 100644 public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
create mode 100644 public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts
create mode 100644 public/docs/_examples/router/ts/app/heroes/heroes.module.ts
rename public/docs/_examples/router/ts/app/heroes/{heroes.routes.ts => heroes.routing.ts} (68%)
create mode 100644 public/docs/_examples/router/ts/app/login.component.1.ts
delete mode 100644 public/docs/_examples/router/ts/app/login.routes.ts
create mode 100644 public/docs/_examples/router/ts/app/login.routing.ts
delete mode 100644 public/docs/_examples/router/ts/app/main.1.ts
delete mode 100644 public/docs/_examples/router/ts/app/main.2.ts
delete mode 100644 public/docs/_examples/router/ts/app/main.3.ts
delete mode 100644 public/docs/_examples/router/ts/index.2.html
create mode 100644 public/docs/_examples/security/ts/app/app.module.ts
create mode 100644 public/docs/_examples/server-communication/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/server-communication/ts/app/app.module.ts
create mode 100644 public/docs/_examples/structural-directives/ts/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/01-01/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/02-07/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/02-08/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-01/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-02/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-04/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/app.module.ts
delete mode 100644 public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/app.module.ts
rename public/docs/_examples/style-guide/ts/04-10/app/{+heroes => heroes}/heroes.component.avoid.ts (94%)
rename public/docs/_examples/style-guide/ts/04-10/app/{+heroes => heroes}/heroes.component.html (100%)
rename public/docs/_examples/style-guide/ts/04-10/app/{+heroes => heroes}/heroes.component.ts (86%)
delete mode 100644 public/docs/_examples/style-guide/ts/04-10/app/index.ts
create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-02/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-03/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-04/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-12/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-13/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-14/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-15/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-16/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-17/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts
create mode 100644 public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts
create mode 100644 public/docs/_examples/style-guide/ts/06-01/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/06-03/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/07-01/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/07-03/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/07-04/app/app.module.ts
create mode 100644 public/docs/_examples/style-guide/ts/09-01/app/app.module.ts
create mode 100644 public/docs/_examples/styleguide/ts/app/app.module.ts
create mode 100644 public/docs/_examples/systemjs.config.plunker.build.js
create mode 100644 public/docs/_examples/template-syntax/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/template-syntax/ts/app/app.module.ts
create mode 100644 public/docs/_examples/toh-1/ts/app/app.module.ts
create mode 100644 public/docs/_examples/toh-2/ts/app/app.module.ts
create mode 100644 public/docs/_examples/toh-3/ts/app/app.module.ts
create mode 100644 public/docs/_examples/toh-4/ts/app/app.module.ts
create mode 100644 public/docs/_examples/toh-5/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/toh-5/ts/app/app.module.2.ts
create mode 100644 public/docs/_examples/toh-5/ts/app/app.module.3.ts
create mode 100644 public/docs/_examples/toh-5/ts/app/app.module.ts
delete mode 100644 public/docs/_examples/toh-5/ts/app/app.routes.2.ts
create mode 100644 public/docs/_examples/toh-5/ts/app/app.routing.1.ts
rename public/docs/_examples/toh-5/ts/app/{app.routes.1.ts => app.routing.2.ts} (76%)
rename public/docs/_examples/toh-5/ts/app/{app.routes.ts => app.routing.ts} (60%)
create mode 100644 public/docs/_examples/toh-6/ts/app/app.module.1.ts
create mode 100644 public/docs/_examples/toh-6/ts/app/app.module.2.ts
create mode 100644 public/docs/_examples/toh-6/ts/app/app.module.ts
rename public/docs/_examples/toh-6/ts/app/{app.routes.ts => app.routing.ts} (56%)
rename public/docs/_examples/upgrade-adapter/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-2-hybrid/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/{checkmark.pipe.spec.ts => checkmark.pipe.spec.ts.disabled} (92%)
rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/{phone.service.spec.ts => phone.service.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/{phone-detail.component.spec.ts => phone-detail.component.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/{phone-list.component.spec.ts => phone-list.component.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-3-final/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/{checkmark.pipe.spec.ts => checkmark.pipe.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/{phone.service.spec.ts => phone.service.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/{phone-detail.component.spec.ts => phone-detail.component.spec.ts.disabled} (100%)
rename public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/{phone-list.component.spec.ts => phone-list.component.spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/user-input/ts/app/app.module.ts
rename public/docs/_examples/webpack/{e2e-spec.ts => e2e-spec.ts.disabled} (100%)
create mode 100644 public/docs/_examples/webpack/ts/src/app/app.module.ts
diff --git a/gulpfile.js b/gulpfile.js
index 6c5a3a4490..c6e15ae13f 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -595,7 +595,7 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function()
});
gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
- return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log });
+ return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
});
gulp.task('build-dart-cheatsheet', [], function() {
diff --git a/package.json b/package.json
index d5283e3f43..2e848d239c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
"browser-sync": "^2.9.3",
"canonical-path": "0.0.2",
"cheerio": "^0.20.0",
- "codelyzer": "0.0.22",
+ "codelyzer": "0.0.26",
"cross-spawn": "^4.0.0",
"del": "^2.2.0",
"dgeni": "^0.4.0",
diff --git a/public/docs/_examples/animations/ts/app/app.module.ts b/public/docs/_examples/animations/ts/app/app.module.ts
new file mode 100644
index 0000000000..1550034236
--- /dev/null
+++ b/public/docs/_examples/animations/ts/app/app.module.ts
@@ -0,0 +1,33 @@
+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/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
index 0ae7ec519e..e5413be50e 100644
--- a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
+++ b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
@@ -1,16 +1,6 @@
import { Component } from '@angular/core';
import { Heroes } from './hero.service';
-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';
@Component({
selector: 'hero-team-builder',
@@ -97,18 +87,6 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
min-height: 6em;
}
`],
- directives: [
- HeroListBasicComponent,
- HeroListInlineStylesComponent,
- HeroListCombinedTransitionsComponent,
- HeroListTwowayComponent,
- HeroListEnterLeaveComponent,
- HeroListEnterLeaveStatesComponent,
- HeroListAutoComponent,
- HeroListTimingsComponent,
- HeroListMultistepComponent,
- HeroListGroupsComponent
- ],
providers: [Heroes]
})
export class HeroTeamBuilderComponent {
diff --git a/public/docs/_examples/animations/ts/app/main.ts b/public/docs/_examples/animations/ts/app/main.ts
index 3c8422e790..2470c9595e 100644
--- a/public/docs/_examples/animations/ts/app/main.ts
+++ b/public/docs/_examples/animations/ts/app/main.ts
@@ -1,5 +1,4 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { HeroTeamBuilderComponent } from './hero-team-builder.component';
-
-bootstrap(HeroTeamBuilderComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/architecture/ts/app/app.component.ts b/public/docs/_examples/architecture/ts/app/app.component.ts
index 930cf5f045..b987f17e44 100644
--- a/public/docs/_examples/architecture/ts/app/app.component.ts
+++ b/public/docs/_examples/architecture/ts/app/app.component.ts
@@ -1,16 +1,13 @@
// #docregion import
import { Component } from '@angular/core';
// #enddocregion import
-import { HeroListComponent } from './hero-list.component';
-import { SalesTaxComponent } from './sales-tax.component';
@Component({
selector: 'my-app',
template: `
-
-
- `,
- directives: [HeroListComponent, SalesTaxComponent]
+
+
+ `
})
// #docregion export
export class AppComponent { }
diff --git a/public/docs/_examples/architecture/ts/app/app.module.ts b/public/docs/_examples/architecture/ts/app/app.module.ts
new file mode 100644
index 0000000000..f6e64beecd
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/app/app.module.ts
@@ -0,0 +1,36 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+// #docregion imports
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+// #enddocregion imports
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroListComponent } from './hero-list.component';
+import { SalesTaxComponent } from './sales-tax.component';
+import { HeroService } from './hero.service';
+import { BackendService } from './backend.service';
+import { Logger } from './logger.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroDetailComponent,
+ HeroListComponent,
+ SalesTaxComponent
+ ],
+// #docregion providers
+ providers: [
+ BackendService,
+ HeroService,
+ Logger
+ ],
+// #enddocregion providers
+ bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
diff --git a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
index fc2604e53e..b1a93cf7a2 100644
--- a/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/architecture/ts/app/hero-detail.component.ts
@@ -4,8 +4,7 @@ import { Hero } from './hero';
@Component({
selector: 'hero-detail',
- templateUrl: 'app/hero-detail.component.html',
- directives: [HeroDetailComponent]
+ templateUrl: 'app/hero-detail.component.html'
})
export class HeroDetailComponent {
@Input() hero: Hero;
diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts
index eaa21b45fe..868b9251b5 100644
--- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts
+++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts
@@ -1,18 +1,15 @@
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
-// #docregion metadata
+// #docregion metadata, providers
@Component({
selector: 'hero-list',
templateUrl: 'app/hero-list.component.html',
- directives: [HeroDetailComponent],
- // #docregion providers
- providers: [HeroService]
- // #enddocregion providers
+ providers: [ HeroService ]
})
+// #enddocregion providers
// #docregion class
export class HeroListComponent implements OnInit {
// #enddocregion metadata
diff --git a/public/docs/_examples/architecture/ts/app/main.ts b/public/docs/_examples/architecture/ts/app/main.ts
index 4e8c107afd..4acf5de663 100644
--- a/public/docs/_examples/architecture/ts/app/main.ts
+++ b/public/docs/_examples/architecture/ts/app/main.ts
@@ -1,11 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-// #docregion import
-import { AppComponent } from './app.component';
-// #enddocregion import
-import { HeroService } from './hero.service';
-import { BackendService } from './backend.service';
-import { Logger } from './logger.service';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-// #docregion bootstrap
-bootstrap(AppComponent, [BackendService, HeroService, Logger]);
-// #enddocregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/architecture/ts/app/mini-app.ts b/public/docs/_examples/architecture/ts/app/mini-app.ts
new file mode 100644
index 0000000000..8a35a607a2
--- /dev/null
+++ b/public/docs/_examples/architecture/ts/app/mini-app.ts
@@ -0,0 +1,45 @@
+// #docplaster
+// A mini-application
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Logger {
+ log(message: string) { console.log(message); }
+}
+
+// #docregion import-core-component
+import { Component } from '@angular/core';
+// #enddocregion import-core-component
+
+@Component({
+ selector: 'my-app',
+ template: 'Welcome to Angular 2'
+})
+export class AppComponent {
+ constructor(logger: Logger) {
+ logger.log('Let the fun begin!');
+ }
+}
+
+// #docregion module
+import { NgModule } from '@angular/core';
+// #docregion import-browser-module
+import { BrowserModule } from '@angular/platform-browser';
+// #enddocregion import-browser-module
+@NgModule({
+// #docregion ngmodule-imports
+ imports: [ BrowserModule ],
+// #enddocregion ngmodule-imports
+ providers: [ Logger ],
+ declarations: [ AppComponent ],
+ exports: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+// #docregion export
+export class AppModule { }
+// #enddocregion export
+// #enddocregion module
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
index 983e731dc7..02201afe05 100644
--- a/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
+++ b/public/docs/_examples/architecture/ts/app/sales-tax.component.ts
@@ -14,7 +14,7 @@ import { TaxRateService } from './tax-rate.service';
{{ getTax(amountBox.value) | currency:'USD':true:'1.2-2' }}
`,
- providers: [SalesTaxService, TaxRateService]
+ providers: [SalesTaxService, TaxRateService]
})
export class SalesTaxComponent {
constructor(private salesTaxService: SalesTaxService) { }
diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/architecture/ts/mini-app.html
similarity index 68%
rename from public/docs/_examples/router/ts/index.3.html
rename to public/docs/_examples/architecture/ts/mini-app.html
index a142bb6fcc..a17a191e90 100644
--- a/public/docs/_examples/router/ts/index.3.html
+++ b/public/docs/_examples/architecture/ts/mini-app.html
@@ -1,9 +1,7 @@
-
-
- Router Sample v.3
+ Architecture of Angular 2
@@ -17,15 +15,12 @@
- Milestone 3
- loading...
+ Loading...
-
diff --git a/public/docs/_examples/attribute-directives/ts/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/app/app.component.ts
index 711e98f1e2..b8b1fa6f08 100644
--- a/public/docs/_examples/attribute-directives/ts/app/app.component.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/app.component.ts
@@ -1,14 +1,10 @@
// #docregion
import { Component } from '@angular/core';
-import { HighlightDirective } from './highlight.directive';
-
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [HighlightDirective]
+ templateUrl: 'app/app.component.html'
})
export class AppComponent { }
-
// #enddocregion
diff --git a/public/docs/_examples/attribute-directives/ts/app/app.module.ts b/public/docs/_examples/attribute-directives/ts/app/app.module.ts
new file mode 100644
index 0000000000..ca35d560fb
--- /dev/null
+++ b/public/docs/_examples/attribute-directives/ts/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './highlight.directive';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ AppComponent,
+ HighlightDirective
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/attribute-directives/ts/app/main.ts b/public/docs/_examples/attribute-directives/ts/app/main.ts
index 4fc79adda1..4acf5de663 100644
--- a/public/docs/_examples/attribute-directives/ts/app/main.ts
+++ b/public/docs/_examples/attribute-directives/ts/app/main.ts
@@ -1,7 +1,5 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
index cdb9d9fd81..c3eb0c86f4 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts
@@ -1,17 +1,12 @@
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-import { MovieListComponent } from './movie-list.component';
import { MovieService } from './movie.service';
import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
- directives: [MovieListComponent, ROUTER_DIRECTIVES],
- pipes: [StringSafeDatePipe],
providers: [MovieService]
})
export class AppComponent {
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..5b24020186
--- /dev/null
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
new file mode 100644
index 0000000000..08391524b9
--- /dev/null
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
@@ -0,0 +1,23 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { MovieListComponent } from './movie-list.component';
+import { routes } from './app.routes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ RouterModule.forRoot(routes, {})
+ ],
+ declarations: [
+ AppComponent,
+ MovieListComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts
index 1fd2627996..67aa75ed25 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routes.ts
@@ -1,13 +1,9 @@
// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
+import { RouterConfig } from '@angular/router';
import { MovieListComponent } from './movie-list.component';
-const routes: RouterConfig = [
+export const routes: RouterConfig = [
{ path: '', redirectTo: '/movies', pathMatch: 'full' },
{ path: 'movies', component: MovieListComponent }
];
-
-export const appRouterProviders = [
- provideRouter(routes)
-];
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts
deleted file mode 100644
index 67de525937..0000000000
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.1.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
index 7a1d58fad8..4acf5de663 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts
@@ -1,8 +1,5 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-bootstrap(AppComponent, [
- appRouterProviders
-]);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
index 67b0c2873d..dc6fbd6b63 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts
@@ -3,10 +3,8 @@
// #docregion import
import { Component } from '@angular/core';
// #enddocregion import
-import { MovieService } from './movie.service';
import { IMovie } from './movie';
-import { StringSafeDatePipe } from './date.pipe';
-
+import { MovieService } from './movie.service';
// #docregion component
@Component({
@@ -16,9 +14,6 @@ import { StringSafeDatePipe } from './date.pipe';
// #docregion style-url
styleUrls: ['app/movie-list.component.css'],
// #enddocregion style-url
-// #docregion date-pipe
- pipes: [StringSafeDatePipe]
-// #enddocregion date-pipe
})
// #enddocregion component
// #docregion class
diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
index 891b5c86ac..0a3c992498 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts
@@ -1,32 +1,7 @@
import { Component } from '@angular/core';
-import { HeroParentComponent } from './hero-parent.component';
-import { NameParentComponent } from './name-parent.component';
-import { VersionParentComponent } from './version-parent.component';
-import { VoteTakerComponent } from './votetaker.component';
-import { CountdownLocalVarParentComponent,
- CountdownViewChildParentComponent } from './countdown-parent.component';
-import { MissionControlComponent } from './missioncontrol.component';
-
-let directives: any[] = [
- HeroParentComponent,
- NameParentComponent,
- VersionParentComponent,
- VoteTakerComponent,
- MissionControlComponent,
- ];
-
-// Include Countdown examples
-// unless in e2e tests which they break.
-if (!/e2e/.test(location.search)) {
- console.log('adding countdown timer examples');
- directives.push(CountdownLocalVarParentComponent);
- directives.push(CountdownViewChildParentComponent);
-}
-
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: directives
+ templateUrl: 'app/app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.module.ts b/public/docs/_examples/cb-component-communication/ts/app/app.module.ts
new file mode 100644
index 0000000000..2314524aa7
--- /dev/null
+++ b/public/docs/_examples/cb-component-communication/ts/app/app.module.ts
@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { AstronautComponent } from './astronaut.component';
+import { CountdownLocalVarParentComponent, CountdownViewChildParentComponent } from './countdown-parent.component';
+import { CountdownTimerComponent } from './countdown-timer.component';
+import { HeroChildComponent } from './hero-child.component';
+import { HeroParentComponent } from './hero-parent.component';
+import { MissionControlComponent } from './missioncontrol.component';
+import { NameChildComponent } from './name-child.component';
+import { NameParentComponent } from './name-parent.component';
+import { VersionChildComponent } from './version-child.component';
+import { VersionParentComponent } from './version-parent.component';
+import { VoterComponent } from './voter.component';
+import { VoteTakerComponent } from './votetaker.component';
+
+let directives: any[] = [
+ AppComponent,
+ AstronautComponent,
+ CountdownTimerComponent,
+ HeroChildComponent,
+ HeroParentComponent,
+ MissionControlComponent,
+ NameChildComponent,
+ NameParentComponent,
+ VersionChildComponent,
+ VersionParentComponent,
+ VoterComponent,
+ VoteTakerComponent
+ ];
+
+// Include Countdown examples
+// unless in e2e tests which they break.
+if (!/e2e/.test(location.search)) {
+ console.log('adding countdown timer examples');
+ directives.push(CountdownLocalVarParentComponent);
+ directives.push(CountdownViewChildParentComponent);
+}
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: directives,
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
index a89dee52d9..5bcf0645c9 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/countdown-parent.component.ts
@@ -19,7 +19,6 @@ import { CountdownTimerComponent } from './countdown-timer.component';
{{timer.seconds}}
`,
- directives: [CountdownTimerComponent],
styleUrls: ['demo.css']
})
export class CountdownLocalVarParentComponent { }
@@ -36,7 +35,6 @@ export class CountdownLocalVarParentComponent { }
{{ seconds() }}
`,
- directives: [CountdownTimerComponent],
styleUrls: ['demo.css']
})
export class CountdownViewChildParentComponent implements AfterViewInit {
diff --git a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
index 6d82f53a4d..bf3861c455 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/hero-parent.component.ts
@@ -1,7 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroChildComponent } from './hero-child.component';
import { HEROES } from './hero';
@Component({
@@ -12,8 +11,7 @@ import { HEROES } from './hero';
[hero]="hero"
[master]="master">
- `,
- directives: [HeroChildComponent]
+ `
})
export class HeroParentComponent {
heroes = HEROES;
diff --git a/public/docs/_examples/cb-component-communication/ts/app/main.ts b/public/docs/_examples/cb-component-communication/ts/app/main.ts
index ad256f0823..4f325ca43d 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/main.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-bootstrap(AppComponent);
+browserDynamicPlatform().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
index 1c7968bb88..a27e9b16b1 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/missioncontrol.component.ts
@@ -1,7 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { AstronautComponent } from './astronaut.component';
import { MissionService } from './mission.service';
@Component({
@@ -17,7 +16,6 @@ import { MissionService } from './mission.service';
{{event}}
`,
- directives: [AstronautComponent],
providers: [MissionService]
})
export class MissionControlComponent {
diff --git a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
index aa7382503a..699690c067 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/name-parent.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { NameChildComponent } from './name-child.component';
-
@Component({
selector: 'name-parent',
template: `
@@ -10,8 +8,7 @@ import { NameChildComponent } from './name-child.component';
- `,
- directives: [NameChildComponent]
+ `
})
export class NameParentComponent {
// Displays 'Mr. IQ', '', 'Bombasto'
diff --git a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
index cdb590b87a..bbc9101702 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/version-parent.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { VersionChildComponent } from './version-child.component';
-
@Component({
selector: 'version-parent',
template: `
@@ -10,8 +8,7 @@ import { VersionChildComponent } from './version-child.component';
New minor version
New major version
- `,
- directives: [VersionChildComponent]
+ `
})
export class VersionParentComponent {
major: number = 1;
diff --git a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
index 7267185ff1..87f06161f5 100644
--- a/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/app/votetaker.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { VoterComponent } from './voter.component';
-
@Component({
selector: 'vote-taker',
template: `
@@ -12,8 +10,7 @@ import { VoterComponent } from './voter.component';
[name]="voter"
(onVoted)="onVoted($event)">
- `,
- directives: [VoterComponent]
+ `
})
export class VoteTakerComponent {
agreed = 0;
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts
new file mode 100644
index 0000000000..ab79a37ba7
--- /dev/null
+++ b/public/docs/_examples/cb-component-relative-paths/ts/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts b/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts
index 42dbeb9f7d..6af7a5b2ae 100644
--- a/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts
+++ b/public/docs/_examples/cb-component-relative-paths/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
index 578fb06730..ab0d9c445b 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
@@ -1,22 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroBiosComponent,
- HeroBiosAndContactsComponent } from './hero-bios.component';
-import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
-import { HeroesBaseComponent,
- SortedHeroesComponent } from './sorted-heroes.component';
-import { HighlightDirective } from './highlight.directive';
-import { ParentFinderComponent } from './parent-finder.component';
-
-const DIRECTIVES = [
- HeroBiosComponent, HeroBiosAndContactsComponent,
- HeroesBaseComponent, SortedHeroesComponent,
- HeroOfTheMonthComponent,
- HighlightDirective,
- ParentFinderComponent
-];
-
// #docregion import-services
import { LoggerService } from './logger.service';
import { UserContextService } from './user-context.service';
@@ -25,7 +9,6 @@ import { UserService } from './user.service';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
- directives: DIRECTIVES,
// #docregion providers
providers: [LoggerService, UserContextService, UserService]
// #enddocregion providers
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
new file mode 100644
index 0000000000..326ea4e945
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
@@ -0,0 +1,74 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { XHRBackend } from '@angular/http';
+// import { appRouterProviders } from './app.routes';
+import { LocationStrategy,
+ HashLocationStrategy } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { HeroData } from './hero-data';
+import { InMemoryBackendService,
+ SEED_DATA } from 'angular2-in-memory-web-api';
+
+import { AppComponent } from './app.component';
+import { HeroBioComponent } from './hero-bio.component';
+import { HeroBiosComponent,
+ HeroBiosAndContactsComponent } from './hero-bios.component';
+import { HeroOfTheMonthComponent } from './hero-of-the-month.component';
+import { HeroContactComponent } from './hero-contact.component';
+import { HeroesBaseComponent,
+ SortedHeroesComponent } from './sorted-heroes.component';
+import { HighlightDirective } from './highlight.directive';
+import { ParentFinderComponent,
+ AlexComponent,
+ AliceComponent,
+ CarolComponent,
+ ChrisComponent,
+ CraigComponent,
+ CathyComponent,
+ BarryComponent,
+ BethComponent,
+ BobComponent } from './parent-finder.component';
+
+const DIRECTIVES = [
+ HeroBiosComponent, HeroBiosAndContactsComponent, HeroBioComponent,
+ HeroesBaseComponent, SortedHeroesComponent,
+ HeroOfTheMonthComponent, HeroContactComponent,
+ HighlightDirective,
+ ParentFinderComponent,
+ AppComponent
+];
+
+const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
+
+// #docregion C_DIRECTIVES
+const C_DIRECTIVES = [
+ CarolComponent, ChrisComponent, CraigComponent,
+ CathyComponent
+];
+// #enddocregion C_DIRECTIVES
+
+// #docregion bootstrap
+@NgModule({
+ imports: [ BrowserModule, FormsModule ],
+ declarations: [ ...DIRECTIVES,
+ ...B_DIRECTIVES,
+ ...C_DIRECTIVES,
+ AliceComponent,
+ AlexComponent ],
+ bootstrap: [ AppComponent ],
+ providers: [
+ // appRouterProviders, TODO: add routes
+ { provide: LocationStrategy, useClass: HashLocationStrategy },
+
+ { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+ { provide: SEED_DATA, useClass: HeroData } // in-mem server data
+ ]
+})
+export class AppModule {
+ constructor() {
+ }
+}
+// #enddocregion bootstraps
+
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
index 8b738bf04f..217c5edcd0 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-bios.component.ts
@@ -2,8 +2,6 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroContactComponent } from './hero-contact.component';
-import { HeroBioComponent } from './hero-bio.component';
import { HeroService } from './hero.service';
import { LoggerService } from './logger.service';
@@ -15,7 +13,6 @@ import { LoggerService } from './logger.service';
`,
- directives: [HeroBioComponent],
providers: [HeroService]
})
export class HeroBiosComponent {
@@ -39,7 +36,6 @@ export class HeroBiosComponent {
`,
// #enddocregion template
- directives: [HeroBioComponent, HeroContactComponent],
// #docregion class-provider
providers: [HeroService]
// #enddocregion class-provider
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
index c83f329e91..4acf5de663 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/main.ts
@@ -1,22 +1,5 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { XHRBackend } from '@angular/http';
-import { appRouterProviders } from './app.routes';
-import { LocationStrategy,
- HashLocationStrategy } from '@angular/common';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { HeroData } from './hero-data';
-import { InMemoryBackendService,
- SEED_DATA } from 'angular2-in-memory-web-api';
-
-import { AppComponent } from './app.component';
-
-// #docregion bootstrap
-bootstrap(AppComponent, [
- appRouterProviders,
- { provide: LocationStrategy, useClass: HashLocationStrategy },
-
- { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
- { provide: SEED_DATA, useClass: HeroData } // in-mem server data
-]).catch((err: any) => console.error(err));
-// #enddocregion bootstrap
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
index a8e245376c..d5f87d51bd 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/parent-finder.component.ts
@@ -85,13 +85,6 @@ export class CraigComponent {
}
// #enddocregion craig
-// #docregion C_DIRECTIVES
-const C_DIRECTIVES = [
- CarolComponent, ChrisComponent, CraigComponent,
- forwardRef(() => CathyComponent)
-];
-// #enddocregion C_DIRECTIVES
-
//////// B - Parent /////////
// #docregion barry
const templateB = `
@@ -107,7 +100,6 @@ const templateB = `
@Component({
selector: 'barry',
template: templateB,
- directives: C_DIRECTIVES,
providers: [{ provide: Parent, useExisting: forwardRef(() => BarryComponent) }]
})
export class BarryComponent implements Parent {
@@ -121,7 +113,6 @@ export class BarryComponent implements Parent {
@Component({
selector: 'bob',
template: templateB,
- directives: C_DIRECTIVES,
providers: [ provideParent(BobComponent) ]
})
export class BobComponent implements Parent {
@@ -132,7 +123,6 @@ export class BobComponent implements Parent {
@Component({
selector: 'beth',
template: templateB,
- directives: C_DIRECTIVES,
// #docregion beth-providers
providers: [ provideParent(BethComponent, DifferentParent) ]
// #enddocregion beth-providers
@@ -142,8 +132,6 @@ export class BethComponent implements Parent {
constructor( @SkipSelf() @Optional() public parent: Parent ) { }
}
-const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
-
///////// A - Grandparent //////
// #docregion alex, alex-1
@@ -161,7 +149,6 @@ const B_DIRECTIVES = [ BarryComponent, BethComponent, BobComponent ];
providers: [{ provide: Parent, useExisting: forwardRef(() => AlexComponent) }],
// #enddocregion alex-providers
// #docregion alex-1
- directives: C_DIRECTIVES
})
// #enddocregion alex-1
// Todo: Add `... implements Parent` to class signature
@@ -187,7 +174,6 @@ export class AlexComponent extends Base
`,
- directives: [ B_DIRECTIVES, C_DIRECTIVES ],
// #docregion alice-providers
providers: [ provideParent(AliceComponent) ]
// #enddocregion alice-providers
@@ -224,7 +210,6 @@ export class CathyComponent {
template: `
Parent Finder
- `,
- directives: [ AlexComponent, AliceComponent ]
+ `
})
export class ParentFinderComponent { }
diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts b/public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts
rename to public/docs/_examples/cb-dynamic-form-deprecated/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts
index 5a8d9c5044..62ced34a31 100644
--- a/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts
+++ b/public/docs/_examples/cb-dynamic-form-deprecated/ts/app/main.ts
@@ -2,5 +2,4 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
-bootstrap(AppComponent, [])
- .catch((err: any) => console.error(err));
+bootstrap(AppComponent, []);
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
index e51561770e..582daced2e 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.component.ts
@@ -1,7 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { DynamicFormComponent } from './dynamic-form.component';
import { QuestionService } from './question.service';
@Component({
@@ -12,7 +11,6 @@ import { QuestionService } from './question.service';
`,
- directives: [DynamicFormComponent],
providers: [QuestionService]
})
export class AppComponent {
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts b/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts
new file mode 100644
index 0000000000..7a68e45a92
--- /dev/null
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+import { DynamicFormComponent } from './dynamic-form.component';
+import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
+
+@NgModule({
+ imports: [ BrowserModule, ReactiveFormsModule ],
+ declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+ constructor() {
+ }
+}
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
index 3381d1c444..412f2d8c55 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts
@@ -1,13 +1,12 @@
// #docregion
import { Component, Input } from '@angular/core';
-import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
import { QuestionBase } from './question-base';
@Component({
selector: 'df-question',
- templateUrl: 'app/dynamic-form-question.component.html',
- directives: [REACTIVE_FORM_DIRECTIVES]
+ templateUrl: 'app/dynamic-form-question.component.html'
})
export class DynamicFormQuestionComponent {
@Input() question: QuestionBase;
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
index 15730806d1..68bd1f582b 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts
@@ -1,16 +1,14 @@
// #docregion
import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
-import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
-import { QuestionBase } from './question-base';
-import { QuestionControlService } from './question-control.service';
+import { QuestionBase } from './question-base';
+import { QuestionControlService } from './question-control.service';
@Component({
selector: 'dynamic-form',
templateUrl: 'app/dynamic-form.component.html',
- directives: [DynamicFormQuestionComponent, REACTIVE_FORM_DIRECTIVES],
- providers: [QuestionControlService]
+ providers: [ QuestionControlService ]
})
export class DynamicFormComponent implements OnInit {
diff --git a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
index 461ce210c6..4acf5de663 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/app/main.ts
@@ -1,11 +1,5 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, [
- disableDeprecatedForms(),
- provideForms()
-])
-.catch((err: any) => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts b/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts
new file mode 100644
index 0000000000..81f13c244c
--- /dev/null
+++ b/public/docs/_examples/cb-set-document-title/ts/app/app.module.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule, Title } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ providers: [
+ Title
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/cb-set-document-title/ts/app/main.ts b/public/docs/_examples/cb-set-document-title/ts/app/main.ts
index abee7afb87..ba9421d573 100644
--- a/public/docs/_examples/cb-set-document-title/ts/app/main.ts
+++ b/public/docs/_examples/cb-set-document-title/ts/app/main.ts
@@ -1,22 +1,6 @@
-/* tslint:disable */
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-// While Angular supplies a Title service for setting the HTML document title
-// it doesn't include this service as part of the default Browser platform providers.
-// As such, if we want to inject it into the components within our application,
-// we have to explicitly provide the Angular service in our top component.
-// #docregion bootstrap-title
-import { Title } from '@angular/platform-browser';
-
-bootstrap(AppComponent, [ Title ])
-// #enddocregion bootstrap-title
- .then(
- () => window.console.info( 'Angular finished bootstrapping your application!' ),
- (error) => {
- console.warn( 'Angular was not able to bootstrap your application.' );
- console.error( error );
- }
- );
+browserDynamicPlatform().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index 413ccfc8f3..153e83c06f 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -36,12 +36,22 @@
selector: 'hero-di-inject-additional',
template: '' +
' ' +
- ' ',
- directives: [TitleComponent]
+ ''
}).Class({
constructor: function() { }
});
-
- app.HeroDIInjectAdditionalComponent = AppComponent;
+
+ app.HeroesDIInjectAdditionalModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [
+ AppComponent,
+ TitleComponent
+ ],
+ bootstrap: [ AppComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index 71bdbb57f9..dfda83e1f0 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -15,7 +15,16 @@
];
// #enddocregion parameters
- app.HeroDIInjectComponent = HeroComponent;
+ app.HeroesDIInjectModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
@@ -34,6 +43,15 @@
});
// #enddocregion ctor
- app.HeroDIInjectComponent2 = HeroComponent;
+ app.HeroesDIInjectModule2 =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
index 90c3d69cba..1fe9c38cb1 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
@@ -12,5 +12,16 @@
}]
});
// #enddocregion
- app.HeroDIInlineComponent = HeroComponent;
+
+ app.HeroDIInlineModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ providers: [ app.DataService ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
+
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index 2963258292..55c576b836 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -17,4 +17,15 @@
];
// #enddocregion
+ app.HeroesDIModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ providers: [ app.DataService ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
+
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
index 2890e006a2..5dd84733f3 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
@@ -17,7 +17,15 @@
});
// #enddocregion component
- app.HeroComponentDsl = HeroComponent;
+ app.HeroesDslModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index f00ce8065c..79aef12125 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -42,8 +42,7 @@
'(cancel)="onCancel()">' +
'' +
'OK clicked ' +
- 'Cancel clicked ',
- directives: [ConfirmComponent]
+ 'Cancel clicked '
})
];
AppComponent.prototype.onOk = function() {
@@ -52,6 +51,18 @@
AppComponent.prototype.onCancel = function() {
this.cancelClicked = true;
}
- app.HeroIOComponent = AppComponent;
+
+ app.HeroesIOModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [
+ AppComponent,
+ ConfirmComponent
+ ],
+ bootstrap: [ AppComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index b8a2148a64..3e81c72e4e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -16,6 +16,14 @@
};
// #enddocregion
- app.HeroLifecycleComponent = HeroComponent;
+ app.HeroesLifecycleModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index f741285617..c6a58acc56 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -25,6 +25,16 @@
// #enddocregion constructorproto
// #enddocregion metadata
+ app.HeroesModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
+
// #docregion appexport
app.HeroComponent = HeroComponent;
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
index 0c4ee7d7cf..3a562d6912 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
@@ -25,6 +25,15 @@
}
});
// #enddocregion
- app.HeroesHostBindingsComponent = HeroesComponent;
+
+ app.HeroesHostBindingsModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [ HeroesComponent ],
+ bootstrap: [ HeroesComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
index 17cb57093f..f1bda77cb1 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
@@ -7,7 +7,7 @@
'Active' +
''
}).Class({
- constructor: function() { },
+ constructor: [function() { }],
activate: function() {
this.active = true;
}
@@ -26,12 +26,13 @@
ActiveLabelComponent)
}
}).Class({
- constructor: function() { },
+ constructor: [function() { }],
activate: function() {
this.active = true;
this.label.activate();
}
});
+ app.HeroQueriesComponent = HeroComponent;
// #enddocregion content
// #docregion view
@@ -44,11 +45,7 @@
'' +
'' +
'Activate' +
- ' ',
- directives: [
- HeroComponent,
- ActiveLabelComponent
- ],
+ '',
queries: {
heroCmps: new ng.core.ViewChildren(
HeroComponent)
@@ -68,6 +65,18 @@
});
// #enddocregion view
- app.HeroesQueriesComponent = AppComponent;
+ app.HeroesQueriesModule =
+ ng.core.NgModule({
+ imports: [ ng.platformBrowser.BrowserModule ],
+ declarations: [
+ AppComponent,
+ HeroComponent,
+ ActiveLabelComponent
+ ],
+ bootstrap: [ AppComponent ]
+ })
+ .Class({
+ constructor: function() {}
+ });
})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index f483a7c8cd..a1ec27c6ad 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -17,21 +17,20 @@
// #enddocregion appimport
document.addEventListener('DOMContentLoaded', function() {
- bootstrap(HeroComponent);
- bootstrap(app.HeroComponentDsl);
- bootstrap(app.HeroLifecycleComponent);
- bootstrap(app.HeroDIComponent, [app.DataService]);
- bootstrap(app.HeroDIInlineComponent, [app.DataService]);
- bootstrap(app.HeroDIInjectComponent, [
- { provide: 'heroName', useValue: 'Windstorm' }
- ]);
- bootstrap(app.HeroDIInjectComponent2, [
- { provide: 'heroName', useValue: 'Bombasto' }
- ]);
- bootstrap(app.HeroDIInjectAdditionalComponent);
- bootstrap(app.HeroIOComponent);
- bootstrap(app.HeroesHostBindingsComponent);
- bootstrap(app.HeroesQueriesComponent);
+ var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic();
+
+ platformBrowserDynamic.bootstrapModule(app.HeroesModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesDslModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesLifecycleModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesDIModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroDIInlineModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectModule2);
+ platformBrowserDynamic.bootstrapModule(app.HeroesDIInjectAdditionalModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesIOModule);
+ platformBrowserDynamic.bootstrapModule(app.HeroesHostBindingsModule);
+
+ platformBrowserDynamic.bootstrapModule(app.HeroesQueriesModule);
});
// #docregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index da11e56b8a..bca1e88cb6 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -5,8 +5,10 @@ import {
Inject,
Optional,
Query,
- QueryList
+ QueryList,
+ NgModule
} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
// #docregion
@Component({
@@ -17,7 +19,7 @@ import {
`
})
-export class TitleComponent {
+class TitleComponent {
constructor(
@Inject('titlePrefix')
@Optional()
@@ -40,9 +42,16 @@ export class TitleComponent {
selector: 'hero-di-inject-additional',
template: `
- `,
- directives: [TitleComponent]
+ `
})
-export class AppComponent {
+class AppComponent { }
-}
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ AppComponent,
+ TitleComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class HeroesDIInjectAdditionalModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
index 4865f9eb22..7dc2bc84a2 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -1,14 +1,23 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
// #docregion
@Component({
selector: 'hero-di-inject',
template: `Hero: {{name}} `
})
-export class HeroComponent {
+class HeroComponent {
constructor(
@Inject('heroName')
private name: string) {
}
}
// #enddocregion
+
+@NgModule({
+ imports: [ BrowserModule ],
+ providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+})
+export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index 2f3fa267ba..a20453ef0a 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
import { DataService } from './data.service';
@@ -7,10 +8,18 @@ import { DataService } from './data.service';
selector: 'hero-di',
template: `Hero: {{name}} `
})
-export class HeroComponent {
+class HeroComponent {
name: string;
constructor(dataService: DataService) {
this.name = dataService.getHeroName();
}
}
// #enddocregion
+
+@NgModule({
+ imports: [ BrowserModule ],
+ providers: [ DataService ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+})
+export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
index a93b9ed08c..8cf430c000 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ Output,
+ NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
// #docregion
@Component({
@@ -12,7 +19,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
`
})
-export class ConfirmComponent {
+class ConfirmComponent {
@Input() okMsg: string;
@Input('cancelMsg') notOkMsg: string;
@Output() ok =
@@ -40,10 +47,9 @@ export class ConfirmComponent {
OK clicked
Cancel clicked
- `,
- directives: [ConfirmComponent]
+ `
})
-export class AppComponent {
+class AppComponent {
okClicked: boolean;
cancelClicked: boolean;
@@ -54,3 +60,14 @@ export class AppComponent {
this.cancelClicked = true;
}
}
+
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ AppComponent,
+ ConfirmComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
index c883658135..1181c71cc9 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -1,15 +1,16 @@
// #docplaster
// #docregion
-import { Component, OnInit }
- from '@angular/core';
- // #enddocregion
+import { Component, OnInit } from '@angular/core';
+// #enddocregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'hero-lifecycle',
template: `Hero: {{name}} `
})
// #docregion
-export class HeroComponent
+class HeroComponent
implements OnInit {
name: string;
ngOnInit() {
@@ -17,3 +18,11 @@ export class HeroComponent
}
}
// #enddocregion
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+})
+export class HeroesLifecycleModule { }
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index a1628a1104..4b4ba8529d 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -16,3 +16,15 @@ export class HeroComponent {
// #enddocregion class
// #enddocregion appexport
// #enddocregion metadata
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ HeroComponent ],
+ bootstrap: [ HeroComponent ]
+})
+export class HeroesModule { }
+
+
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
index 71c75bb5c8..407b8b0e29 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
@@ -1,13 +1,19 @@
-import { Component, HostBinding, HostListener } from '@angular/core';
+import {
+ Component,
+ HostBinding,
+ HostListener,
+ NgModule
+} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
// #docregion
@Component({
selector: 'heroes-bindings',
template: `
- Tour ofHeroes
+ Tour of Heroes
`
})
-export class HeroesComponent {
+class HeroesComponent {
@HostBinding() title = 'Tooltip content';
@HostBinding('class.heading')
hClass = true;
@@ -26,3 +32,10 @@ export class HeroesComponent {
}
}
// #enddocregion
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ HeroesComponent ],
+ bootstrap: [ HeroesComponent ]
+})
+export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
index b511f29f90..97003766e6 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
@@ -3,8 +3,10 @@ import {
ViewChildren,
ContentChild,
QueryList,
- Input
+ Input,
+ NgModule
} from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'active-label',
@@ -55,13 +57,9 @@ class HeroComponent {
Activate
- `,
- directives: [
- HeroComponent,
- ActiveLabelComponent
- ]
+ `
})
-export class HeroesQueriesComponent {
+class HeroesQueriesComponent {
heroData = [
{id: 1, name: 'Windstorm'},
{id: 2, name: 'Superman'}
@@ -77,3 +75,14 @@ export class HeroesQueriesComponent {
}
}
// #enddocregion view
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ HeroesQueriesComponent,
+ HeroComponent,
+ ActiveLabelComponent
+ ],
+ bootstrap: [ HeroesQueriesComponent ]
+})
+export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
index 9e1540abc2..c4549d7034 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -9,26 +9,25 @@ import {
// #enddocregion ng2import
// #docregion appimport
-import { HeroComponent }
- from './hero.component';
+import { HeroComponent } from './hero.component';
// #enddocregion appimport
-import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
-import { HeroComponent as HeroDIComponent } from './hero-di.component';
-import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
-import { AppComponent as AppDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
-import { AppComponent as AppIOComponent } from './hero-io.component';
-import { HeroesComponent as HeroesHostBindingsComponent } from './heroes-bindings.component';
-import { HeroesQueriesComponent } from './heroes-queries.component';
-import { DataService } from './data.service';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-bootstrap(HeroComponent);
-bootstrap(HeroLifecycleComponent);
-bootstrap(HeroDIComponent, [DataService]);
-bootstrap(HeroDIInjectComponent, [
- { provide: 'heroName', useValue: 'Windstorm' }
-]);
-bootstrap(AppDIInjectAdditionalComponent);
-bootstrap(AppIOComponent);
-bootstrap(HeroesHostBindingsComponent);
-bootstrap(HeroesQueriesComponent);
+import { HeroesModule } from './hero.component';
+import { HeroesLifecycleModule } from './hero-lifecycle.component';
+import { HeroesDIModule } from './hero-di.component';
+import { HeroesDIInjectModule } from './hero-di-inject.component';
+import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
+import { HeroesIOModule } from './hero-io.component';
+import { HeroesHostBindingsModule } from './heroes-bindings.component';
+import { HeroesQueriesModule } from './heroes-queries.component';
+
+platformBrowserDynamic().bootstrapModule(HeroesModule);
+platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
+platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
+platformBrowserDynamic().bootstrapModule(HeroesIOModule);
+platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
+platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/cli-quickstart/e2e-spec.ts
rename to public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/component-styles/ts/app/app.module.ts b/public/docs/_examples/component-styles/ts/app/app.module.ts
new file mode 100644
index 0000000000..31c72cbbf2
--- /dev/null
+++ b/public/docs/_examples/component-styles/ts/app/app.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HeroAppComponent } from './hero-app.component';
+import { HeroAppMainComponent } from './hero-app-main.component';
+import { HeroDetailsComponent } from './hero-details.component';
+import { HeroControlsComponent } from './hero-controls.component';
+import { QuestSummaryComponent } from './quest-summary.component';
+import { HeroTeamComponent } from './hero-team.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ HeroAppComponent,
+ HeroAppMainComponent,
+ HeroDetailsComponent,
+ HeroControlsComponent,
+ QuestSummaryComponent,
+ HeroTeamComponent
+ ],
+ bootstrap: [ HeroAppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
index fb5b5d9d98..aebb1f729e 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-app-main.component.ts
@@ -1,9 +1,6 @@
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
-import { HeroDetailsComponent } from './hero-details.component';
-import { HeroControlsComponent } from './hero-controls.component';
-import { QuestSummaryComponent } from './quest-summary.component';
@Component({
selector: 'hero-app-main',
@@ -12,8 +9,7 @@ import { QuestSummaryComponent } from './quest-summary.component';
- `,
- directives: [HeroDetailsComponent, HeroControlsComponent, QuestSummaryComponent]
+ `
})
export class HeroAppMainComponent {
@Input() hero: Hero;
diff --git a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
index 7386226e71..5f1923e6f3 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-app.component.ts
@@ -1,6 +1,5 @@
import { Component, HostBinding } from '@angular/core';
import { Hero } from './hero';
-import { HeroAppMainComponent } from './hero-app-main.component';
// #docregion
@Component({
@@ -8,8 +7,7 @@ import { HeroAppMainComponent } from './hero-app-main.component';
template: `
Tour of Heroes
`,
- styles: ['h1 { font-weight: normal; }'],
- directives: [HeroAppMainComponent]
+ styles: ['h1 { font-weight: normal; }']
})
export class HeroAppComponent {
// #enddocregion
diff --git a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
index f530ec0757..bd86a63e04 100644
--- a/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
+++ b/public/docs/_examples/component-styles/ts/app/hero-details.component.ts
@@ -1,6 +1,5 @@
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
-import { HeroTeamComponent } from './hero-team.component';
// #docregion styleurls
@Component({
@@ -10,8 +9,7 @@ import { HeroTeamComponent } from './hero-team.component';
`,
- styleUrls: ['app/hero-details.component.css'],
- directives: [HeroTeamComponent]
+ styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
// #enddocregion styleurls
diff --git a/public/docs/_examples/component-styles/ts/app/main.ts b/public/docs/_examples/component-styles/ts/app/main.ts
index 1d1e75499c..4acf5de663 100644
--- a/public/docs/_examples/component-styles/ts/app/main.ts
+++ b/public/docs/_examples/component-styles/ts/app/main.ts
@@ -1,4 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HeroAppComponent } from './hero-app.component';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-bootstrap(HeroAppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
index a67946ac19..b398ebeb57 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.1.ts
@@ -3,17 +3,13 @@
// #docregion
import { Component } from '@angular/core';
-import { CarComponent } from './car/car.component';
-import { HeroesComponent } from './heroes/heroes.component.1';
-
@Component({
selector: 'my-app',
template: `
{{title}}
- `,
- directives: [CarComponent, HeroesComponent]
+ `
})
export class AppComponent {
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
index a6106cbc4b..d24df5568c 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.2.ts
@@ -1,13 +1,9 @@
// #docregion
// #docregion imports
import { Component } from '@angular/core';
-import { CarComponent } from './car/car.component';
-import { HeroesComponent } from './heroes/heroes.component.1';
-
import { Inject } from '@angular/core';
-import { APP_CONFIG, AppConfig,
- HERO_DI_CONFIG } from './app.config';
-import { Logger } from './logger.service';
+
+import { APP_CONFIG, AppConfig } from './app.config';
// #enddocregion imports
@Component({
@@ -16,14 +12,7 @@ import { Logger } from './logger.service';
{{title}}
- `,
- directives: [CarComponent, HeroesComponent],
- providers: [
- Logger,
- // #docregion providers
- { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
- // #enddocregion providers
- ]
+ `
})
export class AppComponent {
title: string;
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.component.ts b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
index bb330c9441..9a50661a84 100644
--- a/public/docs/_examples/dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/app.component.ts
@@ -3,18 +3,10 @@
// #docregion imports
import { Component, Inject } from '@angular/core';
-import { CarComponent } from './car/car.component';
-import { HeroesComponent } from './heroes/heroes.component';
-
-import { APP_CONFIG, AppConfig,
- HERO_DI_CONFIG } from './app.config';
-import { Logger } from './logger.service';
-
+import { APP_CONFIG, AppConfig } from './app.config';
+import { Logger } from './logger.service';
import { UserService } from './user.service';
// #enddocregion imports
-import { InjectorComponent } from './injector.component';
-import { TestComponent } from './test.component';
-import { ProvidersComponent } from './providers.component';
@Component({
selector: 'my-app',
@@ -31,15 +23,7 @@ import { ProvidersComponent } from './providers.component';
`,
- directives: [CarComponent, HeroesComponent,
- InjectorComponent, TestComponent, ProvidersComponent],
- // #docregion providers
- providers: [
- Logger,
- UserService,
- { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
- ]
- // #enddocregion providers
+ providers: [Logger]
})
export class AppComponent {
title: string;
diff --git a/public/docs/_examples/dependency-injection/ts/app/app.module.ts b/public/docs/_examples/dependency-injection/ts/app/app.module.ts
new file mode 100644
index 0000000000..439c9ff276
--- /dev/null
+++ b/public/docs/_examples/dependency-injection/ts/app/app.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { CarComponent } from './car/car.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroListComponent } from './heroes/hero-list.component';
+import { InjectorComponent } from './injector.component';
+import { TestComponent } from './test.component';
+import { ProvidersComponent } from './providers.component';
+import { APP_CONFIG, HERO_DI_CONFIG } from './app.config';
+import { UserService } from './user.service';
+
+// #docregion ngmodule
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent,
+ CarComponent,
+ HeroesComponent,
+ HeroListComponent,
+ InjectorComponent,
+ TestComponent
+ ],
+ // #docregion ngmodule-providers
+ providers: [
+ UserService,
+ { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
+ ],
+ // #enddocregion ngmodule-providers
+ bootstrap: [ AppComponent, ProvidersComponent ]
+})
+export class AppModule { }
+// #enddocregion ngmodule
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
index 6b55f78a6e..cb23d3257c 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/hero-list.component.2.ts
@@ -18,7 +18,7 @@ import { HeroService } from './hero.service';
{{hero.id}} - {{hero.name}}
- `,
+ `
})
export class HeroListComponent {
heroes: Hero[];
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
index b089dba80f..e0e9deae08 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.1.ts
@@ -1,28 +1,21 @@
// #docplaster
// #docregion full, v1
import { Component } from '@angular/core';
-
-// #enddocregion full, v1
-import { HeroListComponent } from './hero-list.component.2';
-import { HeroService } from './hero.service.1';
-/*
-// #docregion full, v1
-import { HeroListComponent } from './hero-list.component';
// #enddocregion v1
+
import { HeroService } from './hero.service';
// #enddocregion full
-*/
+
// #docregion full, v1
@Component({
selector: 'my-heroes',
+ // #enddocregion v1
+ providers: [HeroService],
+ // #docregion v1
template: `
Heroes
- `,
- // #enddocregion v1
- providers: [HeroService],
- // #docregion v1
- directives: [HeroListComponent]
+ `
})
export class HeroesComponent { }
diff --git a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
index dd2346248c..5923f7590b 100644
--- a/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/heroes/heroes.component.ts
@@ -1,7 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroListComponent } from './hero-list.component';
import { heroServiceProvider } from './hero.service.provider';
@Component({
@@ -10,7 +9,6 @@ import { heroServiceProvider } from './hero.service.provider';
Heroes
`,
- providers: [heroServiceProvider],
- directives: [HeroListComponent]
+ providers: [heroServiceProvider]
})
export class HeroesComponent { }
diff --git a/public/docs/_examples/dependency-injection/ts/app/main.1.ts b/public/docs/_examples/dependency-injection/ts/app/main.1.ts
deleted file mode 100644
index 0d83503360..0000000000
--- a/public/docs/_examples/dependency-injection/ts/app/main.1.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component.1';
-import { HeroService } from './heroes/hero.service.1';
-
-bootstrap(AppComponent);
-
-function discouraged() {
- // #docregion bootstrap-discouraged
- bootstrap(AppComponent,
- [HeroService]); // DISCOURAGED (but works)
- // #enddocregion bootstrap-discouraged
-}
diff --git a/public/docs/_examples/dependency-injection/ts/app/main.ts b/public/docs/_examples/dependency-injection/ts/app/main.ts
index 2f002de7d9..4acb58eab5 100644
--- a/public/docs/_examples/dependency-injection/ts/app/main.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/main.ts
@@ -1,8 +1,6 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-import { ProvidersComponent } from './providers.component';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
// #docregion bootstrap
-bootstrap(AppComponent);
+browserDynamicPlatform().bootstrapModule(AppModule);
// #enddocregion bootstrap
-bootstrap(ProvidersComponent);
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
index 0705176292..06ab060557 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.3.ts
@@ -1,5 +1,6 @@
// #docregion
import { Component } from '@angular/core';
+
// #docregion import
import { Hero } from './hero';
// #enddocregion import
diff --git a/public/docs/_examples/displaying-data/ts/app/app.component.ts b/public/docs/_examples/displaying-data/ts/app/app.component.ts
index 40c90e2d62..7234959265 100644
--- a/public/docs/_examples/displaying-data/ts/app/app.component.ts
+++ b/public/docs/_examples/displaying-data/ts/app/app.component.ts
@@ -1,6 +1,7 @@
// #docplaster
// #docregion final
import { Component } from '@angular/core';
+
import { Hero } from './hero';
@Component({
diff --git a/public/docs/_examples/displaying-data/ts/app/app.module.ts b/public/docs/_examples/displaying-data/ts/app/app.module.ts
new file mode 100644
index 0000000000..362f3401fa
--- /dev/null
+++ b/public/docs/_examples/displaying-data/ts/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/displaying-data/ts/app/main.ts b/public/docs/_examples/displaying-data/ts/app/main.ts
index 52b47899ef..961a226688 100644
--- a/public/docs/_examples/displaying-data/ts/app/main.ts
+++ b/public/docs/_examples/displaying-data/ts/app/main.ts
@@ -1,6 +1,6 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/forms-deprecated/e2e-spec.ts b/public/docs/_examples/forms-deprecated/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/forms-deprecated/e2e-spec.ts
rename to public/docs/_examples/forms-deprecated/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/forms/js/app/app.component.js b/public/docs/_examples/forms/js/app/app.component.js
index bb6b789938..56bd982416 100644
--- a/public/docs/_examples/forms/js/app/app.component.js
+++ b/public/docs/_examples/forms/js/app/app.component.js
@@ -3,8 +3,7 @@
app.AppComponent = ng.core
.Component({
selector: 'my-app',
- template: ' ',
- directives: [app.HeroFormComponent]
+ template: ' '
})
.Class({
constructor: function() {}
diff --git a/public/docs/_examples/forms/js/app/app.module.js b/public/docs/_examples/forms/js/app/app.module.js
new file mode 100644
index 0000000000..92c7f8b9e5
--- /dev/null
+++ b/public/docs/_examples/forms/js/app/app.module.js
@@ -0,0 +1,19 @@
+// #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/public/docs/_examples/forms/js/app/hero-form.component.js b/public/docs/_examples/forms/js/app/hero-form.component.js
index 8988231189..428ff82d35 100644
--- a/public/docs/_examples/forms/js/app/hero-form.component.js
+++ b/public/docs/_examples/forms/js/app/hero-form.component.js
@@ -9,7 +9,7 @@
})
.Class({
// #docregion submitted
- constructor: function() {
+ constructor: [function() {
// #enddocregion submitted
this.powers = ['Really Smart', 'Super Flexible',
'Super Hot', 'Weather Changer'
@@ -20,7 +20,7 @@
// #docregion submitted
this.submitted = false;
- },
+ }],
onSubmit: function() {
this.submitted = true;
},
diff --git a/public/docs/_examples/forms/js/app/main.js b/public/docs/_examples/forms/js/app/main.js
index 2b866b3685..785823fa84 100644
--- a/public/docs/_examples/forms/js/app/main.js
+++ b/public/docs/_examples/forms/js/app/main.js
@@ -1,9 +1,8 @@
// #docregion
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
- ng.platformBrowserDynamic.bootstrap(app.AppComponent,[
- ng.forms.disableDeprecatedForms(),
- ng.forms.provideForms()
- ]);
+ ng.platformBrowserDynamic
+ .platformBrowserDynamic()
+ .bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html
index 8353dfb180..fe525d5549 100644
--- a/public/docs/_examples/forms/js/index.html
+++ b/public/docs/_examples/forms/js/index.html
@@ -35,6 +35,7 @@
+
diff --git a/public/docs/_examples/forms/ts/app/app.component.ts b/public/docs/_examples/forms/ts/app/app.component.ts
index 2dcbc8037a..454f7e03db 100644
--- a/public/docs/_examples/forms/ts/app/app.component.ts
+++ b/public/docs/_examples/forms/ts/app/app.component.ts
@@ -1,10 +1,8 @@
// #docregion
-import { Component } from '@angular/core';
-import { HeroFormComponent } from './hero-form.component';
+import { Component } from '@angular/core';
@Component({
selector: 'my-app',
- template: ' ',
- directives: [HeroFormComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/forms/ts/app/app.module.ts b/public/docs/_examples/forms/ts/app/app.module.ts
new file mode 100644
index 0000000000..f214c02714
--- /dev/null
+++ b/public/docs/_examples/forms/ts/app/app.module.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { HeroFormComponent } from './hero-form.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroFormComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.html b/public/docs/_examples/forms/ts/app/hero-form.component.html
index 80401a1313..4b90a9464f 100644
--- a/public/docs/_examples/forms/ts/app/hero-form.component.html
+++ b/public/docs/_examples/forms/ts/app/hero-form.component.html
@@ -11,11 +11,13 @@
`,
styles: ['.parent {background: burlywood}'],
- providers: [LoggerService],
- directives: [AfterViewComponent]
+ providers: [LoggerService]
})
export class AfterViewParentComponent {
logs: string[];
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
index b3d5e45b76..9b785144ab 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts
@@ -1,26 +1,7 @@
// #docregion
import { Component } from '@angular/core';
-
-import { AfterContentParentComponent } from './after-content.component';
-import { AfterViewParentComponent } from './after-view.component';
-import { CounterParentComponent } from './counter.component';
-import { DoCheckParentComponent } from './do-check.component';
-import { OnChangesParentComponent } from './on-changes.component';
-import { PeekABooParentComponent } from './peek-a-boo-parent.component';
-import { SpyParentComponent } from './spy.component';
-
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [
- AfterContentParentComponent,
- AfterViewParentComponent,
- CounterParentComponent,
- DoCheckParentComponent,
- OnChangesParentComponent,
- PeekABooParentComponent,
- SpyParentComponent,
- ]
+ templateUrl: 'app/app.component.html'
})
-export class AppComponent {
-}
+export class AppComponent { }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts b/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts
new file mode 100644
index 0000000000..4d9cabf218
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/app.module.ts
@@ -0,0 +1,67 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+import {
+ AfterContentParentComponent,
+ AfterContentComponent,
+ ChildComponent
+} from './after-content.component';
+
+import {
+ AfterViewParentComponent,
+ AfterViewComponent,
+ ChildViewComponent
+} from './after-view.component';
+
+import {
+ CounterParentComponent,
+ MyCounterComponent
+} from './counter.component';
+
+import {
+ DoCheckParentComponent,
+ DoCheckComponent
+} from './do-check.component';
+
+import {
+ OnChangesParentComponent,
+ OnChangesComponent
+} from './on-changes.component';
+
+import { PeekABooParentComponent } from './peek-a-boo-parent.component';
+import { PeekABooComponent } from './peek-a-boo.component';
+
+import { SpyParentComponent } from './spy.component';
+import { SpyDirective } from './spy.directive';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ AfterContentParentComponent,
+ AfterContentComponent,
+ ChildComponent,
+ AfterViewParentComponent,
+ AfterViewComponent,
+ ChildViewComponent,
+ CounterParentComponent,
+ MyCounterComponent,
+ DoCheckParentComponent,
+ DoCheckComponent,
+ OnChangesParentComponent,
+ OnChangesComponent,
+ PeekABooParentComponent,
+ PeekABooComponent,
+ SpyParentComponent,
+ SpyDirective
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
index 6514873232..71167ab791 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/counter.component.ts
@@ -4,7 +4,6 @@ import {
OnChanges, SimpleChange,
} from '@angular/core';
-import { SpyDirective } from './spy.directive';
import { LoggerService } from './logger.service';
@Component({
@@ -17,8 +16,7 @@ import { LoggerService } from './logger.service';
{{chg}}
`,
- styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'],
- directives: [SpyDirective]
+ styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
})
export class MyCounterComponent implements OnChanges {
@Input() counter: number;
@@ -59,7 +57,6 @@ export class MyCounterComponent implements OnChanges {
`,
styles: ['.parent {background: gold;}'],
- directives: [MyCounterComponent],
providers: [LoggerService]
})
export class CounterParentComponent {
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html
new file mode 100644
index 0000000000..cf7c2b91ce
--- /dev/null
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check-parent.component.html
@@ -0,0 +1,13 @@
+
+
{{title}}
+
+
+
Reset Log
+
+
+
+
+
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
index 64b998c25a..1ffdd23ba7 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts
@@ -86,9 +86,8 @@ export class DoCheckComponent implements DoCheck, OnChanges {
@Component({
selector: 'do-check-parent',
- templateUrl: 'app/on-changes-parent.component.html',
- styles: ['.parent {background: Lavender}'],
- directives: [DoCheckComponent]
+ templateUrl: 'app/do-check-parent.component.html',
+ styles: ['.parent {background: Lavender}']
})
export class DoCheckParentComponent {
hero: Hero;
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
index 1e9be2601e..4acf5de663 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent).catch(err => console.error(err));
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
index 7889ce8e91..5c76a6056c 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes-parent.component.html
@@ -10,5 +10,4 @@
-
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
index 81de85633a..993eb4040d 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts
@@ -5,7 +5,6 @@ import {
SimpleChange, ViewChild
} from '@angular/core';
-
class Hero {
constructor(public name: string) {}
}
@@ -52,8 +51,7 @@ export class OnChangesComponent implements OnChanges {
@Component({
selector: 'on-changes-parent',
templateUrl: 'app/on-changes-parent.component.html',
- styles: ['.parent {background: Lavender;}'],
- directives: [OnChangesComponent]
+ styles: ['.parent {background: Lavender;}']
})
export class OnChangesParentComponent {
hero: Hero;
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
index e218dc3fc5..3f2bd8585d 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/peek-a-boo-parent.component.ts
@@ -1,7 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { PeekABooComponent } from './peek-a-boo.component';
import { LoggerService } from './logger.service';
@Component({
@@ -23,8 +22,7 @@ import { LoggerService } from './logger.service';
`,
styles: ['.parent {background: moccasin}'],
- directives: [PeekABooComponent],
- providers: [LoggerService]
+ providers: [ LoggerService ]
})
export class PeekABooParentComponent {
diff --git a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
index 4b8d742f4c..2d487f4037 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts
@@ -2,7 +2,6 @@
import { Component } from '@angular/core';
import { LoggerService } from './logger.service';
-import { SpyDirective } from './spy.directive';
@Component({
selector: 'spy-parent',
@@ -11,7 +10,6 @@ import { SpyDirective } from './spy.directive';
'.parent {background: khaki;}',
'.heroes {background: LightYellow; padding: 0 8px}'
],
- directives: [SpyDirective],
providers: [LoggerService]
})
export class SpyParentComponent {
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 21a52a65e3..7015bd0767 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -25,17 +25,17 @@
"author": "",
"license": "ISC",
"dependencies": {
- "@angular/common": "2.0.0-rc.4",
- "@angular/compiler": "2.0.0-rc.4",
- "@angular/core": "2.0.0-rc.4",
- "@angular/forms": "0.2.0",
- "@angular/http": "2.0.0-rc.4",
- "@angular/platform-browser": "2.0.0-rc.4",
- "@angular/platform-browser-dynamic": "2.0.0-rc.4",
- "@angular/router": "3.0.0-beta.2",
+ "@angular/common": "2.0.0-rc.5",
+ "@angular/compiler": "2.0.0-rc.5",
+ "@angular/core": "2.0.0-rc.5",
+ "@angular/forms": "0.3.0",
+ "@angular/http": "2.0.0-rc.5",
+ "@angular/platform-browser": "2.0.0-rc.5",
+ "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+ "@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
- "@angular/upgrade": "2.0.0-rc.4",
- "angular2-in-memory-web-api": "0.0.14",
+ "@angular/upgrade": "2.0.0-rc.5",
+ "angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
diff --git a/public/docs/_examples/pipes/ts/app/app.component.ts b/public/docs/_examples/pipes/ts/app/app.component.ts
index dd4a9c3bad..1a53c144aa 100644
--- a/public/docs/_examples/pipes/ts/app/app.component.ts
+++ b/public/docs/_examples/pipes/ts/app/app.component.ts
@@ -1,28 +1,9 @@
// #docregion
import { Component } from '@angular/core';
-import { HTTP_PROVIDERS } from '@angular/http';
-
-import { FlyingHeroesComponent,
- FlyingHeroesImpureComponent } from './flying-heroes.component';
-import { HeroAsyncMessageComponent } from './hero-async-message.component';
-import { HeroBirthdayComponent } from './hero-birthday1.component';
-import { HeroBirthday2Component } from './hero-birthday2.component';
-import { HeroListComponent } from './hero-list.component';
-import { PowerBoosterComponent } from './power-booster.component';
-import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [
- FlyingHeroesComponent, FlyingHeroesImpureComponent,
- HeroAsyncMessageComponent,
- HeroBirthdayComponent,
- HeroBirthday2Component,
- HeroListComponent,
- PowerBoosterComponent, PowerBoostCalculatorComponent
- ],
- providers: [HTTP_PROVIDERS]
+ templateUrl: 'app/app.component.html'
})
export class AppComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
diff --git a/public/docs/_examples/pipes/ts/app/app.module.ts b/public/docs/_examples/pipes/ts/app/app.module.ts
new file mode 100644
index 0000000000..89a3a29505
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/app/app.module.ts
@@ -0,0 +1,48 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import {
+ FlyingHeroesComponent,
+ FlyingHeroesImpureComponent
+} from './flying-heroes.component';
+import { HeroAsyncMessageComponent } from './hero-async-message.component';
+import { HeroBirthdayComponent } from './hero-birthday1.component';
+import { HeroBirthday2Component } from './hero-birthday2.component';
+import { HeroListComponent } from './hero-list.component';
+import { PowerBoosterComponent } from './power-booster.component';
+import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
+import {
+ FlyingHeroesPipe,
+ FlyingHeroesImpurePipe
+} from './flying-heroes.pipe';
+import { FetchJsonPipe } from './fetch-json.pipe';
+import { ExponentialStrengthPipe } from './exponential-strength.pipe';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule
+ ],
+ declarations: [
+ AppComponent,
+ FlyingHeroesComponent,
+ FlyingHeroesImpureComponent,
+ HeroAsyncMessageComponent,
+ HeroBirthdayComponent,
+ HeroBirthday2Component,
+ HeroListComponent,
+ PowerBoosterComponent,
+ PowerBoostCalculatorComponent,
+ FlyingHeroesPipe,
+ FlyingHeroesImpurePipe,
+ FetchJsonPipe,
+ ExponentialStrengthPipe
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html b/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html
new file mode 100644
index 0000000000..66bd86f81c
--- /dev/null
+++ b/public/docs/_examples/pipes/ts/app/flying-heroes-impure.component.html
@@ -0,0 +1,38 @@
+
+
+{{title}}
+
+
+New hero:
+
+
+ can fly
+
+
+ Mutate array
+
+ Reset
+
+
+
+Heroes who fly (piped)
+
+
+
+ {{hero.name}}
+
+
+
+
+All Heroes (no pipe)
+
+
+
+
+ {{hero.name}}
+
+
+
+
diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
index d7bc01f94f..a6a8dd08b2 100644
--- a/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
+++ b/public/docs/_examples/pipes/ts/app/flying-heroes.component.ts
@@ -2,15 +2,12 @@
// #docregion
import { Component } from '@angular/core';
-import { FlyingHeroesPipe,
- FlyingHeroesImpurePipe } from './flying-heroes.pipe';
import { HEROES } from './heroes';
@Component({
selector: 'flying-heroes',
templateUrl: 'app/flying-heroes.component.html',
- styles: ['#flyers, #all {font-style: italic}'],
- pipes: [FlyingHeroesPipe]
+ styles: ['#flyers, #all {font-style: italic}']
})
// #docregion v1
export class FlyingHeroesComponent {
@@ -53,11 +50,10 @@ export class FlyingHeroesComponent {
// #docregion impure-component
@Component({
selector: 'flying-heroes-impure',
- templateUrl: 'app/flying-heroes.component.html',
+ templateUrl: 'app/flying-heroes-impure.component.html',
// #enddocregion impure-component
styles: ['.flyers, .all {font-style: italic}'],
// #docregion impure-component
- pipes: [FlyingHeroesImpurePipe]
})
export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
title = 'Flying Heroes (impure pipe)';
diff --git a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
index 425c021931..87db9c277e 100644
--- a/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
+++ b/public/docs/_examples/pipes/ts/app/flying-heroes.pipe.ts
@@ -19,7 +19,7 @@ export class FlyingHeroesPipe implements PipeTransform {
// #docregion impure
// #docregion pipe-decorator
@Pipe({
- name: 'flyingHeroes',
+ name: 'flyingHeroesImpure',
pure: false
})
// #enddocregion pipe-decorator
diff --git a/public/docs/_examples/pipes/ts/app/hero-list.component.ts b/public/docs/_examples/pipes/ts/app/hero-list.component.ts
index 0b9d8df37e..dea501b6b5 100644
--- a/public/docs/_examples/pipes/ts/app/hero-list.component.ts
+++ b/public/docs/_examples/pipes/ts/app/hero-list.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { FetchJsonPipe } from './fetch-json.pipe';
-
@Component({
selector: 'hero-list',
// #docregion template
@@ -16,8 +14,7 @@ import { FetchJsonPipe } from './fetch-json.pipe';
Heroes as JSON:
{{'heroes.json' | fetch | json}}
- `,
+ `
// #enddocregion template
- pipes: [FetchJsonPipe]
})
export class HeroListComponent { }
diff --git a/public/docs/_examples/pipes/ts/app/main.ts b/public/docs/_examples/pipes/ts/app/main.ts
index dd9994d2b6..3001ee1461 100644
--- a/public/docs/_examples/pipes/ts/app/main.ts
+++ b/public/docs/_examples/pipes/ts/app/main.ts
@@ -1,6 +1,6 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'rxjs/Rx';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
index 2c97e4a8f6..e65e29ad4c 100644
--- a/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
+++ b/public/docs/_examples/pipes/ts/app/power-boost-calculator.component.ts
@@ -1,8 +1,6 @@
// #docregion
import { Component } from '@angular/core';
-import { ExponentialStrengthPipe } from './exponential-strength.pipe';
-
@Component({
selector: 'power-boost-calculator',
template: `
@@ -12,8 +10,7 @@ import { ExponentialStrengthPipe } from './exponential-strength.pipe';
Super Hero Power: {{power | exponentialStrength: factor}}
- `,
- pipes: [ExponentialStrengthPipe]
+ `
})
export class PowerBoostCalculatorComponent {
power = 5;
diff --git a/public/docs/_examples/pipes/ts/app/power-booster.component.ts b/public/docs/_examples/pipes/ts/app/power-booster.component.ts
index b62e678e90..08e3e24c7b 100644
--- a/public/docs/_examples/pipes/ts/app/power-booster.component.ts
+++ b/public/docs/_examples/pipes/ts/app/power-booster.component.ts
@@ -1,14 +1,11 @@
// #docregion
import { Component } from '@angular/core';
-import { ExponentialStrengthPipe } from './exponential-strength.pipe';
-
@Component({
selector: 'power-booster',
template: `
Power Booster
Super power boost: {{2 | exponentialStrength: 10}}
- `,
- pipes: [ExponentialStrengthPipe]
+ `
})
export class PowerBoosterComponent { }
diff --git a/public/docs/_examples/quickstart/js/app/app.module.js b/public/docs/_examples/quickstart/js/app/app.module.js
new file mode 100644
index 0000000000..0f3d5f82cf
--- /dev/null
+++ b/public/docs/_examples/quickstart/js/app/app.module.js
@@ -0,0 +1,15 @@
+// #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/public/docs/_examples/quickstart/js/app/main.js b/public/docs/_examples/quickstart/js/app/main.js
index 55a77b9ddd..785823fa84 100644
--- a/public/docs/_examples/quickstart/js/app/main.js
+++ b/public/docs/_examples/quickstart/js/app/main.js
@@ -1,8 +1,8 @@
// #docregion
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
- // #docregion import
- ng.platformBrowserDynamic.bootstrap(app.AppComponent);
- // #enddocregion import
+ ng.platformBrowserDynamic
+ .platformBrowserDynamic()
+ .bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));
diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html
index a1e88e0461..b127bdce13 100644
--- a/public/docs/_examples/quickstart/js/index.html
+++ b/public/docs/_examples/quickstart/js/index.html
@@ -27,6 +27,7 @@
+
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 358034f15e..5b3ecbc847 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -7,23 +7,23 @@
},
"license": "ISC",
"dependencies": {
- "@angular/common": "2.0.0-rc.4",
- "@angular/compiler": "2.0.0-rc.4",
- "@angular/core": "2.0.0-rc.4",
- "@angular/forms": "0.2.0",
- "@angular/http": "2.0.0-rc.4",
- "@angular/platform-browser": "2.0.0-rc.4",
- "@angular/platform-browser-dynamic": "2.0.0-rc.4",
- "@angular/router": "3.0.0-beta.1",
+ "@angular/common": "2.0.0-rc.5",
+ "@angular/compiler": "2.0.0-rc.5",
+ "@angular/core": "2.0.0-rc.5",
+ "@angular/forms": "0.3.0",
+ "@angular/http": "2.0.0-rc.5",
+ "@angular/platform-browser": "2.0.0-rc.5",
+ "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+ "@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
- "@angular/upgrade": "2.0.0-rc.4",
+ "@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
- "angular2-in-memory-web-api": "0.0.14",
+ "angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
diff --git a/public/docs/_examples/quickstart/ts/app/app.module.ts b/public/docs/_examples/quickstart/ts/app/app.module.ts
new file mode 100644
index 0000000000..b4fc185c24
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/app/app.module.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts
index 2aede345e9..4ad787ebfd 100644
--- a/public/docs/_examples/quickstart/ts/app/main.ts
+++ b/public/docs/_examples/quickstart/ts/app/main.ts
@@ -1,8 +1,8 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
// #docregion import
-import { AppComponent } from './app.component';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
// #enddocregion import
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index ef5d180619..4f0bc098fd 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -11,16 +11,16 @@
},
"license": "ISC",
"dependencies": {
- "@angular/common": "2.0.0-rc.4",
- "@angular/compiler": "2.0.0-rc.4",
- "@angular/core": "2.0.0-rc.4",
- "@angular/forms": "0.2.0",
- "@angular/http": "2.0.0-rc.4",
- "@angular/platform-browser": "2.0.0-rc.4",
- "@angular/platform-browser-dynamic": "2.0.0-rc.4",
- "@angular/router": "3.0.0-beta.1",
+ "@angular/common": "2.0.0-rc.5",
+ "@angular/compiler": "2.0.0-rc.5",
+ "@angular/core": "2.0.0-rc.5",
+ "@angular/forms": "0.3.0",
+ "@angular/http": "2.0.0-rc.5",
+ "@angular/platform-browser": "2.0.0-rc.5",
+ "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+ "@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
- "@angular/upgrade": "2.0.0-rc.4",
+ "@angular/upgrade": "2.0.0-rc.5",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
@@ -28,7 +28,7 @@
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
- "angular2-in-memory-web-api": "0.0.14",
+ "angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json
index 3385926d1f..3d826df25a 100644
--- a/public/docs/_examples/quickstart/ts/typings.1.json
+++ b/public/docs/_examples/quickstart/ts/typings.1.json
@@ -2,6 +2,6 @@
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
- "node": "registry:dt/node#6.0.0+20160621231320"
+ "node": "registry:dt/node#6.0.0+20160807145350"
}
}
diff --git a/public/docs/_examples/router-deprecated/e2e-spec.ts b/public/docs/_examples/router-deprecated/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/router-deprecated/e2e-spec.ts
rename to public/docs/_examples/router-deprecated/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/router/e2e-spec.ts b/public/docs/_examples/router/e2e-spec.ts
index ac3e36f4ea..bf672c3f01 100644
--- a/public/docs/_examples/router/e2e-spec.ts
+++ b/public/docs/_examples/router/e2e-spec.ts
@@ -11,18 +11,18 @@ describe('Router', function () {
return {
hrefs: hrefEles,
- routerParent: element(by.css('my-app > undefined')),
- routerTitle: element(by.css('my-app > undefined > h2')),
+ routerParent: element(by.css('my-app > ng-component')),
+ routerTitle: element(by.css('my-app > ng-component > h2')),
crisisHref: hrefEles.get(0),
- crisisList: element.all(by.css('my-app > undefined > undefined li')),
- crisisDetail: element(by.css('my-app > undefined > undefined > div')),
- crisisDetailTitle: element(by.css('my-app > undefined > undefined > div > h3')),
+ crisisList: element.all(by.css('my-app > ng-component > ng-component li')),
+ crisisDetail: element(by.css('my-app > ng-component > ng-component > div')),
+ crisisDetailTitle: element(by.css('my-app > ng-component > ng-component > div > h3')),
heroesHref: hrefEles.get(1),
- heroesList: element.all(by.css('my-app > undefined li')),
- heroDetail: element(by.css('my-app > undefined > div')),
- heroDetailTitle: element(by.css('my-app > undefined > div > h3')),
+ 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')),
adminHref: hrefEles.get(2),
loginHref: hrefEles.get(3)
@@ -31,7 +31,7 @@ describe('Router', function () {
it('should be able to see the start screen', function () {
let page = getPageStruct();
- expect(page.hrefs.count()).toEqual(4, 'should be two dashboard choices');
+ expect(page.hrefs.count()).toEqual(4, 'should be 4 dashboard choices');
expect(page.crisisHref.getText()).toEqual('Crisis Center');
expect(page.heroesHref.getText()).toEqual('Heroes');
expect(page.adminHref.getText()).toEqual('Crisis Admin');
@@ -40,7 +40,9 @@ describe('Router', function () {
it('should be able to see crises center items', function () {
let page = getPageStruct();
- expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start');
+ page.crisisHref.click().then(function() {
+ expect(page.crisisList.count()).toBe(4, 'should be 4 crisis center entries at start');
+ });
});
it('should be able to see hero items', function () {
@@ -62,11 +64,17 @@ describe('Router', function () {
});
it('should be able to edit and save details from the crisis center view', function () {
- crisisCenterEdit(2, true);
+ let page = getPageStruct();
+ page.crisisHref.click().then(function() {
+ crisisCenterEdit(2, true);
+ });
});
xit('should be able to edit and cancel details from the crisis center view', function () {
- crisisCenterEdit(3, false);
+ let page = getPageStruct();
+ page.crisisHref.click().then(function() {
+ crisisCenterEdit(3, false);
+ });
});
it('should be able to edit and save details from the heroes view', function () {
diff --git a/public/docs/_examples/router/ts/app/app.component.1.ts b/public/docs/_examples/router/ts/app/app.component.1.ts
index e124b6771a..1b0aba0044 100644
--- a/public/docs/_examples/router/ts/app/app.component.1.ts
+++ b/public/docs/_examples/router/ts/app/app.component.1.ts
@@ -1,10 +1,6 @@
/* First version */
-// #docplaster
// #docregion
import { Component } from '@angular/core';
-// #docregion import-router
-import { ROUTER_DIRECTIVES } from '@angular/router';
-// #enddocregion import-router
@Component({
selector: 'my-app',
@@ -16,11 +12,7 @@ import { ROUTER_DIRECTIVES } from '@angular/router';
Heroes
- `,
+ `
// #enddocregion template
- // #docregion directives
- directives: [ROUTER_DIRECTIVES]
- // #enddocregion directives
})
-
export class AppComponent { }
diff --git a/public/docs/_examples/router/ts/app/app.component.2.ts b/public/docs/_examples/router/ts/app/app.component.2.ts
index fcbde30967..7593aa1608 100644
--- a/public/docs/_examples/router/ts/app/app.component.2.ts
+++ b/public/docs/_examples/router/ts/app/app.component.2.ts
@@ -2,23 +2,7 @@
// #docplaster
// #docregion
-import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-// #enddocregion
-/*
- // Apparent Milestone 2 imports
- // #docregion
- // #docregion hero-import
- import { HeroDetailComponent } from './heroes/hero-detail.component';
- import { HeroListComponent } from './heroes/hero-list.component';
- import { HeroService } from './heroes/hero.service';
- // #enddocregion hero-import
- // #enddocregion
- */
-// Actual Milestone 2 imports
-import { HeroService } from './heroes/hero.service';
-// #docregion
+import { Component } from '@angular/core';
@Component({
selector: 'my-app',
@@ -29,12 +13,7 @@ import { HeroService } from './heroes/hero.service';
Heroes
- `,
- providers: [HeroService],
- directives: [ROUTER_DIRECTIVES]
+ `
})
-// #enddocregion
export class AppComponent {
}
-// #enddocregion route-config
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.component.3.ts b/public/docs/_examples/router/ts/app/app.component.3.ts
index d8bb30b1e2..1150a01814 100644
--- a/public/docs/_examples/router/ts/app/app.component.3.ts
+++ b/public/docs/_examples/router/ts/app/app.component.3.ts
@@ -1,9 +1,7 @@
/* tslint:disable:no-unused-variable */
// #docplaster
import { Component } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
-
-import { HeroService } from './heroes/hero.service';
+import { Router } from '@angular/router';
@Component({
selector: 'my-app',
@@ -45,10 +43,8 @@ import { HeroService } from './heroes/hero.service';
Shark Crisis
- `,
+ `
// #enddocregion template
- providers: [HeroService],
- directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}
diff --git a/public/docs/_examples/router/ts/app/app.component.4.ts b/public/docs/_examples/router/ts/app/app.component.4.ts
index 80cf4b0d17..e609850a42 100644
--- a/public/docs/_examples/router/ts/app/app.component.4.ts
+++ b/public/docs/_examples/router/ts/app/app.component.4.ts
@@ -1,9 +1,5 @@
// #docregion
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { DialogService } from './dialog.service';
-import { HeroService } from './heroes/hero.service';
@Component({
selector: 'my-app',
@@ -17,13 +13,8 @@ import { HeroService } from './heroes/hero.service';
Crisis Admin
- `,
+ `
// #enddocregion template
- providers: [
- HeroService,
- DialogService
- ],
- directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}
diff --git a/public/docs/_examples/router/ts/app/app.component.ts b/public/docs/_examples/router/ts/app/app.component.ts
index a3ad280a45..2dcb0a062b 100644
--- a/public/docs/_examples/router/ts/app/app.component.ts
+++ b/public/docs/_examples/router/ts/app/app.component.ts
@@ -1,10 +1,6 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { DialogService } from './dialog.service';
-import { HeroService } from './heroes/hero.service';
@Component({
selector: 'my-app',
@@ -19,13 +15,8 @@ import { HeroService } from './heroes/hero.service';
Login
- `,
+ `
// #enddocregion template
- providers: [
- HeroService,
- DialogService
- ],
- directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
}
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..c6d5648bbf
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+
+// #docregion router-basics
+import { AppComponent } from './app.component';
+import { routing,
+ appRoutingProviders } from './app.routing';
+
+import { HeroListComponent } from './hero-list.component';
+import { CrisisListComponent } from './crisis-list.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing
+ ],
+ declarations: [
+ AppComponent,
+ HeroListComponent,
+ CrisisListComponent
+ ],
+ providers: [
+ appRoutingProviders
+ ],
+ bootstrap: [ AppComponent ]
+})
+// #enddocregion router-basics
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.2.ts b/public/docs/_examples/router/ts/app/app.module.2.ts
new file mode 100644
index 0000000000..35913ae6a2
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.2.ts
@@ -0,0 +1,35 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing,
+ appRoutingProviders } from './app.routing';
+
+// #docregion hero-import
+import { HeroesModule } from './heroes/heroes.module';
+
+import { CrisisListComponent } from './crisis-list.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HeroesModule
+ ],
+ declarations: [
+ AppComponent,
+ CrisisListComponent
+ ],
+ providers: [
+ appRoutingProviders
+ ],
+ bootstrap: [ AppComponent ]
+})
+// #enddocregion hero-import
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.3.ts b/public/docs/_examples/router/ts/app/app.module.3.ts
new file mode 100644
index 0000000000..d1969a860a
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.3.ts
@@ -0,0 +1,33 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing,
+ appRoutingProviders } from './app.routing';
+
+import { HeroesModule } from './heroes/heroes.module';
+import { CrisisCenterModule } from './crisis-center/crisis-center.module';
+
+import { DialogService } from './dialog.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HeroesModule,
+ CrisisCenterModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ providers: [
+ appRoutingProviders,
+ DialogService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
diff --git a/public/docs/_examples/router/ts/app/app.module.4.ts b/public/docs/_examples/router/ts/app/app.module.4.ts
new file mode 100644
index 0000000000..96a8eb61d9
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.4.ts
@@ -0,0 +1,28 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+const routes: Routes = [
+
+];
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
+ ],
+ declarations: [
+ AppComponent
+ ],
+ providers: [
+
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
diff --git a/public/docs/_examples/router/ts/app/app.module.ts b/public/docs/_examples/router/ts/app/app.module.ts
new file mode 100644
index 0000000000..f273052d83
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.ts
@@ -0,0 +1,35 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing,
+ appRoutingProviders } from './app.routing';
+
+import { HeroesModule } from './heroes/heroes.module';
+
+import { LoginComponent } from './login.component';
+
+import { DialogService } from './dialog.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HeroesModule
+ ],
+ declarations: [
+ AppComponent,
+ LoginComponent
+ ],
+ providers: [
+ appRoutingProviders,
+ DialogService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.routes.3.ts b/public/docs/_examples/router/ts/app/app.routes.3.ts
deleted file mode 100644
index e49d055672..0000000000
--- a/public/docs/_examples/router/ts/app/app.routes.3.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docplaster
-// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
-
-import { CrisisListComponent } from './crisis-center/crisis-list.component';
-import { heroesRoutes } from './heroes/heroes.routes';
-
-export const routes: RouterConfig = [
- ...heroesRoutes,
- { path: 'crisis-center', component: CrisisListComponent }
-];
-
-export const appRouterProviders = [
- provideRouter(routes)
-];
diff --git a/public/docs/_examples/router/ts/app/app.routes.4.ts b/public/docs/_examples/router/ts/app/app.routes.4.ts
deleted file mode 100644
index d51635a676..0000000000
--- a/public/docs/_examples/router/ts/app/app.routes.4.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
-
-import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { heroesRoutes } from './heroes/heroes.routes';
-
-export const routes: RouterConfig = [
- ...heroesRoutes,
- ...crisisCenterRoutes
-];
-
-export const appRouterProviders = [
- provideRouter(routes)
-];
diff --git a/public/docs/_examples/router/ts/app/app.routes.5.ts b/public/docs/_examples/router/ts/app/app.routes.5.ts
deleted file mode 100644
index 87e64af66e..0000000000
--- a/public/docs/_examples/router/ts/app/app.routes.5.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
-
-import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { heroesRoutes } from './heroes/heroes.routes';
-
-import { loginRoutes,
- authProviders } from './login.routes';
-
-export const routes: RouterConfig = [
- ...heroesRoutes,
- ...loginRoutes,
- ...crisisCenterRoutes
-];
-
-export const appRouterProviders = [
- provideRouter(routes),
- authProviders
-];
diff --git a/public/docs/_examples/router/ts/app/app.routes.ts b/public/docs/_examples/router/ts/app/app.routes.ts
deleted file mode 100644
index eb238680da..0000000000
--- a/public/docs/_examples/router/ts/app/app.routes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
-
-import { crisisCenterRoutes } from './crisis-center/crisis-center.routes';
-import { heroesRoutes } from './heroes/heroes.routes';
-
-import { loginRoutes,
- authProviders } from './login.routes';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-
-export const routes: RouterConfig = [
- ...heroesRoutes,
- ...loginRoutes,
- ...crisisCenterRoutes
-];
-
-export const appRouterProviders = [
- provideRouter(routes),
- authProviders,
- CanDeactivateGuard
-];
diff --git a/public/docs/_examples/router/ts/app/app.routes.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts
similarity index 73%
rename from public/docs/_examples/router/ts/app/app.routes.1.ts
rename to public/docs/_examples/router/ts/app/app.routing.1.ts
index 7919f34aba..ccdff404a4 100644
--- a/public/docs/_examples/router/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.1.ts
@@ -1,7 +1,7 @@
// #docplaster
// #docregion
// #docregion route-config
-import { provideRouter, RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
// #enddocregion route-config
// #enddocregion
@@ -15,10 +15,16 @@ import { PageNotFoundComponent } from './not-found.component';
// #docregion
// #docregion route-config
-const routes: RouterConfig = [
+const appRoutes: Routes = [
// #docregion route-defs
{ path: 'crisis-center', component: CrisisCenterComponent },
- { path: 'heroes', component: HeroListComponent },
+ {
+ path: 'heroes',
+ component: HeroListComponent,
+ data: {
+ title: 'Heroes List'
+ }
+ },
// #enddocregion route-defs
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent },
@@ -26,8 +32,10 @@ const routes: RouterConfig = [
{ path: '**', component: PageNotFoundComponent }
];
-export const appRouterProviders = [
- provideRouter(routes)
+export const appRoutingProviders: any[] = [
+
];
+
+export const routing = RouterModule.forRoot(appRoutes);
// #enddocregion route-config
// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.routes.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts
similarity index 67%
rename from public/docs/_examples/router/ts/app/app.routes.2.ts
rename to public/docs/_examples/router/ts/app/app.routing.2.ts
index e2e3d1f9fc..81c04c86da 100644
--- a/public/docs/_examples/router/ts/app/app.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.2.ts
@@ -1,19 +1,21 @@
// #docplaster
// #docregion
// #docregion route-config
-import { provideRouter, RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
// #enddocregion route-config
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent } from './hero-list.component';
// #docregion route-config
-const routes: RouterConfig = [
+const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'heroes', component: HeroListComponent }
];
-export const appRouterProviders = [
- provideRouter(routes)
+export const appRoutingProviders: any[] = [
+
];
+
+export const routing = RouterModule.forRoot(appRoutes);
// #enddocregion route-config
diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts
new file mode 100644
index 0000000000..2eab693570
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.routing.3.ts
@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion
+import { Routes, RouterModule } from '@angular/router';
+
+import { CrisisListComponent } from './crisis-center/crisis-list.component';
+
+const appRoutes: Routes = [
+ { path: 'crisis-center', component: CrisisListComponent }
+];
+
+export const appRoutingProviders: any[] = [
+
+];
+
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts
new file mode 100644
index 0000000000..59153e9e53
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.routing.4.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Routes, RouterModule } from '@angular/router';
+
+const appRoutes: Routes = [
+
+];
+
+export const appRoutingProviders: any[] = [
+
+];
+
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
new file mode 100644
index 0000000000..8334e865a5
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.routing.5.ts
@@ -0,0 +1,15 @@
+// #docregion
+import { Routes, RouterModule } from '@angular/router';
+
+import { loginRoutes,
+ authProviders } from './login.routing';
+
+const appRoutes: Routes = [
+ ...loginRoutes
+];
+
+export const appRoutingProviders: any[] = [
+ authProviders
+];
+
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.ts b/public/docs/_examples/router/ts/app/app.routing.ts
new file mode 100644
index 0000000000..46f497e45e
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.routing.ts
@@ -0,0 +1,45 @@
+// #docregion
+// #docregion import-router
+import { Routes, RouterModule } from '@angular/router';
+// #enddocregion import-router
+
+import { loginRoutes,
+ authProviders } from './login.routing';
+
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
+
+// #docregion lazy-load-crisis-center
+const crisisCenterRoutes: Routes = [
+ {
+ path: '',
+ redirectTo: '/heroes',
+ pathMatch: 'full'
+ },
+ {
+ path: 'crisis-center',
+ loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+ }
+];
+
+const appRoutes: Routes = [
+ ...loginRoutes,
+ ...crisisCenterRoutes
+];
+// #enddocregion lazy-load-crisis-center
+
+export const appRoutingProviders: any[] = [
+ authProviders,
+ CanDeactivateGuard
+];
+
+export const routing = RouterModule.forRoot(appRoutes);
+
+/* A link parameters array
+// #docregion heroes-redirect
+{
+ path: '',
+ redirectTo: '/heroes',
+ pathMatch: 'full'
+},
+// #enddocregion heroes-redirect
+*/
diff --git a/public/docs/_examples/router/ts/app/auth-guard.service.ts b/public/docs/_examples/router/ts/app/auth-guard.service.ts
index a70fadb5cf..63aee1deb5 100755
--- a/public/docs/_examples/router/ts/app/auth-guard.service.ts
+++ b/public/docs/_examples/router/ts/app/auth-guard.service.ts
@@ -2,7 +2,8 @@
import { Injectable } from '@angular/core';
import { CanActivate, Router,
ActivatedRouteSnapshot,
- RouterStateSnapshot } from '@angular/router';
+ RouterStateSnapshot,
+ NavigationExtras } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
@@ -20,7 +21,7 @@ export class AuthGuard implements CanActivate {
// Set our navigation extras object
// that contains our global query params and fragment
- let navigationExtras = {
+ let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
diff --git a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts
new file mode 100644
index 0000000000..b6e16bfa4c
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.1.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { CanDeactivate,
+ ActivatedRouteSnapshot,
+ RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { CrisisDetailComponent } from './crisis-center/crisis-detail.component';
+
+@Injectable()
+export class CanDeactivateGuard implements CanDeactivate {
+
+ canDeactivate(
+ component: CrisisDetailComponent,
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable | Promise | boolean {
+ // Get the Crisis Center ID
+ console.log(route.params['id']);
+
+ // Get the current URL
+ console.log(state.url);
+
+ // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
+ if (!component.crisis || component.crisis.name === component.editName) {
+ return true;
+ }
+ // Otherwise ask the user with the dialog service and return its
+ // promise which resolves to true or false when the user decides
+ return component.dialogService.confirm('Discard changes?');
+ }
+}
diff --git a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts
index e7774533bc..db8ecef5bf 100644
--- a/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts
+++ b/public/docs/_examples/router/ts/app/can-deactivate-guard.service.ts
@@ -9,7 +9,7 @@ export interface CanComponentDeactivate {
@Injectable()
export class CanDeactivateGuard implements CanDeactivate {
- canDeactivate(component: CanComponentDeactivate): Observable | boolean {
+ canDeactivate(component: CanComponentDeactivate): Observable | Promise | boolean {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts
index 4f4173a4e5..a8dacc8549 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.1.ts
@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
template: `
CRISIS ADMINISTRATION
Manage your crises here
- `,
- directives: []
+ `
})
export class CrisisAdminComponent { }
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts
index 9783466d4c..38fe14a38e 100755
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-admin.component.ts
@@ -1,7 +1,7 @@
// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
@@ -12,25 +12,22 @@ import 'rxjs/add/operator/map';
Session ID: {{ sessionId | async }}
Token: {{ token | async }}
- `,
- directives: []
+ `
})
export class CrisisAdminComponent implements OnInit {
sessionId: Observable;
token: Observable;
- constructor(private router: Router) {}
+ constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the session ID if available
- this.sessionId = this.router
- .routerState
+ this.sessionId = this.route
.queryParams
.map(params => params['session_id'] || 'None');
// Capture the fragment if available
- this.token = this.router
- .routerState
+ this.token = this.route
.fragment
.map(fragment => fragment || 'None');
}
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
deleted file mode 100644
index d5a1112c7b..0000000000
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.1.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { CrisisService } from './crisis.service';
-
-// #docregion minus-imports
-@Component({
- template: `
- CRISIS CENTER
-
- `,
- directives: [ROUTER_DIRECTIVES],
-// #docregion providers
- providers: [CrisisService]
-// #enddocregion providers
-})
-export class CrisisCenterComponent { }
-// #enddocregion minus-imports
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
index 9cc268b6bf..31d1790f45 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.component.ts
@@ -1,16 +1,14 @@
// #docregion
-import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { CrisisService } from './crisis.service';
+// #docplaster
+import { Component } from '@angular/core';
+// #docregion minus-imports
@Component({
template: `
CRISIS CENTER
- `,
- directives: [ROUTER_DIRECTIVES],
- providers: [CrisisService]
+ `
})
export class CrisisCenterComponent { }
+// #enddocregion minus-imports
// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
new file mode 100644
index 0000000000..a392ccfe04
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { CrisisService } from './crisis.service';
+
+import { CrisisCenterComponent } from './crisis-center.component';
+import { CrisisListComponent } from './crisis-list.component';
+import { CrisisDetailComponent } from './crisis-detail.component';
+
+import { crisisCenterRouting } from './crisis-center.routing';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ crisisCenterRouting
+ ],
+ declarations: [
+ CrisisCenterComponent,
+ CrisisListComponent,
+ CrisisDetailComponent
+ ],
+// #docregion providers
+ providers: [
+ CrisisService
+ ]
+// #enddocregion providers
+})
+export class CrisisCenterModule {}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
new file mode 100644
index 0000000000..41b31d6aa5
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
@@ -0,0 +1,42 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+import { CrisisService } from './crisis.service';
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve } from './crisis-detail-resolve.service';
+// #enddocregion crisis-detail-resolve
+
+import { CrisisCenterComponent } from './crisis-center.component';
+import { CrisisListComponent } from './crisis-list.component';
+import { CrisisDetailComponent } from './crisis-detail.component';
+import { CrisisAdminComponent } from './crisis-admin.component';
+
+import { crisisCenterRouting } from './crisis-center.routing';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ crisisCenterRouting
+ ],
+ declarations: [
+ CrisisCenterComponent,
+ CrisisListComponent,
+ CrisisDetailComponent,
+ CrisisAdminComponent
+ ],
+ // #docregion crisis-detail-resolve
+
+ providers: [
+ CrisisService,
+ CrisisDetailResolve
+ ]
+ // #enddocregion crisis-detail-resolve
+})
+// #docregion crisis-center-module-export
+export class CrisisCenterModule {}
+// #enddocregion crisis-center-module-export
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
similarity index 72%
rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts
rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
index 7f28dabdcf..0d53587aa4 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
@@ -1,11 +1,12 @@
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
// #docregion routes
-export const crisisCenterRoutes: RouterConfig = [
+const crisisCenterRoutes: Routes = [
{
path: 'crisis-center',
component: CrisisCenterComponent,
@@ -15,4 +16,6 @@ export const crisisCenterRoutes: RouterConfig = [
]
}
];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion routes
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
similarity index 77%
rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts
rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
index 3e8d2f391e..a95ab751f3 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.2.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
@@ -1,11 +1,12 @@
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
// #docregion routes
-export const crisisCenterRoutes: RouterConfig = [
+const crisisCenterRoutes: Routes = [
// #docregion redirect
{
path: '',
@@ -22,4 +23,6 @@ export const crisisCenterRoutes: RouterConfig = [
]
}
];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion routes
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
similarity index 86%
rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts
rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
index b0d0fc9fca..8d92662132 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.3.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
@@ -1,6 +1,7 @@
// #docplaster
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
@@ -8,7 +9,7 @@ import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
-export const crisisCenterRoutes: RouterConfig = [
+const crisisCenterRoutes: Routes = [
{
path: '',
redirectTo: '/crisis-center',
@@ -36,6 +37,8 @@ export const crisisCenterRoutes: RouterConfig = [
]
}
];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion
/*
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
similarity index 87%
rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts
rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
index a7e1612297..fa5d1e887c 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.4.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.4.ts
@@ -1,6 +1,7 @@
// #docplaster
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
import { CrisisCenterComponent } from './crisis-center.component';
@@ -9,7 +10,7 @@ import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
import { AuthGuard } from '../auth-guard.service';
-export const crisisCenterRoutes: RouterConfig = [
+const crisisCenterRoutes: Routes = [
{
path: '',
redirectTo: '/crisis-center',
@@ -38,6 +39,8 @@ export const crisisCenterRoutes: RouterConfig = [
]
}
];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
// #enddocregion
/*
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
similarity index 63%
rename from public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts
rename to public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
index 6712b35ced..cb7cda5d31 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routes.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.5.ts
@@ -1,14 +1,20 @@
+// #docplaster
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisDetailComponent } from './crisis-detail.component';
import { CrisisListComponent } from './crisis-list.component';
-import { CrisisCenterComponent } from './crisis-center.component';
import { CrisisAdminComponent } from './crisis-admin.component';
import { CanDeactivateGuard } from '../can-deactivate-guard.service';
import { AuthGuard } from '../auth-guard.service';
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve } from './crisis-detail-resolve.service';
-export const crisisCenterRoutes: RouterConfig = [
+// #enddocregion crisis-detail-resolve
+
+const crisisCenterRoutes: Routes = [
{
path: '',
redirectTo: '/crisis-center',
@@ -25,11 +31,16 @@ export const crisisCenterRoutes: RouterConfig = [
canActivate: [AuthGuard]
},
// #enddocregion admin-route
+ // #docregion crisis-detail-resolve
{
path: ':id',
component: CrisisDetailComponent,
- canDeactivate: [CanDeactivateGuard]
+ canDeactivate: [CanDeactivateGuard],
+ resolve: {
+ crisis: CrisisDetailResolve
+ }
},
+ // #enddocregion crisis-detail-resolve
{
path: '',
component: CrisisListComponent
@@ -37,3 +48,5 @@ export const crisisCenterRoutes: RouterConfig = [
]
}
];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
new file mode 100644
index 0000000000..2d044f9de9
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
@@ -0,0 +1,50 @@
+// #docplaster
+// #docregion
+import { Routes, RouterModule } from '@angular/router';
+
+import { CrisisCenterComponent } from './crisis-center.component';
+import { CrisisDetailComponent } from './crisis-detail.component';
+import { CrisisListComponent } from './crisis-list.component';
+import { CrisisAdminComponent } from './crisis-admin.component';
+
+import { CanDeactivateGuard } from '../can-deactivate-guard.service';
+import { AuthGuard } from '../auth-guard.service';
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve } from './crisis-detail-resolve.service';
+
+// #enddocregion crisis-detail-resolve
+
+// #docregion lazy-load-crisis-center
+const crisisCenterRoutes: Routes = [
+ {
+ path: '',
+ component: CrisisCenterComponent,
+ children: [
+ // #docregion admin-route
+ {
+ path: 'admin',
+ component: CrisisAdminComponent,
+ canActivate: [AuthGuard]
+ },
+ // #enddocregion admin-route
+ // #docregion crisis-detail-resolve
+ {
+ path: ':id',
+ component: CrisisDetailComponent,
+ canDeactivate: [CanDeactivateGuard],
+ resolve: {
+ crisis: CrisisDetailResolve
+ }
+ // #enddocregion crisis-detail-resolve
+ },
+ {
+ path: '',
+ component: CrisisListComponent
+ }
+ ]
+ }
+];
+
+export const crisisCenterRouting = RouterModule.forChild(crisisCenterRoutes);
+// #enddocregion lazy-load-crisis-center
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
new file mode 100644
index 0000000000..d0d6d1f192
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Router, Resolve,
+ ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+import { Crisis, CrisisService } from './crisis.service';
+
+@Injectable()
+export class CrisisDetailResolve implements Resolve {
+ constructor(private cs: CrisisService, private router: Router) {}
+
+ resolve(route: ActivatedRouteSnapshot): Observable | Promise | any {
+ let id = +route.params['id'];
+
+ return this.cs.getCrisis(id).then(crisis => {
+ if (crisis) {
+ return crisis;
+ } else { // id not found
+ this.router.navigate(['/crisis-center']);
+ return false;
+ }
+ });
+ }
+}
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
index fdb331dec7..9d37453cc1 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
@@ -2,13 +2,11 @@
// #docregion
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/fromPromise';
import { Crisis, CrisisService } from './crisis.service';
import { DialogService } from '../dialog.service';
-
-
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
@Component({
// #docregion template
@@ -36,7 +34,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
crisis: Crisis;
editName: string;
// #enddocregion ngOnDestroy
- private sub: any;
+ private sub: Subscription;
// #enddocregion ngOnDestroy
// #enddocregion cancel-save
@@ -44,7 +42,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
private service: CrisisService,
private router: Router,
private route: ActivatedRoute,
- private dialogService: DialogService
+ public dialogService: DialogService
) { }
// #docregion ngOnInit
@@ -86,16 +84,14 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
// #enddocregion cancel-save
// #docregion cancel-save-only
- canDeactivate(): Observable | boolean {
+ canDeactivate(): Observable | Promise | boolean {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
if (!this.crisis || this.crisis.name === this.editName) {
return true;
}
// Otherwise ask the user with the dialog service and return its
// promise which resolves to true or false when the user decides
- let p = this.dialogService.confirm('Discard changes?');
- let o = Observable.fromPromise(p);
- return o;
+ return this.dialogService.confirm('Discard changes?');
}
// #enddocregion cancel-save-only
@@ -105,7 +101,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
// Pass along the hero id if available
// so that the CrisisListComponent can select that hero.
// Add a totally useless `foo` parameter for kicks.
- this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
+ this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }]);
}
// #enddocregion gotoCrises
// #docregion cancel-save
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
index 95df7d567f..303f8c6d43 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
@@ -1,12 +1,11 @@
// #docplaster
// #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/fromPromise';
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
-import { Crisis, CrisisService } from './crisis.service';
-import { DialogService } from '../dialog.service';
+import { Crisis } from './crisis.service';
+import { DialogService } from '../dialog.service';
+import { Observable } from 'rxjs/Observable';
@Component({
template: `
@@ -27,40 +26,24 @@ import { DialogService } from '../dialog.service';
styles: ['input {width: 20em}']
})
-export class CrisisDetailComponent implements OnInit, OnDestroy {
+export class CrisisDetailComponent implements OnInit {
crisis: Crisis;
editName: string;
- private sub: any;
constructor(
- private service: CrisisService,
private route: ActivatedRoute,
private router: Router,
- private dialogService: DialogService
+ public dialogService: DialogService
) { }
+// #docregion crisis-detail-resolve
ngOnInit() {
- this.sub = this.route
- .params
- .subscribe(params => {
- let id = +params['id'];
- this.service.getCrisis(id)
- .then(crisis => {
- if (crisis) {
- this.editName = crisis.name;
- this.crisis = crisis;
- } else { // id not found
- this.gotoCrises();
- }
- });
- });
- }
-
- ngOnDestroy() {
- if (this.sub) {
- this.sub.unsubscribe();
- }
+ this.route.data.forEach((data: { crisis: Crisis }) => {
+ this.editName = data.crisis.name;
+ this.crisis = data.crisis;
+ });
}
+// #enddocregion crisis-detail-resolve
cancel() {
this.gotoCrises();
@@ -71,16 +54,14 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
this.gotoCrises();
}
- canDeactivate(): Observable | boolean {
+ canDeactivate(): Observable | Promise | boolean {
// Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
if (!this.crisis || this.crisis.name === this.editName) {
return true;
}
// Otherwise ask the user with the dialog service and return its
// promise which resolves to true or false when the user decides
- let p = this.dialogService.confirm('Discard changes?');
- let o = Observable.fromPromise(p);
- return o;
+ return this.dialogService.confirm('Discard changes?');
}
// #docregion gotoCrises
@@ -91,7 +72,7 @@ export class CrisisDetailComponent implements OnInit, OnDestroy {
// Add a totally useless `foo` parameter for kicks.
// #docregion gotoCrises-navigate
// Absolute link
- this.router.navigate(['/crisis-center', {id: crisisId, foo: 'foo'}]);
+ this.router.navigate(['/crisis-center', { id: crisisId, foo: 'foo' }]);
// #enddocregion gotoCrises-navigate
}
// #enddocregion gotoCrises
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
index c962ee0134..2d1df3df33 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
@@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
// #docregion template
@@ -20,7 +21,7 @@ import { Crisis, CrisisService } from './crisis.service';
export class CrisisListComponent implements OnInit, OnDestroy {
crises: Crisis[];
selectedId: number;
- private sub: any;
+ private sub: Subscription;
constructor(
private service: CrisisService,
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
index df51b14ade..7a6dcb2e9e 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
@@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Crisis, CrisisService } from './crisis.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
template: `
@@ -14,12 +15,12 @@ import { Crisis, CrisisService } from './crisis.service';
{{crisis.id}} {{crisis.name}}
- `,
+ `
})
export class CrisisListComponent implements OnInit, OnDestroy {
crises: Crisis[];
private selectedId: number;
- private sub: any;
+ private sub: Subscription;
constructor(
private service: CrisisService,
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
index e84e4ad3e1..338b9ce3c4 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
@@ -4,6 +4,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Hero, HeroService } from './hero.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
template: `
@@ -20,12 +21,12 @@ import { Hero, HeroService } from './hero.service';
Back
- `,
+ `
})
export class HeroDetailComponent implements OnInit, OnDestroy {
hero: Hero;
// #docregion ngOnInit
- private sub: any;
+ private sub: Subscription;
// #enddocregion ngOnInit
// #docregion ctor
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
index 628a6e2dd1..07b876c79f 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
@@ -20,7 +20,7 @@ import { Hero, HeroService } from './hero.service';
Back
- `,
+ `
})
export class HeroDetailComponent implements OnInit {
hero: Hero;
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
index 7d5fb1cf96..20b851ae6e 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
@@ -3,7 +3,8 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
-import { Hero, HeroService } from './hero.service';
+import { Hero, HeroService } from './hero.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
template: `
@@ -20,13 +21,13 @@ import { Hero, HeroService } from './hero.service';
Back
- `,
+ `
})
export class HeroDetailComponent implements OnInit, OnDestroy {
hero: Hero;
// #docregion ngOnInit
- private sub: any;
+ private sub: Subscription;
// #enddocregion ngOnInit
// #docregion ctor
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
index 72dd3e0b25..831f24adc4 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
// #enddocregion import-router
-import { Hero, HeroService } from './hero.service';
+import { Hero, HeroService } from './hero.service';
+import { Subscription } from 'rxjs/Subscription';
@Component({
// #docregion template
@@ -27,7 +28,7 @@ export class HeroListComponent implements OnInit, OnDestroy {
// #docregion ctor
private selectedId: number;
- private sub: any;
+ private sub: Subscription;
constructor(
private service: HeroService,
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts b/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts
new file mode 100644
index 0000000000..973102f83b
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.module.1.ts
@@ -0,0 +1,25 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { HeroListComponent } from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule
+ ],
+ declarations: [
+ HeroListComponent,
+ HeroDetailComponent
+ ],
+ providers: [
+ HeroService
+ ]
+})
+export class HeroesModule {}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts
new file mode 100644
index 0000000000..1816ef1e56
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { HeroListComponent } from './hero-list.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { HeroService } from './hero.service';
+
+// #docregion heroes-routes
+import { heroesRouting } from './heroes.routing';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ heroesRouting
+ ],
+ declarations: [
+ HeroListComponent,
+ HeroDetailComponent
+ ],
+ providers: [
+ HeroService
+ ]
+})
+// #enddocregion heroes-routes
+export class HeroesModule {}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
similarity index 68%
rename from public/docs/_examples/router/ts/app/heroes/heroes.routes.ts
rename to public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
index f6c2b19c75..89270ec492 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes.routes.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
@@ -1,12 +1,15 @@
// #docregion
-import { RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
-export const heroesRoutes: RouterConfig = [
+const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent },
// #docregion hero-detail-route
{ path: 'hero/:id', component: HeroDetailComponent }
// #enddocregion hero-detail-route
];
+
+export const heroesRouting = RouterModule.forChild(heroesRoutes);
// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/login.component.1.ts b/public/docs/_examples/router/ts/app/login.component.1.ts
new file mode 100644
index 0000000000..ddee339011
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/login.component.1.ts
@@ -0,0 +1,46 @@
+// #docregion
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Component({
+ template: `
+ LOGIN
+ {{message}}
+
+ Login
+ Logout
+
`
+})
+export class LoginComponent {
+ message: string;
+
+ constructor(public authService: AuthService, public router: Router) {
+ this.setMessage();
+ }
+
+ setMessage() {
+ this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
+ }
+
+ login() {
+ this.message = 'Trying to log in ...';
+
+ this.authService.login().subscribe(() => {
+ this.setMessage();
+ if (this.authService.isLoggedIn) {
+ // Get the redirect URL from our auth service
+ // If no redirect has been set, use the default
+ let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
+
+ // Redirect the user
+ this.router.navigate([redirect]);
+ }
+ });
+ }
+
+ logout() {
+ this.authService.logout();
+ this.setMessage();
+ }
+}
diff --git a/public/docs/_examples/router/ts/app/login.component.ts b/public/docs/_examples/router/ts/app/login.component.ts
index ddee339011..6dd5605fb1 100755
--- a/public/docs/_examples/router/ts/app/login.component.ts
+++ b/public/docs/_examples/router/ts/app/login.component.ts
@@ -1,7 +1,8 @@
// #docregion
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { AuthService } from './auth.service';
+import { Component } from '@angular/core';
+import { Router,
+ NavigationExtras } from '@angular/router';
+import { AuthService } from './auth.service';
@Component({
template: `
@@ -33,8 +34,17 @@ export class LoginComponent {
// If no redirect has been set, use the default
let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
+ // #docregion preserve
+ // Set our navigation extras object
+ // that passes on our global query params and fragment
+ let navigationExtras: NavigationExtras = {
+ preserveQueryParams: true,
+ preserveFragment: true
+ };
+
// Redirect the user
- this.router.navigate([redirect]);
+ this.router.navigate([redirect], navigationExtras);
+ // #enddocregion preserve
}
});
}
diff --git a/public/docs/_examples/router/ts/app/login.routes.ts b/public/docs/_examples/router/ts/app/login.routes.ts
deleted file mode 100644
index 8bfc1ff10d..0000000000
--- a/public/docs/_examples/router/ts/app/login.routes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { RouterConfig } from '@angular/router';
-import { AuthGuard } from './auth-guard.service';
-import { AuthService } from './auth.service';
-import { LoginComponent } from './login.component';
-
-export const loginRoutes: RouterConfig = [
- { path: 'login', component: LoginComponent }
-];
-
-export const authProviders = [AuthGuard, AuthService];
diff --git a/public/docs/_examples/router/ts/app/login.routing.ts b/public/docs/_examples/router/ts/app/login.routing.ts
new file mode 100644
index 0000000000..9e3eaf2350
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/login.routing.ts
@@ -0,0 +1,14 @@
+// #docregion
+import { Routes } from '@angular/router';
+import { AuthGuard } from './auth-guard.service';
+import { AuthService } from './auth.service';
+import { LoginComponent } from './login.component';
+
+export const loginRoutes: Routes = [
+ { path: 'login', component: LoginComponent }
+];
+
+export const authProviders = [
+ AuthGuard,
+ AuthService
+];
diff --git a/public/docs/_examples/router/ts/app/main.1.ts b/public/docs/_examples/router/ts/app/main.1.ts
deleted file mode 100644
index deff5b9ac5..0000000000
--- a/public/docs/_examples/router/ts/app/main.1.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/* First version */
-// #docplaster
-// #docregion all
-// main entry point
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
-
-// #enddocregion
-
-/* Can't use AppComponent ... but display as if we can
-// #docregion all
-
-bootstrap(AppComponent, [
-// #enddocregion all
-*/
-// Actually use the v.1 component
-import { AppComponent as ac } from './app.component.ts'; // './app.component.1';
-
-bootstrap(ac, [
-// #docregion all
- appRouterProviders
-])
-.catch(err => console.error(err));
-// #enddocregion all
diff --git a/public/docs/_examples/router/ts/app/main.2.ts b/public/docs/_examples/router/ts/app/main.2.ts
deleted file mode 100644
index 10e4e4b18a..0000000000
--- a/public/docs/_examples/router/ts/app/main.2.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/* Second version */
-// For Milestone #2
-// Also includes digression on HashPathStrategy (not used in the final app)
-// #docplaster
-// #docregion
-// main entry point
-import { bootstrap } from '@angular/platform-browser-dynamic';
-
-// Add these symbols to override the `LocationStrategy`
-import { LocationStrategy,
- HashLocationStrategy } from '@angular/common';
-
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
-
-// #enddocregion
-
-/* Can't use AppComponent ... but display as if we can
-// #docregion
-bootstrap(AppComponent, [
-// #enddocregion
-*/
-// Actually use the v.2 component
-import { AppComponent as ac } from './app.component.ts'; // './app.component.2';
-
-bootstrap(ac, [
-// #docregion
- appRouterProviders,
- { provide: LocationStrategy, useClass: HashLocationStrategy } // .../#/crisis-center/
-
-])
-.catch(err => console.error(err));
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/main.3.ts b/public/docs/_examples/router/ts/app/main.3.ts
deleted file mode 100644
index e1be742421..0000000000
--- a/public/docs/_examples/router/ts/app/main.3.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* third version */
-// #docregion
-// main entry point
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component.3';
-import { appRouterProviders } from './app.routes';
-
-bootstrap(AppComponent, [
- appRouterProviders
-])
-.catch(err => console.error(err));
diff --git a/public/docs/_examples/router/ts/app/main.ts b/public/docs/_examples/router/ts/app/main.ts
index 6142cad5ee..ba9421d573 100644
--- a/public/docs/_examples/router/ts/app/main.ts
+++ b/public/docs/_examples/router/ts/app/main.ts
@@ -1,10 +1,6 @@
// #docregion
-// main entry point
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
-bootstrap(AppComponent, [
- appRouterProviders
-])
-.catch(err => console.error(err));
+import { AppModule } from './app.module';
+
+browserDynamicPlatform().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html
deleted file mode 100644
index 2330a69e75..0000000000
--- a/public/docs/_examples/router/ts/index.2.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
- Router Sample v.2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Milestone 2
- loading...
-
-
-
- Milestone 2
- loading...
-
-
-
-
diff --git a/public/docs/_examples/router/ts/plnkr.json b/public/docs/_examples/router/ts/plnkr.json
index 73d83adaf6..97c725fd7d 100644
--- a/public/docs/_examples/router/ts/plnkr.json
+++ b/public/docs/_examples/router/ts/plnkr.json
@@ -6,7 +6,8 @@
"!**/*.[1,2,3,4,5].*",
"!app/crisis-list.component.ts",
"!app/hero-list.component.ts",
- "!app/crisis-center/add-crisis.component.ts"
+ "!app/crisis-center/add-crisis.component.ts",
+ "!app/not-found.component.ts"
],
"tags": ["router"]
}
diff --git a/public/docs/_examples/security/ts/app/app.component.ts b/public/docs/_examples/security/ts/app/app.component.ts
index a2fc7e7320..c30235e8e7 100644
--- a/public/docs/_examples/security/ts/app/app.component.ts
+++ b/public/docs/_examples/security/ts/app/app.component.ts
@@ -1,20 +1,13 @@
// #docregion
import { Component } from '@angular/core';
-import { BypassSecurityComponent } from './bypass-security.component';
-import { InnerHtmlBindingComponent } from './inner-html-binding.component';
-
@Component({
selector: 'my-app',
template: `
Security
- `,
- directives: [
- BypassSecurityComponent,
- InnerHtmlBindingComponent,
- ]
+ `
})
export class AppComponent {
}
diff --git a/public/docs/_examples/security/ts/app/app.module.ts b/public/docs/_examples/security/ts/app/app.module.ts
new file mode 100644
index 0000000000..21d880be3b
--- /dev/null
+++ b/public/docs/_examples/security/ts/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { BypassSecurityComponent } from './bypass-security.component';
+import { InnerHtmlBindingComponent } from './inner-html-binding.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ AppComponent,
+ BypassSecurityComponent,
+ InnerHtmlBindingComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/security/ts/app/main.ts b/public/docs/_examples/security/ts/app/main.ts
index 3e1476beac..fc0ac5294a 100644
--- a/public/docs/_examples/security/ts/app/main.ts
+++ b/public/docs/_examples/security/ts/app/main.ts
@@ -1,8 +1,6 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-// #docregion import
-import { AppComponent } from './app.component';
-// #enddocregion import
+platformBrowserDynamic().bootstrapModule(AppModule);
-bootstrap(AppComponent);
diff --git a/public/docs/_examples/server-communication/ts/app/app.component.ts b/public/docs/_examples/server-communication/ts/app/app.component.ts
index 144475d0e4..3a532b6524 100644
--- a/public/docs/_examples/server-communication/ts/app/app.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/app.component.ts
@@ -7,12 +7,6 @@ import { Component } from '@angular/core';
import './rxjs-operators';
// #enddocregion import-rxjs
-import { HeroListComponent } from './toh/hero-list.component';
-import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
-
-import { WikiComponent } from './wiki/wiki.component';
-import { WikiSmartComponent } from './wiki/wiki-smart.component';
-
@Component({
selector: 'my-app',
template: `
@@ -20,18 +14,7 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component';
- `,
-// #enddocregion
-/*
-// #docregion http-providers
- providers: [ HTTP_PROVIDERS ]
-// #enddocregion http-providers
-*/
-// #docregion
- directives: [
- HeroListComponent, HeroListPromiseComponent,
- WikiComponent, WikiSmartComponent
- ]
+ `
})
export class AppComponent { }
// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.1.ts b/public/docs/_examples/server-communication/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..51e52573cb
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/app.module.1.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule, JsonpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ JsonpModule
+ ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+
diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts
new file mode 100644
index 0000000000..528110661b
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/app.module.ts
@@ -0,0 +1,41 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule, JsonpModule, XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import { HeroData } from './hero-data';
+import { AppComponent } from './app.component';
+
+import { HeroListComponent } from './toh/hero-list.component';
+import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
+
+import { WikiComponent } from './wiki/wiki.component';
+import { WikiSmartComponent } from './wiki/wiki-smart.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ HttpModule,
+ JsonpModule
+ ],
+ providers: [
+ { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+ { provide: SEED_DATA, useClass: HeroData } // in-mem server data
+ ],
+ declarations: [
+ AppComponent,
+ HeroListComponent,
+ HeroListPromiseComponent,
+ WikiComponent,
+ WikiSmartComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+
+
+
diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts
index 194ab5c5fb..4acf5de663 100644
--- a/public/docs/_examples/server-communication/ts/app/main.ts
+++ b/public/docs/_examples/server-communication/ts/app/main.ts
@@ -1,29 +1,5 @@
-// #docplaster
-// #docregion final
-// Imports for loading & configuring the in-memory web api
-import { XHRBackend } from '@angular/http';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { InMemoryBackendService,
- SEED_DATA } from 'angular2-in-memory-web-api';
-import { HeroData } from './hero-data';
-
-// The usual bootstrapping imports
-// #docregion v1
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HTTP_PROVIDERS } from '@angular/http';
-
-import { AppComponent } from './app.component';
-
-// #enddocregion v1, final
-/*
-// #docregion v1
-bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
-// #enddocregion v1
- */
-// #docregion final
-bootstrap(AppComponent, [
- HTTP_PROVIDERS,
- { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
- { provide: SEED_DATA, useClass: HeroData } // in-mem server data
-]);
-// #enddocregion final
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
index 608ee996b0..e6bbce139b 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts
@@ -1,6 +1,5 @@
// #docregion
import { Component } from '@angular/core';
-import { JSONP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Observable';
// #docregion import-subject
import { Subject } from 'rxjs/Subject';
@@ -20,7 +19,7 @@ import { WikipediaService } from './wikipedia.service';
{{item}}
`,
- providers: [JSONP_PROVIDERS, WikipediaService]
+ providers: [WikipediaService]
})
export class WikiSmartComponent {
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
index 6253e0933b..92c31afb80 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wiki.component.ts
@@ -1,6 +1,5 @@
// #docregion
import { Component } from '@angular/core';
-import { JSONP_PROVIDERS } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { WikipediaService } from './wikipedia.service';
@@ -17,7 +16,7 @@ import { WikipediaService } from './wikipedia.service';
{{item}}
`,
- providers: [JSONP_PROVIDERS, WikipediaService]
+ providers: [WikipediaService]
})
export class WikiComponent {
items: Observable;
diff --git a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
index 8bc5747e43..96eca70af1 100644
--- a/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
+++ b/public/docs/_examples/server-communication/ts/app/wiki/wikipedia.service.ts
@@ -12,7 +12,7 @@ export class WikipediaService {
// #docregion search-parameters
let params = new URLSearchParams();
-params.set('search', term); // the user's search value
+ params.set('search', term); // the user's search value
params.set('action', 'opensearch');
params.set('format', 'json');
params.set('callback', 'JSONP_CALLBACK');
diff --git a/public/docs/_examples/structural-directives/ts/app/app.module.ts b/public/docs/_examples/structural-directives/ts/app/app.module.ts
new file mode 100644
index 0000000000..0712db6d4b
--- /dev/null
+++ b/public/docs/_examples/structural-directives/ts/app/app.module.ts
@@ -0,0 +1,18 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { StructuralDirectivesComponent } from './structural-directives.component';
+import { UnlessDirective } from './unless.directive';
+import { HeavyLoaderComponent } from './heavy-loader.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [
+ StructuralDirectivesComponent,
+ UnlessDirective,
+ HeavyLoaderComponent
+ ],
+ bootstrap: [ StructuralDirectivesComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/structural-directives/ts/app/main.ts b/public/docs/_examples/structural-directives/ts/app/main.ts
index 5f5b5aeb19..fc0ac5294a 100644
--- a/public/docs/_examples/structural-directives/ts/app/main.ts
+++ b/public/docs/_examples/structural-directives/ts/app/main.ts
@@ -1,5 +1,6 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { StructuralDirectivesComponent } from './structural-directives.component';
+platformBrowserDynamic().bootstrapModule(AppModule);
-bootstrap(StructuralDirectivesComponent);
diff --git a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
index 1e5a9ef939..8e36da3462 100644
--- a/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
+++ b/public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts
@@ -1,14 +1,11 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-import { UnlessDirective } from './unless.directive';
-import { HeavyLoaderComponent } from './heavy-loader.component';
@Component({
selector: 'structural-directives',
templateUrl: 'app/structural-directives.component.html',
- styles: ['button { min-width: 100px; }'],
- directives: [UnlessDirective, HeavyLoaderComponent]
+ styles: ['button { min-width: 100px; }']
})
export class StructuralDirectivesComponent {
heroes = ['Mr. Nice', 'Narco', 'Bombasto'];
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
index 67ae0213be..a9f29647a0 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
@@ -1,7 +1,7 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroesComponent, HeroService } from './heroes';
+import { HeroService } from './heroes';
@Component({
moduleId: module.id,
@@ -10,7 +10,6 @@ import { HeroesComponent, HeroService } from './heroes';
`,
styleUrls: ['app.component.css'],
- directives: [HeroesComponent],
- providers: [HeroService]
+ providers: [ HeroService ]
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts
new file mode 100644
index 0000000000..53f29ea8cb
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/01-01/app/app.module.ts
@@ -0,0 +1,27 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ // #enddocregion
+ RouterModule.forChild([{ path: '01-01', component: AppComponent }])
+ // #docregion
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ exports: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion
+
+
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
index e19934c4d2..853e6ab64e 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.component.avoid.ts
@@ -1,8 +1,9 @@
// #docregion
/* avoid */
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { Component, OnInit } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, Component, OnInit } from '@angular/core';
class Hero {
id: number;
@@ -27,7 +28,15 @@ class AppComponent implements OnInit {
}
}
-bootstrap(AppComponent, []);
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ exports: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);
const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
diff --git a/public/docs/_examples/style-guide/ts/01-01/main.ts b/public/docs/_examples/style-guide/ts/01-01/main.ts
index 6b97e81a59..7e8269bd65 100644
--- a/public/docs/_examples/style-guide/ts/01-01/main.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/main.ts
@@ -1,6 +1,6 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app/app.component';
+import { AppModule } from './app/app.module';
-bootstrap(AppComponent, []);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts
index 9e4bb0b8c5..c82e12624d 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts
@@ -1,14 +1,10 @@
import { Component } from '@angular/core';
-import { HeroComponent } from './heroes';
-import { UsersComponent } from './users';
-
@Component({
selector: 'sg-app',
template: `
- `,
- directives: [HeroComponent, UsersComponent]
+ `
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts
new file mode 100644
index 0000000000..4320fe67d5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/02-07/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent } from './heroes';
+import { UsersComponent } from './users';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '02-07', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroComponent,
+ UsersComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts
index 29b3ed7062..bf27aeaf8a 100644
--- a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { ValidateDirective } from './shared';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [ValidateDirective]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts
new file mode 100644
index 0000000000..a86c713d4f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/02-08/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { ValidateDirective } from './shared';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '02-08', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ ValidateDirective
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts
new file mode 100644
index 0000000000..48079f21c7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-01/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '03-01', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts
new file mode 100644
index 0000000000..2db4012ebf
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-02/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '03-02', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts
new file mode 100644
index 0000000000..29b3d2e765
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '03-03', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts
new file mode 100644
index 0000000000..a5a8d5bb4e
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-04/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '03-04', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts
new file mode 100644
index 0000000000..b70c8416c7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+export const route = { path: '03-05', component: AppComponent };
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '03-05', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts
new file mode 100644
index 0000000000..f259ce23a2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '03-06', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
deleted file mode 100644
index dbf3079697..0000000000
--- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './heroes.component';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
index b7554b8d06..aef486d9a2 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
@@ -1,13 +1,9 @@
// #docregion
import { Component } from '@angular/core';
-// #docregion example
-import { HeroesComponent } from './+heroes';
-// #enddocregion example
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroesComponent]
+ template: ' '
})
-export class AppComponent { }
+export class AppComponent {
+ }
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts
new file mode 100644
index 0000000000..dec8d2c6f2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/app.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { SharedModule } from './shared/shared.module';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ SharedModule,
+ RouterModule.forChild([{ path: '04-10', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ exports: [ AppComponent ],
+ entryComponents: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts
similarity index 94%
rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts
index b61e3ab782..2d10e7b3c3 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.avoid.ts
@@ -1,3 +1,4 @@
+/* tslint:disable:no-unused-variable */
// #docregion
// #docregion example
/* avoid */
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.html
similarity index 100%
rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html
rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.html
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts
similarity index 86%
rename from public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
rename to public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts
index 9ca611ee5c..1443a5b445 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts
@@ -7,8 +7,6 @@ import {
CONFIG,
EntityService,
ExceptionService,
- FilterTextComponent,
- InitCapsPipe,
SpinnerService,
ToastService
} from '../shared';
@@ -17,8 +15,6 @@ import {
// #enddocregion example
moduleId: module.id,
providers: [EntityService, ExceptionService, SpinnerService, ToastService],
- directives: [FilterTextComponent],
- pipes: [InitCapsPipe],
// #docregion example
selector: 'toh-heroes',
templateUrl: 'heroes.component.html'
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/index.ts
deleted file mode 100644
index aa9e5b0b7c..0000000000
--- a/public/docs/_examples/style-guide/ts/04-10/app/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './+heroes';
-export * from './shared';
-export * from './app.component';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts
new file mode 100644
index 0000000000..6500b28330
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/shared.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { FilterTextComponent,
+ InitCapsPipe,
+ ModalComponent,
+ NavComponent,
+ SpinnerComponent } from './';
+
+const declarations = [
+ FilterTextComponent, InitCapsPipe, ModalComponent,
+ NavComponent, SpinnerComponent,
+];
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: declarations,
+ exports: declarations
+})
+export class SharedModule { }
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts
index ebf8146349..0e43893f7f 100644
--- a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { HeroesComponent } from './+heroes';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroesComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts
new file mode 100644
index 0000000000..be01c06624
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './+heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '04-14', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts
index 76bf4eafd5..03062c57fd 100644
--- a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts
@@ -1,11 +1,8 @@
import { Component } from '@angular/core';
-import { HeroButtonComponent } from './heroes';
-
@Component({
moduleId: module.id,
selector: 'sg-app',
- templateUrl: 'app.component.html',
- directives: [HeroButtonComponent]
+ templateUrl: 'app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts
new file mode 100644
index 0000000000..1c458e2ca1
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-02/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '05-02', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroButtonComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts
index 76bf4eafd5..03062c57fd 100644
--- a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts
@@ -1,11 +1,8 @@
import { Component } from '@angular/core';
-import { HeroButtonComponent } from './heroes';
-
@Component({
moduleId: module.id,
selector: 'sg-app',
- templateUrl: 'app.component.html',
- directives: [HeroButtonComponent]
+ templateUrl: 'app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts
new file mode 100644
index 0000000000..1b754e3ee5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-03/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '05-03', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroButtonComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts
index c8e62772b4..0e43893f7f 100644
--- a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { HeroesComponent } from './heroes';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroesComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts
new file mode 100644
index 0000000000..9cae85085a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-04/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroesComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '05-04', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
index c6bf721e40..dac40205c9 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { HeroButtonComponent } from './heroes';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroButtonComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts
new file mode 100644
index 0000000000..5177b2cc64
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-12/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '05-12', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroButtonComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts
index 76bf4eafd5..03062c57fd 100644
--- a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts
@@ -1,11 +1,8 @@
import { Component } from '@angular/core';
-import { HeroButtonComponent } from './heroes';
-
@Component({
moduleId: module.id,
selector: 'sg-app',
- templateUrl: 'app.component.html',
- directives: [HeroButtonComponent]
+ templateUrl: 'app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts
new file mode 100644
index 0000000000..102ed0f617
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-13/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '05-13', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroButtonComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts
index 05e38bf35c..8ed6da4c82 100644
--- a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { ToastComponent } from './shared';
-
@Component({
selector: 'sg-app',
- template: ` `,
- directives: [ToastComponent]
+ template: ` `
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts
new file mode 100644
index 0000000000..0b294573d2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-14/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { ToastComponent } from './shared';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '05-14', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ ToastComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts
index 7fd78842b8..91b569b1e7 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts
@@ -1,11 +1,10 @@
import { Component } from '@angular/core';
-import { HeroListComponent, HeroService } from './heroes';
+import { HeroService } from './heroes';
@Component({
selector: 'sg-app',
template: ' ',
- directives: [HeroListComponent],
providers: [HeroService]
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts
new file mode 100644
index 0000000000..9bd4b8c9a2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-15/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroListComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '05-15', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroListComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts
index 39fab1a724..03062c57fd 100644
--- a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts
@@ -1,11 +1,8 @@
import { Component } from '@angular/core';
-import { HeroComponent } from './heroes';
-
@Component({
moduleId: module.id,
selector: 'sg-app',
- templateUrl: 'app.component.html',
- directives: [HeroComponent]
+ templateUrl: 'app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts
new file mode 100644
index 0000000000..c3fb36f8ac
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-16/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '05-16', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts
index 8e2e7e727c..86728b8b80 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { HeroListComponent } from './heroes';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroListComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts
new file mode 100644
index 0000000000..e850d80ae3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-17/app/app.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroComponent, HeroListComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '05-17', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroComponent,
+ HeroListComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
index 8570544a36..b8ebd4cc46 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
@@ -10,8 +10,8 @@ import { Hero } from '../shared/hero.model.ts';
template: `
Our list of heroes:
-
-
+
+
Total powers: {{totalPowers}}
Average power: {{avgPower}}
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts
new file mode 100644
index 0000000000..334f836a7d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/hero.component.ts
@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+import { Hero } from '../shared/hero.model';
+
+@Component({
+ selector: 'toh-hero',
+ template: `...`
+})
+export class HeroComponent {
+ @Input() hero: Hero;
+}
+
+
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts
new file mode 100644
index 0000000000..084f36d703
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero/index.ts
@@ -0,0 +1 @@
+export * from './hero.component';
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts
index f1112f1c7c..dcf3e79bd3 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/index.ts
@@ -1,2 +1,3 @@
+export * from './hero';
export * from './hero-list';
export * from './shared';
diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts
index 97a52c0c0c..03062c57fd 100644
--- a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts
@@ -1,11 +1,8 @@
import { Component } from '@angular/core';
-import { HighlightDirective } from './shared';
-
@Component({
moduleId: module.id,
selector: 'sg-app',
- templateUrl: 'app.component.html',
- directives: [HighlightDirective]
+ templateUrl: 'app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts
new file mode 100644
index 0000000000..318cd306d7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HighlightDirective } from './shared';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '06-01', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HighlightDirective
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts
index c40b5c0406..5f4ea8dce5 100644
--- a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { ValidatorDirective } from './shared';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [ValidatorDirective]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts
new file mode 100644
index 0000000000..8677138eef
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-03/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { ValidatorDirective } from './shared';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '06-03', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ ValidatorDirective
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts
new file mode 100644
index 0000000000..0077500dea
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '07-01', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
index 276321e2f1..f4d25e1ab6 100644
--- a/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/07-03/app/app.component.ts
@@ -1,14 +1,13 @@
// #docregion
import { Component } from '@angular/core';
-import { HeroListComponent, HeroService } from './heroes';
+import { HeroService } from './heroes';
@Component({
selector: 'toh-app',
template: `
`,
- directives: [HeroListComponent],
providers: [HeroService]
})
export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts
new file mode 100644
index 0000000000..8ba06d22be
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-03/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroListComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '07-03', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroListComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts b/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts
new file mode 100644
index 0000000000..71c515c9c9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-04/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ RouterModule.forChild([{ path: '07-04', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts
index 50ddf5fe1e..ebc904f722 100644
--- a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts
@@ -1,10 +1,7 @@
import { Component } from '@angular/core';
-import { HeroButtonComponent } from './heroes';
-
@Component({
selector: 'sg-app',
- template: ' ',
- directives: [HeroButtonComponent]
+ template: ' '
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts
new file mode 100644
index 0000000000..5872e801d6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/09-01/app/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { HeroButtonComponent } from './heroes';
+
+@NgModule({
+ imports: [
+ RouterModule.forChild([{ path: '09-01', component: AppComponent }])
+ ],
+ declarations: [
+ AppComponent,
+ HeroButtonComponent
+ ],
+ exports: [ AppComponent ]
+})
+export class AppModule {}
diff --git a/public/docs/_examples/style-guide/ts/app/app.component.ts b/public/docs/_examples/style-guide/ts/app/app.component.ts
index d90494c212..0a3c992498 100644
--- a/public/docs/_examples/style-guide/ts/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.component.ts
@@ -1,9 +1,7 @@
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [ROUTER_DIRECTIVES]
+ templateUrl: 'app/app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/app/app.routes.ts b/public/docs/_examples/style-guide/ts/app/app.routes.ts
index 644e86bffd..3d5d6b3c15 100644
--- a/public/docs/_examples/style-guide/ts/app/app.routes.ts
+++ b/public/docs/_examples/style-guide/ts/app/app.routes.ts
@@ -1,62 +1,59 @@
-import { provideRouter, RouterConfig } from '@angular/router';
+import { RouterConfig } from '@angular/router';
import { AppComponent as S0101 } from '../01-01/app';
-import { AppComponent as S0207 } from '../02-07/app';
-import { AppComponent as S0208 } from '../02-08/app';
-import { AppComponent as S0301 } from '../03-01/app';
-import { AppComponent as S0302 } from '../03-02/app';
-import { AppComponent as S0303 } from '../03-03/app';
-import { AppComponent as S0304 } from '../03-04/app';
-import { AppComponent as S0305 } from '../03-05/app';
-import { AppComponent as S0306 } from '../03-06/app';
-import { AppComponent as S0410 } from '../04-10/app';
-import { AppComponent as S0414 } from '../04-14/app';
-import { AppComponent as S0502 } from '../05-02/app';
-import { AppComponent as S0503 } from '../05-03/app';
-import { AppComponent as S0504 } from '../05-04/app';
-import { AppComponent as S0512 } from '../05-12/app';
-import { AppComponent as S0513 } from '../05-13/app';
-import { AppComponent as S0514 } from '../05-14/app';
-import { AppComponent as S0515 } from '../05-15/app';
-import { AppComponent as S0516 } from '../05-16/app';
-import { AppComponent as S0517 } from '../05-17/app';
-import { AppComponent as S0601 } from '../06-01/app';
-import { AppComponent as S0603 } from '../06-03/app';
-import { AppComponent as S0701 } from '../07-01/app';
-import { AppComponent as S0703 } from '../07-03/app';
-import { AppComponent as S0704 } from '../07-04/app';
-import { AppComponent as S0901 } from '../09-01/app';
+// import { AppComponent as S0207 } from '../02-07/app';
+// import { AppComponent as S0208 } from '../02-08/app';
+// import { AppComponent as S0301 } from '../03-01/app';
+// import { AppComponent as S0302 } from '../03-02/app';
+// import { AppComponent as S0303 } from '../03-03/app';
+// import { AppComponent as S0304 } from '../03-04/app';
+// import { AppComponent as S0305 } from '../03-05/app';
+// import { AppComponent as S0306 } from '../03-06/app';
+// import { AppComponent as S0410 } from '../04-10/app';
+// import { AppComponent as S0414 } from '../04-14/app';
+// import { AppComponent as S0502 } from '../05-02/app';
+// import { AppComponent as S0503 } from '../05-03/app';
+// import { AppComponent as S0504 } from '../05-04/app';
+// import { AppComponent as S0512 } from '../05-12/app';
+// import { AppComponent as S0513 } from '../05-13/app';
+// import { AppComponent as S0514 } from '../05-14/app';
+// import { AppComponent as S0515 } from '../05-15/app';
+// import { AppComponent as S0516 } from '../05-16/app';
+// import { AppComponent as S0517 } from '../05-17/app';
+// import { AppComponent as S0601 } from '../06-01/app';
+// import { AppComponent as S0603 } from '../06-03/app';
+// import { AppComponent as S0701 } from '../07-01/app';
+// import { AppComponent as S0703 } from '../07-03/app';
+// import { AppComponent as S0704 } from '../07-04/app';
+// import { AppComponent as S0901 } from '../09-01/app';
-const routes: RouterConfig = [
+export const routes: RouterConfig = [
{ path: '', redirectTo: '/01-01', pathMatch: 'full' },
{ path: '01-01', component: S0101 },
- { path: '02-07', component: S0207 },
- { path: '02-08', component: S0208 },
- { path: '03-01', component: S0301 },
- { path: '03-02', component: S0302 },
- { path: '03-03', component: S0303 },
- { path: '03-04', component: S0304 },
- { path: '03-05', component: S0305 },
- { path: '03-06', component: S0306 },
- { path: '04-10', component: S0410 },
- { path: '04-14', component: S0414 },
- { path: '05-02', component: S0502 },
- { path: '05-03', component: S0503 },
- { path: '05-04', component: S0504 },
- { path: '05-12', component: S0512 },
- { path: '05-13', component: S0513 },
- { path: '05-14', component: S0514 },
- { path: '05-15', component: S0515 },
- { path: '05-16', component: S0516 },
- { path: '05-17', component: S0517 },
- { path: '06-01', component: S0601 },
- { path: '06-03', component: S0603 },
- { path: '07-01', component: S0701 },
- { path: '07-03', component: S0703 },
- { path: '07-04', component: S0704 },
- { path: '09-01', component: S0901 },
+ // { path: '02-07', component: S0207 },
+ // { path: '02-08', component: S0208 },
+ // { path: '03-01', component: S0301 },
+ // { path: '03-02', component: S0302 },
+ // { path: '03-03', component: S0303 },
+ // { path: '03-04', component: S0304 },
+ // { path: '03-05', component: S0305 },
+ // { path: '03-06', component: S0306 },
+ ///////////////////{ path: '04-10', component: S0410 },
+ // { path: '04-14', component: S0414 },
+ // { path: '05-02', component: S0502 },
+ // { path: '05-03', component: S0503 },
+ // { path: '05-04', component: S0504 },
+ // { path: '05-12', component: S0512 },
+ // { path: '05-13', component: S0513 },
+ // { path: '05-14', component: S0514 },
+ // { path: '05-15', component: S0515 },
+ // { path: '05-16', component: S0516 },
+ // { path: '05-17', component: S0517 },
+ // { path: '06-01', component: S0601 },
+ // { path: '06-03', component: S0603 },
+ // { path: '07-01', component: S0701 },
+ // { path: '07-03', component: S0703 },
+ // { path: '07-04', component: S0704 },
+ // { path: '09-01', component: S0901 },
];
-export const appRouterProviders = [
- provideRouter(routes)
-];
diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts
index 759f9e261b..77e1c29934 100644
--- a/public/docs/_examples/style-guide/ts/app/main.ts
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@@ -1,17 +1,98 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
-import { HashLocationStrategy, LocationStrategy } from '@angular/common';
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import { NgModule } from '@angular/core';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { HttpModule,
+ XHRBackend } from '@angular/http';
+import { RouterModule } from '@angular/router';
+
+import { HashLocationStrategy,
+ LocationStrategy } from '@angular/common';
+
+import { InMemoryBackendService,
+ SEED_DATA } from 'angular2-in-memory-web-api';
+
import 'rxjs/add/operator/map';
-import { appRouterProviders } from './app.routes';
-import { HeroData } from './hero-data';
-import { AppComponent } from './app.component';
+import { HeroData } from './hero-data';
+import { AppComponent } from './app.component';
+
+import * as s0101 from '../01-01/app/app.module';
+import * as s0207 from '../02-07/app/app.module';
+import * as s0208 from '../02-08/app/app.module';
+import * as s0301 from '../03-01/app/app.module';
+import * as s0302 from '../03-02/app/app.module';
+import * as s0303 from '../03-03/app/app.module';
+import * as s0304 from '../03-04/app/app.module';
+import * as s0305 from '../03-05/app/app.module';
+import * as s0306 from '../03-06/app/app.module';
+import * as s0410 from '../04-10/app/app.module';
+import * as s0414 from '../04-14/app/app.module';
+import * as s0502 from '../05-02/app/app.module';
+import * as s0503 from '../05-03/app/app.module';
+import * as s0504 from '../05-04/app/app.module';
+import * as s0512 from '../05-12/app/app.module';
+import * as s0513 from '../05-13/app/app.module';
+import * as s0514 from '../05-14/app/app.module';
+import * as s0515 from '../05-15/app/app.module';
+import * as s0516 from '../05-16/app/app.module';
+import * as s0517 from '../05-17/app/app.module';
+import * as s0601 from '../06-01/app/app.module';
+import * as s0603 from '../06-03/app/app.module';
+import * as s0701 from '../07-01/app/app.module';
+import * as s0703 from '../07-03/app/app.module';
+import * as s0704 from '../07-04/app/app.module';
+import * as s0901 from '../09-01/app/app.module';
+
+///////////////////
+const moduleMetadata = {
+ imports: [
+ BrowserModule,
+ HttpModule,
+
+ s0101.AppModule,
+ s0207.AppModule,
+ s0208.AppModule,
+ s0301.AppModule,
+ s0302.AppModule,
+ s0303.AppModule,
+ s0304.AppModule,
+ s0305.AppModule,
+ s0306.AppModule,
+ s0410.AppModule,
+ s0414.AppModule,
+ s0502.AppModule,
+ s0503.AppModule,
+ s0504.AppModule,
+ s0512.AppModule,
+ s0513.AppModule,
+ s0514.AppModule,
+ s0515.AppModule,
+ s0516.AppModule,
+ s0517.AppModule,
+ s0601.AppModule,
+ s0603.AppModule,
+ s0701.AppModule,
+ s0703.AppModule,
+ s0704.AppModule,
+ s0901.AppModule,
+
+ RouterModule.forRoot([
+ { path: '', redirectTo: '/01-01', pathMatch: 'full' }
+ ], {/* enableTracing: true */}),
+ ],
+ declarations: [AppComponent],
+ providers: [
+ { provide: LocationStrategy, useClass: HashLocationStrategy },
+ { provide: XHRBackend, useClass: InMemoryBackendService },
+ { provide: SEED_DATA, useClass: HeroData }
+ ],
+ bootstrap: [ AppComponent ]
+};
+
+@NgModule(moduleMetadata)
+class MainModule { }
+
+browserDynamicPlatform().bootstrapModule(MainModule);
+
-bootstrap(AppComponent, [
- appRouterProviders,
- HTTP_PROVIDERS,
- { provide: LocationStrategy, useClass: HashLocationStrategy },
- { provide: XHRBackend, useClass: InMemoryBackendService },
- { provide: SEED_DATA, useClass: HeroData }
- ]);
diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js
index 10f13fe801..1ffb1b863a 100644
--- a/public/docs/_examples/style-guide/ts/systemjs.custom.js
+++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js
@@ -23,7 +23,8 @@
'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-list', '05-17/app/heroes/shared',
+ '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',
diff --git a/public/docs/_examples/styleguide/js/app.js b/public/docs/_examples/styleguide/js/app.js
index 51a17a2429..61a0f2ae31 100644
--- a/public/docs/_examples/styleguide/js/app.js
+++ b/public/docs/_examples/styleguide/js/app.js
@@ -19,8 +19,20 @@ app.AppComponent =
// #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.bootstrap(app.AppComponent);
+ ng.platformBrowserDynamic
+ .platformBrowserDynamic()
+ .bootstrapModule(app.AppModule);
});
// #enddocregion
// #enddocregion
diff --git a/public/docs/_examples/styleguide/ts/app/app.module.ts b/public/docs/_examples/styleguide/ts/app/app.module.ts
new file mode 100644
index 0000000000..0a9ee6adf7
--- /dev/null
+++ b/public/docs/_examples/styleguide/ts/app/app.module.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [ BrowserModule ],
+ declarations: [ AppComponent ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/styleguide/ts/app/main.ts b/public/docs/_examples/styleguide/ts/app/main.ts
index ad256f0823..4acf5de663 100644
--- a/public/docs/_examples/styleguide/ts/app/main.ts
+++ b/public/docs/_examples/styleguide/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js
index 22b0c210cc..1921a431c0 100644
--- a/public/docs/_examples/systemjs.config.js
+++ b/public/docs/_examples/systemjs.config.js
@@ -49,9 +49,6 @@
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
- // No umd for router yet
- packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
-
var config = {
map: map,
packages: packages
diff --git a/public/docs/_examples/systemjs.config.plunker.build.js b/public/docs/_examples/systemjs.config.plunker.build.js
new file mode 100644
index 0000000000..3ccf77808c
--- /dev/null
+++ b/public/docs/_examples/systemjs.config.plunker.build.js
@@ -0,0 +1,105 @@
+/**
+ * PLUNKER CURRENT BUILD VERSION
+ * (based on systemjs.config.js in angular.io)
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
+(function(global) {
+
+ var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
+ var routerVer = '@3.0.0-rc.1'; // lock router version
+ var formsVer = '@0.3.0'; // lock forms version
+ var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides
+
+ //map tells the System loader where to look for things
+ var map = {
+ 'app': 'app',
+
+
+ '@angular/core': 'https://cdn.rawgit.com/angular/core-builds/master',
+ '@angular/common': 'https://cdn.rawgit.com/angular/common-builds/master',
+ '@angular/compiler':'https://cdn.rawgit.com/angular/compiler-builds/master',
+ '@angular/forms':'https://cdn.rawgit.com/angular/forms-builds/master',
+ '@angular/http':'https://cdn.rawgit.com/angular/http-builds/master',
+ '@angular/platform-browser':'https://cdn.rawgit.com/angular/platform-browser-builds/master',
+ '@angular/platform-browser-dynamic': 'https://cdn.rawgit.com/angular/platform-browser-dynamic-builds/master',
+ '@angular/router': 'https://cdn.rawgit.com/angular/router-builds/master',
+
+ 'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
+ 'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
+ 'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
+
+ 'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
+ };
+
+ //packages tells the System loader how to load when no filename and/or no extension
+ var packages = {
+ app: {
+ main: 'main.ts',
+ defaultExtension: 'ts'
+ },
+ '@angular/core': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/compiler': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/common': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/forms': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/http': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/platform-browser-dynamic': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/platform-browser': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ '@angular/router': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ 'angular2-in-memory-web-api': {
+ main: 'index.js',
+ defaultExtension: 'js'
+ },
+ rxjs: {
+ defaultExtension: 'js'
+ }
+ }
+ var config = {
+ // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+ transpiler: 'ts',
+ typescriptOptions: {
+ tsconfig: true
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ map: map,
+ packages: packages
+ };
+
+ System.config(config);
+
+})(this);
+
+
+/*
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/
diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js
index 5ff363b229..d55c4db274 100644
--- a/public/docs/_examples/systemjs.config.plunker.js
+++ b/public/docs/_examples/systemjs.config.plunker.js
@@ -5,13 +5,13 @@
*/
(function(global) {
- var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current!
- var routerVer = '@3.0.0-beta.2'; // lock router version
- var formsVer = '@0.2.0'; // lock forms version
+ var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
+ var routerVer = '@3.0.0-rc.1'; // lock router version
+ var formsVer = '@0.3.0'; // lock forms version
var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides
//map tells the System loader where to look for things
- var map = {
+ var map = {
'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
@@ -48,7 +48,7 @@
});
// Add package entries for angular packages
- ngPackageNames.forEach(function(pkgName) {
+ ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
@@ -57,15 +57,6 @@
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
- // No umd for router yet
- packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
-
- // Forms not on rc yet
- packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };
-
- // Temporarily until we update the guides
- packages['@angular/router-deprecated'] = { main: '/bundles/router-deprecated' + '.umd.js', defaultExtension: 'js' };
-
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html
index ebd9981e1a..50c07a1fc8 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.html
@@ -664,8 +664,7 @@ bindon-ngModel
Name
-
+
Submit
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts
index 087feccdb6..9f64d3c98f 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts
@@ -2,11 +2,9 @@
// #docplaster
import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { NgForm } from '@angular/common';
+import { NgForm } from '@angular/forms';
import { Hero } from './hero';
-import { HeroDetailComponent, BigHeroDetailComponent } from './hero-detail.component';
-import { MyClickDirective, MyClickDirective2 } from './my-click.directive';
// Alerter fn: monkey patch during test
export function alerter(msg?: string) {
@@ -20,11 +18,7 @@ export enum Color {Red, Green, Blue};
*/
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [
- HeroDetailComponent, BigHeroDetailComponent,
- MyClickDirective, MyClickDirective2
- ]
+ templateUrl: 'app/app.component.html'
})
export class AppComponent implements AfterViewInit, OnInit {
diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.1.ts b/public/docs/_examples/template-syntax/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..47007ecae4
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/app/app.module.1.ts
@@ -0,0 +1,18 @@
+// #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/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts
new file mode 100644
index 0000000000..2a99d8b395
--- /dev/null
+++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
+import { MyClickDirective, MyClickDirective2 } from './my-click.directive';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ BigHeroDetailComponent,
+ HeroDetailComponent,
+ MyClickDirective,
+ MyClickDirective2
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/template-syntax/ts/app/main.ts b/public/docs/_examples/template-syntax/ts/app/main.ts
index 42dbeb9f7d..458fd21eb1 100644
--- a/public/docs/_examples/template-syntax/ts/app/main.ts
+++ b/public/docs/_examples/template-syntax/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-bootstrap(AppComponent);
+browserDynamicPlatform().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/toh-1/ts/app/app.module.ts b/public/docs/_examples/toh-1/ts/app/app.module.ts
new file mode 100644
index 0000000000..4c0b77ea48
--- /dev/null
+++ b/public/docs/_examples/toh-1/ts/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';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/toh-1/ts/app/main.ts b/public/docs/_examples/toh-1/ts/app/main.ts
index dae4ddf676..62da4340b8 100644
--- a/public/docs/_examples/toh-1/ts/app/main.ts
+++ b/public/docs/_examples/toh-1/ts/app/main.ts
@@ -1,7 +1,6 @@
-// #docregion pt1
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
-// #enddocregion pt1
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/public/docs/_examples/toh-2/ts/app/app.module.ts b/public/docs/_examples/toh-2/ts/app/app.module.ts
new file mode 100644
index 0000000000..4c0b77ea48
--- /dev/null
+++ b/public/docs/_examples/toh-2/ts/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';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/toh-2/ts/app/main.ts b/public/docs/_examples/toh-2/ts/app/main.ts
index 42dbeb9f7d..62da4340b8 100644
--- a/public/docs/_examples/toh-2/ts/app/main.ts
+++ b/public/docs/_examples/toh-2/ts/app/main.ts
@@ -1,5 +1,6 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// #docregion
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
+// #enddocregion
diff --git a/public/docs/_examples/toh-3/ts/app/app.component.ts b/public/docs/_examples/toh-3/ts/app/app.component.ts
index bbe047a629..fe5a5b98ad 100644
--- a/public/docs/_examples/toh-3/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-3/ts/app/app.component.ts
@@ -4,9 +4,6 @@ import { Component } from '@angular/core';
// #docregion hero-import
import { Hero } from './hero';
// #enddocregion hero-import
-// #docregion hero-detail-import
-import { HeroDetailComponent } from './hero-detail.component';
-// #enddocregion hero-detail-import
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
@@ -85,10 +82,7 @@ const HEROES: Hero[] = [
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
- `],
-// #docregion directives
- directives: [HeroDetailComponent]
-// #enddocregion directives
+ `]
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-3/ts/app/app.module.ts b/public/docs/_examples/toh-3/ts/app/app.module.ts
new file mode 100644
index 0000000000..26b63938ad
--- /dev/null
+++ b/public/docs/_examples/toh-3/ts/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
+
+// #docregion declarations
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroDetailComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+// #enddocregion declarations
diff --git a/public/docs/_examples/toh-3/ts/app/main.ts b/public/docs/_examples/toh-3/ts/app/main.ts
index dae4ddf676..e6bbb4c282 100644
--- a/public/docs/_examples/toh-3/ts/app/main.ts
+++ b/public/docs/_examples/toh-3/ts/app/main.ts
@@ -1,7 +1,6 @@
// #docregion pt1
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
// #enddocregion pt1
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.1.ts b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
index 9df27d44bd..5a0a4d0524 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.1.ts
@@ -6,7 +6,6 @@ import { OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
// #docregion hero-service-import
import { HeroService } from './hero.service.1';
// #enddocregion hero-service-import
@@ -20,7 +19,6 @@ import { HeroService } from './hero.service.1';
`,
- directives: [HeroDetailComponent],
// #docregion providers
providers: [HeroService]
// #enddocregion providers
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index cf2b42a034..00bee85659 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -3,7 +3,6 @@
import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
// #docregion hero-service-import
import { HeroService } from './hero.service';
// #enddocregion hero-service-import
@@ -73,7 +72,6 @@ import { HeroService } from './hero.service';
border-radius: 4px 0 0 4px;
}
`],
- directives: [HeroDetailComponent],
providers: [HeroService]
})
export class AppComponent implements OnInit {
diff --git a/public/docs/_examples/toh-4/ts/app/app.module.ts b/public/docs/_examples/toh-4/ts/app/app.module.ts
new file mode 100644
index 0000000000..3df186c62a
--- /dev/null
+++ b/public/docs/_examples/toh-4/ts/app/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroDetailComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/toh-4/ts/app/main.1.ts b/public/docs/_examples/toh-4/ts/app/main.1.ts
index f8cf0497d6..2470c9595e 100644
--- a/public/docs/_examples/toh-4/ts/app/main.1.ts
+++ b/public/docs/_examples/toh-4/ts/app/main.1.ts
@@ -1,5 +1,4 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component.1';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/toh-4/ts/app/main.ts b/public/docs/_examples/toh-4/ts/app/main.ts
index 42dbeb9f7d..2470c9595e 100644
--- a/public/docs/_examples/toh-4/ts/app/main.ts
+++ b/public/docs/_examples/toh-4/ts/app/main.ts
@@ -1,5 +1,4 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.1.ts b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
index 789e14d9be..cbdd040437 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.1.ts
@@ -1,24 +1,13 @@
// #docplaster
// #docregion
-import { Component } from '@angular/core';
+import { Component } from '@angular/core';
-import { HeroService } from './hero.service';
-import { HeroesComponent } from './heroes.component';
-// #enddocregion
-
-// #docregion
@Component({
selector: 'my-app',
template: `
{{title}}
- `,
- directives: [HeroesComponent],
- providers: [
- // #enddocregion
- // #docregion
- HeroService
- ]
+ `
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.2.ts b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
index c2699f317b..82e5147775 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.2.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.2.ts
@@ -1,27 +1,16 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-// #docregion import-router
-import { ROUTER_DIRECTIVES } from '@angular/router';
-// #enddocregion import-router
-
-import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
// #docregion template
template: `
{{title}}
- Heroes
+ Heroes
- `,
+ `
// #enddocregion template
- // #docregion directives-and-providers
- directives: [ROUTER_DIRECTIVES],
- providers: [
- HeroService
- ]
- // #enddocregion directives-and-providers
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.3.ts b/public/docs/_examples/toh-5/ts/app/app.component.3.ts
index ff64e27ab1..2d1f83853c 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.3.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.3.ts
@@ -1,9 +1,6 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
@@ -11,10 +8,8 @@ import { HeroService } from './hero.service';
template: `
{{title}}
- // #docregion router-link-active
- Dashboard
- Heroes
- // #enddocregion router-link-active
+ Dashboard
+ Heroes
`,
@@ -22,10 +17,6 @@ import { HeroService } from './hero.service';
// #docregion style-urls
styleUrls: ['app/app.component.css'],
// #enddocregion style-urls
- directives: [ROUTER_DIRECTIVES],
- providers: [
- HeroService
- ]
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index 3f3e758dcf..fbf2279067 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -1,9 +1,6 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-
-import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
@@ -11,8 +8,8 @@ import { HeroService } from './hero.service';
template: `
{{title}}
- Dashboard
- Heroes
+ Dashboard
+ Heroes
`,
@@ -20,10 +17,6 @@ import { HeroService } from './hero.service';
// #docregion style-urls
styleUrls: ['app/app.component.css'],
// #enddocregion style-urls
- directives: [ROUTER_DIRECTIVES],
- providers: [
- HeroService
- ]
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.1.ts b/public/docs/_examples/toh-5/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..473ca08fb8
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.1.ts
@@ -0,0 +1,28 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+import { HeroesComponent } from './heroes.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ providers: [
+ HeroService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.2.ts b/public/docs/_examples/toh-5/ts/app/app.module.2.ts
new file mode 100644
index 0000000000..1a4ac0f48d
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.2.ts
@@ -0,0 +1,30 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent
+ ],
+ providers: [
+ HeroService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.3.ts b/public/docs/_examples/toh-5/ts/app/app.module.3.ts
new file mode 100644
index 0000000000..2eca272b26
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.3.ts
@@ -0,0 +1,47 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+// #docregion dashboard-declaration
+import { DashboardComponent } from './dashboard.component';
+// #enddocregion dashboard-declaration
+// #docregion hero-detail-declaration
+import { HeroDetailComponent } from './hero-detail.component';
+// #enddocregion hero-detail-declaration
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing
+ ],
+// #docregion dashboard-declaration, hero-detail-declaration
+
+ declarations: [
+// #enddocregion dashboard-declaration, hero-detail-declaration
+ AppComponent,
+ HeroesComponent,
+// #docregion dashboard-declaration
+ DashboardComponent,
+// #enddocregion dashboard-declaration
+// #docregion hero-detail-declaration
+ HeroDetailComponent
+// #enddocregion hero-detail-declaration
+// #docregion dashboard-declaration, hero-detail-declaration
+ ],
+// #enddocregion dashboard-declaration, hero-detail-declaration
+ providers: [
+ HeroService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.ts b/public/docs/_examples/toh-5/ts/app/app.module.ts
new file mode 100644
index 0000000000..47cc9415bb
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.ts
@@ -0,0 +1,34 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent,
+ DashboardComponent,
+ HeroDetailComponent
+ ],
+ providers: [
+ HeroService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
deleted file mode 100644
index 075cc37496..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
-import { HeroesComponent } from './heroes.component';
-
-const routes: RouterConfig = [
- {
- path: 'heroes',
- component: HeroesComponent
- }
-];
-
-export const appRouterProviders = [
- provideRouter(routes)
-];
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
new file mode 100644
index 0000000000..055b26754e
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
@@ -0,0 +1,17 @@
+// #docregion
+// #docregion routing-config
+import { Routes, RouterModule } from '@angular/router';
+
+import { HeroesComponent } from './heroes.component';
+
+const appRoutes: Routes = [
+ {
+ path: 'heroes',
+ component: HeroesComponent
+ }
+];
+// #enddocregion routing-config
+
+// #docregion routing-export
+export const routing = RouterModule.forRoot(appRoutes);
+// #enddocregion routing-export
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.2.ts
similarity index 76%
rename from public/docs/_examples/toh-5/ts/app/app.routes.1.ts
rename to public/docs/_examples/toh-5/ts/app/app.routing.2.ts
index 0c34add29c..a75df506e7 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routing.2.ts
@@ -1,12 +1,13 @@
// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
+
import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
+import { HeroesComponent } from './heroes.component';
// #docregion hero-detail-import
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
-const routes: RouterConfig = [
+const appRoutes: Routes = [
// #docregion redirect-route
{
path: '',
@@ -32,6 +33,4 @@ const routes: RouterConfig = [
}
];
-export const appRouterProviders = [
- provideRouter(routes)
-];
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.ts b/public/docs/_examples/toh-5/ts/app/app.routing.ts
similarity index 60%
rename from public/docs/_examples/toh-5/ts/app/app.routes.ts
rename to public/docs/_examples/toh-5/ts/app/app.routing.ts
index c6074c3607..62071e2567 100644
--- a/public/docs/_examples/toh-5/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.routing.ts
@@ -1,13 +1,13 @@
// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
// #docregion hero-detail-import
import { HeroDetailComponent } from './hero-detail.component';
// #enddocregion hero-detail-import
-const routes: RouterConfig = [
+const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
@@ -27,6 +27,4 @@ const routes: RouterConfig = [
}
];
-export const appRouterProviders = [
- provideRouter(routes)
-];
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 61edccb90e..713d27c9f2 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -1,10 +1,10 @@
// #docplaster
// #docregion
// #docregion import-oninit, v2
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
// #enddocregion import-oninit
// #docregion import-activated-route
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
// #enddocregion import-activated-route
import { Hero } from './hero';
@@ -23,10 +23,9 @@ import { HeroService } from './hero.service';
})
// #enddocregion extract-template
// #docregion implement
-export class HeroDetailComponent implements OnInit, OnDestroy {
+export class HeroDetailComponent implements OnInit {
// #enddocregion implement
hero: Hero;
- sub: any;
// #docregion ctor
constructor(
@@ -38,7 +37,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
// #docregion ng-oninit
ngOnInit() {
// #docregion get-id
- this.sub = this.route.params.subscribe(params => {
+ this.route.params.forEach((params: Params) => {
let id = +params['id'];
this.heroService.getHero(id)
.then(hero => this.hero = hero);
@@ -47,12 +46,6 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
}
// #enddocregion ng-oninit
- // #docregion ng-ondestroy
- ngOnDestroy() {
- this.sub.unsubscribe();
- }
- // #enddocregion ng-ondestroy
-
// #docregion go-back
goBack() {
window.history.back();
diff --git a/public/docs/_examples/toh-5/ts/app/main.ts b/public/docs/_examples/toh-5/ts/app/main.ts
index f04d528627..091a7d82a7 100644
--- a/public/docs/_examples/toh-5/ts/app/main.ts
+++ b/public/docs/_examples/toh-5/ts/app/main.ts
@@ -1,9 +1,6 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+// main entry point
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
-
-bootstrap(AppComponent, [
- appRouterProviders
-]);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
index d49c87ccbf..16d6396184 100644
--- a/public/docs/_examples/toh-6/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -1,9 +1,7 @@
// #docplaster
// #docregion
import { Component } from '@angular/core';
-import { ROUTER_DIRECTIVES } from '@angular/router';
-import { HeroService } from './hero.service';
// #docregion rxjs-extensions
import './rxjs-extensions';
// #enddocregion rxjs-extensions
@@ -14,16 +12,12 @@ import './rxjs-extensions';
template: `
{{title}}
- Dashboard
- Heroes
+ Dashboard
+ Heroes
`,
- styleUrls: ['app/app.component.css'],
- directives: [ROUTER_DIRECTIVES],
- providers: [
- HeroService,
- ]
+ styleUrls: ['app/app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.1.ts b/public/docs/_examples/toh-6/ts/app/app.module.1.ts
new file mode 100644
index 0000000000..6924d5a390
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.module.1.ts
@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+// Imports for loading & configuring the in-memory web api
+import { HttpModule, XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HttpModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent,
+ DashboardComponent,
+ HeroDetailComponent
+ ],
+ providers: [
+ HeroService,
+ { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+ { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion final
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.2.ts b/public/docs/_examples/toh-6/ts/app/app.module.2.ts
new file mode 100644
index 0000000000..2ec598cd0b
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.module.2.ts
@@ -0,0 +1,44 @@
+// #docplaster
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroDetailComponent } from './hero-detail.component';
+// #docregion hero-search-declaration
+import { HeroSearchComponent } from './hero-search.component';
+// #enddocregion hero-search-declaration
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HttpModule
+ ],
+// #docregion hero-search-declaration
+
+ declarations: [
+ AppComponent,
+ HeroesComponent,
+ DashboardComponent,
+ HeroDetailComponent,
+ HeroSearchComponent
+ ],
+// #enddocregion hero-search-declaration
+ providers: [
+ HeroService
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts
new file mode 100644
index 0000000000..0beff178e0
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.module.ts
@@ -0,0 +1,45 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+// Imports for loading & configuring the in-memory web api
+import { HttpModule, XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import { InMemoryDataService } from './in-memory-data.service';
+
+import { AppComponent } from './app.component';
+import { routing } from './app.routing';
+
+import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroSearchComponent } from './hero-search.component';
+
+import { HeroService } from './hero.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HttpModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroesComponent,
+ DashboardComponent,
+ HeroDetailComponent,
+ HeroSearchComponent
+ ],
+ providers: [
+ HeroService,
+ { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
+ { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/app.routes.ts b/public/docs/_examples/toh-6/ts/app/app.routing.ts
similarity index 56%
rename from public/docs/_examples/toh-6/ts/app/app.routes.ts
rename to public/docs/_examples/toh-6/ts/app/app.routing.ts
index e143b2a3bf..c5753a4ee9 100644
--- a/public/docs/_examples/toh-6/ts/app/app.routes.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.routing.ts
@@ -1,11 +1,11 @@
// #docregion
-import { provideRouter, RouterConfig } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router';
-import { DashboardComponent } from './dashboard.component';
-import { HeroesComponent } from './heroes.component';
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
import { HeroDetailComponent } from './hero-detail.component';
-const routes: RouterConfig = [
+const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
@@ -25,6 +25,4 @@ const routes: RouterConfig = [
}
];
-export const appRouterProviders = [
- provideRouter(routes)
-];
+export const routing = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index 41b4de58df..4a90a4d6bf 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -1,16 +1,14 @@
// #docregion , search
import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router } from '@angular/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
-import { HeroSearchComponent } from './hero-search.component';
@Component({
selector: 'my-dashboard',
templateUrl: 'app/dashboard.component.html',
- styleUrls: ['app/dashboard.component.css'],
- directives: [HeroSearchComponent]
+ styleUrls: ['app/dashboard.component.css']
})
// #enddocregion search
export class DashboardComponent implements OnInit {
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 85d722999e..062917401e 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -1,9 +1,9 @@
// #docplaster
// #docregion, variables-imports
-import { Component, EventEmitter, Input, OnInit, OnDestroy, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
// #enddocregion variables-imports
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Params } from '@angular/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@@ -14,11 +14,10 @@ import { HeroService } from './hero.service';
styleUrls: ['app/hero-detail.component.css']
})
// #docregion variables-imports
-export class HeroDetailComponent implements OnInit, OnDestroy {
+export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
@Output() close = new EventEmitter();
error: any;
- sub: any;
navigated = false; // true if navigated here
// #enddocregion variables-imports
@@ -29,7 +28,7 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
// #docregion ngOnInit
ngOnInit() {
- this.sub = this.route.params.subscribe(params => {
+ this.route.params.forEach((params: Params) => {
if (params['id'] !== undefined) {
let id = +params['id'];
this.navigated = true;
@@ -43,10 +42,6 @@ export class HeroDetailComponent implements OnInit, OnDestroy {
}
// #enddocregion ngOnInit
- ngOnDestroy() {
- this.sub.unsubscribe();
- }
-
// #docregion save
save() {
this.heroService
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
index 3bf618f5bd..e5c5ab1c49 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -5,13 +5,11 @@ import { Router } from '@angular/router';
import { Hero } from './hero';
import { HeroService } from './hero.service';
// #docregion hero-detail-component
-import { HeroDetailComponent } from './hero-detail.component';
@Component({
selector: 'my-heroes',
templateUrl: 'app/heroes.component.html',
- styleUrls: ['app/heroes.component.css'],
- directives: [HeroDetailComponent]
+ styleUrls: ['app/heroes.component.css']
})
// #enddocregion hero-detail-component
export class HeroesComponent implements OnInit {
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index bda66d0377..091a7d82a7 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -1,33 +1,6 @@
-// #docplaster
-// #docregion final
-// Imports for loading & configuring the in-memory web api
-import { XHRBackend } from '@angular/http';
+// #docregion
+// main entry point
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
-import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
-
-// The usual bootstrapping imports
-// #docregion v1
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { HTTP_PROVIDERS } from '@angular/http';
-
-import { AppComponent } from './app.component';
-import { appRouterProviders } from './app.routes';
-
-// #enddocregion v1, final
-/*
-// #docregion v1
-bootstrap(AppComponent, [
- appRouterProviders,
- HTTP_PROVIDERS
-]);
-// #enddocregion v1
-*/
-// #docregion final
-bootstrap(AppComponent, [
- appRouterProviders,
- HTTP_PROVIDERS,
- { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
- { provide: SEED_DATA, useClass: InMemoryDataService } // in-mem server data
-]);
-// #enddocregion final
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
index a4bf5572aa..3d826df25a 100644
--- a/public/docs/_examples/typings.json
+++ b/public/docs/_examples/typings.json
@@ -2,6 +2,6 @@
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
- "node": "registry:dt/node#6.0.0+20160720070758"
+ "node": "registry:dt/node#6.0.0+20160807145350"
}
}
diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.ts b/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-adapter/e2e-spec.ts
rename to public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled
similarity index 92%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled
index 5b9ad15f32..3881a30e4d 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled
@@ -1,10 +1,7 @@
// #docregion
import {
- describe,
beforeEachProviders,
- it,
- inject,
- expect
+ inject
} from '@angular/core/testing';
import { CheckmarkPipe } from './checkmark.pipe';
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
rename to public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts
rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/checkmark/checkmark.pipe.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts
rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/core/phone/phone.service.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts
index f59e9c7afd..4db648092b 100644
--- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts
+++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/main.ts
@@ -6,6 +6,7 @@ import {
APP_BASE_HREF
} from '@angular/common';
import { bootstrap } from '@angular/platform-browser-dynamic';
+import { FormsModule } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { Phone } from './core/phone/phone.service';
@@ -13,11 +14,14 @@ import { AppComponent } from './app.component';
// #enddocregion imports
// #docregion bootstrap
-bootstrap(AppComponent, [
- HTTP_PROVIDERS,
- ROUTER_PROVIDERS,
- { provide: APP_BASE_HREF, useValue: '!' },
- { provide: LocationStrategy, useClass: HashLocationStrategy },
- Phone
-]);
+bootstrap(AppComponent, {
+ imports: [FormsModule],
+ providers: [
+ HTTP_PROVIDERS,
+ ROUTER_PROVIDERS,
+ { provide: APP_BASE_HREF, useValue: '!' },
+ { provide: LocationStrategy, useClass: HashLocationStrategy },
+ Phone
+ ]
+});
// #enddocregion bootstrap
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts.disabled
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts
rename to public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts.disabled
diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts
index 330d84b5a1..35be5f232d 100644
--- a/public/docs/_examples/user-input/ts/app/app.component.ts
+++ b/public/docs/_examples/user-input/ts/app/app.component.ts
@@ -1,26 +1,8 @@
// #docregion
import { Component } from '@angular/core';
-import { ClickMeComponent } from './click-me.component';
-import { ClickMe2Component } from './click-me2.component';
-
-import { LoopbackComponent } from './loop-back.component';
-
-import { KeyUpComponent_v1,
- KeyUpComponent_v2,
- KeyUpComponent_v3,
- KeyUpComponent_v4 } from './keyup.components';
-
-import { LittleTourComponent } from './little-tour.component';
-
@Component({
selector: 'my-app',
- templateUrl: 'app/app.component.html',
- directives: [
- ClickMeComponent, ClickMe2Component,
- LoopbackComponent,
- KeyUpComponent_v1, KeyUpComponent_v2, KeyUpComponent_v3, KeyUpComponent_v4,
- LittleTourComponent
- ]
+ templateUrl: 'app/app.component.html'
})
export class AppComponent { }
diff --git a/public/docs/_examples/user-input/ts/app/app.module.ts b/public/docs/_examples/user-input/ts/app/app.module.ts
new file mode 100644
index 0000000000..41f13f9f11
--- /dev/null
+++ b/public/docs/_examples/user-input/ts/app/app.module.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ClickMeComponent } from './click-me.component';
+import { ClickMe2Component } from './click-me2.component';
+import {
+ KeyUpComponent_v1,
+ KeyUpComponent_v2,
+ KeyUpComponent_v3,
+ KeyUpComponent_v4
+} from './keyup.components';
+import { LittleTourComponent } from './little-tour.component';
+import { LoopbackComponent } from './loop-back.component';
+
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent,
+ ClickMeComponent,
+ ClickMe2Component,
+ KeyUpComponent_v1,
+ KeyUpComponent_v2,
+ KeyUpComponent_v3,
+ KeyUpComponent_v4,
+ LittleTourComponent,
+ LoopbackComponent
+ ],
+ providers: [
+
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/user-input/ts/app/main.ts b/public/docs/_examples/user-input/ts/app/main.ts
index 42dbeb9f7d..6af7a5b2ae 100644
--- a/public/docs/_examples/user-input/ts/app/main.ts
+++ b/public/docs/_examples/user-input/ts/app/main.ts
@@ -1,5 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
-bootstrap(AppComponent);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/webpack/e2e-spec.ts b/public/docs/_examples/webpack/e2e-spec.ts.disabled
similarity index 100%
rename from public/docs/_examples/webpack/e2e-spec.ts
rename to public/docs/_examples/webpack/e2e-spec.ts.disabled
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index e383ba3355..4b3dc3e15d 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -10,14 +10,14 @@
},
"license": "MIT",
"dependencies": {
- "@angular/common": "2.0.0-rc.4",
- "@angular/compiler": "2.0.0-rc.4",
- "@angular/core": "2.0.0-rc.4",
- "@angular/forms": "0.2.0",
- "@angular/http": "2.0.0-rc.4",
- "@angular/platform-browser": "2.0.0-rc.4",
- "@angular/platform-browser-dynamic": "2.0.0-rc.4",
- "@angular/router": "3.0.0-beta.1",
+ "@angular/common": "2.0.0-rc.5",
+ "@angular/compiler": "2.0.0-rc.5",
+ "@angular/core": "2.0.0-rc.5",
+ "@angular/forms": "0.3.0",
+ "@angular/http": "2.0.0-rc.5",
+ "@angular/platform-browser": "2.0.0-rc.5",
+ "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+ "@angular/router": "3.0.0-rc.1",
"core-js": "^2.4.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
index c2e85fd099..d7d0696aef 100644
--- a/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
+++ b/public/docs/_examples/webpack/ts/src/app/app.component.spec.ts
@@ -1,18 +1,17 @@
// #docregion
import {
- it,
+ addProviders,
inject,
- describe,
- beforeEachProviders,
- expect
} from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('App', () => {
- beforeEachProviders(() => [
- AppComponent
- ]);
+ beforeEach(() => {
+ addProviders([
+ AppComponent
+ ]);
+ });
it ('should work', inject([AppComponent], (app: AppComponent) => {
// Add real test here
diff --git a/public/docs/_examples/webpack/ts/src/app/app.module.ts b/public/docs/_examples/webpack/ts/src/app/app.module.ts
new file mode 100644
index 0000000000..362f3401fa
--- /dev/null
+++ b/public/docs/_examples/webpack/ts/src/app/app.module.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+ imports: [
+ BrowserModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ bootstrap: [ AppComponent ]
+})
+export class AppModule { }
diff --git a/public/docs/_examples/webpack/ts/src/main.ts b/public/docs/_examples/webpack/ts/src/main.ts
index 8ea0ea84ce..0057db95ab 100644
--- a/public/docs/_examples/webpack/ts/src/main.ts
+++ b/public/docs/_examples/webpack/ts/src/main.ts
@@ -1,8 +1,8 @@
// #docregion
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
-import { AppComponent } from './app/app.component';
+import { AppModule } from './app/app.module';
// #docregion enable-prod
if (process.env.ENV === 'production') {
@@ -10,5 +10,5 @@ if (process.env.ENV === 'production') {
}
// #enddocregion enable-prod
-bootstrap(AppComponent, []);
+browserDynamicPlatform().bootstrapModule(AppModule);
// #enddocregion
diff --git a/public/docs/_examples/webpack/ts/typings.1.json b/public/docs/_examples/webpack/ts/typings.1.json
index 3385926d1f..3d826df25a 100644
--- a/public/docs/_examples/webpack/ts/typings.1.json
+++ b/public/docs/_examples/webpack/ts/typings.1.json
@@ -2,6 +2,6 @@
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
- "node": "registry:dt/node#6.0.0+20160621231320"
+ "node": "registry:dt/node#6.0.0+20160807145350"
}
}
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 7d5ed7b13a..7bbc458b55 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
- "banner": "Welcome to Angular in JavaScript ! The current Angular 2 release is rc.4 . Please consult the Change Log about recent enhancements, fixes, and breaking changes."
+ "banner": "Welcome to Angular in JavaScript ! The current Angular 2 release is rc.5 . Please consult the Change Log about recent enhancements, fixes, and breaking changes."
},
"quickstart": {
diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json
index 1e0d9aa221..250d244eb4 100644
--- a/public/docs/js/latest/guide/_data.json
+++ b/public/docs/js/latest/guide/_data.json
@@ -29,7 +29,7 @@
"basics": true
},
- "forms-deprecated": {
+ "forms": {
"title": "Forms",
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
"nextable": true,
diff --git a/public/docs/js/latest/guide/forms-deprecated.jade b/public/docs/js/latest/guide/forms-deprecated.jade
index 5a963272c8..b825bf6f2c 100644
--- a/public/docs/js/latest/guide/forms-deprecated.jade
+++ b/public/docs/js/latest/guide/forms-deprecated.jade
@@ -2,7 +2,7 @@ include ../_util-fns
.alert.is-important
:marked
- This guide is using the deprecated forms API.
+ This guide is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4.
We have created a new version using the new API here .
diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade
index 315d687414..045eb758ab 100644
--- a/public/docs/js/latest/quickstart.jade
+++ b/public/docs/js/latest/quickstart.jade
@@ -29,11 +29,12 @@ figure.image-display
.file app
.children
.file app.component.js
+ .file app.module.js
.file main.js
.file index.html
.file styles.css
:marked
- Functionally, it's an `index.html`, `styles.css` and two JavaScript files in an `app/` folder.
+ Functionally, it's an `index.html`, `styles.css` and three JavaScript files in an `app/` folder.
We can handle that!
Of course we won't build many apps that only run in plunker.
@@ -41,6 +42,7 @@ figure.image-display
1. Set up our development environment
1. Write the Angular root component for our app
+ 1. Add an Angular Module
1. Bootstrap it to take control of the main web page
1. Write the main page (`index.html`)
1. Add some CSS (`styles.css`)
@@ -124,7 +126,7 @@ code-example(format="").
'(component schema)')(format=".")
:marked
- The **`Component`** method takes a configuration object with two
+ The **`Component`** method takes a configuration object with three
properties. The **`Class`** method is where we implement the component itself,
giving it properties and methods that bind to the view and whatever
behavior is appropriate for this part of the UI.
@@ -167,7 +169,7 @@ code-example(format="").
provided by another module, we get it from the `app` object.
When another module needs to refer to `AppComponent`, it gets it from the `app.AppComponent` like this:
-+makeExample('quickstart/js/app/main.js', 'import','app/main.js (import)')(format=".")
++makeExample('quickstart/js/app/app.module.js', 'import', 'app/app.module.js (import)')(format=".")
:marked
Angular is also modular. It is a collection of library modules.
@@ -210,22 +212,36 @@ code-example(format="").
Now we need something to tell Angular to load this component.
+ ### Add an NgModule
+
+ Angular apps are composed of [Angular Modules](guide/ngmodules.html) that
+ snuggly contain all our components and everything else we need for our app.
+
+ Create the `app/app.module.ts` file with the following content:
+
++makeExample('quickstart/js/app/app.module.js', null, 'app/app.module.js')
+
+.l-sub-section
+ :marked
+ Read more about the `NgModule` configuration in the [appendix below](#ngmodule).
+
+:marked
### Bootstrap it!
-
+
Add a new file , `main.js`, to the `app/` folder as follows:
+makeExample('quickstart/js/app/main.js', null, 'app/main.js')(format=".")
:marked
We need two things to launch the application:
- 1. Angular's browser `bootstrap` function
- 1. The application root component that we just wrote.
+ 1. Angular's `platformBrowserDynamic().bootstrapModule` function
+ 1. The application root module that we just wrote.
We have them both in our 'namespaces'.
- Then we call `bootstrap`, passing in the **root component type**, `AppComponent`.
+ Then we call `bootstrapModule`, passing in the **root app module**, `AppModule`.
.l-sub-section
:marked
- Learn why we need `bootstrap` from `ng.platformBrowserDynamic`
- and why we create a separate *main.js* file in the [appendix below](#main).
+ Learn why we need `bootstrapModule` from `ng.platformBrowserDynamic`
+ and why we create a separate js files in the [appendix below](#main).
:marked
We've asked Angular to launch the app in a browser with our component at the root.
Where will Angular put it?
@@ -250,13 +266,14 @@ code-example(format="").
1. We load the JavaScript libraries we need; learn about them [below](#libraries).
- 2. We load our JavaScript files, paying attention to their order (`main.js` needs `app.component.js` to be there first).
+ 2. We load our JavaScript files, paying attention to their order (`main.js` needs `app.module.js` to be there first, and `app.module.js` needs `app.component.js`).
3. We add the `` tag in the ``. **This is where our app lives!**
- When Angular calls the `bootstrap` function in `main.js`, it reads the `AppComponent`
- metadata, finds the `my-app` selector, locates an element tag named `my-app`,
- and loads our application between those tags.
+ When Angular calls the `bootstrapModule` function in `main.js`,
+ it reads the `AppModule` metadata, sees that `AppComponent` is the bootstrap component,
+ finds the `my-app` selector, locates an element tag named `my-app`,
+ and renders our application's view between those tags.
:marked
### Add some style
@@ -314,6 +331,7 @@ figure.image-display
.file app
.children
.file app.component.js
+ .file app.module.js
.file main.js
.file index.html
.file package.json
@@ -322,12 +340,18 @@ figure.image-display
And here are the files:
+makeTabs(`
quickstart/js/app/app.component.js,
+ quickstart/js/app/app.module.js,
quickstart/js/app/main.js,
quickstart/js/index.html,
quickstart/js/package.1.json,
quickstart/js/styles.1.css
`,null,
- `app/app.component.js, app/main.js, index.html, package.json, styles.css`)
+ `app/app.component.js,
+ app/app.module.js,
+ app/main.js,
+ index.html,
+ package.json,
+ styles.css`)
:marked
.l-main-section
@@ -448,13 +472,32 @@ code-example(format="").
Just make sure there are no `npm ERR!` messages at the very end of `npm install`.
+.l-main-section
+:marked
+
+ ### Appendix: ***NgModule***
+ The `NgModule` decorator is listing:
+
+ 1. What other Angular Modules ours uses
+ 1. Which components and directives we declare in our components
+ 1. The component to bootstrap at the start
+
+ We import our lone `app.AppComponent` and add it to both `declaration` and `bootstrap` array.
+
+ Notice that we also add `ng.platformBrowser.BrowserModule` to the `imports` array.
+ This is the Angular Module that contains all the needed Angular bits and pieces to run our app in the browser.
+
+ Angular itself is split into separate Angular Modules so we only need to import the ones we really use.
+
+ One of the most common ones is `FormsModule`, and soon we'll also see `RouterModule` and `HttpModule`.
+
.l-main-section
:marked
### Appendix: ***main.js***
#### Bootstrapping is platform-specific
- We use the `bootstrap` function from `ng.platformBrowserDynamic`,
+ We use the `platformBrowserDynamic().bootstrapModule` function from `ng.platformBrowserDynamic`,
not `ng.core`. There's a good reason.
We only call "core" those capabilities that are the same across all platform targets.
@@ -469,11 +512,11 @@ code-example(format="").
These targets require a different kind of bootstrap function that we'd import from a different library.
- #### Why do we create a separate ***main.js*** file?
+ #### Why do we create a separate ***main.js***, ***app.module.js*** and ***app.component.js*** files?
The *main.js* file is tiny. This is just a QuickStart.
- We could have folded its few lines into the `app.component.js` file
- and spared ourselves some complexity.
+ We could have folded its few lines into the `app.module.js` file, and that one into
+ `app.component.js` and spared ourselves some complexity.
We didn't for what we believe to be good reasons:
1. Doing it right is easy
@@ -485,7 +528,7 @@ code-example(format="").
#### It's easy
Sure it's an extra step and an extra file. How hard is that in the scheme of things?
- We'll see that a separate `main.js` is beneficial for *most* apps
+ We'll see that a separate `main.js` and `app.module.js` is beneficial for *most* apps
even if it isn't critical for the QuickStart.
Let's develop good habits now while the cost is low.
@@ -493,32 +536,33 @@ code-example(format="").
We should be thinking about testability from the beginning
even if we know we'll never test the QuickStart.
- It is difficult to unit test a component when there is a call to `bootstrap` in the same file.
+ It is difficult to unit test a component when there is a call to `bootstrapModule` in the same file.
As soon as we load the component file to test the component,
- the `bootstrap` function tries to load the application in the browser.
+ the `bootstrapModule` function tries to load the application in the browser.
It throws an error because we're not expecting to run the entire application,
just test the component.
- Relocating the `bootstrap` function to `main.js` eliminates this spurious error
+ Relocating the `bootstrapModule` function to `main.js` eliminates this spurious error
and leaves us with a clean component module file.
#### Reusability
We refactor, rename, and relocate files as our application evolves.
- We can't do any of those things while the file calls `bootstrap`.
+ We can't do any of those things while the file calls `bootstrapModule`.
we can't move it.
We can't reuse the component in another application.
We can't pre-render the component on the server for better performance.
#### Separation of concerns
- A component's responsibility is to present and manage a view.
+ A component's responsibility is to present and manage a view, and a NgModule's
+ reponsibility is to define the application context.
- Launching the application has nothing to do with view management.
+ Launching the application has nothing to do with any of these.
That's a separate concern. The friction we're encountering in testing and reuse
stems from this unnecessary mix of responsibilities.
#### Import/Export
- While writing a separate `main.js` file we learned an essential Angular skill:
+ While writing a separate `main.js` and `app.module.js` files we learned an essential Angular skill:
how to 'export' from one 'module' and 'import' into another via our simple
namespace abstraction.
We'll do a lot of that as we learn more Angular.
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 735c69c2b2..6f63472d16 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -3,7 +3,7 @@
"icon": "home",
"title": "Angular Docs",
"menuTitle": "Docs Home",
- "banner": "Welcome to Angular in TypeScript ! The current Angular 2 release is rc.4 . Please consult the Change Log about recent enhancements, fixes, and breaking changes."
+ "banner": "Welcome to Angular in TypeScript ! The current Angular 2 release is rc.5 . Please consult the Change Log about recent enhancements, fixes, and breaking changes."
},
"cli-quickstart": {
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 2607a72898..ecfc0e22d6 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -28,14 +28,14 @@
"dynamic-form-deprecated": {
"title": "Dynamic Forms",
- "intro": "Render dynamic forms with NgFormModel"
+ "intro": "Render dynamic forms with NgFormModel",
+ "basics": true,
+ "hide": true
},
"dynamic-form": {
"title": "Dynamic Forms",
- "intro": "Render dynamic forms with FormGroup",
- "basics": true,
- "hide": true
+ "intro": "Render dynamic forms with FormGroup"
},
"set-document-title": {
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index 8860d2bfe9..9145c58b1d 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -16,13 +16,11 @@ a(id="top")
* [Filters/Pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2
- * [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2.
- Also covers modules.
+ * [Modules/Controllers/Components](#controllers-components) - *modules* are *modules* but different
+ and *controllers* are *components* in Angular 2.
* [Style Sheets](#style-sheets) - more options for CSS in Angular 2.
- * [String date pipe](#string-dates) - a tip for displaying string date values.
-
.l-main-section
:marked
## Template Basics
@@ -49,7 +47,7 @@ table(width="100%")
associated with this template.
When using the `controller as` syntax,
- the binding is prefixed with the controller alias (`vm`) because we
+ the binding is prefixed with the controller alias (`vm` or `$ctrl`) because we
have to be specific about the source of the binding.
td
:marked
@@ -131,11 +129,15 @@ table(width="100%")
td
:marked
### Bootstrapping
- +makeExample('cb-a1-a2-quick-reference/ts/app/main.1.ts')(format="." )
+ +makeExample('cb-a1-a2-quick-reference/ts/app/main.ts','','main.ts')(format="." )
+
+ +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )
+
:marked
Angular 2 does not have a bootstrap directive.
- We always launch the app in code by explicitly calling a bootstrap function
- and passing it the name of the application's module (`AppComponent`).
+ We always launch the app in code by explicitly bootstrapping the application's root module (`AppModule`)
+ in `main.ts`
+ and the application's root component (`AppComponent`) in `app.module.ts`.
For more information see [Quick Start](../quickstart.html).
tr(style=top)
@@ -499,7 +501,7 @@ table(width="100%")
### date
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'date')(format=".")
:marked
- The Angular 2 `date` pipe is similar. See [note](#string-dates) about string date values.
+ The Angular 2 `date` pipe is similar.
tr(style=top)
td
@@ -604,7 +606,10 @@ table(width="100%")
a(id="controllers-components")
.l-main-section
:marked
- ## Controllers / Components
+ ## Modules / Controllers / Components
+ In both Angular 1 and Angular 2, we use Angular modules to
+ help us organize our application into cohesive blocks of functionality.
+
In Angular 1, we write the code that provides the model and the methods for the view in a **controller**.
In Angular 2, we build a **component**.
@@ -647,15 +652,14 @@ table(width="100%")
of other modules that this module depends upon.
td
:marked
- ### import
- +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'import')(format=".")
+ ### Angular modules
+ +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts')(format=".")
:marked
- Angular 2 does not have its own module system. Instead we use ES 2015 modules.
- ES 2015 modules are file based, so each code file is its own module.
+ Angular 2 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 our components, pipes, and directives.
- We `import` what we need from the module files.
-
- For more information on modules see [Architecture Overview](../guide/architecture.html#module).
+ For more information on modules see [Angular Modules](../guide/ngmodule.html).
tr(style=top)
td
:marked
@@ -773,23 +777,3 @@ table(width="100%")
other parts of the application.
:marked
[Back to top](#top)
-
-a(id="string-dates")
-.l-main-section
-:marked
- ## Appendix: String dates
-
- Currently the Angular 2 `date` pipe does not process string dates such as
- "2015-12-19T00:00:00".
-
- As a work around, subclass the Angular `DatePipe` with a version that can convert strings
- and substitute that pipe in the HTML:
-
-+makeExample('cb-a1-a2-quick-reference/ts/app/date.pipe.ts', 'date-pipe', 'date.pipe.ts')(format=".")
-:marked
- Then import and declare that pipe in the `@Component` metadata `pipes` array:
-:marked
-+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".")
-
-:marked
- [Back to top](#top)
diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade
index 352ecd3c2b..acfb42c1f5 100644
--- a/public/docs/ts/latest/cookbook/dependency-injection.jade
+++ b/public/docs/ts/latest/cookbook/dependency-injection.jade
@@ -80,7 +80,7 @@ include ../_util-fns
.l-main-section
:marked
## External module configuration
- We can register _certain_ module providers when bootstrapping rather than in the root application component.
+ We can register _certain_ module providers in the `NgModule` rather than in the root application component.
We'd do this when we expect to select or configure external modules that support our application
but (a) aren't conceptually part of the application and (b) that we could change later without
@@ -95,10 +95,10 @@ include ../_util-fns
We'll switch to the real backend in production.
The application shouldn't know or care one way or the other.
- See both examples in the following `main.ts`
- where we list their service providers in an array in the second parameter of the `bootstrap` method.
+ See both examples in the following `app.module.ts`
+ where we list their service providers in the `providers` array of the `NgModule` (AppModule).
-+makeExample('cb-dependency-injection/ts/app/main.ts','bootstrap','app/main.ts')(format='.')
++makeExample('cb-dependency-injection/ts/app/app.module.ts','bootstrap','app/app.module.ts')(format='.')
a(id="injectable")
a(id="nested-dependencies")
@@ -872,33 +872,12 @@ a(id="forwardref")
The *Parent Finder* sample is full of circular class references that are impossible to break.
- In the [*Alex/Cathy* example](#known-parent) above:
-
- * the `AlexComponent` lists the `CathyComponent` in its component metadata `directives` array
- so it can display *Cathy* in its template.
-
- * the `CathyComponent` constructor injects the parent `AlexComponent` which means that the `alex` parameter
- of its constructor has the `AlexComponent` type.
-
- *Alex* refers to *Cathy* and *Cathy* refers to *Alex*. We're stuck. We must define one of them first.
-
- We defined *Alex* first and built its `C_DIRECTIVES` array with a forward reference to *Cathy*:
-+makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','C_DIRECTIVES','parent-finder.component.ts (C_DIRECTIVES)')(format='.')
:marked
-.l-sub-section
- :marked
- Defining *Alex* and *Cathy* in separate files won't help.
- *Alex* would have to import *Cathy* and *Cathy* would have to import *Alex*.
-
- We *had* to define *Alex* first because,
- while we can add `forwardRef(CathyComponent)` to *Alex*'s `directives` array,
- we can't write `public alex: forwardRef(AlexComponent))` in *Cathy*'s constructor.
-:marked
- We face a similar dilemma when a class makes *a reference to itself*
+ We face this dilemma when a class makes *a reference to itself*
as does the `AlexComponent` in its `providers` array.
The `providers` array is a property of the `@Component` decorator function which must
appear *above* the class definition.
- Again we break the circularity with `forwardRef`:
+ We break the circularity with `forwardRef`:
+makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','alex-providers','parent-finder.component.ts (AlexComponent providers)')(format='.')
:marked
diff --git a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade
index 453b46bc7d..029c7c7743 100644
--- a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade
@@ -2,7 +2,7 @@ include ../_util-fns
.alert.is-important
:marked
- This cookbook is using the deprecated forms API.
+ This cookbook is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4.
We have created a new version of this cookbook using the new API here .
diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade
index 2c865b64cf..705fadc488 100644
--- a/public/docs/ts/latest/cookbook/dynamic-form.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-form.jade
@@ -1,11 +1,5 @@
include ../_util-fns
-.alert.is-important
- :marked
- This cookbook uses the new forms API.
-
- The old forms API is deprecated, but we still maintain a separate version of the cookbook using the deprecated forms API here .
-
:marked
We can't always justify the cost and time to build handcrafted forms,
especially if we'll need a great number of them, they're similar to each other, and they change frequently
@@ -44,16 +38,21 @@ include ../_util-fns
:marked
## Bootstrap
- During bootstrap we have to register the new forms module by calling `provideForms()` and pass the result to the provider array.
+ We start by creating an `NgModule` called `AppModule`.
-+makeExample('cb-dynamic-form/ts/app/main.ts','','app/main.ts')
-
-:marked
- The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules.
-
- To remind us that the old API is deprecated, Angular will print a warning message to the console.
+ In our example we will be using Reactive Forms.
- Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message.
+ Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from `AppModule`.
+
+ We bootstrap our `AppModule` in main.ts.
+
++makeTabs(
+ `cb-dynamic-form/ts/app/app.module.ts,
+ cb-dynamic-form/ts/app/main.ts`,
+ null,
+ `app.module.ts,
+ main.ts`
+)
.l-main-section
@@ -121,9 +120,7 @@ include ../_util-fns
In both components we're relying on Angular's **formGroup** to connect the template HTML to the
underlying control objects, populated from the question model with display and validation rules.
- `formControlName` and `formGroup` have to be registered as directives before we can use them in our templates.
-
- It turns out we get access to all form directives by importing and registering `REACTIVE_FORM_DIRECTIVES`.
+ `formControlName` and `formGroup` are directives defined in `ReactiveFormsModule`. Our templates can can access these directives directly since we imported `ReactiveFormsModule` from `AppModule`.
:marked
diff --git a/public/docs/ts/latest/cookbook/set-document-title.jade b/public/docs/ts/latest/cookbook/set-document-title.jade
index f25fe798f8..60fa73a49b 100644
--- a/public/docs/ts/latest/cookbook/set-document-title.jade
+++ b/public/docs/ts/latest/cookbook/set-document-title.jade
@@ -38,18 +38,8 @@ code-example(format='').
for getting and setting the current HTML document title:
* `getTitle() : string` — Gets the title of the current HTML document.
- * `setTitle( newTitle : string )` — Sets the title of the current HTML document.
-
- While this class is part of the Browser platform package, it is *not part of the default Browser
- platform providers* that Angular loads automatically.
- This means as we bootstrap our application using the Browser platform `boostrap()`
- function, we'll also have to include `Title` service explicitly as one of the bootstrap providers:
-
-+makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.')
-:marked
- Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our
- custom application components and services.
-
+ * `setTitle( newTitle : string )` — Sets the title of the current HTML document.
+
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
+makeExample( "cb-set-document-title/ts/app/app.component.ts", "class", "app/app.component.ts (class)" )(format='.')
@@ -63,9 +53,10 @@ figure.image-display
+makeTabs(
`cb-set-document-title/ts/app/main.ts,
- cb-set-document-title/ts/app/app.component.ts`,
- '',
- 'app/main.ts, app/app.component.ts' )
+ cb-set-document-title/ts/app/app.module.ts,
+ cb-set-document-title/ts/app/app.component.ts`,
+ '',
+ 'app/main.ts, app/app.module.ts, app/app.component.ts' )
//
Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index 50c6100cda..3342e16d0f 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -21,6 +21,19 @@ include _util-fns
// #enddocregion a1
.l-main-section
+
+:marked
+ ## Angular Module
+.l-sub-section
+ :marked
+ Helps us organize an application into cohesive blocks of functionality.
+ An Angular module identifies the components, directives, and pipes that are used by the application
+ along with the list of external Angular modules that the application needs, such as `FormsModule`.
+
+ Every Angular application has an application root module class. By convention the class is
+ called `AppModule` and resides in a file named `app.component.ts`.
+
+ See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
:marked
## Annotation
.l-sub-section
@@ -50,10 +63,10 @@ include _util-fns
## Barrel
.l-sub-section
:marked
- A barrel is a way to *rollup exports* from several modules into a single convenience module.
- The barrel itself is a module file that re-exports *selected* exports of other modules.
+ A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module.
+ The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules.
- Imagine three modules in a `heroes` folder:
+ Imagine three ES2015 modules in a `heroes` folder:
code-example.
// heroes/hero.component.ts
export class HeroComponent {}
@@ -81,12 +94,17 @@ include _util-fns
import { Hero, HeroService } from '../heroes'; // index is implied
:marked
The Angular [scoped packages](#scoped-package) each have a barrel named `index`.
+
// #enddocregion b-c
:marked
That's why we can write this:
+makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '')
// #docregion b-c
+.alert.is-important
+ :marked
+ Note that you can often achieve this same goal using [Angular modules](#angular-module) instead.
+
:marked
## Binding
.l-sub-section
@@ -102,10 +120,9 @@ include _util-fns
## Bootstrap
.l-sub-section
:marked
- We launch an Angular application by "bootstrapping" it with the `bootstrap` method.
- The `bootstrap` method identifies an application's top level "root" [Component](#component)
- and optionally registers service [providers](#provider) with the
- [dependency injection system](#dependency-injection).
+ We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`).
+ The bootstraping identifies an application's top level "root" [Component](#component), which is the first
+ component that is loaded for the application. For more information see the [QuickStart](/docs/ts/latest/quickstart.html).
One can bootstrap multiple apps in the same `index.html`, each with its own top level root.
@@ -271,9 +288,7 @@ include _util-fns
Registering providers is a critical preparatory step.
Angular registers some of its own providers with every injector.
- We can register our own providers. Quite often the best time to register a `Provider`
- is when we [bootstrap](#bootstrap) the application.
- There are other opportunities to register as well.
+ We can register our own providers.
Learn more in the [Dependency Injection](/docs/ts/latest/guide/dependency-injection.html) chapter.
:marked
@@ -450,6 +465,14 @@ include _util-fns
:marked
## Module
.l-sub-section
+
+ .alert.is-important
+ :marked
+ In Angular, there are two types of modules:
+ - [Angular modules](#angular-module).
+ See the [Angular Module](/docs/ts/latest/guide/ngmodule.html) chapter for details and examples.
+ - ES2015 modules as described in this section.
+
:marked
Angular apps are modular.
@@ -487,6 +510,17 @@ include _util-fns
.l-main-section
+:marked
+ ## Observable
+.l-sub-section
+ :marked
+ We can think of an observable as an array whose items arrive asynchronously over time.
+ Observables help us manage asynchronous data, such as data coming from a backend service.
+ Observables are used within Angular itself, including Angular's event system and its http client service.
+
+ To use observables, Angular uses a third-party library called Reactive Extensions (RxJS).
+ Observables are a proposed feature for ES 2016, the next version of JavaScript.
+
:marked
## Output
.l-sub-section
@@ -505,7 +539,7 @@ include _util-fns
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter.
- Class names are typically spelled in PascalCase. Examples include: `Person` and `Customer`.
+ Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`.
This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase).
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
@@ -516,7 +550,7 @@ include _util-fns
:marked
An Angular pipe is a function that transforms input values to output values for
display in a [view](#view). We use the `#{atSym}Pipe` !{decorator}
- to associate the pipe function with a name. We then can use that
+ to associate the pipe function with a name. We can then use that
name in our HTML to declaratively transform values on screen.
Here's an example that uses the built-in `currency` pipe to display
@@ -543,6 +577,23 @@ include _util-fns
.l-main-section
+
+:marked
+ ## Reactive Forms
+.l-sub-section
+ :marked
+ A technique for building Angular forms through code in a component.
+ The alternate technique is [Template-Driven Forms](#template-driven-forms).
+
+ When building reactive forms:
+ - The "source of truth" is the component. The validation is defined using code in the component.
+ - Each control is explicitly created in the component class with `new FormControl()` or with `FormBuilder`.
+ - The template input elements do *not* use `ngModel`.
+ - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`.
+
+ Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation
+ of form controls.
+
:marked
## Router
.l-sub-section
@@ -555,18 +606,32 @@ include _util-fns
The Angular [Component Router](/docs/ts/latest/guide/router.html) is a richly featured mechanism for configuring
and managing the entire view navigation process including the creation and destruction
of views.
+
+ In most cases, components becomes attached to a [router](#router) by means
+ of a `RouterConfig` that defines routes to views.
+
+ A [routing component's](#routing-component) template has a `RouterOutlet` element where it can display views produced by the router.
+
+ Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+
+ See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+
+:marked
+ ## RouterModule
+.l-sub-section
+ :marked
+ A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views.
+
+ See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
+
+
:marked
## Routing Component
.l-sub-section
:marked
- A [Component](#component) with an attached router.
+ An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations.
- In most cases, the component became attached to a [router](#router) by means
- of a `#{atSym}RouterConfig` #{decorator} that defined routes to views controlled by this component.
-
- The component's template has a `RouterOutlet` element where it can display views produced by the router.
-
- It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate.
+ See the [Component Router](/docs/ts/latest/guide/router.html) chapter to learn more.
.l-main-section
@@ -587,6 +652,23 @@ include _util-fns
+makeExcerpt('architecture/ts/app/app.component.ts', 'import', '')
// #docregion n-s-2
+:marked
+ ## Service
+.l-sub-section
+ :marked
+ Components are great and all … but what do we do with data or logic that are not associated
+ with a specific view or that we want to share across components? We build services!
+
+ Applications often require services such as a hero data service or a logging service.
+ Our components depend on these services to do the heavy lifting.
+
+ A service is a class with a focused purpose.
+ We often create a service to implement features that are
+ independent from any specific view,
+ provide share data or logic across components, or encapsulate external interactions.
+
+ See the [Services](/docs/ts/latest/tutorial/toh-pt4.html) chapter of the tutorial to learn more.
+
:marked
## Structural Directive
.l-sub-section
@@ -597,6 +679,8 @@ include _util-fns
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
good examples in this category.
+
+ See the [Structural Directives](/docs/ts/latest/guide/structural-directives.html) chapter to learn more.
// #enddocregion n-s-2
// #docregion t1
@@ -612,11 +696,31 @@ include _util-fns
We write templates in a special [Template Syntax](/docs/ts/latest/guide/template-syntax.html).
+
+:marked
+ ## Template-Driven Forms
+.l-sub-section
+ :marked
+ A technique for building Angular forms using HTML forms and input elements in the view.
+ The alternate technique is [Reactive Forms](#reactive-forms).
+
+ When building template-driven forms:
+ - The "source of truth" is the template. The validation is defined using attributes on the individual input elements.
+ - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements.
+ - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and
+ two-way binding set up.
+ - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`.
+
+ Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios.
+
+ Learn how to build template-driven forms
+ in the [Forms](/docs/ts/latest/guide/forms.html) chapter.
+
:marked
## Template Expression
.l-sub-section
:marked
- An expression in a JavaScript-like syntax that Angular evaluates within
+ An expression is a JavaScript-like syntax that Angular evaluates within
a [data binding](#data-binding). Learn how to write template expressions
in the [Template Syntax](/docs/ts/latest/guide/template-syntax.html#template-expressions) chapter.
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index 3bc69e1c15..b59ef46195 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -33,15 +33,15 @@
"title": "Forms",
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
"nextable": true,
- "basics": true,
- "hide": true
+ "basics": true
},
"forms-deprecated": {
"title": "Forms",
"intro": "A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.",
"nextable": true,
- "basics": true
+ "basics": true,
+ "hide": true
},
"dependency-injection": {
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index 3510c864bb..a13f303e0d 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -12,10 +12,11 @@ block angular-parts
The framework consists of several cooperating libraries, some of them core and some optional.
:marked
- With Angular, we write applications by composing HTML *templates* with Angularized-markup,
+ We write Angular applications by composing HTML *templates* with Angularized-markup,
writing *component* classes to manage those templates, adding application logic in *services*,
- and handing the top root component to Angular's *bootstrapper*.
-
+ and boxing components and services in *modules*.
+
+ Then we launch the app by *bootstrapping* the top _root module_.
Angular takes over, presenting our application content in a browser and
responding to user interactions according to the instructions we provided.
@@ -49,118 +50,114 @@ figure
figure
img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
:marked
- Angular apps are modular.
+ Angular apps are modular and Angular has its own modularity system called _Angular Modules_
+ or, occasionally, _NgModules_.
- In general we assemble our application from many **modules**.
+ _Angular Modules_ are a big deal.
+ We can only introduce them there; the [Angular Modules](ngmodule.html) chapter covers them in depth.
- A typical module is a cohesive block of code dedicated to a single purpose.
- A module **exports** something of value in that code, typically one thing such as a class.
-
-
-block modules-in-dart
- //- N/A
-
-block modules-are-optional
- .l-sub-section
- :marked
- ### Modules are optional
- We highly recommend modular design. TypeScript has great support for ES2015 module syntax and our chapters assume we're taking a modular
- approach using that syntax. That's why we list *Module* among the basic building blocks.
-
- Angular itself doesn't require a modular approach nor this particular syntax. Don't use it if you don't want it.
- Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
-
- Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page)
- which demonstrates Angular 2 development with plain old JavaScript and no module system.
-
-- var _app_comp_filename = _docsFor == 'dart' ? 'app_component.dart' : 'app.component.ts';
+
:marked
- Perhaps the first module we meet is a module that exports a *component* class.
- The component is one of the basic Angular blocks, we write a lot of them,
- and we'll talk about components in the next segment. For the moment it is enough to know that a
- component class is the kind of thing we'd export from a module.
+ Every Angular app has at least one module, the _root module_, conventionally named `AppModule`.
- Most applications have an `AppComponent`. By convention, we'll find it in a file named `!{_app_comp_filename}`.
- Look inside such a file and we'll see a declaration such as this one.
+ While the _root_ module may be the only module in a small application, most apps have many more
+ _feature_ modules, each a cohesive block of code dedicated to an application domain,
+ a workflow, or a closely-related set of capabilities.
-+makeExcerpt('app/app.component.ts ()', 'export')
-
-block export-qualifier
+ An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
+.l-sub-section
:marked
- The `export` statement tells TypeScript that this is a module whose
- `AppComponent` class is public and accessible to other modules of the application.
-
+ Decorators are functions that modify JavaScript classes.
+ Angular has many decorators that attach metadata to classes so that it knows
+ what those classes mean and how they should work.
+
+ Learn more about decorators on the web.
:marked
- When we need a reference to the `AppComponent`, we **import** it like this:
+ `NgModule` is a decorator function that takes a single metadata object whose properties describe the module.
+ The most important are
+ * `declarations` - the _view classes_ that belong to this module.
+ Angular has three kinds of view classes: [components](#components), [directives](#directives) and [pipes](pipes.html).
-+makeExcerpt('app/main.ts', 'import')
+ * `exports` - subset of declarations that should be visible and usable in the component [templates](#templates) of other modules.
-block ts-import
+ * `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
+
+ * `providers` creators of [services](#services) that this module contributes to
+ the global collection of services; they become accessible in all parts of the app.
+
+ * `bootstrap` - identifies the main application view, called the _root component_,
+ that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
+
+ Here's a simple root module:
++makeExample('app/mini-app.ts', 'module', 'app/app.module.ts')(format='.')
+
+.l-sub-section
:marked
- The `import` statement tells the system it can get an `AppComponent` from a module named `app.component`
- located in a neighboring file.
- The **module name** (AKA module id) is often the same as the filename without its extension.
+ The `export` of `AppComponent` is just for show.
+ A root module has no reason to export anything because ... it's the root.
+ We don't expect other modules to import the root module.
+
+ But if one did, it could use the `AppComponent` in its component templates.
+:marked
+ We launch an application by _bootstrapping_ its root module.
+ During development we're likely to bootstrap the `AppModule` in a `main.ts` file like this one.
+
++makeExample('app/main.ts', '', 'app/main.ts')(format='.')
:marked
- ### Libraries
+ ### Angular Modules vs. JavaScript Modules
+
+ The Angular module — a class decorated with `@NgModule` — is a fundamental feature of Angular itself.
+
+ JavaScript also has its own module system for managing collections of JavaScript objects.
+ It's completely different and unrelated to the Angular module system.
+
+ In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
+ The module declares some objects to be public by marking them with the `export` key word.
+ Other JavaScript modules use *import statements* to access public objects from other modules.
+
++makeExample('app/app.module.ts', 'imports', '')(format='.')
++makeExample('app/app.module.ts', 'export', '')(format='.')
+
+.l-sub-section
+ :marked
+ Learn more about the JavaScript module system on the web.
+:marked
+ These are two different and _complementary_ module systems. We use them both to write our apps.
+
+ ### Angular Libraries
figure
img(src="/resources/images/devguide/architecture/library-module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
-block angular-library-modules
- :marked
- Some modules are _libraries_ of other modules.
- Angular itself ships as a collection of library modules within several npm packages.
- Their names begin with the `!{_at_angular}` prefix.
-
- Each Angular library contains a [barrel](../glossary.html#barrel) module
- that is actually a public façade over several logically-related private modules.
-
:marked
- `!{_at_angular}/core` is the primary Angular library from which we get most of what we need.
-
+ Angular itself ships as a collection of JavaScript modules. We can think of them as library modules.
- There are other important Angular libraries too, such as `!{_at_angular}/common`,
- `!{_at_angular}/http` and `!{_at_angular}/router`.
- We import what we need from an Angular !{_library_module}.
-
-block angular-imports
- :marked
- For example, we import the Angular **`Component` *function*** from `@angular/core` like this:
- +makeExcerpt('app/app.component.ts', 'import')
- :marked
- Compare that syntax to our previous import of `AppComponent`.
- +makeExcerpt('app/main.ts', 'import')
-
- :marked
- Notice the difference?
- In the first case, when importing from an Angular library module,
- the import statement refers to the bare module name, `@angular/core`, *without a path prefix*.
-
- When we import from one of *our* own files, we prefix the module name with the file path.
- In this example we specify a relative file path (`./`). That means the
- source module is in the same folder (`./`) as the module importing it.
- We could path up and around the application folder structure if the source module were somewhere else.
- .l-sub-section
- :marked
- We import and export in the ECMAScript 2015 (ES2015) module syntax.
- Learn more about that syntax [here](http://www.2ality.com/2014/09/es6-modules-final.html)
- and many other places on the web.
-
- The infrastructure *behind* module loading and importing is an important subject.
- But it's a subject outside the scope of this introduction to Angular.
- While we're focused on our application, *import* and *export*
- is about all we need to know.
-
-- var _export = _docsFor == 'dart' ? 'publicly declare' : 'export';
-- var _declare = _docsFor == 'dart' ? 'declare' : 'export';
+ Each Angular library name begin with the `!{_at_angular}` prefix.
+
+ We install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
+
:marked
- The key take-aways are:
- * Angular apps are composed of modules.
- * Modules !{_export} things — classes, function, values — that other modules import.
- * We prefer to write our application as a collection of modules, each module exporting one thing.
+ For example, we import Angular's `Component` decorator from the `@angular/core` library like this:
++makeExample('app/app.component.ts', 'import', '')(format='.')
+:marked
+ We also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
++makeExample('app/mini-app.ts', 'import-browser-module', '')(format='.')
+:marked
+ Our application module needs material from within that `BrowserModule`
+ so we add it to the `@NgModule` metadata `imports` like this.
++makeExample('app/mini-app.ts', 'ngmodule-imports', '')(format='.')
+:marked
+ We're using both the Angular and JavaScript module systems _together_.
- The first module we write will most likely !{_declare} a component.
+ It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports".
+ Hang in there. The confusion will yield to clarity with time and experience.
+
+.l-sub-section
+ :marked
+ Learn more in the [Angular Modules](ngmodule.html) chapter.
+
+.l-hr
.l-main-section
:marked
@@ -192,6 +189,8 @@ figure
For the moment, have faith that Angular will call the constructor and deliver an
appropriate `HeroService` when we need it.
+.l-hr
+
.l-main-section
:marked
## Templates
@@ -231,6 +230,8 @@ figure
In this manner we'll compose complex component trees to build out our richly featured application.
+.l-hr
+
.l-main-section
:marked
## Metadata
@@ -259,7 +260,6 @@ figure
block ts-decorator
:marked
- A decorator is a function. Decorators often have a configuration parameter.
The `@Component` decorator takes a required configuration object with the
information Angular needs to create and present the component and its view.
@@ -299,6 +299,8 @@ figure
The architectural takeaway is that we must add metadata to our code
so that Angular knows what to do.
+.l-hr
+
.l-main-section
:marked
## Data binding
@@ -357,6 +359,8 @@ figure
Data binding is also important for communication between parent and child components.
+.l-hr
+
.l-main-section
:marked
## Directives
@@ -417,6 +421,8 @@ block dart-bool
`HeroListComponent` are one kind of custom directive.
+.l-hr
+
.l-main-section
:marked
## Services
@@ -469,6 +475,8 @@ figure
Angular does help us *follow* these principles by making it easy to factor our
application logic into services and make those services available to components through *dependency injection*.
+.l-hr
+
.l-main-section
:marked
## Dependency injection
@@ -503,18 +511,19 @@ figure
If the injector doesn't have a `HeroService`, how does it know how to make one?
In brief, we must have previously registered a **provider** of the `HeroService` with the injector.
- A provider is something that can create or return a service, typically the service class itself.
+ A provider is something that can create or return a service, typically the service class itself.
- We can register providers at any level of the application component tree.
- We often do so at the root when we bootstrap the application so that
- the same instance of a service is available everywhere.
+ We can register providers in modules or in components.
-+makeExcerpt('app/main.ts', 'bootstrap')
+ We often add providers to the [root module](#module) so that
+ the same instance of a service is available everywhere.
+
++makeExample('app/app.module.ts', 'providers', 'app/app.module.ts (module providers)')(format='.')
:marked
- Alternatively, we might register at a component level, in the providers property of the `@Component` metadata:
+ Alternatively, we might register at a component level in the `providers` property of the `@Component` metadata:
-+makeExcerpt('app/hero-list.component.ts', 'providers')
++makeExample('app/hero-list.component.ts', 'providers', 'app/hero-list.component.ts (component providers)')(format='.')
:marked
Registering at a component level means we get a new instance of the
@@ -535,6 +544,8 @@ figure
* We register *providers* with injectors.
+.l-hr
+
.l-main-section
:marked
## Wrap up
@@ -560,15 +571,10 @@ figure
> [**Animations**](animations.html): The animation library makes it easy for developers to animate component behavior
without deep knowledge of animation techniques or CSS.
- > **Bootstrap**: A method to configure and launch the root application component.
-
> **Change detection**: Learn how Angular decides that a component property value has changed and
when to update the screen.
Learn how it uses **zones** to intercept asynchronous activity and run its change detection strategies.
- > **Component router**: With the component Router service, users can navigate a multi-screen application
- in a familiar web browsing style using URLs.
-
> **Events**: The DOM raises events. So can components and services. Angular offers mechanisms for
publishing and subscribing to events.
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index e6f0db9472..b27047af9c 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -126,10 +126,11 @@ p
Meanwhile, we'll revise the `AppComponent` to reference this template.
+makeExample('attribute-directives/ts/app/app.component.ts',null,'app/app.component.ts')
:marked
- We've added an `import` statement to fetch the 'Highlight' directive and,
- added that class to a `directives` component metadata so that Angular
+ We'll add an `import` statement to fetch the 'Highlight' directive and,
+ added that class to the `declarations` NgModule metadata so that Angular
will recognize our directive when it encounters `myHighlight` in the template.
-
++makeExample('attribute-directives/ts/app/app.module.ts',null,'app/app.module.ts')
+:marked
We run the app and see that our directive highlights the paragraph text.
figure.image-display
@@ -138,15 +139,15 @@ figure.image-display
:marked
### Your directive isn't working?
- Did you remember to set the `directives` attribute of `@Component`? It is easy to forget!
+ Did you remember to add the directive to the the `declarations` attribute of `@NgModule`? It is easy to forget!
Open the console in the browser tools and look for an error like this:
code-example(format="nocode").
EXCEPTION: Template parse errors:
- Can't bind to 'myHighlight' since it isn't a known native property
+ Can't bind to 'myHighlight' since it isn't a known property of 'p'.
:marked
Angular detects that we're trying to bind to *something* but it doesn't know what.
- We have to tell it by listing `HighlightDirective` in the `directives` metadata array.
+ We have to tell it by listing `HighlightDirective` in the `declarations` metadata array.
:marked
Let's recap what happened.
@@ -318,6 +319,7 @@ figure.image-display
`attribute-directives/ts/app/app.component.ts,
attribute-directives/ts/app/app.component.html,
attribute-directives/ts/app/highlight.directive.ts,
+ attribute-directives/ts/app/app.module.ts,
attribute-directives/ts/app/main.ts,
attribute-directives/ts/index.html
`,
@@ -325,6 +327,7 @@ figure.image-display
`app.component.ts,
app.component.html,
highlight.directive.ts,
+ app.module.ts,
main.ts,
index.html
`)
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index 2ad5b7a7ed..8755cbec03 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -253,37 +253,37 @@ block ctor-syntax
We do have to configure the injector by registering the **providers**
that create the services our application requires.
We'll explain what [providers](#providers) are later in this chapter.
- Before we do, let's see an example of provider registration during bootstrapping:
-+makeExample('dependency-injection/ts/app/main.1.ts', 'bootstrap-discouraged')(format='.')
+ We can either register a provider within an [NgModule](ngmodule.html) or in application components
-:marked
- The injector now knows about our `HeroService`.
- An instance of our `HeroService` will be available for injection across our entire application.
+ ### Registering providers in an NgModule
+ Here's our AppModule where we register a `Logger`, an `UserService`, and an `APP_CONFIG` provider.
- Of course we can't help wondering about that comment telling us not to do it this way.
- It *will* work. It's just not a best practice.
- The bootstrap provider option is intended for configuring and overriding Angular's own
- preregistered services, such as its routing support.
-
- The preferred approach is to register application providers in application components.
+- var stylePattern = { otl: /(providers)/ };
++makeExample('dependency-injection/ts/app/app.module.ts', 'ngmodule','app/app.module.ts', stylePattern)(format='.')
+
:marked
### Registering providers in a component
Here's a revised `HeroesComponent` that registers the `HeroService`.
-- var stylePattern = { otl: /(providers:.*),/ };
+makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts', 'full','app/heroes/heroes.component.ts', stylePattern)(format='.')
:marked
- Look closely at the `providers` part of the `@Component` metadata.
- An instance of the `HeroService` is now available for injection in this `HeroesComponent`
- and all of its child components.
+ ### When to use the NgModule and when an application component?
+ On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider
+ registered within an NgModule will be accessible in the entire application.
- The `HeroesComponent` itself doesn't happen to need the `HeroService`.
- But its child `HeroListComponent` does, so we head there next.
+ On the other hand, a provider registered in an application component is available only on that component and all its children.
+
+ We want the `APP_CONFIG` service to be available all across the application, but a `HeroService` is only used within the *Heroes*
+ feature area — and nowhere else. —
+
+.l-sub-section
+ :marked
+ Read also **Should I add providers to the root AppModule or the root AppComponent?** at the [NgModule](ngmodule.html#q-root-component-or-module) chapter.
:marked
### Preparing the HeroListComponent for injection
@@ -470,9 +470,9 @@ block real-logger
:marked
We're likely to need the same logger service everywhere in our application,
so we put it in the project's `#{_appDir}` folder, and
- we register it in the `providers` #{_array} of the metadata for our application root component, `AppComponent`.
+ we register it in the `providers` #{_array} of the metadata for our application module, `AppModule`.
-+makeExcerpt('app/providers.component.ts','providers-logger','app/app.component.ts (excerpt)')
++makeExcerpt('app/providers.component.ts','providers-logger','app/app.module.ts (excerpt)')
:marked
If we forget to register the logger, Angular throws an exception when it first looks for the logger:
@@ -497,7 +497,7 @@ code-example(format="nocode").
We must register a service *provider* with the injector, or it won't know how to create the service.
- Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppComponent` like this:
+ Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppModule` like this:
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger')
@@ -801,9 +801,9 @@ block what-should-we-use-as-token
block dart-map-alternative
:marked
- Or we can provide and inject the configuration object in our top-level `AppComponent`.
+ Or we can provide and inject the configuration object in an ngModule like `AppModule`.
- +makeExcerpt('app/app.component.ts','providers')
+ +makeExcerpt('app/app.module.ts','ngmodule-providers')
#optional
:marked
diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade
index 5fbf0e7ff7..376c2d254c 100644
--- a/public/docs/ts/latest/guide/displaying-data.jade
+++ b/public/docs/ts/latest/guide/displaying-data.jade
@@ -278,6 +278,7 @@ block hero-class
block final-code
+makeTabs(`displaying-data/ts/app/app.component.ts,
displaying-data/ts/app/hero.ts,
+ displaying-data/ts/app/app.module.ts,
displaying-data/ts/app/main.ts`,
- 'final,,',
- 'app/app.component.ts, app/hero.ts, main.ts')
+ 'final,,,',
+ 'app/app.component.ts, app/hero.ts, app.module.ts, main.ts')
diff --git a/public/docs/ts/latest/guide/forms-deprecated.jade b/public/docs/ts/latest/guide/forms-deprecated.jade
index f29cb3087a..ad2d70a669 100644
--- a/public/docs/ts/latest/guide/forms-deprecated.jade
+++ b/public/docs/ts/latest/guide/forms-deprecated.jade
@@ -2,7 +2,7 @@ include ../_util-fns
.alert.is-important
:marked
- This guide is using the deprecated forms API.
+ This guide is using the deprecated forms API, which is disabled as of RC5, thus this sample only works up to RC4.
We have created a new version using the new API here .
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 90facf5e1f..dbe9b8ded6 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -1,15 +1,7 @@
include ../_util-fns
-.alert.is-important
- :marked
- This guide is using the new forms API. To use this API, you must opt in by adding special
- providers to your bootstrap file (see the Bootstrap seection below).
-
- The old forms API is deprecated, but we still maintain a separate version of the guide using
- the deprecated forms API here .
-
:marked
- We’ve all used a form to login, submit a help request, place an order, book a flight,
+ We’ve all used a form to log in, submit a help request, place an order, book a flight,
schedule a meeting and perform countless other data entry tasks.
Forms are the mainstay of business applications.
@@ -23,38 +15,22 @@ include ../_util-fns
**two-way data binding, change tracking, validation, and error handling**
... which we shall cover in this chapter on Angular forms.
- We will build a simple form from scratch, one step at a time. Along the way we'll learn
+ We will build a simple form from scratch, one step at a time. Along the way we'll learn how to
- - to build an Angular form with a component and template
+ - build an Angular form with a component and template
- - two-way data binding with `[(ngModel)]` syntax for reading and writing values to input controls
+ - two-way data bind with `[(ngModel)]` syntax for reading and writing values to input controls
- - using `ngModel` in combination with a form lets us track the change state and validity of form controls
+ - track the change state and validity of form controls using `ngModel` in combination with a form
- - special CSS classes that follow the state of the controls and can be used to provide strong visual feedback
+ - provide strong visual feedback using special CSS classes that track the state of the controls
- - displaying validation errors to users and enable/disable form controls
+ - display validation errors to users and enable/disable form controls
- - sharing information among controls with template reference variables
+ - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements
Live Example
-.l-main-section
-:marked
- ## Bootstrap
-
- We start by showing how to bootstrap the application and add the necessary dependencies to use forms.
-
- During bootstrap we have to register the new forms module by calling `provideForms()` and pass the result to the provider array.
-+makeExample('forms/ts/app/main.ts','','app/main.ts')
-
-:marked
- The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules.
-
- To remind us that the old API is deprecated, Angular will print a warning message to the console.
-
- Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message.
-
.l-main-section
:marked
## Template-Driven Forms
@@ -101,7 +77,7 @@ figure.image-display
1. Create the component that controls the form
1. Create a template with the initial form layout
1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax
- 1. Add the **#name** attribute to each form input control
+ 1. Add the `name` attribute to each form input control
1. Add custom CSS to provide visual feedback
1. Show and hide validation error messages
1. Handle form submission with **ngSubmit**
@@ -137,7 +113,8 @@ include ../_quickstart_repo
We can create a new hero like this:
code-example(format="").
let myHero = new Hero(42, 'SkyDog',
- 'Fetch any object at any distance', 'Leslie Rollover');
+ 'Fetch any object at any distance',
+ 'Leslie Rollover');
console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
:marked
@@ -156,13 +133,15 @@ code-example(format="").
:marked
There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
- Understanding this component requires only the Angular 2 concepts we’ve learned in previous chapters
+ Understanding this component requires only the Angular concepts we’ve learned in previous chapters
1. We import the `Component` decorator from the Angular library as we usually do.
+ 1. We import the `Hero` model we just created.
+
1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `` tag.
- 1. The `templateUrl` property points to a separate file for template HTML called `hero-form.component.html`.
+ 1. The `templateUrl` property points to a separate file for the template HTML called `hero-form.component.html`.
1. We defined dummy data for `model` and `powers` as befits a demo.
Down the road, we can inject a data service to get and save real data
@@ -182,7 +161,38 @@ code-example(format="").
We made a good choice to put the HTML template elsewhere.
We'll write that template in a moment. Before we do, we'll take a step back
- and revise the `app.component.ts` to make use of our new `HeroFormComponent`.
+ and revise the `app.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`.
+
+.l-main-section
+:marked
+ ## Revise the *app.module.ts*
+
+ `app.module.ts` defines the application's root module. In it we identify the external modules we'll use in our application
+ and declare the components that belong to this module, such as our `HeroFormComponent`.
+
+ Because template-driven forms are in their own module, we need to add the `FormsModule` to the array of
+ `imports` for our application module before we can use forms.
+
+ Replace the contents of the "QuickStart" version with the following:
++makeExample('forms/ts/app/app.module.ts', null, 'app/app.module.ts')
+
+:marked
+.l-sub-section
+ :marked
+ There are three changes:
+
+ 1. We import `FormsModule` and our new `HeroFormComponent`.
+
+ 1. We add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives our application
+ access to all of the template-driven forms features, including `ngModel`.
+
+ 1. We add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes
+ the `HeroFormComponent` component visible throughout this module.
+
+.alert.is-important
+ :marked
+ If a component, directive, or pipe belongs to a module in the `imports` array, _DON'T_ declare it in the `declarations` array.
+ If you wrote it and it should belong to this module, _DO_ declare it in the `declarations` array.
.l-main-section
:marked
@@ -196,14 +206,10 @@ code-example(format="").
:marked
.l-sub-section
:marked
- There are only three changes:
-
- 1. We import the new `HeroFormComponent`.
+ There is only one changes:
1. The `template` is simply the new element tag identified by the component's `selector` property.
-
- 1. The `directives` array tells Angular that our template depends upon the `HeroFormComponent`
- which is itself a Directive (as are all Components).
+ This will display the hero form when the application component is loaded.
.l-main-section
:marked
@@ -220,11 +226,11 @@ code-example(format="").
The *Name* ` ` control has the HTML5 `required` attribute;
the *Alter Ego* ` ` control does not because `alterEgo` is optional.
- We've got a *Submit* button at the bottom with some classes on it.
+ We've got a *Submit* button at the bottom with some classes on it for styling.
**We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
- The `container`,`form-group`, `form-control`, and `btn` classes
+ The `container`, `form-group`, `form-control`, and `btn` classes
come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic.
We're using Bootstrap to gussy up our form.
Hey, what's a form without a little style!
@@ -295,7 +301,6 @@ figure.image-display
so we can see what we're doing.
We left ourselves a note to throw it away when we're done.
-
:marked
Focus on the binding syntax: `[(ngModel)]="..."`.
@@ -309,18 +314,33 @@ figure.image-display
The diagnostic is evidence that we really are flowing values from the input box to the model and
back again. **That's two-way data binding!**
- Notice that we also added a `name` attribute to our ` ` tag. This is a requirement when using `[(ngModel)]` in combination with a form, so that we can easily refer to it in the aggregate form value and validity state.
+ Notice that we also added a `name` attribute to our ` ` tag and set it to "name"
+ which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
+ Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
- Let's add similar `[(ngModel)]` bindings to *Alter Ego* and *Hero Power*.
+.l-sub-section
+ :marked
+ Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular
+ attached to the `