From b1c2c27d365186d4231a470945a0975482df58e9 Mon Sep 17 00:00:00 2001 From: Adrian Irwin Date: Thu, 3 Nov 2016 16:57:56 -0700 Subject: [PATCH 001/125] docs(router): fixed verbiage and example of how routed views are related to the router outlet --- public/docs/ts/latest/guide/router.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index a1885b6afe..c944cfbcaf 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -143,10 +143,10 @@ include ../_util-fns ### Router Outlet Given this configuration, when the browser URL for this application becomes `/heroes`, the router matches that URL to the `Route` path `/heroes` and displays the `HeroListComponent` - in a **`RouterOutlet`** that we've placed in the host view's HTML. + ***after*** the **`RouterOutlet`** that we've placed in the host view's HTML. code-example(language="html"). - <!-- Routed views go here --> <router-outlet></router-outlet> + <!-- Routed views go here --> :marked ### Router Links Now we have routes configured and a place to render them, but From 37f93bc0cbc2a766846b7715b1d8ddeeec43de39 Mon Sep 17 00:00:00 2001 From: Adrian Irwin Date: Thu, 3 Nov 2016 17:25:55 -0700 Subject: [PATCH 002/125] docs(router): fixed verbiage and example of how routed views are related to the router outlet --- public/docs/ts/latest/guide/router.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index a1885b6afe..ce19d50a03 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -143,10 +143,10 @@ include ../_util-fns ### Router Outlet Given this configuration, when the browser URL for this application becomes `/heroes`, the router matches that URL to the `Route` path `/heroes` and displays the `HeroListComponent` - in a **`RouterOutlet`** that we've placed in the host view's HTML. + ***after*** a **`RouterOutlet`** that we've placed in the host view's HTML. code-example(language="html"). - <!-- Routed views go here --> <router-outlet></router-outlet> + <!-- Routed views go here --> :marked ### Router Links Now we have routes configured and a place to render them, but From 2649647ecb14a28932405d6b0bc22afd1f931089 Mon Sep 17 00:00:00 2001 From: Jesus Rodriguez Date: Sat, 5 Nov 2016 00:37:47 +0100 Subject: [PATCH 003/125] chore: add upgrade/static to API reference --- tools/api-builder/angular.io-package/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js index 57ddba5640..c08f9f5d35 100644 --- a/tools/api-builder/angular.io-package/index.js +++ b/tools/api-builder/angular.io-package/index.js @@ -66,6 +66,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe '@angular/router/index.ts', '@angular/router/testing/index.ts', '@angular/upgrade/index.ts', + '@angular/upgrade/static.ts' ]; readTypeScriptModules.hidePrivateMembers = true; From 8fafa8a01e0a49a1ddb83debe476d3b656e7ff25 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sat, 5 Nov 2016 12:53:47 -0700 Subject: [PATCH 004/125] docs(plunkers): prepare plunkers for the quickstart reboot (#2759) * plunker builder removes files and scripts not needed in plunkers (e.g., systemjs.config.js) * no longer adds placeholder README.md (deemed a distraction) * tag is now "Angular" instead of "Angular2" * new plnkr.json "includeSystemConfig" option adds systemjs.config.js back; needed for testing plnkrs. * incidentally changes comment "Polyfill(s)" to "Polyfills" in all index.html --- .../_examples/_boilerplate/plunker.README.md | 2 -- .../docs/_examples/animations/ts/index.html | 2 +- .../docs/_examples/architecture/ts/index.html | 2 +- .../_examples/architecture/ts/mini-app.html | 26 ------------------- .../attribute-directives/ts/index.html | 2 +- .../cb-a1-a2-quick-reference/ts/index.html | 2 +- .../cb-component-communication/ts/index.html | 2 +- .../cb-component-relative-paths/ts/index.html | 2 +- .../cb-dependency-injection/ts/index.html | 2 +- .../_examples/cb-dynamic-form/ts/index.html | 2 +- .../cb-form-validation/ts/index.html | 2 +- .../cb-set-document-title/ts/index.html | 2 +- .../docs/_examples/cb-ts-to-js/ts/index.html | 2 +- .../_examples/component-styles/ts/index.html | 2 +- .../dependency-injection/ts/index.html | 2 +- .../_examples/displaying-data/ts/index.html | 2 +- public/docs/_examples/forms/ts/index.html | 2 +- .../ts/index.html | 2 +- .../homepage-hello-world/ts/index.1.html | 2 +- .../homepage-hello-world/ts/index.html | 2 +- .../_examples/homepage-tabs/ts/index.1.html | 2 +- .../_examples/homepage-tabs/ts/index.html | 2 +- .../_examples/homepage-todo/ts/index.1.html | 2 +- .../_examples/homepage-todo/ts/index.html | 2 +- .../_examples/lifecycle-hooks/ts/index.html | 2 +- .../docs/_examples/ngmodule/ts/index.0.html | 2 +- .../docs/_examples/ngmodule/ts/index.1.html | 2 +- .../docs/_examples/ngmodule/ts/index.1b.html | 2 +- .../docs/_examples/ngmodule/ts/index.2.html | 2 +- .../docs/_examples/ngmodule/ts/index.3.html | 2 +- public/docs/_examples/ngmodule/ts/index.html | 2 +- public/docs/_examples/pipes/ts/index.html | 2 +- .../docs/_examples/quickstart/ts/index.html | 2 +- public/docs/_examples/router/ts/index.1.html | 2 +- public/docs/_examples/router/ts/index.html | 2 +- public/docs/_examples/security/ts/index.html | 2 +- .../server-communication/ts/index.html | 2 +- .../structural-directives/ts/index.html | 2 +- .../docs/_examples/style-guide/ts/index.html | 2 +- .../docs/_examples/styleguide/ts/index.html | 2 +- .../_examples/template-syntax/ts/index.html | 2 +- .../_examples/testing/ts/1st-specs.plnkr.json | 3 ++- .../_examples/testing/ts/app-specs.plnkr.json | 3 ++- .../_examples/testing/ts/bag-specs.plnkr.json | 3 ++- public/docs/_examples/testing/ts/bag.html | 2 +- public/docs/_examples/testing/ts/index.html | 2 +- public/docs/_examples/toh-1/ts/index.html | 2 +- public/docs/_examples/toh-2/ts/index.html | 2 +- public/docs/_examples/toh-3/ts/index.html | 2 +- public/docs/_examples/toh-4/ts/index.html | 2 +- public/docs/_examples/toh-5/ts/index.html | 2 +- public/docs/_examples/toh-6/ts/index.html | 2 +- .../ts/index-1-2-hybrid-bootstrap.html | 2 +- ...x-1-2-hybrid-shared-adapter-bootstrap.html | 2 +- .../ts/index-1-to-2-projection.html | 2 +- .../ts/index-1-to-2-providers.html | 2 +- .../ts/index-2-to-1-providers.html | 2 +- .../ts/index-2-to-1-transclusion.html | 2 +- .../ts/index-downgrade-io.html | 2 +- .../ts/index-downgrade-static.html | 2 +- .../upgrade-adapter/ts/index-upgrade-io.html | 2 +- .../ts/index-upgrade-static.html | 2 +- .../docs/_examples/user-input/ts/index.html | 2 +- tools/plunker-builder/builder.js | 23 +++++----------- tools/plunker-builder/indexHtmlTranslator.js | 18 +++++++++++++ 65 files changed, 88 insertions(+), 106 deletions(-) delete mode 100644 public/docs/_examples/_boilerplate/plunker.README.md delete mode 100644 public/docs/_examples/architecture/ts/mini-app.html diff --git a/public/docs/_examples/_boilerplate/plunker.README.md b/public/docs/_examples/_boilerplate/plunker.README.md deleted file mode 100644 index fa2e46f47a..0000000000 --- a/public/docs/_examples/_boilerplate/plunker.README.md +++ /dev/null @@ -1,2 +0,0 @@ -### Angular Documentation Example - diff --git a/public/docs/_examples/animations/ts/index.html b/public/docs/_examples/animations/ts/index.html index 76a7b93356..8188d14709 100644 --- a/public/docs/_examples/animations/ts/index.html +++ b/public/docs/_examples/animations/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html index 090bd17c7b..d22ff7f6e4 100644 --- a/public/docs/_examples/architecture/ts/index.html +++ b/public/docs/_examples/architecture/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/architecture/ts/mini-app.html b/public/docs/_examples/architecture/ts/mini-app.html deleted file mode 100644 index ecb7dd21ae..0000000000 --- a/public/docs/_examples/architecture/ts/mini-app.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - Architecture of Angular - - - - - - - - - - - - - - - - - Loading... - - - diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html index 197f1a8280..f3b37e823a 100644 --- a/public/docs/_examples/attribute-directives/ts/index.html +++ b/public/docs/_examples/attribute-directives/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html index ee2eb6fdec..75e16b476c 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html index 4afa076c19..d4c62ed916 100644 --- a/public/docs/_examples/cb-component-communication/ts/index.html +++ b/public/docs/_examples/cb-component-communication/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/cb-component-relative-paths/ts/index.html b/public/docs/_examples/cb-component-relative-paths/ts/index.html index cc0d972df2..3a5c532b82 100644 --- a/public/docs/_examples/cb-component-relative-paths/ts/index.html +++ b/public/docs/_examples/cb-component-relative-paths/ts/index.html @@ -13,7 +13,7 @@ - + diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html index ba1d2761e1..c978778d09 100644 --- a/public/docs/_examples/cb-dependency-injection/ts/index.html +++ b/public/docs/_examples/cb-dependency-injection/ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/public/docs/_examples/cb-dynamic-form/ts/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html index ec3e1cbbb2..23d56ae14f 100644 --- a/public/docs/_examples/cb-dynamic-form/ts/index.html +++ b/public/docs/_examples/cb-dynamic-form/ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/public/docs/_examples/cb-form-validation/ts/index.html b/public/docs/_examples/cb-form-validation/ts/index.html index 8fc614fe0f..54ad9c69ab 100644 --- a/public/docs/_examples/cb-form-validation/ts/index.html +++ b/public/docs/_examples/cb-form-validation/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/cb-set-document-title/ts/index.html b/public/docs/_examples/cb-set-document-title/ts/index.html index 8f1ad96812..0543070fbd 100644 --- a/public/docs/_examples/cb-set-document-title/ts/index.html +++ b/public/docs/_examples/cb-set-document-title/ts/index.html @@ -14,7 +14,7 @@ - + diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html index 005fe67c31..c635706f38 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/index.html +++ b/public/docs/_examples/cb-ts-to-js/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html index 9345f5b221..115e5b9299 100644 --- a/public/docs/_examples/component-styles/ts/index.html +++ b/public/docs/_examples/component-styles/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/dependency-injection/ts/index.html b/public/docs/_examples/dependency-injection/ts/index.html index ce65fac8b7..b7ef513c19 100644 --- a/public/docs/_examples/dependency-injection/ts/index.html +++ b/public/docs/_examples/dependency-injection/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html index d9e9291661..e18da1b26e 100644 --- a/public/docs/_examples/displaying-data/ts/index.html +++ b/public/docs/_examples/displaying-data/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html index 50f8747546..984ddae1e0 100644 --- a/public/docs/_examples/forms/ts/index.html +++ b/public/docs/_examples/forms/ts/index.html @@ -15,7 +15,7 @@ - + diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html index 91d2dc8894..c13e9243aa 100644 --- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html +++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html index 7ea19e1842..e84cfb5de7 100644 --- a/public/docs/_examples/homepage-hello-world/ts/index.1.html +++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html index 283343ace7..7d5395fb0f 100644 --- a/public/docs/_examples/homepage-hello-world/ts/index.html +++ b/public/docs/_examples/homepage-hello-world/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html index 5ca7d182a6..dbf14c628a 100644 --- a/public/docs/_examples/homepage-tabs/ts/index.1.html +++ b/public/docs/_examples/homepage-tabs/ts/index.1.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html index d047702a13..ccc8fcdda3 100644 --- a/public/docs/_examples/homepage-tabs/ts/index.html +++ b/public/docs/_examples/homepage-tabs/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html index 4ac9552d89..ae0eef860b 100644 --- a/public/docs/_examples/homepage-todo/ts/index.1.html +++ b/public/docs/_examples/homepage-todo/ts/index.1.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html index 6bed22fce1..de82c12ddd 100644 --- a/public/docs/_examples/homepage-todo/ts/index.html +++ b/public/docs/_examples/homepage-todo/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html index 07cf7d4a03..4da8212d42 100644 --- a/public/docs/_examples/lifecycle-hooks/ts/index.html +++ b/public/docs/_examples/lifecycle-hooks/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.0.html b/public/docs/_examples/ngmodule/ts/index.0.html index 7deb1e2a5f..4ad8c4fc18 100644 --- a/public/docs/_examples/ngmodule/ts/index.0.html +++ b/public/docs/_examples/ngmodule/ts/index.0.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.1.html b/public/docs/_examples/ngmodule/ts/index.1.html index d48478f297..c004c4ed1f 100644 --- a/public/docs/_examples/ngmodule/ts/index.1.html +++ b/public/docs/_examples/ngmodule/ts/index.1.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.1b.html b/public/docs/_examples/ngmodule/ts/index.1b.html index 238724c32d..a681333223 100644 --- a/public/docs/_examples/ngmodule/ts/index.1b.html +++ b/public/docs/_examples/ngmodule/ts/index.1b.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.2.html b/public/docs/_examples/ngmodule/ts/index.2.html index 4bc7a6446b..8294f17a7d 100644 --- a/public/docs/_examples/ngmodule/ts/index.2.html +++ b/public/docs/_examples/ngmodule/ts/index.2.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.3.html b/public/docs/_examples/ngmodule/ts/index.3.html index 15252ded0b..20b639998b 100644 --- a/public/docs/_examples/ngmodule/ts/index.3.html +++ b/public/docs/_examples/ngmodule/ts/index.3.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/ngmodule/ts/index.html b/public/docs/_examples/ngmodule/ts/index.html index 15db0b5a79..c5a48c2092 100644 --- a/public/docs/_examples/ngmodule/ts/index.html +++ b/public/docs/_examples/ngmodule/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html index 0b1a46f328..57b188648d 100644 --- a/public/docs/_examples/pipes/ts/index.html +++ b/public/docs/_examples/pipes/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html index 4ee082433c..b7d82ca7c8 100644 --- a/public/docs/_examples/quickstart/ts/index.html +++ b/public/docs/_examples/quickstart/ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html index dbf32ae565..427becd129 100644 --- a/public/docs/_examples/router/ts/index.1.html +++ b/public/docs/_examples/router/ts/index.1.html @@ -10,7 +10,7 @@ - + diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html index abcbea6c31..1195b38267 100644 --- a/public/docs/_examples/router/ts/index.html +++ b/public/docs/_examples/router/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/security/ts/index.html b/public/docs/_examples/security/ts/index.html index 16eeeb2b2a..936c716eff 100644 --- a/public/docs/_examples/security/ts/index.html +++ b/public/docs/_examples/security/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html index 6b99fc5242..84bb0d53fa 100644 --- a/public/docs/_examples/server-communication/ts/index.html +++ b/public/docs/_examples/server-communication/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html index 2dc2548cc4..15dbbd7652 100644 --- a/public/docs/_examples/structural-directives/ts/index.html +++ b/public/docs/_examples/structural-directives/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html index 44a280de44..b71cd55c69 100644 --- a/public/docs/_examples/style-guide/ts/index.html +++ b/public/docs/_examples/style-guide/ts/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html index 5983457e07..8f1330fe94 100644 --- a/public/docs/_examples/styleguide/ts/index.html +++ b/public/docs/_examples/styleguide/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html index d3a4ec6aa6..e67e1871fd 100644 --- a/public/docs/_examples/template-syntax/ts/index.html +++ b/public/docs/_examples/template-syntax/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/public/docs/_examples/testing/ts/1st-specs.plnkr.json b/public/docs/_examples/testing/ts/1st-specs.plnkr.json index 945ec90060..1d4dd58afa 100644 --- a/public/docs/_examples/testing/ts/1st-specs.plnkr.json +++ b/public/docs/_examples/testing/ts/1st-specs.plnkr.json @@ -8,5 +8,6 @@ "1st-specs.html" ], "main": "1st-specs.html", - "tags": ["testing"] + "tags": ["testing"], + "includeSystemConfig": true } diff --git a/public/docs/_examples/testing/ts/app-specs.plnkr.json b/public/docs/_examples/testing/ts/app-specs.plnkr.json index afd126bb45..18dd58dec9 100644 --- a/public/docs/_examples/testing/ts/app-specs.plnkr.json +++ b/public/docs/_examples/testing/ts/app-specs.plnkr.json @@ -19,5 +19,6 @@ "app-specs.html" ], "main": "app-specs.html", - "tags": ["testing"] + "tags": ["testing"], + "includeSystemConfig": true } diff --git a/public/docs/_examples/testing/ts/bag-specs.plnkr.json b/public/docs/_examples/testing/ts/bag-specs.plnkr.json index 89d86da28a..b176c00cc5 100644 --- a/public/docs/_examples/testing/ts/bag-specs.plnkr.json +++ b/public/docs/_examples/testing/ts/bag-specs.plnkr.json @@ -16,5 +16,6 @@ "bag-specs.html" ], "main": "bag-specs.html", - "tags": ["testing"] + "tags": ["testing"], + "includeSystemConfig": true } diff --git a/public/docs/_examples/testing/ts/bag.html b/public/docs/_examples/testing/ts/bag.html index 35ff270025..d62d837f47 100644 --- a/public/docs/_examples/testing/ts/bag.html +++ b/public/docs/_examples/testing/ts/bag.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html index b50b69ec18..019b2319bf 100644 --- a/public/docs/_examples/testing/ts/index.html +++ b/public/docs/_examples/testing/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html index 4445befc9a..bed95dc8fa 100644 --- a/public/docs/_examples/toh-1/ts/index.html +++ b/public/docs/_examples/toh-1/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html index 4445befc9a..bed95dc8fa 100644 --- a/public/docs/_examples/toh-2/ts/index.html +++ b/public/docs/_examples/toh-2/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html index 4445befc9a..bed95dc8fa 100644 --- a/public/docs/_examples/toh-3/ts/index.html +++ b/public/docs/_examples/toh-3/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html index 4445befc9a..bed95dc8fa 100644 --- a/public/docs/_examples/toh-4/ts/index.html +++ b/public/docs/_examples/toh-4/ts/index.html @@ -6,7 +6,7 @@ - + diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html index f8383d0c94..e23c1d9c60 100644 --- a/public/docs/_examples/toh-5/ts/index.html +++ b/public/docs/_examples/toh-5/ts/index.html @@ -14,7 +14,7 @@ - + diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html index 12c9ee46df..a79d7feca8 100644 --- a/public/docs/_examples/toh-6/ts/index.html +++ b/public/docs/_examples/toh-6/ts/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html index fc090c9eb9..593dafe854 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html index 67d9b04e44..7340930c33 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html index ae3f8e8a31..a779fb57ba 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html index af1c6f4b26..281a23aeec 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html index 778cce946c..1652b9f397 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html index 721284383c..a40579e3be 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html index 625c93fa35..5899dd12de 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html index 01f920205c..44f2bfc829 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html index 9a74866eee..7e1570dcfa 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html index 6354c9a5dd..6083cb52a2 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html @@ -8,7 +8,7 @@ - + diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html index f72530d64f..8cc2f5a880 100644 --- a/public/docs/_examples/user-input/ts/index.html +++ b/public/docs/_examples/user-input/ts/index.html @@ -7,7 +7,7 @@ - + diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js index 175e69ec54..edce64b81a 100644 --- a/tools/plunker-builder/builder.js +++ b/tools/plunker-builder/builder.js @@ -37,21 +37,11 @@ class PlunkerBuilder { } _addPlunkerFiles(config, postData) { - this._addReadme(config, postData); if (config.basePath.indexOf('/ts') > -1) { - // uses systemjs.config.js so add plunker version - this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig); - } - } - - _addReadme(config, postData) { - var existingFiles = config.fileNames.map(function(file) { - return file.substr(file.lastIndexOf('/') + 1); - }); - - if (existingFiles.indexOf('README.md') === -1) { - var plunkerReadme = this.readme + config.description; - this.options.addField(postData, 'README.md', plunkerReadme); + if (config.includeSystemConfig) { + // uses systemjs.config.js so add plunker version + this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig); + } } } @@ -156,7 +146,7 @@ class PlunkerBuilder { this.options.addField(postData, relativeFileName, content); }); - var tags = ['angular2', 'example'].concat(config.tags || []); + var tags = ['angular', 'example'].concat(config.tags || []); tags.forEach(function(tag,ix) { postData['tags[' + ix + ']'] = tag; }); @@ -207,8 +197,6 @@ class PlunkerBuilder { } _getPlunkerFiles() { - // Assume plunker version is sibling of node_modules version - this.readme = fs.readFileSync(this.basePath + '/_boilerplate/plunker.README.md', 'utf-8'); var systemJsConfigPath = '/_boilerplate/systemjs.config.web.js'; if (this.options.build) { systemJsConfigPath = '/_boilerplate/systemjs.config.web.build.js'; @@ -255,6 +243,7 @@ class PlunkerBuilder { var defaultExcludes = [ '!**/app/main.ts', + '!**/a2docs.css', '!**/tsconfig.json', '!**/*plnkr.*', '!**/package.json', diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js index 85a3c8d99e..7f394e09a8 100644 --- a/tools/plunker-builder/indexHtmlTranslator.js +++ b/tools/plunker-builder/indexHtmlTranslator.js @@ -19,6 +19,18 @@ var _rxRules = { from: '//', to: '' }, + systemjs: { + from: /' + }, + // Clear script like this: + // + system_strip_import_app: { + from: / + + - - - - - - - - - - - - - -
{{ mainCtrl.message }}
- - From 455f2f6896cf77f7a8df6eb34014f824d6590d51 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Wed, 9 Nov 2016 18:25:04 +0000 Subject: [PATCH 021/125] add systemjs config extras to all indexes --- .../_examples/upgrade-adapter/ts/index-1-to-2-projection.html | 1 + .../_examples/upgrade-adapter/ts/index-1-to-2-providers.html | 1 + .../_examples/upgrade-adapter/ts/index-2-to-1-providers.html | 1 + .../_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html | 1 + public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html | 1 + .../_examples/upgrade-adapter/ts/index-downgrade-static.html | 1 + public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html | 1 + 7 files changed, 7 insertions(+) diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html index a779fb57ba..6d43ac1ac5 100644 --- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html +++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html @@ -16,6 +16,7 @@ + + + + + + + - + - + - + - + - + system_strip_import_app: { - from: /' - html += '' + html += ''; html += ''; return html; } @@ -166,8 +172,8 @@ class PlunkerBuilder { return postData; } - _createPlunkerHtml(postData) { - var baseHtml = this._createBasePlunkerHtml(this.options.embedded); + _createPlunkerHtml(config, postData) { + var baseHtml = this._createBasePlunkerHtml(config, this.options.embedded); var doc = jsdom.jsdom(baseHtml); var form = doc.querySelector('form'); _.forEach(postData, (value, key) => { From 64a8754386c0aa727e61d140d86bd31b6891ea99 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 10 Nov 2016 20:01:36 -0800 Subject: [PATCH 037/125] example(template-syntax): follow style-guide and other updates (#2750) --- .../_examples/template-syntax/e2e-spec.ts | 17 +++--- .../template-syntax/ts/app/app.component.html | 27 ++++++--- .../template-syntax/ts/app/app.component.ts | 17 +++++- .../template-syntax/ts/app/app.module.ts | 6 +- ...-click.directive.ts => click.directive.ts} | 16 +++--- .../template-syntax/ts/app/sizer.component.ts | 5 +- .../docs/ts/latest/guide/template-syntax.jade | 55 ++++++++++--------- 7 files changed, 86 insertions(+), 57 deletions(-) rename public/docs/_examples/template-syntax/ts/app/{my-click.directive.ts => click.directive.ts} (76%) diff --git a/public/docs/_examples/template-syntax/e2e-spec.ts b/public/docs/_examples/template-syntax/e2e-spec.ts index b8621c4d2d..71f1c58165 100644 --- a/public/docs/_examples/template-syntax/e2e-spec.ts +++ b/public/docs/_examples/template-syntax/e2e-spec.ts @@ -31,14 +31,13 @@ describe('Template Syntax', function () { expect(specialButtonEle.getAttribute('style')).toMatch('color: red'); }); - it('should two-way bind to sizer', function () { - let buttons = element.all(by.css('div#two-way-1 my-sizer button')); - let input = element(by.css('input#fontsize')); - - input.getAttribute('value').then(size => { - buttons.get(1).click(); - browser.waitForAngular(); - expect(input.getAttribute('value')).toEqual((+size + 1).toString()); - }); + it('should two-way bind to sizer', async () => { + let div = element(by.css('div#two-way-1')); + let incButton = div.element(by.buttonText('+')); + let input = div.element(by.css('input')); + let initSize = await input.getAttribute('value'); + incButton.click(); + expect(input.getAttribute('value')).toEqual((+initSize + 1).toString()); }); }); + diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html index d844154f58..30a80412c7 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.html +++ b/public/docs/_examples/template-syntax/ts/app/app.component.html @@ -305,10 +305,10 @@ button
- - + +
click with myClick
- + {{clickMessage}}
@@ -351,21 +351,22 @@ button

Two-way Binding

- -
Resizable Text
+ +
Resizable Text
- +

De-sugared two-way binding

- +


top +

NgModel (two-way) Binding

@@ -428,6 +429,18 @@ bindon-ngModel

NgStyle Binding

+ +
+

Change style of this text!

+ + | + | + + +

Style set to: '{{styleP.style.cssText}}'

+
+ +
This div is x-large. 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 072c634162..77221587a7 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts @@ -50,8 +50,6 @@ export class AppComponent implements AfterViewInit, OnInit { this.alert('Deleted hero: ' + (hero && hero.firstName)); } - fontSize = 10; - // #docregion evil-title evilTitle = 'Template Syntax'; // #enddocregion evil-title @@ -180,6 +178,21 @@ export class AppComponent implements AfterViewInit, OnInit { } // #enddocregion setStyles + // #docregion NgStyle + isItalic = false; + isBold = false; + fontSize: string = 'large'; + fontSizePx: number | string = 14; + + setStyle() { + return { + 'font-style': this.isItalic ? 'italic' : 'normal', + 'font-weight': this.isBold ? 'bold' : 'normal', + 'font-size': this.fontSize + }; + } + // #enddocregion NgStyle + toeChoice = ''; toeChooser(picker: HTMLFieldSetElement) { let choices = picker.children; diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts index db940fad08..712b613daf 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.module.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts @@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component'; -import { MyClickDirective, MyClickDirective2 } from './my-click.directive'; +import { ClickDirective, ClickDirective2 } from './click.directive'; import { SizerComponent } from './sizer.component'; @NgModule({ @@ -16,8 +16,8 @@ import { SizerComponent } from './sizer.component'; AppComponent, BigHeroDetailComponent, HeroDetailComponent, - MyClickDirective, - MyClickDirective2, + ClickDirective, + ClickDirective2, SizerComponent ], bootstrap: [ AppComponent ] diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/click.directive.ts similarity index 76% rename from public/docs/_examples/template-syntax/ts/app/my-click.directive.ts rename to public/docs/_examples/template-syntax/ts/app/click.directive.ts index 1f552277bf..09757bfeaf 100644 --- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts +++ b/public/docs/_examples/template-syntax/ts/app/click.directive.ts @@ -3,10 +3,10 @@ import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; @Directive({selector: '[myClick]'}) -export class MyClickDirective { - // #docregion my-click-output-1 +export class ClickDirective { + // #docregion output-myClick @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ... - // #enddocregion my-click-output-1 + // #enddocregion output-myClick toggle = false; @@ -19,15 +19,15 @@ export class MyClickDirective { } } -// #docregion my-click-output-2 +// #docregion output-myClick2 @Directive({ -// #enddocregion my-click-output-2 + // #enddocregion output-myClick2 selector: '[myClick2]', -// #docregion my-click-output-2 + // #docregion output-myClick2 outputs: ['clicks:myClick'] // propertyName:alias }) -// #enddocregion my-click-output-2 -export class MyClickDirective2 { +// #enddocregion output-myClick2 +export class ClickDirective2 { clicks = new EventEmitter(); toggle = false; diff --git a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts index cf0ef4af47..b6065c8cd1 100644 --- a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts @@ -11,15 +11,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
` }) export class SizerComponent { - @Input() size: number; + @Input() size: number | string; @Output() sizeChange = new EventEmitter(); dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { - const size = +this.size + delta; - this.size = Math.min(40, Math.max(8, size)); + this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } } diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 9956bcf654..ef9ab05371 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -490,8 +490,8 @@ table If we must read a target element property or call one of its methods, we'll need a different technique. See the API reference for - [viewChild](../api/core/index/ViewChild-decorator.html) and - [contentChild](../api/core/index/ContentChild-decorator.html). + [ViewChild](../api/core/index/ViewChild-decorator.html) and + [ContentChild](../api/core/index/ContentChild-decorator.html). :marked ### Binding target @@ -581,7 +581,7 @@ a(id="one-time-initialization") :marked - #### Content Security + #### Content security Imagine the following *malicious content*. +makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".") :marked @@ -599,10 +599,10 @@ figure.image-display .l-main-section :marked - ## Attribute, Class, and Style Bindings + ## Attribute, class, and style bindings The template syntax provides specialized one-way bindings for scenarios less well suited to property binding. - ### Attribute Binding + ### Attribute binding We can set the value of an attribute directly with an **attribute binding**. .l-sub-section :marked @@ -652,7 +652,7 @@ code-example(format="nocode"). is to set ARIA attributes, as in this example: +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".") :marked - ### Class Binding + ### Class binding We can add and remove CSS class names from an element’s `class` attribute with a **class binding**. @@ -668,9 +668,6 @@ code-example(format="nocode"). We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding. +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".") -block dart-class-binding-bug - //- N/A - :marked Finally, we can bind to a specific class name. Angular adds the class when the template expression evaluates to #{_truthy}. @@ -683,7 +680,7 @@ block dart-class-binding-bug we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time. :marked - ### Style Binding + ### Style binding We can set inline styles with a **style binding**. @@ -747,7 +744,7 @@ block style-property-name-dart-diff on [aliasing input/output properties](#aliasing-io). :marked - If the name fails to match element event or output property of a known directive, + If the name fails to match an element event or an output property of a known directive, Angular reports an “unknown directive” error. ### *$event* and event handling statements @@ -778,7 +775,7 @@ block style-property-name-dart-diff - ### Custom Events with EventEmitter + ### Custom events with *EventEmitter* Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html). The directive creates an `EventEmitter` and exposes it as a property. @@ -853,36 +850,44 @@ block style-property-name-dart-diff Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**. The `[(x)]` syntax combines the brackets - of _Property Binding_, `[x]`, with the parentheses of _Event Binding_, `(x)`. + of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`. + .callout.is-important header [( )] = banana in a box :marked Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets. + :marked The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x` and a corresponding event named `xChange`. Here's a `SizerComponent` that fits the pattern. It has a `size` value property and a companion `sizeChange` event: -+makeExample('template-syntax/ts/app/sizer.component.ts', null, 'app/sizer.component.ts') + ++makeExample('app/sizer.component.ts') + :marked The initial `size` is an input value from a property binding. Clicking the buttons increases or decreases the `size`, within min/max values constraints, and then raises (_emits_) the `sizeChange` event with the adjusted size. - Here's an example in which the `AppComponent.fontSize` is two-way bound to the `SizerComponent`: -+makeExample('template-syntax/ts/app/app.component.html', 'two-way-1')(format=".") + Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`: + ++makeExcerpt('app/app.component.html', 'two-way-1', '') + :marked - The `AppComponent.fontSize` establishes the initial `SizerComponent.size` value. - Clicking the buttons updates the `AppComponent.fontSize` via the two-way binding. - The revised `AppComponent.fontSize` value flows through to the _style_ binding, making the displayed text bigger or smaller. - Try it in the live example. + The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value. + Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding. + The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller. + Try it in the . The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding. Angular _desugars_ the `SizerComponent` binding into this: -+makeExample('template-syntax/ts/app/app.component.html', 'two-way-2')(format=".") + ++makeExcerpt('app/app.component.html', 'two-way-2', '') + :marked The `$event` variable contains the payload of the `SizerComponent.sizeChange` event. - Angular assigns the `$event` value to the `AppComponent.fontSize` when the user clicks the buttons. + Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons. Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings. @@ -1418,7 +1423,7 @@ h3#aliasing-io Aliasing input/output properties Directive consumers expect to bind to the name of the directive. For example, when we apply a directive with a `myClick` selector to a `
` tag, we expect to bind to an event property that is also called `myClick`. -+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".") ++makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".") :marked However, the directive name is often a poor choice for the name of a property within the directive class. The directive name rarely describes what the property does. @@ -1431,14 +1436,14 @@ h3#aliasing-io Aliasing input/output properties We can specify the alias for the property name by passing it into the input/output decorator like this: -+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".") ++makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".") .l-sub-section :marked We can also alias property names in the `inputs` and `outputs` #{_array}s. We write a colon-delimited (`:`) string with the directive property name on the *left* and the public alias on the *right*: - +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".") + +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".") .l-main-section From 12eb19fa3c34bb48b28da8bd33d94d7cc0526cf5 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Thu, 13 Oct 2016 17:59:00 +0100 Subject: [PATCH 038/125] feat(cb-ts-to-js): add es6 examples update docshredder to shred .es6 optimized focus gulp task convert imports and metadate sections add DI section add host and query metadata section add intro fix capitalization and grammar --- gulpfile.js | 11 +- public/docs/_examples/.gitignore | 1 + .../docs/_examples/_boilerplate/package.json | 1 + .../cb-ts-to-js/js-es6-decorators/.babelrc | 6 + .../js-es6-decorators/app/data.service.es6 | 10 + .../hero-di-inject-additional.component.es6 | 50 ++ .../app/hero-di-inject.component.es6 | 22 + .../app/hero-di.component.es6 | 26 + .../app/hero-io.component.es6 | 73 ++ .../app/hero-lifecycle.component.es6 | 27 + .../js-es6-decorators/app/hero.component.es6 | 30 + .../app/heroes-bindings.component.es6 | 42 + .../app/heroes-queries.component.es6 | 88 +++ .../js-es6-decorators/app/main.es6 | 30 + .../js-es6-decorators/example-config.json | 4 + .../cb-ts-to-js/js-es6-decorators/index.html | 51 ++ .../cb-ts-to-js/js-es6-decorators/plnkr.json | 8 + .../_examples/cb-ts-to-js/js-es6/.babelrc | 5 + .../cb-ts-to-js/js-es6/app/data.service.es6 | 13 + .../hero-di-inject-additional.component.es6 | 61 ++ .../js-es6/app/hero-di-inject.component.es6 | 32 + .../js-es6/app/hero-di.component.es6 | 35 + .../js-es6/app/hero-io.component.es6 | 85 ++ .../js-es6/app/hero-lifecycle.component.es6 | 31 + .../cb-ts-to-js/js-es6/app/hero.component.es6 | 37 + .../js-es6/app/heroes-bindings.component.es6 | 48 ++ .../js-es6/app/heroes-queries.component.es6 | 98 +++ .../_examples/cb-ts-to-js/js-es6/app/main.es6 | 30 + .../cb-ts-to-js/js-es6/example-config.json | 4 + .../_examples/cb-ts-to-js/js-es6/index.html | 52 ++ .../_examples/cb-ts-to-js/js-es6/plnkr.json | 8 + .../hero-di-inject-additional.component.js | 7 +- .../js/app/hero-di-inject.component.js | 13 +- .../js/app/hero-di-inline.component.js | 11 +- .../cb-ts-to-js/js/app/hero-di.component.js | 2 + .../cb-ts-to-js/js/app/hero-dsl.component.js | 3 +- .../js/app/hero-lifecycle.component.js | 7 +- .../cb-ts-to-js/js/app/hero.component.js | 7 +- .../docs/_examples/cb-ts-to-js/js/app/main.js | 9 +- .../hero-di-inject-additional.component.ts | 9 +- .../ts/app/hero-di-inject.component.ts | 5 +- .../cb-ts-to-js/ts/app/hero-di.component.ts | 1 + .../ts/app/hero-lifecycle.component.ts | 3 +- .../ts/app/heroes-bindings.component.ts | 11 +- public/docs/_examples/package.json | 5 +- public/docs/js/latest/cookbook/ts-to-js.jade | 741 +++++++++--------- tools/doc-shredder/doc-shredder.js | 2 +- tools/doc-shredder/regionExtractor.js | 1 + 48 files changed, 1440 insertions(+), 416 deletions(-) create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/.babelrc create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/example-config.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/index.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json diff --git a/gulpfile.js b/gulpfile.js index d24edb1f16..765dd3e006 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) { e2eSpecPaths.forEach(function(specPath) { // get all of the examples under each dir where a pcFilename is found localExamplePaths = getExamplePaths(specPath, true); - // Filter by language - localExamplePaths = localExamplePaths.filter(function (fn) { - return fn.match('/'+lang+'$') != null; - }); + // Filter by example name if (filter) { localExamplePaths = localExamplePaths.filter(function (fn) { return fn.match(filter) != null; }) } + // Filter by language, also supports variations like js-es6 + localExamplePaths = localExamplePaths.filter(function (fn) { + return fn.match('/'+lang+'(?:-[^/]*)?$') != null; + }); localExamplePaths.forEach(function(examplePath) { examplePaths.push(examplePath); }) @@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) { } function devGuideExamplesWatch(shredOptions, postShredAction, focus) { - var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*'; + var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*'; var includePattern = path.join(shredOptions.examplesDir, watchPattern); // removed this version because gulp.watch has the same glob issue that dgeni has. // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*'); diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index b6733dc6ea..b1a1357472 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -11,6 +11,7 @@ wallaby.js _test-output **/ts/**/*.js +**/js-es6*/**/*.js **/ts-snippets/**/*.js *.d.ts diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json index 3f255fcbd6..bcccdd978a 100644 --- a/public/docs/_examples/_boilerplate/package.json +++ b/public/docs/_examples/_boilerplate/package.json @@ -18,6 +18,7 @@ "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail", "build:cli": "ng build", "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js", + "build:babel": "babel app -d app --extensions \".es6\" --source-maps", "copy-dist-files": "node ./copy-dist-files.js", "i18n": "ng-xi18n" }, diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc new file mode 100644 index 0000000000..3aaf507508 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "es2015", + "angular2" + ] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 new file mode 100644 index 0000000000..7e9c7456c6 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class DataService { + constructor() { + } + getHeroName() { + return 'Windstorm'; + } +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 new file mode 100644 index 0000000000..8cd77b51f6 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 @@ -0,0 +1,50 @@ +import { + Attribute, + Component, + Inject, + Optional, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +@Component({ + selector: 'hero-title', + template: ` +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

+ ` +}) +class TitleComponent { + msg = ''; + constructor( + @Inject('titlePrefix') @Optional() titlePrefix, + @Attribute('title') title + ) { + this.titlePrefix = titlePrefix; + this.title = title; + } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion + +@Component({ + selector: 'hero-di-inject-additional', + template: ` + ` +}) +class AppComponent { } + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + TitleComponent + ], + bootstrap: [ AppComponent ] +}) +export class HeroesDIInjectAdditionalModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 new file mode 100644 index 0000000000..3a89867051 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 @@ -0,0 +1,22 @@ +import { Component, Inject, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +@Component({ + selector: 'hero-di-inject', + template: `

Hero: {{name}}

` +}) +class HeroComponent { + constructor(@Inject('heroName') name) { + this.name = name; + } +} +// #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/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 new file mode 100644 index 0000000000..e8341509a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 @@ -0,0 +1,26 @@ +import { Component, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DataService } from './data.service'; + +// #docregion +@Component({ + selector: 'hero-di', + template: `

Hero: {{name}}

` +}) + +class HeroComponent { + name; + 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/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 new file mode 100644 index 0000000000..2b954b138a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 @@ -0,0 +1,73 @@ +import { + Component, + EventEmitter, + Input, + Output, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +@Component({ + selector: 'my-confirm', + template: ` + + + ` +}) +class ConfirmComponent { + @Input() okMsg; + @Input('cancelMsg') notOkMsg; + @Output() ok = + new EventEmitter(); + @Output('cancel') notOk = + new EventEmitter(); + + onOkClick() { + this.ok.next(true); + } + onNotOkClick() { + this.notOk.next(true); + } +} +// #enddocregion + + +@Component({ + selector: 'hero-io', + template: ` + + + OK clicked + Cancel clicked + ` +}) +class AppComponent { + okClicked; + cancelClicked; + + onOk() { + this.okClicked = true; + } + onCancel() { + this.cancelClicked = true; + } +} + + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + ConfirmComponent + ], + bootstrap: [ AppComponent ] +}) +export class HeroesIOModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 new file mode 100644 index 0000000000..6a935731b5 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 @@ -0,0 +1,27 @@ +// #docplaster +// #docregion +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 +class HeroComponent{ + name; + ngOnInit() { + this.name = 'Windstorm'; + } +} +// #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] +}) +export class HeroesLifecycleModule { } + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 new file mode 100644 index 0000000000..4b4ba8529d --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 @@ -0,0 +1,30 @@ +// #docplaster +// #docregion metadata +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-view', + template: + '

Hero: {{getName()}}

' +}) +// #docregion appexport +// #docregion class +export class HeroComponent { + title = 'Hero Detail'; + getName() {return 'Windstorm'; } +} +// #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/js-es6-decorators/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 new file mode 100644 index 0000000000..ef959eabbb --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 @@ -0,0 +1,42 @@ +import { + Component, + HostBinding, + HostListener, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +@Component({ + selector: 'heroes-bindings', + template: ` +

+ Tour of Heroes +

+ ` +}) +class HeroesComponent { + @HostBinding() title = 'Tooltip content'; + @HostBinding('class.heading') hClass = true; + active; + + constructor() {} + + @HostListener('click') + clicked() { + this.active = !this.active; + } + + @HostListener('dblclick', ['$event']) + doubleClicked(evt) { + this.active = true; + } +} +// #enddocregion + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroesComponent ], + bootstrap: [ HeroesComponent ] +}) +export class HeroesHostBindingsModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 new file mode 100644 index 0000000000..bc55ccef24 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 @@ -0,0 +1,88 @@ +import { + Component, + ViewChildren, + ContentChild, + QueryList, + Input, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +@Component({ + selector: 'active-label', + template: ` + Active + ` +}) +class ActiveLabelComponent { + active; + + activate() { + this.active = true; + } +} + +// #docregion content +@Component({ + selector: 'a-hero', + template: `

+ {{hero.name}} + +

` +}) +class HeroComponent { + @Input() hero; + active; + + @ContentChild(ActiveLabelComponent) + label; + + activate() { + this.active = true; + this.label.activate(); + } +} +// #enddocregion content + + +// #docregion view +@Component({ + selector: 'heroes-queries', + template: ` + + + + + ` +}) +class HeroesQueriesComponent { + heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'Superman'} + ]; + + @ViewChildren(HeroComponent) + heroCmps; + + activate() { + this.heroCmps.forEach( + (cmp) => cmp.activate() + ); + } +} +// #enddocregion view + +@NgModule({ + imports: [ BrowserModule ], + declarations: [ + HeroesQueriesComponent, + HeroComponent, + ActiveLabelComponent + ], + bootstrap: [ HeroesQueriesComponent ] +}) +export class HeroesQueriesModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 new file mode 100644 index 0000000000..92f5af5e1a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 @@ -0,0 +1,30 @@ +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import + +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport + +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/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json new file mode 100644 index 0000000000..391bd1a766 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:babel", + "run": "http-server:e2e" +} \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html new file mode 100644 index 0000000000..005fe67c31 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + +

TypeScript to JavaScript

+ Classes and Class Metadata
+ Input and Output Metadata
+ Dependency Injection
+ Host and Query Metadata
+ +
+

Classes and Class Metadata

+ Loading hero-view... + Loading hero-lifecycle... + +
+

Input and Output Metadata

+ Loading hero-io... + +
+

Dependency Injection

+ Loading hero-di... + Loading hero-di-inject... + Loading hero-di-inject-additional... + +
+

Host and Query Metadata

+ Loading heroes-bindings... + Loading heroes-queries... + + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json new file mode 100644 index 0000000000..5c7a5acd44 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "TypeScript to JavaScript", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags":["cookbook"] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc new file mode 100644 index 0000000000..3c078e9f99 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "es2015" + ] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 new file mode 100644 index 0000000000..de023ce5a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; + +export class DataService { + constructor() { + } + getHeroName() { + return 'Windstorm'; + } +} + +DataService.annotations = [ + new Injectable() +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 new file mode 100644 index 0000000000..295d305ac4 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 @@ -0,0 +1,61 @@ +import { + Attribute, + Component, + Inject, + Optional, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +class TitleComponent { + constructor(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + + ok() { + this.msg = 'OK!'; + } +} + +TitleComponent.annotations = [ + new Component({ + selector: 'hero-title', + template: ` +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

+ ` + }) +]; + +TitleComponent.parameters = [ + [new Optional(), new Inject('titlePrefix')], + [new Attribute('title')] +]; +// #enddocregion + +class AppComponent { +} +AppComponent.annotations = [ + new Component({ + selector: 'hero-di-inject-additional', + template: ` + ` + }) +]; + +export class HeroesDIInjectAdditionalModule { } + +HeroesDIInjectAdditionalModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + TitleComponent + ], + bootstrap: [ AppComponent ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 new file mode 100644 index 0000000000..cc8df60abc --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 @@ -0,0 +1,32 @@ +import { Component, Inject, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +class HeroComponent { + constructor(name) { + this.name = name; + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di-inject', + template: `

Hero: {{name}}

` + }) +]; + +HeroComponent.parameters = [ + [new Inject('heroName')] +]; +// #enddocregion + +export class HeroesDIInjectModule { } + +HeroesDIInjectModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + providers: [ { provide: 'heroName', useValue: 'Windstorm' } ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 new file mode 100644 index 0000000000..bb569e6e2b --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 @@ -0,0 +1,35 @@ +import { Component, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { DataService } from './data.service'; + +// #docregion +class HeroComponent { + constructor(dataService) { + this.name = dataService.getHeroName(); + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di', + template: `

Hero: {{name}}

` + }) +]; + +HeroComponent.parameters = [ + [DataService] +]; + +// #enddocregion + +export class HeroesDIModule { } + +HeroesDIModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + providers: [ DataService ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 new file mode 100644 index 0000000000..549d75ce7c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 @@ -0,0 +1,85 @@ +import { + Component, + EventEmitter, + Input, + Output, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +class ConfirmComponent { + constructor(){ + this.ok = new EventEmitter(); + this.notOk = new EventEmitter(); + } + onOkClick() { + this.ok.next(true); + } + onNotOkClick() { + this.notOk.next(true); + } +} + +ConfirmComponent.annotations = [ + new Component({ + selector: 'my-confirm', + template: ` + + + `, + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) +]; +// #enddocregion + +class AppComponent { + constructor(){ + } + onOk() { + this.okClicked = true; + } + onCancel() { + this.cancelClicked = true; + } +} + +AppComponent.annotations = [ + new Component({ + selector: 'hero-io', + template: ` + + + OK clicked + Cancel clicked + ` + }) +]; + + +export class HeroesIOModule { } + +HeroesIOModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ + AppComponent, + ConfirmComponent + ], + bootstrap: [ AppComponent ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 new file mode 100644 index 0000000000..8a9c6c6c4e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 @@ -0,0 +1,31 @@ +// #docplaster +// #docregion +import { Component } from '@angular/core'; +// #enddocregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +class HeroComponent { + ngOnInit() { + this.name = 'Windstorm'; + } +} +// #enddocregion + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-lifecycle', + template: `

Hero: {{name}}

` + }) +]; + +export class HeroesLifecycleModule { } + +HeroesLifecycleModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) +]; \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 new file mode 100644 index 0000000000..4b5c20057a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 @@ -0,0 +1,37 @@ +// #docplaster +// #docregion metadata +import { Component } from '@angular/core'; + +// #docregion class +// #docregion appexport +export class HeroComponent { + construct() { + this.title = 'Hero Detail'; + } + getName() {return 'Windstorm'; } +} +// #enddocregion appexport +// #enddocregion class + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-view', + template: '

Hero: {{getName()}}

' + }) +]; +// #enddocregion metadata + +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +export class HeroesModule { } + +HeroesModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroComponent ], + bootstrap: [ HeroComponent ] + }) +]; + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 new file mode 100644 index 0000000000..5c13e586a6 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 @@ -0,0 +1,48 @@ +import { + Component, + HostBinding, + HostListener, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +// #docregion +class HeroesComponent { + constructor() { + this.title = 'Tooltip content'; + this.hClass = true; + } + + clicked() { + this.active = !this.active; + } + + doubleClicked(evt) { + this.active = true; + } +} +HeroesComponent.annotations = [ + new Component({ + selector: 'heroes-bindings', + template: `

+ Tour of Heroes +

`, + host: { + '[title]': 'title', + '[class.heading]': 'hClass', + '(click)': 'clicked()', + '(dblclick)': 'doubleClicked($event)' + } + }) +]; +// #enddocregion + +export class HeroesHostBindingsModule { } + +HeroesHostBindingsModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ HeroesComponent ], + bootstrap: [ HeroesComponent ] + }) +]; \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 new file mode 100644 index 0000000000..4cec0c3bbd --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 @@ -0,0 +1,98 @@ +import { + Component, + ViewChildren, + ContentChild, + QueryList, + Input, + NgModule +} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +class ActiveLabelComponent { + activate() { + this.active = true; + } +} + +ActiveLabelComponent.annotations = [ + new Component({ + selector: 'active-label', + template: ` + + Active + ` + }) +]; + +// #docregion content +class HeroComponent { + activate() { + this.active = true; + this.label.activate(); + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'a-hero', + template: `

+ {{hero.name}} + +

`, + inputs: ['hero'], + queries: { + label: new ContentChild(ActiveLabelComponent) + } + }) +]; +// #enddocregion content + + +// #docregion view +class HeroesQueriesComponent { + constructor(){ + this.heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'Superman'} + ]; + } + + activate() { + this.heroCmps.forEach( + (cmp) => cmp.activate() + ); + } +} + +HeroesQueriesComponent.annotations = [ + new Component({ + selector: 'heroes-queries', + template: ` + + + + + `, + queries: { + heroCmps: new ViewChildren(HeroComponent) + } + }) +]; +// #enddocregion view + +export class HeroesQueriesModule { } + +HeroesQueriesModule.annotations = [ + new NgModule({ + imports: [ BrowserModule ], + declarations: [ + HeroesQueriesComponent, + HeroComponent, + ActiveLabelComponent + ], + bootstrap: [ HeroesQueriesComponent ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 new file mode 100644 index 0000000000..92f5af5e1a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 @@ -0,0 +1,30 @@ +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import + +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport + +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/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json new file mode 100644 index 0000000000..391bd1a766 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:babel", + "run": "http-server:e2e" +} \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html new file mode 100644 index 0000000000..3a8a4e7960 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + +

TypeScript to JavaScript

+ Classes and Class Metadata
+ Input and Output Metadata
+ Dependency Injection
+ Host and Query Metadata
+ + +
+

Classes and Class Metadata

+ Loading hero-view... + Loading hero-lifecycle... + +
+

Input and Output Metadata

+ Loading hero-io... + +
+

Dependency Injection

+ Loading hero-di... + Loading hero-di-inject... + Loading hero-di-inject-additional... + +
+

Host and Query Metadata

+ Loading heroes-bindings... + Loading heroes-queries... + + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json new file mode 100644 index 0000000000..5c7a5acd44 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "TypeScript to JavaScript", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags":["cookbook"] +} 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 fa9684e7a1..64009317a9 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 @@ -9,10 +9,7 @@ '

{{ msg }}

' }).Class({ constructor: [ - [ - new ng.core.Optional(), - new ng.core.Inject('titlePrefix') - ], + [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], new ng.core.Attribute('title'), function(titlePrefix, title) { this.titlePrefix = titlePrefix; @@ -33,7 +30,7 @@ }).Class({ constructor: function() { } }); - + app.HeroesDIInjectAdditionalModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], 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 dfda83e1f0..743af3b987 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 @@ -25,7 +25,7 @@ .Class({ constructor: function() {} }); - + })(window.app = window.app || {}); (function(app) { @@ -35,11 +35,12 @@ template: '

Hero: {{name}}

' }) .Class({ - constructor: - [new ng.core.Inject('heroName'), - function(name) { - this.name = name; - }] + constructor: [ + new ng.core.Inject('heroName'), + function(name) { + this.name = name; + } + ] }); // #enddocregion ctor 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 1fe9c38cb1..e5ef79bc4b 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 @@ -5,11 +5,12 @@ template: '

Hero: {{name}}

' }) .Class({ - constructor: - [app.DataService, - function(service) { - this.name = service.getHeroName(); - }] + constructor: [ + app.DataService, + function(service) { + this.name = service.getHeroName(); + } + ] }); // #enddocregion 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 55c576b836..c4e7d6735e 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 @@ -6,9 +6,11 @@ function HeroComponent(dataService) { this.name = dataService.getHeroName(); } + HeroComponent.parameters = [ app.DataService ]; + HeroComponent.annotations = [ new ng.core.Component({ selector: 'hero-di', 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 5dd84733f3..a073138cff 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 @@ -5,8 +5,7 @@ // #docregion component var HeroComponent = ng.core.Component({ selector: 'hero-view-2', - template: - '

Name: {{getName()}}

', + template: '

Name: {{getName()}}

', }) .Class({ constructor: function() { 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 3e81c72e4e..1a2028d316 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 @@ -10,10 +10,9 @@ }) ]; // #docregion - HeroComponent.prototype.ngOnInit = - function() { - this.name = 'Windstorm'; - }; + HeroComponent.prototype.ngOnInit = function() { + this.name = 'Windstorm'; + }; // #enddocregion app.HeroesLifecycleModule = 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 c6a58acc56..745a450096 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 @@ -15,13 +15,12 @@ HeroComponent.annotations = [ new ng.core.Component({ selector: 'hero-view', - template: - '

Hero: {{getName()}}

' + template: '

Hero: {{getName()}}

' }) ]; // #docregion constructorproto - HeroComponent.prototype.getName = - function() {return 'Windstorm';}; + + HeroComponent.prototype.getName = function() {return 'Windstorm';}; // #enddocregion constructorproto // #enddocregion metadata 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 9091452599..015a8d2126 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 @@ -4,12 +4,9 @@ // #enddocregion appimport // #docregion ng2import - var platformBrowserDynamic = - ng.platformBrowserDynamic.platformBrowserDynamic; - var LocationStrategy = - ng.common.LocationStrategy; - var HashLocationStrategy = - ng.common.HashLocationStrategy; + var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; + var LocationStrategy = ng.common.LocationStrategy; + var HashLocationStrategy = ng.common.HashLocationStrategy; // #enddocregion ng2import // #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 146c6cbd83..d36b3eff19 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 @@ -19,12 +19,9 @@ import { BrowserModule } from '@angular/platform-browser'; class TitleComponent { private msg: string = ''; constructor( - @Inject('titlePrefix') - @Optional() - private titlePrefix: string, - @Attribute('title') - private title: string) { - } + @Inject('titlePrefix') @Optional() private titlePrefix: string, + @Attribute('title') private title: string + ) { } ok() { this.msg = 'OK!'; 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 7dc2bc84a2..eb2cb78971 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 @@ -7,10 +7,7 @@ import { BrowserModule } from '@angular/platform-browser'; template: `

Hero: {{name}}

` }) class HeroComponent { - constructor( - @Inject('heroName') - private name: string) { - } + constructor(@Inject('heroName') private name: string) { } } // #enddocregion 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 a20453ef0a..c1bb927219 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 @@ -8,6 +8,7 @@ import { DataService } from './data.service'; selector: 'hero-di', template: `

Hero: {{name}}

` }) + class HeroComponent { name: string; constructor(dataService: DataService) { 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 1181c71cc9..64bdc9e927 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 @@ -10,8 +10,7 @@ import { BrowserModule } from '@angular/platform-browser'; template: `

Hero: {{name}}

` }) // #docregion -class HeroComponent - implements OnInit { +class HeroComponent implements OnInit { name: string; ngOnInit() { this.name = 'Windstorm'; 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 407b8b0e29..0ce026a42f 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 @@ -9,14 +9,15 @@ import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ selector: 'heroes-bindings', - template: `

- Tour of Heroes -

` + template: ` +

+ Tour of Heroes +

+ ` }) class HeroesComponent { @HostBinding() title = 'Tooltip content'; - @HostBinding('class.heading') - hClass = true; + @HostBinding('class.heading') hClass = true; active: boolean; constructor() {} diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index a46ac1b718..5aeaa55c1f 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -27,7 +27,7 @@ "@angular/router": "~3.1.1", "@angular/upgrade": "~2.1.1", - "angular-in-memory-web-api": "~0.1.13", + "angular-in-memory-web-api": "~0.1.14", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rollup": "^0.36.0", @@ -51,6 +51,9 @@ "@types/selenium-webdriver": "^2.53.32", "angular2-template-loader": "^0.4.0", "awesome-typescript-loader": "^2.2.4", + "babel-cli": "^6.16.0", + "babel-preset-angular2": "^0.0.2", + "babel-preset-es2015": "^6.16.0", "canonical-path": "0.0.2", "concurrently": "^3.0.0", "css-loader": "^0.25.0", diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index a76d90bce7..1ed9ac2489 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/public/docs/js/latest/cookbook/ts-to-js.jade @@ -16,6 +16,8 @@ include ../../../../_includes/_util-fns :marked ## Table of contents + [From TS to ES6 to ES5](#from-ts) + [Modularity: imports and exports](#modularity) [Classes and Class Metadata](#class-metadata) @@ -24,90 +26,127 @@ include ../../../../_includes/_util-fns [Dependency Injection](#dependency-injection) - [Host and Query Metadata](#other-property-metadata) + [Host and Query Metadata](#host-query-metadata) **Run and compare the live TypeScript and JavaScript code shown in this cookbook.** +a(id="from-ts") +.l-main-section +:marked + ## From TS to ES6 to ES5 + + Since TypeScript is a superset of ES6 JavaScript, and ES6 itself is a superset of ES5, the + transformation of Typescript code all the way to ES5 javascript can be seen as "shedding" + features. + + When going from TypeScript to ES6 with decorators, we mostly remove + [type annotations](https://www.typescriptlang.org/docs/handbook/basic-types.html) + , such as `string` or `boolean`, and + [class property modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers) + such as `public` and `private`. + The exception is type annotations used for dependency injection, which can be kept. + + Going from ES6 with decorators to plain ES6 JavaScript we lose all + [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) + and the remaining type annotations. + We also lose class properties, which now have to be declared in the class constructor. + + Finally, in the transition from ES6 to ES5 JavaScript the main missing features are `import` + statements and `class` declarations. + + For ES6 transpilation we recommend using a similar setup as our TypeScript quickstart, + replacing TypeScript with [Babel](https://babeljs.io/) using the `es2015` preset. + To use decorators and annotations with Babel, install the + [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well. + a(id="modularity") .l-main-section :marked ## Importing and Exporting -- var top="vertical-align:top" -table(width="100%") - col(width="50%") - col(width="50%") - tr - th TypeScript - th ES5 JavaScript - tr(style=top) - td - :marked - ### Importing Angular Code + ### Importing Angular Code - In TypeScript code, Angular classes, functions, and other members - are imported with TypeScript `import` statements: + In TypeScript and ES6 JavaScript, Angular classes, functions, and other members are imported + with ES6 `import` statements. - +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." ) + In ES5 JavaScript code, when using [the Angular packages](../glossary.html#!#scoped-package), + we can access Angular code through the global `ng` object. In the nested members of this + object we'll find everything we would import from `@angular` in TypeScript: - td - :marked - ### Accessing Angular Code through the ng global ++makeTabs(` + cb-ts-to-js/ts/app/main.ts, + cb-ts-to-js/js-es6-decorators/app/main.es6, + cb-ts-to-js/js-es6/app/main.es6, + cb-ts-to-js/js/app/main.js + `,` + ng2import, + ng2import, + ng2import, + ng2import + `,` + Typescript, + ES6 JavaScript with decorators, + ES6 JavaScript, + ES5 JavaScript + `) - In JavaScript code, when using - [the Angular packages](../glossary.html#!#scoped-package), - we can access Angular code through the global `ng` object. In the - nested members of this object we'll find everything we would import - from `@angular` in TypeScript: +:marked + ### Importing and Exporting Application Code - +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." ) + Each file in an Angular TypeScript or ES6 JavaScript application constitutes a ES6 module. + When we want to make something from a module available to other modules, we `export` it. - tr(style=top) - td - :marked - ### Importing and Exporting Application Code + In an Angular ES5 JavaScript application, we load each file to the page using a ` - diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html new file mode 100644 index 0000000000..917bd1696f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html @@ -0,0 +1,6 @@ + + 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 d36b3eff19..37e00960c9 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 @@ -8,14 +8,13 @@ import { import { BrowserModule } from '@angular/platform-browser'; // #docregion +// #docregion metadata @Component({ + moduleId: module.id, selector: 'hero-title', - template: ` -

{{titlePrefix}} {{title}}

- -

{{ msg }}

- ` + templateUrl: 'title.component.html' }) +// #enddocregion metadata class TitleComponent { private msg: string = ''; constructor( 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 8cf430c000..8105d98919 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 @@ -9,15 +9,9 @@ import { BrowserModule } from '@angular/platform-browser'; // #docregion @Component({ + moduleId: module.id, selector: 'my-confirm', - template: ` - - - ` + templateUrl: 'confirm.component.html' }) class ConfirmComponent { @Input() okMsg: string; diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html new file mode 100644 index 0000000000..0e93122d5c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html @@ -0,0 +1,4 @@ + +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade index 966d1383fe..0c3ba61544 100644 --- a/public/docs/ts/latest/cookbook/ts-to-js.jade +++ b/public/docs/ts/latest/cookbook/ts-to-js.jade @@ -80,7 +80,7 @@ a#modularity In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements. - In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package), + In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package) through the global `ng` object. Everything you would have imported from `@angular` is a nested member of this `ng` object: @@ -102,23 +102,29 @@ a#modularity `) :marked - ### Importing and Exporting Application Code + ### Exporting Application Code Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module. When you want to make something available to other modules, you `export` it. _ES5_ lacks native support for modules. - In an Angular _ES5_ application, you load each file manually by adding a ` + - - tr - th - a( - target="_blank" - href="https://www.devoxx.be/" - ) Devoxx Belgium - td Antwerp, Belgium - td Nov. 7-11, 2016 - - tr th diff --git a/public/news.jade b/public/news.jade index 7e51afcd49..335a0c9a47 100644 --- a/public/news.jade +++ b/public/news.jade @@ -4,6 +4,19 @@ .clear .grid-fluid + .c6 + .article-card + .date Nov 2, 2016 + .title + a( + target="_blank" + href="http://angularjs.blogspot.ca/2016/11/easy-angular-authentication-with-json.html" + ) Easy Angular Authentication with JSON Web Tokens + p Stateless authentication is a great fit for Angular apps. In this post, guest-blogger Ryan Chenkie from Auth0 talks about implementing it using JSON Web Tokens.... + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by Ryan Chenkie + .c6 .article-card .date Oct 12, 2016 @@ -17,18 +30,6 @@ img(src="/resources/images/bios/stephenfluin.jpg") .posted Posted by Stephen Fluin - .c6 - .article-card - .date Oct 7, 2016 - .title - a( - target="_blank" - href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html" - ) Versioning and Releasing Angular - p In order for the ecosystem around Angular to thrive, developers need stability from the Angular framework so that reusable components and libraries, tools and learned practices don’t go obsolete unexpectedly... - .author - img(src="/resources/images/bios/igor-minar.jpg") - .posted Posted by Igor Minar .grid-fluid.l-space-bottom-2.l-space-top-4 .c12.text-center @@ -64,6 +65,18 @@ .grid-fluid + .c6 + .article-card + .date Oct 13, 2016 + .title + a( + target="_blank" + href="http://www.upway2late.com/#/blogs/angular2-cli-and-dot-net-core" + ) Using the Angular 2 CLI with .NET Core 1.0 and Visual Studio 2015 + p This web site was most recently written in Angular 2, when Angular 2 was still in beta. I have rewritten it now that Angular 2 is RTM, using Angular CLI Beta 15. The site now also uses .NET Core... + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by James Katic .c6 .article-card .date Oct 10, 2016 @@ -77,19 +90,6 @@ img(src="/resources/images/bios/shield-bio-placeholder.png") .posted Posted by Daniel Zen - .c6 - .article-card - .date Sept 30, 2016 - .title - a( - target="_blank" - href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite" - ) Using Angular CLI to create Angular 2 applications in Docker - p Angular CLI is a great tool for developing Angular 2 applications. I thought it would be fun to do a quick demo... - .author - img(src="/resources/images/bios/shield-bio-placeholder.png") - .posted Posted by Simeon Bateman - .grid-fluid.l-space-bottom-2.l-space-top-4 .c12.text-center From 02f55592b232618407a3a8fce70845589ee78978 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 04:29:17 -0800 Subject: [PATCH 055/125] docs: guide/index misc Jade fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Eliminate use of deprecated `clear=“all”` in `
`. - No need for local `langName`; use global `_Lang` var instead. - Remove duplicate id `learning-path`. --- public/docs/ts/latest/guide/index.jade | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index 6af522624c..3772e35799 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -1,16 +1,14 @@ block includes include ../_util-fns -- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript' figure - img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" ) + img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px") + :marked This is a practical guide to Angular for experienced programmers who - are building client applications in HTML and #{langName}. + are building client applications in HTML and #{_Lang}. +
-
- - :marked # Organization From 85062c47cac44d63b06b97ae86b2a4f596889ad6 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 04:56:12 -0800 Subject: [PATCH 056/125] chore(util.js): getExampleName - support optional .html suffix --- public/resources/js/util.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/resources/js/util.js b/public/resources/js/util.js index 87ddeed291..91cf6e5a01 100644 --- a/public/resources/js/util.js +++ b/public/resources/js/util.js @@ -77,7 +77,7 @@ var NgIoUtil = (function () { // TODO: use $location.path() instead(?). It seems to be empty. var loc = $location.absUrl(); // E.g., https://example.com/docs/dart/latest/guide/displaying-data.html - var matches = loc.match(/.*\/([\w\.\-]+)\.html/); + var matches = loc.match(/.*\/([\w\-]+)(\.html)?$/); if (matches) NgIoUtil.setExampleName(matches[1]); // cache name } return NgIoUtil._exampleName; From c12d75a477a1e33ea37886c0bd5942ddb9c955b3 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 05:23:35 -0800 Subject: [PATCH 057/125] remove redundant headings --- public/docs/dart/latest/tutorial/toh-pt1.jade | 2 -- public/docs/dart/latest/tutorial/toh-pt2.jade | 1 - public/docs/dart/latest/tutorial/toh-pt4.jade | 1 - public/docs/ts/latest/tutorial/_data.json | 1 + public/docs/ts/latest/tutorial/index.jade | 4 +--- public/docs/ts/latest/tutorial/toh-pt1.jade | 2 -- public/docs/ts/latest/tutorial/toh-pt2.jade | 1 - public/docs/ts/latest/tutorial/toh-pt4.jade | 1 - public/docs/ts/latest/tutorial/toh-pt5.jade | 2 -- public/docs/ts/latest/tutorial/toh-pt6.jade | 2 -- 10 files changed, 2 insertions(+), 15 deletions(-) diff --git a/public/docs/dart/latest/tutorial/toh-pt1.jade b/public/docs/dart/latest/tutorial/toh-pt1.jade index 218d35c788..9bdb15fa08 100644 --- a/public/docs/dart/latest/tutorial/toh-pt1.jade +++ b/public/docs/dart/latest/tutorial/toh-pt1.jade @@ -1,8 +1,6 @@ include ../_util-fns :marked - # Once Upon a Time - Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. :marked diff --git a/public/docs/dart/latest/tutorial/toh-pt2.jade b/public/docs/dart/latest/tutorial/toh-pt2.jade index 24e38e31b3..e5c78afdec 100644 --- a/public/docs/dart/latest/tutorial/toh-pt2.jade +++ b/public/docs/dart/latest/tutorial/toh-pt2.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # It Takes Many Heroes Our story needs more heroes. We’ll expand our Tour of Heroes app to display a list of heroes, allow the user to select a hero, and display the hero’s details. diff --git a/public/docs/dart/latest/tutorial/toh-pt4.jade b/public/docs/dart/latest/tutorial/toh-pt4.jade index cc417c159e..a9d5ca86e2 100644 --- a/public/docs/dart/latest/tutorial/toh-pt4.jade +++ b/public/docs/dart/latest/tutorial/toh-pt4.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # Services The Tour of Heroes is evolving and we anticipate adding more components in the near future. Multiple components will need access to hero data and we don't want to copy and diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json index ab92fcda11..52be9be40d 100644 --- a/public/docs/ts/latest/tutorial/_data.json +++ b/public/docs/ts/latest/tutorial/_data.json @@ -32,6 +32,7 @@ }, "toh-pt6": { "title": "HTTP", + "subtitle": "Getting and saving data", "intro": "We convert our service and components to use Angular's HTTP service", "nextable": true } diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade index 77770baa20..dae359159d 100644 --- a/public/docs/ts/latest/tutorial/index.jade +++ b/public/docs/ts/latest/tutorial/index.jade @@ -2,9 +2,7 @@ block includes include ../_util-fns :marked - # Tour of Heroes: the vision - - Our grand plan is to build an app to help a staffing agency manage its stable of heroes. + Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes. Even heroes need to find work. Of course we'll only make a little progress in this tutorial. What we do build will diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade index 288b0ab189..ea319d0c57 100644 --- a/public/docs/ts/latest/tutorial/toh-pt1.jade +++ b/public/docs/ts/latest/tutorial/toh-pt1.jade @@ -1,8 +1,6 @@ include ../_util-fns :marked - # Once Upon a Time - Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. Run the for this part. diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade index 3415530ca3..82941ed69b 100644 --- a/public/docs/ts/latest/tutorial/toh-pt2.jade +++ b/public/docs/ts/latest/tutorial/toh-pt2.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # It Takes Many Heroes Our story needs more heroes. We’ll expand our Tour of Heroes app to display a list of heroes, allow the user to select a hero, and display the hero’s details. diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 3cc1e28bcf..a5a3f494ad 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # Services The Tour of Heroes is evolving and we anticipate adding more components in the near future. Multiple components will need access to hero data and we don't want to copy and diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index d64c457f15..e237165347 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -9,8 +9,6 @@ block includes - var _redirectTo = 'redirectTo' :marked - # Routing Around the App - We received new requirements for our Tour of Heroes application: * Add a *Dashboard* view. diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index c662d3c9b0..b6bbf982a7 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -12,8 +12,6 @@ block includes - var _promise = _Promise.toLowerCase() :marked - # Getting and Saving Data - Our stakeholders appreciate our progress. Now they want to get the hero data from a server, let users add, edit, and delete heroes, and save these changes back to the server. From 470426d5e03829442449cb59c0528811c6011c37 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 05:25:36 -0800 Subject: [PATCH 058/125] update _cache --- public/docs/ts/_cache/tutorial/toh-pt5.jade | 2 -- public/docs/ts/_cache/tutorial/toh-pt6.jade | 21 ++++++++++++--------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade index d64c457f15..e237165347 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt5.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade @@ -9,8 +9,6 @@ block includes - var _redirectTo = 'redirectTo' :marked - # Routing Around the App - We received new requirements for our Tour of Heroes application: * Add a *Dashboard* view. diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade index 007e6e77f7..b6bbf982a7 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt6.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade @@ -12,8 +12,6 @@ block includes - var _promise = _Promise.toLowerCase() :marked - # Getting and Saving Data - Our stakeholders appreciate our progress. Now they want to get the hero data from a server, let users add, edit, and delete heroes, and save these changes back to the server. @@ -155,7 +153,7 @@ block get-heroes-details *Observables* are a powerful way to manage asynchronous data flows. We'll learn about [Observables](#observables) later in this chapter. - For *now* we get back on familiar ground by immediately by + For *now* we get back on familiar ground by immediately converting that `Observable` to a `Promise` using the `toPromise` operator. +makeExcerpt('app/hero.service.ts', 'to-promise', '') @@ -219,7 +217,7 @@ block get-heroes-details Although we made significant *internal* changes to `getHeroes()`, the public signature did not change. We still return a !{_Promise}. We won't have to update any of the components that call `getHeroes()`. - Our stakeholders are thrilled with the added flexibility from the API integration. + Our stakeholders are thrilled with the added flexibility from the API integration. Now they want the ability to create and delete heroes. Let's see first what happens when we try to update a hero's details. @@ -229,7 +227,7 @@ block get-heroes-details ## Update hero details We can edit a hero's name already in the hero detail view. Go ahead and try - it. As we type, the hero name is updated in the view heading. + it. As we type, the hero name is updated in the view heading. But when we hit the `Back` button, the changes are lost! .l-sub-section @@ -294,7 +292,11 @@ block get-heroes-details When the given name is non-blank, the handler delegates creation of the named hero to the hero service, and then adds the new hero to our !{_array}. - Go ahead, refresh the browser and create some new heroes! + Finally, we implement the `create` method in the `HeroService` class. ++makeExcerpt('app/hero.service.ts', 'create') + +:marked + Refresh the browser and create some new heroes! .l-main-section :marked @@ -344,6 +346,7 @@ block get-heroes-details :marked Refresh the browser and try the new delete functionality. +#observables :marked ## !{_Observable}s @@ -510,7 +513,7 @@ block observable-transformers - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations' - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts' :marked - Finally, we import `HeroSearchComponent` from + Finally, we import `HeroSearchComponent` from hero-search.component.ts and add it to the `!{_declarations}` !{_array}: @@ -532,7 +535,7 @@ figure.image-display block filetree .filetree - .file angular2-tour-of-heroes + .file angular-tour-of-heroes .children .file app .children @@ -577,7 +580,7 @@ block filetree - We configured an in-memory web API. - We learned how to use !{_Observable}s. - Here are the files we added or changed in this chapter. + Here are the files we _added or changed_ in this chapter. block file-summary +makeTabs( From 3b03573f340cc7fc43e2642bdf52fb1bae61aff0 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 05:30:05 -0800 Subject: [PATCH 059/125] misc: make block comment a Jade comment (This prevents the text from appearing in the generated HTML as an HTML comment.) --- public/docs/ts/latest/guide/template-syntax.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index ef9ab05371..d6ed35a8ce 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -401,7 +401,7 @@ table (element | component | directive) event, or (rarely) an attribute name. The following table summarizes: -// If you update this table, UPDATE it in Dart & JS, too. +//- If you update this table, UPDATE it in Dart & JS, too.
table tr @@ -813,7 +813,7 @@ block style-property-name-dart-diff including queries and saves to a remote server. These changes percolate through the system and are ultimately displayed in this and other views. -// +//- :marked ### Event bubbling and propagation [TODO: reinstate this section when it becomes true] Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements. From 5dcffd69dc09b48d99af4acd0dd06b029416e103 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Sun, 13 Nov 2016 19:37:13 -0800 Subject: [PATCH 060/125] docs: dart glossary - fix misnamed Jade block --- public/docs/dart/latest/guide/glossary.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/dart/latest/guide/glossary.jade b/public/docs/dart/latest/guide/glossary.jade index 1d2eb49664..ff49e787f0 100644 --- a/public/docs/dart/latest/guide/glossary.jade +++ b/public/docs/dart/latest/guide/glossary.jade @@ -1,4 +1,4 @@ extends ../glossary -block var-def +block includes include ../_util-fns From 9e9666b2cc3ce57cac172894e935f0c6b9f7d6f4 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Mon, 14 Nov 2016 08:34:10 -0800 Subject: [PATCH 061/125] docs(template-syntax/dart): updates to match TS (#2751) * docs(template-syntax): refresh _cache * docs(template-syntax/dart): updates to match TS - Propagates TS-side changes: - update #2639 - new two-way binding section, and - fix #2687 - invalid attr syntax - Fixes - #1898 - currency symbols - #2748 - Dart template-syntax e2e is failing - #2749 - deprecated `[className]` * updated _cache file following Kathy's post-review edits * Post Ward's review w/ cache updated - Keep `my-` and `my` prefixes on selectors (for components and directives, respectively). - Drop `my-` from file names. - Drop `My` as component class prefix. --- .../dart/lib/app_component.dart | 7 +- .../dart/lib/app_component.html | 31 ++- ...ck_directive.dart => click_directive.dart} | 12 +- .../dart/lib/sizer_component.dart | 30 +++ .../dart/latest/guide/template-syntax.jade | 10 - .../docs/ts/_cache/guide/template-syntax.jade | 199 +++++++++++------- 6 files changed, 187 insertions(+), 102 deletions(-) rename public/docs/_examples/template-syntax/dart/lib/{my_click_directive.dart => click_directive.dart} (81%) create mode 100644 public/docs/_examples/template-syntax/dart/lib/sizer_component.dart diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart index 6a3def5aa4..4be7533fcc 100644 --- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart @@ -7,7 +7,8 @@ import 'package:angular2/common.dart'; import 'hero.dart'; import 'hero_detail_component.dart'; -import 'my_click_directive.dart'; +import 'click_directive.dart'; +import 'sizer_component.dart'; enum Color { red, green, blue } @@ -18,7 +19,8 @@ enum Color { red, green, blue } HeroDetailComponent, BigHeroDetailComponent, MyClickDirective, - MyClickDirective2 + MyClickDirective2, + MySizerComponent ]) class AppComponent implements OnInit, AfterViewInit { @override @@ -165,6 +167,7 @@ class AppComponent implements OnInit, AfterViewInit { bool isItalic = false; bool isBold = false; String fontSize = 'large'; + String fontSizePx = '14'; Map setStyle() { return { diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html index 9fd72765ed..3255a02ff6 100644 --- a/public/docs/_examples/template-syntax/dart/lib/app_component.html +++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html @@ -14,7 +14,7 @@

Event Binding
- +Two-way Binding

Directives
@@ -242,9 +242,6 @@ button - - -
@@ -262,7 +259,7 @@ button
Bad curly
+ [class]="badCurly">Bad curly
@@ -309,9 +306,9 @@ button
- +
click with myClick
- + {{clickMessage}}
@@ -349,6 +346,24 @@ button

+top + +

Two-way Binding

+
+ + +
Resizable Text
+ + +
+
+
+

De-sugared two-way binding

+ + + +
+

top @@ -746,7 +761,7 @@ bindon-ngModel
- {{product['price'] | currency:'USD':false}} + {{product['price'] | currency:'USD':true}}
top diff --git a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart similarity index 81% rename from public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart rename to public/docs/_examples/template-syntax/dart/lib/click_directive.dart index 0980478f29..101b9eb5c6 100644 --- a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart +++ b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart @@ -5,11 +5,11 @@ import 'package:angular2/core.dart'; @Directive(selector: '[myClick]') class MyClickDirective { - // #docregion my-click-output-1 + // #docregion output-myClick // @Output(alias) [type info] propertyName = ... @Output('myClick') final EventEmitter clicks = new EventEmitter(); - // #enddocregion my-click-output-1 + // #enddocregion output-myClick bool _toggle = false; MyClickDirective(ElementRef el) { @@ -21,14 +21,14 @@ class MyClickDirective { } } -// #docregion my-click-output-2 +// #docregion output-myClick2 @Directive( -// #enddocregion my-click-output-2 +// #enddocregion output-myClick2 selector: '[myClick2]', -// #docregion my-click-output-2 +// #docregion output-myClick2 // ... outputs: const ['clicks:myClick']) // propertyName:alias -// #enddocregion my-click-output-2 +// #enddocregion output-myClick2 class MyClickDirective2 { final EventEmitter clicks = new EventEmitter(); bool _toggle = false; diff --git a/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart new file mode 100644 index 0000000000..84dbc1d9ff --- /dev/null +++ b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart @@ -0,0 +1,30 @@ +// #docregion +import 'dart:math'; +import 'package:angular2/core.dart'; + +@Component( + selector: 'my-sizer', + template: ''' +
+ + + +
''') +class MySizerComponent { + static final defaultPxSize = 14; + + @Input() + String size; + + @Output() + var sizeChange = new EventEmitter(); + + void dec() => resize(-1); + void inc() => resize(1); + + void resize(num delta) { + final numSize = num.parse(size, (_) => defaultPxSize); + size = min(40, max(8, numSize + delta)).toString(); + sizeChange.emit(size); + } +} diff --git a/public/docs/dart/latest/guide/template-syntax.jade b/public/docs/dart/latest/guide/template-syntax.jade index bee8fc97a7..fe62bd9084 100644 --- a/public/docs/dart/latest/guide/template-syntax.jade +++ b/public/docs/dart/latest/guide/template-syntax.jade @@ -48,16 +48,6 @@ block dart-type-exception-example In checked mode, the code above will result in a type exception: `String` isn't a subtype of `Hero`. -block dart-class-binding-bug - .callout.is-helpful - header Angular Issue #6901 - :marked - Issue [#6901][6901] prevents us from using `[class]`. As is illustrated - above, in the meantime we can achieve the same effect by binding to - `className`. - - [6901]: http://github.com/angular/angular/issues/6901 - block style-property-name-dart-diff .callout.is-helpful header Dart difference: Style property names diff --git a/public/docs/ts/_cache/guide/template-syntax.jade b/public/docs/ts/_cache/guide/template-syntax.jade index 165db573c3..ef9ab05371 100644 --- a/public/docs/ts/_cache/guide/template-syntax.jade +++ b/public/docs/ts/_cache/guide/template-syntax.jade @@ -21,6 +21,7 @@ block includes * [Property binding](#property-binding) * [Attribute, class, and style bindings](#other-bindings) * [Event binding](#event-binding) + * [Two-way data binding](#two-way) * [Two-way data binding with `NgModel`](#ngModel) * [Built-in directives](#directives) * [NgClass](#ngClass) @@ -44,7 +45,7 @@ block includes HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML: code-example(language="html" escape="html"). -

My First Angular 2 App

+

My First Angular App

:marked Almost all HTML syntax is valid template syntax. The ` + + + + + + + + + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts index 3164aade54..9fc7fea21f 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ts @@ -59,7 +59,7 @@ import { PhoneDetailComponent } from './phone-detail/phone-detail.component'; // #enddocregion phone { provide: '$routeParams', - useFactory: (i: any) => i.get('$routeParams'), + useFactory: routeParamsFactory, deps: ['$injector'] } // #docregion phone @@ -73,3 +73,9 @@ export class AppModule { // #docregion bare } // #enddocregion bare, upgrademodule, httpmodule, phone, phonelist, phonedetail, checkmarkpipe + +// #docregion routeparams +export function routeParamsFactory(i: any) { + return i.get('$routeParams'); +} +// #enddocregion routeparams diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts new file mode 100644 index 0000000000..6e25d85406 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts @@ -0,0 +1,11 @@ +// #docregion bootstrap +import { platformBrowser } from '@angular/platform-browser'; +import { UpgradeModule } from '@angular/upgrade/static'; + +import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; + +platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => { + let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + upgrade.bootstrap(document.documentElement, ['phonecatApp']); +}); +// #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts index 28259f093b..0fd102449a 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts @@ -1,5 +1,4 @@ // #docregion bootstrap -declare var angular: angular.IAngularStatic; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { UpgradeModule } from '@angular/upgrade/static'; diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts index 18668d17b5..98f05ca599 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts @@ -23,9 +23,7 @@ export class PhoneDetailComponent { phone: PhoneData; mainImageUrl: string; - constructor(@Inject('$routeParams') - $routeParams: angular.route.IRouteParamsService, - phone: Phone) { + constructor(@Inject('$routeParams') $routeParams: any, phone: Phone) { phone.get($routeParams['phoneId']).subscribe(phone => { this.phone = phone; this.setImage(phone.images[0]); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js new file mode 100644 index 0000000000..aeb227689c --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/rollup-config.js @@ -0,0 +1,21 @@ +// #docregion +import rollup from 'rollup' +import nodeResolve from 'rollup-plugin-node-resolve' +import commonjs from 'rollup-plugin-commonjs'; +import uglify from 'rollup-plugin-uglify' + +//paths are relative to the execution path +export default { + entry: 'app/main-aot.js', + dest: 'aot/dist/build.js', // output a single application bundle + sourceMap: true, + sourceMapFile: 'aot/dist/build.js.map', + format: 'iife', + plugins: [ + nodeResolve({jsnext: true, module: true}), + commonjs({ + include: ['node_modules/rxjs/**'] + }), + uglify() + ] +} diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json new file mode 100644 index 0000000000..97d6f592a0 --- /dev/null +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/tsconfig-aot.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true, + "typeRoots": [ + "../../node_modules/@types/" + ] + }, + + "files": [ + "app/app.module.ts", + "app/main-aot.ts" + ], + + "angularCompilerOptions": { + "genDir": "aot", + "skipMetadataEmit" : true + } +} From 53f5538859c4d243552d288872e8c8fc8156f446 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sun, 13 Nov 2016 14:09:28 -0800 Subject: [PATCH 063/125] docs(cb-ts-to-js): refactor sample code --- public/docs/_examples/cb-ts-to-js/e2e-spec.ts | 18 +- .../js-es6-decorators/app/app.component.es6 | 15 + .../js-es6-decorators/app/app.component.html | 31 ++ .../js-es6-decorators/app/app.module.es6 | 55 ++ .../app/confirm.component.es6 | 22 + .../js-es6-decorators/app/data.service.es6 | 4 +- .../hero-di-inject-additional.component.es6 | 48 +- .../app/hero-di-inject.component.es6 | 13 +- .../app/hero-di.component.es6 | 17 +- .../app/hero-host-meta.component.es6 | 44 ++ .../app/hero-host.component.es6 | 39 ++ .../app/hero-io.component.es6 | 61 +-- .../app/hero-lifecycle.component.es6 | 23 +- .../app/hero-queries.component.es6 | 81 +++ .../app/hero-title.component.es6 | 26 + .../app/hero-title.component.html} | 0 .../js-es6-decorators/app/hero.component.es6 | 19 +- .../app/heroes-bindings.component.es6 | 42 -- .../app/heroes-queries.component.es6 | 88 --- .../js-es6-decorators/app/main.es6 | 30 +- .../cb-ts-to-js/js-es6-decorators/index.html | 28 +- .../cb-ts-to-js/js-es6/app/app.component.es6 | 20 + .../cb-ts-to-js/js-es6/app/app.component.html | 30 ++ .../cb-ts-to-js/js-es6/app/app.module.es6 | 56 ++ .../js-es6/app/confirm.component.es6 | 32 ++ .../hero-di-inject-additional.component.es6 | 58 +- .../js-es6/app/hero-di-inject.component.es6 | 16 +- .../js-es6/app/hero-di.component.es6 | 17 +- .../js-es6/app/hero-host.component.es6 | 50 ++ .../js-es6/app/hero-io.component.es6 | 72 +-- .../js-es6/app/hero-lifecycle.component.es6 | 22 +- .../js-es6/app/hero-queries.component.es6 | 97 ++++ .../js-es6/app/hero-title.component.es6 | 29 + ...mponent.html => hero-title.component.html} | 1 + .../cb-ts-to-js/js-es6/app/hero.component.es6 | 21 +- .../js-es6/app/heroes-bindings.component.es6 | 48 -- .../js-es6/app/heroes-queries.component.es6 | 98 ---- .../_examples/cb-ts-to-js/js-es6/app/main.es6 | 30 +- .../_examples/cb-ts-to-js/js-es6/index.html | 29 +- .../cb-ts-to-js/js/app/app.component.html | 47 ++ .../cb-ts-to-js/js/app/app.component.js | 20 + .../cb-ts-to-js/js/app/app.module.js | 46 ++ .../cb-ts-to-js/js/app/confirm.component.js | 73 +++ .../cb-ts-to-js/js/app/data.service.js | 9 +- .../hero-di-inject-additional.component.js | 59 +- .../js/app/hero-di-inject.component.js | 83 ++- .../js/app/hero-di-inline.component.js | 28 - .../cb-ts-to-js/js/app/hero-di.component.js | 50 +- .../cb-ts-to-js/js/app/hero-dsl.component.js | 29 - .../cb-ts-to-js/js/app/hero-host.component.js | 97 ++++ .../js/app/hero-io-dsl.component.html | 7 + .../cb-ts-to-js/js/app/hero-io.component.html | 7 + .../cb-ts-to-js/js/app/hero-io.component.js | 94 ++-- .../js/app/hero-lifecycle.component.js | 60 ++- .../js/app/hero-queries.component.js | 92 ++++ ...mponent.html => hero-title.component.html} | 1 + .../js/app/hero-title.component.js | 60 +++ .../cb-ts-to-js/js/app/hero.component.js | 70 +-- .../js/app/heroes-bindings.component.js | 39 -- .../js/app/heroes-queries.component.js | 82 --- .../docs/_examples/cb-ts-to-js/js/app/main.js | 31 +- .../docs/_examples/cb-ts-to-js/js/index.html | 46 +- .../cb-ts-to-js/ts/app/app.component.html | 31 ++ .../cb-ts-to-js/ts/app/app.component.ts | 15 + .../cb-ts-to-js/ts/app/app.module.ts | 56 ++ .../cb-ts-to-js/ts/app/confirm.component.ts | 22 + .../cb-ts-to-js/ts/app/data.service.ts | 4 +- .../hero-di-inject-additional.component.ts | 45 +- .../ts/app/hero-di-inject.component.ts | 13 +- .../cb-ts-to-js/ts/app/hero-di.component.ts | 17 +- .../ts/app/hero-host-meta.component.ts | 44 ++ .../cb-ts-to-js/ts/app/hero-host.component.ts | 39 ++ .../cb-ts-to-js/ts/app/hero-io.component.ts | 61 +-- .../ts/app/hero-lifecycle.component.ts | 19 +- .../ts/app/hero-queries.component.ts | 83 +++ .../app/hero-title.component.html} | 1 + .../ts/app/hero-title.component.ts | 22 + .../cb-ts-to-js/ts/app/hero.component.ts | 19 +- .../ts/app/heroes-bindings.component.ts | 42 -- .../ts/app/heroes-queries.component.ts | 88 --- .../docs/_examples/cb-ts-to-js/ts/app/main.ts | 34 +- .../docs/_examples/cb-ts-to-js/ts/index.html | 28 +- public/docs/ts/latest/cookbook/ts-to-js.jade | 505 ++++++++++-------- 83 files changed, 1999 insertions(+), 1749 deletions(-) create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 rename public/docs/_examples/cb-ts-to-js/{ts/app/title.component.html => js-es6-decorators/app/hero-title.component.html} (100%) delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 rename public/docs/_examples/cb-ts-to-js/js-es6/app/{title.component.html => hero-title.component.html} (78%) delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 delete mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.module.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js rename public/docs/_examples/cb-ts-to-js/js/app/{title.component.html => hero-title.component.html} (78%) create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts rename public/docs/_examples/cb-ts-to-js/{js-es6-decorators/app/title.component.html => ts/app/hero-title.component.html} (78%) create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts index 5862beeebf..bc67bac8f0 100644 --- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts +++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by } from 'protractor'; @@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () { }); it('should display the basic component example', function () { - testTag('hero-view', 'Hero: Windstorm'); + testTag('hero-view', 'Hero Detail: Windstorm'); }); it('should display the component example with lifecycle methods', function () { @@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () { it('should support component with inputs and outputs', function () { let app = element(by.css('hero-io')); - let confirmComponent = app.element(by.css('my-confirm')); + let confirmComponent = app.element(by.css('app-confirm')); confirmComponent.element(by.buttonText('OK')).click(); expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true); @@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () { }); it('should support host bindings and host listeners', function() { - let app = element(by.css('heroes-bindings')); + let app = element(by.css('hero-host')); let h1 = app.element(by.css('h1')); expect(app.getAttribute('class')).toBe('heading'); - expect(app.getAttribute('title')).toBe('Tooltip content'); + expect(app.getAttribute('title')).toContain('Tooltip'); h1.click(); expect(h1.getAttribute('class')).toBe('active'); @@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () { }); it('should support content and view queries', function() { - let app = element(by.css('heroes-queries')); - let windstorm = app.element(by.css('a-hero:first-child')); + let app = element(by.css('hero-queries')); + let windstorm = app.element(by.css('view-child:first-child')); - app.element(by.buttonText('Activate')).click(); + app.element(by.css('button')).click(); expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active'); - expect(windstorm.element(by.css('active-label')).getText()).toBe('Active'); + expect(windstorm.element(by.css('content-child')).getText()).toBe('Active'); }); function testTag(selector: string, expectedText: string) { diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 new file mode 100644 index 0000000000..e5f158dbed --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] +}) +export class AppComponent { + title = 'ES6 JavaScript with Decorators'; +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html new file mode 100644 index 0000000000..7f1efd31a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html @@ -0,0 +1,31 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 new file mode 100644 index 0000000000..bea55777ef --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 @@ -0,0 +1,55 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroHostMetaComponent } from './hero-host-meta.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, HeroHostMetaComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging +}) +export class AppModule { } + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 new file mode 100644 index 0000000000..08a0ed6c60 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +// #docregion +@Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html' +}) +export class ConfirmComponent { + @Input() okMsg = ''; + @Input('cancelMsg') notOkMsg = ''; + @Output() ok = new EventEmitter(); + @Output('cancel') notOk = new EventEmitter(); + + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 index 7e9c7456c6..cd7f9e1aae 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; @Injectable() export class DataService { - constructor() { - } + constructor() { } + getHeroName() { return 'Windstorm'; } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 index 83e3dab59f..ec460a9dbc 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 @@ -1,49 +1,7 @@ -import { - Attribute, - Component, - Inject, - Optional, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'hero-title', - templateUrl: 'title.component.html' -}) -// #enddocregion metadata -class TitleComponent { - msg = ''; - constructor( - @Inject('titlePrefix') @Optional() titlePrefix, - @Attribute('title') title - ) { - this.titlePrefix = titlePrefix; - this.title = title; - } - - ok() { - this.msg = 'OK!'; - } -} -// #enddocregion +import { Component } from '@angular/core'; @Component({ selector: 'hero-di-inject-additional', - template: ` - ` + template: `` }) -class AppComponent { } - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] -}) -export class HeroesDIInjectAdditionalModule { } +export class HeroComponent { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 index 3a89867051..94b42f956a 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 @@ -1,22 +1,13 @@ -import { Component, Inject, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component, Inject } from '@angular/core'; // #docregion @Component({ selector: 'hero-di-inject', template: `

Hero: {{name}}

` }) -class HeroComponent { +export class HeroComponent { constructor(@Inject('heroName') name) { this.name = name; } } // #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/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 index e8341509a0..0cc78d277e 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 @@ -1,6 +1,4 @@ -import { Component, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - +import { Component } from '@angular/core'; import { DataService } from './data.service'; // #docregion @@ -8,19 +6,10 @@ import { DataService } from './data.service'; selector: 'hero-di', template: `

Hero: {{name}}

` }) - -class HeroComponent { - name; +export class HeroComponent { + name = ''; 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/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 new file mode 100644 index 0000000000..25dbe1c21a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +

Hero Host in Metadata

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + + // HostListeners on the entire element + '(click)': 'clicked()', + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +export class HeroHostMetaComponent { + title = 'Hero Host in Metadata Tooltip'; + headingClass = true; + + active = false; + clicks = 0; + + clicked() { + this.clicks += 1; + } + + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 new file mode 100644 index 0000000000..e8d72233c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 @@ -0,0 +1,39 @@ +import { Component, HostBinding, HostListener } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host', + template: ` +

Hero Host in Decorators

+
Heading clicks: {{clicks}}
+ `, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] +}) +export class HeroHostComponent { + // HostBindings to the element + @HostBinding() title = 'Hero Host in Decorators Tooltip'; + @HostBinding('class.heading') headingClass = true; + + active = false; + clicks = 0; + + // HostListeners on the entire element + @HostListener('click') + clicked() { + this.clicks += 1; + } + + @HostListener('mouseenter', ['$event']) + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + @HostListener('mouseleave', ['$event']) + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 index dddbb34733..4b36411e78 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 @@ -1,67 +1,26 @@ -import { - Component, - EventEmitter, - Input, - Output, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - moduleId: module.id, - selector: 'my-confirm', - templateUrl: 'confirm.component.html' -}) -class ConfirmComponent { - @Input() okMsg; - @Input('cancelMsg') notOkMsg; - @Output() ok = - new EventEmitter(); - @Output('cancel') notOk = - new EventEmitter(); - - onOkClick() { - this.ok.next(true); - } - onNotOkClick() { - this.notOk.next(true); - } -} -// #enddocregion - +import { Component } from '@angular/core'; @Component({ selector: 'hero-io', template: ` - - + + OK clicked Cancel clicked ` }) -class AppComponent { - okClicked; - cancelClicked; +export class HeroIOComponent { + okClicked = false; + cancelClicked = false; onOk() { this.okClicked = true; } + onCancel() { this.cancelClicked = true; } } - - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - ConfirmComponent - ], - bootstrap: [ AppComponent ] -}) -export class HeroesIOModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 index 6a935731b5..2539266597 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 @@ -1,27 +1,14 @@ -// #docplaster // #docregion -import { Component, OnInit } from '@angular/core'; -// #enddocregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component } from '@angular/core'; @Component({ selector: 'hero-lifecycle', template: `

Hero: {{name}}

` }) -// #docregion -class HeroComponent{ - name; +export class HeroComponent { + name = ''; ngOnInit() { - this.name = 'Windstorm'; + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); } } -// #enddocregion - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] -}) -export class HeroesLifecycleModule { } - diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 new file mode 100644 index 0000000000..fced43d4d7 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 @@ -0,0 +1,81 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = true; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'] +}) +export class ViewChildComponent { + @Input() hero; + active = false; + + @ContentChild(ContentChildComponent) content; + + activate() { + this.active = !this.active; + this.content.activate(); + } +} +// #enddocregion content + +//////////////////// + +// #docregion view +@Component({ + selector: 'hero-queries', + template: ` + + + + + ` +}) +export class HeroQueriesComponent { + active = false; + heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + + @ViewChildren(ViewChildComponent) views; + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } +} +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 new file mode 100644 index 0000000000..25460d34f7 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 @@ -0,0 +1,26 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +// #docregion templateUrl +@Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' +}) +// #enddocregion templateUrl +export class HeroTitleComponent { + msg = ''; + constructor( + @Inject('titlePrefix') @Optional() titlePrefix, + @Attribute('title') title + ) { + this.titlePrefix = titlePrefix; + this.title = title; + } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion + diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html similarity index 100% rename from public/docs/_examples/cb-ts-to-js/ts/app/title.component.html rename to public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 index 83dc6d409d..4ea4c11611 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 @@ -1,4 +1,3 @@ -// #docplaster // #docregion metadata import { Component } from '@angular/core'; @@ -6,24 +5,10 @@ import { Component } from '@angular/core'; selector: 'hero-view', template: '

{{title}}: {{getName()}}

' }) -// #docregion appexport -// #docregion class +// #docregion appexport, class export class HeroComponent { title = 'Hero Detail'; getName() {return 'Windstorm'; } } -// #enddocregion class -// #enddocregion appexport +// #enddocregion appexport, class // #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/js-es6-decorators/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 deleted file mode 100644 index ef959eabbb..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6 +++ /dev/null @@ -1,42 +0,0 @@ -import { - Component, - HostBinding, - HostListener, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - selector: 'heroes-bindings', - template: ` -

- Tour of Heroes -

- ` -}) -class HeroesComponent { - @HostBinding() title = 'Tooltip content'; - @HostBinding('class.heading') hClass = true; - active; - - constructor() {} - - @HostListener('click') - clicked() { - this.active = !this.active; - } - - @HostListener('dblclick', ['$event']) - doubleClicked(evt) { - this.active = true; - } -} -// #enddocregion - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroesComponent ], - bootstrap: [ HeroesComponent ] -}) -export class HeroesHostBindingsModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 deleted file mode 100644 index bc55ccef24..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6 +++ /dev/null @@ -1,88 +0,0 @@ -import { - Component, - ViewChildren, - ContentChild, - QueryList, - Input, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -@Component({ - selector: 'active-label', - template: ` - Active - ` -}) -class ActiveLabelComponent { - active; - - activate() { - this.active = true; - } -} - -// #docregion content -@Component({ - selector: 'a-hero', - template: `

- {{hero.name}} - -

` -}) -class HeroComponent { - @Input() hero; - active; - - @ContentChild(ActiveLabelComponent) - label; - - activate() { - this.active = true; - this.label.activate(); - } -} -// #enddocregion content - - -// #docregion view -@Component({ - selector: 'heroes-queries', - template: ` - - - - - ` -}) -class HeroesQueriesComponent { - heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - - @ViewChildren(HeroComponent) - heroCmps; - - activate() { - this.heroCmps.forEach( - (cmp) => cmp.activate() - ); - } -} -// #enddocregion view - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - HeroesQueriesComponent, - HeroComponent, - ActiveLabelComponent - ], - bootstrap: [ HeroesQueriesComponent ] -}) -export class HeroesQueriesModule { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 index 92f5af5e1a..2470c9595e 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 @@ -1,30 +1,4 @@ -/* tslint:disable no-unused-variable */ -// #docregion ng2import import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import +import { AppModule } from './app.module'; -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport - -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); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html index 005fe67c31..1b9e3b5211 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html @@ -5,6 +5,7 @@ + TypeScript to JavaScript @@ -20,32 +21,7 @@ - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 new file mode 100644 index 0000000000..9615b98a1f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; + +export class AppComponent { + constructor() { + this.title = 'Plain ES6 JavaScript'; + } +} + +AppComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html new file mode 100644 index 0000000000..8fbe65ade6 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html @@ -0,0 +1,30 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 new file mode 100644 index 0000000000..e8c7a8f9c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 @@ -0,0 +1,56 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; + +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +export class AppModule { } + +AppModule.annotations = [ + new NgModule({ + imports: [ BrowserModule], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging + }) +] + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 new file mode 100644 index 0000000000..d42a553688 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 @@ -0,0 +1,32 @@ +import { Component, EventEmitter } from '@angular/core'; + +// #docregion +export class ConfirmComponent { + constructor(){ + this.ok = new EventEmitter(); + this.notOk = new EventEmitter(); + } + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} + +ConfirmComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) +]; +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 index 398e38d352..5eb9bab815 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 @@ -1,60 +1,10 @@ -import { - Attribute, - Component, - Inject, - Optional, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component } from '@angular/core'; -// #docregion -class TitleComponent { - constructor(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } +export class HeroComponent { } - ok() { - this.msg = 'OK!'; - } -} - -// #docregion metadata -TitleComponent.annotations = [ - new Component({ - moduleId: module.id, - selector: 'hero-title', - templateUrl: 'title.component.html' - }) -]; -// #enddocregion metadata - -TitleComponent.parameters = [ - [new Optional(), new Inject('titlePrefix')], - [new Attribute('title')] -]; -// #enddocregion - -class AppComponent { -} -AppComponent.annotations = [ +HeroComponent.annotations = [ new Component({ selector: 'hero-di-inject-additional', - template: ` - ` - }) -]; - -export class HeroesDIInjectAdditionalModule { } - -HeroesDIInjectAdditionalModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] + template: `` }) ]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 index cc8df60abc..2f95a0b981 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 @@ -1,8 +1,7 @@ -import { Component, Inject, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component, Inject } from '@angular/core'; // #docregion -class HeroComponent { +export class HeroComponent { constructor(name) { this.name = name; } @@ -19,14 +18,3 @@ HeroComponent.parameters = [ [new Inject('heroName')] ]; // #enddocregion - -export class HeroesDIInjectModule { } - -HeroesDIInjectModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - providers: [ { provide: 'heroName', useValue: 'Windstorm' } ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) -]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 index bb569e6e2b..dfbecf0707 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 @@ -1,10 +1,8 @@ -import { Component, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - +import { Component } from '@angular/core'; import { DataService } from './data.service'; // #docregion -class HeroComponent { +export class HeroComponent { constructor(dataService) { this.name = dataService.getHeroName(); } @@ -22,14 +20,3 @@ HeroComponent.parameters = [ ]; // #enddocregion - -export class HeroesDIModule { } - -HeroesDIModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - providers: [ DataService ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) -]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 new file mode 100644 index 0000000000..092cd1a1ce --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; + +// #docregion +export class HeroHostComponent { + constructor() { + this.active = false; + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip'; + } + + clicked() { + this.clicks += 1; + } + + enter(event) { + this.active = true; + this.headingClass = false; + } + + leave(event) { + this.active = false; + this.headingClass = true; + } +} + +// #docregion metadata +HeroHostComponent.annotations = [ + new Component({ + selector: 'hero-host', + template: ` +

Hero Host

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] + }) +]; +// #docregion metadata +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 index 3ed92792db..0dc8c08f2d 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 @@ -1,79 +1,31 @@ -import { - Component, - EventEmitter, - Input, - Output, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component } from '@angular/core'; -// #docregion -class ConfirmComponent { - constructor(){ - this.ok = new EventEmitter(); - this.notOk = new EventEmitter(); +export class HeroIOComponent { + constructor() { + this.okClicked = false; + this.cancelClicked = false; } - onOkClick() { - this.ok.next(true); - } - onNotOkClick() { - this.notOk.next(true); - } -} -ConfirmComponent.annotations = [ - new Component({ - moduleId: module.id, - selector: 'my-confirm', - templateUrl: 'confirm.component.html', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ] - }) -]; -// #enddocregion - -class AppComponent { - constructor(){ - } onOk() { this.okClicked = true; } + onCancel() { this.cancelClicked = true; } } -AppComponent.annotations = [ +HeroIOComponent.annotations = [ new Component({ selector: 'hero-io', template: ` - - + + OK clicked Cancel clicked ` }) ]; - - -export class HeroesIOModule { } - -HeroesIOModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - ConfirmComponent - ], - bootstrap: [ AppComponent ] - }) -]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 index 8a9c6c6c4e..b394ff59aa 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 @@ -1,17 +1,11 @@ -// #docplaster // #docregion import { Component } from '@angular/core'; -// #enddocregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -class HeroComponent { +export class HeroComponent { ngOnInit() { - this.name = 'Windstorm'; + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); } } -// #enddocregion HeroComponent.annotations = [ new Component({ @@ -19,13 +13,3 @@ HeroComponent.annotations = [ template: `

Hero: {{name}}

` }) ]; - -export class HeroesLifecycleModule { } - -HeroesLifecycleModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) -]; \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 new file mode 100644 index 0000000000..bf3b914406 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 @@ -0,0 +1,97 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +export class ContentChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + } +} + +ContentChildComponent.annotations = [ + new Component({ + selector: 'content-child', + template: ` + + Active + ` + }) +]; + +//////////////////// + +// #docregion content +export class ViewChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + this.content.activate(); + } +} + +ViewChildComponent.annotations = [ + new Component({ + selector: 'view-child', + template: `

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'], + inputs: ['hero'], + queries: { + content: new ContentChild(ContentChildComponent) + } + }) +]; +// #enddocregion content + +//////////////////// + +// #docregion view +export class HeroQueriesComponent { + constructor(){ + this.active = false; + this.heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + } + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } +} + +HeroQueriesComponent.annotations = [ + new Component({ + selector: 'hero-queries', + template: ` + + + + + `, + queries: { + views: new ViewChildren(ViewChildComponent) + } + }) +]; +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 new file mode 100644 index 0000000000..ff1e6ce026 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 @@ -0,0 +1,29 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +export class HeroTitleComponent { + constructor(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + + ok() { + this.msg = 'OK!'; + } +} + +// #docregion templateUrl +HeroTitleComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' + }) +]; +// #enddocregion templateUrl + +HeroTitleComponent.parameters = [ + [new Optional(), new Inject('titlePrefix')], + [new Attribute('title')] +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html similarity index 78% rename from public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html rename to public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html index 06d6f3db91..0e93122d5c 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/title.component.html +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html @@ -1,3 +1,4 @@ +

{{titlePrefix}} {{title}}

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 index c998d31a6f..10b92c2878 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 @@ -2,16 +2,14 @@ // #docregion metadata import { Component } from '@angular/core'; -// #docregion class -// #docregion appexport +// #docregion appexport, class export class HeroComponent { constructor() { this.title = 'Hero Detail'; } getName() {return 'Windstorm'; } } -// #enddocregion appexport -// #enddocregion class +// #enddocregion appexport, class HeroComponent.annotations = [ new Component({ @@ -20,18 +18,3 @@ HeroComponent.annotations = [ }) ]; // #enddocregion metadata - -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -export class HeroesModule { } - -HeroesModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) -]; - - diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 deleted file mode 100644 index 5c13e586a6..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-bindings.component.es6 +++ /dev/null @@ -1,48 +0,0 @@ -import { - Component, - HostBinding, - HostListener, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -class HeroesComponent { - constructor() { - this.title = 'Tooltip content'; - this.hClass = true; - } - - clicked() { - this.active = !this.active; - } - - doubleClicked(evt) { - this.active = true; - } -} -HeroesComponent.annotations = [ - new Component({ - selector: 'heroes-bindings', - template: `

- Tour of Heroes -

`, - host: { - '[title]': 'title', - '[class.heading]': 'hClass', - '(click)': 'clicked()', - '(dblclick)': 'doubleClicked($event)' - } - }) -]; -// #enddocregion - -export class HeroesHostBindingsModule { } - -HeroesHostBindingsModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroesComponent ], - bootstrap: [ HeroesComponent ] - }) -]; \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 deleted file mode 100644 index 4cec0c3bbd..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/heroes-queries.component.es6 +++ /dev/null @@ -1,98 +0,0 @@ -import { - Component, - ViewChildren, - ContentChild, - QueryList, - Input, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -class ActiveLabelComponent { - activate() { - this.active = true; - } -} - -ActiveLabelComponent.annotations = [ - new Component({ - selector: 'active-label', - template: ` - - Active - ` - }) -]; - -// #docregion content -class HeroComponent { - activate() { - this.active = true; - this.label.activate(); - } -} - -HeroComponent.annotations = [ - new Component({ - selector: 'a-hero', - template: `

- {{hero.name}} - -

`, - inputs: ['hero'], - queries: { - label: new ContentChild(ActiveLabelComponent) - } - }) -]; -// #enddocregion content - - -// #docregion view -class HeroesQueriesComponent { - constructor(){ - this.heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - } - - activate() { - this.heroCmps.forEach( - (cmp) => cmp.activate() - ); - } -} - -HeroesQueriesComponent.annotations = [ - new Component({ - selector: 'heroes-queries', - template: ` - - - - - `, - queries: { - heroCmps: new ViewChildren(HeroComponent) - } - }) -]; -// #enddocregion view - -export class HeroesQueriesModule { } - -HeroesQueriesModule.annotations = [ - new NgModule({ - imports: [ BrowserModule ], - declarations: [ - HeroesQueriesComponent, - HeroComponent, - ActiveLabelComponent - ], - bootstrap: [ HeroesQueriesComponent ] - }) -]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 index 92f5af5e1a..2470c9595e 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 @@ -1,30 +1,4 @@ -/* tslint:disable no-unused-variable */ -// #docregion ng2import import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import +import { AppModule } from './app.module'; -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport - -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); +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html index 3a8a4e7960..1b9e3b5211 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6/index.html +++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html @@ -5,6 +5,7 @@ + TypeScript to JavaScript @@ -20,33 +21,7 @@ - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- - -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html new file mode 100644 index 0000000000..6681d60672 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html @@ -0,0 +1,47 @@ + +

{{title}}

+Classes and Class Metadata
+Interfaces
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ +

Classes and Class Metadata (DSL)

+ + +
+

Interfaces

+ +

Interfaces (DSL)

+ + +
+

Input and Output Metadata

+ +

Input and Output Metadata (DSL)

+ + +
+

Dependency Injection

+ + + + +

Dependency Injection (DSL)

+ + + + +
+

Host Metadata

+ +

Host Metadata (DSL)

+ + +
+

View and Child Metadata (DSL)

+ diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js new file mode 100644 index 0000000000..9e8c5da535 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js @@ -0,0 +1,20 @@ +(function(app) { + +app.AppComponent = AppComponent; +function AppComponent() { + this.title = 'ES5 JavaScript'; +} + +AppComponent.annotations = [ + new ng.core.Component({ + selector: 'my-app', + templateUrl: 'app/app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] + }) +]; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js new file mode 100644 index 0000000000..3791fe16da --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js @@ -0,0 +1,46 @@ +(function(app) { + +app.AppModule = AppModule; +function AppModule() { } + +AppModule.annotations = [ + new ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ + app.AppComponent, + app.ConfirmComponent, app.ConfirmDslComponent, + app.HeroComponent, app.HeroDslComponent, + app.HeroDIComponent, app.HeroDIDslComponent, + app.HeroDIInjectComponent, app.HeroDIInjectDslComponent, + app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent, + app.HeroHostComponent, app.HeroHostDslComponent, + app.HeroIOComponent, app.HeroIODslComponent, + app.HeroLifecycleComponent, app.HeroLifecycleDslComponent, + app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent, + app.HeroTitleComponent, app.HeroTitleDslComponent + ], + providers: [ + app.DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ app.AppComponent ], + + // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging! + }) +] + +})(window.app = window.app || {}); + + +///// For documentation only ///// +(function () { + // #docregion appimport + var HeroComponent = app.HeroComponent; + // #enddocregion appimport + + // #docregion ng2import + var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; + var LocationStrategy = ng.common.LocationStrategy; + var HashLocationStrategy = ng.common.HashLocationStrategy; + // #enddocregion ng2import +}) diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js new file mode 100644 index 0000000000..4a4cd0a470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js @@ -0,0 +1,73 @@ +(function(app) { + +// #docregion +app.ConfirmComponent = ConfirmComponent; + +ConfirmComponent.annotations = [ + new ng.core.Component({ + selector: 'app-confirm', + templateUrl: 'app/confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) +]; + +function ConfirmComponent() { + this.ok = new ng.core.EventEmitter(); + this.notOk = new ng.core.EventEmitter(); +} + +ConfirmComponent.prototype.onOkClick = function() { + this.ok.emit(true); +} + +ConfirmComponent.prototype.onNotOkClick = function() { + this.notOk.emit(true); +} + + +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //////// + +(function(app) { + +// #docregion dsl +app.ConfirmDslComponent = ng.core.Component({ + selector: 'app-confirm-dsl', + templateUrl: 'app/confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) + .Class({ + constructor: function ConfirmDslComponent() { + this.ok = new ng.core.EventEmitter(); + this.notOk = new ng.core.EventEmitter(); + }, + + onOkClick: function() { + this.ok.emit(true); + }, + + onNotOkClick: function() { + this.notOk.emit(true); + } + }); + +// #enddocregion dsl + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js index c060e2b39d..643bb57dca 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js @@ -1,13 +1,10 @@ (function(app) { - function DataService() { - } - DataService.annotations = [ - new ng.core.Injectable() - ]; + app.DataService = DataService; + function DataService() { } + DataService.prototype.getHeroName = function() { return 'Windstorm'; }; - app.DataService = DataService; })(window.app = window.app || {}); 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 127bf524a8..1a88cfa355 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 @@ -1,47 +1,26 @@ (function(app) { - // #docregion - // #docregion metadata - var TitleComponent = ng.core.Component({ - selector: 'hero-title', - templateUrl: 'app/title.component.html' - }) - // #enddocregion metadata - .Class({ - constructor: [ - [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], - new ng.core.Attribute('title'), - function(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } - ], - ok: function() { - this.msg = 'OK!'; - } - }); - // #enddocregion +app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent; - var AppComponent = ng.core.Component({ +HeroDIInjectAdditionalComponent.annotations = [ + new ng.core.Component({ selector: 'hero-di-inject-additional', - template: '' + - '' - }).Class({ - constructor: function() { } - }); + template: '' + }) +]; - app.HeroesDIInjectAdditionalModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] - }) - .Class({ - constructor: function() {} - }); +function HeroDIInjectAdditionalComponent() {} + +})(window.app = window.app || {}); + +////// DSL Version ///////// +(function(app) { + +app.HeroDIInjectAdditionalDslComponent = ng.core.Component({ + selector: 'hero-di-inject-additional-dsl', + template: '' +}).Class({ + constructor: function HeroDIInjectAdditionalDslComponent() { } +}); })(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 743af3b987..2e04c9246e 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 @@ -1,58 +1,41 @@ (function(app) { -// #docregion parameters - function HeroComponent(name) { - this.name = name; - } - HeroComponent.parameters = [ - 'heroName' - ]; - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-di-inject', - template: '

Hero: {{name}}

' - }) - ]; -// #enddocregion parameters +// #docregion +app.HeroDIInjectComponent = HeroDIInjectComponent; - 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 || {}); - -(function(app) { -// #docregion ctor - var HeroComponent = ng.core.Component({ - selector: 'hero-di-inline2', +HeroDIInjectComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-di-inject', template: '

Hero: {{name}}

' }) - .Class({ - constructor: [ - new ng.core.Inject('heroName'), - function(name) { - this.name = name; - } - ] - }); -// #enddocregion ctor +]; - app.HeroesDIInjectModule2 = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - providers: [ { provide: 'heroName', useValue: 'Bombasto' } ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +HeroDIInjectComponent.parameters = [ 'heroName' ]; + +function HeroDIInjectComponent(name) { + this.name = name; +} +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //////// + +(function(app) { + +// #docregion dsl +app.HeroDIInjectDslComponent = ng.core.Component({ + selector: 'hero-di-inject-dsl', + template: '

Hero: {{name}}

' +}) +.Class({ + constructor: [ + new ng.core.Inject('heroName'), + function HeroDIInjectDslComponent(name) { + this.name = name; + } + ] +}); +// #enddocregion dsl })(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 deleted file mode 100644 index e5ef79bc4b..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js +++ /dev/null @@ -1,28 +0,0 @@ -(function(app) { - // #docregion - var HeroComponent = ng.core.Component({ - selector: 'hero-di-inline', - template: '

Hero: {{name}}

' - }) - .Class({ - constructor: [ - app.DataService, - function(service) { - this.name = service.getHeroName(); - } - ] - }); - // #enddocregion - - 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 c4e7d6735e..c80efe193e 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 @@ -1,33 +1,43 @@ (function(app) { // #docregion - app.HeroDIComponent = HeroComponent; - - function HeroComponent(dataService) { - this.name = dataService.getHeroName(); - } - - HeroComponent.parameters = [ - app.DataService - ]; + app.HeroDIComponent = HeroDIComponent; - HeroComponent.annotations = [ + HeroDIComponent.annotations = [ new ng.core.Component({ selector: 'hero-di', template: '

Hero: {{name}}

' }) ]; + + HeroDIComponent.parameters = [ app.DataService ]; + + function HeroDIComponent(dataService) { + this.name = dataService.getHeroName(); + } + // #enddocregion - app.HeroesDIModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - providers: [ app.DataService ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); + +})(window.app = window.app || {}); + +////// DSL Version ///// + +(function(app) { + +// #docregion dsl +app.HeroDIDslComponent = ng.core.Component({ + selector: 'hero-di-dsl', + template: '

Hero: {{name}}

' +}) +.Class({ + constructor: [ + app.DataService, + function HeroDIDslComponent(service) { + this.name = service.getHeroName(); + } + ] +}); +// #enddocregion dsl })(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 deleted file mode 100644 index 6d53bc2850..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js +++ /dev/null @@ -1,29 +0,0 @@ -// #docplaster -// #docregion appexport -(function(app) { - - // #docregion component - var HeroComponent = ng.core.Component({ - selector: 'hero-view-2', - template: '

{{title}}: {{getName()}}

', - }) - .Class({ - constructor: function() { - this.title = "Hero Detail"; - }, - getName: function() { return 'Windstorm'; } - }); - // #enddocregion component - - 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-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js new file mode 100644 index 0000000000..0b04d5efae --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js @@ -0,0 +1,97 @@ +(function(app) { + +// #docregion +app.HeroHostComponent = HeroHostComponent; + +HeroHostComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-host', + template: + '

Hero Host

' + + '
Heading clicks: {{clicks}}
', + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] + }) +]; + +function HeroHostComponent() { + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip content'; +} + +HeroHostComponent.prototype.clicked = function() { + this.clicks += 1; +} + +HeroHostComponent.prototype.enter = function(event) { + this.active = true; + this.headingClass = false; +} + +HeroHostComponent.prototype.leave = function(event) { + this.active = false; + this.headingClass = true; +} +// #enddocregion + +})(window.app = window.app || {}); + +//// DSL Version //// + +(function(app) { + +// #docregion dsl +app.HeroHostDslComponent = ng.core.Component({ + selector: 'hero-host-dsl', + template: ` +

Hero Host (DSL)

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +.Class({ + constructor: function HeroHostDslComponent() { + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip DSL content'; + }, + + clicked() { + this.clicks += 1; + }, + + enter(event) { + this.active = true; + this.headingClass = false; + }, + + leave(event) { + this.active = false; + this.headingClass = true; + } +}); +// #enddocregion dsl + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html new file mode 100644 index 0000000000..48c491be35 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html @@ -0,0 +1,7 @@ + + +OK clicked +Cancel clicked diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html new file mode 100644 index 0000000000..e6eae2e804 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html @@ -0,0 +1,7 @@ + + +OK clicked +Cancel clicked 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 611d3b842b..d35f3762da 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 @@ -1,62 +1,42 @@ (function(app) { - // #docregion - var ConfirmComponent = ng.core.Component({ - selector: 'my-confirm', - templateUrl: 'app/confirm.component.html', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ] - }).Class({ - constructor: function() { - this.ok = new ng.core.EventEmitter(); - this.notOk = new ng.core.EventEmitter(); - }, - onOkClick: function() { - this.ok.next(true); - }, - onNotOkClick: function() { - this.notOk.next(true); - } - }); - // #enddocregion - function AppComponent() { - } - AppComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-io', - template: '' + - '' + - 'OK clicked' + - 'Cancel clicked' - }) - ]; - AppComponent.prototype.onOk = function() { - this.okClicked = true; - } - AppComponent.prototype.onCancel = function() { - this.cancelClicked = true; - } +app.HeroIOComponent = HeroComponent; - app.HeroesIOModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ - AppComponent, - ConfirmComponent - ], - bootstrap: [ AppComponent ] - }) - .Class({ - constructor: function() {} - }); +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-io', + templateUrl: 'app/hero-io.component.html' + }) +]; + +function HeroComponent() { } + +HeroComponent.prototype.onOk = function() { + this.okClicked = true; +} + +HeroComponent.prototype.onCancel = function() { + this.cancelClicked = true; +} + +})(window.app = window.app || {}); + +///// DSL Version //// + +(function(app) { + +app.HeroIODslComponent = ng.core.Component({ + selector: 'hero-io-dsl', + templateUrl: 'app/hero-io-dsl.component.html' + }) + .Class({ + constructor: function HeroIODslComponent() { }, + onOk: function() { + this.okClicked = true; + }, + onCancel: function() { + this.cancelClicked = true; + } + }); })(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 1a2028d316..94aa3514b2 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 @@ -1,28 +1,42 @@ // #docplaster (function(app) { - // #docregion - function HeroComponent() {} - // #enddocregion - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-lifecycle', - template: '

Hero: {{name}}

' - }) - ]; - // #docregion - HeroComponent.prototype.ngOnInit = function() { - this.name = 'Windstorm'; - }; - // #enddocregion - app.HeroesLifecycleModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +// #docregion +app.HeroLifecycleComponent = HeroComponent; + +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-lifecycle', + template: '

Hero: {{name}}

' + }) +]; + +function HeroComponent() { } + +HeroComponent.prototype.ngOnInit = function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); +}; +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //// + +(function(app) { + +// #docregion dsl +app.HeroLifecycleDslComponent = ng.core.Component({ + selector: 'hero-lifecycle-dsl', + template: '

Hero: {{name}}

' + }) + .Class({ + constructor: function HeroLifecycleDslComponent() { }, + ngOnInit: function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } + }); +// #enddocregion dsl })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js new file mode 100644 index 0000000000..5e21cfcb0b --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js @@ -0,0 +1,92 @@ +(function(app) { + +app.heroQueries = app.heroQueries || {}; + +app.heroQueries.ContentChildComponent = ng.core.Component({ + selector: 'content-child', + template: + '' + + 'Active' + + '' +}).Class({ + constructor: function ContentChildComponent() { + this.active = false; + }, + + activate: function() { + this.active = !this.active; + } +}); + +//////////////////// + +// #docregion content +app.heroQueries.ViewChildComponent = ng.core.Component({ + selector: 'view-child', + template: + '

' + + '{{hero.name}} ' + + '' + + '

', + styles: ['.active {font-weight: bold; background-color: skyblue;}'], + inputs: ['hero'], + queries: { + content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent) + } +}) +.Class({ + constructor: function HeroQueriesHeroComponent() { + this.active = false; + }, + + activate: function() { + this.active = !this.active; + this.content.activate(); + } +}); +// #enddocregion content + +//////////////////// + +// #docregion view +app.heroQueries.HeroQueriesComponent = ng.core.Component({ + selector: 'hero-queries', + template: + '' + + '' + + '' + + '', + queries: { + views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent) + } +}) +.Class({ + constructor: function HeroQueriesComponent() { + this.active = false; + this.heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + }, + + activate: function() { + this.active = !this.active; + this.views.forEach(function(view) { + view.activate(); + }); + }, +}); + +// #docregion defined-property +// add prototype property w/ getter outside the DSL +var proto = app.heroQueries.HeroQueriesComponent.prototype; +Object.defineProperty(proto, "buttonLabel", { + get: function () { + return this.active ? 'Deactivate' : 'Activate'; + }, + enumerable: true +}); +// #enddocregion defined-property +// #enddocregion view + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html similarity index 78% rename from public/docs/_examples/cb-ts-to-js/js/app/title.component.html rename to public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html index 06d6f3db91..0e93122d5c 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/title.component.html +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html @@ -1,3 +1,4 @@ +

{{titlePrefix}} {{title}}

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js new file mode 100644 index 0000000000..9a8ce7e578 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js @@ -0,0 +1,60 @@ +(function(app) { + +// #docregion +app.HeroTitleComponent = HeroTitleComponent; + +// #docregion templateUrl +HeroTitleComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-title', + templateUrl: 'app/hero-title.component.html' + }) +]; +// #enddocregion templateUrl + +function HeroTitleComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; +} + +HeroTitleComponent.prototype.ok = function() { + this.msg = 'OK!'; +} + +HeroTitleComponent.parameters = [ + [new ng.core.Optional(), new ng.core.Inject('titlePrefix')], + [new ng.core.Attribute('title')] +]; + +// #enddocregion + +})(window.app = window.app || {}); + +////////// DSL version //////////// + +(function(app) { + +// #docregion dsl +app.HeroTitleDslComponent = ng.core.Component({ + selector: 'hero-title-dsl', + templateUrl: 'app/hero-title.component.html' +}) +.Class({ + constructor: [ + [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], + new ng.core.Attribute('title'), + function HeroTitleDslComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + ], + + ok: function() { + this.msg = 'OK!'; + } +}); +// #enddocregion dsl + +})(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 ec5b706624..346d6f03d8 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 @@ -1,38 +1,48 @@ // #docplaster -// #docregion appexport (function(app) { - // #enddocregion appexport - // #docregion metadata - // #docregion appexport - // #docregion constructorproto - function HeroComponent() { - this.title = "Hero Detail"; - } - HeroComponent.prototype.getName = function() { return 'Windstorm'; }; - // #enddocregion constructorproto +// #docregion +// #docregion appexport +// #docregion metadata +app.HeroComponent = HeroComponent; // "export" - // #enddocregion appexport - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-view', - template: '

{{title}}: {{getName()}}

' - }) - ]; - // #enddocregion metadata +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-view', + template: '

{{title}}: {{getName()}}

' + }) +]; - app.HeroesModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +// #docregion constructorproto +function HeroComponent() { + this.title = "Hero Detail"; +} - // #docregion appexport - app.HeroComponent = HeroComponent; +HeroComponent.prototype.getName = function() { return 'Windstorm'; }; +// #enddocregion constructorproto + +// #enddocregion metadata +// #enddocregion appexport +// #enddocregion + +})(window.app = window.app || {}); + +//////////// DSL version /////////// + +(function(app) { + +// #docregion dsl +app.HeroDslComponent = ng.core.Component({ + selector: 'hero-view-dsl', + template: '

{{title}}: {{getName()}}

', + }) + .Class({ + constructor: function HeroDslComponent() { + this.title = "Hero Detail"; + }, + + getName: function() { return 'Windstorm'; } + }); +// #enddocregion dsl })(window.app = window.app || {}); -// #enddocregion appexport 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 deleted file mode 100644 index 3a562d6912..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js +++ /dev/null @@ -1,39 +0,0 @@ -(function(app) { - - // #docregion - var HeroesComponent = ng.core.Component({ - selector: 'heroes-bindings', - template: '

' + - 'Tour of Heroes' + - '

', - host: { - '[title]': 'title', - '[class.heading]': 'hClass', - '(click)': 'clicked()', - '(dblclick)': 'doubleClicked($event)' - } - }).Class({ - constructor: function() { - this.title = 'Tooltip content'; - this.hClass = true; - }, - clicked: function() { - this.active = !this.active; - }, - doubleClicked: function(evt) { - this.active = true; - } - }); - // #enddocregion - - 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 deleted file mode 100644 index f1bda77cb1..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js +++ /dev/null @@ -1,82 +0,0 @@ -(function(app) { - - var ActiveLabelComponent = ng.core.Component({ - selector: 'active-label', - template: '' + - 'Active' + - '' - }).Class({ - constructor: [function() { }], - activate: function() { - this.active = true; - } - }); - - // #docregion content - var HeroComponent = ng.core.Component({ - selector: 'a-hero', - template: '

' + - '{{hero.name}} ' + - '' + - '

', - inputs: ['hero'], - queries: { - label: new ng.core.ContentChild( - ActiveLabelComponent) - } - }).Class({ - constructor: [function() { }], - activate: function() { - this.active = true; - this.label.activate(); - } - }); - app.HeroQueriesComponent = HeroComponent; - // #enddocregion content - - // #docregion view - var AppComponent = ng.core.Component({ - selector: 'heroes-queries', - template: - '' + - '' + - '' + - '', - queries: { - heroCmps: new ng.core.ViewChildren( - HeroComponent) - } - }).Class({ - constructor: function() { - this.heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - }, - activate: function() { - this.heroCmps.forEach(function(cmp) { - cmp.activate(); - }); - } - }); - // #enddocregion view - - 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 015a8d2126..fd3e737c9e 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 @@ -1,32 +1,9 @@ -// #docplaster -// #docregion appimport (function(app) { - // #enddocregion appimport - // #docregion ng2import - var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; - var LocationStrategy = ng.common.LocationStrategy; - var HashLocationStrategy = ng.common.HashLocationStrategy; - // #enddocregion ng2import +var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; - // #docregion appimport - var HeroComponent = app.HeroComponent; - // #enddocregion appimport +document.addEventListener('DOMContentLoaded', function() { + platformBrowserDynamic().bootstrapModule(app.AppModule); +}); - document.addEventListener('DOMContentLoaded', function() { - 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 })(window.app = window.app || {}); -// #enddocregion appimport diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html index 3c2dd6eeca..7d2105bf78 100644 --- a/public/docs/_examples/cb-ts-to-js/js/index.html +++ b/public/docs/_examples/cb-ts-to-js/js/index.html @@ -4,12 +4,14 @@ + TypeScript to JavaScript + @@ -17,50 +19,26 @@ + + + - - - - - + + + + + + - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-view2... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inline... - Loading hero-di-inline2... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html new file mode 100644 index 0000000000..7f1efd31a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html @@ -0,0 +1,31 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts new file mode 100644 index 0000000000..722d812f63 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] +}) +export class AppComponent { + title = 'TypeScript'; +} diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts new file mode 100644 index 0000000000..8aafe9c9bb --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts @@ -0,0 +1,56 @@ +/* tslint:disable-next-line:no-unused-variable */ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroHostMetaComponent } from './hero-host-meta.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, HeroHostMetaComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging! +}) +export class AppModule { } + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts new file mode 100644 index 0000000000..08a0ed6c60 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +// #docregion +@Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html' +}) +export class ConfirmComponent { + @Input() okMsg = ''; + @Input('cancelMsg') notOkMsg = ''; + @Output() ok = new EventEmitter(); + @Output('cancel') notOk = new EventEmitter(); + + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts index 7e9c7456c6..cd7f9e1aae 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; @Injectable() export class DataService { - constructor() { - } + constructor() { } + getHeroName() { return 'Windstorm'; } 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 37e00960c9..ec460a9dbc 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 @@ -1,46 +1,7 @@ -import { - Attribute, - Component, - Inject, - Optional, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -// #docregion metadata -@Component({ - moduleId: module.id, - selector: 'hero-title', - templateUrl: 'title.component.html' -}) -// #enddocregion metadata -class TitleComponent { - private msg: string = ''; - constructor( - @Inject('titlePrefix') @Optional() private titlePrefix: string, - @Attribute('title') private title: string - ) { } - - ok() { - this.msg = 'OK!'; - } -} -// #enddocregion +import { Component } from '@angular/core'; @Component({ selector: 'hero-di-inject-additional', - template: ` - ` + template: `` }) -class AppComponent { } - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] -}) -export class HeroesDIInjectAdditionalModule { } +export class HeroComponent { } 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 eb2cb78971..c583a1b0f6 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,20 +1,11 @@ -import { Component, Inject, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component, Inject } from '@angular/core'; // #docregion @Component({ selector: 'hero-di-inject', template: `

Hero: {{name}}

` }) -class HeroComponent { +export 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 c1bb927219..0cc78d277e 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,6 +1,4 @@ -import { Component, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - +import { Component } from '@angular/core'; import { DataService } from './data.service'; // #docregion @@ -8,19 +6,10 @@ import { DataService } from './data.service'; selector: 'hero-di', template: `

Hero: {{name}}

` }) - -class HeroComponent { - name: string; +export class HeroComponent { + name = ''; 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-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts new file mode 100644 index 0000000000..fefe4a5470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +

Hero Host in Metadata

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + + // HostListeners on the entire element + '(click)': 'clicked()', + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +export class HeroHostMetaComponent { + title = 'Hero Host in Metadata Tooltip'; + headingClass = true; + + active = false; + clicks = 0; + + clicked() { + this.clicks += 1; + } + + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts new file mode 100644 index 0000000000..e8d72233c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts @@ -0,0 +1,39 @@ +import { Component, HostBinding, HostListener } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host', + template: ` +

Hero Host in Decorators

+
Heading clicks: {{clicks}}
+ `, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] +}) +export class HeroHostComponent { + // HostBindings to the element + @HostBinding() title = 'Hero Host in Decorators Tooltip'; + @HostBinding('class.heading') headingClass = true; + + active = false; + clicks = 0; + + // HostListeners on the entire element + @HostListener('click') + clicked() { + this.clicks += 1; + } + + @HostListener('mouseenter', ['$event']) + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + @HostListener('mouseleave', ['$event']) + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion 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 8105d98919..4b36411e78 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,67 +1,26 @@ -import { - Component, - EventEmitter, - Input, - Output, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - moduleId: module.id, - selector: 'my-confirm', - templateUrl: 'confirm.component.html' -}) -class ConfirmComponent { - @Input() okMsg: string; - @Input('cancelMsg') notOkMsg: string; - @Output() ok = - new EventEmitter(); - @Output('cancel') notOk = - new EventEmitter(); - - onOkClick() { - this.ok.next(true); - } - onNotOkClick() { - this.notOk.next(true); - } -} -// #enddocregion - +import { Component } from '@angular/core'; @Component({ selector: 'hero-io', template: ` - - + + OK clicked Cancel clicked ` }) -class AppComponent { - okClicked: boolean; - cancelClicked: boolean; +export class HeroIOComponent { + okClicked = false; + cancelClicked = false; onOk() { this.okClicked = true; } + onCancel() { 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 64bdc9e927..2629c85a1a 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,27 +1,14 @@ -// #docplaster // #docregion 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 -class HeroComponent implements OnInit { +export class HeroComponent implements OnInit { name: string; ngOnInit() { - this.name = 'Windstorm'; + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); } } -// #enddocregion - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] -}) -export class HeroesLifecycleModule { } - diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts new file mode 100644 index 0000000000..8b2d91ea85 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts @@ -0,0 +1,83 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = !this.active; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'] +}) +export class ViewChildComponent { + @Input() hero: any; + active = false; + + @ContentChild(ContentChildComponent) content: ContentChildComponent; + + activate() { + this.active = !this.active; + this.content.activate(); + } +} +// #enddocregion content + +//////////////////// + +// #docregion view +@Component({ + selector: 'hero-queries', + template: ` + + + + + ` +}) +export class HeroQueriesComponent { + active = false; + heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + + @ViewChildren(ViewChildComponent) views: QueryList; + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + // #docregion defined-property + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } + // #enddocregion defined-property +} +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html similarity index 78% rename from public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html rename to public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html index 06d6f3db91..0e93122d5c 100644 --- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/title.component.html +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html @@ -1,3 +1,4 @@ +

{{titlePrefix}} {{title}}

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts new file mode 100644 index 0000000000..074f2edd61 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts @@ -0,0 +1,22 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +// #docregion templateUrl +@Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' +}) +// #enddocregion templateUrl +export class HeroTitleComponent { + msg: string = ''; + constructor( + @Inject('titlePrefix') @Optional() private titlePrefix: string, + @Attribute('title') private title: string + ) { } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion 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 83dc6d409d..4ea4c11611 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 @@ -1,4 +1,3 @@ -// #docplaster // #docregion metadata import { Component } from '@angular/core'; @@ -6,24 +5,10 @@ import { Component } from '@angular/core'; selector: 'hero-view', template: '

{{title}}: {{getName()}}

' }) -// #docregion appexport -// #docregion class +// #docregion appexport, class export class HeroComponent { title = 'Hero Detail'; getName() {return 'Windstorm'; } } -// #enddocregion class -// #enddocregion appexport +// #enddocregion appexport, class // #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 deleted file mode 100644 index 0ce026a42f..0000000000 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { - Component, - HostBinding, - HostListener, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - selector: 'heroes-bindings', - template: ` -

- Tour of Heroes -

- ` -}) -class HeroesComponent { - @HostBinding() title = 'Tooltip content'; - @HostBinding('class.heading') hClass = true; - active: boolean; - - constructor() {} - - @HostListener('click') - clicked() { - this.active = !this.active; - } - - @HostListener('dblclick', ['$event']) - doubleClicked(evt: Event) { - this.active = true; - } -} -// #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 deleted file mode 100644 index 97003766e6..0000000000 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { - Component, - ViewChildren, - ContentChild, - QueryList, - Input, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -@Component({ - selector: 'active-label', - template: ` - Active - ` -}) -class ActiveLabelComponent { - active: boolean; - - activate() { - this.active = true; - } -} - -// #docregion content -@Component({ - selector: 'a-hero', - template: `

- {{hero.name}} - -

` -}) -class HeroComponent { - @Input() hero: any; - active: boolean; - - @ContentChild(ActiveLabelComponent) - label: ActiveLabelComponent; - - activate() { - this.active = true; - this.label.activate(); - } -} -// #enddocregion content - - -// #docregion view -@Component({ - selector: 'heroes-queries', - template: ` - - - - - ` -}) -class HeroesQueriesComponent { - heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - - @ViewChildren(HeroComponent) - heroCmps: QueryList; - - activate() { - this.heroCmps.forEach( - (cmp) => cmp.activate() - ); - } -} -// #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 92f5af5e1a..7cc80b5964 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 @@ -1,30 +1,4 @@ -/* tslint:disable no-unused-variable */ -// #docregion ng2import -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import - -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport - -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); +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html index c635706f38..5791134d4f 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/index.html +++ b/public/docs/_examples/cb-ts-to-js/ts/index.html @@ -5,6 +5,7 @@ + TypeScript to JavaScript @@ -20,32 +21,7 @@ - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade index 0c3ba61544..d34dbf8868 100644 --- a/public/docs/ts/latest/cookbook/ts-to-js.jade +++ b/public/docs/ts/latest/cookbook/ts-to-js.jade @@ -15,19 +15,16 @@ a#toc :marked ## Table of contents - [_TypeScript_ to _ES6_ to _ES5_](#from-ts) - - [Modularity: imports and exports](#modularity) - - [Classes and Class Metadata](#class-metadata) - - [Input and Output Metadata](#property-metadata) - - [Dependency Injection](#dependency-injection) - - [Host and Query Metadata](#host-query-metadata) - - [AoT compilation in _TypeScript_ Only](#aot) + [_TypeScript_ to _ES6_ to _ES5_](#from-ts)
+ [Modularity: imports and exports](#modularity)
+ [Classes and Class Metadata](#class-metadata)
+ [_ES5_ DSL](#dsl)
+ [Interfaces](#interfaces)
+ [Input and Output Metadata](#io-decorators)
+ [Dependency Injection](#dependency-injection)
+ [Host Binding](#host-binding)
+ [View and Child Decorators](#view-child-decorators)
+ [AoT compilation in _TypeScript_ Only](#aot)
**Run and compare the live _TypeScript_ and JavaScript code shown in this cookbook.** @@ -38,7 +35,7 @@ a#from-ts ## _TypeScript_ to _ES6_ to _ES5_ _TypeScript_ - is a typed superset of _ES6 JavaScript_. + is a typed superset of _ES6 JavaScript_.   _ES6 JavaScript_ is a superset of _ES5 JavaScript_.   _ES5_ is the kind of JavaScript that runs natively in all modern browsers. The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features. @@ -48,17 +45,17 @@ a#from-ts * _ES6-without-decorators_ to _ES5_ When translating from _TypeScript_ to _ES6-with-decorators_, remove - [class property access modifiers](http://www._TypeScript_lang.org/docs/handbook/classes.html#public-private-and-protected-modifiers) + [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers) such as `public` and `private`. Remove most of the - [type annotations](https://www._TypeScript_lang.org/docs/handbook/basic-types.html), - such as `string` and `boolean` - but **keep type annotations used for dependency injection**. + [type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html), + such as `:string` and `:boolean` + but **keep the constructor parameter types which are used for dependency injection**. From _ES6-with-decorators_ to _plain ES6_, remove all - [decorators](https://www._TypeScript_lang.org/docs/handbook/decorators.html) - and the remaining type annotations. + [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html) + and the remaining types. You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class. Finally, from _plain ES6_ to _ES5_, the main missing features are `import` @@ -82,24 +79,20 @@ a#modularity In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package) through the global `ng` object. - Everything you would have imported from `@angular` is a nested member of this `ng` object: + Anything you can import from `@angular` is a nested member of this `ng` object: +makeTabs(` - cb-ts-to-js/ts/app/main.ts, - cb-ts-to-js/js-es6-decorators/app/main.es6, - cb-ts-to-js/js-es6/app/main.es6, - cb-ts-to-js/js/app/main.js - `,` - ng2import, - ng2import, - ng2import, - ng2import - `,` - TypeScript, + cb-ts-to-js/ts/app/app.module.ts, + cb-ts-to-js/js-es6-decorators/app/app.module.es6, + cb-ts-to-js/js-es6/app/app.module.es6, + cb-ts-to-js/js/app/app.module.js + `, + 'ng2import,ng2import,ng2import,ng2import', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript - `) + `)(format='.') :marked ### Exporting Application Code @@ -118,9 +111,9 @@ a#modularity Add one application namespace object such as `app` to the global `document`. Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`. You could factor a large application into several sub-namespaces - which leads to "exports" along the lines of `app.heroes.HeroComponent`. + which leads to "exports" along the lines of `app.heroQueries.HeroComponent`. - Every file should wrap _ES5_ code in an + Every _ES5_ file should wrap code in an [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) to limit unintentional leaking of private symbols into the global scope. @@ -131,13 +124,9 @@ a#modularity cb-ts-to-js/js-es6-decorators/app/hero.component.es6, cb-ts-to-js/js-es6/app/hero.component.es6, cb-ts-to-js/js/app/hero.component.js - `,` - appexport, - appexport, - appexport, - appexport - `,` - TypeScript, + `, + 'appexport,appexport,appexport,appexport', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript @@ -151,17 +140,13 @@ a#modularity In _ES5_ you use the shared namespace object to access "exported" entities from other files. +makeTabs(` - cb-ts-to-js/ts/app/main.ts, - cb-ts-to-js/js-es6-decorators/app/main.es6, - cb-ts-to-js/js-es6/app/main.es6, - cb-ts-to-js/js/app/main.js - `,` - appimport, - appimport, - appimport, - appimport - `,` - TypeScript, + cb-ts-to-js/ts/app/app.module.ts, + cb-ts-to-js/js-es6-decorators/app/app.module.es6, + cb-ts-to-js/js-es6/app/app.module.es6, + cb-ts-to-js/js/app/app.module.js + `, + 'appimport,appimport,appimport,appimport', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript @@ -183,6 +168,20 @@ a#class-metadata ### Classes Most Angular _TypeScript_ and _ES6_ code is written as classes. + + Properties and method parameters of _TypeScript_ classes may be marked with the access modifiers + `private`, `internal`, and `public`. + Remove these modifiers when translating to JavaScript. + + Most type declarations (e.g, `:string` and `:boolean`) should be removed when translating to JavaScript. + When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!*** + + Look for types in _TypeScript_ property declarations. + In general it is better to initialize such properties with default values because + many browser JavaScript engines can generate more performant code. + When _TypeScript_ code follows this same advice, it can infer the property types + and there is nothing to remove during translation. + In _ES6-without-decorators_, properties of classes must be assigned inside the constructor. _ES5_ JavaScript has no classes. @@ -193,13 +192,9 @@ a#class-metadata cb-ts-to-js/js-es6-decorators/app/hero.component.es6, cb-ts-to-js/js-es6/app/hero.component.es6, cb-ts-to-js/js/app/hero.component.js - `,` - class, - class, - class, - constructorproto - `,` - TypeScript, + `, + 'class,class,class,constructorproto', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript @@ -226,13 +221,9 @@ a#class-metadata cb-ts-to-js/js-es6-decorators/app/hero.component.es6, cb-ts-to-js/js-es6/app/hero.component.es6, cb-ts-to-js/js/app/hero.component.js - `,` - metadata, - metadata, - metadata, - metadata - `,` - TypeScript, + `, + 'metadata,metadata,metadata,metadata', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript @@ -242,62 +233,95 @@ a#class-metadata ***External Template file*** A large component template is often kept in a separate template file. -+makeExample('cb-ts-to-js/ts/app/title.component.html', '', 'app/title.component.html')(format='.') ++makeExample('cb-ts-to-js/ts/app/hero-title.component.html', '', 'app/hero-title.component.html')(format='.') :marked - The component (`TitleComponent` in this case) then references the template file in its metadata `templateUrl` property: + The component (`HeroTitleComponent` in this case) then references the template file in its metadata `templateUrl` property: +makeTabs(` - cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts, - cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6, - cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6, - cb-ts-to-js/js/app/hero-di-inject-additional.component.js`, - 'metadata, metadata, metadata, metadata', + cb-ts-to-js/ts/app/hero-title.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6, + cb-ts-to-js/js-es6/app/hero-title.component.es6, + cb-ts-to-js/js/app/hero-title.component.js`, + 'templateUrl, templateUrl, templateUrl, templateUrl', `TypeScript, - ES6 JavaScript with decorators, - ES6 JavaScript, - ES5 JavaScript`)(format='.') + ES6 JavaScript with decorators, + ES6 JavaScript, + ES5 JavaScript + `)(format='.') :marked - Note that the _TypeScript_ and both _ES6_ file `templateUrl` properties identify the location of the template file _relative to the component module_. + Note that the _TypeScript_ and both _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_. All three metadata configurations specify the `moduleId` property so that Angular can calculate the proper module address. -.l-sub-section - :marked - The `moduleId` may not be needed with certain tooling but it's safest to provide it anyway. -:marked + The _ES5_ approach shown here does not support modules and therefore there is no way to calculate a _module-relative URL_. The `templateUrl` for the _ES5_ code must specify the _path from the project root_ and omits the irrelevant `moduleId` property. +.l-sub-section + :marked + With the right tooling, the `moduleId` may not be needed in the other JavaScript dialects either. + But it's safest to provide it anyway. - ***Angular class API*** +a#dsl +.l-main-section +:marked + ## _ES5_ DSL This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular provides a convenience API to make it a little more compact and locates the metadata above the constructor, as you would if you wrote in _TypeScript_ or _ES6-with-decorators_. - Set a component variable to the result of an `ng.core.Component` function call. + This _API_ (_Application Programming Interface_) is commonly known as the _ES5 DSL_ (_Domain Specific Language_). + + Set an application namespace property (e.g., `app.HeroDslComponent`) to the result of an `ng.core.Component` function call. Pass the same metadata object to `ng.core.Component` as you did before. - Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods. - Here is an example of the component class API next to the annotated function version for comparison: + Here is an example of the `HeroComponent`, re-written with the DSL, + next to the original _ES5_ version for comparison: +makeTabs(` - cb-ts-to-js/js/app/hero-dsl.component.js, + cb-ts-to-js/js/app/hero.component.js, cb-ts-to-js/js/app/hero.component.js - `,` - component, - metadata - `,` - ES5 JavaScript with Class API, + `, + 'dsl,', + ` + ES5 JavaScript with DSL, ES5 JavaScript `) + +.callout.is-helpful + header Name the constructor + :marked + A **named** constructor displays clearly in the console log + if the component throws a runtime error. + An **unnamed** constructor displays as an anonymous function (e.g., `class0`) + which is impossible to find in the source code. + :marked - There are similar APIs for other decorated classes. + ### Properties with getters and setters + + _TypeScript_ and _ES6_ support with getters and setters. + Here's an example of a read-only _TypeScript_ property with a getter + that prepares a toggle-button label for the next clicked state: ++makeExample('cb-ts-to-js/ts/app/hero-queries.component.ts', 'defined-property', 'ts/app/hero-queries.component.ts')(format='.') + +:marked + This _TypeScript_ "getter" property is transpiled to an _ES5_ + defined property. + The _ES5 DSL_ does not support _defined properties_ directly + but you can still create them by extracting the "class" prototype and + adding the _defined property_ in raw JavaScript like this: ++makeExample('cb-ts-to-js/js/app/hero-queries.component.js', 'defined-property','js/app/hero-queries.component.ts')(format='.') + +:marked + ### DSL for other classes + There are similar DSLs for other decorated classes. You can define a directive with `ng.core.Directive`: code-example. - var MyDirective = ng.core.Directive({ + app.MyDirective = ng.core.Directive({ selector: '[myDirective]' }).Class({ ... @@ -305,18 +329,20 @@ code-example. :marked and a pipe with `ng.core.Pipe`: code-example. - var MyPipe = ng.core.Pipe({ + app.MyPipe = ng.core.Pipe({ name: 'myPipe' }).Class({ ... }); +a#interfaces +.l-main-section :marked - ### Interfaces + ## Interfaces A _TypeScript_ interface helps ensure that a class implements the interface's members correctly. We strongly recommend Angular interfaces where appropriate. - For example, a component that implements the `ngOnInit` lifecycle hook method + For example, the component class that implements the `ngOnInit` lifecycle hook method should implement the `OnInit` interface. _TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime. @@ -327,16 +353,18 @@ code-example. cb-ts-to-js/ts/app/hero-lifecycle.component.ts, cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6, cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6, + cb-ts-to-js/js/app/hero-lifecycle.component.js, cb-ts-to-js/js/app/hero-lifecycle.component.js - `,` - `,` - TypeScript, + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript + ES5 JavaScript, + ES5 JavaScript with DSL `) -a#property-metadata +a#io-decorators .l-main-section :marked ## Input and Output Metadata @@ -357,16 +385,18 @@ a#property-metadata combined in the metadata `inputs` and `outputs` _arrays_. +makeTabs(` - cb-ts-to-js/ts/app/hero-io.component.ts, - cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6, - cb-ts-to-js/js-es6/app/hero-io.component.es6, - cb-ts-to-js/js/app/hero-io.component.js - `,` - `,` - TypeScript, + cb-ts-to-js/ts/app/confirm.component.ts, + cb-ts-to-js/js-es6-decorators/app/confirm.component.es6, + cb-ts-to-js/js-es6/app/confirm.component.es6, + cb-ts-to-js/js/app/confirm.component.js, + cb-ts-to-js/js/app/confirm.component.js + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript + ES5 JavaScript, + ES5 JavaScript with DSL `) :marked In the previous example, one of the public-facing binding names (`cancelMsg`) @@ -376,53 +406,76 @@ a#property-metadata In _TypeScript_ and _ES6-with-decorators_, you specify the special binding name in the argument to the property decorator. + In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata. .l-main-section :marked ## Dependency Injection + Angular relies heavily on [Dependency Injection](../guide/dependency-injection.html) to provide services to the objects it creates. + When Angular creates a new component, directive, pipe or another service, + it sets the class constructor parameters to instances of services provided by an _Injector_. - ### Injection by Type + The developer must tell Angular what to inject into each parameter. - Angular can often use _TypeScript_ type information to determine what needs to be injected. - _ES6-with-decorators_ can also make use of type information. + ### Injection by Class Type - Since no type information is available in _ES5_/_ES6_ JavaScript, you must identify "injectables" in - some other way. - - Attach a `parameters` array to the constructor function. - Each array item is the dependency injection token that identifies the thing to be injected. - Often the token is the constructor function for the class-like dependency. + The easiest and most popular technique in _TypeScript_ and _ES6-with-decorators_ is to set the constructor parameter type + to the class associated with the service to inject. - In _ES6_ the decorators need to be inside a nested array. - When writing in the _ES5_ class convenience API, you can supply the parameter tokens by wrapping - the constructor in an array. + The _TypeScript_ transpiler writes parameter type information into the generated JavaScript. + Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_.. + The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax. + + _ES5_ and _plain ES6_ lack types so you must identify "injectables" by attaching a **`parameters`** array to the constructor function. + Each item in the array specifies the service's injection token. + + As with _TypeScript_ the most popular token is a class, + or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_. + The format of the `parameters` array varies: + + * _plain ES6_ — nest each constructor function in a sub-array. + + * _ES5_ — simply list the constructor functions. + + When writing with _ES5 DSL_, set the `Class.constructor` property to + an array whose first parameters are the injectable constructor functions and whose + last parameter is the class constructor itself. + This format should be familiar to Angular 1 developers. +makeTabs(` cb-ts-to-js/ts/app/hero-di.component.ts, cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6, cb-ts-to-js/js-es6/app/hero-di.component.es6, cb-ts-to-js/js/app/hero-di.component.js, - cb-ts-to-js/js/app/hero-di-inline.component.js - `,` - `,` - TypeScript, + cb-ts-to-js/js/app/hero-di.component.js + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript, - ES5 JavaScript with Class API + ES5 JavaScript with DSL `) :marked ### Injection with the @Inject decorator - When the thing being injected doesn't correspond directly to a type, you use the - `@Inject()` decorator to supply the injection token. - In this example, you are injecting a string identified by the "heroName" token. + Sometimes the dependency injection token isn't a class or constructor function. + + In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor parameter + by calling the `@Inject()` decorator with the injection token. + In the following example, the token is the string `'heroName'`. - In _ES5_/_ES6_ JavaScript you add the token string to the injection parameters array. - Alternatively, when using the _ES5_ convenience class API you can create a token with the - `Inject` method and add that to the constructor array in the annotations. + The other JavaScript dialogs add a `parameters` array to the class contructor function. + Each item constains a new instance of `Inject('heroName')`: + + * _plain ES6_ — each item is a new instance of `Inject(token)` in a sub-array. + + * _ES5_ — simply list the string tokens. + + When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition + array as before. Create a `new ng.core.Inject(token)` for each parameter. +makeTabs(` cb-ts-to-js/ts/app/hero-di-inject.component.ts, @@ -430,67 +483,74 @@ a#property-metadata cb-ts-to-js/js-es6/app/hero-di-inject.component.es6, cb-ts-to-js/js/app/hero-di-inject.component.js, cb-ts-to-js/js/app/hero-di-inject.component.js - `,` - , - , - , - parameters, - ctor - `,` - TypeScript, + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, ES5 JavaScript, - ES5 JavaScript with Class API + ES5 JavaScript with DSL `) :marked ### Additional Injection Decorators - You can attach additional decorators to constructor parameters to qualify the injection behavior. - You can mark optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html), - inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html), - inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html) - and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)). + You can qualify injection behavior with injection decorators from `@angular/core`. - In ES6 JavaScript you just add the extra decorators to the nested injection parameters array. + In _TypeScript_ and _ES6-with-decorators_, + you precede the constructor parameters with injection qualifiers such as: + * [`@Optional`](../api/core/index/Optional-decorator.html) sets the parameter to `null` if the service is missing + * [`@Attribute`](../api/core/index/Attribute-interface.html) to inject a host element attribute value + * [`@ContentChild`](../api/core/index/ContentChild-decorator.html) to inject a content child + * [`@ViewChild`](../api/core/index/ViewChild-decorator.html) to inject a view child + * [`@Host`](../api/core/index/Host-decorator.html) to inject a service in this component or its host + * [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) to inject a service provided in an ancestor of this component - To achieve the same effect in _ES5_ JavaScript, use a nested array with the constructor - array notation in which the injection information precedes the constructor function itself. + In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array. + For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_. - You can apply other additional parameter decorators such as - [`@Host`](../api/core/index/Host-decorator.html) and - [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way - - by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the - parameters array. + + When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition + array as before. Use a nested array to define a parameter's complete injection specification. + +makeTabs(` - cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts, - cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6, - cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6, - cb-ts-to-js/js/app/hero-di-inject-additional.component.js - `,` - `,` - TypeScript, + cb-ts-to-js/ts/app/hero-title.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6, + cb-ts-to-js/js-es6/app/hero-title.component.es6, + cb-ts-to-js/js/app/hero-title.component.js, + cb-ts-to-js/js/app/hero-title.component.js + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript - `) + ES5 JavaScript, + ES5 JavaScript with DSL + `) +.l-sub-section + :marked + In the example above, there is no provider for the `'titlePrefix'` token. + Without `Optional`, Angular would raise an error. + With `Optional`, Angular sets the constructor parameter to `null` + and the component displays the title without a prefix. -a#host-query-metadata +a#host-binding .l-main-section :marked - ## Host and Query Metadata + ## Host Binding + Angular supports bindings to properties and events of the _host element_ which is the + element whose tag matches the component selector. ### Host Decorators - In _TypeScript_ and _ES6-with-decorators_ you can use host property decorators to bind a host + In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host element to a component or directive. The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator binds host element properties to component data properties. The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds host element events to component event handlers. - When using _ES5_/_ES6_, add a `host` attribute to the component metadata to achieve the + In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the same effect as `@HostBinding` and `@HostListener`. The `host` value is an object whose properties are host property and listener bindings: @@ -500,54 +560,74 @@ a#host-query-metadata * Each value identifies the corresponding component property or method. +makeTabs(` - cb-ts-to-js/ts/app/heroes-bindings.component.ts, - cb-ts-to-js/js-es6-decorators/app/heroes-bindings.component.es6, - cb-ts-to-js/js-es6/app/heroes-bindings.component.es6, - cb-ts-to-js/js/app/heroes-bindings.component.js - `,` - `,` - TypeScript, + cb-ts-to-js/ts/app/hero-host.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6, + cb-ts-to-js/js-es6/app/hero-host.component.es6, + cb-ts-to-js/js/app/hero-host.component.js, + cb-ts-to-js/js/app/hero-host.component.js + `, + ',,,,dsl', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript + ES5 JavaScript, + ES5 JavaScript with DSL `) -.alert.is-helpful - :marked - In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata - instead of the `@ViewChild` and `@ContentChild` property decorators. :marked - ### Query Decorators + ### Host Metadata + Some developers prefer to specify host properties and listeners + in the component metadata. + They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_. + + The following re-implementation of the `HeroComponent` reminds us that _any property metadata decorator_ + can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_. + These particular _TypeScript_ and _ES6_ code snippets happen to be identical. ++makeTabs(` + cb-ts-to-js/ts/app/hero-host-meta.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 + `, + '', + ` TypeScript, + ES6 JavaScript with decorators + `) + +a#view-child-decorators +.l-main-section +:marked + ### View and Child Decorators - There are several property decorators for querying the descendants of - a component or directive. + Several _property_ decorators query a component's nested view and content components. +.l-sub-section + :marked + _View_ children are associated with element tags that appear _within_ the component's template. + + _Content_ children are associated with elements that appear _between_ the component's element tags; + they are projected into an `` slot in the component's template. +:marked The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators allow a component to query instances of other components that are used in its view. - In _ES5_/_ES6_ JavaScript you access a component's view children by adding a `queries` attribute to - the component metadata. It should be an object where: - - * Each key is the name of a component property that will hold the view children - * Each value is an instance of either `ViewChild` or `ViewChildren`. + In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata. + The `queries` property value is a hash map. + + * each _key_ is the name of a component property that will hold the view child or children. + * each _value_ is a new instance of either `ViewChild` or `ViewChildren`. +makeTabs(` - cb-ts-to-js/ts/app/heroes-queries.component.ts, - cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6, - cb-ts-to-js/js-es6/app/heroes-queries.component.es6, - cb-ts-to-js/js/app/heroes-queries.component.js - `,` - view, - view, - view, - view - `,` - TypeScript, + cb-ts-to-js/ts/app/hero-queries.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6, + cb-ts-to-js/js-es6/app/hero-queries.component.es6, + cb-ts-to-js/js/app/hero-queries.component.js + `, + 'view, view, view, view', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript + ES5 JavaScript with DSL `) :marked @@ -560,22 +640,23 @@ a#host-query-metadata [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html). +makeTabs(` - cb-ts-to-js/ts/app/heroes-queries.component.ts, - cb-ts-to-js/js-es6-decorators/app/heroes-queries.component.es6, - cb-ts-to-js/js-es6/app/heroes-queries.component.es6, - cb-ts-to-js/js/app/heroes-queries.component.js - `,` - content, - content, - content, - content - `,` - TypeScript, + cb-ts-to-js/ts/app/hero-queries.component.ts, + cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6, + cb-ts-to-js/js-es6/app/hero-queries.component.es6, + cb-ts-to-js/js/app/hero-queries.component.js + `, + 'content, content, content, content', + ` TypeScript, ES6 JavaScript with decorators, ES6 JavaScript, - ES5 JavaScript + ES5 JavaScript with DSL `) +.alert.is-helpful + :marked + In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata + instead of the `@ViewChild` and `@ContentChild` property decorators. + a#aot .l-main-section :marked From f627706779c418ca8357aacd52aba5b5b7d05cb0 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Mon, 14 Nov 2016 10:26:13 -0800 Subject: [PATCH 064/125] docs(cookbook-aot-compiler): improve Ahead-of-Time compilation cookbook (#2798) closes #2790 --- public/docs/_examples/toh-6/ts/app/main.ts | 2 +- .../docs/ts/latest/cookbook/aot-compiler.jade | 51 ++++++++++++++----- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts index 091a7d82a7..961a226688 100644 --- a/public/docs/_examples/toh-6/ts/app/main.ts +++ b/public/docs/_examples/toh-6/ts/app/main.ts @@ -1,6 +1,6 @@ // #docregion -// main entry point import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index dbf6c1c7b9..e59218f4fc 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -341,9 +341,11 @@ a#toh Fortunately, the source code can be compiled either way without change _if_ you account for a few key differences. - ***Index.html*** + ***index.html*** - The JiT and AoT apps are setup and launched so differently that they require their own `index.html` files. + The JiT and AoT apps require their own `index.html` files because they setup and launch so differently. + **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder. + Here they are for comparison: +makeTabs( @@ -355,35 +357,47 @@ a#toh ) :marked - They can't be in the same folder. - ***Put the AoT version in the `/aot` folder***. - The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim. Both scripts appear in its `index.html`. The AoT version loads the entire application in a single script, `aot/dist/build.js`. It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html` + + ***main.ts*** + + JiT and AoT applications boot in much the same way but require different Angular libraries to do so. + The key differences, covered in the [Bootstrap](#bootstrap) section above, + are evident in these `main` files which can and should reside in the same folder: - *Component-relative Template URLS* ++makeTabs( + `toh-6/ts/app/main-aot.ts, + toh-6/ts/app/main.ts`, + null, + `app/main-aot.ts (AoT), + app/main.ts (JiT)` +) + +:marked + ***Component-relative Template URLS*** The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_. - That means that the value of `@Component.templateUrl` is a URL value relative to the component class file: - `foo.component.html` no matter where `foo.component.ts` sits in the project folder structure. + That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file. + For example, a `'hero.component.html'` URL means that the template file is a sibling of its companion `hero.component.ts` file. While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation. - JiT-compiled apps, using the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`. + JiT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`. The `module` object is undefined when an AoT-compiled app runs. - The app fails unless you assign a global `module` value in the `index.html` like this: + The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this: +makeExample('toh-6/ts/aot/index.html','moduleId')(format='.') .l-sub-section :marked Setting a global `module` is a temporary expedient. :marked - *TypeScript configuration* + ***TypeScript configuration*** - JiT-compiled apps transpile to `commonjs` modules. - AoT-compiled apps transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. + JiT-compiled applications transpile to `commonjs` modules. + AoT-compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. AoT requires its own TypeScript configuration settings as well. You'll need separate TypeScript configuration files such as these: @@ -396,6 +410,17 @@ a#toh tsconfig.json (JiT)` ) +.callout.is-helpful + header @Types and node modules + :marked + In the file structure of _this particular sample project_, + the `node_modules` folder happens to be two levels up from the project root. + Therefore, `"typeRoots"` must be set to `"../../node_modules/@types/"`. + + In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json` + and `"typeRoots"` would be set to `"node_modules/@types/"`. + Edit your `tsconfig-aot.json` to fit your project's file structure. + :marked ### Tree Shaking From a423a5abc704280794b6dea69cf1c9e76bbc9da1 Mon Sep 17 00:00:00 2001 From: ikilled Date: Mon, 14 Nov 2016 18:39:46 +0000 Subject: [PATCH 065/125] clicking on Books & Training sends user to Education (#2701) When user clicks in Books & Training item in footer the website should take them to Education section (anchor) in the middle of the page, not to the top where Development section is. --- public/_includes/_footer.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 5da35ef23f..e2d9af4fac 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -20,7 +20,7 @@ div(class="main-footer" data-swiftype-index="false") // TODO: (ericjim) make a libraries page to showcase all angular libraries //li Libraries li About - li Books & Training + li Books & Training li Tools & Libraries li Community li Press Kit From db0fac94c980c99d9575a90d4b6bb15f572f9161 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Mon, 14 Nov 2016 10:48:09 -0800 Subject: [PATCH 066/125] chore(changelog): update docs changelog for Ng v.2.2.0 --- public/docs/ts/latest/guide/change-log.jade | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade index 38cd957780..a58b98f747 100644 --- a/public/docs/ts/latest/guide/change-log.jade +++ b/public/docs/ts/latest/guide/change-log.jade @@ -7,7 +7,15 @@ block includes The Angular documentation is a living document with continuous improvements. This log calls attention to recent significant changes. - ## ES6 described in "TypeScript to JavaScript" (2016-11-03) + ## Sync with Angular v.2.2.0 (2016-11-14) + Docs and code samples updated and tested with Angular v.2.2.0 + + ## UPDATE: NgUpgrade Guide reflects the new v.2.2.0 adapters (2016-11-14) + The updated [NgUpgrade Guide](upgrade.html) guide covers the + new `NgUpgradeModule` released in v.2.2.0 which replaces the + ***now deprecated*** upgrade facilities prior to v.2.2.0. + + ## ES6 described in "TypeScript to JavaScript" (2016-11-14) The updated "[TypeScript to JavaScript](../cookbook/ts-to-js.html)" cookbook now explains how to write apps in ES6/7 by translating the common idioms in the TypeScript documentation examples From 04b88d5534bd18dbc0cef5fd8265e9bfeb80f23f Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 14 Nov 2016 19:02:09 +0000 Subject: [PATCH 067/125] remove wip aot changes from test run --- .../upgrade-phonecat-2-hybrid/ts/{aot => aot-wip}/bs-config.json | 0 .../upgrade-phonecat-2-hybrid/ts/{aot => aot-wip}/index.html | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/{aot => aot-wip}/bs-config.json (100%) rename public/docs/_examples/upgrade-phonecat-2-hybrid/ts/{aot => aot-wip}/index.html (100%) diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot/bs-config.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot/bs-config.json rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/bs-config.json diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot/index.html b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html similarity index 100% rename from public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot/index.html rename to public/docs/_examples/upgrade-phonecat-2-hybrid/ts/aot-wip/index.html From 84ca050416c8f5f996234174260a8de4a80afdaa Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 14 Nov 2016 19:02:54 +0000 Subject: [PATCH 068/125] change let to const in bootstrap --- .../upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts | 2 +- .../upgrade-module/ts/app/1-to-2-projection/app.module.ts | 2 +- .../upgrade-module/ts/app/1-to-2-providers/app.module.ts | 2 +- .../upgrade-module/ts/app/2-to-1-providers/app.module.ts | 2 +- .../upgrade-module/ts/app/2-to-1-transclusion/app.module.ts | 2 +- .../_examples/upgrade-module/ts/app/downgrade-io/app.module.ts | 2 +- .../upgrade-module/ts/app/downgrade-static/app.module.ts | 2 +- .../_examples/upgrade-module/ts/app/upgrade-io/app.module.ts | 2 +- .../upgrade-module/ts/app/upgrade-static/app.module.ts | 2 +- .../docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts | 2 +- public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts index c8f1b4e49b..7a6b82cf92 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts @@ -23,7 +23,7 @@ angular.module('heroApp', []) import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts index 17e05bf0e0..080f80f0ef 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-projection/app.module.ts @@ -31,6 +31,6 @@ angular.module('heroApp', []) }) as angular.IDirectiveFactory); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts index 5d269f65c5..5754494853 100644 --- a/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/1-to-2-providers/app.module.ts @@ -41,6 +41,6 @@ angular.module('heroApp', []) platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts index 65c3dbcc8e..91235a1485 100644 --- a/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-providers/app.module.ts @@ -29,6 +29,6 @@ angular.module('heroApp', []) // #enddocregion register platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts index 0ce9170082..599e711b5e 100644 --- a/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/2-to-1-transclusion/app.module.ts @@ -34,6 +34,6 @@ angular.module('heroApp', []) ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts index b9b67eceb1..1e836cfc9d 100644 --- a/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-io/app.module.ts @@ -38,6 +38,6 @@ angular.module('heroApp', []) // #enddocregion downgradecomponent platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts index d7a3aba388..4d621d2f03 100644 --- a/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/downgrade-static/app.module.ts @@ -37,6 +37,6 @@ angular.module('heroApp', []) // #enddocregion downgradecomponent platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts index 0ce9170082..599e711b5e 100644 --- a/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-io/app.module.ts @@ -34,6 +34,6 @@ angular.module('heroApp', []) ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts index 3d252626d7..401963c35e 100644 --- a/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts +++ b/public/docs/_examples/upgrade-module/ts/app/upgrade-static/app.module.ts @@ -36,6 +36,6 @@ angular.module('heroApp', []) ); platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.body, ['heroApp'], {strictDi: true}); }); diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts index 6e25d85406..e43d57a538 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main-aot.ts @@ -5,7 +5,7 @@ import { UpgradeModule } from '@angular/upgrade/static'; import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory'; platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.documentElement, ['phonecatApp']); }); // #enddocregion bootstrap diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts index 0fd102449a..886e8ffac8 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/main.ts @@ -5,7 +5,7 @@ import { UpgradeModule } from '@angular/upgrade/static'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; + const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; upgrade.bootstrap(document.documentElement, ['phonecatApp']); }); // #enddocregion bootstrap From 1afe5dc97d457e045adb6c0e03d27023aa97eea5 Mon Sep 17 00:00:00 2001 From: Brandon Roberts Date: Sat, 29 Oct 2016 16:08:54 -0500 Subject: [PATCH 069/125] docs(router): Updated usage of observables in router tutorial and developer guide Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items --- .../ts/app/admin/admin-routing.module.1.ts | 34 ++++---- .../ts/app/admin/admin-routing.module.2.ts | 46 +++++------ .../ts/app/admin/admin-routing.module.3.ts | 38 ++++----- .../ts/app/admin/admin-routing.module.ts | 36 +++++---- .../router/ts/app/app-routing.module.1.ts | 14 ++-- .../router/ts/app/app-routing.module.2.ts | 12 +-- .../router/ts/app/app-routing.module.3.ts | 10 ++- .../router/ts/app/app-routing.module.4.ts | 12 +-- .../router/ts/app/app-routing.module.5.ts | 23 +++--- .../router/ts/app/app-routing.module.6.ts | 43 +++++----- .../router/ts/app/app-routing.module.ts | 52 +++++++------ .../_examples/router/ts/app/app.module.0.ts | 44 ++++++----- .../_examples/router/ts/app/app.module.1.ts | 22 +++--- .../_examples/router/ts/app/app.routing.1.ts | 44 ----------- .../_examples/router/ts/app/app.routing.2.ts | 22 ------ .../_examples/router/ts/app/app.routing.3.ts | 16 ---- .../_examples/router/ts/app/app.routing.4.ts | 13 ---- .../_examples/router/ts/app/app.routing.5.ts | 16 ---- .../_examples/router/ts/app/app.routing.6.ts | 21 ----- .../crisis-center-routing.module.1.ts | 40 +++++----- .../crisis-center-routing.module.2.ts | 78 ++++++++++--------- .../crisis-center-routing.module.3.ts | 50 ++++++------ .../crisis-center-routing.module.4.ts | 60 +++++++------- .../crisis-center-routing.module.ts | 46 +++++------ .../crisis-detail-resolve.service.ts | 2 +- .../crisis-detail.component.1.ts | 27 ++++--- .../crisis-center/crisis-detail.component.ts | 15 ++-- .../crisis-center/crisis-list.component.1.ts | 32 ++++---- .../crisis-center/crisis-list.component.ts | 23 +++--- .../ts/app/heroes/hero-detail.component.1.ts | 19 +++-- .../ts/app/heroes/hero-detail.component.2.ts | 15 ++-- .../ts/app/heroes/hero-detail.component.ts | 18 +++-- .../ts/app/heroes/hero-list.component.1.ts | 11 +-- .../ts/app/heroes/hero-list.component.ts | 20 +++-- .../ts/app/heroes/heroes-routing.module.ts | 18 +++-- .../router/ts/app/login-routing.module.ts | 18 +++-- .../toh-5/ts/app/dashboard.component.1.ts | 1 - .../toh-5/ts/app/hero-detail.component.html | 2 +- .../toh-5/ts/app/hero-detail.component.ts | 12 +-- .../toh-6/ts/app/hero-detail.component.ts | 9 +-- public/docs/ts/latest/guide/router.jade | 48 +++++++++--- public/docs/ts/latest/tutorial/toh-pt5.jade | 29 +++++-- 42 files changed, 540 insertions(+), 571 deletions(-) delete mode 100644 public/docs/_examples/router/ts/app/app.routing.1.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.2.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.3.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.4.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.5.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.6.ts diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts index 0cb1d8f5c7..e7d83f113f 100644 --- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts +++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { AdminComponent } from './admin.component'; import { AdminDashboardComponent } from './admin-dashboard.component'; @@ -9,24 +9,26 @@ import { ManageCrisesComponent } from './manage-crises.component'; import { ManageHeroesComponent } from './manage-heroes.component'; // #docregion admin-routes -@NgModule({ - imports: [ - RouterModule.forChild([ +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + children: [ { - path: 'admin', - component: AdminComponent, + path: '', children: [ - { - path: '', - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(adminRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts index 2087d7c913..dc3f28b5c4 100644 --- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts +++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; import { AdminComponent } from './admin.component'; import { AdminDashboardComponent } from './admin-dashboard.component'; @@ -11,29 +11,31 @@ import { ManageHeroesComponent } from './manage-heroes.component'; // #docregion admin-route, can-activate-child import { AuthGuard } from '../auth-guard.service'; +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ + { + path: '', + children: [ + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } + ], + // #enddocregion admin-route + // #docregion can-activate-child + canActivateChild: [AuthGuard] + // #docregion admin-route + } + ] + } +]; + @NgModule({ imports: [ - RouterModule.forChild([ - { - path: 'admin', - component: AdminComponent, - canActivate: [AuthGuard], - children: [ - { - path: '', - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ], - // #enddocregion admin-route - // #docregion can-activate-child - canActivateChild: [AuthGuard] - // #docregion admin-route - } - ] - } - ]) + RouterModule.forChild(adminRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts index 92878febb2..63f1c9aaf4 100644 --- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts +++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { AdminComponent } from './admin.component'; import { AdminDashboardComponent } from './admin-dashboard.component'; @@ -12,26 +12,28 @@ import { ManageHeroesComponent } from './manage-heroes.component'; import { AuthGuard } from '../auth-guard.service'; // #docregion can-activate-child -@NgModule({ - imports: [ - RouterModule.forChild([ +const adminRoutes: Routes = [ + { + path: 'admin', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ { - path: 'admin', - component: AdminComponent, - canActivate: [AuthGuard], + path: '', + canActivateChild: [AuthGuard], children: [ - { - path: '', - canActivateChild: [AuthGuard], - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(adminRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts index b83a75945b..a6ab988005 100644 --- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts +++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { AdminComponent } from './admin.component'; import { AdminDashboardComponent } from './admin-dashboard.component'; @@ -11,26 +11,28 @@ import { ManageHeroesComponent } from './manage-heroes.component'; // #docregion admin-route import { AuthGuard } from '../auth-guard.service'; -@NgModule({ - imports: [ - RouterModule.forChild([ +const adminRoutes: Routes = [ + { + path: '', + component: AdminComponent, + canActivate: [AuthGuard], + children: [ { path: '', - component: AdminComponent, - canActivate: [AuthGuard], + canActivateChild: [AuthGuard], children: [ - { - path: '', - canActivateChild: [AuthGuard], - children: [ - { path: 'crises', component: ManageCrisesComponent }, - { path: 'heroes', component: ManageHeroesComponent }, - { path: '', component: AdminDashboardComponent } - ] - } + { path: 'crises', component: ManageCrisesComponent }, + { path: 'heroes', component: ManageHeroesComponent }, + { path: '', component: AdminDashboardComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(adminRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.1.ts b/public/docs/_examples/router/ts/app/app-routing.module.1.ts index 8be1df9926..8b5f6983f5 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.1.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.1.ts @@ -1,17 +1,19 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; +const appRoutes: Routes = [ + { path: 'crisis-center', component: CrisisListComponent }, + { path: 'heroes', component: HeroListComponent } +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent } - ]) + RouterModule.forRoot(appRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.2.ts b/public/docs/_examples/router/ts/app/app-routing.module.2.ts index eed5688574..53f0f24056 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.2.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.2.ts @@ -1,15 +1,17 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisListComponent } from './crisis-list.component'; +const appRoutes: Routes = [ + { path: 'crisis-center', component: CrisisListComponent } +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - { path: 'crisis-center', component: CrisisListComponent }, - ]) + RouterModule.forRoot(appRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.3.ts b/public/docs/_examples/router/ts/app/app-routing.module.3.ts index a30d061dc3..5e8a08e40a 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.3.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.3.ts @@ -1,13 +1,15 @@ // #docplaster // #docregion import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; + +const appRoutes: Routes = [ + +]; @NgModule({ imports: [ - RouterModule.forRoot([ - - ]) + RouterModule.forRoot(appRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.4.ts b/public/docs/_examples/router/ts/app/app-routing.module.4.ts index 2ce11b8105..7ea7cb11ed 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.4.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.4.ts @@ -1,15 +1,17 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CanDeactivateGuard } from './can-deactivate-guard.service'; +const appRoutes: Routes = [ + +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - - ]) + RouterModule.forRoot(appRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.5.ts b/public/docs/_examples/router/ts/app/app-routing.module.5.ts index 6e35f64f73..33505b532b 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.5.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.5.ts @@ -2,7 +2,7 @@ // #docregion import { NgModule } from '@angular/core'; // #docregion import-router -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; // #enddocregion import-router import { CanDeactivateGuard } from './can-deactivate-guard.service'; @@ -11,17 +11,20 @@ import { AuthGuard } from './auth-guard.service'; // #enddocregion can-load-guard // #docregion lazy-load-admin, can-load-guard + +const appRoutes: Routes = [ + { + path: 'admin', + loadChildren: 'app/admin/admin.module#AdminModule', +// #enddocregion lazy-load-admin + canLoad: [AuthGuard] +// #docregion lazy-load-admin + } +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', - // #enddocregion lazy-load-admin - canLoad: [AuthGuard] - // #docregion lazy-load-admin - } - ]) + RouterModule.forRoot(appRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app-routing.module.6.ts b/public/docs/_examples/router/ts/app/app-routing.module.6.ts index 68bcc30413..c9f1f2916c 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.6.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.6.ts @@ -2,7 +2,7 @@ // #docregion, preload-v1 import { NgModule } from '@angular/core'; import { - RouterModule, + RouterModule, Routes, // #enddocregion preload-v1 PreloadAllModules // #docregion preload-v1 @@ -11,27 +11,30 @@ import { import { CanDeactivateGuard } from './can-deactivate-guard.service'; import { AuthGuard } from './auth-guard.service'; +const appRoutes: Routes = [ + { + path: 'admin', + loadChildren: 'app/admin/admin.module#AdminModule', + canLoad: [AuthGuard] + }, + { + path: '', + redirectTo: '/heroes', + pathMatch: 'full' + }, + { + path: 'crisis-center', + loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule' + } +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', - canLoad: [AuthGuard] - }, - { - path: '', - redirectTo: '/heroes', - pathMatch: 'full' - }, - { - path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule' - }, - ], - // #enddocregion preload-v1 - { preloadingStrategy: PreloadAllModules } - // #docregion preload-v1 + RouterModule.forRoot( + appRoutes + // #enddocregion preload-v1 + , { preloadingStrategy: PreloadAllModules } + // #docregion preload-v1 ) ], exports: [ diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts index 8fa63edb1c..9cef4db94e 100644 --- a/public/docs/_examples/router/ts/app/app-routing.module.ts +++ b/public/docs/_examples/router/ts/app/app-routing.module.ts @@ -1,36 +1,40 @@ // #docplaster // #docregion, preload-v1 -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CanDeactivateGuard } from './can-deactivate-guard.service'; import { AuthGuard } from './auth-guard.service'; import { PreloadSelectedModules } from './selective-preload-strategy'; +const appRoutes: Routes = [ + { + path: 'admin', + loadChildren: 'app/admin/admin.module#AdminModule', + canLoad: [AuthGuard] + }, + { + path: '', + redirectTo: '/heroes', + pathMatch: 'full' + }, + // #docregion preload-v2 + { + path: 'crisis-center', + loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule', + data: { + preload: true + } + } + // #enddocregion preload-v2 +]; + @NgModule({ imports: [ - RouterModule.forRoot([ - { - path: 'admin', - loadChildren: 'app/admin/admin.module#AdminModule', - canLoad: [AuthGuard] - }, - { - path: '', - redirectTo: '/heroes', - pathMatch: 'full' - }, - // #docregion preload-v2 - { - path: 'crisis-center', - loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule', - data: { - preload: true - } - } - // #enddocregion preload-v2 - ], - { preloadingStrategy: PreloadSelectedModules }) + RouterModule.forRoot( + appRoutes, + { preloadingStrategy: PreloadSelectedModules } + ) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/app.module.0.ts b/public/docs/_examples/router/ts/app/app.module.0.ts index df91982cd1..9844f30586 100644 --- a/public/docs/_examples/router/ts/app/app.module.0.ts +++ b/public/docs/_examples/router/ts/app/app.module.0.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion // #docregion router-basics -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { HeroListComponent } from './hero-list.component'; @@ -14,27 +14,29 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon import { PageNotFoundComponent as HomeComponent } from './not-found.component'; // #docregion route-config +const appRoutes: Routes = [ + // #docregion route-defs + // #docregion hero-detail-route + { path: 'hero/:id', component: HeroDetailComponent }, + // #enddocregion hero-detail-route + { path: 'crisis-center', component: CrisisListComponent }, + { + path: 'heroes', + component: HeroListComponent, + data: { + title: 'Heroes List' + } + }, + { path: '', component: HomeComponent }, + // #enddocregion route-defs + { path: '**', component: PageNotFoundComponent } +]; + @NgModule({ imports: [ BrowserModule, FormsModule, - RouterModule.forRoot([ - // #docregion route-defs - // #docregion hero-detail-route - { path: 'hero/:id', component: HeroDetailComponent }, - // #enddocregion hero-detail-route - { path: 'crisis-center', component: CrisisListComponent }, - { - path: 'heroes', - component: HeroListComponent, - data: { - title: 'Heroes List' - } - }, - { path: '', component: HomeComponent }, - // #enddocregion route-defs - { path: '**', component: PageNotFoundComponent } - ]) + RouterModule.forRoot(appRoutes) ], declarations: [ 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 index 6338c9bca3..f98ef7528e 100644 --- a/public/docs/_examples/router/ts/app/app.module.1.ts +++ b/public/docs/_examples/router/ts/app/app.module.1.ts @@ -1,10 +1,10 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { FormsModule } from '@angular/forms'; +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; // #docregion import-router, route-config -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; // #enddocregion import-router, route-config // #docregion router-basics @@ -12,16 +12,18 @@ import { AppComponent } from './app.component'; import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; +// #docregion route-config +const appRoutes: Routes = [ + { path: 'crisis-center', component: CrisisListComponent }, + { path: 'heroes', component: HeroListComponent } +]; +// #enddocregion route-config + @NgModule({ imports: [ BrowserModule, FormsModule, - // #docregion route-config - RouterModule.forRoot([ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent } - ]) - // #enddocregion route-config + RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent, diff --git a/public/docs/_examples/router/ts/app/app.routing.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts deleted file mode 100644 index 736f49b4fb..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.1.ts +++ /dev/null @@ -1,44 +0,0 @@ -// #docplaster -// #docregion -// #docregion route-config -import { ModuleWithProviders } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -// #enddocregion route-config -// #enddocregion - -// #docregion base-routes -import { HeroListComponent } from './hero-list.component'; -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; -import { HeroDetailComponent } from './heroes/hero-detail.component'; -import { PageNotFoundComponent } from './not-found.component'; -import { PageNotFoundComponent as HomeComponent } from './not-found.component'; -// #enddocregion base-routes - -// #docregion -// #docregion route-config -const appRoutes: Routes = [ - // #docregion route-defs - // #docregion hero-detail-route - { path: 'hero/:id', component: HeroDetailComponent }, - // #enddocregion hero-detail-route - { path: 'crisis-center', component: CrisisCenterComponent }, - { - path: 'heroes', - component: HeroListComponent, - data: { - title: 'Heroes List' - } - }, - { path: '', component: HomeComponent }, - // #enddocregion route-defs - { path: '**', component: PageNotFoundComponent } -]; - -export const appRoutingProviders: any[] = [ - -]; - -export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); -// #enddocregion route-config -// #enddocregion diff --git a/public/docs/_examples/router/ts/app/app.routing.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts deleted file mode 100644 index 1115c9084e..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.2.ts +++ /dev/null @@ -1,22 +0,0 @@ -// #docplaster -// #docregion -import { ModuleWithProviders } from '@angular/core'; -// #docregion route-config -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 appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisListComponent }, - { path: 'heroes', component: HeroListComponent } -]; - -export const appRoutingProviders: any[] = [ - -]; - -export const routing: ModuleWithProviders = 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 deleted file mode 100644 index 247ec7f2dd..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.3.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docplaster -// #docregion -import { ModuleWithProviders } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { CrisisCenterComponent } from './crisis-center/crisis-center.component'; - -const appRoutes: Routes = [ - { path: 'crisis-center', component: CrisisCenterComponent } -]; - -export const appRoutingProviders: any[] = [ - -]; - -export const routing: ModuleWithProviders = 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 deleted file mode 100644 index ff04dd8bfd..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.4.ts +++ /dev/null @@ -1,13 +0,0 @@ -// #docregion -import { ModuleWithProviders } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const appRoutes: Routes = [ - -]; - -export const appRoutingProviders: any[] = [ - -]; - -export const routing: ModuleWithProviders = 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 deleted file mode 100644 index 8ce3e0a10f..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.5.ts +++ /dev/null @@ -1,16 +0,0 @@ -// // #docregion -// import { ModuleWithProviders } from '@angular/core'; -// import { Routes, RouterModule } from '@angular/router'; -// -// import { loginRoutes, -// authProviders } from './login.routing'; -// -// const appRoutes: Routes = [ -// ...loginRoutes -// ]; -// -// export const appRoutingProviders: any[] = [ -// authProviders -// ]; -// -// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts deleted file mode 100644 index 23e2897cf1..0000000000 --- a/public/docs/_examples/router/ts/app/app.routing.6.ts +++ /dev/null @@ -1,21 +0,0 @@ -// // #docregion -// import { ModuleWithProviders } from '@angular/core'; -// // #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'; -// -// const appRoutes: Routes = [ -// ...loginRoutes -// ]; -// -// export const appRoutingProviders: any[] = [ -// authProviders, -// CanDeactivateGuard -// ]; -// -// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts index 829175cea6..e646f467d1 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisCenterHomeComponent } from './crisis-center-home.component'; import { CrisisListComponent } from './crisis-list.component'; @@ -9,30 +9,32 @@ import { CrisisCenterComponent } from './crisis-center.component'; import { CrisisDetailComponent } from './crisis-detail.component'; // #docregion routes -@NgModule({ - imports: [ - RouterModule.forChild([ +const crisisCenterRoutes: Routes = [ + { + path: 'crisis-center', + component: CrisisCenterComponent, + children: [ { - path: 'crisis-center', - component: CrisisCenterComponent, + path: '', + component: CrisisListComponent, children: [ + { + path: ':id', + component: CrisisDetailComponent + }, { path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] + component: CrisisCenterHomeComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts index 9c782edc0e..c3e3561dee 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion routes -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisCenterHomeComponent } from './crisis-center-home.component'; import { CrisisListComponent } from './crisis-list.component'; @@ -18,50 +18,52 @@ import { CrisisDetailResolve } from './crisis-detail-resolve.service'; // #enddocregion crisis-detail-resolve // #docregion routes -@NgModule({ - imports: [ - RouterModule.forChild([ - // #enddocregion routes - // #docregion redirect, routes +const crisisCenterRoutes: Routes = [ +// #enddocregion routes + // #docregion redirect, routes + { + path: '', + redirectTo: '/crisis-center', + pathMatch: 'full' + }, + // #enddocregion redirect, routes + // #docregion routes + { + path: 'crisis-center', + component: CrisisCenterComponent, + children: [ { path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect, routes - // #docregion routes - { - path: 'crisis-center', - component: CrisisCenterComponent, + component: CrisisListComponent, children: [ + { + path: ':id', + component: CrisisDetailComponent, + // #enddocregion routes + // #docregion can-deactivate-guard + canDeactivate: [CanDeactivateGuard], + // #enddocregion can-deactivate-guard + // #docregion crisis-detail-resolve + resolve: { + crisis: CrisisDetailResolve + } + // #enddocregion crisis-detail-resolve + // #docregion routes + }, { path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - // #enddocregion routes - // #docregion can-deactivate-guard - canDeactivate: [CanDeactivateGuard], - // #enddocregion can-deactivate-guard - // #docregion crisis-detail-resolve - resolve: { - crisis: CrisisDetailResolve - } - // #enddocregion crisis-detail-resolve - // #docregion routes - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] + component: CrisisCenterHomeComponent } ] } - // #docregion routes - ]) + ] + } + // #docregion routes +]; + +@NgModule({ + imports: [ + RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts index 693a72f8c2..6d605dbe84 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisCenterHomeComponent } from './crisis-center-home.component'; import { CrisisListComponent } from './crisis-list.component'; @@ -11,36 +11,38 @@ import { CrisisDetailComponent } from './crisis-detail.component'; // #docregion can-deactivate-guard import { CanDeactivateGuard } from '../can-deactivate-guard.service'; -@NgModule({ - imports: [ - RouterModule.forChild([ +const crisisCenterRoutes: Routes = [ + { + path: '', + redirectTo: '/crisis-center', + pathMatch: 'full' + }, + { + path: 'crisis-center', + component: CrisisCenterComponent, + children: [ { path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - { - path: 'crisis-center', - component: CrisisCenterComponent, + component: CrisisListComponent, children: [ + { + path: ':id', + component: CrisisDetailComponent, + canDeactivate: [CanDeactivateGuard] + }, { path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard] - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] + component: CrisisCenterHomeComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts index 17843ace3e..15b346d01f 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisCenterHomeComponent } from './crisis-center-home.component'; import { CrisisListComponent } from './crisis-list.component'; @@ -13,41 +13,43 @@ import { CanDeactivateGuard } from '../can-deactivate-guard.service'; // #docregion crisis-detail-resolve import { CrisisDetailResolve } from './crisis-detail-resolve.service'; -@NgModule({ - imports: [ - RouterModule.forChild([ - // #docregion redirect +const crisisCenterRoutes: Routes = [ + // #docregion redirect + { + path: '', + redirectTo: '/crisis-center', + pathMatch: 'full' + }, + // #enddocregion redirect + { + path: 'crisis-center', + component: CrisisCenterComponent, + children: [ { path: '', - redirectTo: '/crisis-center', - pathMatch: 'full' - }, - // #enddocregion redirect - { - path: 'crisis-center', - component: CrisisCenterComponent, + component: CrisisListComponent, children: [ + { + path: ':id', + component: CrisisDetailComponent, + canDeactivate: [CanDeactivateGuard], + resolve: { + crisis: CrisisDetailResolve + } + }, { path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard], - resolve: { - crisis: CrisisDetailResolve - } - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] + component: CrisisCenterHomeComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts index e1d2ae1207..75ca2a7ee8 100644 --- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts +++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts @@ -1,7 +1,7 @@ // #docplaster // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { CrisisCenterHomeComponent } from './crisis-center-home.component'; import { CrisisListComponent } from './crisis-list.component'; @@ -13,34 +13,36 @@ import { CanDeactivateGuard } from '../can-deactivate-guard.service'; // #docregion crisis-detail-resolve import { CrisisDetailResolve } from './crisis-detail-resolve.service'; -@NgModule({ - imports: [ - RouterModule.forChild([ +const crisisCenterRoutes: Routes = [ + { + path: '', + component: CrisisCenterComponent, + children: [ { path: '', - component: CrisisCenterComponent, + component: CrisisListComponent, children: [ + { + path: ':id', + component: CrisisDetailComponent, + canDeactivate: [CanDeactivateGuard], + resolve: { + crisis: CrisisDetailResolve + } + }, { path: '', - component: CrisisListComponent, - children: [ - { - path: ':id', - component: CrisisDetailComponent, - canDeactivate: [CanDeactivateGuard], - resolve: { - crisis: CrisisDetailResolve - } - }, - { - path: '', - component: CrisisCenterHomeComponent - } - ] + component: CrisisCenterHomeComponent } ] } - ]) + ] + } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule 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 index b4b92f30cc..25d2806e8f 100644 --- 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 @@ -10,7 +10,7 @@ export class CrisisDetailResolve implements Resolve { constructor(private cs: CrisisService, private router: Router) {} resolve(route: ActivatedRouteSnapshot): Promise|boolean { - let id = +route.params['id']; + let id = route.params['id']; return this.cs.getCrisis(id).then(crisis => { if (crisis) { 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 2a52513b6f..b314fb615f 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 @@ -1,5 +1,6 @@ // #docplaster // #docregion +import 'rxjs/add/operator/switchMap'; import { Component, OnInit, HostBinding, trigger, transition, animate, style, state } from '@angular/core'; @@ -12,9 +13,9 @@ import { DialogService } from '../dialog.service'; // #docregion template template: `
-

"{{editName}}"

+

"{{ editName }}"

- {{crisis.id}}
+ {{ crisis.id }}
@@ -74,21 +75,19 @@ export class CrisisDetailComponent implements OnInit { private router: Router, private route: ActivatedRoute, public dialogService: DialogService - ) { } + ) {} // #docregion ngOnInit ngOnInit() { - this.route.params.forEach((params: 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(); - } - }); + this.route.params + .switchMap((params: Params) => this.service.getCrisis(params['id'])) + .subscribe((crisis: Crisis) => { + if (crisis) { + this.editName = crisis.name; + this.crisis = crisis; + } else { // id not found + this.gotoCrises(); + } }); } // #enddocregion ngOnInit 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 cda3b7dc6a..d121242a13 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 @@ -11,9 +11,9 @@ import { DialogService } from '../dialog.service'; @Component({ template: `
-

"{{editName}}"

+

"{{ editName }}"

- {{crisis.id}}
+ {{ crisis.id }}
@@ -70,14 +70,15 @@ export class CrisisDetailComponent implements OnInit { private route: ActivatedRoute, private router: Router, public dialogService: DialogService - ) { } + ) {} // #docregion crisis-detail-resolve ngOnInit() { - this.route.data.forEach((data: { crisis: Crisis }) => { - this.editName = data.crisis.name; - this.crisis = data.crisis; - }); + this.route.data + .subscribe((data: { crisis: Crisis }) => { + this.editName = data.crisis.name; + this.crisis = data.crisis; + }); } // #enddocregion crisis-detail-resolve 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 80fa3483cd..53b9773212 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 @@ -1,49 +1,45 @@ // #docplaster // #docregion -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/switchMap'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router, Params } from '@angular/router'; import { Crisis, CrisisService } from './crisis.service'; -import { Subscription } from 'rxjs/Subscription'; +import { Observable } from 'rxjs/Observable'; @Component({ // #docregion template template: `
    -
  • - {{crisis.id}} {{crisis.name}} + {{ crisis.id }} {{ crisis.name }}
`, // #enddocregion template }) -export class CrisisListComponent implements OnInit, OnDestroy { - crises: Crisis[]; +export class CrisisListComponent implements OnInit { + crises: Observable; selectedId: number; - private sub: Subscription; // #docregion relative-navigation-ctor constructor( private service: CrisisService, private route: ActivatedRoute, - private router: Router) {} + private router: Router + ) {} // #enddocregion relative-navigation-ctor ngOnInit() { - this.sub = this.route - .params - .subscribe(params => { + this.crises = this.route.params + .switchMap((params: Params) => { this.selectedId = +params['id']; - this.service.getCrises() - .then(crises => this.crises = crises); + return this.service.getCrises(); }); } - ngOnDestroy() { - this.sub.unsubscribe(); - } - // #docregion select onSelect(crisis: Crisis) { // Absolute link 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 350867adbc..2b52f43f57 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 @@ -1,17 +1,20 @@ // #docplaster // #docregion +import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router, Params } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; + import { Crisis, CrisisService } from './crisis.service'; @Component({ template: `
    -
  • - {{crisis.id}} {{crisis.name}} + {{ crisis.id }} {{ crisis.name }}
@@ -19,25 +22,25 @@ import { Crisis, CrisisService } from './crisis.service'; ` }) export class CrisisListComponent implements OnInit { - crises: Crisis[]; - public selectedId: number; + crises: Observable; + selectedId: number; constructor( private service: CrisisService, private route: ActivatedRoute, private router: Router - ) { } + ) {} isSelected(crisis: Crisis) { return crisis.id === this.selectedId; } ngOnInit() { - this.route.params.forEach((params: Params) => { - this.selectedId = params['id']; - this.service.getCrises() - .then(crises => this.crises = crises); - }); + this.crises = this.route.params + .switchMap((params: Params) => { + this.selectedId = +params['id']; + return this.service.getCrises(); + }); } // #docregion relative-navigation 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 90d0510bd7..93f0efaf0b 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 @@ -1,5 +1,8 @@ // #docplaster // #docregion +// #docregion rxjs-operator-import +import 'rxjs/add/operator/switchMap'; +// #enddocregion rxjs-operator-import import { Component, OnInit } from '@angular/core'; // #docregion imports import { Router, ActivatedRoute, Params } from '@angular/router'; @@ -11,9 +14,9 @@ import { Hero, HeroService } from './hero.service'; template: `

HEROES

-

"{{hero.name}}"

+

"{{ hero.name }}"

- {{hero.id}}
+ {{ hero.id }}
@@ -37,14 +40,16 @@ export class HeroDetailComponent implements OnInit { // #docregion ngOnInit ngOnInit() { - this.route.params.forEach((params: Params) => { - let id = +params['id']; // (+) converts string 'id' to a number - this.service.getHero(id).then(hero => this.hero = hero); - }); + this.route.params + // (+) converts string 'id' to a number + .switchMap((params: Params) => this.service.getHero(+params['id'])) + .subscribe((hero: Hero) => this.hero = hero); } // #enddocregion ngOnInit // #docregion gotoHeroes - gotoHeroes() { this.router.navigate(['/heroes']); } + gotoHeroes() { + this.router.navigate(['/heroes']); + } // #enddocregion gotoHeroes } 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 07b876c79f..c3b69be965 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 @@ -9,9 +9,9 @@ import { Hero, HeroService } from './hero.service'; template: `

HEROES

-

"{{hero.name}}"

+

"{{ hero.name }}"

- {{hero.id}}
+ {{ hero.id }}
@@ -28,15 +28,20 @@ export class HeroDetailComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, - private service: HeroService) {} + private service: HeroService + ) {} // #docregion snapshot ngOnInit() { // (+) converts string 'id' to a number let id = +this.route.snapshot.params['id']; - this.service.getHero(id).then(hero => this.hero = hero); + + this.service.getHero(id) + .then((hero: Hero) => this.hero = hero); } // #enddocregion snapshot - gotoHeroes() { this.router.navigate(['/heroes']); } + gotoHeroes() { + this.router.navigate(['/heroes']); + } } 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 42adbe2d98..c528651f44 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 @@ -1,5 +1,8 @@ // #docplaster // #docregion +// #docregion rxjs-operator-import +import 'rxjs/add/operator/switchMap'; +// #docregion rxjs-operator-import // #docregion route-animation-imports import { Component, OnInit, HostBinding, trigger, transition, animate, @@ -14,9 +17,9 @@ import { Hero, HeroService } from './hero.service'; template: `

HEROES

-

"{{hero.name}}"

+

"{{ hero.name }}"

- {{hero.id}}
+ {{ hero.id }}
@@ -71,15 +74,16 @@ export class HeroDetailComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router, - private service: HeroService) {} + private service: HeroService + ) {} // #enddocregion ctor // #docregion ngOnInit ngOnInit() { - this.route.params.forEach((params: Params) => { - let id = +params['id']; // (+) converts string 'id' to a number - this.service.getHero(id).then(hero => this.hero = hero); - }); + this.route.params + // (+) converts string 'id' to a number + .switchMap((params: Params) => this.service.getHero(+params['id'])) + .subscribe((hero: Hero) => this.hero = hero); } // #enddocregion ngOnInit diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts index 0b7298009c..878fef4694 100644 --- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts +++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts @@ -11,25 +11,26 @@ import { Hero, HeroService } from './hero.service'; template: `

HEROES

    -
  • - {{hero.id}} {{hero.name}} + {{ hero.id }} {{ hero.name }}
` // #enddocregion template }) export class HeroListComponent implements OnInit { - heroes: Hero[]; + heroes: Promise; // #docregion ctor constructor( private router: Router, - private service: HeroService) { } + private service: HeroService + ) {} // #enddocregion ctor ngOnInit() { - this.service.getHeroes().then(heroes => this.heroes = heroes); + this.heroes = this.service.getHeroes(); } // #docregion select 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 068c9680d0..ff0378a836 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 @@ -1,6 +1,10 @@ // #docplaster // #docregion // TODO SOMEDAY: Feature Componetized like CrisisCenter +// #docregion rxjs-imports +import 'rxjs/add/operator/switchMap'; +import { Observable } from 'rxjs/Observable'; +// #enddocregion rxjs-imports import { Component, OnInit } from '@angular/core'; // #docregion import-router import { Router, ActivatedRoute, Params } from '@angular/router'; @@ -13,19 +17,19 @@ import { Hero, HeroService } from './hero.service'; template: `

HEROES

    -
  • - {{hero.id}} {{hero.name}} + {{ hero.id }} {{ hero.name }}
` // #enddocregion template }) +// #docregion ctor export class HeroListComponent implements OnInit { - heroes: Hero[]; + heroes: Observable; - // #docregion ctor private selectedId: number; constructor( @@ -36,10 +40,10 @@ export class HeroListComponent implements OnInit { // #enddocregion ctor ngOnInit() { - this.route.params.forEach((params: Params) => { + this.heroes = this.route.params + .switchMap((params: Params) => { this.selectedId = +params['id']; - this.service.getHeroes() - .then(heroes => this.heroes = heroes); + return this.service.getHeroes(); }); } // #enddocregion ctor @@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit { this.router.navigate(['/hero', hero.id]); } // #enddocregion select - +// #docregion ctor } // #enddocregion diff --git a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts index 96bf339394..dbee521793 100644 --- a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts +++ b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts @@ -1,18 +1,20 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; import { HeroListComponent } from './hero-list.component'; import { HeroDetailComponent } from './hero-detail.component'; +const heroesRoutes: Routes = [ + { path: 'heroes', component: HeroListComponent }, +// #docregion hero-detail-route + { path: 'hero/:id', component: HeroDetailComponent } +// #enddocregion hero-detail-route +]; + @NgModule({ imports: [ - RouterModule.forChild([ - { path: 'heroes', component: HeroListComponent }, - // #docregion hero-detail-route - { path: 'hero/:id', component: HeroDetailComponent } - // #enddocregion hero-detail-route - ]) + RouterModule.forChild(heroesRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/router/ts/app/login-routing.module.ts b/public/docs/_examples/router/ts/app/login-routing.module.ts index 43c0e28a97..96d05e7972 100644 --- a/public/docs/_examples/router/ts/app/login-routing.module.ts +++ b/public/docs/_examples/router/ts/app/login-routing.module.ts @@ -1,15 +1,17 @@ // #docregion -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AuthGuard } from './auth-guard.service'; -import { AuthService } from './auth.service'; -import { LoginComponent } from './login.component'; +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { AuthGuard } from './auth-guard.service'; +import { AuthService } from './auth.service'; +import { LoginComponent } from './login.component'; + +const loginRoutes: Routes = [ + { path: 'login', component: LoginComponent } +]; @NgModule({ imports: [ - RouterModule.forChild([ - { path: 'login', component: LoginComponent } - ]) + RouterModule.forChild(loginRoutes) ], exports: [ RouterModule diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts index 430a30ebbe..3c92b205c8 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts @@ -6,4 +6,3 @@ import { Component } from '@angular/core'; template: '

My Dashboard

' }) export class DashboardComponent { } - diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html index cf96fc2169..8f2ff9d90c 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html @@ -11,4 +11,4 @@ -
\ No newline at end of file +
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 3ca01d2361..3557aa31d5 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,5 +1,7 @@ // #docplaster -// #docregion , v2 +// #docregion , v2, rxjs-import +import 'rxjs/add/operator/switchMap'; +// #enddocregion rxjs-import import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; @@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit { // #docregion ngOnInit ngOnInit(): void { - this.route.params.forEach((params: Params) => { - let id = +params['id']; - this.heroService.getHero(id) - .then(hero => this.hero = hero); - }); + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); } // #enddocregion ngOnInit 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 001b34baf7..a0342415f2 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,4 +1,5 @@ // #docregion +import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; @@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit { ) {} ngOnInit(): void { - this.route.params.forEach((params: Params) => { - let id = +params['id']; - this.heroService.getHero(id) - .then(hero => this.hero = hero); - }); + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); } // #docregion save diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index ce19d50a03..16a67cac35 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -445,7 +445,7 @@ h4#define-routes Define routes :marked Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations. As our application grows, we'll want to refactor our routing configuration into a separate file - and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose + and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated for the purpose of routing in feature modules. :marked @@ -874,6 +874,11 @@ h3#activated-route ActivatedRoute: the one-stop-shop for route information +makeExcerpt('app/heroes/hero-detail.component.1.ts (activated route)', 'imports') +:marked + We import the `switchMap` operator because we need it later to process the `Observable` route parameters. + ++makeExcerpt('app/heroes/hero-detail.component.1.ts (switchMap operator import)', 'rxjs-operator-import') + a#hero-detail-ctor :marked As usual, we write a constructor that asks Angular to inject services @@ -882,13 +887,22 @@ a#hero-detail-ctor +makeExcerpt('app/heroes/hero-detail.component.ts (constructor)', 'ctor') :marked - Later, in the `ngOnInit` method, - we use the `ActivatedRoute` service to retrieve the parameters for our route. - Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and - tell the `HeroService` to fetch the hero with that `id`. + Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters + for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to + provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`. +makeExcerpt('app/heroes/hero-detail.component.ts (ngOnInit)', 'ngOnInit') +.l-sub-section + :marked + The `switchMap` operator allows you to perform an action with the current value of the `Observable`, + and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles + an `Observable` as well as a `Promise` to retrieve the value they emit. + + The `switchMap` operator will also cancel any in-flight requests if our user re-navigates to the route + while still retrieving a hero. Our `Observable` is _cold_ until subscribed to, so we use the `subscribe` method + to get and set our retrieved `Hero`. + .l-sub-section :marked Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`. @@ -1096,10 +1110,20 @@ code-example(language="bash"). +makeExcerpt('app/heroes/hero-list.component.ts (import)', 'import-router') :marked - Then we use the `ActivatedRoute` to access the `params` _Observable_ so we can subscribe - and extract the `id` parameter as the `selectedId`: + We'll import the `switchMap` operator to perform an operation on our `Observable` + of route parameters. -+makeExcerpt('app/heroes/hero-list.component.ts (constructor)', 'ctor') ++makeExcerpt('app/heroes/hero-list.component.ts (rxjs imports)', 'rxjs-imports') + +:marked + Then we inject the `ActivatedRoute` in the `HeroListComponent` constructor. + ++makeExcerpt('app/heroes/hero-list.component.ts (constructor and ngOnInit)', 'ctor') + +:marked + The ActivatedRoute.params property is an Observable of route parameters. The params emits new id values + when the user navigates to the component. In ngOnInit we subscribe to those values, set the selectedId, + and get the heroes. .l-sub-section :marked @@ -2150,7 +2174,7 @@ h3#preloading Pre-Loading: background loading of feature areas The *Router* also supports [custom preloading strategies](#custom-preloading) for fine control over which modules to pre-load. - We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy + We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy to load _all_ lazy loaded modules as soon as possible. @@ -2183,9 +2207,9 @@ h3#preloading Pre-Loading: background loading of feature areas `) :marked - The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options. + The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options. We import the `PreloadAllModules` token from the router package and set the configuration option's `preloadingStrategy` property - with this `PreloadAllModules` token. + with this `PreloadAllModules` token. This tells the built-in *Router* pre-loader to immediately load **all** [unguarded](#preload-canload) feature areas that use `loadChildren`. +makeExcerpt('app/app-routing.module.6.ts (preload all)', '') @@ -2207,7 +2231,7 @@ h3#preloading Pre-Loading: background loading of feature areas Since we want to take advantage of this, we'll add a custom strategy that _only_ preloads the modules we select. We'll enable the preloading by using the *Route Data*, which, as we learned, is an object to store arbitrary route data and and [resolve data](#resolve-guard). - We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add + We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message to the console for the preloaded module. diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index e237165347..584ec4b37b 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -511,6 +511,11 @@ block route-params +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') +:marked + We'll also import the `switchMap` operator to use later with the route parameters `Observable`. + ++makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import') + :marked We tell the class that we want to implement the `OnInit` interface. @@ -526,14 +531,26 @@ block ngOnInit block extract-id :marked - Notice how we extract the `id` by calling the `forEach` method - which will deliver our !{_array} of route parameters. + Note how the `switchMap` operator maps the id in the observable route parameters + to a new `Observable`, the result of the `HeroService.getHero` method. + + If the user re-navigates to this component while a getHero request is still inflight, + switchMap cancels that old request before calling `HeroService.getHero` again. - var _str2int = _docsFor == 'dart' ? 'int.parse static method' : 'JavaScript (+) operator' :marked The hero `id` is a number. Route parameters are *always strings*. So we convert the route parameter value to a number with the !{_str2int}. +.l-sub-section + :marked + ### Do I need to unsubscribe? + + The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes + the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against + memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`. + +:marked ### Add *HeroService.getHero* The problem with this bit of code is that `HeroService` doesn't have a `getHero` method! @@ -654,16 +671,16 @@ block extract-id +makeExample('app/app-routing.module.ts') :marked Noteworthy points, typical of _Routing Modules_: - * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern. + * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern. - * Add `RouterModule.forRoot(routes)` to `imports`. + * Adds `RouterModule.forRoot(routes)` to `imports`. - * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables + * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables such as `RouterLink` and `RouterOutlet`. * No `declarations`! Declarations are the responsibility of the companion module. - * Add module `providers` for guard services if you have them; there are none in this example. + * Adds module `providers` for guard services if you have them; there are none in this example. ### Update _AppModule_ From b87a0ea9be1ba47e5a71807ea615b08cd8474cd2 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 14 Nov 2016 19:07:06 +0000 Subject: [PATCH 070/125] elaborate upgraded component alert --- public/docs/ts/latest/guide/upgrade.jade | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 4d15888a7b..d2f535b583 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -586,7 +586,9 @@ figure .alert.is-helpful :marked Upgraded componentes are Angular 2 **directives**, instead of **components**, because Angular 2 - is unaware that Angular 1 will create elements under it. + is unaware that Angular 1 will create elements under it. As far as Angular 2 knows, the upgraded + component is just a directive - a tag - and Angular 2 doesn't have to concern itself with + it's children. :marked An upgraded component may also have inputs and outputs, as defined by From 5fa0b690666562a412dbf806acc50942e9bee459 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 14 Nov 2016 19:07:59 +0000 Subject: [PATCH 071/125] use 2.2.0 versions instead of rc0 --- public/docs/_examples/package.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index b1e145b2af..1c16e0f39a 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -15,17 +15,17 @@ } ], "dependencies": { - "@angular/common": "2.2.0-rc.0", - "@angular/compiler": "2.2.0-rc.0", - "@angular/compiler-cli": "2.2.0-rc.0", - "@angular/core": "2.2.0-rc.0", - "@angular/forms": "2.2.0-rc.0", - "@angular/http": "2.2.0-rc.0", - "@angular/platform-browser": "2.2.0-rc.0", - "@angular/platform-browser-dynamic": "2.2.0-rc.0", - "@angular/platform-server": "2.2.0-rc.0", - "@angular/router": "~3.1.1", - "@angular/upgrade": "2.2.0-rc.0", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/compiler-cli": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/platform-server": "~2.2.0", + "@angular/router": "~3.2.0", + "@angular/upgrade": "~2.2.0", "angular-in-memory-web-api": "~0.1.13", "core-js": "^2.4.1", From 17c7e154672dbf5feeeb971ed3b594d318703748 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Mon, 14 Nov 2016 23:11:37 +0000 Subject: [PATCH 072/125] chore: update to 2.2.0 (#2797) --- .travis.yml | 2 +- public/docs/_examples/package.json | 25 ++++++++++--------- .../_examples/quickstart/js/package.1.json | 20 +++++++-------- .../_examples/quickstart/ts/package.1.json | 20 +++++++-------- .../_examples/webpack/ts/package.webpack.json | 16 ++++++------ public/docs/js/latest/_data.json | 2 +- public/docs/ts/latest/_data.json | 2 +- 7 files changed, 44 insertions(+), 43 deletions(-) diff --git a/.travis.yml b/.travis.yml index 394e81297a..2e3b260e29 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ env: - DBUS_SESSION_BUS_ADDRESS=/dev/null - DISPLAY=:99.0 - CHROME_BIN=chromium-browser - - LATEST_RELEASE=2.1.1 + - LATEST_RELEASE=2.2.0 - TASK_FLAGS="--dgeni-log=warn" matrix: - TASK=lint diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 5aeaa55c1f..160fa06771 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -15,19 +15,20 @@ } ], "dependencies": { - "@angular/common": "~2.1.1", - "@angular/compiler": "~2.1.1", - "@angular/compiler-cli": "~2.1.1", - "@angular/core": "~2.1.1", - "@angular/forms": "~2.1.1", - "@angular/http": "~2.1.1", - "@angular/platform-browser": "~2.1.1", - "@angular/platform-browser-dynamic": "~2.1.1", - "@angular/platform-server": "~2.1.1", - "@angular/router": "~3.1.1", - "@angular/upgrade": "~2.1.1", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/compiler-cli": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/platform-server": "~2.2.0", + "@angular/router": "~3.2.0", + "@angular/upgrade": "~2.2.0", + + "angular-in-memory-web-api": "~0.1.15", - "angular-in-memory-web-api": "~0.1.14", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rollup": "^0.36.0", diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 212ffc8735..497c673b7f 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -12,17 +12,17 @@ } ], "dependencies": { - "@angular/common": "~2.1.1", - "@angular/compiler": "~2.1.1", - "@angular/core": "~2.1.1", - "@angular/forms": "~2.1.1", - "@angular/http": "~2.1.1", - "@angular/platform-browser": "~2.1.1", - "@angular/platform-browser-dynamic": "~2.1.1", - "@angular/router": "~3.1.1", - "@angular/upgrade": "~2.1.1", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/router": "~3.2.0", + "@angular/upgrade": "~2.2.0", - "angular-in-memory-web-api": "~0.1.5", + "angular-in-memory-web-api": "~0.1.15", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 0eddc20502..3236914309 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -14,17 +14,17 @@ } ], "dependencies": { - "@angular/common": "~2.1.1", - "@angular/compiler": "~2.1.1", - "@angular/core": "~2.1.1", - "@angular/forms": "~2.1.1", - "@angular/http": "~2.1.1", - "@angular/platform-browser": "~2.1.1", - "@angular/platform-browser-dynamic": "~2.1.1", - "@angular/router": "~3.1.1", - "@angular/upgrade": "~2.1.1", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/router": "~3.2.0", + "@angular/upgrade": "~2.2.0", - "angular-in-memory-web-api": "~0.1.13", + "angular-in-memory-web-api": "~0.1.15", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index ed36c0f33f..553ca9338a 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -14,14 +14,14 @@ } ], "dependencies": { - "@angular/common": "~2.1.1", - "@angular/compiler": "~2.1.1", - "@angular/core": "~2.1.1", - "@angular/forms": "~2.1.1", - "@angular/http": "~2.1.1", - "@angular/platform-browser": "~2.1.1", - "@angular/platform-browser-dynamic": "~2.1.1", - "@angular/router": "~3.1.1", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/router": "~3.2.0", "core-js": "^2.4.1", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.25" diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index d3fff22a9c..18ed3ed0bd 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "Angular release is 2.1. View the change log to see enhancements, fixes, and breaking changes." + "banner": "The latest Angular release is 2.2. View the change log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 3270bdb011..71d3e2cded 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "TypeScript", "menuTitle": "Docs Home", - "banner": "Angular release is 2.1. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself." + "banner": "The latest Angular release is 2.2. Learn about the latest updates to the documentation. View the Angular change log for enhancements, fixes, and breaking changes in Angular itself." }, "cli-quickstart": { From eb60bfe20e2c6eda6d247e1f0393932088de93e1 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Tue, 15 Nov 2016 00:44:35 +0000 Subject: [PATCH 073/125] Squashed commit of the following: MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit commit 17c7e154672dbf5feeeb971ed3b594d318703748 Author: Filipe Silva Date: Mon Nov 14 23:11:37 2016 +0000 chore: update to 2.2.0 (#2797) commit 1e5facfb980b85313d51559b3272950f662ce20c Merge: 5c4cc9a db0fac9 Author: Ward Bell Date: Mon Nov 14 12:44:51 2016 -0800 Merge pull request #2799 from IdeaBlade/docs-changelog-2.2.0 chore(changelog): update docs changelog for Ng v.2.2.0 commit 5c4cc9a3c8b2718b71ab7c3d1b5dd02bfdd5f1fc Merge: 43457e9 1afe5dc Author: Ward Bell Date: Mon Nov 14 12:43:09 2016 -0800 docs(router): Updated usage of observables in router tutorial and developer guide (#2696) Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items commit 43457e9765c63b3889ab449959fe295327390315 Merge: a423a5a 2649647 Author: Jesús Rodríguez Date: Mon Nov 14 21:38:49 2016 +0100 chore: add upgrade/static to API reference (#2755) commit 1afe5dc97d457e045adb6c0e03d27023aa97eea5 Author: Brandon Roberts Date: Sat Oct 29 16:08:54 2016 -0500 docs(router): Updated usage of observables in router tutorial and developer guide Moved route configuration into separate variable for consistency Added async pipe to handle subscriptions for list items commit db0fac94c980c99d9575a90d4b6bb15f572f9161 Author: Ward Bell Date: Mon Nov 14 10:48:09 2016 -0800 chore(changelog): update docs changelog for Ng v.2.2.0 commit a423a5abc704280794b6dea69cf1c9e76bbc9da1 Author: ikilled Date: Mon Nov 14 18:39:46 2016 +0000 clicking on Books & Training sends user to Education (#2701) When user clicks in Books & Training item in footer the website should take them to Education section (anchor) in the middle of the page, not to the top where Development section is. commit d63b1ccea36f4cf52333c846184b8e6876284a0a Merge: f627706 8508140 Author: Ward Bell Date: Mon Nov 14 10:35:48 2016 -0800 docs(router): fixed verbiage about router-outlet (#2746) commit f627706779c418ca8357aacd52aba5b5b7d05cb0 Author: Ward Bell Date: Mon Nov 14 10:26:13 2016 -0800 docs(cookbook-aot-compiler): improve Ahead-of-Time compilation cookbook (#2798) closes #2790 commit 75464d585cac944e3cffb4401663e4c1185b7cb5 Merge: 78e2584 02f5559 Author: Ward Bell Date: Mon Nov 14 09:34:36 2016 -0800 Merge pull request #2794 from IdeaBlade/chalin-guide-misc-fix-1113 docs: guide/index misc Jade fixes commit 78e25840b229b0fe345feacf786f34e62b2cb963 Merge: 182493f 85062c4 Author: Ward Bell Date: Mon Nov 14 09:33:55 2016 -0800 Merge pull request #2795 from IdeaBlade/chalin-util-js-getExampleName-1114 chore(util.js): getExampleName - support optional .html suffix commit 182493f8779fa37422dd942813fc5681dbdac55f Merge: 9e9666b 53f5538 Author: Ward Bell Date: Mon Nov 14 09:28:40 2016 -0800 feat(cb-ts-to-js): add es6 examples (#2606) * feat(cb-ts-to-js): add es6 examples update docshredder to shred .es6 optimized focus gulp task convert imports and metadate sections add DI section add host and query metadata section add intro fix capitalization and grammar * docs(ts-to-js): ward's edits (incomplete) * docs(ts-to-js): add separate template files for some components * docs(cb-ts-to-js): refactor sample code commit 53f5538859c4d243552d288872e8c8fc8156f446 Author: Ward Bell Date: Sun Nov 13 14:09:28 2016 -0800 docs(cb-ts-to-js): refactor sample code commit 9e9666b2cc3ce57cac172894e935f0c6b9f7d6f4 Author: Patrice Chalin Date: Mon Nov 14 08:34:10 2016 -0800 docs(template-syntax/dart): updates to match TS (#2751) * docs(template-syntax): refresh _cache * docs(template-syntax/dart): updates to match TS - Propagates TS-side changes: - update #2639 - new two-way binding section, and - fix #2687 - invalid attr syntax - Fixes - #1898 - currency symbols - #2748 - Dart template-syntax e2e is failing - #2749 - deprecated `[className]` * updated _cache file following Kathy's post-review edits * Post Ward's review w/ cache updated - Keep `my-` and `my` prefixes on selectors (for components and directives, respectively). - Drop `my-` from file names. - Drop `My` as component class prefix. commit 5dcffd69dc09b48d99af4acd0dd06b029416e103 Author: Patrice Chalin Date: Sun Nov 13 19:37:13 2016 -0800 docs: dart glossary - fix misnamed Jade block commit 6680acc513a0178bb522f5bc99d66f366542d33c Merge: 14db838 3b03573 Author: Kathy Walrath Date: Mon Nov 14 08:31:11 2016 -0800 docs(toh): avoid dup header title (#2796) * remove redundant headings * update _cache * misc: make block comment a Jade comment (This prevents the text from appearing in the generated HTML as an HTML comment.) commit 3b03573f340cc7fc43e2642bdf52fb1bae61aff0 Author: Patrice Chalin Date: Mon Nov 14 05:30:05 2016 -0800 misc: make block comment a Jade comment (This prevents the text from appearing in the generated HTML as an HTML comment.) commit 470426d5e03829442449cb59c0528811c6011c37 Author: Patrice Chalin Date: Mon Nov 14 05:25:36 2016 -0800 update _cache commit c12d75a477a1e33ea37886c0bd5942ddb9c955b3 Author: Patrice Chalin Date: Mon Nov 14 05:23:35 2016 -0800 remove redundant headings commit 85062c47cac44d63b06b97ae86b2a4f596889ad6 Author: Patrice Chalin Date: Mon Nov 14 04:56:12 2016 -0800 chore(util.js): getExampleName - support optional .html suffix commit 02f55592b232618407a3a8fce70845589ee78978 Author: Patrice Chalin Date: Mon Nov 14 04:29:17 2016 -0800 docs: guide/index misc Jade fixes - Eliminate use of deprecated `clear=“all”` in `
`. - No need for local `langName`; use global `_Lang` var instead. - Remove duplicate id `learning-path`. commit 14db838f8b76309597140d9857acb92c76c864f6 Author: Naomi Black Date: Sun Nov 13 21:48:52 2016 -0500 news(nov): Some news and a blog post update commit eff32ecbdd5a52d2240afd5ad4e14bdab21c9a8f Author: Naomi Black Date: Sun Nov 13 21:48:37 2016 -0500 chore(bios): update some bios for leads commit 3ee36fbba211d115414d322b17a67626ed90d450 Author: koyner Date: Sun Nov 13 22:59:59 2016 +0100 docs(forms): grammar fix (#2764) commit b11438f211ed7009335bc18f5cbf2950fc4014fa Author: Ward Bell Date: Fri Nov 11 19:44:00 2016 -0800 docs(ts-to-js): add separate template files for some components commit 33b61977b2cd0bc35b257ce526d5dd2fd460cd10 Author: Ward Bell Date: Thu Nov 3 01:37:55 2016 -0700 docs(ts-to-js): ward's edits (incomplete) commit 12eb19fa3c34bb48b28da8bd33d94d7cc0526cf5 Author: Filipe Silva Date: Thu Oct 13 17:59:00 2016 +0100 feat(cb-ts-to-js): add es6 examples update docshredder to shred .es6 optimized focus gulp task convert imports and metadate sections add DI section add host and query metadata section add intro fix capitalization and grammar commit 64a8754386c0aa727e61d140d86bd31b6891ea99 Author: Patrice Chalin Date: Thu Nov 10 20:01:36 2016 -0800 example(template-syntax): follow style-guide and other updates (#2750) commit 7619cdf4a4ac592d74c25a372234c2d3964355dc Author: JesĂşs RodrĂ­guez Date: Thu Nov 10 23:47:30 2016 +0100 chore: ability to open a plunker on a specific file (#2778) commit 0161d9db39b08be6a29e5a00b362c1eff12bf6b9 Author: Filipe Silva Date: Thu Nov 10 22:45:22 2016 +0000 chore: ignore debug.log file (#2785) This file is generated when running `gulp e2e` and often enough committed by mistake. /cc @foxandxss commit f92983cc6f7a895b751a6023791a283bb2e41073 Author: JesĂşs RodrĂ­guez Date: Thu Nov 10 23:44:51 2016 +0100 docs(ngmodule): fix plunkers (#2786) commit 03db4bbc4873d8b68d08ef32bfa1b2b43cf46224 Author: Martin Eckardt Date: Wed Nov 9 17:43:40 2016 +0100 docs(a1-a2): fix link to Filter/Pipes (#2770) commit 60565a5cf1dfa7e43cb18b448c7d61c5f765f0de Author: Pavol Pitonak Date: Wed Nov 9 17:42:57 2016 +0100 docs(testing): configureTestModule -> configureTestingModule (#2767) commit ec471974a776dc208b2c56115cf1105fa39c8f88 Author: Catalin Zalog Date: Wed Nov 9 18:41:56 2016 +0200 docs(style-guide): fix missing *.ts (#2763) commit 234e468d5d6a11782e306901f80546d8989f17b3 Author: Patrice Chalin Date: Tue Nov 8 08:21:02 2016 -0800 docs: intra-site links should be relative Contributes to #2772. commit 6b37da78e4901a57b6ebf77720ec4796f2bb5f5f Author: Patrice Chalin Date: Tue Nov 8 09:27:10 2016 -0800 docs(forms/dart): remove mention of FORM_DIRECTIVES Fixes #2752 commit c24dd074a6acbceb87f8e973969c9bd94f769d8f Author: Patrice Chalin Date: Tue Nov 8 14:48:03 2016 -0800 docs(toh-5/dart): use routerLink in dashboard (#2744) * docs(toh-5/dart): use routerLink in dashboard * minor edits to TS jade * remove dart/toh-pt5 from bad-code-excerpt-skip-patterns commit 2808878c36d7429611e4f0584323e99c9b83219e Author: Patrice Chalin Date: Tue Nov 8 07:41:27 2016 -0800 chore(deploy): don't name project in firebase deploy Naming the project would sometimes cause gulp to report `An unexpected error has occurred` with exit code 2. commit 2649647ecb14a28932405d6b0bc22afd1f931089 Author: Jesus Rodriguez Date: Sat Nov 5 00:37:47 2016 +0100 chore: add upgrade/static to API reference commit 850814097f9908781ce954d13878d20eed779c87 Merge: 37f93bc b1c2c27 Author: Adrian Irwin Date: Thu Nov 3 17:27:43 2016 -0700 Merge branch 'router' of https://github.com/adrianirwin/angular.io into router commit 37f93bc0cbc2a766846b7715b1d8ddeeec43de39 Author: Adrian Irwin Date: Thu Nov 3 17:25:55 2016 -0700 docs(router): fixed verbiage and example of how routed views are related to the router outlet commit b1c2c27d365186d4231a470945a0975482df58e9 Author: Adrian Irwin Date: Thu Nov 3 16:57:56 2016 -0700 docs(router): fixed verbiage and example of how routed views are related to the router outlet --- .gitignore | 1 + .travis.yml | 2 +- gulpfile.js | 13 +- harp.json | 6 +- public/_includes/_footer.jade | 2 +- public/docs/_examples/.gitignore | 1 + .../docs/_examples/_boilerplate/package.json | 1 + public/docs/_examples/cb-ts-to-js/e2e-spec.ts | 18 +- .../cb-ts-to-js/js-es6-decorators/.babelrc | 6 + .../js-es6-decorators/app/app.component.es6 | 15 + .../js-es6-decorators/app/app.component.html | 31 + .../js-es6-decorators/app/app.module.es6 | 55 ++ .../app/confirm.component.es6 | 22 + .../app/confirm.component.html | 6 + .../js-es6-decorators/app/data.service.es6 | 10 + .../hero-di-inject-additional.component.es6 | 7 + .../app/hero-di-inject.component.es6 | 13 + .../app/hero-di.component.es6 | 15 + .../app/hero-host-meta.component.es6 | 44 ++ .../app/hero-host.component.es6 | 39 + .../app/hero-io.component.es6 | 26 + .../app/hero-lifecycle.component.es6 | 14 + .../app/hero-queries.component.es6 | 81 +++ .../app/hero-title.component.es6 | 26 + .../app/hero-title.component.html | 4 + .../js-es6-decorators/app/hero.component.es6 | 14 + .../js-es6-decorators/app/main.es6 | 4 + .../js-es6-decorators/example-config.json | 4 + .../cb-ts-to-js/js-es6-decorators/index.html | 27 + .../cb-ts-to-js/js-es6-decorators/plnkr.json | 8 + .../_examples/cb-ts-to-js/js-es6/.babelrc | 5 + .../cb-ts-to-js/js-es6/app/app.component.es6 | 20 + .../cb-ts-to-js/js-es6/app/app.component.html | 30 + .../cb-ts-to-js/js-es6/app/app.module.es6 | 56 ++ .../js-es6/app/confirm.component.es6 | 32 + .../js-es6/app/confirm.component.html | 6 + .../cb-ts-to-js/js-es6/app/data.service.es6 | 13 + .../hero-di-inject-additional.component.es6 | 10 + .../js-es6/app/hero-di-inject.component.es6 | 20 + .../js-es6/app/hero-di.component.es6 | 22 + .../js-es6/app/hero-host.component.es6 | 50 ++ .../js-es6/app/hero-io.component.es6 | 31 + .../js-es6/app/hero-lifecycle.component.es6 | 15 + .../js-es6/app/hero-queries.component.es6 | 97 +++ .../js-es6/app/hero-title.component.es6 | 29 + .../js-es6/app/hero-title.component.html | 4 + .../cb-ts-to-js/js-es6/app/hero.component.es6 | 20 + .../_examples/cb-ts-to-js/js-es6/app/main.es6 | 4 + .../cb-ts-to-js/js-es6/example-config.json | 4 + .../_examples/cb-ts-to-js/js-es6/index.html | 27 + .../_examples/cb-ts-to-js/js-es6/plnkr.json | 8 + .../cb-ts-to-js/js/app/app.component.html | 47 ++ .../cb-ts-to-js/js/app/app.component.js | 20 + .../cb-ts-to-js/js/app/app.module.js | 46 ++ .../cb-ts-to-js/js/app/confirm.component.html | 6 + .../cb-ts-to-js/js/app/confirm.component.js | 73 ++ .../cb-ts-to-js/js/app/data.service.js | 9 +- .../hero-di-inject-additional.component.js | 64 +- .../js/app/hero-di-inject.component.js | 82 +-- .../js/app/hero-di-inline.component.js | 27 - .../cb-ts-to-js/js/app/hero-di.component.js | 50 +- .../cb-ts-to-js/js/app/hero-dsl.component.js | 31 - .../cb-ts-to-js/js/app/hero-host.component.js | 97 +++ .../js/app/hero-io-dsl.component.html | 7 + .../cb-ts-to-js/js/app/hero-io.component.html | 7 + .../cb-ts-to-js/js/app/hero-io.component.js | 100 +-- .../js/app/hero-lifecycle.component.js | 61 +- .../js/app/hero-queries.component.js | 92 +++ .../js/app/hero-title.component.html | 4 + .../js/app/hero-title.component.js | 60 ++ .../cb-ts-to-js/js/app/hero.component.js | 76 +- .../js/app/heroes-bindings.component.js | 39 - .../js/app/heroes-queries.component.js | 82 --- .../docs/_examples/cb-ts-to-js/js/app/main.js | 34 +- .../docs/_examples/cb-ts-to-js/js/index.html | 47 +- .../cb-ts-to-js/ts/app/app.component.html | 31 + .../cb-ts-to-js/ts/app/app.component.ts | 15 + .../cb-ts-to-js/ts/app/app.module.ts | 56 ++ .../cb-ts-to-js/ts/app/confirm.component.html | 6 + .../cb-ts-to-js/ts/app/confirm.component.ts | 22 + .../cb-ts-to-js/ts/app/data.service.ts | 4 +- .../hero-di-inject-additional.component.ts | 49 +- .../ts/app/hero-di-inject.component.ts | 18 +- .../cb-ts-to-js/ts/app/hero-di.component.ts | 16 +- .../ts/app/hero-host-meta.component.ts | 44 ++ .../cb-ts-to-js/ts/app/hero-host.component.ts | 39 + .../cb-ts-to-js/ts/app/hero-io.component.ts | 67 +- .../ts/app/hero-lifecycle.component.ts | 20 +- .../ts/app/hero-queries.component.ts | 83 +++ .../ts/app/hero-title.component.html | 4 + .../ts/app/hero-title.component.ts | 22 + .../cb-ts-to-js/ts/app/hero.component.ts | 22 +- .../ts/app/heroes-bindings.component.ts | 41 -- .../ts/app/heroes-queries.component.ts | 88 --- .../docs/_examples/cb-ts-to-js/ts/app/main.ts | 34 +- .../docs/_examples/cb-ts-to-js/ts/index.html | 28 +- .../docs/_examples/ngmodule/ts/index.0.html | 2 +- .../docs/_examples/ngmodule/ts/index.1.html | 2 +- .../docs/_examples/ngmodule/ts/index.1b.html | 2 +- .../docs/_examples/ngmodule/ts/index.2.html | 2 +- .../docs/_examples/ngmodule/ts/index.3.html | 2 +- public/docs/_examples/package.json | 6 +- .../_examples/quickstart/js/package.1.json | 20 +- .../_examples/quickstart/ts/package.1.json | 20 +- .../ts/app/admin/admin-routing.module.1.ts | 34 +- .../ts/app/admin/admin-routing.module.2.ts | 46 +- .../ts/app/admin/admin-routing.module.3.ts | 38 +- .../ts/app/admin/admin-routing.module.ts | 36 +- .../router/ts/app/app-routing.module.1.ts | 14 +- .../router/ts/app/app-routing.module.2.ts | 12 +- .../router/ts/app/app-routing.module.3.ts | 10 +- .../router/ts/app/app-routing.module.4.ts | 12 +- .../router/ts/app/app-routing.module.5.ts | 23 +- .../router/ts/app/app-routing.module.6.ts | 43 +- .../router/ts/app/app-routing.module.ts | 52 +- .../_examples/router/ts/app/app.module.0.ts | 44 +- .../_examples/router/ts/app/app.module.1.ts | 22 +- .../_examples/router/ts/app/app.routing.1.ts | 44 -- .../_examples/router/ts/app/app.routing.2.ts | 22 - .../_examples/router/ts/app/app.routing.3.ts | 16 - .../_examples/router/ts/app/app.routing.4.ts | 13 - .../_examples/router/ts/app/app.routing.5.ts | 16 - .../_examples/router/ts/app/app.routing.6.ts | 21 - .../crisis-center-routing.module.1.ts | 40 +- .../crisis-center-routing.module.2.ts | 78 +- .../crisis-center-routing.module.3.ts | 50 +- .../crisis-center-routing.module.4.ts | 60 +- .../crisis-center-routing.module.ts | 46 +- .../crisis-detail-resolve.service.ts | 2 +- .../crisis-detail.component.1.ts | 27 +- .../crisis-center/crisis-detail.component.ts | 15 +- .../crisis-center/crisis-list.component.1.ts | 32 +- .../crisis-center/crisis-list.component.ts | 23 +- .../ts/app/heroes/hero-detail.component.1.ts | 19 +- .../ts/app/heroes/hero-detail.component.2.ts | 15 +- .../ts/app/heroes/hero-detail.component.ts | 18 +- .../ts/app/heroes/hero-list.component.1.ts | 11 +- .../ts/app/heroes/hero-list.component.ts | 20 +- .../ts/app/heroes/heroes-routing.module.ts | 18 +- .../router/ts/app/login-routing.module.ts | 18 +- .../dart/lib/app_component.dart | 7 +- .../dart/lib/app_component.html | 31 +- ...ck_directive.dart => click_directive.dart} | 12 +- .../dart/lib/sizer_component.dart | 30 + .../_examples/template-syntax/e2e-spec.ts | 17 +- .../template-syntax/ts/app/app.component.html | 27 +- .../template-syntax/ts/app/app.component.ts | 17 +- .../template-syntax/ts/app/app.module.ts | 6 +- ...-click.directive.ts => click.directive.ts} | 16 +- .../template-syntax/ts/app/sizer.component.ts | 5 +- .../toh-5/dart/lib/dashboard_component.dart | 12 +- .../toh-5/dart/lib/dashboard_component.html | 2 +- ...nent.1.html => dashboard_component_1.html} | 0 .../toh-5/dart/lib/hero_detail_component.dart | 11 +- .../toh-5/dart/lib/heroes_component.dart | 2 + .../toh-5/ts/app/dashboard.component.1.ts | 1 - .../toh-5/ts/app/dashboard.component.ts | 1 - .../toh-5/ts/app/hero-detail.component.html | 2 +- .../toh-5/ts/app/hero-detail.component.ts | 12 +- .../toh-6/ts/app/hero-detail.component.ts | 9 +- public/docs/_examples/toh-6/ts/app/main.ts | 2 +- .../_examples/webpack/ts/package.webpack.json | 16 +- public/docs/dart/latest/cookbook/_data.json | 2 +- public/docs/dart/latest/guide/forms.jade | 6 - public/docs/dart/latest/guide/glossary.jade | 2 +- .../dart/latest/guide/template-syntax.jade | 10 - public/docs/dart/latest/tutorial/toh-pt1.jade | 2 - public/docs/dart/latest/tutorial/toh-pt2.jade | 1 - public/docs/dart/latest/tutorial/toh-pt4.jade | 1 - public/docs/dart/latest/tutorial/toh-pt5.jade | 11 +- public/docs/js/latest/_data.json | 2 +- public/docs/js/latest/cookbook/_data.json | 2 +- public/docs/js/latest/cookbook/ts-to-js.jade | 470 +----------- .../ts/_cache/guide/dependency-injection.jade | 10 +- .../docs/ts/_cache/guide/template-syntax.jade | 199 ++++-- public/docs/ts/_cache/tutorial/toh-pt5.jade | 226 +++--- public/docs/ts/_cache/tutorial/toh-pt6.jade | 21 +- public/docs/ts/latest/_data.json | 2 +- public/docs/ts/latest/cookbook/_data.json | 2 +- .../cookbook/a1-a2-quick-reference.jade | 2 +- .../docs/ts/latest/cookbook/aot-compiler.jade | 51 +- public/docs/ts/latest/cookbook/ts-to-js.jade | 670 +++++++++++++++++- public/docs/ts/latest/guide/change-log.jade | 14 + .../ts/latest/guide/dependency-injection.jade | 2 +- public/docs/ts/latest/guide/forms.jade | 2 +- public/docs/ts/latest/guide/index.jade | 10 +- public/docs/ts/latest/guide/npm-packages.jade | 2 +- public/docs/ts/latest/guide/router.jade | 52 +- public/docs/ts/latest/guide/style-guide.jade | 4 +- .../docs/ts/latest/guide/template-syntax.jade | 59 +- public/docs/ts/latest/guide/testing.jade | 6 +- public/docs/ts/latest/tutorial/_data.json | 1 + public/docs/ts/latest/tutorial/index.jade | 4 +- public/docs/ts/latest/tutorial/toh-pt1.jade | 2 - public/docs/ts/latest/tutorial/toh-pt2.jade | 1 - public/docs/ts/latest/tutorial/toh-pt4.jade | 1 - public/docs/ts/latest/tutorial/toh-pt5.jade | 131 ++-- public/docs/ts/latest/tutorial/toh-pt6.jade | 2 - public/events.jade | 11 - public/news.jade | 50 +- public/resources/js/util.js | 2 +- .../config/bad-code-excerpt-skip-patterns.txt | 1 - tools/api-builder/angular.io-package/index.js | 1 + tools/doc-shredder/doc-shredder.js | 2 +- tools/doc-shredder/regionExtractor.js | 1 + tools/plunker-builder/builder.js | 20 +- tools/plunker-builder/indexHtmlTranslator.js | 2 +- 207 files changed, 3903 insertions(+), 2364 deletions(-) create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/.babelrc create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/example-config.json create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/index.html create mode 100644 public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/app.module.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js delete mode 100644 public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html create mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts delete mode 100644 public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.1.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.2.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.3.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.4.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.5.ts delete mode 100644 public/docs/_examples/router/ts/app/app.routing.6.ts rename public/docs/_examples/template-syntax/dart/lib/{my_click_directive.dart => click_directive.dart} (81%) create mode 100644 public/docs/_examples/template-syntax/dart/lib/sizer_component.dart rename public/docs/_examples/template-syntax/ts/app/{my-click.directive.ts => click.directive.ts} (76%) rename public/docs/_examples/toh-5/dart/lib/{dashboard_component.1.html => dashboard_component_1.html} (100%) diff --git a/.gitignore b/.gitignore index 2666d27c27..df612cd56e 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,7 @@ public/docs/xref-*.* _zip-output www* npm-debug*.log* +**/debug.log *.plnkr.html plnkr.html *.eplnkr.html diff --git a/.travis.yml b/.travis.yml index 394e81297a..2e3b260e29 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ env: - DBUS_SESSION_BUS_ADDRESS=/dev/null - DISPLAY=:99.0 - CHROME_BIN=chromium-browser - - LATEST_RELEASE=2.1.1 + - LATEST_RELEASE=2.2.0 - TASK_FLAGS="--dgeni-log=warn" matrix: - TASK=lint diff --git a/gulpfile.js b/gulpfile.js index 6dac9d40c4..765dd3e006 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) { e2eSpecPaths.forEach(function(specPath) { // get all of the examples under each dir where a pcFilename is found localExamplePaths = getExamplePaths(specPath, true); - // Filter by language - localExamplePaths = localExamplePaths.filter(function (fn) { - return fn.match('/'+lang+'$') != null; - }); + // Filter by example name if (filter) { localExamplePaths = localExamplePaths.filter(function (fn) { return fn.match(filter) != null; }) } + // Filter by language, also supports variations like js-es6 + localExamplePaths = localExamplePaths.filter(function (fn) { + return fn.match('/'+lang+'(?:-[^/]*)?$') != null; + }); localExamplePaths.forEach(function(examplePath) { examplePaths.push(examplePath); }) @@ -754,7 +755,7 @@ gulp.task('check-deploy', ['firebase-use-proj-check', 'build-docs'], () => { }).then(function(shouldDeploy) { if (shouldDeploy) { gutil.log('deploying...'); - return execPromise(`firebase deploy -p ${WWW}`); + return execPromise('firebase deploy'); } else { return ['Not deploying']; } @@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) { } function devGuideExamplesWatch(shredOptions, postShredAction, focus) { - var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*'; + var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*'; var includePattern = path.join(shredOptions.examplesDir, watchPattern); // removed this version because gulp.watch has the same glob issue that dgeni has. // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*'); diff --git a/harp.json b/harp.json index ff594edf74..0dd8a50777 100644 --- a/harp.json +++ b/harp.json @@ -29,7 +29,7 @@ "picture": "/resources/images/bios/naomi.jpg", "twitter": "naomitraveller", "website": "http://google.com/+NaomiBlack", - "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular Material and AngularDart, and acts as webmaster for angular.io. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.", + "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.", "type": "Lead" }, @@ -38,7 +38,7 @@ "picture": "/resources/images/bios/brad-green.jpg", "twitter": "bradlygreen", "website": "https://plus.google.com/+BradGreen", - "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad lives in Mountain View, CA with his wife and two children.", + "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.", "type": "Lead" }, @@ -47,7 +47,7 @@ "picture": "/resources/images/bios/juleskremer.jpg", "twitter": "jules_kremer", "website": "https://plus.google.com/+JulesKremer", - "bio": "Jules is a TPM on the Angular team. When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.", + "bio": "Jules is Head of Angular Developer Relations at Google. When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.", "type": "Lead" }, diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade index 5da35ef23f..e2d9af4fac 100644 --- a/public/_includes/_footer.jade +++ b/public/_includes/_footer.jade @@ -20,7 +20,7 @@ div(class="main-footer" data-swiftype-index="false") // TODO: (ericjim) make a libraries page to showcase all angular libraries //li Libraries li About - li Books & Training + li Books & Training li Tools & Libraries li Community li Press Kit diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore index 52b370600f..3d007625ef 100644 --- a/public/docs/_examples/.gitignore +++ b/public/docs/_examples/.gitignore @@ -11,6 +11,7 @@ wallaby.js _test-output **/ts/**/*.js +**/js-es6*/**/*.js **/ts-snippets/**/*.js *.d.ts diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json index 3f255fcbd6..bcccdd978a 100644 --- a/public/docs/_examples/_boilerplate/package.json +++ b/public/docs/_examples/_boilerplate/package.json @@ -18,6 +18,7 @@ "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail", "build:cli": "ng build", "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js", + "build:babel": "babel app -d app --extensions \".es6\" --source-maps", "copy-dist-files": "node ./copy-dist-files.js", "i18n": "ng-xi18n" }, diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts index 5862beeebf..bc67bac8f0 100644 --- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts +++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts @@ -1,4 +1,4 @@ -'use strict'; // necessary for es6 output in node +'use strict'; // necessary for es6 output in node import { browser, element, by } from 'protractor'; @@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () { }); it('should display the basic component example', function () { - testTag('hero-view', 'Hero: Windstorm'); + testTag('hero-view', 'Hero Detail: Windstorm'); }); it('should display the component example with lifecycle methods', function () { @@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () { it('should support component with inputs and outputs', function () { let app = element(by.css('hero-io')); - let confirmComponent = app.element(by.css('my-confirm')); + let confirmComponent = app.element(by.css('app-confirm')); confirmComponent.element(by.buttonText('OK')).click(); expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true); @@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () { }); it('should support host bindings and host listeners', function() { - let app = element(by.css('heroes-bindings')); + let app = element(by.css('hero-host')); let h1 = app.element(by.css('h1')); expect(app.getAttribute('class')).toBe('heading'); - expect(app.getAttribute('title')).toBe('Tooltip content'); + expect(app.getAttribute('title')).toContain('Tooltip'); h1.click(); expect(h1.getAttribute('class')).toBe('active'); @@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () { }); it('should support content and view queries', function() { - let app = element(by.css('heroes-queries')); - let windstorm = app.element(by.css('a-hero:first-child')); + let app = element(by.css('hero-queries')); + let windstorm = app.element(by.css('view-child:first-child')); - app.element(by.buttonText('Activate')).click(); + app.element(by.css('button')).click(); expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active'); - expect(windstorm.element(by.css('active-label')).getText()).toBe('Active'); + expect(windstorm.element(by.css('content-child')).getText()).toBe('Active'); }); function testTag(selector: string, expectedText: string) { diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc new file mode 100644 index 0000000000..3aaf507508 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "es2015", + "angular2" + ] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 new file mode 100644 index 0000000000..e5f158dbed --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] +}) +export class AppComponent { + title = 'ES6 JavaScript with Decorators'; +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html new file mode 100644 index 0000000000..7f1efd31a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html @@ -0,0 +1,31 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 new file mode 100644 index 0000000000..bea55777ef --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 @@ -0,0 +1,55 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroHostMetaComponent } from './hero-host-meta.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, HeroHostMetaComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging +}) +export class AppModule { } + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 new file mode 100644 index 0000000000..08a0ed6c60 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +// #docregion +@Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html' +}) +export class ConfirmComponent { + @Input() okMsg = ''; + @Input('cancelMsg') notOkMsg = ''; + @Output() ok = new EventEmitter(); + @Output('cancel') notOk = new EventEmitter(); + + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html new file mode 100644 index 0000000000..917bd1696f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html @@ -0,0 +1,6 @@ + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 new file mode 100644 index 0000000000..cd7f9e1aae --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 @@ -0,0 +1,10 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class DataService { + constructor() { } + + getHeroName() { + return 'Windstorm'; + } +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 new file mode 100644 index 0000000000..ec460a9dbc --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-di-inject-additional', + template: `` +}) +export class HeroComponent { } diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 new file mode 100644 index 0000000000..94b42f956a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 @@ -0,0 +1,13 @@ +import { Component, Inject } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-di-inject', + template: `

Hero: {{name}}

` +}) +export class HeroComponent { + constructor(@Inject('heroName') name) { + this.name = name; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 new file mode 100644 index 0000000000..0cc78d277e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import { DataService } from './data.service'; + +// #docregion +@Component({ + selector: 'hero-di', + template: `

Hero: {{name}}

` +}) +export class HeroComponent { + name = ''; + constructor(dataService: DataService) { + this.name = dataService.getHeroName(); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 new file mode 100644 index 0000000000..25dbe1c21a --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +

Hero Host in Metadata

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + + // HostListeners on the entire element + '(click)': 'clicked()', + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +export class HeroHostMetaComponent { + title = 'Hero Host in Metadata Tooltip'; + headingClass = true; + + active = false; + clicks = 0; + + clicked() { + this.clicks += 1; + } + + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 new file mode 100644 index 0000000000..e8d72233c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 @@ -0,0 +1,39 @@ +import { Component, HostBinding, HostListener } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host', + template: ` +

Hero Host in Decorators

+
Heading clicks: {{clicks}}
+ `, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] +}) +export class HeroHostComponent { + // HostBindings to the element + @HostBinding() title = 'Hero Host in Decorators Tooltip'; + @HostBinding('class.heading') headingClass = true; + + active = false; + clicks = 0; + + // HostListeners on the entire element + @HostListener('click') + clicked() { + this.clicks += 1; + } + + @HostListener('mouseenter', ['$event']) + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + @HostListener('mouseleave', ['$event']) + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 new file mode 100644 index 0000000000..4b36411e78 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-io', + template: ` + + + OK clicked + Cancel clicked + ` +}) +export class HeroIOComponent { + okClicked = false; + cancelClicked = false; + + onOk() { + this.okClicked = true; + } + + onCancel() { + this.cancelClicked = true; + } +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 new file mode 100644 index 0000000000..2539266597 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 @@ -0,0 +1,14 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-lifecycle', + template: `

Hero: {{name}}

` +}) +export class HeroComponent { + name = ''; + ngOnInit() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 new file mode 100644 index 0000000000..fced43d4d7 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 @@ -0,0 +1,81 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = true; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'] +}) +export class ViewChildComponent { + @Input() hero; + active = false; + + @ContentChild(ContentChildComponent) content; + + activate() { + this.active = !this.active; + this.content.activate(); + } +} +// #enddocregion content + +//////////////////// + +// #docregion view +@Component({ + selector: 'hero-queries', + template: ` + + + + + ` +}) +export class HeroQueriesComponent { + active = false; + heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + + @ViewChildren(ViewChildComponent) views; + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } +} +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 new file mode 100644 index 0000000000..25460d34f7 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 @@ -0,0 +1,26 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +// #docregion templateUrl +@Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' +}) +// #enddocregion templateUrl +export class HeroTitleComponent { + msg = ''; + constructor( + @Inject('titlePrefix') @Optional() titlePrefix, + @Attribute('title') title + ) { + this.titlePrefix = titlePrefix; + this.title = title; + } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html new file mode 100644 index 0000000000..0e93122d5c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html @@ -0,0 +1,4 @@ + +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 new file mode 100644 index 0000000000..4ea4c11611 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 @@ -0,0 +1,14 @@ +// #docregion metadata +import { Component } from '@angular/core'; + +@Component({ + selector: 'hero-view', + template: '

{{title}}: {{getName()}}

' +}) +// #docregion appexport, class +export class HeroComponent { + title = 'Hero Detail'; + getName() {return 'Windstorm'; } +} +// #enddocregion appexport, class +// #enddocregion metadata diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 new file mode 100644 index 0000000000..2470c9595e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 @@ -0,0 +1,4 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json new file mode 100644 index 0000000000..391bd1a766 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:babel", + "run": "http-server:e2e" +} \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html new file mode 100644 index 0000000000..1b9e3b5211 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html @@ -0,0 +1,27 @@ + + + + + + + + TypeScript to JavaScript + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json new file mode 100644 index 0000000000..5c7a5acd44 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "TypeScript to JavaScript", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags":["cookbook"] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc new file mode 100644 index 0000000000..3c078e9f99 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "es2015" + ] +} diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 new file mode 100644 index 0000000000..9615b98a1f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; + +export class AppComponent { + constructor() { + this.title = 'Plain ES6 JavaScript'; + } +} + +AppComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html new file mode 100644 index 0000000000..8fbe65ade6 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html @@ -0,0 +1,30 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 new file mode 100644 index 0000000000..e8c7a8f9c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 @@ -0,0 +1,56 @@ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; + +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +export class AppModule { } + +AppModule.annotations = [ + new NgModule({ + imports: [ BrowserModule], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging + }) +] + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 new file mode 100644 index 0000000000..d42a553688 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 @@ -0,0 +1,32 @@ +import { Component, EventEmitter } from '@angular/core'; + +// #docregion +export class ConfirmComponent { + constructor(){ + this.ok = new EventEmitter(); + this.notOk = new EventEmitter(); + } + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} + +ConfirmComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) +]; +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html new file mode 100644 index 0000000000..917bd1696f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html @@ -0,0 +1,6 @@ + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 new file mode 100644 index 0000000000..de023ce5a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; + +export class DataService { + constructor() { + } + getHeroName() { + return 'Windstorm'; + } +} + +DataService.annotations = [ + new Injectable() +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 new file mode 100644 index 0000000000..5eb9bab815 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +export class HeroComponent { } + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di-inject-additional', + template: `` + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 new file mode 100644 index 0000000000..2f95a0b981 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 @@ -0,0 +1,20 @@ +import { Component, Inject } from '@angular/core'; + +// #docregion +export class HeroComponent { + constructor(name) { + this.name = name; + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di-inject', + template: `

Hero: {{name}}

` + }) +]; + +HeroComponent.parameters = [ + [new Inject('heroName')] +]; +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 new file mode 100644 index 0000000000..dfbecf0707 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { DataService } from './data.service'; + +// #docregion +export class HeroComponent { + constructor(dataService) { + this.name = dataService.getHeroName(); + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-di', + template: `

Hero: {{name}}

` + }) +]; + +HeroComponent.parameters = [ + [DataService] +]; + +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 new file mode 100644 index 0000000000..092cd1a1ce --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; + +// #docregion +export class HeroHostComponent { + constructor() { + this.active = false; + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip'; + } + + clicked() { + this.clicks += 1; + } + + enter(event) { + this.active = true; + this.headingClass = false; + } + + leave(event) { + this.active = false; + this.headingClass = true; + } +} + +// #docregion metadata +HeroHostComponent.annotations = [ + new Component({ + selector: 'hero-host', + template: ` +

Hero Host

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] + }) +]; +// #docregion metadata +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 new file mode 100644 index 0000000000..0dc8c08f2d --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; + +export class HeroIOComponent { + constructor() { + this.okClicked = false; + this.cancelClicked = false; + } + + onOk() { + this.okClicked = true; + } + + onCancel() { + this.cancelClicked = true; + } +} + +HeroIOComponent.annotations = [ + new Component({ + selector: 'hero-io', + template: ` + + + OK clicked + Cancel clicked + ` + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 new file mode 100644 index 0000000000..b394ff59aa --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 @@ -0,0 +1,15 @@ +// #docregion +import { Component } from '@angular/core'; +export class HeroComponent { + ngOnInit() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } +} + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-lifecycle', + template: `

Hero: {{name}}

` + }) +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 new file mode 100644 index 0000000000..bf3b914406 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 @@ -0,0 +1,97 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +export class ContentChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + } +} + +ContentChildComponent.annotations = [ + new Component({ + selector: 'content-child', + template: ` + + Active + ` + }) +]; + +//////////////////// + +// #docregion content +export class ViewChildComponent { + constructor() { + this.active = false; + } + + activate() { + this.active = !this.active; + this.content.activate(); + } +} + +ViewChildComponent.annotations = [ + new Component({ + selector: 'view-child', + template: `

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'], + inputs: ['hero'], + queries: { + content: new ContentChild(ContentChildComponent) + } + }) +]; +// #enddocregion content + +//////////////////// + +// #docregion view +export class HeroQueriesComponent { + constructor(){ + this.active = false; + this.heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + } + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } +} + +HeroQueriesComponent.annotations = [ + new Component({ + selector: 'hero-queries', + template: ` + + + + + `, + queries: { + views: new ViewChildren(ViewChildComponent) + } + }) +]; +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 new file mode 100644 index 0000000000..ff1e6ce026 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 @@ -0,0 +1,29 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +export class HeroTitleComponent { + constructor(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + + ok() { + this.msg = 'OK!'; + } +} + +// #docregion templateUrl +HeroTitleComponent.annotations = [ + new Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' + }) +]; +// #enddocregion templateUrl + +HeroTitleComponent.parameters = [ + [new Optional(), new Inject('titlePrefix')], + [new Attribute('title')] +]; diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html new file mode 100644 index 0000000000..0e93122d5c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html @@ -0,0 +1,4 @@ + +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 new file mode 100644 index 0000000000..10b92c2878 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 @@ -0,0 +1,20 @@ +// #docplaster +// #docregion metadata +import { Component } from '@angular/core'; + +// #docregion appexport, class +export class HeroComponent { + constructor() { + this.title = 'Hero Detail'; + } + getName() {return 'Windstorm'; } +} +// #enddocregion appexport, class + +HeroComponent.annotations = [ + new Component({ + selector: 'hero-view', + template: '

{{title}}: {{getName()}}

' + }) +]; +// #enddocregion metadata diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 new file mode 100644 index 0000000000..2470c9595e --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 @@ -0,0 +1,4 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json new file mode 100644 index 0000000000..391bd1a766 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:babel", + "run": "http-server:e2e" +} \ No newline at end of file diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html new file mode 100644 index 0000000000..1b9e3b5211 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html @@ -0,0 +1,27 @@ + + + + + + + + TypeScript to JavaScript + + + + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json new file mode 100644 index 0000000000..5c7a5acd44 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "TypeScript to JavaScript", + "files":[ + "!**/*.d.ts", + "!**/*.js" + ], + "tags":["cookbook"] +} diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html new file mode 100644 index 0000000000..6681d60672 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html @@ -0,0 +1,47 @@ + +

{{title}}

+Classes and Class Metadata
+Interfaces
+Input and Output Metadata
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ +

Classes and Class Metadata (DSL)

+ + +
+

Interfaces

+ +

Interfaces (DSL)

+ + +
+

Input and Output Metadata

+ +

Input and Output Metadata (DSL)

+ + +
+

Dependency Injection

+ + + + +

Dependency Injection (DSL)

+ + + + +
+

Host Metadata

+ +

Host Metadata (DSL)

+ + +
+

View and Child Metadata (DSL)

+ diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js new file mode 100644 index 0000000000..9e8c5da535 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js @@ -0,0 +1,20 @@ +(function(app) { + +app.AppComponent = AppComponent; +function AppComponent() { + this.title = 'ES5 JavaScript'; +} + +AppComponent.annotations = [ + new ng.core.Component({ + selector: 'my-app', + templateUrl: 'app/app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] + }) +]; + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js new file mode 100644 index 0000000000..3791fe16da --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js @@ -0,0 +1,46 @@ +(function(app) { + +app.AppModule = AppModule; +function AppModule() { } + +AppModule.annotations = [ + new ng.core.NgModule({ + imports: [ ng.platformBrowser.BrowserModule ], + declarations: [ + app.AppComponent, + app.ConfirmComponent, app.ConfirmDslComponent, + app.HeroComponent, app.HeroDslComponent, + app.HeroDIComponent, app.HeroDIDslComponent, + app.HeroDIInjectComponent, app.HeroDIInjectDslComponent, + app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent, + app.HeroHostComponent, app.HeroHostDslComponent, + app.HeroIOComponent, app.HeroIODslComponent, + app.HeroLifecycleComponent, app.HeroLifecycleDslComponent, + app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent, + app.HeroTitleComponent, app.HeroTitleDslComponent + ], + providers: [ + app.DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ app.AppComponent ], + + // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging! + }) +] + +})(window.app = window.app || {}); + + +///// For documentation only ///// +(function () { + // #docregion appimport + var HeroComponent = app.HeroComponent; + // #enddocregion appimport + + // #docregion ng2import + var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; + var LocationStrategy = ng.common.LocationStrategy; + var HashLocationStrategy = ng.common.HashLocationStrategy; + // #enddocregion ng2import +}) diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html new file mode 100644 index 0000000000..917bd1696f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html @@ -0,0 +1,6 @@ + + diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js new file mode 100644 index 0000000000..4a4cd0a470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js @@ -0,0 +1,73 @@ +(function(app) { + +// #docregion +app.ConfirmComponent = ConfirmComponent; + +ConfirmComponent.annotations = [ + new ng.core.Component({ + selector: 'app-confirm', + templateUrl: 'app/confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) +]; + +function ConfirmComponent() { + this.ok = new ng.core.EventEmitter(); + this.notOk = new ng.core.EventEmitter(); +} + +ConfirmComponent.prototype.onOkClick = function() { + this.ok.emit(true); +} + +ConfirmComponent.prototype.onNotOkClick = function() { + this.notOk.emit(true); +} + + +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //////// + +(function(app) { + +// #docregion dsl +app.ConfirmDslComponent = ng.core.Component({ + selector: 'app-confirm-dsl', + templateUrl: 'app/confirm.component.html', + inputs: [ + 'okMsg', + 'notOkMsg: cancelMsg' + ], + outputs: [ + 'ok', + 'notOk: cancel' + ] + }) + .Class({ + constructor: function ConfirmDslComponent() { + this.ok = new ng.core.EventEmitter(); + this.notOk = new ng.core.EventEmitter(); + }, + + onOkClick: function() { + this.ok.emit(true); + }, + + onNotOkClick: function() { + this.notOk.emit(true); + } + }); + +// #enddocregion dsl + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js index c060e2b39d..643bb57dca 100644 --- a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js +++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js @@ -1,13 +1,10 @@ (function(app) { - function DataService() { - } - DataService.annotations = [ - new ng.core.Injectable() - ]; + app.DataService = DataService; + function DataService() { } + DataService.prototype.getHeroName = function() { return 'Windstorm'; }; - app.DataService = DataService; })(window.app = window.app || {}); 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 fa9684e7a1..1a88cfa355 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 @@ -1,50 +1,26 @@ (function(app) { - // #docregion - var TitleComponent = ng.core.Component({ - selector: 'hero-title', - template: - '

{{titlePrefix}} {{title}}

' + - '' + - '

{{ msg }}

' - }).Class({ - constructor: [ - [ - new ng.core.Optional(), - new ng.core.Inject('titlePrefix') - ], - new ng.core.Attribute('title'), - function(titlePrefix, title) { - this.titlePrefix = titlePrefix; - this.title = title; - this.msg = ''; - } - ], - ok: function() { - this.msg = 'OK!'; - } - }); - // #enddocregion +app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent; - var AppComponent = ng.core.Component({ +HeroDIInjectAdditionalComponent.annotations = [ + new ng.core.Component({ selector: 'hero-di-inject-additional', - template: '' + - '' - }).Class({ - constructor: function() { } - }); - - app.HeroesDIInjectAdditionalModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] - }) - .Class({ - constructor: function() {} - }); + template: '' + }) +]; + +function HeroDIInjectAdditionalComponent() {} + +})(window.app = window.app || {}); + +////// DSL Version ///////// +(function(app) { + +app.HeroDIInjectAdditionalDslComponent = ng.core.Component({ + selector: 'hero-di-inject-additional-dsl', + template: '' +}).Class({ + constructor: function HeroDIInjectAdditionalDslComponent() { } +}); })(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 dfda83e1f0..2e04c9246e 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 @@ -1,57 +1,41 @@ (function(app) { -// #docregion parameters - function HeroComponent(name) { - this.name = name; - } - HeroComponent.parameters = [ - 'heroName' - ]; - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-di-inject', - template: '

Hero: {{name}}

' - }) - ]; -// #enddocregion parameters +// #docregion +app.HeroDIInjectComponent = HeroDIInjectComponent; - 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 || {}); - -(function(app) { -// #docregion ctor - var HeroComponent = ng.core.Component({ - selector: 'hero-di-inline2', +HeroDIInjectComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-di-inject', template: '

Hero: {{name}}

' }) - .Class({ - constructor: - [new ng.core.Inject('heroName'), - function(name) { - this.name = name; - }] - }); -// #enddocregion ctor +]; - app.HeroesDIInjectModule2 = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - providers: [ { provide: 'heroName', useValue: 'Bombasto' } ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +HeroDIInjectComponent.parameters = [ 'heroName' ]; + +function HeroDIInjectComponent(name) { + this.name = name; +} +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //////// + +(function(app) { + +// #docregion dsl +app.HeroDIInjectDslComponent = ng.core.Component({ + selector: 'hero-di-inject-dsl', + template: '

Hero: {{name}}

' +}) +.Class({ + constructor: [ + new ng.core.Inject('heroName'), + function HeroDIInjectDslComponent(name) { + this.name = name; + } + ] +}); +// #enddocregion dsl })(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 deleted file mode 100644 index 1fe9c38cb1..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js +++ /dev/null @@ -1,27 +0,0 @@ -(function(app) { - // #docregion - var HeroComponent = ng.core.Component({ - selector: 'hero-di-inline', - template: '

Hero: {{name}}

' - }) - .Class({ - constructor: - [app.DataService, - function(service) { - this.name = service.getHeroName(); - }] - }); - // #enddocregion - - 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 55c576b836..c80efe193e 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 @@ -1,31 +1,43 @@ (function(app) { // #docregion - app.HeroDIComponent = HeroComponent; - - function HeroComponent(dataService) { - this.name = dataService.getHeroName(); - } - HeroComponent.parameters = [ - app.DataService - ]; - HeroComponent.annotations = [ + app.HeroDIComponent = HeroDIComponent; + + HeroDIComponent.annotations = [ new ng.core.Component({ selector: 'hero-di', template: '

Hero: {{name}}

' }) ]; + + HeroDIComponent.parameters = [ app.DataService ]; + + function HeroDIComponent(dataService) { + this.name = dataService.getHeroName(); + } + // #enddocregion - app.HeroesDIModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - providers: [ app.DataService ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); + +})(window.app = window.app || {}); + +////// DSL Version ///// + +(function(app) { + +// #docregion dsl +app.HeroDIDslComponent = ng.core.Component({ + selector: 'hero-di-dsl', + template: '

Hero: {{name}}

' +}) +.Class({ + constructor: [ + app.DataService, + function HeroDIDslComponent(service) { + this.name = service.getHeroName(); + } + ] +}); +// #enddocregion dsl })(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 deleted file mode 100644 index 5dd84733f3..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js +++ /dev/null @@ -1,31 +0,0 @@ -// #docplaster -// #docregion appexport -(function(app) { - - // #docregion component - var HeroComponent = ng.core.Component({ - selector: 'hero-view-2', - template: - '

Name: {{getName()}}

', - }) - .Class({ - constructor: function() { - }, - getName: function() { - return 'Windstorm'; - } - }); - // #enddocregion component - - 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-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js new file mode 100644 index 0000000000..0b04d5efae --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js @@ -0,0 +1,97 @@ +(function(app) { + +// #docregion +app.HeroHostComponent = HeroHostComponent; + +HeroHostComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-host', + template: + '

Hero Host

' + + '
Heading clicks: {{clicks}}
', + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] + }) +]; + +function HeroHostComponent() { + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip content'; +} + +HeroHostComponent.prototype.clicked = function() { + this.clicks += 1; +} + +HeroHostComponent.prototype.enter = function(event) { + this.active = true; + this.headingClass = false; +} + +HeroHostComponent.prototype.leave = function(event) { + this.active = false; + this.headingClass = true; +} +// #enddocregion + +})(window.app = window.app || {}); + +//// DSL Version //// + +(function(app) { + +// #docregion dsl +app.HeroHostDslComponent = ng.core.Component({ + selector: 'hero-host-dsl', + template: ` +

Hero Host (DSL)

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + '(click)': 'clicked()', + + // HostListeners on the entire element + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +.Class({ + constructor: function HeroHostDslComponent() { + this.clicks = 0; + this.headingClass = true; + this.title = 'Hero Host Tooltip DSL content'; + }, + + clicked() { + this.clicks += 1; + }, + + enter(event) { + this.active = true; + this.headingClass = false; + }, + + leave(event) { + this.active = false; + this.headingClass = true; + } +}); +// #enddocregion dsl + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html new file mode 100644 index 0000000000..48c491be35 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html @@ -0,0 +1,7 @@ + + +OK clicked +Cancel clicked diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html new file mode 100644 index 0000000000..e6eae2e804 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html @@ -0,0 +1,7 @@ + + +OK clicked +Cancel clicked 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 79aef12125..d35f3762da 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 @@ -1,68 +1,42 @@ (function(app) { - // #docregion - var ConfirmComponent = ng.core.Component({ - selector: 'my-confirm', - inputs: [ - 'okMsg', - 'notOkMsg: cancelMsg' - ], - outputs: [ - 'ok', - 'notOk: cancel' - ], - template: - '' + - '' - }).Class({ - constructor: function() { - this.ok = new ng.core.EventEmitter(); - this.notOk = new ng.core.EventEmitter(); - }, - onOkClick: function() { - this.ok.next(true); - }, - onNotOkClick: function() { - this.notOk.next(true); - } - }); - // #enddocregion - function AppComponent() { - } - AppComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-io', - template: '' + - '' + - 'OK clicked' + - 'Cancel clicked' - }) - ]; - AppComponent.prototype.onOk = function() { - this.okClicked = true; - } - AppComponent.prototype.onCancel = function() { - this.cancelClicked = true; - } +app.HeroIOComponent = HeroComponent; - app.HeroesIOModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ - AppComponent, - ConfirmComponent - ], - bootstrap: [ AppComponent ] - }) - .Class({ - constructor: function() {} - }); +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-io', + templateUrl: 'app/hero-io.component.html' + }) +]; + +function HeroComponent() { } + +HeroComponent.prototype.onOk = function() { + this.okClicked = true; +} + +HeroComponent.prototype.onCancel = function() { + this.cancelClicked = true; +} + +})(window.app = window.app || {}); + +///// DSL Version //// + +(function(app) { + +app.HeroIODslComponent = ng.core.Component({ + selector: 'hero-io-dsl', + templateUrl: 'app/hero-io-dsl.component.html' + }) + .Class({ + constructor: function HeroIODslComponent() { }, + onOk: function() { + this.okClicked = true; + }, + onCancel: function() { + this.cancelClicked = true; + } + }); })(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 3e81c72e4e..94aa3514b2 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 @@ -1,29 +1,42 @@ // #docplaster (function(app) { - // #docregion - function HeroComponent() {} - // #enddocregion - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-lifecycle', - template: '

Hero: {{name}}

' - }) - ]; - // #docregion - HeroComponent.prototype.ngOnInit = - function() { - this.name = 'Windstorm'; - }; - // #enddocregion - app.HeroesLifecycleModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +// #docregion +app.HeroLifecycleComponent = HeroComponent; + +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-lifecycle', + template: '

Hero: {{name}}

' + }) +]; + +function HeroComponent() { } + +HeroComponent.prototype.ngOnInit = function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); +}; +// #enddocregion + +})(window.app = window.app || {}); + +/////// DSL version //// + +(function(app) { + +// #docregion dsl +app.HeroLifecycleDslComponent = ng.core.Component({ + selector: 'hero-lifecycle-dsl', + template: '

Hero: {{name}}

' + }) + .Class({ + constructor: function HeroLifecycleDslComponent() { }, + ngOnInit: function() { + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); + } + }); +// #enddocregion dsl })(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js new file mode 100644 index 0000000000..5e21cfcb0b --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js @@ -0,0 +1,92 @@ +(function(app) { + +app.heroQueries = app.heroQueries || {}; + +app.heroQueries.ContentChildComponent = ng.core.Component({ + selector: 'content-child', + template: + '' + + 'Active' + + '' +}).Class({ + constructor: function ContentChildComponent() { + this.active = false; + }, + + activate: function() { + this.active = !this.active; + } +}); + +//////////////////// + +// #docregion content +app.heroQueries.ViewChildComponent = ng.core.Component({ + selector: 'view-child', + template: + '

' + + '{{hero.name}} ' + + '' + + '

', + styles: ['.active {font-weight: bold; background-color: skyblue;}'], + inputs: ['hero'], + queries: { + content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent) + } +}) +.Class({ + constructor: function HeroQueriesHeroComponent() { + this.active = false; + }, + + activate: function() { + this.active = !this.active; + this.content.activate(); + } +}); +// #enddocregion content + +//////////////////// + +// #docregion view +app.heroQueries.HeroQueriesComponent = ng.core.Component({ + selector: 'hero-queries', + template: + '' + + '' + + '' + + '', + queries: { + views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent) + } +}) +.Class({ + constructor: function HeroQueriesComponent() { + this.active = false; + this.heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + }, + + activate: function() { + this.active = !this.active; + this.views.forEach(function(view) { + view.activate(); + }); + }, +}); + +// #docregion defined-property +// add prototype property w/ getter outside the DSL +var proto = app.heroQueries.HeroQueriesComponent.prototype; +Object.defineProperty(proto, "buttonLabel", { + get: function () { + return this.active ? 'Deactivate' : 'Activate'; + }, + enumerable: true +}); +// #enddocregion defined-property +// #enddocregion view + +})(window.app = window.app || {}); diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html new file mode 100644 index 0000000000..0e93122d5c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html @@ -0,0 +1,4 @@ + +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js new file mode 100644 index 0000000000..9a8ce7e578 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js @@ -0,0 +1,60 @@ +(function(app) { + +// #docregion +app.HeroTitleComponent = HeroTitleComponent; + +// #docregion templateUrl +HeroTitleComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-title', + templateUrl: 'app/hero-title.component.html' + }) +]; +// #enddocregion templateUrl + +function HeroTitleComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; +} + +HeroTitleComponent.prototype.ok = function() { + this.msg = 'OK!'; +} + +HeroTitleComponent.parameters = [ + [new ng.core.Optional(), new ng.core.Inject('titlePrefix')], + [new ng.core.Attribute('title')] +]; + +// #enddocregion + +})(window.app = window.app || {}); + +////////// DSL version //////////// + +(function(app) { + +// #docregion dsl +app.HeroTitleDslComponent = ng.core.Component({ + selector: 'hero-title-dsl', + templateUrl: 'app/hero-title.component.html' +}) +.Class({ + constructor: [ + [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ], + new ng.core.Attribute('title'), + function HeroTitleDslComponent(titlePrefix, title) { + this.titlePrefix = titlePrefix; + this.title = title; + this.msg = ''; + } + ], + + ok: function() { + this.msg = 'OK!'; + } +}); +// #enddocregion dsl + +})(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 c6a58acc56..346d6f03d8 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 @@ -1,42 +1,48 @@ // #docplaster -// #docregion appexport (function(app) { - // #enddocregion appexport - // #docregion metadata - // #docregion appexport - // #docregion constructorproto - function HeroComponent() { - this.title = "Hero Detail"; - } - - // #enddocregion constructorproto - // #enddocregion appexport - HeroComponent.annotations = [ - new ng.core.Component({ - selector: 'hero-view', - template: - '

Hero: {{getName()}}

' - }) - ]; - // #docregion constructorproto - HeroComponent.prototype.getName = - function() {return 'Windstorm';}; - // #enddocregion constructorproto - // #enddocregion metadata +// #docregion +// #docregion appexport +// #docregion metadata +app.HeroComponent = HeroComponent; // "export" - app.HeroesModule = - ng.core.NgModule({ - imports: [ ng.platformBrowser.BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] - }) - .Class({ - constructor: function() {} - }); +HeroComponent.annotations = [ + new ng.core.Component({ + selector: 'hero-view', + template: '

{{title}}: {{getName()}}

' + }) +]; - // #docregion appexport - app.HeroComponent = HeroComponent; +// #docregion constructorproto +function HeroComponent() { + this.title = "Hero Detail"; +} + +HeroComponent.prototype.getName = function() { return 'Windstorm'; }; +// #enddocregion constructorproto + +// #enddocregion metadata +// #enddocregion appexport +// #enddocregion + +})(window.app = window.app || {}); + +//////////// DSL version /////////// + +(function(app) { + +// #docregion dsl +app.HeroDslComponent = ng.core.Component({ + selector: 'hero-view-dsl', + template: '

{{title}}: {{getName()}}

', + }) + .Class({ + constructor: function HeroDslComponent() { + this.title = "Hero Detail"; + }, + + getName: function() { return 'Windstorm'; } + }); +// #enddocregion dsl })(window.app = window.app || {}); -// #enddocregion appexport 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 deleted file mode 100644 index 3a562d6912..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js +++ /dev/null @@ -1,39 +0,0 @@ -(function(app) { - - // #docregion - var HeroesComponent = ng.core.Component({ - selector: 'heroes-bindings', - template: '

' + - 'Tour of Heroes' + - '

', - host: { - '[title]': 'title', - '[class.heading]': 'hClass', - '(click)': 'clicked()', - '(dblclick)': 'doubleClicked($event)' - } - }).Class({ - constructor: function() { - this.title = 'Tooltip content'; - this.hClass = true; - }, - clicked: function() { - this.active = !this.active; - }, - doubleClicked: function(evt) { - this.active = true; - } - }); - // #enddocregion - - 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 deleted file mode 100644 index f1bda77cb1..0000000000 --- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js +++ /dev/null @@ -1,82 +0,0 @@ -(function(app) { - - var ActiveLabelComponent = ng.core.Component({ - selector: 'active-label', - template: '' + - 'Active' + - '' - }).Class({ - constructor: [function() { }], - activate: function() { - this.active = true; - } - }); - - // #docregion content - var HeroComponent = ng.core.Component({ - selector: 'a-hero', - template: '

' + - '{{hero.name}} ' + - '' + - '

', - inputs: ['hero'], - queries: { - label: new ng.core.ContentChild( - ActiveLabelComponent) - } - }).Class({ - constructor: [function() { }], - activate: function() { - this.active = true; - this.label.activate(); - } - }); - app.HeroQueriesComponent = HeroComponent; - // #enddocregion content - - // #docregion view - var AppComponent = ng.core.Component({ - selector: 'heroes-queries', - template: - '' + - '' + - '' + - '', - queries: { - heroCmps: new ng.core.ViewChildren( - HeroComponent) - } - }).Class({ - constructor: function() { - this.heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - }, - activate: function() { - this.heroCmps.forEach(function(cmp) { - cmp.activate(); - }); - } - }); - // #enddocregion view - - 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 9091452599..fd3e737c9e 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 @@ -1,35 +1,9 @@ -// #docplaster -// #docregion appimport (function(app) { - // #enddocregion appimport - // #docregion ng2import - var platformBrowserDynamic = - ng.platformBrowserDynamic.platformBrowserDynamic; - var LocationStrategy = - ng.common.LocationStrategy; - var HashLocationStrategy = - ng.common.HashLocationStrategy; - // #enddocregion ng2import +var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic; - // #docregion appimport - var HeroComponent = app.HeroComponent; - // #enddocregion appimport +document.addEventListener('DOMContentLoaded', function() { + platformBrowserDynamic().bootstrapModule(app.AppModule); +}); - document.addEventListener('DOMContentLoaded', function() { - 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 })(window.app = window.app || {}); -// #enddocregion appimport diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html index 448c295609..7d2105bf78 100644 --- a/public/docs/_examples/cb-ts-to-js/js/index.html +++ b/public/docs/_examples/cb-ts-to-js/js/index.html @@ -4,64 +4,41 @@ + TypeScript to JavaScript + - + + + - - - - - + + + + + + - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-view2... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inline... - Loading hero-di-inline2... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html new file mode 100644 index 0000000000..7f1efd31a0 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html @@ -0,0 +1,31 @@ + +

{{title}}

+Classes and Class Metadata
+Input and Output Decorators
+Dependency Injection
+Host Metadata
+View and Child Metadata
+ +
+

Classes and Class Metadata

+ + + +
+

Input and Output Metadata

+ + +
+

Dependency Injection

+ + + + +
+

Host Metadata

+ + + +
+

View and Child Metadata

+ diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts new file mode 100644 index 0000000000..722d812f63 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'my-app', + templateUrl: 'app.component.html', + styles: [ + // See hero-di-inject-additional.component + 'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}', + '.heading {font-style: italic}' + ] +}) +export class AppComponent { + title = 'TypeScript'; +} diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts new file mode 100644 index 0000000000..8aafe9c9bb --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts @@ -0,0 +1,56 @@ +/* tslint:disable-next-line:no-unused-variable */ +import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { ConfirmComponent } from './confirm.component'; +// #docregion appimport +import { HeroComponent } from './hero.component'; +// #enddocregion appimport +import { HeroComponent as HeroDIComponent } from './hero-di.component'; +import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component'; +import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component'; +import { HeroHostComponent } from './hero-host.component'; +import { HeroHostMetaComponent } from './hero-host-meta.component'; +import { HeroIOComponent } from './hero-io.component'; +import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component'; +import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component'; +import { HeroTitleComponent } from './hero-title.component'; + +import { DataService } from './data.service'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + ConfirmComponent, + HeroComponent, + HeroDIComponent, + HeroDIInjectComponent, + HeroDIInjectAdditionalComponent, + HeroHostComponent, HeroHostMetaComponent, + HeroIOComponent, + HeroLifecycleComponent, + HeroQueriesComponent, ViewChildComponent, ContentChildComponent, + HeroTitleComponent + ], + providers: [ + DataService, + { provide: 'heroName', useValue: 'Windstorm' } + ], + bootstrap: [ AppComponent ], + + // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging! +}) +export class AppModule { } + +/* tslint:disable no-unused-variable */ +// #docregion ng2import +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { + LocationStrategy, + HashLocationStrategy +} from '@angular/common'; +// #enddocregion ng2import diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html new file mode 100644 index 0000000000..917bd1696f --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html @@ -0,0 +1,6 @@ + + diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts new file mode 100644 index 0000000000..08a0ed6c60 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +// #docregion +@Component({ + moduleId: module.id, + selector: 'app-confirm', + templateUrl: 'confirm.component.html' +}) +export class ConfirmComponent { + @Input() okMsg = ''; + @Input('cancelMsg') notOkMsg = ''; + @Output() ok = new EventEmitter(); + @Output('cancel') notOk = new EventEmitter(); + + onOkClick() { + this.ok.emit(true); + } + onNotOkClick() { + this.notOk.emit(true); + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts index 7e9c7456c6..cd7f9e1aae 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts +++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; @Injectable() export class DataService { - constructor() { - } + constructor() { } + getHeroName() { return 'Windstorm'; } 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 146c6cbd83..ec460a9dbc 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 @@ -1,50 +1,7 @@ -import { - Attribute, - Component, - Inject, - Optional, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - selector: 'hero-title', - template: ` -

{{titlePrefix}} {{title}}

- -

{{ msg }}

- ` -}) -class TitleComponent { - private msg: string = ''; - constructor( - @Inject('titlePrefix') - @Optional() - private titlePrefix: string, - @Attribute('title') - private title: string) { - } - - ok() { - this.msg = 'OK!'; - } -} -// #enddocregion +import { Component } from '@angular/core'; @Component({ selector: 'hero-di-inject-additional', - template: ` - ` + template: `` }) -class AppComponent { } - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ - AppComponent, - TitleComponent - ], - bootstrap: [ AppComponent ] -}) -export class HeroesDIInjectAdditionalModule { } +export class HeroComponent { } 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 7dc2bc84a2..c583a1b0f6 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,23 +1,11 @@ -import { Component, Inject, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { Component, Inject } from '@angular/core'; // #docregion @Component({ selector: 'hero-di-inject', template: `

Hero: {{name}}

` }) -class HeroComponent { - constructor( - @Inject('heroName') - private name: string) { - } +export 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 a20453ef0a..0cc78d277e 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,6 +1,4 @@ -import { Component, NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - +import { Component } from '@angular/core'; import { DataService } from './data.service'; // #docregion @@ -8,18 +6,10 @@ import { DataService } from './data.service'; selector: 'hero-di', template: `

Hero: {{name}}

` }) -class HeroComponent { - name: string; +export class HeroComponent { + name = ''; 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-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts new file mode 100644 index 0000000000..fefe4a5470 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host-meta', + template: ` +

Hero Host in Metadata

+
Heading clicks: {{clicks}}
+ `, + host: { + // HostBindings to the element + '[title]': 'title', + '[class.heading]': 'headingClass', + + // HostListeners on the entire element + '(click)': 'clicked()', + '(mouseenter)': 'enter($event)', + '(mouseleave)': 'leave($event)' + }, + // Styles within (but excluding) the element + styles: ['.active {background-color: coral;}'] +}) +export class HeroHostMetaComponent { + title = 'Hero Host in Metadata Tooltip'; + headingClass = true; + + active = false; + clicks = 0; + + clicked() { + this.clicks += 1; + } + + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts new file mode 100644 index 0000000000..e8d72233c8 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts @@ -0,0 +1,39 @@ +import { Component, HostBinding, HostListener } from '@angular/core'; + +// #docregion +@Component({ + selector: 'hero-host', + template: ` +

Hero Host in Decorators

+
Heading clicks: {{clicks}}
+ `, + // Styles within (but excluding) the element + styles: ['.active {background-color: yellow;}'] +}) +export class HeroHostComponent { + // HostBindings to the element + @HostBinding() title = 'Hero Host in Decorators Tooltip'; + @HostBinding('class.heading') headingClass = true; + + active = false; + clicks = 0; + + // HostListeners on the entire element + @HostListener('click') + clicked() { + this.clicks += 1; + } + + @HostListener('mouseenter', ['$event']) + enter(event: Event) { + this.active = true; + this.headingClass = false; + } + + @HostListener('mouseleave', ['$event']) + leave(event: Event) { + this.active = false; + this.headingClass = true; + } +} +// #enddocregion 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 8cf430c000..4b36411e78 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,73 +1,26 @@ -import { - Component, - EventEmitter, - Input, - Output, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - selector: 'my-confirm', - template: ` - - - ` -}) -class ConfirmComponent { - @Input() okMsg: string; - @Input('cancelMsg') notOkMsg: string; - @Output() ok = - new EventEmitter(); - @Output('cancel') notOk = - new EventEmitter(); - - onOkClick() { - this.ok.next(true); - } - onNotOkClick() { - this.notOk.next(true); - } -} -// #enddocregion - +import { Component } from '@angular/core'; @Component({ selector: 'hero-io', template: ` - - + + OK clicked Cancel clicked ` }) -class AppComponent { - okClicked: boolean; - cancelClicked: boolean; +export class HeroIOComponent { + okClicked = false; + cancelClicked = false; onOk() { this.okClicked = true; } + onCancel() { 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 1181c71cc9..2629c85a1a 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,28 +1,14 @@ -// #docplaster // #docregion 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 -class HeroComponent - implements OnInit { +export class HeroComponent implements OnInit { name: string; ngOnInit() { - this.name = 'Windstorm'; + // todo: fetch from server async + setTimeout(() => this.name = 'Windstorm', 0); } } -// #enddocregion - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ HeroComponent ], - bootstrap: [ HeroComponent ] -}) -export class HeroesLifecycleModule { } - diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts new file mode 100644 index 0000000000..8b2d91ea85 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts @@ -0,0 +1,83 @@ +import { + Component, + ContentChild, + Input, + QueryList, + ViewChildren +} from '@angular/core'; + +@Component({ + selector: 'content-child', + template: ` + + Active + ` +}) +export class ContentChildComponent { + active = false; + + activate() { + this.active = !this.active; + } +} + +//////////////////// + +// #docregion content +@Component({ + selector: 'view-child', + template: ` +

+ {{hero.name}} + +

`, + styles: ['.active {font-weight: bold; background-color: skyblue;}'] +}) +export class ViewChildComponent { + @Input() hero: any; + active = false; + + @ContentChild(ContentChildComponent) content: ContentChildComponent; + + activate() { + this.active = !this.active; + this.content.activate(); + } +} +// #enddocregion content + +//////////////////// + +// #docregion view +@Component({ + selector: 'hero-queries', + template: ` + + + + + ` +}) +export class HeroQueriesComponent { + active = false; + heroData = [ + {id: 1, name: 'Windstorm'}, + {id: 2, name: 'LaughingGas'} + ]; + + @ViewChildren(ViewChildComponent) views: QueryList; + + activate() { + this.active = !this.active; + this.views.forEach( + view => view.activate() + ); + } + + // #docregion defined-property + get buttonLabel() { + return this.active ? 'Deactivate' : 'Activate'; + } + // #enddocregion defined-property +} +// #enddocregion view diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html new file mode 100644 index 0000000000..0e93122d5c --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html @@ -0,0 +1,4 @@ + +

{{titlePrefix}} {{title}}

+ +

{{ msg }}

diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts new file mode 100644 index 0000000000..074f2edd61 --- /dev/null +++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts @@ -0,0 +1,22 @@ +import { Attribute, Component, Inject, Optional } from '@angular/core'; + +// #docregion +// #docregion templateUrl +@Component({ + moduleId: module.id, + selector: 'hero-title', + templateUrl: 'hero-title.component.html' +}) +// #enddocregion templateUrl +export class HeroTitleComponent { + msg: string = ''; + constructor( + @Inject('titlePrefix') @Optional() private titlePrefix: string, + @Attribute('title') private title: string + ) { } + + ok() { + this.msg = 'OK!'; + } +} +// #enddocregion 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 4b4ba8529d..4ea4c11611 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 @@ -1,30 +1,14 @@ -// #docplaster // #docregion metadata import { Component } from '@angular/core'; @Component({ selector: 'hero-view', - template: - '

Hero: {{getName()}}

' + template: '

{{title}}: {{getName()}}

' }) -// #docregion appexport -// #docregion class +// #docregion appexport, class export class HeroComponent { title = 'Hero Detail'; getName() {return 'Windstorm'; } } -// #enddocregion class -// #enddocregion appexport +// #enddocregion appexport, class // #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 deleted file mode 100644 index 407b8b0e29..0000000000 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { - Component, - HostBinding, - HostListener, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -// #docregion -@Component({ - selector: 'heroes-bindings', - template: `

- Tour of Heroes -

` -}) -class HeroesComponent { - @HostBinding() title = 'Tooltip content'; - @HostBinding('class.heading') - hClass = true; - active: boolean; - - constructor() {} - - @HostListener('click') - clicked() { - this.active = !this.active; - } - - @HostListener('dblclick', ['$event']) - doubleClicked(evt: Event) { - this.active = true; - } -} -// #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 deleted file mode 100644 index 97003766e6..0000000000 --- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { - Component, - ViewChildren, - ContentChild, - QueryList, - Input, - NgModule -} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -@Component({ - selector: 'active-label', - template: ` - Active - ` -}) -class ActiveLabelComponent { - active: boolean; - - activate() { - this.active = true; - } -} - -// #docregion content -@Component({ - selector: 'a-hero', - template: `

- {{hero.name}} - -

` -}) -class HeroComponent { - @Input() hero: any; - active: boolean; - - @ContentChild(ActiveLabelComponent) - label: ActiveLabelComponent; - - activate() { - this.active = true; - this.label.activate(); - } -} -// #enddocregion content - - -// #docregion view -@Component({ - selector: 'heroes-queries', - template: ` - - - - - ` -}) -class HeroesQueriesComponent { - heroData = [ - {id: 1, name: 'Windstorm'}, - {id: 2, name: 'Superman'} - ]; - - @ViewChildren(HeroComponent) - heroCmps: QueryList; - - activate() { - this.heroCmps.forEach( - (cmp) => cmp.activate() - ); - } -} -// #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 92f5af5e1a..7cc80b5964 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 @@ -1,30 +1,4 @@ -/* tslint:disable no-unused-variable */ -// #docregion ng2import -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - LocationStrategy, - HashLocationStrategy -} from '@angular/common'; -// #enddocregion ng2import - -// #docregion appimport -import { HeroComponent } from './hero.component'; -// #enddocregion appimport - -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); +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html index c635706f38..5791134d4f 100644 --- a/public/docs/_examples/cb-ts-to-js/ts/index.html +++ b/public/docs/_examples/cb-ts-to-js/ts/index.html @@ -5,6 +5,7 @@ + TypeScript to JavaScript @@ -20,32 +21,7 @@ - -

TypeScript to JavaScript

- Classes and Class Metadata
- Input and Output Metadata
- Dependency Injection
- Host and Query Metadata
- -
-

Classes and Class Metadata

- Loading hero-view... - Loading hero-lifecycle... - -
-

Input and Output Metadata

- Loading hero-io... - -
-

Dependency Injection

- Loading hero-di... - Loading hero-di-inject... - Loading hero-di-inject-additional... - -
-

Host and Query Metadata

- Loading heroes-bindings... - Loading heroes-queries... + Loading... diff --git a/public/docs/_examples/ngmodule/ts/index.0.html b/public/docs/_examples/ngmodule/ts/index.0.html index 4ad8c4fc18..1b72565156 100644 --- a/public/docs/_examples/ngmodule/ts/index.0.html +++ b/public/docs/_examples/ngmodule/ts/index.0.html @@ -13,7 +13,7 @@ - + - + - + - + - + Syntax'; // #enddocregion evil-title @@ -180,6 +178,21 @@ export class AppComponent implements AfterViewInit, OnInit { } // #enddocregion setStyles + // #docregion NgStyle + isItalic = false; + isBold = false; + fontSize: string = 'large'; + fontSizePx: number | string = 14; + + setStyle() { + return { + 'font-style': this.isItalic ? 'italic' : 'normal', + 'font-weight': this.isBold ? 'bold' : 'normal', + 'font-size': this.fontSize + }; + } + // #enddocregion NgStyle + toeChoice = ''; toeChooser(picker: HTMLFieldSetElement) { let choices = picker.children; diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts index db940fad08..712b613daf 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.module.ts +++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts @@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component'; -import { MyClickDirective, MyClickDirective2 } from './my-click.directive'; +import { ClickDirective, ClickDirective2 } from './click.directive'; import { SizerComponent } from './sizer.component'; @NgModule({ @@ -16,8 +16,8 @@ import { SizerComponent } from './sizer.component'; AppComponent, BigHeroDetailComponent, HeroDetailComponent, - MyClickDirective, - MyClickDirective2, + ClickDirective, + ClickDirective2, SizerComponent ], bootstrap: [ AppComponent ] diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/click.directive.ts similarity index 76% rename from public/docs/_examples/template-syntax/ts/app/my-click.directive.ts rename to public/docs/_examples/template-syntax/ts/app/click.directive.ts index 1f552277bf..09757bfeaf 100644 --- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts +++ b/public/docs/_examples/template-syntax/ts/app/click.directive.ts @@ -3,10 +3,10 @@ import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; @Directive({selector: '[myClick]'}) -export class MyClickDirective { - // #docregion my-click-output-1 +export class ClickDirective { + // #docregion output-myClick @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ... - // #enddocregion my-click-output-1 + // #enddocregion output-myClick toggle = false; @@ -19,15 +19,15 @@ export class MyClickDirective { } } -// #docregion my-click-output-2 +// #docregion output-myClick2 @Directive({ -// #enddocregion my-click-output-2 + // #enddocregion output-myClick2 selector: '[myClick2]', -// #docregion my-click-output-2 + // #docregion output-myClick2 outputs: ['clicks:myClick'] // propertyName:alias }) -// #enddocregion my-click-output-2 -export class MyClickDirective2 { +// #enddocregion output-myClick2 +export class ClickDirective2 { clicks = new EventEmitter(); toggle = false; diff --git a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts index cf0ef4af47..b6065c8cd1 100644 --- a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts +++ b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts @@ -11,15 +11,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
` }) export class SizerComponent { - @Input() size: number; + @Input() size: number | string; @Output() sizeChange = new EventEmitter(); dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { - const size = +this.size + delta; - this.size = Math.min(40, Math.max(8, size)); + this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } } diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart index bc2293cec1..1731bf4d0e 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart @@ -4,21 +4,27 @@ import 'dart:async'; import 'package:angular2/core.dart'; +// #docregion import-router +import 'package:angular2/router.dart'; +// #enddocregion import-router import 'hero.dart'; import 'hero_service.dart'; // #enddocregion imports +// #docregion metadata @Component( selector: 'my-dashboard', // #docregion templateUrl templateUrl: 'dashboard_component.html', // #enddocregion templateUrl // #docregion css - styleUrls: const ['dashboard_component.css'] + styleUrls: const ['dashboard_component.css'], // #enddocregion css + directives: const [ROUTER_DIRECTIVES], ) -// #docregion component +// #enddocregion metadata +// #docregion class, component class DashboardComponent implements OnInit { List heroes; @@ -26,11 +32,9 @@ class DashboardComponent implements OnInit { final HeroService _heroService; DashboardComponent(this._heroService); - // #enddocregion ctor Future ngOnInit() async { heroes = (await _heroService.getHeroes()).skip(1).take(4).toList(); } } -// #enddocregion component diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html index 49e77c460c..f48c102949 100644 --- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html +++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html @@ -2,7 +2,7 @@

Top Heroes

- +

{{hero.name}}

diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html similarity index 100% rename from public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html rename to public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart index a99528cbaa..df03c092f3 100644 --- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart @@ -2,12 +2,12 @@ // #docregion , v2 // #docregion added-imports import 'dart:async'; -import 'dart:html' show window; // #enddocregion added-imports import 'package:angular2/core.dart'; // #docregion added-imports import 'package:angular2/router.dart'; +import 'package:angular2/platform/common.dart'; // #enddocregion added-imports import 'hero.dart'; @@ -17,9 +17,9 @@ import 'hero_service.dart'; @Component( selector: 'my-hero-detail', - // #docregion templateUrl + // #docregion metadata, templateUrl templateUrl: 'hero_detail_component.html', - // #enddocregion templateUrl, v2 + // #enddocregion metadata, templateUrl, v2 styleUrls: const ['hero_detail_component.css'] // #docregion v2 ) @@ -30,8 +30,9 @@ class HeroDetailComponent implements OnInit { // #docregion ctor final HeroService _heroService; final RouteParams _routeParams; + final Location _location; - HeroDetailComponent(this._heroService, this._routeParams); + HeroDetailComponent(this._heroService, this._routeParams, this._location); // #enddocregion ctor // #docregion ngOnInit @@ -44,7 +45,7 @@ class HeroDetailComponent implements OnInit { // #docregion goBack void goBack() { - window.history.back(); + _location.back(); } // #enddocregion goBack } diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart index e19c3ab3be..2e0eddd076 100644 --- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart +++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart @@ -41,9 +41,11 @@ class HeroesComponent implements OnInit { selectedHero = hero; } + // #docregion gotoDetail Future gotoDetail() => _router.navigate([ 'HeroDetail', {'id': selectedHero.id.toString()} ]); + // #enddocregion gotoDetail // #docregion renaming } diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts index 430a30ebbe..3c92b205c8 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts @@ -6,4 +6,3 @@ import { Component } from '@angular/core'; template: '

My Dashboard

' }) export class DashboardComponent { } - diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts index cb5cfc5b82..9311a74395 100644 --- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts @@ -33,4 +33,3 @@ export class DashboardComponent implements OnInit { .then(heroes => this.heroes = heroes.slice(1, 5)); } } -// #enddocregion class diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html index cf96fc2169..8f2ff9d90c 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html @@ -11,4 +11,4 @@ -
\ No newline at end of file +
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 3ca01d2361..3557aa31d5 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,5 +1,7 @@ // #docplaster -// #docregion , v2 +// #docregion , v2, rxjs-import +import 'rxjs/add/operator/switchMap'; +// #enddocregion rxjs-import import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; @@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit { // #docregion ngOnInit ngOnInit(): void { - this.route.params.forEach((params: Params) => { - let id = +params['id']; - this.heroService.getHero(id) - .then(hero => this.hero = hero); - }); + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); } // #enddocregion ngOnInit 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 001b34baf7..a0342415f2 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,4 +1,5 @@ // #docregion +import 'rxjs/add/operator/switchMap'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Location } from '@angular/common'; @@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit { ) {} ngOnInit(): void { - this.route.params.forEach((params: Params) => { - let id = +params['id']; - this.heroService.getHero(id) - .then(hero => this.hero = hero); - }); + this.route.params + .switchMap((params: Params) => this.heroService.getHero(+params['id'])) + .subscribe(hero => this.hero = hero); } // #docregion save diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts index 091a7d82a7..961a226688 100644 --- a/public/docs/_examples/toh-6/ts/app/main.ts +++ b/public/docs/_examples/toh-6/ts/app/main.ts @@ -1,6 +1,6 @@ // #docregion -// main entry point import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index ed36c0f33f..553ca9338a 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -14,14 +14,14 @@ } ], "dependencies": { - "@angular/common": "~2.1.1", - "@angular/compiler": "~2.1.1", - "@angular/core": "~2.1.1", - "@angular/forms": "~2.1.1", - "@angular/http": "~2.1.1", - "@angular/platform-browser": "~2.1.1", - "@angular/platform-browser-dynamic": "~2.1.1", - "@angular/router": "~3.1.1", + "@angular/common": "~2.2.0", + "@angular/compiler": "~2.2.0", + "@angular/core": "~2.2.0", + "@angular/forms": "~2.2.0", + "@angular/http": "~2.2.0", + "@angular/platform-browser": "~2.2.0", + "@angular/platform-browser-dynamic": "~2.2.0", + "@angular/router": "~3.2.0", "core-js": "^2.4.1", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.25" diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json index a747acd83f..eb1a46ace4 100644 --- a/public/docs/dart/latest/cookbook/_data.json +++ b/public/docs/dart/latest/cookbook/_data.json @@ -60,7 +60,7 @@ "ts-to-js": { "title": "TypeScript to JavaScript", - "intro": "Convert Angular TypeScript examples into ES5 JavaScript", + "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript", "hide": true }, diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade index f122411f16..a2d1feb8fa 100644 --- a/public/docs/dart/latest/guide/forms.jade +++ b/public/docs/dart/latest/guide/forms.jade @@ -96,12 +96,6 @@ figure.image-display +makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart') -.l-sub-section - :marked - Note the `platform_directives` entry in `pubspec.yaml`. - It imports core directives and, more importantly for this chapter, - **form directives**. - :marked So that the code can run, let's create a stub for the `` component. diff --git a/public/docs/dart/latest/guide/glossary.jade b/public/docs/dart/latest/guide/glossary.jade index 1d2eb49664..ff49e787f0 100644 --- a/public/docs/dart/latest/guide/glossary.jade +++ b/public/docs/dart/latest/guide/glossary.jade @@ -1,4 +1,4 @@ extends ../glossary -block var-def +block includes include ../_util-fns diff --git a/public/docs/dart/latest/guide/template-syntax.jade b/public/docs/dart/latest/guide/template-syntax.jade index bee8fc97a7..fe62bd9084 100644 --- a/public/docs/dart/latest/guide/template-syntax.jade +++ b/public/docs/dart/latest/guide/template-syntax.jade @@ -48,16 +48,6 @@ block dart-type-exception-example In checked mode, the code above will result in a type exception: `String` isn't a subtype of `Hero`. -block dart-class-binding-bug - .callout.is-helpful - header Angular Issue #6901 - :marked - Issue [#6901][6901] prevents us from using `[class]`. As is illustrated - above, in the meantime we can achieve the same effect by binding to - `className`. - - [6901]: http://github.com/angular/angular/issues/6901 - block style-property-name-dart-diff .callout.is-helpful header Dart difference: Style property names diff --git a/public/docs/dart/latest/tutorial/toh-pt1.jade b/public/docs/dart/latest/tutorial/toh-pt1.jade index 218d35c788..9bdb15fa08 100644 --- a/public/docs/dart/latest/tutorial/toh-pt1.jade +++ b/public/docs/dart/latest/tutorial/toh-pt1.jade @@ -1,8 +1,6 @@ include ../_util-fns :marked - # Once Upon a Time - Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends. :marked diff --git a/public/docs/dart/latest/tutorial/toh-pt2.jade b/public/docs/dart/latest/tutorial/toh-pt2.jade index 24e38e31b3..e5c78afdec 100644 --- a/public/docs/dart/latest/tutorial/toh-pt2.jade +++ b/public/docs/dart/latest/tutorial/toh-pt2.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # It Takes Many Heroes Our story needs more heroes. We’ll expand our Tour of Heroes app to display a list of heroes, allow the user to select a hero, and display the hero’s details. diff --git a/public/docs/dart/latest/tutorial/toh-pt4.jade b/public/docs/dart/latest/tutorial/toh-pt4.jade index cc417c159e..a9d5ca86e2 100644 --- a/public/docs/dart/latest/tutorial/toh-pt4.jade +++ b/public/docs/dart/latest/tutorial/toh-pt4.jade @@ -1,7 +1,6 @@ include ../_util-fns :marked - # Services The Tour of Heroes is evolving and we anticipate adding more components in the near future. Multiple components will need access to hero data and we don't want to copy and diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade index 6be571c148..9ce3e7ed7b 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5.jade @@ -96,12 +96,13 @@ block redirect-vs-use-as-default router will display the dashboard when the browser URL doesn't match an existing route. block templateUrl-path-resolution - :marked - The value of `templateUrl` can be an [asset][] in this package or another - package. To use an asset in another package, use a full package reference, - such as `'package:some_other_package/dashboard_component.html'`. + .l-sub-section + :marked + The value of `templateUrl` can be an [asset][] in this package or another + package. To use an asset in another package, use a full package reference, + such as `'package:some_other_package/dashboard_component.html'`. - [asset]: https://www.dartlang.org/tools/pub/glossary#asset + [asset]: https://www.dartlang.org/tools/pub/glossary#asset block route-params :marked diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json index d3fff22a9c..18ed3ed0bd 100644 --- a/public/docs/js/latest/_data.json +++ b/public/docs/js/latest/_data.json @@ -4,7 +4,7 @@ "title": "Angular Docs", "subtitle": "JavaScript", "menuTitle": "Docs Home", - "banner": "Angular release is 2.1. View the change log to see enhancements, fixes, and breaking changes." + "banner": "The latest Angular release is 2.2. View the change log to see enhancements, fixes, and breaking changes." }, "quickstart": { diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json index 3f319736d6..74ee2a0be9 100644 --- a/public/docs/js/latest/cookbook/_data.json +++ b/public/docs/js/latest/cookbook/_data.json @@ -55,7 +55,7 @@ "ts-to-js": { "title": "TypeScript to JavaScript", - "intro": "Convert Angular TypeScript examples into ES5 JavaScript" + "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript" }, "visual-studio-2015": { diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index a76d90bce7..77e3f9b7d6 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/public/docs/js/latest/cookbook/ts-to-js.jade @@ -1,469 +1 @@ -include ../../../../_includes/_util-fns - -:marked - Everything that we can do in Angular in TypeScript, we can also do - in JavaScript. Translating from one language to the other is mostly a - matter of changing the way we organize our code and the way we access - Angular APIs. - - Since TypeScript is a popular language option in Angular, many of the - code examples you see on the Internet as well as on this site are written - in TypeScript. This cookbook contains recipes for translating these kinds of - code examples to ES5, so that they can be applied to Angular JavaScript - applications. - - -:marked - ## Table of contents - - [Modularity: imports and exports](#modularity) - - [Classes and Class Metadata](#class-metadata) - - [Input and Output Metadata](#property-metadata) - - [Dependency Injection](#dependency-injection) - - [Host and Query Metadata](#other-property-metadata) - - **Run and compare the live TypeScript and JavaScript - code shown in this cookbook.** - -a(id="modularity") -.l-main-section -:marked - ## Importing and Exporting - -- var top="vertical-align:top" -table(width="100%") - col(width="50%") - col(width="50%") - tr - th TypeScript - th ES5 JavaScript - tr(style=top) - td - :marked - ### Importing Angular Code - - In TypeScript code, Angular classes, functions, and other members - are imported with TypeScript `import` statements: - - +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." ) - - td - :marked - ### Accessing Angular Code through the ng global - - In JavaScript code, when using - [the Angular packages](../glossary.html#!#scoped-package), - we can access Angular code through the global `ng` object. In the - nested members of this object we'll find everything we would import - from `@angular` in TypeScript: - - +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." ) - - tr(style=top) - td - :marked - ### Importing and Exporting Application Code - - Each file in an Angular TypeScript application constitutes a - TypeScript module. When we want to make something from a module available - to other modules, we `export` it. - - +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." ) - - :marked - In other modules we can then `import` things that have been exported - elsewhere. - - +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." ) - - td - :marked - ### Sharing Application Code - - In an Angular JavaScript application, we load each file to the page - using a `' - html += '' + html += ''; html += ''; return html; } @@ -166,8 +172,8 @@ class PlunkerBuilder { return postData; } - _createPlunkerHtml(postData) { - var baseHtml = this._createBasePlunkerHtml(this.options.embedded); + _createPlunkerHtml(config, postData) { + var baseHtml = this._createBasePlunkerHtml(config, this.options.embedded); var doc = jsdom.jsdom(baseHtml); var form = doc.querySelector('form'); _.forEach(postData, (value, key) => { diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js index 7f394e09a8..6241bc436f 100644 --- a/tools/plunker-builder/indexHtmlTranslator.js +++ b/tools/plunker-builder/indexHtmlTranslator.js @@ -28,7 +28,7 @@ var _rxRules = { // System.import('app').catch(function(err){ console.error(err); }); // system_strip_import_app: { - from: / - - - - - ' + to: '' }, // Clear script like this: // - - - + + + + - - - - Loading... + + Loading AppComponent content here ... + - + diff --git a/public/docs/_examples/quickstart/ts/plnkr.json b/public/docs/_examples/quickstart/ts/plnkr.json index a4449b444f..f9f54dea37 100644 --- a/public/docs/_examples/quickstart/ts/plnkr.json +++ b/public/docs/_examples/quickstart/ts/plnkr.json @@ -1,9 +1,9 @@ { "description": "QuickStart", "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" + "app/app.component.ts", + "index.html" ], + "open": "app/app.component.ts", "tags": ["quickstart"] -} \ No newline at end of file +} diff --git a/public/docs/_examples/setup/e2e-spec.ts b/public/docs/_examples/setup/e2e-spec.ts new file mode 100644 index 0000000000..73921707ee --- /dev/null +++ b/public/docs/_examples/setup/e2e-spec.ts @@ -0,0 +1,17 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by } from 'protractor'; + +describe('QuickStart E2E Tests', function () { + + let expectedMsg = 'Hello Angular'; + + beforeEach(function () { + browser.get(''); + }); + + it(`should display: ${expectedMsg}`, function () { + expect(element(by.css('h1')).getText()).toEqual(expectedMsg); + }); + +}); diff --git a/public/docs/_examples/setup/ts/app/app.component.spec.ts b/public/docs/_examples/setup/ts/app/app.component.spec.ts new file mode 100644 index 0000000000..e8f364f95c --- /dev/null +++ b/public/docs/_examples/setup/ts/app/app.component.spec.ts @@ -0,0 +1,35 @@ +/* tslint:disable:no-unused-variable */ +import { AppComponent } from './app.component'; + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +//////// SPECS ///////////// +describe('AppComponent', function () { + let de: DebugElement; + let comp: AppComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AppComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + de = fixture.debugElement.query(By.css('h1')); + }); + + it('should create component', () => expect(comp).toBeDefined() ); + + it('should have expected

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

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

Hello {{name}}

` +}) +export class AppComponent { name = 'Angular'; } diff --git a/public/docs/_examples/quickstart/ts/app/app.module.1.ts b/public/docs/_examples/setup/ts/app/app.module.ts similarity index 51% rename from public/docs/_examples/quickstart/ts/app/app.module.1.ts rename to public/docs/_examples/setup/ts/app/app.module.ts index cd9673617d..50a0e6eb47 100644 --- a/public/docs/_examples/quickstart/ts/app/app.module.1.ts +++ b/public/docs/_examples/setup/ts/app/app.module.ts @@ -1,8 +1,11 @@ // #docregion import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; @NgModule({ - imports: [ BrowserModule ] + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/public/docs/_examples/setup/ts/app/main.ts b/public/docs/_examples/setup/ts/app/main.ts new file mode 100644 index 0000000000..d3e7fa7a2f --- /dev/null +++ b/public/docs/_examples/setup/ts/app/main.ts @@ -0,0 +1,5 @@ +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/setup/ts/example-config.json b/public/docs/_examples/setup/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/setup/ts/index.html b/public/docs/_examples/setup/ts/index.html new file mode 100644 index 0000000000..99514d58f2 --- /dev/null +++ b/public/docs/_examples/setup/ts/index.html @@ -0,0 +1,31 @@ + + + + + Hello Angular + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/setup/ts/plnkr.json b/public/docs/_examples/setup/ts/plnkr.json new file mode 100644 index 0000000000..0cbf32e17b --- /dev/null +++ b/public/docs/_examples/setup/ts/plnkr.json @@ -0,0 +1,11 @@ +{ + "description": "QuickStart Setup", + "files": [ + "app/app.component.ts", + "app/app.module.ts", + "app/main.ts", + "index.html" + ], + "open": "app/app.component.ts", + "tags": ["quickstart setup"] +} diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index a439063f05..600b9f6b94 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -208,7 +208,7 @@ code-example(format=""). :marked The `template` property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. - Our template is a single line of HTML announcing "Hello Angular!". + Our template is a single line of HTML announcing "Hello Angular". Now we need something to tell Angular to load this component. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 71d3e2cded..79251b6ade 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -19,8 +19,8 @@ "icon": "query-builder", "title": "Quickstart", "subtitle": "TypeScript", - "description": "Get up and running with Angular", - "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." + "description": "Discover Angular", + "banner": "Discover Angular in a live-coding environment." }, "tutorial": { diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index 13d492b44e..90f33e179d 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -199,7 +199,7 @@ h3#component-decorator @Component decorator +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.') :marked The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's - `title` property. After out edit, Angular displays "Hello Angular!". + `title` property. After out edit, Angular displays "Hello Angular". We'll learn more about data binding as we read through the documentation. The **styleUrls** array specifies the location(s) of the component's private CSS style file(s). diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 78b159e40c..5134b294cd 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -2,7 +2,7 @@ "index": { "title": "Cookbook", "navTitle": "Overview", - "description": "A collection of recipes for common Angular application scenarios" + "intro": "A collection of recipes for common Angular application scenarios" }, "aot-compiler": { 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 ebca6c41ce..7105fa190b 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -137,7 +137,7 @@ table(width="100%") in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. - For more information see [Quick Start](../quickstart.html). + For more information see the [Setup](../guide/setup.html) page. tr(style=top) td :marked diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index e59218f4fc..8bfcb52143 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -91,8 +91,7 @@ a#compile ## Compile with AoT ### Prepare for offline compilation - - Take the QuickStart as a starting point. + Take the Setup as a starting point. A few minor changes to the lone `app.component` lead to these two class and html files: +makeTabs( diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index b75ccaf207..cc862cae81 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -103,10 +103,6 @@ block includes :marked The Angular [scoped packages](#scoped-package) each have a barrel named `index`. - That's why we can write this: - - +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '') - .alert.is-important :marked Note that you can often achieve this using [Angular modules](#angular-module) instead. @@ -127,7 +123,8 @@ block includes .l-sub-section block bootstrap-defn-top :marked - You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html). + You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping 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 [Setup](!{docsLatest}/guide/setup.html). :marked You can bootstrap multiple apps in the same `index.html`, each with its own top level root. diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 87cd58f9e7..b17b4aff45 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -2,11 +2,29 @@ "index": { "title": "Documentation Overview", "navTitle": "Overview", - "description": "How to read and use this documentation", + "intro": "How to read and use this documentation", "nextable": true, "basics": true }, + "setup": { + "title": "Setup for local development", + "navTitle": "Setup", + "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine", + "nextable": true, + "hideNextPage": true, + "basics": true + }, + + "learning-angular": { + "title": "Learning Angular", + "navTitle": "Learning Angular", + "intro": "A suggested path through the documentation for Angular newcomers", + "nextable": true, + "hideNextPage": true, + "basics": true + }, + "architecture": { "title": "Architecture Overview", "navTitle": "Architecture", @@ -15,6 +33,15 @@ "basics": true }, + + "appmodule": { + "title": "AppModule: the root module", + "navTitle": "The Root Module", + "intro": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\".", + "nextable": true, + "basics": true + }, + "displaying-data": { "title": "Displaying Data", "intro": "Property binding helps show app data in the UI.", @@ -136,6 +163,11 @@ "intro": "Developing for content security in Angular applications" }, + "setup-systemjs-anatomy": { + "title": "Setup Anatomy", + "intro": "Inside the local development environment for SystemJS" + }, + "structural-directives": { "title": "Structural Directives", "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements." diff --git a/public/docs/ts/latest/guide/appmodule.jade b/public/docs/ts/latest/guide/appmodule.jade new file mode 100644 index 0000000000..5e5eee9834 --- /dev/null +++ b/public/docs/ts/latest/guide/appmodule.jade @@ -0,0 +1,138 @@ +include ../_util-fns + +:marked + An Angular module class describes how the application parts fit together. + Every application has at least one Angular module, the _root_ module + that you [bootstrap](#main) to launch the application. + You can call it anything you want. The conventional name is `AppModule`. + + The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`. + You'll evolve this module as your application grows. + ++makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.') + +:marked + After the `import` statements, you come to a class adorned with the + **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained'). + + The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class). + `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application. + + * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser. + * **_declarations_** — the application's lone component, which is also ... + * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page. + + The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules. + All you need to know at the moment is a few basics about these three properties. + +a#imports +:marked + ### The _imports_ array + + Angular modules are a way to consolidate features that belong together into discrete units. + Many features of Angular itself are organized as Angular modules. + HTTP services are in the `HttpModule`. The router is in the `RouterModule`. + Eventually you may create a feature module. + + Add a module to the `imports` array when the application requires its features. + + _This_ application, like most applications, executes in a browser. + Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`. + So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array. + Other guide and cookbook pages will tell you when you need to add additional modules to this array. + +.alert.is-important + :marked + **Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`. + +.l-sub-section + :marked + Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array. + They have different jobs. + + The _JavaScript_ `import` statements give you access to symbols _exported_ by other files + so you can reference them within _this_ file. + They have nothing to do with Angular and Angular knows nothing about them. + + The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` — + that the application needs to function properly. +a#declarations +:marked + ### The _declarations_ array + + You must declare _every_ component in one (and _only one_) `NgModule` class. + You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array. + As you create more components, you'll add them to `declarations`. + + You'll learn to create two other kinds of classes — + [directives](attribute-directives.html) and [pipes](pipes.html) — + that you must also add to the `declarations` array. + +.alert.is-important + :marked + **Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.   + Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes. + +a#bootstrap-array +:marked + ### The _bootstrap_ array + + You launch the application by [_bootstrapping_](#main) the root `AppModule`. + Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array + and inserts each one into the browser DOM. + + Each bootstrapped component is the base of its own tree of components. + Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree. + + While you can put more than one component tree on a host web page, that's not typical. + Most applications have only one component tree and they bootstrap a single _root_ component. + + You can call the one _root_ component anything you want but most developers call it `AppComponent`. + + Which brings us to the _bootstrapping_ process itself. + +a#main +l-main-section +:marked + ## Bootstrap in _main.ts_ + + There are many ways to bootstrap an application. + The variations depend upon how you want to compile the application and where you want to run it. + + In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler + and you'll run it in a browser. You can learn about other options later. + + The recommended place to bootstrap a JiT-compiled browser application is in a separate file + in the `app` folder named `app/main.ts` ++makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.') +:marked + This code creates a browser platform for dynamic (JiT) compilation and + bootstrap's the `AppModule` described above. + + The _bootstrapping_ process sets up the execution environment, + digs the _root_ `AppComponent` out of the module's `bootstrap` array,   + creates an instance of the component and inserts it within the element tag identified by the component's `selector`. + + The `AppComponent` selector — here and in most documentation samples — is `my-app` + so Angular looks for a `` tag in the `index.html` like this one ... ++makeExample('setup/ts/index.html','my-app')(format='.') +:marked + ... and displays the `AppComponent` there. + + This file is very stable. Once you've set it up, you may never change it again. + +a#quickstart-appmodule +l-main-section +:marked + ## QuickStart's _AppModule_ + Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html). + You didn't see it but it was there. + + A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you + so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly. + + If you're feeling adventurous, add your own `AppModule` and `main.ts` to the + live code in the _QuickStart_ plunker. + + Remove the following `' + to: '' }, // Clear script like this: // + - - - - + + + + + - - Loading AppComponent content here ... - + Loading... - + diff --git a/public/docs/_examples/quickstart/ts/plnkr.json b/public/docs/_examples/quickstart/ts/plnkr.json index f9f54dea37..a4449b444f 100644 --- a/public/docs/_examples/quickstart/ts/plnkr.json +++ b/public/docs/_examples/quickstart/ts/plnkr.json @@ -1,9 +1,9 @@ { "description": "QuickStart", "files": [ - "app/app.component.ts", - "index.html" + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" ], - "open": "app/app.component.ts", "tags": ["quickstart"] -} +} \ No newline at end of file diff --git a/public/docs/_examples/setup/e2e-spec.ts b/public/docs/_examples/setup/e2e-spec.ts deleted file mode 100644 index 73921707ee..0000000000 --- a/public/docs/_examples/setup/e2e-spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -'use strict'; // necessary for es6 output in node - -import { browser, element, by } from 'protractor'; - -describe('QuickStart E2E Tests', function () { - - let expectedMsg = 'Hello Angular'; - - beforeEach(function () { - browser.get(''); - }); - - it(`should display: ${expectedMsg}`, function () { - expect(element(by.css('h1')).getText()).toEqual(expectedMsg); - }); - -}); diff --git a/public/docs/_examples/setup/ts/app/app.component.spec.ts b/public/docs/_examples/setup/ts/app/app.component.spec.ts deleted file mode 100644 index e8f364f95c..0000000000 --- a/public/docs/_examples/setup/ts/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* tslint:disable:no-unused-variable */ -import { AppComponent } from './app.component'; - -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; -import { DebugElement } from '@angular/core'; - -//////// SPECS ///////////// -describe('AppComponent', function () { - let de: DebugElement; - let comp: AppComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AppComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AppComponent); - comp = fixture.componentInstance; - de = fixture.debugElement.query(By.css('h1')); - }); - - it('should create component', () => expect(comp).toBeDefined() ); - - it('should have expected

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

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

Hello {{name}}

` -}) -export class AppComponent { name = 'Angular'; } diff --git a/public/docs/_examples/setup/ts/app/main.ts b/public/docs/_examples/setup/ts/app/main.ts deleted file mode 100644 index d3e7fa7a2f..0000000000 --- a/public/docs/_examples/setup/ts/app/main.ts +++ /dev/null @@ -1,5 +0,0 @@ -// #docregion -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app.module'; - -platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/setup/ts/example-config.json b/public/docs/_examples/setup/ts/example-config.json deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/public/docs/_examples/setup/ts/index.html b/public/docs/_examples/setup/ts/index.html deleted file mode 100644 index 99514d58f2..0000000000 --- a/public/docs/_examples/setup/ts/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - Hello Angular - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/docs/_examples/setup/ts/plnkr.json b/public/docs/_examples/setup/ts/plnkr.json deleted file mode 100644 index 0cbf32e17b..0000000000 --- a/public/docs/_examples/setup/ts/plnkr.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "description": "QuickStart Setup", - "files": [ - "app/app.component.ts", - "app/app.module.ts", - "app/main.ts", - "index.html" - ], - "open": "app/app.component.ts", - "tags": ["quickstart setup"] -} diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 600b9f6b94..a439063f05 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -208,7 +208,7 @@ code-example(format=""). :marked The `template` property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. - Our template is a single line of HTML announcing "Hello Angular". + Our template is a single line of HTML announcing "Hello Angular!". Now we need something to tell Angular to load this component. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 79251b6ade..71d3e2cded 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -19,8 +19,8 @@ "icon": "query-builder", "title": "Quickstart", "subtitle": "TypeScript", - "description": "Discover Angular", - "banner": "Discover Angular in a live-coding environment." + "description": "Get up and running with Angular", + "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." }, "tutorial": { diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index 90f33e179d..13d492b44e 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -199,7 +199,7 @@ h3#component-decorator @Component decorator +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.') :marked The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's - `title` property. After out edit, Angular displays "Hello Angular". + `title` property. After out edit, Angular displays "Hello Angular!". We'll learn more about data binding as we read through the documentation. The **styleUrls** array specifies the location(s) of the component's private CSS style file(s). diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 5134b294cd..78b159e40c 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -2,7 +2,7 @@ "index": { "title": "Cookbook", "navTitle": "Overview", - "intro": "A collection of recipes for common Angular application scenarios" + "description": "A collection of recipes for common Angular application scenarios" }, "aot-compiler": { 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 7105fa190b..ebca6c41ce 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -137,7 +137,7 @@ table(width="100%") in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. - For more information see the [Setup](../guide/setup.html) page. + For more information see [Quick Start](../quickstart.html). tr(style=top) td :marked diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index 8bfcb52143..e59218f4fc 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -91,7 +91,8 @@ a#compile ## Compile with AoT ### Prepare for offline compilation - Take the Setup as a starting point. + + Take the QuickStart as a starting point. A few minor changes to the lone `app.component` lead to these two class and html files: +makeTabs( diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index cc862cae81..b75ccaf207 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -103,6 +103,10 @@ block includes :marked The Angular [scoped packages](#scoped-package) each have a barrel named `index`. + That's why we can write this: + + +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '') + .alert.is-important :marked Note that you can often achieve this using [Angular modules](#angular-module) instead. @@ -123,8 +127,7 @@ block includes .l-sub-section block bootstrap-defn-top :marked - You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping 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 [Setup](!{docsLatest}/guide/setup.html). + You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html). :marked You can bootstrap multiple apps in the same `index.html`, each with its own top level root. diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index b17b4aff45..87cd58f9e7 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -2,29 +2,11 @@ "index": { "title": "Documentation Overview", "navTitle": "Overview", - "intro": "How to read and use this documentation", + "description": "How to read and use this documentation", "nextable": true, "basics": true }, - "setup": { - "title": "Setup for local development", - "navTitle": "Setup", - "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine", - "nextable": true, - "hideNextPage": true, - "basics": true - }, - - "learning-angular": { - "title": "Learning Angular", - "navTitle": "Learning Angular", - "intro": "A suggested path through the documentation for Angular newcomers", - "nextable": true, - "hideNextPage": true, - "basics": true - }, - "architecture": { "title": "Architecture Overview", "navTitle": "Architecture", @@ -33,15 +15,6 @@ "basics": true }, - - "appmodule": { - "title": "AppModule: the root module", - "navTitle": "The Root Module", - "intro": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\".", - "nextable": true, - "basics": true - }, - "displaying-data": { "title": "Displaying Data", "intro": "Property binding helps show app data in the UI.", @@ -163,11 +136,6 @@ "intro": "Developing for content security in Angular applications" }, - "setup-systemjs-anatomy": { - "title": "Setup Anatomy", - "intro": "Inside the local development environment for SystemJS" - }, - "structural-directives": { "title": "Structural Directives", "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements." diff --git a/public/docs/ts/latest/guide/appmodule.jade b/public/docs/ts/latest/guide/appmodule.jade deleted file mode 100644 index 5e5eee9834..0000000000 --- a/public/docs/ts/latest/guide/appmodule.jade +++ /dev/null @@ -1,138 +0,0 @@ -include ../_util-fns - -:marked - An Angular module class describes how the application parts fit together. - Every application has at least one Angular module, the _root_ module - that you [bootstrap](#main) to launch the application. - You can call it anything you want. The conventional name is `AppModule`. - - The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`. - You'll evolve this module as your application grows. - -+makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.') - -:marked - After the `import` statements, you come to a class adorned with the - **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained'). - - The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class). - `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application. - - * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser. - * **_declarations_** — the application's lone component, which is also ... - * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page. - - The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules. - All you need to know at the moment is a few basics about these three properties. - -a#imports -:marked - ### The _imports_ array - - Angular modules are a way to consolidate features that belong together into discrete units. - Many features of Angular itself are organized as Angular modules. - HTTP services are in the `HttpModule`. The router is in the `RouterModule`. - Eventually you may create a feature module. - - Add a module to the `imports` array when the application requires its features. - - _This_ application, like most applications, executes in a browser. - Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`. - So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array. - Other guide and cookbook pages will tell you when you need to add additional modules to this array. - -.alert.is-important - :marked - **Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`. - -.l-sub-section - :marked - Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array. - They have different jobs. - - The _JavaScript_ `import` statements give you access to symbols _exported_ by other files - so you can reference them within _this_ file. - They have nothing to do with Angular and Angular knows nothing about them. - - The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` — - that the application needs to function properly. -a#declarations -:marked - ### The _declarations_ array - - You must declare _every_ component in one (and _only one_) `NgModule` class. - You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array. - As you create more components, you'll add them to `declarations`. - - You'll learn to create two other kinds of classes — - [directives](attribute-directives.html) and [pipes](pipes.html) — - that you must also add to the `declarations` array. - -.alert.is-important - :marked - **Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.   - Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes. - -a#bootstrap-array -:marked - ### The _bootstrap_ array - - You launch the application by [_bootstrapping_](#main) the root `AppModule`. - Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array - and inserts each one into the browser DOM. - - Each bootstrapped component is the base of its own tree of components. - Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree. - - While you can put more than one component tree on a host web page, that's not typical. - Most applications have only one component tree and they bootstrap a single _root_ component. - - You can call the one _root_ component anything you want but most developers call it `AppComponent`. - - Which brings us to the _bootstrapping_ process itself. - -a#main -l-main-section -:marked - ## Bootstrap in _main.ts_ - - There are many ways to bootstrap an application. - The variations depend upon how you want to compile the application and where you want to run it. - - In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler - and you'll run it in a browser. You can learn about other options later. - - The recommended place to bootstrap a JiT-compiled browser application is in a separate file - in the `app` folder named `app/main.ts` -+makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.') -:marked - This code creates a browser platform for dynamic (JiT) compilation and - bootstrap's the `AppModule` described above. - - The _bootstrapping_ process sets up the execution environment, - digs the _root_ `AppComponent` out of the module's `bootstrap` array,   - creates an instance of the component and inserts it within the element tag identified by the component's `selector`. - - The `AppComponent` selector — here and in most documentation samples — is `my-app` - so Angular looks for a `` tag in the `index.html` like this one ... -+makeExample('setup/ts/index.html','my-app')(format='.') -:marked - ... and displays the `AppComponent` there. - - This file is very stable. Once you've set it up, you may never change it again. - -a#quickstart-appmodule -l-main-section -:marked - ## QuickStart's _AppModule_ - Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html). - You didn't see it but it was there. - - A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you - so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly. - - If you're feeling adventurous, add your own `AppModule` and `main.ts` to the - live code in the _QuickStart_ plunker. - - Remove the following `' + to: '' }, // Clear script like this: // - - - + + + + - - - - Loading... + + Loading AppComponent content here ... + - + diff --git a/public/docs/_examples/quickstart/ts/plnkr.json b/public/docs/_examples/quickstart/ts/plnkr.json index a4449b444f..f9f54dea37 100644 --- a/public/docs/_examples/quickstart/ts/plnkr.json +++ b/public/docs/_examples/quickstart/ts/plnkr.json @@ -1,9 +1,9 @@ { "description": "QuickStart", "files": [ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" + "app/app.component.ts", + "index.html" ], + "open": "app/app.component.ts", "tags": ["quickstart"] -} \ No newline at end of file +} diff --git a/public/docs/_examples/setup/e2e-spec.ts b/public/docs/_examples/setup/e2e-spec.ts new file mode 100644 index 0000000000..73921707ee --- /dev/null +++ b/public/docs/_examples/setup/e2e-spec.ts @@ -0,0 +1,17 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by } from 'protractor'; + +describe('QuickStart E2E Tests', function () { + + let expectedMsg = 'Hello Angular'; + + beforeEach(function () { + browser.get(''); + }); + + it(`should display: ${expectedMsg}`, function () { + expect(element(by.css('h1')).getText()).toEqual(expectedMsg); + }); + +}); diff --git a/public/docs/_examples/setup/ts/app/app.component.spec.ts b/public/docs/_examples/setup/ts/app/app.component.spec.ts new file mode 100644 index 0000000000..e8f364f95c --- /dev/null +++ b/public/docs/_examples/setup/ts/app/app.component.spec.ts @@ -0,0 +1,35 @@ +/* tslint:disable:no-unused-variable */ +import { AppComponent } from './app.component'; + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +//////// SPECS ///////////// +describe('AppComponent', function () { + let de: DebugElement; + let comp: AppComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AppComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AppComponent); + comp = fixture.componentInstance; + de = fixture.debugElement.query(By.css('h1')); + }); + + it('should create component', () => expect(comp).toBeDefined() ); + + it('should have expected

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

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

Hello {{name}}

` +}) +export class AppComponent { name = 'Angular'; } diff --git a/public/docs/_examples/quickstart/ts/app/app.module.1.ts b/public/docs/_examples/setup/ts/app/app.module.ts similarity index 51% rename from public/docs/_examples/quickstart/ts/app/app.module.1.ts rename to public/docs/_examples/setup/ts/app/app.module.ts index cd9673617d..50a0e6eb47 100644 --- a/public/docs/_examples/quickstart/ts/app/app.module.1.ts +++ b/public/docs/_examples/setup/ts/app/app.module.ts @@ -1,8 +1,11 @@ // #docregion import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { AppComponent } from './app.component'; @NgModule({ - imports: [ BrowserModule ] + imports: [ BrowserModule ], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/public/docs/_examples/setup/ts/app/main.ts b/public/docs/_examples/setup/ts/app/main.ts new file mode 100644 index 0000000000..d3e7fa7a2f --- /dev/null +++ b/public/docs/_examples/setup/ts/app/main.ts @@ -0,0 +1,5 @@ +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/setup/ts/example-config.json b/public/docs/_examples/setup/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/setup/ts/index.html b/public/docs/_examples/setup/ts/index.html new file mode 100644 index 0000000000..99514d58f2 --- /dev/null +++ b/public/docs/_examples/setup/ts/index.html @@ -0,0 +1,31 @@ + + + + + Hello Angular + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/docs/_examples/setup/ts/plnkr.json b/public/docs/_examples/setup/ts/plnkr.json new file mode 100644 index 0000000000..0cbf32e17b --- /dev/null +++ b/public/docs/_examples/setup/ts/plnkr.json @@ -0,0 +1,11 @@ +{ + "description": "QuickStart Setup", + "files": [ + "app/app.component.ts", + "app/app.module.ts", + "app/main.ts", + "index.html" + ], + "open": "app/app.component.ts", + "tags": ["quickstart setup"] +} diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index a439063f05..600b9f6b94 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -208,7 +208,7 @@ code-example(format=""). :marked The `template` property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. - Our template is a single line of HTML announcing "Hello Angular!". + Our template is a single line of HTML announcing "Hello Angular". Now we need something to tell Angular to load this component. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 71d3e2cded..79251b6ade 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -19,8 +19,8 @@ "icon": "query-builder", "title": "Quickstart", "subtitle": "TypeScript", - "description": "Get up and running with Angular", - "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." + "description": "Discover Angular", + "banner": "Discover Angular in a live-coding environment." }, "tutorial": { diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index 13d492b44e..90f33e179d 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -199,7 +199,7 @@ h3#component-decorator @Component decorator +makeExample('src/app/cli-quickstart.component.html', null, 'src/app/cli-quickstart.component.html')(format='.') :marked The `{{title}}` is an _interpolation_ binding that causes Angular to display the component's - `title` property. After out edit, Angular displays "Hello Angular!". + `title` property. After out edit, Angular displays "Hello Angular". We'll learn more about data binding as we read through the documentation. The **styleUrls** array specifies the location(s) of the component's private CSS style file(s). diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 78b159e40c..5134b294cd 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -2,7 +2,7 @@ "index": { "title": "Cookbook", "navTitle": "Overview", - "description": "A collection of recipes for common Angular application scenarios" + "intro": "A collection of recipes for common Angular application scenarios" }, "aot-compiler": { 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 ebca6c41ce..7105fa190b 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -137,7 +137,7 @@ table(width="100%") in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. - For more information see [Quick Start](../quickstart.html). + For more information see the [Setup](../guide/setup.html) page. tr(style=top) td :marked diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index e59218f4fc..8bfcb52143 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -91,8 +91,7 @@ a#compile ## Compile with AoT ### Prepare for offline compilation - - Take the QuickStart as a starting point. + Take the Setup as a starting point. A few minor changes to the lone `app.component` lead to these two class and html files: +makeTabs( diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index b75ccaf207..cc862cae81 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -103,10 +103,6 @@ block includes :marked The Angular [scoped packages](#scoped-package) each have a barrel named `index`. - That's why we can write this: - - +makeExcerpt('quickstart/ts/app/app.component.ts', 'import', '') - .alert.is-important :marked Note that you can often achieve this using [Angular modules](#angular-module) instead. @@ -127,7 +123,8 @@ block includes .l-sub-section block bootstrap-defn-top :marked - You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping identifies an application's top level "root" [component](#component), which is the first component that is loaded for the application. For more information, see [QuickStart](!{docsLatest}/quickstart.html). + You launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). Bootstrapping 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 [Setup](!{docsLatest}/guide/setup.html). :marked You can bootstrap multiple apps in the same `index.html`, each with its own top level root. diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 87cd58f9e7..b17b4aff45 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -2,11 +2,29 @@ "index": { "title": "Documentation Overview", "navTitle": "Overview", - "description": "How to read and use this documentation", + "intro": "How to read and use this documentation", "nextable": true, "basics": true }, + "setup": { + "title": "Setup for local development", + "navTitle": "Setup", + "intro": "Install the Angular QuickStart seed for faster, more efficient development on your machine", + "nextable": true, + "hideNextPage": true, + "basics": true + }, + + "learning-angular": { + "title": "Learning Angular", + "navTitle": "Learning Angular", + "intro": "A suggested path through the documentation for Angular newcomers", + "nextable": true, + "hideNextPage": true, + "basics": true + }, + "architecture": { "title": "Architecture Overview", "navTitle": "Architecture", @@ -15,6 +33,15 @@ "basics": true }, + + "appmodule": { + "title": "AppModule: the root module", + "navTitle": "The Root Module", + "intro": "Tell Angular how to construct and bootstrap the app in the root \"AppModule\".", + "nextable": true, + "basics": true + }, + "displaying-data": { "title": "Displaying Data", "intro": "Property binding helps show app data in the UI.", @@ -136,6 +163,11 @@ "intro": "Developing for content security in Angular applications" }, + "setup-systemjs-anatomy": { + "title": "Setup Anatomy", + "intro": "Inside the local development environment for SystemJS" + }, + "structural-directives": { "title": "Structural Directives", "intro": "Angular has a powerful template engine that lets us easily manipulate the DOM structure of our elements." diff --git a/public/docs/ts/latest/guide/appmodule.jade b/public/docs/ts/latest/guide/appmodule.jade new file mode 100644 index 0000000000..5e5eee9834 --- /dev/null +++ b/public/docs/ts/latest/guide/appmodule.jade @@ -0,0 +1,138 @@ +include ../_util-fns + +:marked + An Angular module class describes how the application parts fit together. + Every application has at least one Angular module, the _root_ module + that you [bootstrap](#main) to launch the application. + You can call it anything you want. The conventional name is `AppModule`. + + The [setup](setup.html) instructions produce a new project with the following minimal `AppModule`. + You'll evolve this module as your application grows. + ++makeExample('setup/ts/app/app.module.ts','', 'app/app.module.ts')(format='.') + +:marked + After the `import` statements, you come to a class adorned with the + **`@NgModule`** [_decorator_](glossary.html#decorator '"Decorator" explained'). + + The `@NgModule` decorator identifies `AppModule` as an Angular module class (also called an `NgModule` class). + `@NgModule` takes a _metadata_ object that tells Angular how to compile and launch the application. + + * **_imports_** — the `BrowserModule` that this and every application needs to run in a browser. + * **_declarations_** — the application's lone component, which is also ... + * **_bootstrap_** — the _root_ component that Angular creates and inserts into the `index.html` host web page. + + The [Angular Modules (NgModules)](ngmodule.html) guide dives deeply into the details of Angular modules. + All you need to know at the moment is a few basics about these three properties. + +a#imports +:marked + ### The _imports_ array + + Angular modules are a way to consolidate features that belong together into discrete units. + Many features of Angular itself are organized as Angular modules. + HTTP services are in the `HttpModule`. The router is in the `RouterModule`. + Eventually you may create a feature module. + + Add a module to the `imports` array when the application requires its features. + + _This_ application, like most applications, executes in a browser. + Every application that executes in a browser needs the `BrowserModule` from `@angular/platform-browser`. + So every such application includes the `BrowserModule` in its _root_ `AppModule`'s `imports` array. + Other guide and cookbook pages will tell you when you need to add additional modules to this array. + +.alert.is-important + :marked + **Only `NgModule` classes** go in the `imports` array. Don't put any other kind of class in `imports`. + +.l-sub-section + :marked + Don't confuse the `import` statements at the top of the file with the Angular module's `imports` array. + They have different jobs. + + The _JavaScript_ `import` statements give you access to symbols _exported_ by other files + so you can reference them within _this_ file. + They have nothing to do with Angular and Angular knows nothing about them. + + The _module's_ `imports` array tells Angular about specific Angular modules — classes decorated with `@NgModule` — + that the application needs to function properly. +a#declarations +:marked + ### The _declarations_ array + + You must declare _every_ component in one (and _only one_) `NgModule` class. + You tell Angular which components belong to the `AppModule` by listing it in the module's `declarations` array. + As you create more components, you'll add them to `declarations`. + + You'll learn to create two other kinds of classes — + [directives](attribute-directives.html) and [pipes](pipes.html) — + that you must also add to the `declarations` array. + +.alert.is-important + :marked + **Only _declarables_** — _components_, _directives_ and _pipes_ — belong in the `declarations` array.   + Don't put any other kind of class in `declarations`; _not_ `NgModule` classes, _not_ service classes, _not_ model classes. + +a#bootstrap-array +:marked + ### The _bootstrap_ array + + You launch the application by [_bootstrapping_](#main) the root `AppModule`. + Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array + and inserts each one into the browser DOM. + + Each bootstrapped component is the base of its own tree of components. + Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree. + + While you can put more than one component tree on a host web page, that's not typical. + Most applications have only one component tree and they bootstrap a single _root_ component. + + You can call the one _root_ component anything you want but most developers call it `AppComponent`. + + Which brings us to the _bootstrapping_ process itself. + +a#main +l-main-section +:marked + ## Bootstrap in _main.ts_ + + There are many ways to bootstrap an application. + The variations depend upon how you want to compile the application and where you want to run it. + + In the beginning, you will compile the application dynamically with the _Just-in-Time (JiT)_ compiler + and you'll run it in a browser. You can learn about other options later. + + The recommended place to bootstrap a JiT-compiled browser application is in a separate file + in the `app` folder named `app/main.ts` ++makeExample('setup/ts/app/main.ts','','app/main.ts')(format='.') +:marked + This code creates a browser platform for dynamic (JiT) compilation and + bootstrap's the `AppModule` described above. + + The _bootstrapping_ process sets up the execution environment, + digs the _root_ `AppComponent` out of the module's `bootstrap` array,   + creates an instance of the component and inserts it within the element tag identified by the component's `selector`. + + The `AppComponent` selector — here and in most documentation samples — is `my-app` + so Angular looks for a `` tag in the `index.html` like this one ... ++makeExample('setup/ts/index.html','my-app')(format='.') +:marked + ... and displays the `AppComponent` there. + + This file is very stable. Once you've set it up, you may never change it again. + +a#quickstart-appmodule +l-main-section +:marked + ## QuickStart's _AppModule_ + Every Angular application must have a root `NgModule`, even the [QuickStart](../quickstart.html). + You didn't see it but it was there. + + A script in the `index.html` generated a hidden `AppModule` and bootstrapped it for you + so you could focus on the `AppComponent` and discover the _essential Angular_ more quickly. + + If you're feeling adventurous, add your own `AppModule` and `main.ts` to the + live code in the _QuickStart_ plunker. + + Remove the following `' + to: '' }, // Clear script like this: //