Merge branch 'master' into dropdown

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

@@ -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,47 +59,48 @@
   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.
+    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
 
     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> 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