(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:
parent
175a5e4d87
commit
b82e229ade
|
@ -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": {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue