(docs) displaying-data: use npm, not cdn (oops) and upgraded to alpha46

Also no line numbers for single-line examples.
This commit is contained in:
Ward Bell 2015-11-12 15:19:26 -08:00
parent 175a5e4d87
commit b82e229ade
3 changed files with 12 additions and 15 deletions

View File

@ -11,7 +11,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"angular2": "2.0.0-alpha.44", "angular2": "2.0.0-alpha.46",
"systemjs": "0.19.2" "systemjs": "0.19.2"
}, },
"devDependencies": { "devDependencies": {

View File

@ -2,17 +2,14 @@
<html> <html>
<head> <head>
<title>Getting Started</title> <title>Displaying Data</title>
<script src="https://code.angularjs.org/tools/system.js"></script> <script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
<script> <script>
System.config({ System.config({
transpiler: 'typescript', packages: {'app': {defaultExtension: 'js'}}
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
}); });
System.import('app/bootstrap.ts'); System.import('app/bootstrap');
</script> </script>
</head> </head>

View File

@ -184,7 +184,7 @@ figure.image-display
advantage of a TypeScript short-cut in our declaration of the constructor parameters. advantage of a TypeScript short-cut in our declaration of the constructor parameters.
Consider the first parameter: 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 :marked
That brief syntax simultaneously 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. 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: 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 .alert.is-important
:marked :marked
Don't forget the leading asterisk (\*) in front of `*ng-if`. It is an essential part of the syntax. 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. As with the `NgFor`, we must add the `NgIf` directive to the component's metadata.
We should extend our `import` statement as before ... 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 :marked
... and add it to the directives array: ... 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 :marked
Try it out. We have four items in the array so the message should appear. 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. 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. 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 :marked
and update the `directives` metadata 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 :marked
Pro tip: we register this constant in almost every template we write. Pro tip: we register this constant in almost every template we write.