From b82e229adeaf3facc654541fc2afefa068f8a306 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Thu, 12 Nov 2015 15:19:26 -0800 Subject: [PATCH] (docs) displaying-data: use npm, not cdn (oops) and upgraded to alpha46 Also no line numbers for single-line examples. --- .../docs/_examples/displaying-data/ts/package.json | 2 +- .../_examples/displaying-data/ts/src/index.html | 13 +++++-------- public/docs/ts/latest/guide/displaying-data.jade | 12 ++++++------ 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/public/docs/_examples/displaying-data/ts/package.json b/public/docs/_examples/displaying-data/ts/package.json index dd26082d7d..d82952aa81 100644 --- a/public/docs/_examples/displaying-data/ts/package.json +++ b/public/docs/_examples/displaying-data/ts/package.json @@ -11,7 +11,7 @@ "author": "", "license": "ISC", "dependencies": { - "angular2": "2.0.0-alpha.44", + "angular2": "2.0.0-alpha.46", "systemjs": "0.19.2" }, "devDependencies": { diff --git a/public/docs/_examples/displaying-data/ts/src/index.html b/public/docs/_examples/displaying-data/ts/src/index.html index 5209ce465a..8323a99413 100644 --- a/public/docs/_examples/displaying-data/ts/src/index.html +++ b/public/docs/_examples/displaying-data/ts/src/index.html @@ -2,17 +2,14 @@ - Getting Started - - - + Displaying Data + + diff --git a/public/docs/ts/latest/guide/displaying-data.jade b/public/docs/ts/latest/guide/displaying-data.jade index 3cc02d20c1..b2f4a2f624 100644 --- a/public/docs/ts/latest/guide/displaying-data.jade +++ b/public/docs/ts/latest/guide/displaying-data.jade @@ -184,7 +184,7 @@ figure.image-display advantage of a TypeScript short-cut in our declaration of the constructor parameters. Consider the first parameter: -+makeExample('displaying-data/ts/src/app/hero.ts', 'id-parameter') ++makeExample('displaying-data/ts/src/app/hero.ts', 'id-parameter')(format=".") :marked That brief syntax simultaneously @@ -218,7 +218,7 @@ figure.image-display The Angular `NgIf` directive will insert or remove an element based on a truthy/falsey condition. We can see it in action by adding the following paragraph at the bottom of the template: -+makeExample('displaying-data/ts/src/app/app.final.ts', 'message') ++makeExample('displaying-data/ts/src/app/app.final.ts', 'message')(format=".") .alert.is-important :marked Don't forget the leading asterisk (\*) in front of `*ng-if`. It is an essential part of the syntax. @@ -240,11 +240,11 @@ figure.image-display As with the `NgFor`, we must add the `NgIf` directive to the component's metadata. We should extend our `import` statement as before ... -+makeExample('displaying-data/ts/src/app/app.3.ts', 'import-ng-if') ++makeExample('displaying-data/ts/src/app/app.3.ts', 'import-ng-if')(format=".") :marked ... and add it to the directives array: -+makeExample('displaying-data/ts/src/app/app.3.ts', 'directives') ++makeExample('displaying-data/ts/src/app/app.3.ts', 'directives')(format=".") :marked Try it out. We have four items in the array so the message should appear. @@ -264,11 +264,11 @@ figure.image-display Let's simplify our lives, discard the `NgFor` and `NgIf`, use the constant for all of them. We'll revise our `import` statement one last time. -+makeExample('displaying-data/ts/src/app/app.final.ts', 'imports') ++makeExample('displaying-data/ts/src/app/app.final.ts', 'imports')(format=".") :marked and update the `directives` metadata -+makeExample('displaying-data/ts/src/app/app.final.ts', 'directives') ++makeExample('displaying-data/ts/src/app/app.final.ts', 'directives')(format=".") :marked Pro tip: we register this constant in almost every template we write.