merge with master

public/docs/js/2_0_0-alpha_11/quickstart.jade

@@ -1,3 +1 @@
 h1 JavaScript Quickstart
-
-!= partial("../_quickstart", public.docs.js._data)

public/docs/js/latest/quickstart.jade

@@ -18,19 +18,18 @@
     code git clone https://github.com/davideast/concious.git es6-shim
 
   .l-sub-section
-    h3 A word on ES6
+    h3 The <code>es6-shim</code>
     p.
       Angular builds on top of ES6, the new specification of the JavaScript language.
-      Not all ES6 features are available in all browsers. The following es6-shim
+      ES6 is not widely supported in all browsers today. The following es6-shim
-      repository allows you to use ES6 in the browser today.
+      repository allows you to use ES6 in the browser.
-
-    p.
-      Angular is available on npm. Configuring Angular to run ES6 in the browser
-      requires a build process, detailed here.
 
     p.
       The es6-shim package includes Angular and dependencies needed to compile
-      ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
+      ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code.
+
+    p.
+      Think of the es6-shim repository as package rather than a new project.
 
 
 
@@ -39,14 +38,18 @@
   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.
+
+  p This quickstart will create a component that renders "Hello Alice" to the page.
+
+  p 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.
 
 
 
@@ -56,35 +59,34 @@
   h2#section-angular-create-account 3. Create a component
 
   p.
-    Components are custom HTML elements. Angular uses components to empower HTML.
+    Components structure and repre.prettyprint.linenumssent the UI. This quickstart
-    Components structure and represent 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: `
+        inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
-          &lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
-        `
       })
       // 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 +94,13 @@
       A component annotation provides metadata 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 +108,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
@@ -124,8 +126,8 @@
       controller uses ES6 <code>class</code> syntax.
 
     pre.prettyprint.linenums
-      code
+      code.
-        class AppComponent {
+        class MyAppComponent {
           constructor() {
             this.name = "Alice";
           }
@@ -157,7 +159,7 @@
       component will render as well.
 
     pre.prettyprint.linenums
-      code bootstrap(AppComponent);
+      code bootstrap(MyAppComponent);
 
 
 
@@ -167,30 +169,29 @@
   h2#section-angular-create-account 5. Declare the HTML
 
   p.
-    Create an <code>index.html</code> file at the root of the project.
+    Inside of the <code>index.html</code>, include the <code>es6-shim.js</code> file in the <code>head</code> tag.
-    Include the <code>es6-shim.js</code> file in the <code>head</code> tag.
+    Now, declare the app component the <code>body</code>. The es6-shim must load before any application code.
-    Now, declare the app component the <code>body</code>. The es6-shim must
-    load before any application code.
 
   pre.prettyprint.linenums
     code.
+      &lt;!-- index.html --&gt;
       &lt;html&gt;
         &lt;head&gt;
           &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
           &lt;script src="/es6-shim/dist/es6-shim.js"&gt;&lt;/script&gt;
         &lt;/head&gt;
         &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;
 
   .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 +205,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 +217,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