From faf0057d3a05037838f6dbc5614889af9fa18b73 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sat, 7 Nov 2015 20:54:31 -0800 Subject: [PATCH] (docs) forms: fill gaps in the instructions that make this a complete sample (including app.ts) --- public/docs/_examples/forms/ts/src/index.html | 8 +- .../docs/_examples/quickstart/ts/src/app.ts | 2 +- .../_examples/quickstart/ts/src/app/app.ts | 2 +- public/docs/ts/latest/guide/forms.jade | 75 ++++++++++++++++--- 4 files changed, 68 insertions(+), 19 deletions(-) diff --git a/public/docs/_examples/forms/ts/src/index.html b/public/docs/_examples/forms/ts/src/index.html index 2aa0229ab4..42fa6ee681 100644 --- a/public/docs/_examples/forms/ts/src/index.html +++ b/public/docs/_examples/forms/ts/src/index.html @@ -7,20 +7,18 @@ + - - + + - - - diff --git a/public/docs/_examples/quickstart/ts/src/app.ts b/public/docs/_examples/quickstart/ts/src/app.ts index e34a9804be..f036ae5e45 100644 --- a/public/docs/_examples/quickstart/ts/src/app.ts +++ b/public/docs/_examples/quickstart/ts/src/app.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, bootstrap} from 'angular2/angular2'; +import {bootstrap, Component} from 'angular2/angular2'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/quickstart/ts/src/app/app.ts b/public/docs/_examples/quickstart/ts/src/app/app.ts index e34a9804be..f036ae5e45 100644 --- a/public/docs/_examples/quickstart/ts/src/app/app.ts +++ b/public/docs/_examples/quickstart/ts/src/app/app.ts @@ -1,5 +1,5 @@ // #docregion -import {Component, bootstrap} from 'angular2/angular2'; +import {bootstrap, Component} from 'angular2/angular2'; @Component({ selector: 'my-app', diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 6aabb05601..ac62010289 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -81,9 +81,11 @@ figure.image-display 1. Show and hide validation error messages 1. Handle form submission with **ng-submit** 1. Disable the form’s submit button until the form is valid - -.l-main-section + :markdown + ## Setup + Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html). + ## Create the Hero Model Class As users enter form data, we capture their changes and update an instance of a model. @@ -152,6 +154,27 @@ figure.image-display We made a good choice to put the HTML template elsewhere. Let's write it. +.l-main-section +:markdown + ## Revise the *app.ts* + + `app.ts` is the application's root component. It will host our new `HeroFormComponent`. + + Replace the contents of the "QuickStart" version with the following: ++makeExample('forms/ts/src/app/app.ts') + +:markdown +.l-sub-section + :markdown + There are only three changes: + + 1. We import the new `HeroFormComponent`. + + 1. The `template` is simply the new element tag identified by the component's `select` property. + + 1. The `directives` array tells Angular that our templated depends upon the `HeroFormComponent` + which is itself a Directive (as are all Components). + .l-main-section :markdown ## Create an initial HTML Form Template @@ -186,7 +209,7 @@ figure.image-display npm install bootstrap :markdown
Open the `index.html` and add the following line wherever we like to put our CSS - +makeExample('forms/ts/src/index.html', 'bootstrap') + +makeExample('forms/ts/src/index.html', 'bootstrap')(format=".") .callout.is-important header Angular Forms Does Not Require A Style Library @@ -400,10 +423,15 @@ figure.image-display img(src="/resources/images/devguide/forms/validity-required-indicator.png" alt="Invalid Form") :markdown - We achieve this effect by adding two CSS styles to our `styles.css` file - that select for the Angular validity classes and the HTML 5 "required" attribute: - + We achieve this effect by adding two styles to a new `styles.css` file + that we add to our project as a sibling to `index.html`. + +makeExample('forms/ts/src/styles.css') +:markdown + These styles select for the two Angular validity classes and the HTML 5 "required" attribute. + + We update the `` of the `index.html` to include this style sheet. ++makeExample('forms/ts/src/index.html', 'styles')(format=".") :markdown ## Show and Hide Validation Error messages @@ -570,10 +598,33 @@ figure.image-display Here’s the final version of the application includes all of these framework features: - -+makeTabs('forms/ts/src/app/hero-form.component.html, '+ - 'forms/ts/src/app/hero-form.component.ts , '+ - 'forms/ts/src/app/hero.ts', - 'final, final,', - 'hero-form.component.html, hero-form.component.ts, hero.ts') ++makeTabs( + `forms/ts/src/app/hero-form.component.html, + forms/ts/src/app/hero-form.component.ts, + forms/ts/src/app/hero.ts, + forms/ts/src/app/app.ts, + forms/ts/src/index.html, + forms/ts/src/styles.css`, + 'final, final,,,,', + `hero-form.component.html, + hero-form.component.ts, + hero.ts, + app.ts, + index.html, + styles.css`) :markdown + Our final project folder structure should look like this: + ``` + angular2-forms + ├── node_modules + ├── src + │ ├── app + │ | ├── app.ts + │ | ├── hero.ts + │ | ├── hero-form.component.html + │ | └── hero-form.component.ts + │ ├── index.html + │ ├── styles.css + │ └── tsconfig.json + └── package.json + ``` \ No newline at end of file