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-model
        code-example(format="").
          &lt;input ng-model="vm.favoriteHero"/>
        :marked
          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
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngModel')(format="." )
        :marked
          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.
  
          For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel).
    tr(style=top)
      td
        :marked
          ### ng-repeat
        code-example(format="").
          &lt;tr ng-repeat="movie in vm.movies">
        :marked
          In AngularJS, the `ng-repeat` directive repeats the associated DOM element
          for each item in the specified collection.
  
          In this example, the table row (`tr`) element repeats for each movie object in the collection of movies.
      td
        :marked
          ### *ngFor
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngFor')(format="." )
        :marked
  
negative.code:     td
        :marked
          ### ng-app
          ### ng-app
        code-example.
          &lt;body ng-app="movieHunter">
        :marked
          애플리케이션의 시작 프로세스는 **부트스트래핑** 이라고 합니다.
  
          The application startup process is called **bootstrapping**.
  
          코드에서 AngularJS 앱을 부트스트랩 할 수 있지만,
          많은 애플리케이션은 `ng-app` 지시자을 사용하여 선언적으로 부트스트랩을 수행하여,
          애플리케이션의 모듈(`movieHunter`) 이름을 제공합니다.
  
          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에는 부트스트랩 지시자가 없습니다.
          코드에서 앱을 실행하려면, 애플리케이션의 루트 모듈(`AppModule`)을 `main.ts`에 명시적으로 부트스트래핑하고
          애플리케이션의 루트 컴포넌트 (`AppComponent`)는 `app.module.ts`에 부트스트랩하세요.
          
          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`.
  
          좀 더 자세한 내용은 [설치](../guide/setup.html) 페이지를 확인하세요.
  
          For more information see the [Setup](../guide/setup.html) page.
    tr(style=top)
      td
        :marked
          ### ng-class
          ### ng-class
        code-example(format="").
          &lt;div ng-class="{active: isActive}">
          &lt;div ng-class="{active: isActive,
                             shazam: isImportant}">
        :marked
          AngularJS에서는 `ng-class` 지시자가 표현식을 기반으로 CSS 클래스를 포함/제외합니다.
          대게 이 표현식은 CSS 클래스 이름으로 정의된 객체의 키와 부울 값으로 평가된 템플릿 표현식으로 정의된 객체의 값으로 이루어진, 키-값 제어 객체입니다.
  
          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.
  
          첫 번째 예제에서, `isActive`가 true이면 `active` 클래스가 엘리먼트에 적용됩니다.
  
          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
          ### ngClass
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'ngClass')(format="." )
        :marked
          Angular에서 `ngClass` 지시자는 비슷하게 작동합니다.
          표현식을 기반으로 CSS 클래스를 포함/제외합니다.
          
          In Angular, the `ngClass` directive works similarly.
          It includes/excludes CSS classes based on an expression.
  
          첫 번째 예제에서 `isActive`가 true이면 `active` 클래스가 엘리먼트에 적용됩니다.
  
          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에는 세 번째 예제에서와 같이 단일 클래스를 추가하거나 제거하는 좋은 방법인 **클래스 바인딩**이 있습니다.
  
          Angular also has **class binding**, which is a good way to add or remove a single class,
          as shown in the third example.
  
          자세한 내용은, 템플릿 구문 페이지의 [속성, 클래스 및 스타일 바인딩](../guide/template-syntax.html#other-bindings) 부분을 확인하세요.
  
          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
          ### ng-click
        code-example(format="").
          &lt;button ng-click="vm.toggleImage()">
          &lt;button ng-click="vm.toggleImage($event)">
        :marked
          AngularJS에서, `ng-click` 지시자를 사용하여 엘리먼트를 클릭 할 때 사용자 정의 동작을 지정할 수 있습니다.
  
          In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
  
          첫 번째 예제에서, 사용자가 버튼을 클릭하면,`vm` `controller as`가 참조하는 컨트롤러의 `toggleImage()`메소드가 실행됩니다.
  
          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.
  
          두 번째 예제는 이벤트에 대한 세부사항을 컨트롤러에 제공하는, `$event` 객체를 전달하는 방법을 보여줍니다.
  
          The second example demonstrates passing in the `$event` object, which provides details about the event
          to the controller.
      td
        :marked
          ### `click`이벤트에 바인드
          ### bind to the `click` event
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'event-binding')(format="." )
        :marked
          AngularJS 이벤트에 기반한 지시자는 Angular에 존재하지 않습니다.
          더 정확하게 이야기 하면, **이벤트 바인딩**을 사용하여 템플릿 뷰에서 컴포넌트로 단방향 바인딩을 정의하세요.
  
          AngularJS event-based directives do not exist in Angular.
          Rather, define one-way binding from the template view to the component using **event binding**.
  
          이벤트 바인딩의 경우, 괄호 안에 대상 이벤트의 이름을 정의하고 등호의 오른쪽에 따옴표로 묶인 템플릿 명령문을 지정하세요.
          Angular는 대상 이벤트에 대한 이벤트 핸들러를 설정합니다.
          이벤트가 발생하면 핸들러는 템플리트 명령문을 실행합니다.
  
          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.
          
          첫 번째 예제에서, 사용자가 버튼을 클릭하면 연결된 컴포넌트의 `toggleImage()`메소드가 실행됩니다.
  
          In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.
          
          두 번째 예제는 이벤트에 대한 세부사항을 컴포넌트에 제공하는, `$event` 객체를 전달하는 방법을 보여줍니다.
  
          The second example demonstrates passing in the `$event` object, which provides details about the event
          to the component.
  
          DOM 이벤트 목록은 다음을 확인하세요: https://developer.mozilla.org/en-US/docs/Web/Events.
  
          For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.
  
          자세한 내용은, 템플릿 구문 페이지의 [이벤트 바인딩](../guide/template-syntax.html#event-binding) 부분을 확인하세요.
  
          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
          ### ng-controller
        code-example(format="").
          &lt;div ng-controller="MovieListCtrl as vm">
        :marked
          AngularJS에서, `ng-controller` 지시자는 컨트롤러를 뷰에 연결합니다.
          `ng-controller` (또는 라우팅의 일부로서 컨트롤러를 정의)를 사용하면 뷰가 그 뷰와 연관된 컨트롤러 코드에 연결됩니다.
  
          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
          Angular에서 템플릿은 더 이상 관련 컨트롤러를 지정하지 않습니다.
          오히려, 컴포넌트가 연관된 클래스를 컴포넌트 클래스 데코레이터의 일부로 지정합니다.
  
          In Angular, the template no longer specifies its associated controller.
          Rather, the component specifies its associated template as part of the component class decorator.
  
          좀 더 자세한 내용은, [아키텍쳐 개요](../guide/architecture.html#component)를 확인하세요.
  
          For more information, see [Architecture Overview](../guide/architecture.html#component).
  
    tr(style=top)
      td
        :marked
          ### ng-hide
          ### ng-hide
          AngularJS에서 `ng-hide` 지시자는 표현식을 기반으로 연관된 HTML 요소를 표시하거나 숨깁니다.
          좀 더 자세한 내용은 [ng-show](#ng-show)를 확인하세요.
  
          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
          ### `hidden` 프로퍼티에 바인딩
          ### bind to the `hidden` property
          Angular에서는 프로퍼티 바인딩을 사용합니다; 내장된 *hide* 지시자가 없습니다.
          좀 더 자세한 내용은 [ng-show](#ng-show)를 확인하세요.
  
          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
          ### ng-href
        code-example(format="").
          &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
        :marked
          `ng-href` 지시자는 AngularJS가 브라우저에서 URL을 가져오기 전에 바인딩 표현식을 적절한 URL로 대체 할 수 있도록 `href` 속성을 전처리 할 수 있게 합니다.
  
          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.
  
          AngularJS에서는 `ng-href`가 내비게이션의 일부로 라우트를 활성화하는 데 자주 사용됩니다.
  
          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
          Angular에서 라우팅은 다르게 처리됩니다.
  
          Routing is handled differently in Angular.
      td
        :marked
          ### `href` 프로퍼티에 바인딩
          ### bind to the `href` property
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'href')(format="." )
        :marked
          Angular는 프로퍼티 바인딩을 사용합니다; 내장된 *href* 지시자가 없습니다.
          엘리먼트의 `href` 프로퍼티를 대괄호로 묶고, 따옴표가 붙은 템플릿 표현식으로 설정하세요.
  
          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.
  
          프로퍼티 바인딩에 대한 좀 더 자세한 내용은, [템플릿 구문](../guide/template-syntax.html#property-binding)을 확인하세요.
  
          For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
  
          Angular에서, `href`는 더 이상 라우팅에 사용되지 않습니다.
          세 번째 예제와 같이, 라우팅은 `routerLink`를 사용합니다.
  
          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
          라우팅에 대한 자세한 내용은, [라우팅 & 내비게이션](../guide/router.html#router-link)을 확인하세요.
  
          For more information on routing, see [Routing & Navigation](../guide/router.html#router-link).
  
    tr(style=top)
      td
        :marked
          ### ng-if
          ### ng-if
        code-example(format="").
          &lt;table ng-if="movies.length">
        :marked
          AngularJS에서 `ng-if` 지시자는 표현식을 기반으로 DOM의 일부를 제거하거나 다시 만듭니다.
          만약 표현식이 거짓이면, 엘리먼트가 DOM에서 제거됩니다.
  
          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.
  
          이 예제에서, `movies` 배열의 길이가 0보다 크지 않으면 `table` 엘리먼트가 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
          ### *ngIf
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'ngIf')(format="." )
        :marked
          Angular의 `*ngIf` 지시자는 AngularJS의 `ng-if` 지시자와 동일하게 동작합니다. 
          `*ngIf` 지시자는 표현식을 기반으로 DOM의 일부를 제거하거나 다시 만듭니다.
  
          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.
  
          이 예제에서, `movies` 배열에 길이가 없다면, `table` 엘리먼트는 DOM으로부터 제거됩니다.
  
          In this example, the `table` element is removed from the DOM unless the `movies` array has a length.
  
          이 예제에서는 `ngIf` 앞에 (*)가 필요합니다.
          자세한 내용은 [구조 지시자](../guide/structural-directives.html)에서 확인하세요.
  
          The (*) before `ngIf` is required in this example.
          For more information, see [Structural Directives](../guide/structural-directives.html).
  