From b1c2c27d365186d4231a470945a0975482df58e9 Mon Sep 17 00:00:00 2001 From: Adrian Irwin Date: Thu, 3 Nov 2016 16:57:56 -0700 Subject: [PATCH 001/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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/141] 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: // - - - + + + + - - - - Loading... + + Loading AppComponent content here ... + - + diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 3236914309..25a2c5ec9a 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -7,12 +7,7 @@ "tsc": "tsc", "tsc:w": "tsc -w" }, - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/angular/angular.io/blob/master/LICENSE" - } - ], + "license": "MIT", "dependencies": { "@angular/common": "~2.2.0", "@angular/compiler": "~2.2.0", 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/quickstart/ts/tsconfig.1.json b/public/docs/_examples/quickstart/ts/tsconfig.1.json index e6a6eac11d..fdb405465d 100644 --- a/public/docs/_examples/quickstart/ts/tsconfig.1.json +++ b/public/docs/_examples/quickstart/ts/tsconfig.1.json @@ -6,7 +6,7 @@ "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "removeComments": false, + "lib": ["es2015", "dom"], "noImplicitAny": false } } 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/_examples/styleguide/package.1.json b/public/docs/_examples/styleguide/package.1.json index 2aafb8b80a..732f6bf8fd 100644 --- a/public/docs/_examples/styleguide/package.1.json +++ b/public/docs/_examples/styleguide/package.1.json @@ -7,12 +7,7 @@ "lite": "lite-server", "start": "concurrently \"npm run tsc:w\" \"npm run lite\" " }, - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/angular/angular.io/blob/master/LICENSE" - } - ], + "license": "MIT", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", 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 f48c102949..56779ce130 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/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart index df03c092f3..6a344362ca 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 @@ -37,15 +37,13 @@ class HeroDetailComponent implements OnInit { // #docregion ngOnInit Future ngOnInit() async { - var idString = _routeParams.get('id'); - var id = int.parse(idString ?? '', onError: (_) => null); + var _id = _routeParams.get('id'); + var id = int.parse(_id ?? '', onError: (_) => null); if (id != null) hero = await (_heroService.getHero(id)); } // #enddocregion ngOnInit // #docregion goBack - void goBack() { - _location.back(); - } + void goBack() => _location.back(); // #enddocregion goBack } diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart index ac71e10e17..952736be7c 100644 --- a/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart +++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.dart @@ -13,7 +13,7 @@ import 'hero_search_component.dart'; selector: 'my-dashboard', templateUrl: 'dashboard_component.html', styleUrls: const ['dashboard_component.css'], - directives: const [HeroSearchComponent]) + directives: const [HeroSearchComponent, ROUTER_DIRECTIVES]) // #enddocregion search class DashboardComponent implements OnInit { List heroes; diff --git a/public/docs/_examples/toh-6/dart/lib/dashboard_component.html b/public/docs/_examples/toh-6/dart/lib/dashboard_component.html index db8546ccd2..12ca29d8d1 100644 --- a/public/docs/_examples/toh-6/dart/lib/dashboard_component.html +++ b/public/docs/_examples/toh-6/dart/lib/dashboard_component.html @@ -1,7 +1,7 @@

Top Heroes

- +

{{hero.name}}

diff --git a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart index 5e7a1b6168..d200d831ee 100644 --- a/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart +++ b/public/docs/_examples/toh-6/dart/lib/hero_detail_component.dart @@ -1,10 +1,10 @@ // #docplaster // #docregion , v2 import 'dart:async'; -import 'dart:html'; import 'package:angular2/core.dart'; import 'package:angular2/router.dart'; +import 'package:angular2/platform/common.dart'; import 'hero.dart'; import 'hero_service.dart'; @@ -18,12 +18,13 @@ class HeroDetailComponent implements OnInit { Hero hero; final HeroService _heroService; final RouteParams _routeParams; + final Location _location; - HeroDetailComponent(this._heroService, this._routeParams); + HeroDetailComponent(this._heroService, this._routeParams, this._location); Future ngOnInit() async { - var idString = _routeParams.get('id'); - var id = int.parse(idString, onError: (_) => null); + var _id = _routeParams.get('id'); + var id = int.parse(_id ?? '', onError: (_) => null); if (id != null) hero = await (_heroService.getHero(id)); } @@ -34,7 +35,5 @@ class HeroDetailComponent implements OnInit { } // #enddocregion save - void goBack() { - window.history.back(); - } + void goBack() => _location.back(); } diff --git a/public/docs/_examples/toh-6/ts/tsconfig-aot.json b/public/docs/_examples/toh-6/ts/tsconfig-aot.json index 97d6f592a0..e8bf8c3aee 100644 --- a/public/docs/_examples/toh-6/ts/tsconfig-aot.json +++ b/public/docs/_examples/toh-6/ts/tsconfig-aot.json @@ -6,7 +6,7 @@ "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "removeComments": false, + "lib": ["es2015", "dom"], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json index ba08b1131d..41a6efb13d 100644 --- a/public/docs/_examples/tsconfig.json +++ b/public/docs/_examples/tsconfig.json @@ -8,7 +8,7 @@ "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, - "removeComments": false, + "lib": ["es2015", "dom"], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json index 9c7e5dd2d0..54f73776dd 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json @@ -4,12 +4,7 @@ "version": "0.0.0", "description": "A tutorial application for AngularJS", "repository": "https://github.com/angular/angular-phonecat", - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/angular/angular.io/blob/master/LICENSE" - } - ], + "license": "MIT", "devDependencies": { "bower": "^1.7.7", "http-server": "^0.9.0", diff --git a/public/docs/_examples/user-input/ts/app/keyup.components.ts b/public/docs/_examples/user-input/ts/app/keyup.components.ts index 79736c8a4c..aaf62bebaf 100644 --- a/public/docs/_examples/user-input/ts/app/keyup.components.ts +++ b/public/docs/_examples/user-input/ts/app/keyup.components.ts @@ -20,15 +20,14 @@ export class KeyUpComponent_v1 { // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type /* // #docregion key-up-component-1-class-no-type - // without strong typing - onKey(event:any) { + onKey(event:any) { // without type info this.values += event.target.value + ' | '; } // #enddocregion key-up-component-1-class-no-type */ // #docregion key-up-component-1-class - // with strong typing - onKey(event: KeyboardEvent) { + + onKey(event: KeyboardEvent) { // with type info this.values += (event.target).value + ' | '; } // #docregion key-up-component-1-class-no-type @@ -53,23 +52,22 @@ export class KeyUpComponent_v2 { } // #enddocregion key-up-component-2 - ////////////////////////////////////////// // #docregion key-up-component-3 @Component({ selector: 'key-up3', template: ` - -

{{values}}

+ +

{{value}}

` }) export class KeyUpComponent_v3 { - values = ''; + value = ''; + onEnter(value: string) { this.value = value; } } // #enddocregion key-up-component-3 - ////////////////////////////////////////// // #docregion key-up-component-4 @@ -77,13 +75,14 @@ export class KeyUpComponent_v3 { selector: 'key-up4', template: ` + (keyup.enter)="update(box.value)" + (blur)="update(box.value)"> -

{{values}}

+

{{value}}

