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

(docs) forms: fill gaps in the instructions that make this a complete sample (including app.ts)

This commit is contained in:
Ward Bell 2015-11-07 20:54:31 -08:00
parent 5be67b7212
commit faf0057d3a
4 changed files with 68 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/docs/_examples/forms/ts/src/index.html
View File

@ -7,20 +7,18 @@
<!-- #docregion bootstrap --> <!-- #docregion bootstrap -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- #enddocregion bootstrap --> <!-- #enddocregion bootstrap -->
<!-- #docregion styles -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<!-- #enddocregion styles -->
<!-- #docregion libraries -->
<script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- #enddocregion libraries -->
<!-- #docregion systemjs -->
<script> <script>
System.config({ System.config({
packages: {'app': {defaultExtension: 'js'}} packages: {'app': {defaultExtension: 'js'}}
}); });
System.import('app/app'); System.import('app/app');
</script> </script>
<!-- #enddocregion systemjs -->
</head> </head>
<body> <body>

2
public/docs/_examples/quickstart/ts/src/app.ts
View File

@ -1,5 +1,5 @@
// #docregion // #docregion
import {Component, bootstrap} from 'angular2/angular2'; import {bootstrap, Component} from 'angular2/angular2';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',

2
public/docs/_examples/quickstart/ts/src/app/app.ts
View File

@ -1,5 +1,5 @@
// #docregion // #docregion
import {Component, bootstrap} from 'angular2/angular2'; import {bootstrap, Component} from 'angular2/angular2';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',

75
public/docs/ts/latest/guide/forms.jade
View File

@ -81,9 +81,11 @@ figure.image-display
1. Show and hide validation error messages 1. Show and hide validation error messages
1. Handle form submission with **ng-submit** 1. Handle form submission with **ng-submit**
1. Disable the form’s submit button until the form is valid 1. Disable the form’s submit button until the form is valid
.l-main-section
:markdown :markdown
## Setup
Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
## Create the Hero Model Class ## Create the Hero Model Class
As users enter form data, we capture their changes and update an instance of a model. 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. 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 .l-main-section
:markdown :markdown
## Create an initial HTML Form Template ## Create an initial HTML Form Template
@ -186,7 +209,7 @@ figure.image-display
npm install bootstrap npm install bootstrap
:markdown :markdown
<br>Open the `index.html` and add the following line wherever we like to put our CSS <br>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 .callout.is-important
header Angular Forms Does Not Require A Style Library 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") img(src="/resources/images/devguide/forms/validity-required-indicator.png" alt="Invalid Form")
:markdown :markdown
We achieve this effect by adding two CSS styles to our `styles.css` file We achieve this effect by adding two styles to a new `styles.css` file
that select for the Angular validity classes and the HTML 5 "required" attribute: that we add to our project as a sibling to `index.html`.
+makeExample('forms/ts/src/styles.css') +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 `<head>` of the `index.html` to include this style sheet.
+makeExample('forms/ts/src/index.html', 'styles')(format=".")
:markdown :markdown
## Show and Hide Validation Error messages ## 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: Here’s the final version of the application includes all of these framework features:
+makeTabs(
+makeTabs('forms/ts/src/app/hero-form.component.html, '+ `forms/ts/src/app/hero-form.component.html,
'forms/ts/src/app/hero-form.component.ts , '+ forms/ts/src/app/hero-form.component.ts,
'forms/ts/src/app/hero.ts', forms/ts/src/app/hero.ts,
'final, final,', forms/ts/src/app/app.ts,
'hero-form.component.html, hero-form.component.ts, hero.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 :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
```