Merge pull request #34 from davideast/dart1

First draft of Dart content, plus some edits for js quickstart

public/docs/dart/latest/_data.json

@@ -0,0 +1,29 @@
+{
+  "index": {
+    "icon": "home",
+    "title": "Angular Docs",
+    "menuTitle": "Docs Home",
+    "banner": "Angular 2 is currently in Alpha Preview. We recommend using <a href='https://angulardart.org/guide'>AngularDart 1.X</a> for production applications."
+  },
+
+  "quickstart": {
+    "icon": "query-builder",
+    "title": "5 Min Quickstart"
+  },
+
+  "resources": {
+    "icon": "play-circle-fill",
+    "title": "Angular Resources",
+    "banner": "Angular 2 is currently in Alpha Preview. For AngularDart 1.X please visit <a href='https://angulardart.org/'>angulardart.org</a>."
+  },
+
+  "api": {
+    "icon": "book",
+    "title": "API Proposal"
+  },
+
+  "help": {
+    "icon": "chat",
+    "title": "Help & Support"
+  }
+}

public/docs/dart/latest/api.jade

@@ -0,0 +1,13 @@
+.l-main-section
+  h2 Developer Preview
+
+  p.
+    The Angular 2.0 API is currently in active development and not production ready.
+    This page will showcase a preview of proposed methods to help further the discussion
+    in the development community.
+
+  .l-sub-section
+    h3 Angular 1.X for Production
+    p.
+      If you're building a production app today, please
+      <a href="https://angulardart.org">use AngularDart 1.X</a>.

public/docs/dart/latest/help.jade

@@ -0,0 +1,33 @@
+.l-main-section
+  h2 Get Help Using Angular
+
+  p.
+    We have an incredible community of developers who are passionate about solving problems.
+    We recommend some of the following methods to get help with Angular.
+
+
+  .l-sub-section
+    h3 Angular Google Group
+
+    ul
+      li Search the archive first, it's likely that your question was already answered.
+      li To avoid the spam moderation queue, don't include code directly in your email. (See #3)
+      li Linking to a live code example that demonstrates your problem or question will get you an answer faster. <a href="http://plnkr.co/edit/rQvx8CXtmkCKR89jWn8T">Use this template</a>.
+      li If you get help, help others. Good karma rulez!
+
+    a(href="https://groups.google.com/forum/#!forum/angular" class="button button-primary" md-button) View the Google Group
+
+  .l-sub-section
+    h3 Angular Chat Room
+
+    p Talk in real time with other Angular developers.
+
+    a(href="http://webchat.freenode.net/?channels=angularjs&uio=d4" class="button button-primary" md-button) View the Chat Room
+
+
+  .l-sub-section
+    h3 Report an Issue
+
+    p If your run into an issue or have a feature request, you can create a new issue on our github repostitory.
+
+    a(href="https://github.com/angular/angular.js/issues" class="button button-primary" md-button) Report an Issue

public/docs/dart/latest/index.jade

@@ -0,0 +1,30 @@
+
+div.c4
+  md-card
+    md-card-content
+      h3.text-headline.text-uppercase <span class="icon-query-builder"></span> Quickstart
+      p.text-body Learn in 5 minutes
+
+      footer
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button" md-button) View Quickstart
+
+
+div.c4
+  md-card
+    md-card-content
+      h3.text-headline.text-uppercase <span class="icon-play-circle-outline"></span> Resources
+      p.text-body Preview of v2.0
+
+      footer
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/resources.html" class="button button-primary" md-button) View Resources
+
+
+div.c4
+  md-card
+    md-card-content
+      h3.text-headline.text-uppercase <span class="icon-book"></span> API Preview
+      p.text-body Proposal for v2.0 API
+
+      footer
+        a(href="/docs/#{current.path[1]}/#{current.path[2]}/api.html" class="button" md-button) View API
+

public/docs/dart/latest/quickstart.jade

