Merge pull request #39 from davideast/usertest

tweaks to quickstarts

public/docs/dart/latest/quickstart.jade

@@ -5,13 +5,22 @@ p.
   <a href="https://www.dartlang.org/tools/download.html">download Dart</a>.
   Then return here.
 
-// STEP 1 - Install Angular ##########################
+// STEP 1 - Create a project ##########################
 .l-main-section
-  h2#section-install-angular 1. Install Angular
+  h2#section-install-angular 1. Create a project
 
   p.
-    In a new directory, create a <code>pubspec.yaml</code> file.
+    Create a new directory, and put a file named
-    Add angular2 and browser as dependencies:
+    <code>pubspec.yaml</code> file in it.
+
+  pre.prettyprint
+    code.
+      &gt; mkdir hello_world
+      &gt; cd hello_world
+      &gt; vim pubspec.yaml  # Use your favorite editor!
+
+  p.
+    In <code>pubspec.yaml</code>, add the angular2 and browser packages as dependencies:
 
   // [PENDING: if the transformer isn't working in time,
   // remove it and use reflection in Dartium instead.
@@ -51,6 +60,13 @@ p.
   p.
     Still in the same directory, create a <code>web</code> directory.
     Create a file under <code>web</code> named <code>main.dart</code>.
+
+  pre.prettyprint
+    code.
+      &gt; mkdir web
+      &gt; vim web/main.dart  # Use your favorite editor!
+
+  p.
     Edit <code>web/main.dart</code> to import the angular2 library
     and (for now) two reflection libraries:
 
@@ -69,18 +85,18 @@ p.
 
   p.
     A component is a custom HTML element.
-    In this step, you create a component that has the tag <b>&lt;app></b>.
+    In this step, you create a component that has the tag <b>&lt;my-app></b>.
     The Dart code for a component consists of a class
     with annotations that describe the component.
 
   p.
     Update <code>web/main.dart</code> to add the following code,
-    which defines the app component:
+    which defines the my-app component:
 
   pre.prettyprint.linenums
     code.
       @Component(
-        selector: 'app'
+        selector: 'my-app'
       )
       @Template(
         inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
@@ -109,15 +125,15 @@ p.
     pre.prettyprint.linenums
       code.
         @Component(
-          selector: 'app'
+          selector: 'my-app'
         )
         @Template(
           inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
         )
 
     p.
-      The annotations above specify an HTML tag of <code>&lt;app&gt;&lt;/app&gt;</code>
+      The annotations above specify an HTML tag of <code>&lt;my-app&gt;&lt;/my-app&gt;</code>
-      and a template of <code>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
+      and a template of <code ng-non-bindable>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
 
     // TODO: In the preceding paragraph, that should be rendered as {{ name }}, like in the listing.
 
@@ -130,7 +146,7 @@ p.
       The template above binds to a <code>name</code> property through
       the double-mustache syntax (<code ng-non-bindable>{{ }}</code>).
       The body of the constructor assigns "Alice" to the name property. When the
-      template renders, Alice appears instead of <code  ng-non-bindable>{{ name }}</code>.
+      template renders, Alice appears instead of <code ng-non-bindable>{{ name }}</code>.
 
 
     // [PENDING: Do we really want to use the term "component controller"?
@@ -178,7 +194,7 @@ p.
   p.
     Create a file named <code>web/index.html</code> that contains
     the following code,
-    which loads <code>main.dart</code> and instantiates the app component:
+    which loads <code>main.dart</code> and instantiates the my-app component:
 
   pre.prettyprint.linenums
     code.
@@ -188,7 +204,7 @@ p.
             &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
           &lt;/head&gt;
           &lt;body>
-            &lt;app>&lt;/app>
+            &lt;my-app>&lt;/my-app>
 
             &lt;script type="application/dart" src="main.dart">&lt;/script>
             &lt;script src="packages/browser/dart.js">&lt;/script>
@@ -222,7 +238,7 @@ p.
 
 // WHAT'S NEXT... ##########################
 .l-main-section
-  h2#section-transpile Great Job! Next Step...
+  h2#section-transpile Great job! Next step...
 
   p.
     Learn some template syntax for extra credit.

public/docs/js/latest/quickstart.jade

@@ -12,15 +12,16 @@
     <a href="https://github.com/davideast/conscious"> <code>es6-shim</code> GitHub repository</a>.
     This repository will provide a faster start. <code>es6-shim</code> includes Angular and dependencies to compile ES6 in incompatible browsers.
 
-  p Clone the repository inside of aleady existing project.
+  p Clone the repository inside of already existing project.
 
   pre.prettyprint.linenums
-    code git clone https://github.com/davideast/concious.git es6-shim
+    code git clone https://github.com/davideast/conscious.git es6-shim
 
   .l-sub-section
-    h3 The <code>es6-shim</code>
+    h3 ES6 and es6-shim
     p.
-      Angular builds on top of ES6, the new specification of the JavaScript language.
+      Angular builds on top of ES6 (ECMAScript 6),
+      the new specification of the JavaScript language.
       ES6 is not widely supported in all browsers today. The following es6-shim
       repository allows you to use ES6 in the browser.
 
@@ -32,7 +33,6 @@
       Think of the es6-shim repository as package rather than a new project.
 
 
-
 // STEP 2 - Import Angular ##########################
 .l-main-section
   h2#section-transpile 2. Import Angular
@@ -52,7 +52,6 @@
   p The above import statement will import three modules from Angular. These modules load at runtime.
 
 
-
 // STEP 3 - Create a component ##########################
 .l-main-section
 
@@ -75,12 +74,12 @@
         selector: 'my-app'
       })
       @Template({
-        inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
+        inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
       })
       // Component Controller
       class MyAppComponent {
         constructor() {
-          this.name = "Alice";
+          this.name = 'Alice';
         }
       }
 
@@ -111,7 +110,7 @@
           selector: 'app' // Defines the &lt;my-app&gt;&lt;/my-app&gt; tag
         })
         @Template({
-          inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;` // Defines the inline template for the component
+          inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;' // Defines the inline template for the component
         })
 
     p.
@@ -129,7 +128,7 @@
       code.
         class MyAppComponent {
           constructor() {
-            this.name = "Alice";
+            this.name = 'Alice';
           }
         }
 
@@ -203,9 +202,9 @@
 
     p Tell System about three paths:
       ol
-        li Angular - The Angular framework.
+        li Angular: The Angular framework.
-        li Runtime assertions - Optional assertions for runtime type checking.
+        li Runtime assertions: Optional assertions for runtime type checking.
-        li The my-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.
@@ -237,9 +236,8 @@
     p Run the root of your project on a local server.
 
 
-
 // WHAT'S NEXT... ##########################
 .l-main-section
-  h2#section-transpile Great Job! Next Step...
+  h2#section-transpile Great job! Next step...
 
-  p Learn some template syntax for extra-credit.
+  p Learn some template syntax for extra credit.