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

.statement
  h4 Live Examples
  p.
    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/lt7vPiJYwkHDKaTHGCUC?p=preview')>TypeScript Example</a> or <a href='http://plnkr.co/edit/CqquuEyUw2LgwY0IrXUZ?p=preview'> ES5 Example</a>.

.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-box
    pre.prettyprint.linenums.lang-javascript(data-name="es5")
      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(data-name="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:

  .code-box
    pre.prettyprint.linenums.lang-javascript(data-name="es5")
      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(data-name="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.