anchor.diff:    Angular can call the component's constructor with those services as arguments.
     This is *dependency injection*.
   
  +  `HeroService` 주입 과정은 다음과 같습니다:
  +
     The process of `HeroService` injection looks a bit like this:
   figure
     img(src="/resources/images/devguide/architecture/injector-injects.png" alt="Service" )
   :marked
  +  만약 주입자에 `HeroService`가 없으면 어떻게 만드는지 어떻게 알 수 있습니까?
  +
     If the injector doesn't have a `HeroService`, how does it know how to make one?
  +
  +  간략하게 이야기하면, 주입자로 `HeroService`의 ** 제공자 **를 미리 등록 했어야 합니다.
  +  공급자는 일반적으로 서비스 클래스 자체를 생성하거나 반환할 수 있는 서비스입니다.
   
     In brief, you must have previously registered a **provider** of the `HeroService` with the injector.
     A provider is something that can create or return a service, typically the service class itself.
   
   block registering-providers
     :marked
  +    공급자를 모듈 또는 컴포넌트에 등록 할 수 있습니다.
  +
       You can register providers in modules or in components.
       
  +    일반적으로 공급자를 [최상위 모듈](#module)에 추가하여 동일한 서비스 인스턴스가 모든 곳에서 사용 가능하도록 합니다.
  +
       In general, add providers to the [root module](#module) so that
       the same instance of a service is available everywhere.
   
     +makeExcerpt('app/app.module.ts (module providers)', 'providers')
   
   :marked
  +  또는, `@Component` 메타데이터의 `providers`속성에 컴포넌트 레벨로 등록하세요 :
  +
     Alternatively, register at a component level in the `providers` property of the `@Component` metadata:
   
   +makeExcerpt('app/hero-list.component.ts (component providers)', 'providers')
   
   :marked
  +  컴포넌트 레벨에 등록하면 해당 컴포넌트의 새로운 인스턴스가 나올 때마다 서비스의 새 인스턴스를 얻게 됩니다.
  +
     Registering at a component level means you get a new instance of the
     service with each new instance of that component.
   
     <!-- We've vastly oversimplified dependency injection for this overview.
     The full story is in the [dependency injection](dependency-injection.html) page. -->
   
  +  종속성 주입에 대해 기억해야 할 점 :
  +
     Points to remember about dependency injection:
   
  +  * 종속성 주입은 Angular 프레임워크에 연결되어 어디서나 사용됩니다.
  +
     * Dependency injection is wired into the Angular framework and used everywhere.
  +
  +  * *주입자(injector)*가 주요 메커니즘입니다.
  +    * 주입자는 생성한 서비스 인스턴스의 *컨테이너*를 유지 관리합니다.
  +    * 주입자는 * 공급자 *로부터 새로운 서비스 인스턴스를 생성 할 수 있습니다.
   
     * The *injector* is the main mechanism.
       * An injector maintains a *container* of service instances that it created.
       * An injector can create a new service instance from a *provider*.
   
  +  * *공급자*는 서비스를 만드는 방법입니다.
  +
     * A *provider* is a recipe for creating a service.
   
  +  * 주입자와 함께 * 공급자 *를 등록하세요.
  +
     * Register *providers* with injectors.
   
   .l-hr 
   
   .l-main-section
   :marked
  +  ## 마무리
     ## Wrap up
   
  +  Angular 애플리케이션의 8가지 주요 빌딩 블록에 대한 기본 사항을 배웠습니다.
  +
     You've learned the basics about 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)
  +
  +  Angular 애플리케이션의 모든 기능을 위한 토대가 될 것입니다.
  +  그러나 당신이 알아야 할 모든 것을 포함하지는 않습니다.
   
     That's a foundation for everything else in an Angular application,
     and it's more than enough to get going.
     But it doesn't include everything you need to know.
   
  +  다음은 Angular의 다른 중요한 기능과 서비스를 알파벳순으로 나열한 간단한 목록입니다.
  +  대부분 이 문서에서 다루고 있습니다 (또는 곧 지원 될 예정입니다).
  +
     Here is a brief, alphabetical list of other important Angular features and services.
     Most of them are covered in this documentation (or soon will be).
   
  +  > [**애니메이션**](animations.html): Angular의 애니메이션 라이브러리로 애니메이션 기법이나 CSS에 대한 깊은 지식없이 컴포넌트 동작에 애니메이션을 적용합니다.
  +
     > [**Animations**](animations.html): Animate component behavior
     without deep knowledge of animation techniques or CSS with Angular's animation library.
   
  +  > **변경사항 감지**: 변경사항 감지 문서에서는 컴포넌트 속성 값이 변경된 시점, 화면 업데이트 시기 및 ** 영역 **을 사용하여 비동기 활동을 가로 채 변경사항 감지 전략을 실행하는 방법을 Angular가 결정하는 방법에 대해 설명합니다.
  +
     > **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed,
     when to update the screen, and how it uses **zones** to intercept asynchronous activity and run its change detection strategies.
   
  +  > **이벤트**: 이벤트 문서에서는 컴포넌트 및 서비스를 이용해 이벤트 게시 및 구독에 대한 메커니즘으로 이벤트를 발생시키는 방법에 대해 다룹니다.
  +
     > **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for
     publishing and subscribing to events.
   
  +  > [**폼**](forms.html): HTML 기반 유효성 검사와 이물질 검사로 복잡한 데이터 입력 시나리오를 지원합니다.
  +
     > [**Forms**](forms.html): Support complex data entry scenarios with HTML-based validation and dirty checking.
   
  +  > [**HTTP**](server-communication.html): HTTP 클라이언트를 통해 서버와 통신하여 데이터를 가져와 데이터를 저장하고 서버 측 작업을 호출합니다.
  +
     > [**HTTP**](server-communication.html): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
  +
  +  > [**라이프사이클-훅**](lifecycle-hooks.html): 라이프사이클-훅 인터페이스를 구현하여 컴포넌트의 생성에서 파기까지 주요 수명을 관리하세요.
   
     > [**Lifecycle hooks**](lifecycle-hooks.html): Tap into key moments in the lifetime of a component, from its creation to its destruction,
     by implementing the lifecycle hook interfaces.
   
  +  > [**파이프**](pipes.html): 템플릿의 파이프를 사용하여 표시할 값을 변환하여 사용자 경험을 개선하세요. 
  +  다음과 같은 '통화'파이프 표현식을 생각해 보세요.
  +  
     > [**Pipes**](pipes.html): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression:
     >
     > > `price | currency:'USD':true`
     >
  +  > 42.33의 가격을 `$42.33`으로 표시합니다.
  +
     > It displays a price of 42.33 as `$42.33`.
  +
  +  > [**라우터**](router.html): 클라이언트 애플리케이션 내에서 페이지 간 이동을 하고, 브라우저를 떠나지 마세요.
   
     > [**Router**](router.html): Navigate from page to page within the client
       application and never leave the browser.
   
   block angular-feature-testing
     :marked
  +    > [**테스트**](testing.html): _Angular 테스트 플랫폼_을 사용하여 Angular 프레임워크와 상호 작용할 때 애플리케이션 파트에서 단위 테스트를 실행합니다.
  +
       > [**Testing**](testing.html): Run unit tests on your application parts as they interact with the Angular framework
       using the _Angular Testing Platform_.
  
positive.code: 
  .l-main-section
  :marked
    ## Dependency injection
  figure
    img(src="/resources/images/devguide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px" )
  :marked
    _Dependency injection_ is a way to supply a new instance of a class
    with the fully-formed dependencies it requires. Most dependencies are services.
    Angular uses dependency injection to provide new components with the services they need.
  <br class="l-clear-both">
  :marked
    Angular can tell which services a component needs by looking at the types of its constructor parameters.
    For example, the constructor of your `HeroListComponent` needs a `HeroService`:
  
  +makeExcerpt('app/hero-list.component.ts (constructor)', 'ctor')
  
  :marked
    When Angular creates a component, it first asks an **injector** for
    the services that the component requires.
  
    An injector maintains a container of service instances that it has previously created.
    If a requested service instance is not in the container, the injector makes one and adds it to the container
  
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.
  