@@ -0,0 +1,216 @@
+p.
+  These instructions assume that you already have the Dart SDK
+  and any tools you like to use with Dart.
+  If not, go
+  <a href="https://www.dartlang.org/tools/download.html">download Dart</a>.
+  Then return here.
+
+// STEP 1 - Install Angular ##########################
+.l-main-section
+  h2#section-install-angular 1. Install Angular
+
+  p.
+    In a new directory, create a <code>pubspec.yaml</code> file.
+    Add angular2 and browser as dependencies,
+    and add the angular2 transformer:
+    [PENDING: if the transformer isn't working in time,
+    remove it and use reflection in Dartium instead.
+    Perhaps require Dart 1.9.]
+
+  pre.prettyprint.linenums
+    code.
+      name: hello_world
+      version: 0.0.1
+      dependencies:
+        angular2: "&gt;=2.0.0-alpha.6 &lt;3.0.0"
+        browser: any
+      transformers:
+      - angular2
+  p.
+    In the same directory, run <code>pub get</code>
+    to install the angular2 and browser packages
+    (along with the packages they depend on):
+
+  pre.prettyprint.linenums
+    code.
+      > pub get
+      Resolving dependencies... (7.3s)
+      + angular2 2.0.0-alpha.6
+      + browser 0.10.0+2
+      + path 1.3.3
+      + stack_trace 1.2.3
+      Changed 4 dependencies!
+
+  p.
+    PENDING: Create template? Link to pub/pubspec docs?
+    Is browser really needed?
+    TODO: make this an invisible note.
+
+// STEP 2 - Import Angular ##########################
+.l-main-section
+  h2#section-transpile 2. Import Angular
+
+  p.
+    Under the same directory, create a <code>web</code> directory.
+    Create a file under <code>web</code> named <code>main.dart</code>.
+    Edit <code>web/main.dart</code> to import the angular2 library:
+
+  pre.prettyprint.linenums
+    code import 'package:angular2/angular2.dart';
+
+
+// STEP 3 - Define a component ##########################
+.l-main-section
+
+  h2#section-angular-create-account 3. Define a component
+
+  p.
+    A component is a custom HTML element.
+    In this step, you create a component that has the tag <b>&lt;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 contain the following code,
+    which defines the app component:
+
+  pre.prettyprint.linenums
+    code.
+      import 'package:angular2/angular2.dart';
+
+      @Component(
+          selector: 'app'
+      )
+      @Template({
+        inline: '&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;'
+      })
+      class AppComponent {
+        String name = 'Alice';
+      }
+
+  .l-sub-section
+    h3 Annotations
+
+    p.
+      The <code>@Component</code> annotation defines the HTML tag for the component. [PENDING: component controller?]
+      The <code>selector</code> property specifies the tag. The <code>selector</code> property is a CSS selector. [PENDING: huh?]
+
+    p.
+      The <code>@Template</code> annotation defines the template to apply to the
+      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.
+
+    pre.prettyprint.linenums
+      code.
+        @Component(
+            selector: '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>
+      and a template of <code>&lt;h1&gt;Hello &#123;&#123; name }}&lt;/h1&gt;</code>.
+
+    p TODO: make double-mustaches work in text (they do work in listings)
+
+  .l-sub-section
+    h3 The template and the component controller
+
+    p.
+      A template has access to all the public properties and methods
+      of its component controller.
+      [PENDING: Do we really want to use the term "component controller"?
+      If so, set it up beforehand.
+      In the original text, what does "the backing" mean, and is it
+      important that we keep it?]
+
+    pre.prettyprint.linenums
+      code.
+        class AppComponent {
+          String name = 'Alice';
+        }
+
+    p.
+      The template above binds to a <code>name</code> property through the <code>{{ }}</code>
+      syntax.The body of the constructor assigns "Alice" to the name property. When the
+      template renders, Alice appears instead of <code>{{ name }}</code>.
+      [TODO: fix double mustaches]
+
+
+
+// STEP 4 - Bootstrap ##########################
+.l-main-section
+  h2#section-transpile 4. Bootstrap
+
+  p.
+    At the bottom of <code>web/main.dart</code>,
+    add a <code>main()</code> function
+    that calls Angular's <code>bootstrap()</code> function.
+    The argument to <code>bootstrap()</code> is the name of the app class
+    you defined above:
+
+  pre.prettyprint.linenums
+    code.
+      main() {
+        bootstrap(AppComponent);
+      }
+  p.
+    [PENDING: change/remove line numbers. They should start at 12.]
+
+// STEP 5 - Declare the HTML ##########################
+.l-main-section
+
+  h2#section-angular-create-account 5. Declare the HTML
+
+  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:
+
+  pre.prettyprint.linenums
+    code.
+        &lt;!doctype html>
+        &lt;html>
+          &lt;head&gt;
+            &lt;title&gt;Angular 2 Quickstart&lt;/title&gt;
+          &lt;/head&gt;
+          &lt;body>
+            &lt;app>&lt;/app>
+            &lt;script type="application/dart" src="main.dart">&lt;/script>
+            &lt;script src="packages/browser/dart.js">&lt;/script>
+          &lt;/body>
+        &lt;/html>
+  p.
+    [PENDING: When I select a bunch of code, it looks like I select the line #s too, making me fear that they'll get copied. But pasting doesn't include them. Fix!]
+
+// STEP 5 - Build and run ##########################
+.l-main-section
+
+  h2#section-angular-run-app 5. Build and run your app
+
+  p.
+    You have many options.
+    One is to run the <code>pub serve</code>
+    command in the directory
+    that contains your app's <code>pubspec.yaml</code> file:
+
+  pre.prettyprint.linenums
+    code.
+      > pub serve
+      Serving helloworld on http://localhost:8080
+
+  p.
+    In the browser, go to the index file—for example,
+    localhost:8080/web/index.html.
+    [PENDING: This isn't working right now. Fix!]
+
+// WHAT'S NEXT... ##########################
+.l-main-section
+  h2#section-transpile Great Job! Next Step...
+
+  p.
+    Learn some template syntax for extra credit.
+    [PENDING: really?]

public/docs/dart/latest/resources.jade

@@ -0,0 +1,20 @@
+.l-main-section
+  h2 Victor Savkin's blog posts
+  ul
+    li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Change Detection</a>
+    li <a href="http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in">Functional programming </a>
+    li <a href="http://victorsavkin.com/post/110170125256/change-detection-in-angular-2">Dependency Injection</a>
+
+.l-main-section
+  h2 David East's Intro Todo App
+  ul
+    li <span class="icon-play-circle-outline"></span> <a href="https://developers.google.com/experts/all/technology/angular-js">Building a Todo App</a> (video)
+
+.l-main-section
+  h2 <span class="icon-play-circle-outline"></span> More Videos
+  ul
+    li <a href="https://www.youtube.com/watch?v=lGdnh8QSPPk&list=PLhc_bKwZngxW_ZlY0NkaGkvKpiA_pzcZ-">ng-europe playlist of videos</a> on Angular 2 and future of Angular
+    li Hejlsberg's <a href="https://www.youtube.com/watch?v=Ut694dsIa8w">talk on TypeScript</a> from December
+    li Coming soon: <a href="http://www.ng-conf.org/">playlist of video from ng-conf 2015</a>
+
+

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/_data.json

@@ -3,7 +3,7 @@
     "icon": "home",
     "title": "Angular Docs",
     "menuTitle": "Docs Home",
-    "banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
+    "banner": "Angular 2 is currently in Alpha Preview. We recommend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
   },
 
   "quickstart": {
@@ -26,4 +26,4 @@
     "icon": "chat",
     "title": "Help & Support"
   }
-}
+}

