chore(nav): Update nav with new structure, make ts default view

public/_includes/_main-nav.jade

@@ -6,7 +6,7 @@ md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5")
 
     ul(ng-class="showMainNav ? 'is-visible' : ''")
       li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
-      li.l-left <a class="main-nav-button" href="/docs/js/latest/" md-button>Docs</a>
+      li.l-left <a class="main-nav-button" href="/docs/ts/latest/" md-button>Docs</a>
       li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
       li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
       li.l-right <a class="main-nav-button has-icon" href="/download/" md-button> <span class="icon icon-cloud-download"></span> Install</a>

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

@@ -17,10 +17,5 @@
   "user-input": {
     "title": "User Input",
     "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
-  },
-
-  "making-components": {
-    "title": "Making Components",
-    "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template."
   }
 }

public/docs/dart/latest/guide/making-components.jade

@@ -1,43 +0,0 @@
-.l-main-section
-  p.
-    As mentioned earlier, you build Angular applications as a tree of nested components.
-    You've seen how to create a top-level component.
-    You add child components to a parent component by using them in
-    the parent component's template,
-    and by specifying the child component classes in the parent's list of directives.
-  p.
-    Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body,
-    you can create a parent
-    component that uses a <code>&lt;child&gt;</code> component like so:
-
-  code-example(language="dart" format="linenums").
-    library parent_child.parent;
-
-    import 'package:angular2/angular2.dart';
-    import 'package:parent_child/child.dart';
-
-    @Component(selector: 'parent')
-    @View(template: '''
-        &lt;h1&gt;{{ message }}&lt;/h1&gt;
-        <span class="pnk">&lt;child&gt;&lt;/child&gt;</span>
-    ''', directives: const [<span class="pnk">ChildComponent]</span>)
-    class ParentComponent {
-      String message = "I'm the parent";
-    }
-
-  p You then just need to write the <code>ChildComponent</code> class to make it work:
-
-  code-example(language="dart" format="linenums").
-    library parent_child.child;
-
-    import 'package:angular2/angular2.dart';
-
-    @Component(selector: 'child')
-    @View(template: '''
-        &lt;p&gt; {{ message }} &lt;/p&gt;
-    ''')
-    class ChildComponent {
-      String message = "I'm the child";
-    }
-
-//- [TODO: Motivate communication between components with iterator example that passes index to the child]

public/docs/js/latest/api/index.jade

@@ -4,7 +4,8 @@
   p.
     The Angular 2.0 API is currently in active development and not production ready.
     This page showcases a preview of proposed methods to help further the discussion
-    in the development community. If you're building a production app today, please
+    in the development community. Please also note that examples currently use TypeScript
+    rather than ES5 JavaScript. If you're building a production app today, please
     <a href="https://docs.angularjs.org/api">use Angular 1.X</a>.
 
 ul.is-plain

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

@@ -2,7 +2,7 @@
   "_listtype": "ordered",
 
   "index": {
-    "title": "Step By Step Guide"
+    "title": "Developer Guide"
   },
 
   "displaying-data": {
@@ -13,10 +13,5 @@
   "user-input": {
     "title": "User Input",
     "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
-  },
-
-  "making-components": {
-    "title": "Making Components",
-    "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template."
   }
 }

public/docs/js/latest/guide/making-components.jade

@@ -1,87 +0,0 @@
-.l-main-section
-
-  h2#section-its-all-a-tree It's all a tree
-
-  p.
-      As mentioned earlier, you build Angular applications as a tree of nested components.  You've seen how to create
-      a top-level component.  You add child components to a parent component by using them in the parent component's
-      template.
-  p.
-      Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
-      component that uses a <code>&lt;child&gt;</code> component like so:
-
-  code-tabs
-    code-pane(language="javascript" name="TypeScript" format="linenums").
-      //TypeScript
-      @Component({
-        selector: 'parent'
-      })
-      @View({
-        template: `
-          &lt;h1&gt;{{ message }}&lt;/h1&gt;
-          &lt;child&gt;&lt;/child&gt;
-        `,
-        directives: [ChildComponent]
-      })
-      class ParentComponent {
-        message: string;
-
-        constructor() {
-          this.message = "I'm the parent";
-        }
-      }
-    code-pane(language="javascript" name="ES5" format="linenums").
-      //ES5
-      function ParentComponent() {
-        this.message = "I'm the parent";
-      }
-      ParentComponent.annotations = [
-        new angular.ComponentAnnotation({
-          selector: "parent"
-        }),
-        new angular.ViewAnnotation({
-          template:
-            '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
-            '&lt;child&gt;&lt;/child&gt;',
-          directives: [ChildComponent]
-        })
-      ];
-
-
-  p You then just need to write the <code>ChildComponent</code> class to make it work:
-
-  code-tabs
-    code-pane(language="javascript" name="TypeScript" format="linenums").
-      //TypeScript
-      @Component({
-        selector: 'child'
-      })
-      @View({
-        template: `
-          &lt;p&gt; {{ message }} &lt;/p&gt;
-        `
-      })
-      class ChildComponent {
-        message: string;
-        constructor() {
-          this.message = "I'm the child";
-        }
-      }
-    code-pane(language="javascript" name="ES5" format="linenums").
-      //ES5
-      function ChildComponent() {
-        this.message = "I'm the child";
-      }
-      ChildComponent.annotations = [
-        new angular.ComponentAnnotation({
-          selector: "child"
-        }),
-        new angular.ViewAnnotation({
-          template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
-        })
-      ];
-
-
-  p.
-      Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to
-      add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives.