` }) export class KeyUpComponent_v4 { - values = ''; + value = ''; + update(value: string) { this.value = value; } } // #enddocregion key-up-component-4 diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index 553ca9338a..8a19341afe 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -7,12 +7,7 @@ "test": "karma start", "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" }, - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/angular/angular.io/blob/master/LICENSE" - } - ], + "license": "MIT", "dependencies": { "@angular/common": "~2.2.0", "@angular/compiler": "~2.2.0", @@ -27,7 +22,6 @@ "zone.js": "^0.6.25" }, "devDependencies": { - "@types/core-js": "^0.9.34", "@types/node": "^6.0.45", "@types/jasmine": "^2.5.35", "angular2-template-loader": "^0.4.0", diff --git a/public/docs/dart/latest/_data.json b/public/docs/dart/latest/_data.json index 31180217a5..8eb566a5ef 100644 --- a/public/docs/dart/latest/_data.json +++ b/public/docs/dart/latest/_data.json @@ -7,12 +7,19 @@ "banner": "AngularDart is 2.0. View the
change log to see enhancements, fixes, and breaking changes." }, + "cli-quickstart": { + "icon": "query-builder", + "title": "CLI Quickstart", + "subtitle": "TypeScript", + "description": "Use the CLI tool to quickly build Angular applications", + "hide": true + }, + "quickstart": { "icon": "query-builder", "title": "Quickstart", "subtitle": "Dart", - "description": "Get up and running with Angular", - "banner": "This QuickStart guide demonstrates how to build and run a simple Angular application." + "banner": "A quick look at Angular basics" }, "tutorial": { diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade index 86925a3fa4..49d1115ba7 100644 --- a/public/docs/dart/latest/_util-fns.jade +++ b/public/docs/dart/latest/_util-fns.jade @@ -22,7 +22,10 @@ include ../../../_includes/_util-fns - var _ngRepoURL = 'https://github.com/dart-lang/angular2'; //- Don't override this value quite yet: //- var _ngDocRepoURL = 'https://github.com/dart-lang/site-webdev'; -- var _qsRepo = 'https://github.com/angular-examples/quickstart/archive/master.zip' +- var _qsRepo = 'https://github.com/angular-examples/quickstart' +- var _qsRepoZip = _qsRepo + '/archive/master.zip'; + +- var _npm = 'pub'; //- NgModule related - var _AppModuleVsAppComp = 'AppComponent' diff --git a/public/docs/dart/latest/glossary.jade b/public/docs/dart/latest/glossary.jade index 6d0e7cb136..79e48a1447 100644 --- a/public/docs/dart/latest/glossary.jade +++ b/public/docs/dart/latest/glossary.jade @@ -19,11 +19,13 @@ block annotation-defn block bootstrap-defn-top :marked - We launch an Angular application by "bootstrapping" it with the - [bootstrap][bootstrap] method. The `bootstrap` method identifies an - application's top level "root" [Component](#component) and optionally + You launch an Angular application by "bootstrapping" it with the + [bootstrap][bootstrap] method. Bootstraping identifies an + application's top level "root" [component](#component), which is + the first component that is loaded for the application, and optionally registers service [providers](#provider) with the [dependency injection system](#dependency-injection). + For more information, see the [Setup](!{docsLatest}/guide/setup.html) page. [bootstrap]: !{docsLatest}/api/angular2.platform.browser/bootstrap.html @@ -42,17 +44,6 @@ block module-defn the chapter on "Libraries and Scripts" in the [Dart Language Specification](https://www.dartlang.org/docs/spec/). -block routing-component-defn - :marked - A [Component](#component) with an attached router. - - In most cases, the component became attached to a [router](#router) by means - of a `@RouterConfig` #{decorator} that defined routes to views controlled by this component. - - The component's template has a `RouterOutlet` element where it can display views produced by the router. - - It likely has anchor tags or buttons with `RouterLink` directives that users can click to navigate. - block append snake-case-defn :marked Library and file names are often spelled in snake_case. Examples include: @@ -63,6 +54,6 @@ block zone-defn Zones are a mechanism for encapsulating and intercepting a Dart application's asynchronous activity. - To learn more, consult the [zones article][zones]. + Learn more about zones in this [article][zones]. [zones]: https://www.dartlang.org/articles/libraries/zones diff --git a/public/docs/dart/latest/guide/_data.json b/public/docs/dart/latest/guide/_data.json index c7e0240089..23f05e1019 100644 --- a/public/docs/dart/latest/guide/_data.json +++ b/public/docs/dart/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", @@ -17,7 +35,7 @@ "displaying-data": { "title": "Displaying Data", - "intro": "Interpolation and other forms of property binding help us show app data in the UI.", + "intro": "Property binding helps show app data in the UI.", "nextable": true, "basics": true }, @@ -63,16 +81,29 @@ "basics": true }, + "glossary": { + "title": "Glossary", + "intro": "Brief definitions of the most important words in the Angular vocabulary", + "basics": true + }, + + "change-log": { + "hide": true, + "title": "Change Log", + "intro": "An annotated history of recent documentation improvements.", + "basics": true + }, + "ngmodule": { + "hide": true, "title": "Angular Modules (NgModule)", - "intro": "Define application modules with @NgModule", - "hide": true + "intro": "Define application modules with @NgModule" }, "animations": { + "hide": true, "title": "Animations", - "intro": "A guide to Angular's animation system.", - "hide": true + "intro": "A guide to Angular's animation system." }, "attribute-directives": { @@ -90,12 +121,6 @@ "intro": "Learn how to apply CSS styles to components." }, - "glossary": { - "title": "Glossary", - "intro": "Angular中最重要的词汇的简要定义", - "basics": true - }, - "hierarchical-dependency-injection": { "title": "Hierarchical Dependency Injectors", "navTitle": "Hierarchical Injectors", @@ -104,7 +129,7 @@ "server-communication": { "title": "HTTP Client", - "intro": "Talk to a remote server with an HTTP Client." + "intro": "Use an HTTP Client to talk to a remote server." }, "lifecycle-hooks": { @@ -113,9 +138,9 @@ }, "npm-packages": { + "hide": true, "title": "Npm Packages", - "intro": "Details of the recommended npm packages and the different kinds of package dependencies", - "hide": true + "intro": "Recommended npm packages, and how to specify package dependencies" }, "pipes": { @@ -125,7 +150,7 @@ "router": { "title": "Routing & Navigation", - "intro": "Discover the basics of screen navigation with the Angular Component Router." + "intro": "Discover the basics of screen navigation with the Angular Router." }, "security": { @@ -133,32 +158,38 @@ "intro": "Developing for content security in Angular applications" }, + "setup-systemjs-anatomy": { + "hide": true, + "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." }, "testing": { + "hide": true, "title": "Testing", - "intro": "Techniques and practices for testing an Angular app", - "hide": true + "intro": "Techniques and practices for testing an Angular app" }, "typescript-configuration": { + "hide": true, "title": "TypeScript Configuration", - "intro": "TypeScript configuration for Angular developers", - "hide": true + "intro": "TypeScript configuration for Angular developers" }, "upgrade": { + "hide": true, "title": "Upgrading from 1.x", - "intro": "Angular 1 applications can be incrementally upgraded to Angular 2.", - "hide": true + "intro": "Incrementally upgrade an Angular 1 application to Angular 2." }, "webpack": { + "hide": true, "title": "Webpack: an introduction", - "intro": "Create your Angular applications with a Webpack based tooling", - "hide": true + "intro": "Create Angular applications with a Webpack based tooling" } } diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade index fb6313e574..12e8f76c4d 100644 --- a/public/docs/dart/latest/guide/dependency-injection.jade +++ b/public/docs/dart/latest/guide/dependency-injection.jade @@ -10,6 +10,34 @@ block ctor-syntax We also leveraged Dart's constructor syntax for declaring parameters and initializing properties simultaneously. +block register-provider-ngmodule + :marked + Before we do, let's see an example of provider registration during bootstrapping: + + +makeExcerpt('app/main.1.ts (discouraged)', 'bootstrap-discouraged', '') + + :marked + The injector now knows about our `HeroService`. + An instance of our `HeroService` will be available for injection across our entire application. + + Of course we can't help wondering about that comment telling us not to do it this way. + It *will* work. It's just not a best practice. + The bootstrap provider option is intended for configuring and overriding Angular's own + preregistered services, such as its routing support. + + The preferred approach is to register application providers in application components. + Because the `HeroService` is used within the *Heroes* feature area — + and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`. + +block ngmodule-vs-component + :marked + Look at the `providers` part of the `@Component` annotation. + An instance of the `HeroService` is now available for injection in this `HeroesComponent` + and all of its child components. + + The `HeroesComponent` itself doesn't happen to need the `HeroService`. + But its child `HeroListComponent` does, so we head there next. + block injectable-not-always-needed-in-ts //- The [Angular Dart Transformer](https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer) //- generates static code to replace the use of dart:mirrors. It requires that types be diff --git a/public/docs/dart/latest/guide/index.jade b/public/docs/dart/latest/guide/index.jade index 7173f74d79..2b5aff7742 100644 --- a/public/docs/dart/latest/guide/index.jade +++ b/public/docs/dart/latest/guide/index.jade @@ -2,3 +2,4 @@ extends ../../../ts/_cache/guide/index.jade block includes include ../_util-fns + - var _angular_io = 'website'; diff --git a/public/docs/dart/latest/guide/learning-angular.jade b/public/docs/dart/latest/guide/learning-angular.jade new file mode 100644 index 0000000000..4a5788269f --- /dev/null +++ b/public/docs/dart/latest/guide/learning-angular.jade @@ -0,0 +1,4 @@ +extends ../../../ts/_cache/guide/learning-angular.jade + +block includes + include ../_util-fns diff --git a/public/docs/dart/latest/guide/setup.jade b/public/docs/dart/latest/guide/setup.jade new file mode 100644 index 0000000000..95da8838da --- /dev/null +++ b/public/docs/dart/latest/guide/setup.jade @@ -0,0 +1,58 @@ +extends ../../../ts/_cache/guide/setup.jade + +block includes + include ../_util-fns + - var _prereq = 'the Dart SDK'; + - var _playground = 'repository'; + - var _Install = 'Get'; + //- npm/pub commands + - var _install = 'get'; + - var _start = 'serve'; + +block qs-seed + :marked + The QuickStart project can + conveniently be used to seed new projects. It contains the following core files: + +block core-files + +makeTabs(` + quickstart/ts/app/app.component.ts, + quickstart/ts/app/main.ts, + quickstart/ts/index.html, + quickstart/dart/pubspec.yaml, + quickstart/ts/styles.css`, + ',,,,quickstart', + `app/app.component.ts, + app/main.ts, + index.html, + pubspec.yaml, + styles.css (excerpt)`) + + :marked + These files are organized as follows: + + .filetree + .file angular_quickstart + .children + .file lib + .children + .file app_component.dart + .file pubspec.yaml + .file web + .children + .file index.html + .file main.dart + .file styles.css + +block install-tooling + :marked + Install the **[Dart SDK](https://www.dartlang.org/downloads/)**, + if not already on your machine, and any tools you like to use with Dart. + The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager. + If you don't have a favorite Dart editor already, try + [WebStorm][WS], which comes with a Dart plugin. + You can also download [Dart plugins for other IDEs and editors][DT]. + + [WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart + [DT]: https://www.dartlang.org/tools/ + [pub]: https://www.dartlang.org/tools/pub/ diff --git a/public/docs/dart/latest/quickstart.jade b/public/docs/dart/latest/quickstart.jade index 838a02f45e..5e8d57687e 100644 --- a/public/docs/dart/latest/quickstart.jade +++ b/public/docs/dart/latest/quickstart.jade @@ -2,209 +2,4 @@ extends ../../ts/_cache/quickstart.jade block includes include _util-fns - - var _Install = 'Get' - - var _prereq = 'the Dart SDK' - - var _angular_browser_uri = 'angular2/platform/browser.dart' - - var _angular_core_uri = 'angular2/core.dart' - - var _stepInit = 3 - -block setup-tooling - :marked - Install the **[Dart SDK](https://www.dartlang.org/downloads/)**, - if not already on your machine, and any tools you like to use with Dart. - The Dart SDK includes tools such as **[pub][pub]**, the Dart package manager. - If you don't have a favorite Dart editor already, try - [WebStorm][WS], which comes with a Dart plugin. - You can also download [Dart plugins for other IDEs and editors][DT]. - - [WS]: https://confluence.jetbrains.com/display/WI/Getting+started+with+Dart - [DT]: https://www.dartlang.org/tools/ - [pub]: https://www.dartlang.org/tools/pub/ - -block package-and-config-files - :marked - In the project folder just created, create a file named - **[pubspec.yaml][pubspec]** with the code below. - This pubspec must specify the **angular2** and **browser** - packages as dependencies, as well as the `angular2` transformer. - It can also specify other packages and transformers for the app to use, - such as [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter). - - [pubspec]: https://www.dartlang.org/tools/pub/pubspec.html - - +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml') - -block install-packages - :marked - From the project folder, run `pub get` to install the angular2 and browser - packages (along with the packages they depend on). - - code-example(language="sh" class="code-shell"). - pub get - -block create-your-app - :marked - Let's create a folder to hold our application and add a super-simple Angular component. - -block annotation-fields - :marked - The call to the `@Component` constructor has two - named parameters, `selector` and `template`. - -block create-main - p. - Now we need something to tell Angular to load the root component. - Create: - ul - li a #[b folder named #[code web]] - li a file named #[code #[+adjExPath('app/main.ts')]] with the following content: - -block commentary-on-index-html - :marked - Note the `` tag in the ``, this is *where your app lives!* - -block run-app - p. - We have a few options for running our app. - One is to launch a local HTTP server - and then view the app in - Dartium. - We can use any web server, such as WebStorm's server - or Python's SimpleHTTPServer. - p. - Another option is to build and serve the app using pub serve, - and then run it by visiting http://localhost:8080 in any modern browser. - Pub serve generates JavaScript on the fly, - which can take a while when first visiting the page. - Pub serve also runs in watch mode, and will recompile and subsequently serve - any changed assets. - p. - Once the app is running, the browser window should show the following: - -block build-app - //- Remove details of building from QS for now. (It is too early for these details.) - if false - .alert.is-important - :marked - If you don't see **Hello Angular!**, make sure you've entered all the code correctly, - in the [proper folders](#wrap-up), - and run `pub get`. - - .l-verbose-section#section-angular-run-app - :marked - ### Building the app (generating JavaScript) - - Before deploying the app, we need to generate JavaScript files. - The `pub build` command makes that easy. - - code-example(language="sh" class="code-shell"). - > pub build - Loading source assets... - - :marked - The generated JavaScript appears, along with supporting files, - under a directory named `build`. - - #angular_transformer - h4 Using the Angular transformer - - p. - When generating JavaScript for an Angular app, - be sure to use the Angular transformer. - It analyzes the Dart code, - converting reflection-using code to static code - that Dart's build tools can compile to faster, smaller JavaScript. - The highlighted lines in pubspec.yaml - configure the Angular transformer: - - - var stylePattern = { otl: /(transformers:)|(- angular2:)|(entry_points.*$)/gm }; - +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern) - - p. - The entry_points item - identifies the Dart file in our app - that has a main() function. - For more information, see the - Angular - transformer wiki page. - - .l-sub-section#performance - h3 Performance, the transformer, and Angular libraries - p. - When an app imports bootstrap.dart, - it also gets dart:mirrors, - a reflection library that - causes performance problems when compiled to JavaScript. - Don't worry, - the Angular transformer converts the app's entry points - (entry_points in pubspec.yaml) - so that they don't use mirrors. - - #dart_to_js_script_rewriter - h4 Using dart_to_js_script_rewriter - - :marked - To improve the app's performance, convert the - HTML file to directly include the generated JavaScript; - one way to do that is with `dart_to_js_script_rewriter`. - To use the rewriter, specify `dart_to_js_script_rewriter` in both - the `dependencies` and `transformers` sections of the pubspec. - - - var stylePattern = { otl: /(dart_to_js_script_rewriter.*$)|(- dart_to_js_script_rewriter.*$)|(dependencies:)|(transformers:)/gm }; - +makeExample('quickstart/dart/pubspec.yaml', null, 'pubspec.yaml', stylePattern) - - .alert.is-important - :marked - The `dart_to_js_script_rewriter` transformer must be - **after** the `angular2` transformer in `pubspec.yaml`. - - :marked - For more information, see the docs for - [dart_to_js_script_rewriter](https://pub.dartlang.org/packages/dart_to_js_script_rewriter). - -block server-watching - :marked - To see the new version, just reload the page. - - .alert.is-important - :marked - Be sure to terminate your local server once you stop working on this app. - -block project-file-structure - .filetree - .file angular_quickstart - .children - .file lib - .children - .file app_component.dart - .file pubspec.yaml - .file web - .children - .file index.html - .file main.dart - .file styles.css - - .l-verbose-section - :marked - This figure doesn't show generated files and directories. - For example, a `pubspec.lock` file - specifies versions and other identifying information for - the packages that our app depends on. - The `pub build` command creates a `build` directory - containing the JavaScript version of our app. - Pub, IDEs, and other tools often create - other directories and dotfiles. - -block project-files - +makeTabs(` - quickstart/ts/app/app.component.ts, - quickstart/ts/app/main.ts, - quickstart/ts/index.html, - quickstart/dart/pubspec.yaml, - quickstart/ts/styles.css`, - ',,,,quickstart', - `app/app.component.ts, - app/main.ts, - index.html, - pubspec.yaml, - styles.css (excerpt)`) + - var _on_Plunkr = ''; diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade index 372a45d129..f9425e846d 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5.jade @@ -42,7 +42,7 @@ block angular-router :marked The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`), and a - configuration annotation (`RouteConfig`). We'll get them all by importing + configuration annotation (`RouteConfig`). You get them all by importing the router library: +makeExcerpt('app/app.component.ts (router imports)', 'import-router') @@ -53,22 +53,22 @@ block angular-router Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional library module. - Like for any service, we make router services available to the application - by adding them to the `providers` list. Let's update the `directives` and + Like for any service, you make router services available to the application + by adding them to the `providers` list. Update the `directives` and `providers` lists to include the router assets: +makeExcerpt('app/app.component.ts (excerpt)', 'directives-and-providers') :marked - Notice that we also removed the `HeroesComponent` from the `directives` list. - `AppComponent` no longer shows heroes; that will be the router's job. - We'll soon remove `` from the template too. + `AppComponent` no longer shows heroes, that will be the router's job, + so you can remove the `HeroesComponent` from the `directives` list. + You'll soon remove `` from the template too. block router-config-intro :marked ### Configure routes and add the router - The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` + The `AppComponent` doesn't have a router yet. You'll use the `@RouteConfig` annotation to simultaneously: - Assign a router to the component @@ -77,12 +77,12 @@ block router-config-intro block routerLink :marked Notice the `[routerLink]` binding in the anchor tag. - We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list + You bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list that tells the router where to navigate when the user clicks the link. - We define a *routing instruction* with a *link parameters list*. + You define a *routing instruction* with a *link parameters list*. The list only has one element in our little sample, the quoted ***name* of the route** to follow. - Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. + Looking back at the route configuration, confirm that `'Heroes'` is the name of the route to the `HeroesComponent`. .l-sub-section :marked Learn about the *link parameters list* @@ -90,8 +90,8 @@ block routerLink block redirect-vs-use-as-default :marked - We don't need a route definition for that. Instead, - we add `useAsDefault: true` to the dashboard *route definition* and the + You don't need a route definition for that. Instead, + add `useAsDefault: true` to the dashboard *route definition* and the router will display the dashboard when the browser URL doesn't match an existing route. block templateUrl-path-resolution @@ -105,7 +105,7 @@ block templateUrl-path-resolution block route-params :marked - We will no longer receive the hero in a parent component property binding. + You will no longer receive the hero in a parent component property binding. The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service and use the `HeroService` to fetch the hero with that `id`. @@ -116,12 +116,12 @@ block ngOnInit block extract-id :marked - Notice how we extract the `id` by calling the `RouteParams.get` method. + Notice how you can extract the `id` by calling the `RouteParams.get` method. block heroes-component-cleanup :marked Because the template for `HeroesComponent` no longer uses `HeroDetailComponent` - directly — instead using the router to _navigate_ to it — we can + directly — instead using the router to _navigate_ to it — you can drop the `directives` argument from `@Component` and remove the unused hero detail import. The revised `@Component` looks like this: @@ -138,7 +138,7 @@ block router-link-active **The *router-link-active* class** The Angular Router adds the `router-link-active` class to the HTML navigation element - whose route matches the active route. All we have to do is define the style for it. Sweet! + whose route matches the active route. All you have to do is define the style for it. Sweet! block file-tree-end .filetree diff --git a/public/docs/index.jade b/public/docs/index.jade index ee71bf83fa..e0b4e62697 100644 --- a/public/docs/index.jade +++ b/public/docs/index.jade @@ -10,4 +10,4 @@ h3 Dart - p: Angular Dart - 最新版本 \ No newline at end of file + p: Angular Dart - 最新版本 \ No newline at end of file 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/_cache/glossary.jade b/public/docs/ts/_cache/glossary.jade index a9d1003708..8b4b6dae4f 100644 --- a/public/docs/ts/_cache/glossary.jade +++ b/public/docs/ts/_cache/glossary.jade @@ -13,7 +13,7 @@ block includes Most Angular terms are everyday English words with a specific meaning within the Angular system. - We have gathered here the most prominent terms + This glossary lists the most prominent terms and a few less familiar ones that have unusual or unexpected definitions. @@ -23,30 +23,28 @@ block includes .l-main-section#A +a#aot +:marked + ## Ahead-of-Time (AoT) compilation +.l-sub-section + :marked + You can compile Angular applications at build-time. + By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly + to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle. + Ahead-of-time compiled applications also benefit from decreased load time and increased performance. + +ifDocsFor('ts') - a#aot :marked - ## Ahead-of-Time (AoT) Compilation + ## Angular module .l-sub-section :marked - Angular applications can be compiled by developers at build-time. - By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly - to a Module Factory, meaning you don't need to include the Angular compiler in your javascript bundle. - Ahead-of-time compiled applications also benefit from decreased load time and increased - performance. + Helps you organize an application into cohesive blocks of functionality. + An Angular module identifies the components, directives, and pipes that the application uses along with the list of external Angular modules that the application needs, such as `FormsModule`. - :marked - ## Angular Module - .l-sub-section - :marked - Helps us organize an application into cohesive blocks of functionality. - An Angular module identifies the components, directives, and pipes that are used by the application - along with the list of external Angular modules that the application needs, such as `FormsModule`. + Every Angular application has an application root module class. By convention, the class is + called `AppModule` and resides in a file named `app.module.ts`. - Every Angular application has an application root module class. By convention the class is - called `AppModule` and resides in a file named `app.component.ts`. - - See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples. + For details and examples, see the [Angular Module](!{docsLatest}/guide/ngmodule.html) page. +ifDocsFor('ts|dart') :marked @@ -57,15 +55,14 @@ block includes In practice, a synonym for [Decoration](#decorator). :marked - ## Attribute Directive + ## Attribute directive .l-sub-section :marked - A category of [Directive](#directive) that can listen to and modify the behavior of + A category of [directive](#directive) that can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name. - The `ngClass` directive for adding and removing CSS class names is a good example of - an Attribute Directive. + A good example of an attribute directive is the `ngClass` directive for adding and removing CSS class names. .l-main-section#B @@ -74,7 +71,7 @@ block includes ## Barrel .l-sub-section :marked - A barrel is a way to *rollup exports* from several ES2015 modules into a single convenience ES2015 module. + A barrel is a way to *rollup exports* from several ES2015 modules into a single convenient ES2015 module. The barrel itself is an ES2015 module file that re-exports *selected* exports of other ES2015 modules. Imagine three ES2015 modules in a `heroes` folder: @@ -94,7 +91,7 @@ block includes import { Hero } from '../heroes/hero.model.ts'; import { HeroService } from '../heroes/hero.service.ts'; :marked - We can add a barrel to the `heroes` folder (called `index` by convention) that exports all of these items: + You can add a barrel to the `heroes` folder (called `index`, by convention) that exports all of these items: code-example. export * from './hero.model.ts'; // re-export all of its exports export * from './hero.service.ts'; // re-export all of its exports @@ -106,13 +103,9 @@ 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 same goal using [Angular modules](#angular-module) instead. + Note that you can often achieve this using [Angular modules](#angular-module) instead. :marked ## Binding @@ -121,8 +114,8 @@ block includes Almost always refers to [Data Binding](#data-binding) and the act of binding an HTML object property to a data object property. - May refer to a [Dependency Injection](#dependency-injection) binding - between a "token" or "key" and a dependency [provider](#provider). + May refer to a [dependency injection](#dependency-injection) binding + between a "token", also referred to as a "key", and a dependency [provider](#provider). This more rare usage should be clear in context. :marked @@ -130,11 +123,10 @@ block includes .l-sub-section block bootstrap-defn-top :marked - We launch an Angular application by "bootstrapping" it using the application root Angular module (`AppModule`). - The bootstraping identifies an application's top level "root" [Component](#component), which is the first - component that is loaded for the application. For more information see the [QuickStart](!{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) page. :marked - One can bootstrap multiple apps in the same `index.html`, each with its own top level root. + You can bootstrap multiple apps in the same `index.html`, each with its own top level root. .l-main-section#C :marked @@ -142,31 +134,29 @@ block includes .l-sub-section :marked The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter - _except the first letter which is a lowercase letter_. + _except the first letter, which is lowercase_. - Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`. + Function, property, and method names are typically spelled in camelCase. Examples include: `square`, `firstName` and `getHeroes`. Notice that `square` is an example of how you write a single word in camelCase. - This form is also known as **lower camel case**, to distinguish it from **upper camel case** which we call [PascalCase](#pascalcase). - When we write "camelCase" in this documentation we always mean *lower camel case*. + This form is also known as **lower camel case**, to distinguish it from **upper camel case**, which is [PascalCase](#pascalcase). + When you see "camelCase" in this documentation it always means *lower camel case*. :marked ## Component .l-sub-section :marked - An Angular class responsible for exposing data - to a [View](#view) and handling most of the view’s display - and user-interaction logic. + An Angular class responsible for exposing data to a [view](#view) and handling most of the view’s display and user-interaction logic. - The Component is one of the most important building blocks in the Angular system. - It is, in fact, an Angular [Directive](#directive) with a companion [Template](#template). + The *component* is one of the most important building blocks in the Angular system. + It is, in fact, an Angular [directive](#directive) with a companion [template](#template). - The developer applies the `!{_at}Component` !{_decoratorLink} to + You apply the `!{_at}Component` !{_decoratorLink} to the component class, thereby attaching to the class the essential component metadata that Angular needs to create a component instance and render it with its template as a view. Those familiar with "MVC" and "MVVM" patterns will recognize - the Component in the role of "Controller" or "View Model". + the component in the role of "controller" or "view model". .l-main-section#D :marked @@ -181,56 +171,48 @@ block includes spelled in dash-case. :marked - ## Data Binding + ## Data binding .l-sub-section :marked Applications display data values to a user and respond to user actions (clicks, touches, keystrokes). - We could push application data values into HTML, attach - event listeners, pull changed values from the screen, and - update application data values ... all by hand. - - Or we could declare the relationship between an HTML widget - and an application data source ... and let a data binding + Instead of manually pushing application data values into HTML, attaching + event listeners, pulling changed values from the screen, and + updating application data values, you can use data binding by declaring the relationship between an HTML widget and data source and let the framework handle the details. - Data Binding is that second approach. Angular has a rich - data binding framework with a variety of data binding + Angular has a rich data binding framework with a variety of data binding operations and supporting declaration syntax. - The many forms of binding include: - * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation) - * [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding) - * [Event Binding](!{docsLatest}/guide/template-syntax.html#event-binding) - * [Attribute Binding](!{docsLatest}/guide/template-syntax.html#attribute-binding) - * [Class Binding](!{docsLatest}/guide/template-syntax.html#class-binding) - * [Style Binding](!{docsLatest}/guide/template-syntax.html#style-binding) - * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ng-model) + Read about the forms of binding in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) page: + * [Interpolation](!{docsLatest}/guide/template-syntax.html#interpolation). + * [Property binding](!{docsLatest}/guide/template-syntax.html#property-binding). + * [Event binding](!{docsLatest}/guide/template-syntax.html#event-binding). + * [Attribute binding](!{docsLatest}/guide/template-syntax.html#attribute-binding). + * [Class binding](!{docsLatest}/guide/template-syntax.html#class-binding). + * [Style binding](!{docsLatest}/guide/template-syntax.html#style-binding). + * [Two-way data binding with ngModel](!{docsLatest}/guide/template-syntax.html#ngModel). - Learn more about data binding in the - [Template Syntax](!{docsLatest}/guide/template-syntax.html#data-binding) chapter. +ifDocsFor('ts|dart') a#decorator a#decoration :marked - ## Decorator | Decoration + ## Decorator | decoration .l-sub-section block decorator-defn :marked - A Decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments. + A decorator is a **function** that adds metadata to a class, its members (properties, methods) and function arguments. Decorators are a JavaScript language [feature](https://github.com/wycats/javascript-decorators), implemented in TypeScript and proposed for ES2016 (AKA ES7). - We apply a decorator by positioning it - immediately above or to the left of the thing it decorates. + To apply a decorator, position it immediately above or to the left of the thing it decorates. - Angular has its own set of decorators to help it interoperate with our application parts. + Angular has its own set of decorators to help it interoperate with your application parts. Here is an example of a `@Component` decorator that identifies a - class as an Angular [Component](#component) and an `@Input` decorator applied to a property - of that component. - The elided object argument to the `@Component` decorator would contain the pertinent component metadata. + class as an Angular [component](#component) and an `@Input` decorator applied to the `name` property + of that component. The elided object argument to the `@Component` decorator would contain the pertinent component metadata. ``` @Component({...}) export class AppComponent { @@ -244,77 +226,75 @@ block includes .alert.is-important :marked - Always include the parentheses `()` when applying a decorator. - A decorator is a **function** that must be called when applied. + Always include parentheses `()` when applying a decorator. :marked - ## Dependency Injection + ## Dependency injection .l-sub-section :marked - Dependency Injection is both a design pattern and a mechanism + Dependency injection is both a design pattern and a mechanism for creating and delivering parts of an application to other parts of an application that request them. Angular developers prefer to build applications by defining many simple parts - that each do one thing well and then wire them together at runtime. + that each do one thing well and then wiring them together at runtime. - These parts often rely on other parts. An Angular [Component](#component) - part might rely on a service part to get data or perform a calculation. When a - part "A" relies on another part "B", we say that "A" depends on "B" and + These parts often rely on other parts. An Angular [component](#component) + part might rely on a service part to get data or perform a calculation. When + part "A" relies on another part "B", you say that "A" depends on "B" and that "B" is a dependency of "A". - We can ask a "Dependency Injection System" to create "A" + You can ask a "dependency injection system" to create "A" for us and handle all the dependencies. If "A" needs "B" and "B" needs "C", the system resolves that chain of dependencies and returns a fully prepared instance of "A". Angular provides and relies upon its own sophisticated - [Dependency Injection](dependency-injection.html) system + [dependency injection](dependency-injection.html) system to assemble and run applications by "injecting" application parts into other application parts where and when needed. - At the core there is an [`Injector`](#injector) that returns dependency values on request. + At the core there is an [`injector`](#injector) that returns dependency values on request. The expression `injector.get(token)` returns the value associated with the given token. - A token is an Angular type (`OpaqueToken`). We rarely deal with tokens directly; most + A token is an Angular type (`OpaqueToken`). You rarely deal with tokens directly; most methods accept a class name (`Foo`) or a string ("foo") and Angular converts it - to a token. When we write `injector.get(Foo)`, the injector returns + to a token. When you write `injector.get(Foo)`, the injector returns the value associated with the token for the `Foo` class, typically an instance of `Foo` itself. - Angular makes similar requests internally during many of its operations - as when it creates a [`Component`](#component) for display. + During many of its operations, Angular makes similar requests internally, such as when it creates a [`component`](#component) for display. The `Injector` maintains an internal map of tokens to dependency values. If the `Injector` can't find a value for a given token, it creates a new value using a `Provider` for that token. - A [Provider](#provider) is a recipe for + A [provider](#provider) is a recipe for creating new instances of a dependency value associated with a particular token. An injector can only create a value for a given token if it has - a `Provider` for that token in its internal provider registry. + a `provider` for that token in its internal provider registry. Registering providers is a critical preparatory step. Angular registers some of its own providers with every injector. We can register our own providers. - Learn more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) chapter. + Read more in the [Dependency Injection](!{docsLatest}/guide/dependency-injection.html) page. :marked ## Directive .l-sub-section :marked - An Angular class responsible for creating, re-shaping, and interacting with HTML elements + An Angular class responsible for creating, reshaping, and interacting with HTML elements in the browser DOM. Directives are Angular's most fundamental feature. A Directive is almost always associated with an HTML element or attribute. We often refer to such an element or attribute as the directive itself. When Angular finds a directive in an HTML template, it creates the matching directive class instance - and gives that instance control over that portion of the browser DOM. + and gives the instance control over that portion of the browser DOM. - Developers can invent custom HTML markup (e.g., ``) to - associate with their custom directives. They add this custom markup to HTML templates - as if they were writing native HTML. In this way, directives become extensions of + You can invent custom HTML markup (for example, ``) to + associate with your custom directives. You add this custom markup to HTML templates + as if you were writing native HTML. In this way, directives become extensions of HTML itself. Directives fall into one of three categories: @@ -324,12 +304,12 @@ block includes They are the building blocks of an Angular application and the developer can expect to write a lot of them. - 1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of + 1. [Attribute directives](#attribute-directive) that can listen to and modify the behavior of other HTML elements, attributes, properties, and components. They are usually represented as HTML attributes, hence the name. - 1. [Structural Directives](#structural-directive), a directive responsible for - shaping or re-shaping HTML layout, typically by adding, removing, or manipulating + 1. [Structural directives](#structural-directive), a directive responsible for + shaping or reshaping HTML layout, typically by adding, removing, or manipulating elements and their children. .l-main-section#E @@ -342,9 +322,9 @@ block includes The latest approved version of JavaScript is [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/) - (AKA "ES2016" or "ES7") and many Angular developers will write their applications + (AKA "ES2016" or "ES7") and many Angular developers write their applications either in this version of the language or a dialect that strives to be - compatible with it such as [TypeScript](#typesScript). + compatible with it, such as [TypeScript](#typescript). Most modern browsers today only support the much older "ECMAScript 5" (AKA ES5) standard. Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)" @@ -356,17 +336,17 @@ block includes ## ES2015 .l-sub-section :marked - Short hand for "[ECMAScript 2015](#ecmascript=2015)". + Short hand for [ECMAScript](#ecmascript) 2015. :marked ## ES6 .l-sub-section :marked - Short hand for "[ECMAScript 2015](#ecmascript=2015)". + Short hand for [ECMAScript](#ecmascript) 2015. :marked ## ES5 .l-sub-section :marked - Short hand for "ECMAScript 5", the version of JavaScript run by most modern browsers. + Short hand for [ECMAScript](#ecmascript) 5, the version of JavaScript run by most modern browsers. See [ECMAScript](#ecmascript). a#F @@ -386,41 +366,39 @@ a#H .l-sub-section :marked A directive property that can be the ***target*** of a - [Property Binding](!{docsLatest}/guide/template-syntax.html#property-binding). + [property binding](!{docsLatest}/guide/template-syntax.html#property-binding) (explained in detail in the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page). Data values flow *into* this property from the data source identified in the template expression to the right of the equal sign. - See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter. + See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page. :marked ## Interpolation .l-sub-section :marked - A form of [Property Data Binding](#data-binding) in which a + A form of [property data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text. That text may be concatenated with neighboring text before it is assigned to an element property - or displayed between element tags as in this example. + or displayed between element tags, as in this example. code-example(language="html" escape="html"). :marked - Learn more about interpolation in the - [Template Syntax](!{docsLatest}/guide/template-syntax.html#interpolation) chapter. + Read more about [interpolation](!{docsLatest}/guide/template-syntax.html#interpolation) in the + [Template Syntax](!{docsLatest}/guide/template-syntax.html) page. .l-main-section#J -+ifDocsFor('ts') - a#jit +a#jit +:marked + ## Just-in-Time (JiT) compilation +.l-sub-section :marked - ## Just-in-Time (JiT) Compilation - .l-sub-section - :marked - With Angular _Just-in-time_ bootstrapping you compile your components and modules in the - browser - and launch the application dynamically. This is a good choice during development. - Consider the [Ahead-of-time](#aot) mode for production apps. + With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser + and launch the application dynamically. This is a good choice during development. + Consider using the [ahead-of-time](#aot) mode for production apps. .l-main-section#K :marked @@ -431,29 +409,29 @@ a#H .l-main-section#L :marked - ## Lifecycle Hooks + ## Lifecycle hooks .l-sub-section :marked - [Directives](#directive) and [Components](#component) have a lifecycle - managed by Angular as it creates, updates and destroys them. + [Directives](#directive) and [components](#component) have a lifecycle + managed by Angular as it creates, updates, and destroys them. - Developers can tap into key moments in that lifecycle by implementing - one or more of the "Lifecycle Hook" interfaces. + You can tap into key moments in that lifecycle by implementing + one or more of the lifecycle hook interfaces. Each interface has a single hook method whose name is the interface name prefixed with `ng`. - For example, the `OnInit` interface has a hook method names `ngOnInit`. + For example, the `OnInit` interface has a hook method named `ngOnInit`. Angular calls these hook methods in the following order: - * `ngOnChanges` - called when an [input](#input)/[output](#output) binding values change - * `ngOnInit` - after the first `ngOnChanges` - * `ngDoCheck` - developer's custom change detection - * `ngAfterContentInit` - after component content initialized - * `ngAfterContentChecked` - after every check of component content - * `ngAfterViewInit` - after component's view(s) are initialized - * `ngAfterViewChecked` - after every check of a component's view(s) + * `ngOnChanges` - when an [input](#input)/[output](#output) binding value changes. + * `ngOnInit` - after the first `ngOnChanges`. + * `ngDoCheck` - developer's custom change detection. + * `ngAfterContentInit` - after component content initialized. + * `ngAfterContentChecked` - after every check of component content. + * `ngAfterViewInit` - after component's view(s) are initialized. + * `ngAfterViewChecked` - after every check of a component's view(s). * `ngOnDestroy` - just before the directive is destroyed. - Learn more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) chapter. + Read more in the [Lifecycle Hooks](!{docsLatest}/guide/lifecycle-hooks.html) page. .l-main-section#M @@ -465,14 +443,13 @@ a#H :marked In Angular, there are two types of modules: - [Angular modules](#angular-module). - See the [Angular Module](!{docsLatest}/guide/ngmodule.html) chapter for details and examples. - - ES2015 modules as described in this section. + For details and examples, see the [Angular Modules](!{docsLatest}/guide/ngmodule.html) page. + - ES2015 modules, as described in this section. :marked Angular apps are modular. - In general, we assemble our application from many modules, both the ones we write ourselves - and the ones we acquire from others. + In general, you assemble your application from many modules, both the ones you write and the ones you acquire from others. A typical module is a cohesive block of code dedicated to a single purpose. @@ -480,21 +457,19 @@ a#H A module that needs that thing, **imports** it. The structure of Angular modules and the import/export syntax - is based on the [ES2015](#es2015) module standard - described [here](http://www.2ality.com/2014/09/es6-modules-final.html). + is based on the [ES2015 module standard](http://www.2ality.com/2014/09/es6-modules-final.html). An application that adheres to this standard requires a module loader to - load modules on request and resolve inter-module dependencies. + load modules on request, and resolve inter-module dependencies. Angular does not ship with a module loader and does not have a preference - for any particular 3rd party library (although most samples use SystemJS). - Application developers may pick any module library that conforms to the standard + for any particular 3rd party library (although most examples use SystemJS). + You may pick any module library that conforms to the standard. Modules are typically named after the file in which the exported thing is defined. The Angular [DatePipe](https://github.com/angular/angular/blob/master/modules/@angular/common/src/pipes/date_pipe.ts) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. - Developers rarely access Angular feature modules directly. - We usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`. + You rarely access Angular feature modules directly. You usually import them from one of the Angular [scoped packages](#scoped-package) such as `@angular/core`. a#N .l-main-section#O @@ -504,8 +479,8 @@ a#N ## Observable .l-sub-section :marked - We can think of an observable as an array whose items arrive asynchronously over time. - Observables help us manage asynchronous data, such as data coming from a backend service. + You can think of an observable as an array whose items arrive asynchronously over time. + Observables help you manage asynchronous data, such as data coming from a backend service. Observables are used within Angular itself, including Angular's event system and its http client service. To use observables, Angular uses a third-party library called Reactive Extensions (RxJS). @@ -515,12 +490,12 @@ a#N ## Output .l-sub-section :marked - A directive property that can be the ***target*** of an - [Event Binding](!{docsLatest}/guide/template-syntax.html#property-binding). + A directive property that can be the ***target*** of + [event binding](!{docsLatest}/guide/template-syntax.html#event-binding). Events stream *out* of this property to the receiver identified in the template expression to the right of the equal sign. - See the [Template Syntax](!{docsLatest}/guide/template-syntax.html#inputs-outputs) chapter. + See the [Input and output properties](!{docsLatest}/guide/template-syntax.html#inputs-outputs) section of the [Template Syntax](!{docsLatest}/guide/template-syntax.html) page. .l-main-section#P @@ -528,20 +503,18 @@ a#N ## PascalCase .l-sub-section :marked - The practice of writing compound words or phrases such that each word or abbreviation begins with a capital letter. - Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`. + The practice of writing individual words, compound words, or phrases such that each word or abbreviation begins with a capital letter. Class names are typically spelled in PascalCase. Examples include: `Person` and `HeroDetailComponent`. - This form is also known as **upper camel case**, to distinguish it from **lower camel case** which we simply call [camelCase](#camelcase). - In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*. + This form is also known as **upper camel case** to distinguish it from **lower camel case**, which is simply called [camelCase](#camelcase). In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*. :marked ## Pipe .l-sub-section :marked An Angular pipe is a function that transforms input values to output values for - display in a [view](#view). We use the `!{_at}Pipe` !{_decoratorLink} - to associate the pipe function with a name. We can then use that - name in our HTML to declaratively transform values on screen. + display in a [view](#view). Use the `!{_at}Pipe` !{_decoratorLink} + to associate the pipe function with a name. You then use that + name in your HTML to declaratively transform values on screen. Here's an example that uses the built-in `currency` pipe to display a numeric value in the local currency. @@ -549,24 +522,22 @@ a#N code-example(language="html" escape="html"). {{product.price | currency}} :marked - Learn more in the chapter on [pipes](!{docsLatest}/guide/pipes.html) . + Read more in the page on [pipes](!{docsLatest}/guide/pipes.html). -- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html' :marked ## Provider .l-sub-section :marked - A [Provider](!{_ProviderUrl}) creates a new instance of a dependency for the - [Dependency Injection](#dependency-injection) system. - It relates a lookup token to code — sometimes called a "recipe" — - that can create a dependency value. + A _provider_ creates a new instance of a dependency for the + [dependency injection](#dependency-injection) system. + It relates a lookup token to code—sometimes called a "recipe"—that can create a dependency value. a#Q .l-main-section#R +ifDocsFor('ts|js') :marked - ## Reactive Forms + ## Reactive forms .l-sub-section :marked A technique for building Angular forms through code in a component. @@ -578,24 +549,22 @@ a#Q - The template input elements do *not* use `ngModel`. - The associated Angular directives are all prefixed with `Form` such as `FormGroup`, `FormControl`, and `FormControlName`. - Reactive forms are powerful, flexible, and great for more complex data entry form scenarios, such as dynamic generation - of form controls. + Reactive forms are powerful, flexible, and great for more complex data entry form scenarios such as dynamic generation of form controls. :marked ## Router .l-sub-section :marked Most applications consist of many screens or [views](#view). - The user navigates among them by clicking links and buttons - and taking other similar actions that cause the application to + The user navigates among them by clicking links and buttons, + and performing other similar actions that cause the application to replace one view with another. - The Angular [Component Router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring - and managing the entire view navigation process including the creation and destruction + The Angular [component router](!{docsLatest}/guide/router.html) is a richly featured mechanism for configuring and managing the entire view navigation process including the creation and destruction of views. +ifDocsFor('ts|js') :marked - In most cases, components becomes attached to a [router](#router) by means + In most cases, components become attached to a [router](#router) by means of a `RouterConfig` that defines routes to views. A [routing component's](#routing-component) template has a `RouterOutlet` element @@ -604,31 +573,30 @@ a#Q Other views in the application likely have anchor tags or buttons with `RouterLink` directives that users can click to navigate. - See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more. + For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. +ifDocsFor('ts|js') :marked - ## RouterModule + ## Router module .l-sub-section :marked A separate [Angular module](#angular-module) that provides the necessary service providers and directives for navigating through application views. - See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more. + For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. :marked - ## Routing Component + ## Routing component .l-sub-section - block routing-component-defn - :marked - An Angular [Component](#component) with a RouterOutlet that displays views based on router navigations. + :marked + An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations. - See the [Component Router](!{docsLatest}/guide/router.html) chapter to learn more. + For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. .l-main-section#S +ifDocsFor('ts|js') :marked - ## Scoped Package + ## Scoped package .l-sub-section :marked Angular modules are delivered within *scoped packages* such as `@angular/core`, `@angular/common`, `@angular/platform-browser-dynamic`, @@ -636,9 +604,9 @@ a#Q A [*scoped package*](https://docs.npmjs.com/misc/scope) is a way to group related *npm* packages. - We import a scoped package the same way we'd import a *normal* package. + You import a scoped package the same way that you'd import a *normal* package. The only difference, from a consumer perspective, - is that the package name begins with the Angular *scope name*, `@angular`. + is that the *scoped package* name begins with the Angular *scope name*, `@angular`. +makeExcerpt('architecture/ts/app/app.component.ts', 'import', '') @@ -649,38 +617,34 @@ a#snake-case .l-sub-section block snake-case-defn :marked - The practice of writing compound words or phrases such that each word is separated by an - underscore (`_`). This form is also known as **underscore case**. + The practice of writing compound words or phrases such that an + underscore (`_`) separates one word from the next. This form is also known as **underscore case**. :marked ## Service .l-sub-section :marked - Components are great and all, but what do we do with data or logic that are not associated - with a specific view or that we want to share across components? We build services! + For data or logic that is not associated + with a specific view or that you want to share across components, build services. Applications often require services such as a hero data service or a logging service. - Our components depend on these services to do the heavy lifting. A service is a class with a focused purpose. We often create a service to implement features that are independent from any specific view, - provide share data or logic across components, or encapsulate external interactions. + provide shared data or logic across components, or encapsulate external interactions. - See the [Services](!{docsLatest}/tutorial/toh-pt4.html) chapter of the tutorial to learn more. + For more information, see the [Services](!{docsLatest}/tutorial/toh-pt4.html) page of the [Tour of Heroes](!{docsLatest}/tutorial/) tutorial. :marked - ## Structural Directive + ## Structural directive .l-sub-section :marked - A category of [Directive](#directive) that can - shape or re-shape HTML layout, typically by adding, removing, or manipulating - elements and their children. + A category of [directive](#directive) that can + shape or reshape HTML layout, typically by adding, removing, or manipulating + elements and their children; for example, the `ngIf` "conditional element" directive and the `ngFor` "repeater" directive. - The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are - good examples in this category. - - See the [Structural Directives](!{docsLatest}/guide/structural-directives.html) chapter to learn more. + Read more in the [Structural Directives](!{docsLatest}/guide/structural-directives.html) page. .l-main-section#T :marked @@ -688,14 +652,13 @@ a#snake-case .l-sub-section :marked A template is a chunk of HTML that Angular uses to render a [view](#view) with - the support and continuing guidance of an Angular [Directive](#directive), - most notably a [Component](#component). + the support and continuing guidance of an Angular [directive](#directive), + most notably a [component](#component). - We write templates in a special [Template Syntax](!{docsLatest}/guide/template-syntax.html). +ifDocsFor('ts|js') :marked - ## Template-Driven Forms + ## Template-driven forms .l-sub-section :marked A technique for building Angular forms using HTML forms and input elements in the view. @@ -704,47 +667,47 @@ a#snake-case When building template-driven forms: - The "source of truth" is the template. The validation is defined using attributes on the individual input elements. - [Two-way binding](#data-binding) with `ngModel` keeps the component model in synchronization with the user's entry into the input elements. - - Behind the scenes, Angular creates a new control for each input element that has a `name` attribute and - two-way binding set up. + - Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input. - The associated Angular directives are all prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. - Template-driven forms are convenient, quick, and simple and are a good choice for many basic data entry form scenarios. + Template-driven forms are convenient, quick, and simple. They are a good choice for many basic data entry form scenarios. - Learn how to build template-driven forms - in the [Forms](!{docsLatest}/guide/forms.html) chapter. + Read about how to build template-driven forms + in the [Forms](!{docsLatest}/guide/forms.html) page. :marked - ## Template Expression + ## Template expression .l-sub-section :marked An expression is a !{_Lang}-like syntax that Angular evaluates within - a [data binding](#data-binding). Learn how to write template expressions - in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) chapter. + a [data binding](#data-binding). + + Read about how to write template expressions + in the [Template Syntax](!{docsLatest}/guide/template-syntax.html#template-expressions) page. :marked ## Transpile .l-sub-section :marked The process of transforming code written in one form of JavaScript - (e.g., TypeScript) into another form of JavaScript (e.g., [ES5](#es5)). + (for example, TypeScript) into another form of JavaScript (for example, [ES5](#es5)). :marked ## TypeScript .l-sub-section :marked - A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015) - language features and many features that may arrive in future versions - of JavaScript such as [Decorators](#decorator). + A version of JavaScript that supports most [ECMAScript 2015](#es2015) + language features such as [decorators](#decorator). - TypeScript is also noteable for its optional typing system which gives - us compile-time type-checking and strong tooling support (e.g. "intellisense", + TypeScript is also noteable for its optional typing system, which gives + us compile-time type checking and strong tooling support (for example, "intellisense", code completion, refactoring, and intelligent search). Many code editors and IDEs support TypeScript either natively or with plugins. TypeScript is the preferred language for Angular development although - we are welcome to write in other JavaScript dialects such as [ES5](#es5). + you can use other JavaScript dialects such as [ES5](#es5). - Learn more about TypeScript on its [website](http://www.typescriptlang.org/). + Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/). a#U .l-main-section#V @@ -756,10 +719,10 @@ a#U A view is a portion of the screen that displays information and responds to user actions such as clicks, mouse moves, and keystrokes. - Angular renders a view under the control of one or more [Directives](#directive), - especially [Component](#component) directives and their companion [Templates](#template). - The Component plays such a prominent role that we often - find it convenient to refer to a component as a view. + Angular renders a view under the control of one or more [directives](#directive), + especially [component](#component) directives and their companion [templates](#template). + The component plays such a prominent role that it's often + convenient to refer to a component as a view. Views often contain other views and any view might be loaded and unloaded dynamically as the user navigates through the application, typically @@ -779,16 +742,16 @@ a#Y a JavaScript application's asynchronous activity. The browser DOM and JavaScript have a limited number - of asynchronous activities, activities such as DOM events (e.g., clicks), + of asynchronous activities, activities such as DOM events (for example, clicks), [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), and [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) calls to remote servers. Zones intercept all of these activities and give a "zone client" the opportunity - to take action before and after the async activity completes. + to take action before and after the async activity finishes. - Angular runs our application in a zone where it can respond to - asynchronous events by checking for data changes and updating + Angular runs your application in a zone where it can respond to + asynchronous events by checking for data changes, and updating the information it displays via [data bindings](#data-binding). Learn more about zones in this diff --git a/public/docs/ts/_cache/guide/dependency-injection.jade b/public/docs/ts/_cache/guide/dependency-injection.jade index 54ece28d23..59ec0cc72f 100644 --- a/public/docs/ts/_cache/guide/dependency-injection.jade +++ b/public/docs/ts/_cache/guide/dependency-injection.jade @@ -247,43 +247,49 @@ block ctor-syntax We don't have to create an Angular injector. Angular creates an application-wide injector for us during the bootstrap process. -+makeExample('dependency-injection/ts/app/main.ts', 'bootstrap', 'app/main.ts (excerpt)')(format='.') ++makeExcerpt('app/main.ts', 'bootstrap') :marked We do have to configure the injector by registering the **providers** that create the services our application requires. We'll explain what [providers](#providers) are later in this chapter. - Before we do, let's see an example of provider registration during bootstrapping: -+makeExample('dependency-injection/ts/app/main.1.ts', 'bootstrap-discouraged')(format='.') +block register-provider-ngmodule + :marked + We can either register a provider within an [NgModule](ngmodule.html) or in application components -:marked - The injector now knows about our `HeroService`. - An instance of our `HeroService` will be available for injection across our entire application. + ### Registering providers in an NgModule + Here's our AppModule where we register a `Logger`, a `UserService`, and an `APP_CONFIG` provider. - Of course we can't help wondering about that comment telling us not to do it this way. - It *will* work. It's just not a best practice. - The bootstrap provider option is intended for configuring and overriding Angular's own - preregistered services, such as its routing support. - - The preferred approach is to register application providers in application components. - Because the `HeroService` is used within the *Heroes* feature area — - and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`. + - var app_module_ts = 'app/app.module.ts'; + +makeExcerpt(app_module_ts + ' (excerpt)', 'ngmodule', app_module_ts, { otl: /(providers:)/ }) + //- The preferred approach is to register application providers in application components. + //- Because the `HeroService` is used within the *Heroes* feature area — + //- and nowhere else — the ideal place to register it is in the top-level `HeroesComponent`. :marked ### Registering providers in a component + Here's a revised `HeroesComponent` that registers the `HeroService`. -- var stylePattern = { otl: /(providers:.*),/ }; -+makeExample('dependency-injection/ts/app/heroes/heroes.component.1.ts', 'full','app/heroes/heroes.component.ts', stylePattern)(format='.') +- var stylePattern = { otl: /(providers:[^,]+),/ }; ++makeExample('app/heroes/heroes.component.1.ts', 'full', 'app/heroes/heroes.component.ts', stylePattern)(format='.') -:marked - Look closely at the `providers` part of the `@Component` metadata. - An instance of the `HeroService` is now available for injection in this `HeroesComponent` - and all of its child components. +block ngmodule-vs-component + :marked + ### When to use the NgModule and when an application component? - The `HeroesComponent` itself doesn't happen to need the `HeroService`. - But its child `HeroListComponent` does, so we head there next. + On the one hand, a provider in an NgModule is registered in the root injector. That means that every provider + registered within an NgModule will be accessible in the _entire application_. + + On the other hand, a provider registered in an application component is available only on that component and all its children. + + We want the `APP_CONFIG` service to be available all across the application, but a `HeroService` is only used within the *Heroes* + feature area and nowhere else. + + .l-sub-section + :marked + Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](../cookbook/ngmodule-faq.html#root-component-or-module). :marked ### Preparing the HeroListComponent for injection @@ -387,7 +393,6 @@ block ctor-syntax The constructor now asks for an injected instance of a `Logger` and stores it in a private property called `#{_priv}logger`. We call that property within our `getHeroes` method when anyone asks for heroes. -//- FIXME refer to Dart API when that page becomes available. - var injUrl = '../api/core/index/Injectable-decorator.html'; h3#injectable Why @Injectable()? :marked @@ -462,7 +467,7 @@ block injectable-not-always-needed-in-ts Our logger service is quite simple: -+makeExample('dependency-injection/ts/app/logger.service.ts', null, 'app/logger.service.ts') ++makeExample('app/logger.service.ts') block real-logger //- N/A @@ -470,9 +475,9 @@ block real-logger :marked We're likely to need the same logger service everywhere in our application, so we put it in the project's `#{_appDir}` folder, and - we register it in the `providers` #{_array} of the metadata for our application root component, `AppComponent`. + we register it in the `providers` #{_array} of our application !{_moduleVsComp}, `!{_AppModuleVsAppComp}`. -+makeExcerpt('app/providers.component.ts','providers-logger','app/app.component.ts (excerpt)') ++makeExcerpt('app/providers.component.ts (excerpt)', 'providers-logger','app/app.module.ts') :marked If we forget to register the logger, Angular throws an exception when it first looks for the logger: @@ -497,7 +502,7 @@ code-example(format="nocode"). We must register a service *provider* with the injector, or it won't know how to create the service. - Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppComponent` like this: + Earlier we registered the `Logger` service in the `providers` #{_array} of the metadata for the `AppModule` like this: +makeExample('dependency-injection/ts/app/providers.component.ts','providers-logger') @@ -766,7 +771,7 @@ block what-should-we-use-as-token The TypeScript interface disappears from the generated JavaScript. There is no interface type information left for Angular to find at runtime. -//- FIXME simplify once APIs are defined for Dart. +//- FIXME update once https://github.com/dart-lang/angular2/issues/16 is addressed. - var opaquetoken = _docsFor == 'dart' ? 'OpaqueToken' : 'OpaqueToken' :marked ### OpaqueToken @@ -796,9 +801,9 @@ block what-should-we-use-as-token block dart-map-alternative :marked - Or we can provide and inject the configuration object in our top-level `AppComponent`. + Or we can provide and inject the configuration object in an ngModule like `AppModule`. - +makeExcerpt('app/app.component.ts','providers') + +makeExcerpt('app/app.module.ts','ngmodule-providers') #optional :marked diff --git a/public/docs/ts/_cache/guide/index.jade b/public/docs/ts/_cache/guide/index.jade index ad7da30ac7..cd3db9d015 100644 --- a/public/docs/ts/_cache/guide/index.jade +++ b/public/docs/ts/_cache/guide/index.jade @@ -1,19 +1,6 @@ block includes include ../_util-fns - -figure - 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 #{_Lang}.
- - ## Organization - - The documentation is divided into major thematic sections, each - a collection of pages devoted to that theme. - -block js-alert + - var _angular_io = 'angular.io'; - var __lang = _docsFor || current.path[1] || 'ts'; - var guideData = public.docs[__lang].latest.guide._data; @@ -22,6 +9,19 @@ block js-alert - if (!guideData[page].basics && !guideData[page].hide) { advancedLandingPage = page; break; } - } - var advancedUrl = './' + advancedLandingPage + '.html' + + +:marked + This page describes the Angular documentation at a high level. + If you're new to Angular, you may want to visit "[Learning Angular](learning-angular.html)" first. + + ## Themes + + The documentation is divided into major thematic sections, each + a collection of pages devoted to that theme. + +block js-alert + - var top="vertical-align:top" table(width="100%") col(width="15%") @@ -30,19 +30,22 @@ table(width="100%") td QuickStart td :marked - The foundation for every page and sample in this documentation. + A first taste of Angular with zero installation. + Run "Hello World" in an online code editor and start playing with live code. tr(style=top) - td Guide + td Guide td :marked - The essential ingredients of Angular development. + Learn the Angular basics (you're already here!) like the setup for local development, + displaying data and accepting user input, injecting application services into components, + and building simple forms. tr(style=top) - td API Reference + td API Reference td :marked - Authoritative details about each member of the Angular libraries. + Authoritative details about each of the Angular libraries. tr(style=top) - td Tutorial + td Tutorial td :marked A step-by-step, immersive approach to learning Angular that @@ -53,62 +56,37 @@ table(width="100%") :marked In-depth analysis of Angular features and development practices. tr(style=top) - td Cookbook + td Cookbook td :marked Recipes for specific application challenges, mostly code snippets with a minimum of exposition. :marked - ## Learning path - - You don't have to read the guide straight through. Most pages stand on their own. - - For those new to Angular, the recommended learning path runs through the *Guide* section: - - 1. For the big picture, read the [Architecture](architecture.html) overview. - - 1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular. - It shows you how to set up the libraries and tools you'll need to write *any* Angular app. - - 1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off, - and builds a simple data-driven app. The app demonstrates the essential characteristics of a professional application: - a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. - - 1. [Displaying Data](displaying-data.html) explains how to display information on the screen. - - 1. [User Input](user-input.html) covers how Angular responds to user behavior. - - 1. [Forms](forms.html) handles user data entry and validation within the UI. - - 1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications - from small, single-purpose parts. - - 1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML. - - After reading the above sections, you can skip to any other pages on this site. + A few early pages are written as tutorials and are clearly marked as such. + The rest of the pages highlight key points in code rather than explain each step necessary to build the sample. + You can always get the full source through the #{_liveLink}s. ## Code samples - Each page includes code snippets that you can reuse in your applications. - These snippets are excerpts from a sample application that accompanies the page. + Each page includes code snippets from a sample application that accompanies the page. + You can reuse these snippets in your applications. - Look for a link to a running version of that sample near the top of each page, + Look for a link to a running version of that sample, often near the top of the page, such as this from the [Architecture](architecture.html) page. -

- The link launches a browser-based code editor where you can inspect, modify, save, and download the code. -

- - A few early pages are written as tutorials and are clearly marked as such. - The rest of the pages highlight key points in code rather than explain each step necessary to build the sample. - You can always get the full source through the #{_liveLink}. + + The link launches a browser-based, code editor where you can inspect, modify, save, and download the code. + ## Reference pages - - The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios. - - The [Glossary](glossary.html) defines terms that Angular developers should know. - - The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries. + * The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios. + * The [Glossary](glossary.html) defines terms that Angular developers should know. +
  • The [Change Log](change-log.html) announces what's new and changed in the documentation.
  • + * The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries. - ## We welcome feedback! + ## Feedback - - Use the [website GitHub repo](!{_ngDocRepoURL}) for **documentation** issues and pull requests. - - Use the [Angular GitHub repo](!{_ngRepoURL}) to report issues with **Angular** itself. + We welcome feedback! + + * Use the !{_angular_io} Github repository for **documentation** issues and pull requests. + * Use the Angular Github repository to report issues with **Angular** itself. diff --git a/public/docs/ts/_cache/guide/learning-angular.jade b/public/docs/ts/_cache/guide/learning-angular.jade new file mode 100644 index 0000000000..f0963c3ac6 --- /dev/null +++ b/public/docs/ts/_cache/guide/learning-angular.jade @@ -0,0 +1,44 @@ +block includes + include ../_util-fns + +figure + img(src="/resources/images/devguide/intro/people.png" width="200px" height="152px" alt="Us" align="left" style="margin-left:-40px;margin-right:10px" ) +:marked + Everyone learns differently. + You don't have to read the documentation straight through. Most pages stand on their own. + Those new to Angular may wish to follow this popular learning path. +
    + +:marked + 1. [Setup](setup.html "Setup locally withe Quickstart seed") for local Angular development, if you haven't already done so. + + 1. Take the [*Tour of Heroes* tutorial](../tutorial "Tour of Heroes"). + + The *Tour of Heroes* takes you step-by-step from [setup](setup.html) + to a full-featured example that demonstrates the essential characteristics of a professional application: + a sensible project structure, data binding, master/detail, services, dependency injection, navigation, and remote data access. + + 1. Read the [Architecture](architecture.html) overview for the big picture. +
  • + [The Root Module](appmodule.html) introduces the `NgModule` class that tells Angular how to compile and run your application. +

  • + + 1. [Displaying Data](displaying-data.html) shows how data binding puts component property values on screen. + + 1. [User Input](user-input.html) explains how to respond to user-initiated DOM events. + + 1. [Forms](forms.html) covers data entry and validation within the UI. + + 1. [Dependency Injection](dependency-injection.html) is the way to build large, maintainable applications + from small, single-purpose parts. + + 1. [Template Syntax](template-syntax.html) is a comprehensive study of Angular template HTML. + + After reading the above sections, feel free to skip around among the other pages on this site. + +.l-sub-section + :marked + ### Next Step + + Try the [tutorial](../tutorial "Tour of Heroes") if you're ready to start coding or + visit the [Architecture](architecture.html "Basic Concepts") guide if you prefer to learn the basic concepts first. diff --git a/public/docs/ts/_cache/guide/server-communication.jade b/public/docs/ts/_cache/guide/server-communication.jade index 1afea82d84..ae65322dd7 100644 --- a/public/docs/ts/_cache/guide/server-communication.jade +++ b/public/docs/ts/_cache/guide/server-communication.jade @@ -648,8 +648,9 @@ a#in-mem-web-api :marked ## Appendix: Tour of Heroes in-memory server - If we only cared to retrieve data, we could tell Angular to get the heroes from a `heroes.json` file like this one: -+makeJson('server-communication/ts/app/heroes.json', null, 'app/heroes.json')(format=".") + If the app only needed to retrieve data, you could get the heroes from a `heroes.json` file: +- var _heroesJsonPath = (_docsFor == 'dart' ? 'web' : 'app') + '/heroes.json'; ++makeJson('server-communication/' + _docsFor + '/' + _heroesJsonPath, null, _heroesJsonPath)(format=".") .l-sub-section :marked We wrap the heroes array in an object with a `data` property for the same reason that a data server does: diff --git a/public/docs/ts/_cache/guide/setup.jade b/public/docs/ts/_cache/guide/setup.jade new file mode 100644 index 0000000000..e883eacc86 --- /dev/null +++ b/public/docs/ts/_cache/guide/setup.jade @@ -0,0 +1,180 @@ +block includes + include ../_util-fns + - var _prereq = 'node and npm'; + - var _playground = 'playground'; + - var _Install = 'Install'; + //- npm commands + - var _install = 'install'; + - var _start = 'start'; + +a#develop-locally +:marked + ## Setup a local development environment + + + The QuickStart live-coding example is an Angular _playground_. + It's not where you'd develop a real application. + You [should develop locally](#why-locally "Why develop locally") on your own machine ... and that's also how we think you should learn Angular. + + + Setting up a new project on your machine is quick and easy with the **QuickStart seed**, + maintained [on github](!{_qsRepo} "Install the github QuickStart repo"). + + Make sure you have [!{_prereq} installed](#install-prerequisites "What if you don't have !{_prereq}?"). + Then ... + 1. Create a project folder (you can call it `quickstart` and rename it later). + 1. [Clone](#clone "Clone it from github") or [download](#download "download it from github") the **QuickStart seed** into your project folder. + 1. !{_Install} [!{_npm}](#install-prerequisites "What if you don't have !{_prereq}?") packages. + 1. Run `!{_npm} !{_start}` to launch the sample application. + +a#clone +:marked + ### Clone + + Perform the _clone-to-launch_ steps with these terminal commands. + +code-example(language="sh" class="code-shell"). + git clone !{_qsRepo}.git quickstart + cd quickstart + !{_npm} !{_install} + !{_npm} !{_start} + +a#download +:marked + ### Download + Download the QuickStart seed + and unzip it into your project folder. Then perform the remaining steps with these terminal commands. + +code-example(language="sh" class="code-shell"). + cd quickstart + !{_npm} !{_install} + !{_npm} !{_start} + +.l-main-section#seed +:marked + ## What's in the QuickStart seed? + +block qs-seed + :marked + The **QuickStart seed** contains the same application as the QuickStart playground + and even has its own _playground_ + that accomodates development of richer examples in a live coding environment. + + But it's true purpose is to provide a solid foundation for _local_ development. + Consequently, there are _many more files_ in the project folder on your machine, + most of which you can [learn about later](setup-systemjs-anatomy.html "Setup Anatomy"). + +block core-files + :marked + Focus on the following three TypeScript (`.ts`) files in the **`/app`** folder. + + .filetree + .file app + .children + .file app.component.ts + .file app.module.ts + .file main.ts + + +makeTabs(` + setup/ts/app/app.component.ts, + setup/ts/app/app.module.ts, + setup/ts/app/main.ts + `, '', ` + app/app.component.ts, + app/app.module.ts, + app/main.ts + `)(format='.') + +:marked + All guides and cookbooks have _at least these core files_. Each file has a distinct purpose and evolves independently as the application grows. + +style td, th {vertical-align: top} +table(width="100%") + col(width="20%") + col(width="80%") + tr + th File + th Purpose + tr + td app.component.ts + td + :marked + Defines the same `AppComponent` as the one in the QuickStart !{_playground}. + It is the **root** component of what will become a tree of nested components + as the application evolves. + tr(if-docs="ts") + td app.module.ts + td + :marked + Defines `AppModule`, the [root module](appmodule.html "AppModule: the root module") that tells Angular how to assemble the application. + Right now it declares only the `AppComponent`. + Soon there will be more components to declare. + tr + td main.ts + td + :marked + Compiles the application with the [JiT compiler](../glossary.html#jit) + and [bootstraps](appmodule.html#main "bootstrap the application") the application to run in the browser. + That's a reasonable choice for the development of most projects and + it's the only viable choice for a sample running in a _live-coding_ environment like Plunker. + You'll learn about alternative compiling and deployment options later in the documentation. + +.l-sub-section + :marked + ### Next Step + + If you're new to Angular, we recommend staying on the [learning path](learning-angular.html). + +br +br + +a#install-prerequisites +.l-main-section +:marked + ## Appendix: !{_prereq} +block install-tooling + :marked + Node.js and npm are essential to modern web development with Angular and other platforms. + Node powers client development and build tools. + The _npm_ package manager, itself a _node_ application, installs JavaScript libraries. + + + Get them now if they're not already installed on your machine. + + **Verify that you are running node `v4.x.x` or higher and npm `3.x.x` or higher** + by running the commands `node -v` and `npm -v` in a terminal/console window. + Older versions produce errors. + + We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. + You may need [nvm](https://github.com/creationix/nvm) if you already have projects running on your machine that + use other versions of node and npm. + ++ifDocsFor('ts') + a#why-locally + .l-main-section + :marked + ## Appendix: Why develop locally + + Live coding in the browser is a great way to explore Angular. + + Links on almost every documentation page open completed samples in the browser. + You can play with the sample code, share your changes with friends, and download and run the code on your own machine. + + The [QuickStart](../quickstart.html "Angular QuickStart Playground") shows just the `AppComponent` file. + It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_. + so the reader can discover Angular without distraction. + The other samples are based on the QuickStart seed. + + As much fun as this is ... + * you can't ship your app in plunker + * you aren't always online when writing code + * transpiling TypeScript in the browser is slow + * the type support, refactoring, and code completion only work in your local IDE + + Use the live coding environment as a _playground_, + a place to try the documentation samples and experiment on your own. + It's the perfect place to reproduce a bug when you want to + file a documentation issue or + file an issue with Angular itself. + + For real development, we strongly recommend [developing locally](#develop-locally). diff --git a/public/docs/ts/_cache/quickstart.jade b/public/docs/ts/_cache/quickstart.jade index 817f34361f..cf978e0a00 100644 --- a/public/docs/ts/_cache/quickstart.jade +++ b/public/docs/ts/_cache/quickstart.jade @@ -1,382 +1,45 @@ block includes include _util-fns - - var _Install = 'Install' - - var _prereq = 'Node.js and npm' - - var _angular_browser_uri = '@angular/platform-browser-dynamic' - - var _angular_core_uri = '@angular/core' - - var _stepInit = 4 // Step # after NgModule step - - var _quickstartSrcURL='https://github.com/angular/quickstart/blob/master/README.md' + - var _on_Plunkr = 'on Plunkr'; -//- TS/Dart shared step counter -- var step = _stepInit +:marked + Angular applications are made of _components_. + A _component_ is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string: + ++makeExample('app/app.component.ts')(format='.') + +:marked + You can try this out without installing anything. Open the QuickStart example !{_on_Plunkr} in another tab + and follow along. + + Every component begins with an `@Component` [!{_decorator}](glossary.html#!{_decorator} '"!{_decorator}" explained') + function that + takes a _metadata_ object. The metadata object describes how the HTML template and component class work together. + + The `selector` property tells Angular to display the component inside a custom `` tag in the `index.html`. ++makeExample('index.html','my-app','index.html (inside )')(format='.') +:marked + The `template` property defines a message inside an `

    ` header. + The message starts with "Hello" and ends with `{{name}}` + which is an Angular [interpolation binding](guide/displaying-data.html) expression. + At runtime, Angular replaces `{{name}}` with the value of the component's `name` property. + + In the example, change the component class's `name` property from `'Angular'` to `'World'` and see what happens. + + Interpolation binding is one of many Angular features you'll discover in this documentation. +ifDocsFor('ts') - aside.is-right - :marked - The live example link opens the finished application in - Plunker so that you can interact - with the code. You'll find live examples at the start of most sections. - -:marked - The QuickStart application has the structure of a real-world Angular application and - displays the simple message: - -figure.image-display - img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app") - -:marked - **Try it out**. Here's a link to a . - -+ifDocsFor('ts') - :marked - You can also - clone the entire QuickStart application from GitHub. - -h1 Build this application! - -:marked - - [Prerequisite](#prereq): Install #{_prereq}. - - [Step 1](#create-and-configure): Create and configure the project. - - [Step 2](#ngmodule): Create your application. -
  • [Step 3](#root-component): Create a component and add it to your application.
  • - - [Step !{step++}](#main): Start up your application. - - [Step !{step++}](#index): Define the web page that hosts the application. - - [Step !{step++}](#build-and-run): Build and run the application. - - [Step !{step++}](#make-changes): Make some live changes. - - [Wrap up and Next Steps](#wrap-up) - -- var step = _stepInit // reinitialize step counter for headers to come - -.l-main-section#prereq -h2 Prerequisite: Install #{_prereq} - -block setup-tooling - :marked - If Node.js and npm aren't already on your machine, install them. Our examples require node **v4.x.x** or higher and - npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v` - in a terminal window. - -.l-main-section -h2#create-and-configure Step 1: Create and configure the project - -- var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'configuration files' - -:marked - In this step you will: - * [Create the project folder](#create-the-project-folder) - * [Create #{_package_and_config_files}](#add-config-files) - * [#{_Install} packages](#install-packages) - -h3 Create the project folder -:marked - Using a terminal window, create a directory for the project, and change into this - directory. - -- var _ = _docsFor == 'dart' ? '_' : '-'; -code-example(language="sh" class="code-shell"). - mkdir angular!{_}quickstart - cd angular!{_}quickstart - -h3#add-config-files Create #{_package_and_config_files} -block package-and-config-files - - var _tsconfigUri = 'guide/typescript-configuration.html#tsconfig' - - p Our typical Angular project needs several configuration files: - ul - li. - #[b package.json] identifies npm package dependencies for the project. - li. - #[b tsconfig.json] defines how the TypeScript compiler generates JavaScript from the project's - files. - li. - #[b systemjs.config.js] provides information to a module loader about where to find - application modules, and registers all the necessary packages. It also - contains other packages that will be needed by later documentation examples. - - p. - Create each of these files in your project directory. Populate them by pasting in text from - the tabs in the example box below. - - a#config-files - +makeTabs(` - quickstart/ts/package.1.json, - quickstart/ts/tsconfig.1.json, - quickstart/ts/systemjs.config.1.js - `, '', ` - package.json, - tsconfig.json, - systemjs.config.js - `) - - p. - Learn more about these configuration files in the - #[a(href="guide/npm-packages.html") Npm Package Configuration] guide and the - #[a(href="#{_tsconfigUri}") TypeScript Configuration] guide. - A detailed discussion of module loading is beyond the scope of this guide. - .callout.is-helpful - header SystemJS or Webpack? + header A word about TypeScript p. - Although we use SystemJS for illustrative purposes here, it's only one option for loading - modules. Use the module loader that you prefer. For Webpack and Angular, see - Webpack: an Introduction. Or, learn more about SystemJS configuration in general here. + This example is written in TypeScript, a superset of JavaScript. Angular + uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how. - - h3#install-packages #{_Install} packages -block install-packages - :marked - Using npm from the command line, install the packages listed in `package.json` with the command: - - code-example(language="sh" class="code-shell"). - npm install - - :marked - Error messages—in red—might appear during the install, and you might see `npm WARN` messages. As long as there are no `npm ERR!` messages at the end, you can assume success. - - :marked - You should now have the following structure: - - .filetree - .file angular-quickstart - .children - .file node_modules ... - .file package.json - .file systemjs.config.js - .file tsconfig.json - -:marked - You're now ready to write some code! - -.l-main-section -h2#ngmodule Step 2: Create your application - -block create-your-app - :marked - You compose Angular applications into closely related blocks of functionality with - [NgModules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This - makes it possible for you to keep payload size small by only importing the parts of Angular - that your application needs. - - Every Angular application has at least one module: the _root module_, named `AppModule` here. -:marked - **Create #{_an} #{_appDir} subfolder** off the project root directory: - -code-example.code-shell. - mkdir #{_appDir} - -+ifDocsFor('ts') - :marked - Create the file `app/app.module.ts` with the following content: - - +makeExample('app/app.module.1.ts')(format='.') - - :marked - This is the entry point to your application. - - Since the QuickStart application is a web application that runs in a browser, your root module - needs to import the - [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html) - from `@angular/platform-browser` to the `imports` array. - - This is the smallest amount of Angular that is needed for a minimal application to run in the - browser. - - The QuickStart application doesn't do anything else, so you don't need any other modules. In a real - application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class.html) - as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and - [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the - [Tour of Heroes Tutorial](./tutorial/). - - .l-main-section - h2#root-component Step 3: Create a component and add it to your application - -:marked - Every Angular application has at least one component: the _root component_, named `AppComponent` - here. - - Components are the basic building blocks of Angular applications. A component controls a portion - of the screen—a *view*—through its associated template. - -#app-component -:marked - **Create the component file** app/app.component.ts with the following content: - -+makeExample('app/app.component.ts') - -- var _decorator_function = _docsFor == 'dart' ? 'annotation' : 'decorator function'; -:marked - The QuickStart application has the same essential structure as any other Angular component: - - * **An import statement**. Importing gives your component access to - Angular's core [`@Component` !{_decorator_function}](./api/core/index/Component-decorator.html). - * **A @Component #{_decorator}** that associates *metadata* with the - `AppComponent` component class: - - - a *selector* that specifies a simple CSS selector for an HTML element that represents - the component. - - a *template* that tells Angular how to render the component's view. - * **A component class** that controls the appearance and behavior of a view - through its template. Here, you only have the root component, `AppComponent`. Since you don't - need any application logic in the simple QuickStart example, it's empty. -+ifDocsFor('ts') - :marked - You *export* the `AppComponent` class so that you can *import* it into the application that you - just created. - - Edit the file `app/app.module.ts` to import your new `AppComponent` and add it in the - declarations and bootstrap fields in the `NgModule` decorator: - - +makeExample('app/app.module.ts') - -.l-main-section -h2#main Step !{step++}: Start up your application - -block create-main - :marked - Now you need to tell Angular to start up your application. - - Create the file `app/main.ts` with the following content: - -+makeExample('app/main.ts') - - -- var _pBD_bootstrapModule = _docsFor == 'dart' ? _bootstrapModule : 'platformBrowserDynamic().bootstrapModule' - -:marked - This code initializes the platform that your application runs in, then uses the platform to - bootstrap your `!{_AppModuleVsAppComp}`. - - ### Why create separate *main.ts*, app module and app component files? - - App bootstrapping is a separate concern from creating a module or - presenting a view. Testing the component is much easier if it doesn't also try to run the entire application. - - -.callout.is-helpful - header Bootstrapping is platform-specific - - :marked - Because the QuickStart application runs directly in the browser, `main.ts` imports the - `!{_platformBrowserDynamicVsBootStrap}` function from `#{_angular_browser_uri}`, not - `#{_angular_core_uri}`. On a mobile device, you might load a !{_moduleVsComp} with - [Apache Cordova](https://cordova.apache.org/) or - [NativeScript](https://www.nativescript.org/), using a bootstrap function that's specific - to that platform. - -.l-main-section -h2#index Step !{step++}: Define the web page that hosts the application -:marked - In the *#{_indexHtmlDir}* folder, - create an `index.html` file and paste the following lines into it: - -+makeExample('index.html') - - -block commentary-on-index-html - :marked - The noteworthy sections here are: - - * JavaScript libraries: `core-js` polyfills for older browsers, the `zone.js` and - `reflect-metadata` libraries needed by Angular, and the `SystemJS` library for module loading. - * Configuration file for `SystemJS`, and a script - where you import and run the `app` module which refers to the `main` file that you just - wrote. - * The `` tag in the `` which is *where your app lives!* - - -:marked - ### Add some style - - Styles aren't essential, but they're nice, and `index.html` assumes that you have - a stylesheet called `styles.css`. - - Create a `styles.css` file in the *#{_indexHtmlDir}* folder, and start styling, - perhaps with the minimal styles shown below. - -+makeExcerpt('styles.css (excerpt)', 'quickstart') - -.callout.is-helpful - :marked - For the full set of master styles used by the documentation samples, - see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css). - -.l-main-section#build-and-run -h2 Step !{step++}: Build and run the application -block run-app - :marked - Open a terminal window and enter this command: - code-example.code-shell. - npm start - aside.is-right +.l-sub-section :marked - [Read more](https://github.com/angular/quickstart/blob/master/README.md#npm-scripts) about - other useful npm scripts included in this example's `package.json`. + ### Next step - :marked - That command runs the following two parallel node processes: - * The TypeScript compiler in watch mode. - * A static file server called _lite-server_ that loads `index.html` in a browser - and refreshes the browser when application files change. + To learn how to write a real application, your next step is to set up a local development + environment and begin exploring with code. The [**Developer Guide**](guide/index.html) + shows you how. - In a few moments, a browser tab should open and display the following: - -figure.image-display - img(src='/resources/images/devguide/quickstart/hello-angular.png' alt="Output of QuickStart app") - - -block build-app - //- Nothing for ts. - -.l-main-section#make-changes -h2 Step !{step++}: Make some live changes -:marked - Try changing the message in app/app.component.ts to "Hello Again Angular!". - -block server-watching - :marked - The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript, - refresh the browser, and display your revised message. - - Close the terminal window when you're done to terminate both the compiler and the server. - -.l-main-section -h2#wrap-up Wrap up and next steps -:marked - The final project folder structure looks like this: -block project-file-structure - .filetree - .file angular-quickstart - .children - .file app - .children - .file app.component.ts - .file app.module.ts - .file main.ts - .file node_modules ... - .file index.html - .file package.json - .file styles.css - .file systemjs.config.js - .file tsconfig.json -:marked - To see the file contents, open the . - -.l-main-section -:marked - ## What next? - This first application doesn't do much. It's basically "Hello, World" for Angular. - - You wrote a little Angular component, created a simple `index.html`, and launched with a - static file server. - -+ifDocsFor('ts') - :marked - You also created the basic application setup that you'll re-use for other - sections in this guide. From here, the changes you'll make in the - `package.json` or `index.html` files are only minor updates to add libraries or some css - stylesheets. You also won't need to revisit module loading again. -:marked - To take the next step and build a small application that demonstrates real features that you can - build with Angular, carry on to the [Tour of Heroes tutorial](./tutorial)! diff --git a/public/docs/ts/_cache/tutorial/index.jade b/public/docs/ts/_cache/tutorial/index.jade index dae359159d..cb392d9aa5 100644 --- a/public/docs/ts/_cache/tutorial/index.jade +++ b/public/docs/ts/_cache/tutorial/index.jade @@ -79,5 +79,3 @@ figure.image-display met in countless applications. Everything has a reason. And we’ll meet many of the core fundamentals of Angular along the way. - - [Let's get started!](./toh-pt1.html) diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade index c959e29a85..492e15e672 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt5.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade @@ -3,7 +3,6 @@ block includes include ../_util-fns - var _appRoutingTsVsAppComp = 'app.module.ts' - - var _declsVsDirectives = 'declarations' - var _RoutesVsAtRouteConfig = 'Routes' - var _RouterModuleVsRouterDirectives = 'RouterModule' - var _redirectTo = 'redirectTo' @@ -511,10 +510,16 @@ block route-params +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor') ++ifDocsFor('ts') + :marked + 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. -+makeExcerpt('app/hero-detail.component.ts', 'implement', '')(format=".") ++makeExcerpt('app/hero-detail.component.ts', 'implement', '') block ngOnInit :marked @@ -526,14 +531,27 @@ 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}. ++ifDocsFor('ts') + .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 +672,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_ @@ -676,7 +694,7 @@ block extract-id null, `app/app.module.ts (after), app/app.module.ts (before)`) :marked - It's simpler and focused on indentifying the key pieces of the application. + It's simpler and focused on identifying the key pieces of the application. .l-main-section :marked @@ -870,9 +888,7 @@ block css-files We can also create styles at the *application level* outside of any component. Our designers provided some basic styles to apply to elements across the entire app. - These correspond to the full set of master styles that we - introduced earlier (see - [QuickStart, "Add some style"](../quickstart.html#add-some-style)). + These correspond to the full set of master styles that we installed earlier during [setup](../guide/setup.html). Here is an excerpt: +makeExcerpt('styles.css (excerpt)', 'toh') diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade index 68efb0cdb5..784fc08db6 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt6.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade @@ -618,3 +618,10 @@ block file-summary hero-search.component.css, rxjs-extensions.ts` ) + +.l-sub-section + :marked + ### Next Step + + Return to the [learning path](../guide/learning-angular.html#architecture) where + you can read about the concepts and practices you discovered in this tutorial. diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json index 8a8e2198fd..32df2a3c03 100644 --- a/public/docs/ts/latest/_data.json +++ b/public/docs/ts/latest/_data.json @@ -19,8 +19,7 @@ "icon": "query-builder", "title": "快速起步", "subtitle": "TypeScript", - "description": "Angular快速起步", - "banner": "本“快速起步”指南将演示如何用TypeScript构建并运行简单的Angular应用。" + "banner": "快速体验 Angular" }, "tutorial": { diff --git a/public/docs/ts/latest/cli-quickstart.jade b/public/docs/ts/latest/cli-quickstart.jade index d01a720d2f..90f33e179d 100644 --- a/public/docs/ts/latest/cli-quickstart.jade +++ b/public/docs/ts/latest/cli-quickstart.jade @@ -1,33 +1,34 @@ include _util-fns - + :marked Good tools make application development quicker and easier to maintain than if we did everything by hand. - + The [**Angular-CLI**](https://cli.angular.io/) is a **_command line interface_** tool that can create a project, add files, and perform a variety of on-going development tasks such as testing, bundling, and deployment. - + Our goal in this CLI QuickStart chapter is to build and run a super-simple Angular application in TypeScript, using Angular-CLI while adhering to the [Style Guide](./guide/style-guide.html) recommendations that benefit _every_ Angular project. - + By the end of the chapter, we'll have a basic understanding of development with the CLI and a foundation for both these documentation samples and our real world applications. We'll pursue these ends in the following high-level steps: - + 1. [Set up](#devenv) the development environment 2. [Create](#create-proj) a new project and skeleton application 3. [Serve](#serve) the application 4. [Edit](#first-component) the application + .l-main-section h2#devenv Step 1. Set up the Development Environment :marked We need to set up our development environment before we can do anything. - + Install **[Node.js® and npm](https://nodejs.org/en/download/)** if they are not already on your machine. .l-sub-section @@ -37,15 +38,15 @@ h2#devenv Step 1. Set up the Development Environment Older versions produce errors. :marked Then **install the [Angular-CLI](https://github.com/angular/angular-cli)** globally. - + code-example(format=""). npm install -g angular-cli - + .l-main-section h2#create-project Step 2. Create a new project :marked Open a terminal window. - + .alert.is-important :marked _Windows Developers_: open a console window _as an **administrator**_. @@ -75,9 +76,9 @@ code-example(format=""). :marked The `ng serve` command launches the server, watches our files, and rebuilds the app as we make changes to the files. - + Open a browser on `http://localhost:4200/`; the app greets us with a message: - + figure.image-display img(src='/resources/images/devguide/cli-quickstart/app-works.png' alt="Our app works!") @@ -96,19 +97,19 @@ h2#first-component Step 4: Edit our first Angular component :marked Open the component file and change the `title` property from _cli-quickstart works!_ to _My First Angular App_: - + +makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.ts', 'title', 'src/app/cli-quickstart.component.ts')(format=".") :marked The browser reloads automatically and we see the revised title. That's nice, but we can make it look better. - + Open `src/app/cli-quickstart.component.css` and give our component some style +makeExample('cli-quickstart/ts/src/app/cli-quickstart.component.css', null, 'src/app/cli-quickstart.component.css')(format=".") figure.image-display img(src='/resources/images/devguide/cli-quickstart/hello-angular.png' alt="Output of QuickStart app") - + :marked Looking good! @@ -177,7 +178,7 @@ h3#component-decorator @Component decorator :marked This particular metadata object has four fields, a `moduleId`, a `selector` a `templateUrl` and an array of `styleUrls`. - + The **moduleId** specifies the location of _this_ component definition file so that Angular can find the corresponding _template_ and _style_ files with URLs that are relative to this component file. @@ -193,14 +194,14 @@ h3#component-decorator @Component decorator The **templateUrl** locates the component's companion template HTML file. The template tells Angular how to render this component's view. - + Our template is a single `

    ` element surrounding some peculiar Angular data binding syntax. +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). The CLI generated an empty file for us and we added styles to it. @@ -216,10 +217,10 @@ h3#component-decorator @Component decorator :marked ### The *main.ts* file - + How does Angular know what to do with our component? We have to tell it. We _bootstrap_ our application in the file `main.ts`. - + +makeExcerpt('src/main.ts', 'important') :marked @@ -257,17 +258,17 @@ h3#component-decorator @Component decorator We might launch the `CliQuickstartAppComponent` in multiple environments with different bootstrappers. Testing the component is much easier if it doesn't also try to run the entire application. Let's make the small extra effort to do it *the right way*. - + ### Loading the application with SystemJS - + The CLI uses `System.js` to load the application. We just need to call `System.import` and pass it our `main.ts` file to boot our application. - + +makeExcerpt('src/index.html', 'import') :marked ### Displaying the root component - + When Angular calls the `bootstrap` function in `main.ts`, it reads the `CliQuickstartAppComponent` metadata, finds the `cli-quickstart-app` selector, locates an element tag named `cli-quickstart-app` in the `` tag of the `index.html`, and renders our application's view between those tags. diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 740392dea0..f25d441faa 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -2,7 +2,7 @@ "index": { "title": "烹饪宝典", "navTitle": "概览", - "description": "一组常见Angular应用场景的“烹饪宝典”" + "intro": "一组常见Angular应用场景的“烹饪宝典”" }, "aot-compiler": { @@ -57,8 +57,8 @@ }, "ts-to-js": { - "title": "从TypeScript到JavaScript", - "intro": "把Angular的TypeScript范例转换为ES6和ES5 JavaScript" + "title": "从 TypeScript 到 JavaScript", + "intro": "把 Angular 的 TypeScript 范例转换为 ES6 和 ES5 JavaScript" }, "visual-studio-2015": { 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 ed786016ad..0b3c518ca1 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade @@ -233,9 +233,9 @@ table(width="100%") Angular 2没有引导指令。 我们总是通过显式调用一个`bootstrap`函数,并传入应用模块的名字(`AppComponent`)来启动应用。 - For more information see [Quick Start](../quickstart.html). + For more information see the [Setup](../guide/setup.html) page. - 要了解更多,参见[“快速起步”](../quickstart.html)。 + 要了解更多,参见[搭建](../guide/setup.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 2213e3ba80..66aa619fc5 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -56,7 +56,7 @@ a#overview 这是本文档中展示过的标准开发方式。 它很不错,但是有自己的缺点。 - JiT compilation incurs a runtime performance penalty. + JiT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won't actually need. @@ -98,7 +98,7 @@ a#aot-jit **渲染得更快** - With AoT, the browser downloads a pre-compiled version of the application. + With AoT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first. 使用AoT,浏览器下载预编译版本的应用程序。 @@ -118,7 +118,7 @@ a#aot-jit **需要下载的Angular框架体积更小** - There's no need to download the Angular compiler if the app is already compiled. + There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload. 如果应用已经编译过了,自然不需要再下载Angular编译器了。 @@ -155,10 +155,10 @@ a#compile ### 为离线编译做准备 - 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: - 本烹饪书以“快速起步”作为起始点。 + 本烹饪书以搭建作为起始点。 只要单独对`app.component`文件的类文件和html文件做少量修改就可以了。 +makeTabs( @@ -182,7 +182,7 @@ code-example(format='.'). 你要用`@angular/compiler-cli`包中提供的`ngc`编译器来代替TypeScript编译器(`tsc`)。 - `ngc` is a drop-in replacement for `tsc` and is configured much the same way. + `ngc` is a drop-in replacement for `tsc` and is configured much the same way. `ngc`是一个`tsc`的高仿替代品,它们的配置方式几乎完全一样。 @@ -202,14 +202,14 @@ code-example(format='.'). `compilerOptions`部分只修改了一个属性:**把`module`设置为`es2015`。 这一点非常重要,我们会在后面的[摇树优化](#tree-shaking)部分解释为什么。 - What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. + What's really new is the `ngc` section at the bottom called `angularCompilerOptions`. Its `"genDir"` property tells the compiler to store the compiled output files in a new `aot` folder. `ngc`区真正新增的内容是底部的`angularCompilerOptions`。 它的`"genDir"`属性告诉编译器把编译结果保存在新的`aot`目录下。 - The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application. + The `"skipMetadataEmit" : true` property prevents the compiler from generating metadata files with the compiled application. Metadata files are not necessary when targeting TypeScript files, so there is no reason to include them. `"skipMetadataEmit" : true`属性阻止编译器为编译后的应用生成元数据文件。 @@ -237,11 +237,11 @@ code-example(format='.'). `ngc`希望`-p`选项指向一个`tsconfig.json`文件,或者一个包含`tsconfig.json`文件的目录。 - After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`). + After `ngc` completes, look for a collection of _NgFactory_ files in the `aot` folder (the folder specified as `genDir` in `tsconfig-aot.json`). 在`ngc`完成时,会在`aot`目录下看到一组*NgFactory*文件(该目录是在`tsconfig-aot.json`的`genDir`属性中指定的)。 - These factory files are essential to the compiled application. + These factory files are essential to the compiled application. Each component factory creates an instance of the component at runtime by combining the original class file and a JavaScript representation of the component's template. Note that the original component class is still referenced internally by the generated factory. @@ -284,7 +284,7 @@ a#bootstrap 引导的方式从引导`AppModule`改成了引导生成的模块工厂:`AppModuleNgFactory`。 - Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to + Switch from the `platformBrowserDynamic.bootstrap` used in JiT compilation to `platformBrowser().bootstrapModuleFactory` and pass in the `AppModuleNgFactory`. 从使用JiT编译时的`platformBrowserDynamic.bootstrap`换成了`platformBrowser().bootstrapModuleFactory`,并把`AppModuleNgFactory`传进去。 @@ -318,7 +318,7 @@ a#tree-shaking AoT编译为接下来通过一个叫做*摇树优化*的过程做好了准备。 摇树优化器从上到下遍历依赖图谱,并且*摇掉*用不到的代码,这些代码就像是圣诞树中那些死掉的松针一样。 - Tree Shaking can greatly reduce the downloaded size of the application + Tree Shaking can greatly reduce the downloaded size of the application by removing unused portions of both source and library code. In fact, most of the reduction in small apps comes from removing unreferenced Angular features. @@ -330,7 +330,7 @@ a#tree-shaking 例如,这个演示程序中没有用到`@angular/forms`库中的任何东西,那么也就没有理由去下载这些与表单有关的Angular代码了。摇树优化可以帮你确保这一点。 - Tree Shaking and AoT compilation are separate steps. + Tree Shaking and AoT compilation are separate steps. Tree Shaking can only target JavaScript code. AoT compilation converts more of the application to JavaScript, which in turn makes more of the application "Tree Shakable". @@ -414,14 +414,14 @@ code-example(format='.'). 可观察对象库*RxJS*是Angular所依赖的基础之一,它就是发布成了ES5 JavaScript的*CommonJS*模块。 - Luckily there is a Rollup plugin that modifies _RxJs_ + Luckily there is a Rollup plugin that modifies _RxJs_ to use the ES `import` and `export` statements that Rollup requires. Rollup then preserves in the final bundle the parts of `RxJS` referenced by the application. 幸运的是,有一个Rollup插件,它会修改*RxJS*,以使用Rollup所需的ES`import`和`export`语句。 然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。 -+makeExample('cb-aot-compiler/ts/rollup-config.js','commonjs','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.') ++makeExample('cb-aot-compiler/ts/rollup-config.js','commonjs','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.') :marked *Minification* @@ -475,7 +475,7 @@ a#load ## 加载捆文件 - Loading the generated application bundle does not require a module loader like SystemJS. + Loading the generated application bundle does not require a module loader like SystemJS. Remove the scripts that concern SystemJS. Instead, load the bundle file using a single `script` tag: @@ -483,7 +483,7 @@ a#load 移除与SystemJS有关的那些脚本吧。 改用`script`标签来加载这些捆文件: -+makeExample('cb-aot-compiler/ts/index.html','bundle','index.html (load bundle)')(format='.') ++makeExample('cb-aot-compiler/ts/index.html','bundle','index.html (load bundle)')(format='.') a#serve .l-main-section @@ -538,7 +538,7 @@ a#toh ## 英雄指南 - The sample above is a trivial variation of the QuickStart app. + The sample above is a trivial variation of the QuickStart app. In this section you apply what you've learned about AoT compilation and Tree Shaking to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html). @@ -591,19 +591,13 @@ a#toh 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` - AoT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。它不需要`SystemJS`和`reflect-metadata`垫片,所以它们不会出现在`index.html`中。 - - ***main.ts*** - ***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: - JiT和AoT应用启动非常相似,但需要加载不同的Angular库来实现。 - 主要的差异,见上面的[启动](#bootstrap)一节, - 可以在那些`main`文件中明显看出区别,它们可以也应该位于同一目录。 + AoT版本用一个单独的脚本来加载整个应用 - `aot/dist/build.js`。它不需要`SystemJS`和`reflect-metadata`垫片,所以它们不会出现在`index.html`中。 +makeTabs( `toh-6/ts/app/main-aot.ts, @@ -616,14 +610,12 @@ a#toh :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. For example, a `'hero.component.html'` URL means that the template file is a sibling of its companion `hero.component.ts` file. AoT编译器要求`@Component`外部模板和CSS文件的路径是相对组件的。 - 意思是,`@Component.templateUrl`的值是一个相对组件类文件`foo.component.html`的路径,不管`foo.component.ts`在项目的哪个目录。 + 意思是,`@Component.templateUrl`的值是*相对*组件类文件的路径,比如`'hero.component.html'`路径的意思是模板文件在`hero.component.ts`文件的隔壁。 While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation. @@ -769,7 +761,7 @@ code-example(format='.'). ### 检查包裹 - It's fascinating to see what the generated JavaScript bundle looks like after Rollup. + It's fascinating to see what the generated JavaScript bundle looks like after Rollup. The code is minified, so you won't learn much from inspecting the bundle directly. But the source-map-explorer tool can be quite revealing. diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade index c2c77f74d6..3f0914303e 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form.jade +++ b/public/docs/ts/latest/cookbook/dynamic-form.jade @@ -2,80 +2,80 @@ include ../_util-fns :marked We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements. - + 有时候手动编写和维护表单所需工作量和时间会过大。特别是在需要编写大量表单时。表单都很相似,而且随着业务和监管需求的迅速变化,表单也要随之变化,这样维护的成本过高。 It may be more economical to create the forms dynamically, based on metadata that describe the business object model. 基于业务对象模型的元数据,动态创建表单可能会更划算。 - + In this cookbook we show how to use `formGroup` to dynamically render a simple form with different control types and validation. It's a primitive start. It might evolve to support a much richer variety of questions, more graceful rendering, and superior user experience. All such greatness has humble beginnings. - + 在此烹饪宝典中,我们会展示如何利用`formGroup`来动态渲染一个简单的表单,包括各种控件类型和验证规则。 这个起点很简陋,但可以在这个基础上添加丰富多彩的问卷问题、更优美的渲染以及更卓越的用户体验。 - + In our example we use a dynamic form to build an online application experience for heroes seeking employment. The agency is constantly tinkering with the application process. We can create the forms on the fly *without changing our application code*. 在本例中,我们使用动态表单,为正在找工作的英雄们创建一个在线申请表。英雄管理局会不断修改申请流程,我们要在*不修改应用代码*的情况下,动态创建这些表单。 - + :marked ## Table of contents - - ## 目录 + + ## 目录 [Bootstrap](#bootstrap) - + [程序启动](#bootstrap) [Question Model](#object-model) - + [问卷问题模型](#object-model) - + [Form Component](#form-component) - + [表单组件](#form-component) [Questionnaire Metadata](#questionnaire-metadata) [问卷元数据](#questionnaire-metadata) - + [Dynamic Template](#dynamic-template) - + [动态模板](#dynamic-template) :marked **See the **. - + **参见在线例子**。 - + .l-main-section :marked ## Bootstrap - + ## 程序启动 We start by creating an `NgModule` called `AppModule`. - + 让我们从创建一个名叫`AppModule`的`NgModule`开始。 In our example we will be using Reactive Forms. 在本例子中,我们将使用响应式表单(Reactive Forms)。 - - Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from `AppModule`. - - 响应式表单属于另外一个叫做`ReactiveFormsModule`的`NgModule`,所以,为了使用响应式表单类的指令,我们得往`AppModule`中引入`ReactiveFormsModule`模块。 + + Reactive Forms belongs to a different `NgModule` called `ReactiveFormsModule`, so in order to access any Reactive Forms directives, we have to import `ReactiveFormsModule` from the `@angular/forms` library. + + 响应式表单属于另外一个叫做`ReactiveFormsModule`的`NgModule`,所以,为了使用响应式表单类的指令,我们得往`@angular/forms`库中引入`ReactiveFormsModule`模块。 We bootstrap our `AppModule` in main.ts. - + 我们在main.ts中启动`AppModule`。 +makeTabs( @@ -90,17 +90,17 @@ include ../_util-fns :marked ## Question Model - + ## 问卷问题模型 - + The next step is to define an object model that can describe all scenarios needed by the form functionality. The hero application process involves a form with a lot of questions. The "question" is the most fundamental object in the model. - + 第一步是定义一个对象模型,用来描述所有表单功能需要的场景。英雄的申请流程涉及到一个包含很多问卷问题的表单。问卷问题是最基础的对象模型。 We have created `QuestionBase` as the most fundamental question class. - + 下面是我们建立的最基础的问卷问题基类,名叫`QuestionBase`。 +makeExample('cb-dynamic-form/ts/app/question-base.ts','','app/question-base.ts') @@ -110,9 +110,9 @@ include ../_util-fns The idea is that the form will be bound to specific question types and render the appropriate controls dynamically. 在这个基础上,我们派生出两个新类`TextboxQuestion` 和 `DropdownQuestion`,分别代表文本框和下拉框。这么做的初衷是,表单能动态绑定到特定的问卷问题类型,并动态渲染出合适的控件。 - + `TextboxQuestion` supports multiple html5 types like text, email, url etc via the `type` property. - + `TextboxQuestion`可以通过`type`属性来支持多种HTML5元素类型,比如文本、邮件、网址等。 +makeExample('cb-dynamic-form/ts/app/question-textbox.ts',null,'app/question-textbox.ts')(format='.') @@ -121,34 +121,34 @@ include ../_util-fns `DropdownQuestion` presents a list of choices in a select box. `DropdownQuestion`表示一个带可选项列表的选择框。 - + +makeExample('cb-dynamic-form/ts/app/question-dropdown.ts',null,'app/question-dropdown.ts')(format='.') :marked Next we have defined `QuestionControlService`, a simple service for transforming our questions to a `FormGroup`. In a nutshell, the form group consumes the metadata from the question model and allows us to specify default values and validation rules. - + 接下来,我们定义了`QuestionControlService`,一个可以把问卷问题转换为`FormGroup`的服务。 简而言之,这个`FormGroup`使用问卷模型的元数据,并允许我们设置默认值和验证规则。 - + +makeExample('cb-dynamic-form/ts/app/question-control.service.ts',null,'app/question-control.service.ts')(format='.') :marked ## Question form components - + ## 问卷表单组件 - + Now that we have defined the complete model we are ready to create components to represent the dynamic form. - + 现在我们已经有一个定义好的完整模型了,接着就可以开始创建一个展现动态表单的组件。 :marked `DynamicFormComponent` is the entry point and the main container for the form. - - `DynamicFormComponent`是表单的主要容器和入口点。 - + + `DynamicFormComponent`是表单的主要容器和入口点。 + +makeTabs( `cb-dynamic-form/ts/app/dynamic-form.component.html, cb-dynamic-form/ts/app/dynamic-form.component.ts`, @@ -160,10 +160,10 @@ include ../_util-fns It presents a list of questions, each question bound to a `` component element. The `` tag matches the `DynamicFormQuestionComponent`, the component responsible for rendering the details of each _individual_ question based on values in the data-bound question object. - + 它代表了问卷问题列表,每个问题都被绑定到一个``组件元素。 ``标签匹配到的是组件`DynamicFormQuestionComponent`,该组件的职责是根据各个问卷问题对象的值来动态渲染表单控件。 - + +makeTabs( `cb-dynamic-form/ts/app/dynamic-form-question.component.html, cb-dynamic-form/ts/app/dynamic-form-question.component.ts`, @@ -177,63 +177,63 @@ include ../_util-fns The `ngSwitch` determines which type of question to display. 请注意,这个组件能代表模型里的任何问题类型。目前,还只有两种问题类型,但可以添加更多类型。可以用`ngSwitch`决定显示哪种类型的问题。 - + In both components we're relying on Angular's **formGroup** to connect the template HTML to the underlying control objects, populated from the question model with display and validation rules. - + 在这两个组件中,我们依赖Angular的**formGroup**来把模板HTML和底层控件对象连接起来,该对象从问卷问题模型里获取渲染和验证规则。 `formControlName` and `formGroup` are directives defined in `ReactiveFormsModule`. Our templates can can access these directives directly since we imported `ReactiveFormsModule` from `AppModule`. - + `formControlName`和`formGroup`是在`ReactiveFormsModule`中定义的指令。我们之所以能在模板中使用它们,是因为我们往`AppModule`中导入了`ReactiveFormsModule`。 :marked ## Questionnaire data ## 问卷数据 - + :marked `DynamicFormComponent` expects the list of questions in the form of an array bound to `@Input() questions`. `DynamicForm`期望得到一个问题列表,该列表被绑定到`@Input() questions`属性。 - - The set of questions we have defined for the job application is returned from the `QuestionService`. + + The set of questions we have defined for the job application is returned from the `QuestionService`. In a real app we'd retrieve these questions from storage. `QuestionService`会返回为工作申请表定义的那组问题列表。在真实的应用程序环境中,我们会从数据库里获得这些问题列表。 - - The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`. + + The key point is that we control the hero job application questions entirely through the objects returned from `QuestionService`. Questionnaire maintenance is a simple matter of adding, updating, and removing objects from the `questions` array. 关键是,我们完全根据`QuestionService`返回的对象来控制英雄的工作申请表。 要维护这份问卷,只要非常简单的添加、更新和删除`questions`数组中的对象就可以了。 - -+makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts') + ++makeExample('cb-dynamic-form/ts/app/question.service.ts','','app/question.service.ts') :marked Finally, we display an instance of the form in the `AppComponent` shell. 最后,在`AppComponent`里显示出表单。 - + +makeExample('cb-dynamic-form/ts/app/app.component.ts','','app.component.ts') :marked ## Dynamic Template - + ## 动态模板 - - Although in this example we're modelling a job application for heroes, there are no references to any specific hero question + + Although in this example we're modelling a job application for heroes, there are no references to any specific hero question outside the objects returned by `QuestionService`. 在这个例子中,虽然我们是在为英雄的工作申请表建模,但是除了`QuestionService`返回的那些对象外,没有其它任何地方是与英雄有关的。 - + This is very important since it allows us to repurpose the components for any type of survey as long as it's compatible with our *question* object model. The key is the dynamic data binding of metadata used to render the form without making any hardcoded assumptions about specific questions. In addition to control metadata, we are also adding validation dynamically. - + 这点非常重要,因为只要与*问卷*对象模型兼容,就可以在任何类型的调查问卷中复用这些组件。 这里的关键是用到元数据的动态数据绑定来渲染表单,对问卷问题没有任何硬性的假设。除控件的元数据外,还可以动态添加验证规则。 @@ -241,21 +241,21 @@ include ../_util-fns When the form is valid, we can click *Save* and the app renders the current form values as JSON. This proves that any user input is bound back to the data model. Saving and retrieving the data is an exercise for another time. - + 表单验证通过之前,*保存*按钮是禁用的。验证通过后,就可以点击*保存*按钮,程序会把当前值渲染成JSON显示出来。 这表明任何用户输入都被传到了数据模型里。至于如何储存和提取数据则是另一话题了。 :marked The final form looks like this: - + 完整的表单看起来是这样的: - + figure.image-display img(src="/resources/images/cookbooks/dynamic-form/dynamic-form.png" alt="Dynamic-Form") :marked [Back to top](#top) - + [回到顶部](#top) diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 366f9b2af5..b96103ea41 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -28,20 +28,22 @@ block includes .l-main-section#A -+ifDocsFor('ts') - a#aot +a#aot +:marked + ## Ahead-of-Time (AoT) compilation + + ## 预(ahead-of-time, AoT)编译 + +.l-sub-section :marked - ## Ahead-of-time (AoT) compilation - ## 预(ahead-of-time, AoT)编译 - .l-sub-section - :marked - You can compile Angular applications at build-time. - By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly - to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle. - Ahead-of-time compiled applications also benefit from decreased load time and increased performance. + You can compile Angular applications at build-time. + By compiling your application using the compiler-cli, `ngc`, you can bootstrap directly + to a module factory, meaning you don't need to include the Angular compiler in your JavaScript bundle. + Ahead-of-time compiled applications also benefit from decreased load time and increased performance. - 开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序,应用可以从一个模块工厂(Module Factory)直接启动,意思是不再需要把Angular编译器添加到JavaScript包中。预编译的应用程序将加载迅速,并具有更高的性能。 + 开发者可以在构造时(build-time)编译Angular应用程序。通过`Compiler-cli` - `ngc`编译应用程序,应用可以从一个模块工厂(Module Factory)直接启动,意思是不再需要把Angular编译器添加到JavaScript包中。预编译的应用程序将加载迅速,并具有更高的性能。 ++ifDocsFor('ts') :marked ## Angular module @@ -145,12 +147,6 @@ block includes Angular的每个[范围化包(Scoped Package)](#scoped-package)都有一个叫做`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. @@ -180,9 +176,11 @@ 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) page. - 通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component),并可能通过[依赖注入体系(Dependency Injection System)](#dependency-injection)注册服务的[提供商(Provider)](#provider)。要了解详情,参见[快速起步](!{docsLatest}/quickstart.html)。 + 通过一个名叫`bootstrap`的方法来引导Angular应用程序。这个`bootstrap`方法会识别应用程序的顶级“根”[组件(Component)](#component),也就是应用加载的第一个组件。 + 要了解详情,参见[搭建](!{docsLatest}/setup.html)页。 :marked You can bootstrap multiple apps in the same `index.html`, each with its own top level root. @@ -588,14 +586,15 @@ a#H .l-main-section#J -+ifDocsFor('ts') - a#jit - :marked - ## Just-in-time (JiT) compilation - ## 即时(just-in-time, JiT)编译 - .l-sub-section +a#jit +:marked + ## Just-in-Time (JiT) compilation + + ## 即时(just-in-time, JiT)编译 + +.l-sub-section :marked - With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser + With Angular _just-in-time_ bootstrapping you compile your components and modules in the browser and launch the application dynamically. This is a good choice during development. Consider using the [ahead-of-time](#aot) mode for production apps. @@ -908,15 +907,12 @@ a#Q ## Routing component ## 路由组件(Routing Component) .l-sub-section - block routing-component-defn - :marked - An Angular [component](#component) with a RouterOutlet that displays views based on router navigations. + :marked + An Angular [component](#component) with a `RouterOutlet` that displays views based on router navigations. - 带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。 + 带有RouterOutlet的Angular[组件](#component)基于路由器导航来显示视图。For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. - For more information, see the [Routing & Navigation](!{docsLatest}/guide/router.html) page. - - 要了解更多,请参见[路由与导航](!{docsLatest}/guide/router.html)页。 + 要了解更多,请参见[路由与导航](!{docsLatest}/guide/router.html)页。 .l-main-section#S @@ -1082,7 +1078,7 @@ a#snake-case ## TypeScript .l-sub-section :marked - A version of JavaScript that supports most [ECMAScript 2015](#ecmascript=2015) + A version of JavaScript that supports most [ECMAScript 2015](#es2015) language features such as [decorators](#decorator). 一种支持了几乎所有[ECMAScript 2015](#ecmascript=2015)语言特性和一些未来版本可能有的特性(比如[装饰器(Decorator)](#decorator))的JavaScript语言。 diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index d7a6cdbdc7..403dfab2af 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -2,11 +2,29 @@ "index": { "title": "文档概览", "navTitle": "概览", - "description": "如何阅读本文档", + "intro": "如何阅读本文档", "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": "架构概览", "navTitle": "架构", @@ -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": "显示数据", "intro": "属性绑定机制把数据显示到UI上。", @@ -136,6 +163,11 @@ "intro": "开发“内容安全”的Angular应用。" }, + "setup-systemjs-anatomy": { + "title": "Setup Anatomy", + "intro": "Inside the local development environment for SystemJS" + }, + "structural-directives": { "title": "结构型指令", "intro": "Angular有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。" diff --git a/public/docs/ts/latest/guide/appmodule.jade b/public/docs/ts/latest/guide/appmodule.jade new file mode 100644 index 0000000000..8c5ed25973 --- /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: //