anchor.diff:  include ../_util-fns
   a(id="top")
   :marked
  +  _Angular_는 오늘 그리고 앞으로 Angular를 위한 이름입니다.
  +  _AngularJS_는 모든 v1.x 버전 Angular의 이름입니다.
  +
     _Angular_ is the name for the Angular of today and tomorrow.
     _AngularJS_ is the name for all v1.x versions of Angular.
   
  +  이 가이드는 AngularJS 구문을 그에 맞는 Angular 구문으로 매핑하여 
  +  AngularJS를 Angular로 전환하도록 도움을 줄겁니다.
  +
     This guide helps you transition from AngularJS to Angular
     by mapping AngularJS syntax to the equivalent Angular syntax.
   
   :marked
  +  **<live-example name="cb-ajs-quick-reference"></live-example>에서 Angular 구문을 확인하세요**.
  +
     **See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
   
  +  ## 내용
  +  
     ## Contents
  +
  +  이 페이지에는 아래의 내용이 있습니다:
  +  
     This page covers:
  +
  +  * [템플릿 기본사항](#template-basics) - 바인딩과 지역 변수.
  +
     * [Template basics](#template-basics) - binding and local variables.
   
  +  * [템플릿 지시자](#template-directives) - 내장 지시자 `ngIf`와 `ngClass`.
  +
     * [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`.
   
  +  * [필터/파이프](#filters-pipes) - Angular에서 *파이프*로 알려진, 내장 *필터*.
  +
     * [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular.
   
  +  * [모듈/컨트롤러/컴포넌트](#controllers-components) - Angular의 *모듈*은 AngularJS의 *모듈*과 약간 다르고,
  +  *컨트롤러*는 Angular의 *컴포넌트*입니다.
  +
     * [Modules/controllers/components](#controllers-components) - *modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular.
   
  +  * [스타일 시트](#style-sheets) - AngularJS 보다 더 많은 CSS 옵션 제공.
  +
     * [Style sheets](#style-sheets) - more options for CSS than in AngularJS.
   
   .l-main-section
   :marked
  +  ## 템플릿 기본사항
     ## Template basics
  +  
  +  템플릿은 Angular 애플리케이션의 사용자가 직면하게 되는 부분으로, HTML로 작성됩니다.
  +  다음 표에는 주요 AngularJS 템플릿 기능과 그에 해당하는 Angular 템플릿 구문이 나와 있습니다.
  +
     Templates are the user-facing part of an Angular application and are written in HTML.
     The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.
   
  
positive.code:     td
        :marked
          ### ng-app
        code-example.
          &lt;body ng-app="movieHunter">
        :marked
          The application startup process is called **bootstrapping**.
  
          Although you can bootstrap an AngularJS app in code,
          many applications bootstrap declaratively with the `ng-app` directive,
          giving it the name of the application's module (`movieHunter`).
      td
        :marked
          ### Bootstrapping
        +makeExample('cb-ajs-quick-reference/ts/src/main.ts','','main.ts')(format="." )
        <br>
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.module.1.ts','','app.module.ts')(format="." )
  
        :marked
          Angular doesn't have a bootstrap directive.
          To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
          in `main.ts`
          and the application's root component (`AppComponent`) in `app.module.ts`.
  
          For more information see the [Setup](../guide/setup.html) page.
    tr(style=top)
      td
        :marked
          ### ng-class
        code-example(format="").
          &lt;div ng-class="{active: isActive}">
          &lt;div ng-class="{active: isActive,
                             shazam: isImportant}">
        :marked
          In AngularJS, the `ng-class` directive includes/excludes CSS classes
          based on an expression. That expression is often a key-value control object with each
          key of the object defined as a CSS class name, and each value defined as a template expression
          that evaluates to a Boolean value.
  
          In the first example, the `active` class is applied to the element if `isActive` is true.
  
          You can specify multiple classes, as shown in the second example.
      td
        :marked
          ### ngClass
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'ngClass')(format="." )
        :marked
          In Angular, the `ngClass` directive works similarly.
          It includes/excludes CSS classes based on an expression.
  
          In the first example, the `active` class is applied to the element if `isActive` is true.
  
          You can specify multiple classes, as shown in the second example.
  
          Angular also has **class binding**, which is a good way to add or remove a single class,
          as shown in the third example.
  
          For more information see the [Attribute, Class, and Style Bindings](../guide/template-syntax.html#other-bindings) section of the Template Syntax page.
  
    tr(style=top)
      td
        :marked
          ### ng-click
        code-example(format="").
          &lt;button ng-click="vm.toggleImage()">
          &lt;button ng-click="vm.toggleImage($event)">
        :marked
          In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
  
          In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
  
          The second example demonstrates passing in the `$event` object, which provides details about the event
          to the controller.
      td
        :marked
          ### bind to the `click` event
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'event-binding')(format="." )
        :marked
          AngularJS event-based directives do not exist in Angular.
          Rather, define one-way binding from the template view to the component using **event binding**.
  
          For event binding, define the name of the target event within parenthesis and
          specify a template statement, in quotes, to the right of the equals. Angular then
          sets up an event handler for the target event. When the event is raised, the handler
          executes the template statement.
  
          In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
  
          The second example demonstrates passing in the `$event` object, which provides details about the event
          to the component.
  
          For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
  
          For more information, see the [Event Binding](../guide/template-syntax.html#event-binding) section of the Template Syntax page.
  
    tr(style=top)
      td
        :marked
          ### ng-controller
        code-example(format="").
          &lt;div ng-controller="MovieListCtrl as vm">
        :marked
          In AngularJS, the `ng-controller` directive attaches a controller to the view.
          Using the `ng-controller` (or defining the controller as part of the routing) ties the
          view to the controller code associated with that view.
      td
        :marked
          ### Component decorator
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.ts', 'component')(format="." )
        :marked
          In Angular, the template no longer specifies its associated controller.
          Rather, the component specifies its associated template as part of the component class decorator.
  
          For more information, see [Architecture Overview](../guide/architecture.html#component).
  
    tr(style=top)
      td
        :marked
          ### ng-hide
          In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
          an expression. For more information, see [ng-show](#ng-show).
      td
        :marked
          ### bind to the `hidden` property
          In Angular, you use property binding; there is no built-in *hide* directive.
          For more information, see [ng-show](#ng-show).
    tr(style=top)
      td
        :marked
          ### ng-href
        code-example(format="").
          &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
        :marked
          The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
          can replace the binding expression with the appropriate URL before the browser
          fetches from that URL.
  
          In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
        code-example(format="").
          &lt;a ng-href="#movies">Movies&lt;/a>
        :marked
          Routing is handled differently in Angular.
      td
        :marked
          ### bind to the `href` property
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'href')(format="." )
        :marked
          Angular, uses property binding; there is no built-in *href* directive.
          Place the element's `href` property in square brackets and set it to a quoted template expression.
  
          For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
  
          In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example.
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'router-link')(format="." )
        :marked
          For more information on routing, see [Routing & Navigation](../guide/router.html#router-link).
  
    tr(style=top)
      td
        :marked
          ### ng-if
        code-example(format="").
          &lt;table ng-if="movies.length">
        :marked
          In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
          based on an expression. If the expression is false, the element is removed from the DOM.
  
          In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
      td
        :marked
          ### *ngIf
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngIf')(format="." )
        :marked
          The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes or recreates a portion of the DOM based on an expression.
  
          In this example, the `table` element is removed from the DOM unless the `movies` array has a length.
  
          The (*) before `ngIf` is required in this example.
          For more information, see [Structural Directives](../guide/structural-directives.html).
  
negative.code:   tr(style=top)
      td
        :marked
          ### 바인딩/삽입식
          ### Bindings/interpolation
        code-example.
           Your favorite hero is: {{vm.favoriteHero}}
        :marked
          AngularJS에서 중괄호로 묶인 표현은 단방향 바인딩을 나타냅니다.
          이것은 엘리먼트의 값을 템플릿과 연관된 컨트롤러의 프로퍼티에 바인딩합니다.
  
          In AngularJS, an expression in curly braces denotes one-way binding.
          This binds the value of the element to a property in the controller
          associated with this template.
  
          `controller as`구문을 사용할 때,
          바인딩의 출처에 대해 특정해야하기 때문에 바인딩은 컨트롤러 별칭(`vm` 또는`$ctrl`)으로 시작됩니다.
  
          When using the `controller as` syntax,
          the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you
          have to be specific about the source of the binding.
      td
        :marked
          ### 바인딩/삽입식
          ### Bindings/interpolation
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'interpolation')(format="." )
        :marked
          Angular에서 중괄호로 묶인 템플릿 표현식은 여전히 단방향 바인딩을 나타냅니다.
          이것은 엘리먼트의 값을 컴포넌트의 프로퍼티에 바인당합니다.
          바인딩 컨텍스트는 암시적이고 있고 항상 관련된 컴포넌트이므로, 참조 변수가 필요하지 않습니다.
  
          In Angular, a template expression in curly braces still denotes one-way binding.
          This binds the value of the element to a property of the component.
          The context of the binding is implied and is always the
          associated component, so it needs no reference variable.
  
          자세한 내용은, 템플릿 구문 페이지의 [삽입식](../guide/template-syntax.html#interpolation) 부분을 확인하세요.
  
          For more information, see the [Interpolation](../guide/template-syntax.html#interpolation) section of the Template Syntax page.
    tr(style=top)
      td
        :marked
          ### 필터
          ### Filters
        code-example.
           &lt;td>{{movie.title | uppercase}}&lt;/td>
        :marked
          AngularJS 템플릿의 출력을 필터링하려면, 파이프 문자 (|) 와 하나 이상의 필터를 사용하십시오.
  
          To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
  
          이 예제는 `title` 프로퍼티를 대문자로 필터링합니다.
  
          This example filters the `title` property to uppercase.
      td
        :marked
          ### 파이프
          ### Pipes
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'uppercase')(format="." )
        :marked
          Angular에서는 출력을 필터링하기 위해 파이프 (|) 문자와 유사한 구문을 사용하지만, 이제는 그것들을 **파이프**라고 부릅니다.
          AngularJS의 내장 필터 중 (전부는 아니지만) 대다수는 Angular의 내장 파이프입니다.
  
          In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
          Many (but not all) of the built-in filters from AngularJS are
          built-in pipes in Angular.
  
          자세한 내용은,아래의 [필터/파이프](#filters-pipes) 머릿말을 확인하세요.
  
          For more information, see the heading [Filters/pipes](#filters-pipes) below.
    tr(style=top)
      td
        :marked
          ### 지역 변수
          ### Local variables
        code-example(format="").
          &lt;tr ng-repeat="movie in vm.movies">
            &lt;td>{{movie.title}}&lt;/td>
          &lt;/tr>
        :marked
          여기, `movie`는 사용자가 정의한 지역변수입니다.
  
          Here, `movie` is a user-defined local variable.
      td
        :marked
          ### 입력 변수
          ### Input variables
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'local')(format="." )
        :marked
          Angular는 `let` 키워드를 사용하여 명시적으로 정의된 실제 템플릿 입력 변수를 가지고 있습니다.
  
          Angular has true template input variables that are explicitly defined using the `let` keyword.
  
          자세한 내용은, 템플릿 구문 페이지의 [ngFor 세부구문](../guide/template-syntax.html#ngForMicrosyntax) 부분을 확인하세요.
  
          For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax) section of the Template Syntax page.
  :marked
    [Back to top](#top)
  
  .l-main-section
  :marked
    ## 템플릿 지시자
    ## Template directives
  
    AngularJS는 템플릿에 대해 70개가 넘는 내장 지시자를 제공합니다.
    그것들 중 많은 것들은 보다 유능하고 표현력이 좋은 바인딩 시스템 때문에 Angular에서 필요하지 않습니다.
    다음은 AngularJS에 내장된 주요 지시자 중 일부와 그에 해당하는 Angular의 항목입니다.
  
    AngularJS provides more than seventy built-in directives for templates.
    Many of them aren't needed in Angular because of its more capable and expressive binding system.
    The following are some of the key AngularJS built-in directives and their equivalents in Angular.
  