public/docs/ts/latest/_data.json

@@ -11,9 +11,21 @@
     "title": "5 Min Quickstart"
   },
 
+  "tutorial": {
+    "icon": "list",
+    "title": "Tutorial",
+    "banner": "Angular 2 is currently in Developer Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
+  },
+
   "guide": {
     "icon": "list",
-    "title": "Developer Guide",
+    "title": "Developer Guides",
+    "banner": "Angular 2 is currently in Developer Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
+  },
+
+  "testing": {
+    "icon": "list",
+    "title": "Testing Guides",
     "banner": "Angular 2 is currently in Developer Preview. For <a href='https://docs.angularjs.org/guide'>Angular 1.X Resources</a> please visit <a href='https://angularjs.org/'>Angularjs.org</a>."
   },
 

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

@@ -2,7 +2,7 @@
   "_listtype": "ordered",
 
   "index": {
-    "title": "Step By Step Guide"
+    "title": "Developer Guides"
   },
 
   "displaying-data": {
@@ -13,30 +13,5 @@
   "user-input": {
     "title": "User Input",
     "intro": "DOM events drive user input in Angular. You can use the native events like click, mouseover, and keyup. Angular uses a special syntax to register events to DOM elements. This section covers all the ins and outs of using the event syntax."
-  },
-
-  "making-components": {
-    "title": "Making Components",
-    "intro": "Angular applications are a tree of nested components. You always begin with a top-level component. You add child components by including them in the parent's template."
-  },
-
-  "unit-testing-01": {
-    "title": "Unit Testing Overview"
-  },
-
-   "jasmine-testing-101": {
-    "title": "Jasmine Testing 101"
-  },
-
-  "application-under-test": {
-    "title": "The Application Under Test"
-  },
-
-  "first-app-tests": {
-    "title": "First App Tests"
-  },
-
-  "testing-an-angular-pipe": {
-    "title": "Testing an Angular Pipe"
   }
 }

public/docs/ts/latest/guide/making-components.jade

@@ -1,87 +0,0 @@
-.l-main-section
-
-  h2#section-its-all-a-tree It's all a tree
-
-  p.
-      As mentioned earlier, you build Angular applications as a tree of nested components.  You've seen how to create
-      a top-level component.  You add child components to a parent component by using them in the parent component's
-      template.
-  p.
-      Given a bootstrapping template with a <code>&lt;parent&gt;</code> tag in the body, you can create a parent
-      component that uses a <code>&lt;child&gt;</code> component like so:
-
-  code-tabs
-    code-pane(language="javascript" name="TypeScript" format="linenums").
-      //TypeScript
-      @Component({
-        selector: 'parent'
-      })
-      @View({
-        template: `
-          &lt;h1&gt;{{ message }}&lt;/h1&gt;
-          &lt;child&gt;&lt;/child&gt;
-        `,
-        directives: [ChildComponent]
-      })
-      class ParentComponent {
-        message: string;
-
-        constructor() {
-          this.message = "I'm the parent";
-        }
-      }
-    code-pane(language="javascript" name="ES5" format="linenums").
-      //ES5
-      function ParentComponent() {
-        this.message = "I'm the parent";
-      }
-      ParentComponent.annotations = [
-        new angular.ComponentAnnotation({
-          selector: "parent"
-        }),
-        new angular.ViewAnnotation({
-          template:
-            '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
-            '&lt;child&gt;&lt;/child&gt;',
-          directives: [ChildComponent]
-        })
-      ];
-
-
-  p You then just need to write the <code>ChildComponent</code> class to make it work:
-
-  code-tabs
-    code-pane(language="javascript" name="TypeScript" format="linenums").
-      //TypeScript
-      @Component({
-        selector: 'child'
-      })
-      @View({
-        template: `
-          &lt;p&gt; {{ message }} &lt;/p&gt;
-        `
-      })
-      class ChildComponent {
-        message: string;
-        constructor() {
-          this.message = "I'm the child";
-        }
-      }
-    code-pane(language="javascript" name="ES5" format="linenums").
-      //ES5
-      function ChildComponent() {
-        this.message = "I'm the child";
-      }
-      ChildComponent.annotations = [
-        new angular.ComponentAnnotation({
-          selector: "child"
-        }),
-        new angular.ViewAnnotation({
-          template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
-        })
-      ];
-
-
-  p.
-      Notice that in addition to using the <code>&lt;child&gt;</code> element in the parent template, you also need to
-      add <code>ChildComponent</code> in <code>ParentComponent</code>'s list of directives.

