(docs) fix plunker for Intro; minor Forms tweaks

closes #426
This commit is contained in:
Ward Bell 2015-11-30 21:21:49 -08:00
parent b06f2dcec6
commit 83fab41666
5 changed files with 15 additions and 8 deletions

View File

@ -1,5 +1,4 @@
<!--#docplaster <!-- #docplaster -->
-->
<!-- #docregion final --> <!-- #docregion final -->
<div class="container"> <div class="container">
<!-- #docregion edit-div --> <!-- #docregion edit-div -->

View File

@ -0,0 +1,7 @@
{
"description": "Forms",
"files":[
"!**/*.d.ts",
"!**/*.js"
]
}

View File

@ -29,7 +29,8 @@ include ../../../../_includes/_util-fns
- How to display validation errors to users and enable/disable form controls - How to display validation errors to users and enable/disable form controls
- How to share information across controls with template local variables - How to share information across controls with template local variables
[Live Example](/resources/live-examples/forms/ts/src/plnkr.html)
.l-main-section .l-main-section
:marked :marked
## Template-Driven Forms ## Template-Driven Forms
@ -97,7 +98,7 @@ figure.image-display
Create a new file in the app folder called `hero.ts` and give it the following class definition: Create a new file in the app folder called `hero.ts` and give it the following class definition:
+makeExample('forms/ts/src/app/hero.ts', null, 'hero.ts') +makeExample('forms/ts/src/app/hero.ts', null, 'app/hero.ts')
:marked :marked
It's an anemic model with few requirements and no behavior. Perfect for our demo. It's an anemic model with few requirements and no behavior. Perfect for our demo.
@ -123,7 +124,7 @@ figure.image-display
Create a new file called `hero-form.component.ts` and give it the following definition: Create a new file called `hero-form.component.ts` and give it the following definition:
+makeExample('forms/ts/src/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts (v.1)') +makeExample('forms/ts/src/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts')
:marked :marked
Theres nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before. Theres nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
@ -163,7 +164,7 @@ figure.image-display
`app.ts` is the application's root component. It will host our new `HeroFormComponent`. `app.ts` is the application's root component. It will host our new `HeroFormComponent`.
Replace the contents of the "QuickStart" version with the following: Replace the contents of the "QuickStart" version with the following:
+makeExample('forms/ts/src/app/app.ts', null, 'app.ts') +makeExample('forms/ts/src/app/app.ts', null, 'app/app.ts')
:marked :marked
.l-sub-section .l-sub-section
@ -183,7 +184,7 @@ figure.image-display
Create a new template file called `hero-form.component.html` and give it the following definition: Create a new template file called `hero-form.component.html` and give it the following definition:
+makeExample('forms/ts/src/app/hero-form.component.html', 'start', 'app/hero-form.component.html (v.1)') +makeExample('forms/ts/src/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
:marked :marked
That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and

View File

@ -29,7 +29,7 @@ figure
Typically, these snippets are excerpts from a running sample application that accompanies the chapter. Typically, these snippets are excerpts from a running sample application that accompanies the chapter.
We can often find a link to a live version of that sample near the top of the chapter ... like this one. We can often find a link to a live version of that sample near the top of the chapter ... like this one.
[Live Example](/docs/_examples/intro/ts/src/plnkr.html) [Live Example](/resources/live-examples/intro/ts/src/plnkr.html)
This link opens in a browser and runs the sample code supporting this chapter's architecture overview. This link opens in a browser and runs the sample code supporting this chapter's architecture overview.
We can inspect, modify, save, and download the code. We can inspect, modify, save, and download the code.