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

.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]