anchor.diff:      td
         :marked
           ### ng-model
  +        ### ng-model
         code-example(format="").
           &lt;input ng-model="vm.favoriteHero"/>
         :marked
  +        AngularJS에서 `ng-model` 지시자가 폼 컨트롤을 템플릿과 연결된 컨트롤러의 프로퍼티에 바인딩합니다.
  +        이렇게하면 **양방향 바인딩**이 제공되어 뷰의 값에 대한 모든 변경 사항이 모델과 동기화되고
  +        모델 변경 사항이 뷰의 값과 동기화됩니다.
  +
           In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
           This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
       td
         :marked
           ### ngModel
  +        ### ngModel
         +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngModel')(format="." )
         :marked
  +        Angular에서 **양방향 바인딩**은 `[()]`로 표시되며, "상자 안 바나나"라고도 묘사됩니다.
  +        이 구문은 (컴포넌트에서 뷰로의) 프로퍼티 바인딩과 (뷰에서 컴포넌트로) 이벤트 바인딩 을 모두 정의하여, 양방향 바인딩을 제공하는 지름길입니다.
  +
           In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
           and event binding (from the view to the component), thereby providing two-way binding.
   
  +        ngModel의 양방향 바인딩에 대한 자세한 정보는, [템플릿 구문](../guide/template-syntax.html#ngModel)에서 확인하세요.
  +
           For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel).
     tr(style=top)
       td
         :marked
           ### ng-repeat
  +        ### ng-repeat
         code-example(format="").
           &lt;tr ng-repeat="movie in vm.movies">
         :marked
  +        AngularJS에서, `ng-repeat` 지시자는 지정된 컬렉션의 각 항목에 대해 연관된 DOM 엘리먼트를 반복합니다.
  +
           In AngularJS, the `ng-repeat` directive repeats the associated DOM element
           for each item in the specified collection.
   
  +        이 예제에서 테이블 행 (`tr`) 엘리먼트는 movie 컬렉션의 각 movie 객체에 대해 반복됩니다.
  +
           In this example, the table row (`tr`) element repeats for each movie object in the collection of movies.
       td
         :marked
  +        ### *ngFor
           ### *ngFor
         +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngFor')(format="." )
         :marked
  
positive.code:   tr(style=top)
      td
        :marked
          ### Bindings/interpolation
        code-example.
           Your favorite hero is: {{vm.favoriteHero}}
        :marked
          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.
  
          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
          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.
  
          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
          To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
  
          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
          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.
  
          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
          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 has true template input variables that are explicitly defined using the `let` keyword.
  
          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 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.
  
negative.code: 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.
  
  