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

2015-11-07 20:54:31 -08:00
parent 5be67b7212
commit faf0057d3a
4 changed files with 68 additions and 19 deletions
@@ -7,20 +7,18 @@
     <!-- #docregion bootstrap -->
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <!-- #enddocregion bootstrap -->
+     <!-- #docregion styles -->     
    <link rel="stylesheet" href="styles.css">
-    
-    <!-- #docregion libraries -->
+     <!-- #enddocregion styles -->
+
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
-    <!-- #enddocregion libraries -->
-    <!-- #docregion systemjs -->
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
-    <!-- #enddocregion systemjs -->
  </head>

  <body>
@@ -1,5 +1,5 @@
 // #docregion
-import {Component, bootstrap} from 'angular2/angular2';
+import {bootstrap, Component} from 'angular2/angular2';

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

@Component({
 	selector: 'my-app',
@@ -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
    <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
  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 `<head>` 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
+  ```