iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

(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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/displaying-data/ts/package.json
View File

@ -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": {

13
public/docs/_examples/displaying-data/ts/src/index.html
View File

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

12
public/docs/ts/latest/guide/displaying-data.jade
View File

@ -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.