docs(devguide): First pass through chapter 1

public/docs/js/latest/guide/_data.json

@@ -2,7 +2,7 @@
   "_listtype": "ordered",
 
   "setup": {
-    "title": "Setup"
+    "title": "Getting Started"
   },
 
   "displaying-data": {

public/docs/js/latest/guide/setup.jade

@@ -1,26 +1,161 @@
-p.
+.l-main-section
-  <strong>Angular is still unpackaged and in alpha</strong>. This quickstart does not
+  p.
-  reflect the final build process for Angular. The following setup is for those who
+    <strong>Mission:</strong> By the end of this chapter, you should be able to get an Angular 2 component to appear on
-  want to try out Angular while it is in alpha.
+    the page.
+
+  .l-sub-section
+    h3#section-examples Examples:
+      ul
+        li
+          a(href='http://plnkr.co/edit/MRz2i7sjupzxERPAa3SF?p=preview') TypeScript
+        li
+          a(href='http://plnkr.co/edit/wzzKo4etk24t0oAnL6ep?p=preview') ES5
 
 .l-main-section
-  h2#section-create-project 1. Create a project
+  h2#section-install-or-plunker Install Angular or Use Plunker
+  p There are four steps to create any Angular app:
+  ol
+    li Create an entry point HTML file where users will start
+    li Load the Angular library at the top of the file
+    li Make a root component for your application
+    li Bootstrap Angular
 
   p.
-    The goal of this quickstart is to create a component that renders "Hello Alice" to the page.
+    You can edit and test out your apps either though serving local files through a web server or through a service like
-    To get started, create a new directory.
+    Plunker.
 
+  p.
+    For Plunker, just use the <a href="http://plnkr.co/edit/?p=preview">starter template</a> to get going.  If you're
+    serving local files, edit and save them and start a web server that serves files in that directory.  If you have
+    Python installed, you can run a basic HTTP server from the root of your code directory with:
+
+  pre.prettyprint.lang-bash
+    code python -m SimpleHTTPServer 8000
 
 .l-main-section
-  h2#section-add-es6-shim 2. Clone the quickstart repository
+  h2#section-create-an-entry-point Create an entry point
+  p.
+    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.js</code> file where
+    you'll build your first component.
 
-  p Within your project, clone the quickstart repository:
+  p.
+    In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
+    application.
 
-  pre.prettyprint
+  pre.prettyprint.lang-html
-    code git clone https://github.com/angular/quickstart.git
+    code.
+      //ES5
+      &lt;!DOCTYPE html&gt;
+      &lt;html&gt;
+        &lt;head&gt;
+          &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
+          &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
+        &lt;/head&gt;
+        &lt;body&gt;
+        &lt;/body&gt;
+      &lt;/html&gt;
 
+  pre.prettyprint.lang-html
+    code.
+      //TypeScript
+      &lt;!DOCTYPE html&gt;
+      &lt;html&gt;
+        &lt;head&gt;
+          &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
+          &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
+          &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js&quot;&gt;&lt;/script&gt;
+        &lt;/head&gt;
+        &lt;body&gt;
+          &lt;my-app&gt;&lt;/my-app&gt;
+          &lt;script&gt;
+            System.config({
+              paths: {
+                &#39;*&#39;: &#39;*.js&#39;,
+                &#39;angular2/*&#39;: &#39;angular2/*&#39;,
+              }
+            });
+            System.import(&#39;main&#39;);
+          &lt;/script&gt;
+        &lt;/body&gt;
+      &lt;/html&gt;
 
+.callout.is-helpful
+  header Don't use code.angularjs.org in a live app
+  p.
+    This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
+    fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.
 
-// WHAT'S NEXT... ##########################
 .l-main-section
-  h2#section-transpile Great job! We'll have the next steps out soon.
+  h2#section-set-up-the-starting-component Set up the starting component
+
+  p.
+    In <code>main.js</code>, create a class called <code>AppComponent</code>, configure it to bind to the
+    <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
+    it all off like this:
+
+  pre.prettyprint.lang-javascript
+    code.
+      //ES5
+      function AppComponent() {}
+
+      AppComponent.annotations = [
+        new angular.Component({
+          selector: 'my-app'
+        }),
+        new angular.View({
+          template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+        })
+      ];
+
+      document.addEventListener('DOMContentLoaded', function() {
+        angular.bootstrap(AppComponent);
+      });
+
+  pre.prettyprint.lang-typescript
+    code.
+      //TypeScript
+      import {Component, View, bootstrap} from 'angular2/angular2';
+
+      @Component({
+        selector: 'my-app'
+      })
+      @View({
+        template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
+      })
+      class AppComponent {
+      }
+
+      bootstrap(AppComponent);
+
+.l-main-section
+  h2#section-run-it Run it!
+
+  p.
+    Open <code>index.html</code> through your web server or hit the <strong>Run</strong> button if using Plunker and
+    you should see:
+  div(align='center')
+    img(src='setup-example1.png')
+
+.l-main-section
+  h2#section-explanations Explanations
+
+  p This basic Angular app contains the structure for any app you'll build.
+
+  p.
+    You can think of Angular apps as a tree of components.  This root component we've been talking about acts as the top
+    level container for the rest of your application.  You've named this one <code>AppComponent</code>, but there's
+    nothing special about the name and you can use whatever makes sense to you.
+
+  p.
+    The root component's job is to give a location in the <code>index.html</code> file where your application will
+    render through it's element, in this case <code>&lt;my-app&gt;</code>.  There is also nothing special about this
+    element name and you can pick it as you like.
+
+  p.
+    The root component loads the initial template for the application that will load other components to perform
+    whatever functions your application needs - menu bars, views, forms, etc.  We'll walk through examples of all of
+    these in the following pages.
+
+  p Exciting!  Not excited yet?  Let's move on to <a href="displaying-data.html">Displaying Data</a>.
+
+