docs(making-components): First pass of this chapter

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

@@ -13,8 +13,8 @@
     "title": "User Input"
   },
 
-  "creating-components": {
-    "title": "Creating Components"
+  "making-components": {
+    "title": "Making Components"
   },
 
   "talking-to-components": {

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

@@ -0,0 +1,99 @@
+.l-main-section
+  p.
+    <strong>Mission:</strong> By the end of this chapter, you should be able to create a child component and render
+    it within a parent component. You should also be able to bind to the child component.
+
+  .l-sub-section
+    h3#section-examples Examples:
+    ul
+        li
+            a(href='') TypeScript
+        li
+            a(href='') ES5
+
+  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:
+
+  pre.prettyprint.linenums.lang-javascript
+    code.
+      //ES5
+      function ParentComponent() {
+        this.message = "I'm the parent";
+      }
+      ParentComponent.annotations = [
+        new angular.Component({
+          selector: "parent"
+        }),
+        new angular.View({
+          template:
+            '&lt;h1&gt;{{ message }}&lt;/h1&gt;' +
+            '&lt;child&gt;&lt;/child&gt;',
+          directives: [ChildComponent]
+        })
+      ];
+
+  pre.prettyprint.linenums.lang-typescript
+    code.
+      //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";
+        }
+      }
+
+  p You then just need to write the <code>ChildComponent</code> class to make it work:
+
+  pre.prettyprint.linenums.lang-javascript
+    code.
+      //ES5
+      function ChildComponent() {
+        this.message = "I'm the child";
+      }
+      ChildComponent.annotations = [
+        new angular.Component({
+          selector: "child"
+        }),
+        new angular.View({
+          template: '&lt;p&gt; {{ message }} &lt;/p&gt;'
+        })
+      ];
+
+  pre.prettyprint.linenums.lang-typescript
+    code.
+      //TypeScript
+      @Component({
+        selector: 'child'
+      })
+      @View({
+        template: `
+          &lt;p&gt; {{ message }} &lt;/p&gt;
+        `
+      })
+      class ChildComponent {
+        constructor() {
+          this.message = "I'm the child";
+        }
+      }
+
+  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
+  p.
+      [TODO: Motivate communication between components with iterator example that passes index to the child]