QS revisions.

public/docs/js/latest/quickstart.jade

@@ -39,14 +39,15 @@
   h2#section-transpile 2. Import Angular
 
   p.
-    Create a file named <code>app.es6</code> at the root of the project.
+    This quickstart will consist of two files, an <code>index.html</code> and a
+    <code>app.es6</code>. Both of these files will be at the root of the project.
     The <code>.es6</code> extension signifies that the file uses ES6 syntax.
     Using the ES6 module syntax you can import the required modules from Angular2.
 
   pre.prettyprint.linenums
     code import {Component, Template, bootstrap} from 'angular2/angular2';
 
-  p The above import statement will import the three modules from Angular. These modules load at runtime.
+  p The above import statement will import three modules from Angular. These modules load at runtime.
 
 
 
@@ -58,20 +59,19 @@
   p.
     Components are custom HTML elements. Angular uses components to empower HTML.
     Components structure and repre.prettyprint.linenumssent the UI. This quickstart
-    demonstrates the process of creating a component. This component will have the tag of app.
+    demonstrates the process of creating a component. This component will have the tag of app,
-
+    <code>&lt;my-app&gt;&lt;/my-app&gt;</code>.
-  pre.prettyprint.linenums
-    code &lt;app&gt;&lt;/app&gt;
 
   p A component consists of two parts; the annotation section and the component controller.
 
   pre.prettyprint.linenums
     code.
+      // app.es6
       import {Component, Template, bootstrap} from 'angular2/angular2';
 
       // Annotation Section
       @Component({
-        selector: 'app'
+        selector: 'my-app' 
       })
       @Template({
         inline: `
@@ -79,12 +79,15 @@
         `
       })
       // Component Controller
-      class AppComponent {
+      class MyAppComponent {
         constructor() {
           this.name = "Alice";
         }
       }
       
+      // Render the app to the page
+      bootstrap(MyAppComponent);
+
   .l-sub-section
     h3 Component Annotations
 
@@ -92,11 +95,13 @@
       A component annotation provides meta-data about the <code>component</code>.
       An annotation can always identified by its at-sign — <code>@</code>.
     p.
-      The <code>@Component</code> annotation defines the HTML tag for the component.
+      The <code>@Component</code> annotation defines the HTML tag for the component. The <code>@Component</code>
+      annotation is imported in the first line of <code>app.es6</code>.
       The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
 
     p.
-      The <code>@Template</code> annotation defines the template to apply to the
+      The <code>@Template</code> annotation defines the template to apply to the The <code>@Template</code>
+      annotation is imported in the first line of <code>app.es6</code>.
       component. This component uses an inline template, but external templates are
       available as well. To use an external template specify a <code>url</code> property
       and give it the path to the html file.
@@ -104,17 +109,15 @@
     pre.prettyprint.linenums
       code.
         @Component({
-          selector: 'app'
+          selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
         })
         @Template({
-          inline: `
+          inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;` // Defines the inline template for the component
-            &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
-          `
         })
 
     p.
       The component created above has a HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
-      and a template of <code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;</code>.
+      and a template of <code>&lt;h1&gt;Hello <code>{{</code> name }}&lt;/h1&gt;</code>.
 
   .l-sub-section
     h3 Component Controller
@@ -125,11 +128,11 @@
 
     pre.prettyprint.linenums
       code
-        class AppComponent {
+        | class MyAppComponent {
-          constructor() {
+        |   constructor() {
-            this.name = "Alice";
+        |     this.name = "Alice";
-          }
+        |   }
-        }
+        | }
 
     p.
       Templates read from their component controllers. Templates have access to any properties
@@ -157,7 +160,7 @@
       component will render as well.
 
     pre.prettyprint.linenums
-      code bootstrap(AppComponent);
+      code bootstrap(MyAppComponent);
 
 
 
@@ -174,6 +177,7 @@
 
   pre.prettyprint.linenums
     code.
+      &lt;!-- index.html --&gt;
       &lt;html&gt;
         &lt;head&gt;
           &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@@ -182,7 +186,7 @@
         &lt;body&gt;
           <!-- -->
           &lt;!-- The app component created in app.es6 --&gt;
-          &lt;app&gt;&lt;/app&gt;
+          &lt;my-app&gt;&lt;/my-app&gt;
           <!-- -->
         &lt;/body&gt;
       &lt;/html&gt;
@@ -190,7 +194,7 @@
   .l-sub-section
     h3 Load the component module
     p.
-      The last step is to load the module for the app component.
+      The last step is to load the module for the my-app component.
       The es6-shim file comes packaged with the System library.
       Most browsers today do not support ES6 module loading. System
       provides module loading functionality to these browsers.
@@ -204,10 +208,11 @@
       ol
         li Angular - The Angular framework.
         li Runtime assertions - Optional assertions for runtime type checking.
-        li The app component created above - The component to display on the page.
+        li The my-app component created above - The component to display on the page.
 
     pre.prettyprint.linenums
       code.
+        &lt;!-- index.html --&gt;
         &lt;html&gt;
           &lt;head&gt;
             &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
@@ -215,15 +220,15 @@
           &lt;/head&gt;
           &lt;body&gt;
 
-            &lt;!-- The app component created in app.es6 --&gt;
+            &lt;!-- The my-app component created in app.es6 --&gt;
-            &lt;app&gt;&lt;/app&gt;
+            &lt;my-app&gt;&lt;/my-app&gt;
 
             &lt;script&gt;
               // Rewrite the paths to load the files
               System.paths = {
-                'angular2/*':'/es6-shim/angular2/*.js',
+                'angular2/*':'/es6-shim/angular2/*.js', // Angular
-                'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
+                'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions
-                'app': 'app.es6'
+                'app': 'app.es6' // The my-app component
               };
 
               // Kick off the application