public/docs/js/latest/quickstart.jade

@@ -26,8 +26,8 @@
 
     p.
       The es6-shim package includes Angular and dependencies needed to compile
-      ES6 in the browser, such as Traceur. Traceur is an ES6 compiler that transpiles ES6 to ES5 code. 
+      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.
 
@@ -41,9 +41,9 @@
     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.
-    
+
   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
@@ -59,7 +59,6 @@
   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
     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>.
@@ -73,7 +72,7 @@
 
       // Annotation Section
       @Component({
-        selector: 'my-app' 
+        selector: 'my-app'
       })
       @Template({
         inline: `&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;`
@@ -84,7 +83,7 @@
           this.name = "Alice";
         }
       }
-      
+
       // Render the app to the page
       bootstrap(MyAppComponent);
 
@@ -92,7 +91,7 @@
     h3 Component Annotations
 
     p.
-      A component annotation provides meta-data about the <code>component</code>.
+      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>
@@ -127,12 +126,12 @@
       controller uses ES6 <code>class</code> syntax.
 
     pre.prettyprint.linenums
-      code
+      code.
-        | class MyAppComponent {
+        class MyAppComponent {
-        |   constructor() {
+          constructor() {
-        |     this.name = "Alice";
+            this.name = "Alice";
-        |   }
+          }
-        | }
+        }
 
     p.
       Templates read from their component controllers. Templates have access to any properties
@@ -182,10 +181,10 @@
           &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;my-app&gt;&lt;/my-app&gt;
-          <!-- -->
+
         &lt;/body&gt;
       &lt;/html&gt;