anchor.diff:  +makeExcerpt('app/hero-detail.component.html', 'ngModel')
   
   :marked
  +  양방향 바인딩에서 데이터 속성값은 속성 바인딩과 마찬가지로 컴포넌트의 입력 상자로 이동합니다.
  +  사용자의 변경사항은 컴포넌트로 다시 전달되어 이벤트 바인딩과 마찬가지로 등록 정보를 최신값으로 재설정합니다.
  +
     In two-way binding, a data property value flows to the input box from the component as with property binding.
     The user's changes also flow back to the component, resetting the property to the latest value,
     as with event binding.
   
  +  애플리케이션 컴포넌트 트리의 최상위부터 모든 하위 컴포넌트까지, JavaScript 이벤트 사이클마다 Angular는 * 모든 * 데이터 바인딩을 처리합니다.
  +
     Angular processes *all* data bindings once per JavaScript event cycle,
     from the root of the application component tree through all child components.
   
   figure
     img(src="/resources/images/devguide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
   :marked
  +  데이터 바인딩은 템플릿과 해당 컴포넌트 간의 통신에서 중요한 역할을합니다.
  +
     Data binding plays an important role in communication
     between a template and its component.
   <br class="l-clear-both">
   figure
     img(src="/resources/images/devguide/architecture/parent-child-binding.png" alt="Parent/Child binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
   :marked
  +  데이터 바인딩은 부모 컴포넌트와 하위 컴포넌트 간의 통신에도 중요합니다.
  +
     Data binding is also important for communication between parent and child components.
   <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:   img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
  
  :marked
    아키텍처 다이어그램은 Angular 애플리케이션의 8가지 주요 빌딩 블록을 구분합니다.
  
    The architecture diagram identifies the eight main building blocks of an Angular application:
  
    * [모듈(Modules)](#modules)
  
      [Modules](#modules)
  
    * [컴포넌트(Components)](#components)
  
      [Components](#components)
  
    * [템플릿(Templates)](#templates)
  
      [Templates](#templates)
  
    * [메타데이터(Metadata)](#metadata)
  
      [Metadata](#metadata)
  
    * [데이터 바인딩(Data binding)](#data-binding)
  
      [Data binding](#data-binding)
  
    * [지시자(Directives)](#directives)
  
      [Directives](#directives)
  
    * [서비스(Services)](#services)
  
      [Services](#services)
  
    * [종속성 주입(Dependency injection)](#dependency-injection)
  
      [Dependency injection](#dependency-injection)
  
    이러한 빌딩 블록을 배우고, 갈 길을 계속 갑시다.
  
    Learn these building blocks, and you're on your way.
  
  .l-sub-section
    p 이 페이지에서 참조 된 코드는 <live-example></live-example>로 제공됩니다.
    p The code referenced on this page is available as a <live-example></live-example>.
  
  .l-main-section
  :marked
    ## 모듈
    ## Modules
  figure
    img(src="/resources/images/devguide/architecture/module.png" alt="Component" align="left" style="width:240px; margin-left:-40px;margin-right:10px" )
  
  block angular-modules
    :marked
      Angular앱은 모듈형이며, Angular는 _Angular 모듈_ 또는 _NgModules_라는 자체 모듈화 시스템을 사용합니다.
  
      Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
  
      _Angular 모듈_은 중요한 사항입니다.
      이 페이지에서는 모듈을 소개합니다. 보다 더 자세한 내용은 [Angular 모듈](ngmodule.html) 페이지에서 다룹니다.
  
      _Angular modules_ are a big deal. 
      This page introduces modules; the [Angular modules](ngmodule.html) page covers them in depth.
  
    <br class="l-clear-both"><br>
    :marked
      모든 Angular앱은 최소 하나 이상의 Angular 모듈 클래스를 가지며, 그것은 보통 "AppModule"이라는 이름의 [_최상위 모듈_](appmodule.html "AppModule : 최상위 모듈")입니다.
  
      Every Angular app has at least one Angular module class, [the _root module_](appmodule.html "AppModule: the root module"), 
      conventionally named `AppModule`.
  
      작은 앱에서 _최상위 모듈 _이 유일한 모듈 일 수 있지만 대부분의 앱은 애플리케이션 도메인, 워크 플로우 또는 밀접하게 엮여있는 기능 세트의 전용 코드 모음으로 이루어진 많은 _기능 모듈_을 갖고 있습니다.
  
      While the _root module_ may be the only module in a small application, most apps have many more 
      _feature modules_, each a cohesive block of code dedicated to an application domain,
      a workflow, or a closely related set of capabilities. 
  
      Angular모듈은 _최상위 모듈_ 또는 _기능 모듈_과 상관없이 `@NgModule` 데코레이터가 있는 클래스입니다
  
      An Angular module, whether a _root_ or _feature_, is a class with an `@NgModule` decorator.
    .l-sub-section
      :marked
        데코레이터는 JavaScript 클래스를 수정하는 함수입니다.
        Angular는 메타데이터를 클래스에 첨부하는 데 사용되는 데코레이터가 많기 떄문에 클래스의 의미와 작동 방식을 알고 있습니다.
        웹의 데코레이터에 대해
        <a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">
        자세히 알아보세요</a>.
  
        Decorators are functions that modify JavaScript classes.
        Angular has many decorators that attach metadata to classes so that it knows
        what those classes mean and how they should work.
        <a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.x5c2ndtx0" target="_blank">
        Learn more</a> about decorators on the web.
    :marked
      `NgModule`은 모듈을 설명하는 속성을 가진 단일 메타 데이터 객체를 갖는 데코레이터 함수입니다.
      가장 중요한 속성은 다음과 같습니다 :
  
      `NgModule` is a decorator function that takes a single metadata object whose properties describe the module. 
      The most important properties are:
  
      * `declarations` - 이 모듈에 속한 _view 클래스들_.
      Angular에는 [컴포넌트](#components), [지시자](#directives), 및 [파이프](pipes.html)의 세 가지 뷰 클래스가 있습니다.
  
        `declarations` - the _view classes_ that belong to this module.
      Angular has three kinds of view classes: [components](#components), [directives](#directives), and [pipes](pipes.html).
  
      * `exports` - 다른 모듈의 컴포넌트 [템플릿](# templates)에서 볼 수 있고 사용할 수 있어야 하는 declarations의 하위 집합입니다.
  
        `exports` - the subset of declarations that should be visible and usable in the component [templates](#templates) of other modules.
  
      * `imports` - 내보낸 클래스가 _이_ 모듈에 선언 된 컴포넌트 템플릿에 필요합니다.
  
        `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
  
      * `providers` - 이 모듈이 글로벌 서비스 수집에 기여하는 [services](# services)의 제작자; 앱의 모든 부분에서 액세스 할 수 있게됩니다.
  
        `providers` - creators of [services](#services) that this module contributes to
      the global collection of services; they become accessible in all parts of the app.
  
      * `bootstrap` - 다른 모든 앱의 뷰를 호스팅하는, _최상위 컴포넌트_라고 불리는 메인 애플리케이션 뷰. _최상위 모듈_ 만이 `bootstrap` 속성을 설정해야 합니다.
  
        `bootstrap` - the main application view, called the _root component_, 
      that hosts all other app views. Only the _root module_ should set this `bootstrap` property.
  
      여기 간단한 최상위 모듈이 있습니다:
  
      Here's a simple root module:
    +makeExample('app/mini-app.ts', 'module', 'app/app.module.ts')(format='.')
  
    .l-sub-section
      :marked
        `AppComponent`의`export`는 내보내는(export) 법을 보여주기위한 것입니다; 이 예제에서는 실제로 필요하지 않습니다. 다른 컴포넌트가 최상위 모듈을 _가져오지(import)_ 않아도 되므로 최상위 모듈은 아무 것도 _내보낼(export)_ 필요가 없습니다.
  
        The `export` of `AppComponent` is just to show how to export; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module. 
    :marked
      최상위 모듈을 _실행(bootstrap)_하여 애플리케이션을 시작합니다.
      개발하는 동안 아래의 예시처럼 `main.ts`파일에서 `AppModule`을 실행(bootstrap) 할 것 입니다.
  
      Launch an application by _bootstrapping_ its root module. 
      During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one.
        
    +makeExample('app/main.ts', '', 'app/main.ts')(format='.')
  
    :marked
      ### Angular 모듈 vs. JavaScript 모듈
      ### Angular modules vs. JavaScript modules
  
      Angular모듈 &mdash; `@NgModule`로 이루어진 클래스 &mdash; 은 Angular의 기본 기능입니다.
  
      The Angular module &mdash; a class decorated with `@NgModule` &mdash; is a fundamental feature of Angular.
  
      JavaScript는 JavaScript 객체 컬렉션을 관리하기 위한 자체 모듈 시스템을 가지고 있습니다.
      JavaScript의 모듈 시스템은 Angular 모듈 시스템과는 완전히 다르고 무관합니다.
  
      JavaScript also has its own module system for managing collections of JavaScript objects.
      It's completely different and unrelated to the Angular module system.
      
      JavaScript에서 각 _파일_은 모듈이며 파일에 정의 된 모든 객체는 해당 모듈에 속합니다.
      모듈은 `export` 키워드로 그것들을 표시함으로써 몇몇 객체를 공용(public)으로 선언합니다.
      다른 JavaScript 모듈은 * import문 *을 사용하여 다른 모듈의 공용 객체에 접근합니다.
  
      In JavaScript each _file_ is a module and all objects defined in the file belong to that module.
      The module declares some objects to be public by marking them with the `export` key word. 
      Other JavaScript modules use *import statements* to access public objects from other modules.
  