public/docs/ts/latest/testing/_data.json

@@ -0,0 +1,27 @@
+{
+  "_listtype": "ordered",
+
+  "index": {
+    "title": "Testing Guides"
+  },
+
+  "unit-testing-01": {
+    "title": "Unit Testing Overview"
+  },
+
+   "jasmine-testing-101": {
+    "title": "Jasmine Testing 101"
+  },
+
+  "application-under-test": {
+    "title": "The Application Under Test"
+  },
+
+  "first-app-tests": {
+    "title": "First App Tests"
+  },
+
+  "testing-an-angular-pipe": {
+    "title": "Testing an Angular Pipe"
+  }
+}

public/docs/ts/latest/testing/first-app-tests.jade

@@ -14,7 +14,7 @@ include ../../../../_includes/_util-fns
     The Unit Testing chapters build upon each other. We recommend reading them in order.
     We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools
     we introduced in the [QuickStart](../quickstart.html) and
-    the [Tour of Heroes](./toh-pt1.html) tutorial
+    the [Tour of Heroes](../tutorial/) tutorial
     such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
 :markdown
   ## Create the test-runner HTML

public/docs/ts/latest/testing/index.jade

@@ -0,0 +1,10 @@
+- var number = 1;
+ul.is-plain
+  for page, slug in public.docs[current.path[1]][current.path[2]].testing._data
+
+    if slug != '_listtype' && slug != 'index'
+      - var url = "/docs/" + current.path[1] + "/" + current.path[2] + "/" + current.path[3] + "/" + slug + ".html"
+      - var num = number++
+
+      li
+        != partial("../../../../_includes/_hover-card", { icon: "icon-number", number: num, name: page.title, url: url })

public/docs/ts/latest/testing/testing-an-angular-pipe.jade

@@ -41,7 +41,7 @@ code-example(format="linenums").
     The Unit Testing chapters build upon each other. We recommend reading them in order.
     We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools
     we introduced in the [QuickStart](../quickstart.html) and
-    the [Tour of Heroes](./toh-pt1.html) tutorial
+    the [Tour of Heroes](../tutorial/) tutorial
     such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
 
 :markdown

public/docs/ts/latest/testing/unit-testing-01.jade

@@ -117,7 +117,7 @@ figure.image-display
     The Unit Testing chapters build upon each other. We recommend reading them in order.
     We're also assuming that you're already comfortable with basic Angular 2 concepts and the tools
     we introduced in the [QuickStart](../quickstart.html) and
-    the [Tour of Heroes](./toh-pt1.html) tutorial
+    the [Tour of Heroes](../tutorial/) tutorial
     such as <code>npm</code>, <code>gulp</code>, and <code>live-server</code>.
 
 :markdown

public/docs/ts/latest/tutorial/_data.json

@@ -0,0 +1,8 @@
+{
+  "_listtype": "ordered",
+
+  "index": {
+    "title": "Tutorial",
+    "intro": "The Tour of Heroes tutorial takes us through the steps of creating an Angular application in TypeScript."
+  }
+}

public/docs/ts/latest/tutorial/index.jade

@@ -3,9 +3,8 @@ include ../../../../_includes/_util-fns
 .l-main-section
 
   :markdown
-    # Tour of Heroes - Part 1
+    # Tour of Heroes
 
-    The Tour of Heroes tutorial takes us through the steps of creating an Angular application.
     Our grand vision is to build an app to help a staffing agency manage its stable of heroes.
     Even heroes need to find work.