anchor.diff:  figure
     img(src="/resources/images/devguide/architecture/component-tree.png" alt="Metadata" align="left" style="width:300px; margin-left:-40px;margin-right:10px" )
   :marked
  +  `<hero-detail>`이 기본 HTML 요소들 사이에서 얼마나 편하게 있는지 보세요. 
  +  커스텀 컴포넌트는 같은 레이아웃에서 기본 HTML과 자연스럽게 섞여 있습니다.
  +
     Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
   
   <br class="l-clear-both">
  
positive.code:     
    .l-sub-section
      :marked
        <a href="http://exploringjs.com/es6/ch_modules.html" target="_blank">Learn more about the JavaScript module system on the web.</a>
    :marked
      These are two different and _complementary_ module systems. Use them both to write your apps.
  
  :marked
    ### Angular libraries
  
  figure
  
negative.code: 
  .l-main-section
  :marked
    ## 템플릿
    ## Templates
  figure
    img(src="/resources/images/devguide/architecture/template.png" alt="Template" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
  :marked
    동료 ** 템플릿 **을 사용하여 컴포넌트 뷰를 정의합니다. 템플릿은 Angular에서 컴포넌트를 렌더링하는 방법을 알려주는 HTML 폼입니다.
  
    You define a component's view with its companion **template**. A template is a form of HTML
    that tells Angular how to render the component.
  
    템플릿은 몇 가지 차이점을 제외하고는 일반 HTML처럼 보입니다. 
    다음은 우리의 `HeroListComponent`를 위한 템플릿입니다 :
  
    A template looks like regular HTML, except for a few differences. Here is a
    template for our `HeroListComponent`:
  
  +makeExample('app/hero-list.component.html')
  
  :marked
    이 템플릿은 `<h2>`와`<p>`같은 전형적인 HTML 요소를 사용하지만 약간의 차이점이 있습니다.
    `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, 및 `<hero-detail>`와 같은 코드는 Angular의 [템플릿 구문](template-syntax.html)을 사용합니다.
  
    Although this template uses typical HTML elements like `<h2>` and  `<p>`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>` uses Angular's [template syntax](template-syntax.html).
  
    템플릿의 마지막 줄에서, `<hero-detail>`태그는 새로운 컴포넌트인 `HeroDetailComponent`를 나타내는 커스텀 요소입니다.
  
    In the last line of the template, the `<hero-detail>` tag is a custom element that represents a new component, `HeroDetailComponent`.
    
    `HeroDetailComponent`는 우리가 보고있던 `HeroListComponent`와는 *다른* 컴포넌트입니다.
    `HeroDetailComponent`(코드는 표시되지 않음)는 `HeroListComponent`의 목록에서 사용자가 선택한 특정 히어로에 대한 사실을 보여줍니다.
    `HeroDetailComponent`는 `HeroListComponent`의 ** 자식 **입니다.
  
    The `HeroDetailComponent` is a *different* component than the `HeroListComponent` you've been reviewing.
    The `HeroDetailComponent` (code not shown) presents facts about a particular hero, the
    hero that the user selects from the list presented by the `HeroListComponent`.
  