anchor.diff:    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)
  -  * [Components](#components)
  -  * [Templates](#templates)
  -  * [Metadata](#metadata)
  -  * [Data binding](#data-binding)
  -  * [Directives](#directives)
  -  * [Services](#services)
  -  * [Dependency injection](#dependency-injection)
  +  * [모듈(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` - the _view classes_ that belong to this module.
  +
  +    * `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` - the subset of declarations that should be visible and usable in the component [templates](#templates) of other modules.
  -
  -    * `imports` - other modules whose exported classes are needed by component templates declared in _this_ module.
  -
  -    * `providers` - creators of [services](#services) that this module contributes to
  +    * `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` - the main application view, called the _root component_, 
  +    * `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.
  
positive.code: 
  block angular-libraries
    :marked
      Angular ships as a collection of JavaScript modules. You can think of them as library modules. 
  
      Each Angular library name begins with the `!{_at_angular}` prefix.
      
      You install them with the **npm** package manager and import parts of them with JavaScript `import` statements.
      <br class="l-clear-both"><br>
  
      For example, import Angular's `Component` decorator from the `@angular/core` library like this:
    +makeExample('app/app.component.ts', 'import', '')(format='.')
    :marked
      You also import Angular _modules_ from Angular _libraries_ using JavaScript import statements:
    +makeExample('app/mini-app.ts', 'import-browser-module', '')(format='.')
    :marked
      In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this.
    +makeExample('app/mini-app.ts', 'ngmodule-imports', '')(format='.')
    :marked
      In this way you're using both the Angular and JavaScript module systems _together_.
  
      It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports".
      Hang in there. The confusion yields to clarity with time and experience.
  
    .l-sub-section
      :marked
        Learn more from the [Angular modules](ngmodule.html) page.
  
  .l-hr 
  
  .l-main-section#components
  :marked
    ## Components
  
  figure
    img(src="/resources/images/devguide/architecture/hero-component.png" alt="Component" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
  
  :marked
    A _component_ controls a patch of screen called a *view*.
  
    For example, the following views are controlled by components:
  
    * The app root with the navigation links.
    * The list of heroes.
    * The hero editor.
  
    You define a component's application logic&mdash;what it does to support the view&mdash;inside a class.
    The class interacts with the view through an API of properties and methods.
  
    <a id="component-code"></a>
    For example, this `HeroListComponent` has a `heroes` property that returns !{_an} !{_array} of heroes
    that it acquires from a service.
    `HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
  
  +makeExcerpt('app/hero-list.component.ts', 'class')
  :marked
    Angular creates, updates, and destroys components as the user moves through the application.
    Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](lifecycle-hooks.html), like `ngOnInit()` declared above.
  
  
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`.
  