anchor.diff:  a(id="filters-pipes")
   .l-main-section
   :marked
  +  ## 필터/파이프
     ## Filters/pipes
  +  Angular **파이프**는 AngularJS **필터**와 유사하게 템플릿의 데이터에 대한 포맷 지정 및 변형을 제공합니다.
  +  AngularJS에 내장된 많은 필터는 그에 대응되는 Angular 파이프가 있습니다.
  +  파이프에 대한 자세한 내용은 [파이프](../guide/pipes.html)를 확인하세요.
  +
     Angular **pipes** provide formatting and transformation for data in our template, similar to AngularJS **filters**.
     Many of the built-in filters in AngularJS have corresponding pipes in Angular.
     For more information on pipes, see [Pipes](../guide/pipes.html).
  
positive.code:     td
        :marked
          ### lowercase
        code-example.
          &lt;div>{{movie.title | lowercase}}&lt;/div>
        :marked
          Converts the string to lowercase.
      td
        :marked
          ### lowercase
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'lowercase')(format=".")
        :marked
          The Angular `lowercase` pipe does the same thing.
    tr(style=top)
      td
        :marked
          ### number
        code-example.
          &lt;td>{{movie.starRating  | number}}&lt;/td>
        :marked
          Formats a number as text.
      td
        :marked
          ### number
        +makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'number')(format=".")
        :marked
          The Angular `number` pipe is similar.
          It provides more functionality when defining
          the decimal places, as shown in the second example above.
  
          Angular also has a `percent` pipe, which formats a number as a local percentage
          as shown in the third example.
    tr(style=top)
      td
        :marked
          ### orderBy
        code-example.
          &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
        :marked
          Displays the collection in the order specified by the expression.
          In this example, the movie title orders the movieList.
      td
        :marked
          ### none
          For performance reasons, no comparable pipe exists in Angular.
          Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
  
  
negative.code:   tr(style=top)
      td
        :marked
          ### Link 태그
          ### Link tag
        code-example.
          &lt;link href="styles.css" rel="stylesheet" />
        :marked
          AngularJS는 `index.html` 파일의 head 섹션에 있는 `link` 태그를 사용하여 애플리케이션의 스타일을 정의합니다.
  
          AngularJS, uses a `link` tag in the head section of the `index.html` file
          to define the styles for the application.
      td
        :marked
          ### Link 태그
          ### Link tag
        +makeExample('cb-ajs-quick-reference/ts/src/index.html', 'style')(format=".")
        :marked
          Angular에서 link 태그를 사용하여 애플리케이션의 스타일을 `index.html` 파일에서 계속 정의 할 수 있습니다.
          그러나 이제는 컴포넌트의 스타일을 캡슐화 할 수도 있습니다.
  
          In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file.
          But now you can also encapsulate styles for your components.
        :marked
          ### StyleUrls
          ### StyleUrls
          Angular에서는 특정 컴포넌트의 스타일 시트를 정의하기 위해 
          `@Component` 메타 데이터의 `styles` 또는 `styleUrls` 프로퍼티를 사용할 수 있습니다.
  
          In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
          a style sheet for a particular component.
        +makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.ts', 'style-url')(format=".")
        :marked
          이렇게 하면 애플리케이션의 다른 부분에 영향을 끼치지 않는 개별 컴포넌트에 적합한 스타일을 설정할 수 있습니다.
  
          This allows you to set appropriate styles for individual components that won’t leak into
          other parts of the application.
  :marked
  