anchor.diff:  
   a(id='top')
   :marked
  +  우리의 앱은 브라우저 제목 표시줄이 우리가 원하는 모든 것을 말하게 할 수 있어야 합니다.
  +  이 요리책은 그 방법을 설명합니다.
  +
     Our app should be able to make the browser title bar say whatever we want it to say.
     This cookbook explains how to do it.
   :marked
  +  **<live-example name="cb-set-document-title"></live-example>을 확인하세요**.
  +
     **See the <live-example name="cb-set-document-title"></live-example>**.
   
   table
     tr
       td
         :marked
  +        라이브 예제에서 브라우저 제목 표시줄 변경을 보기 위해서는, Plunker 편집기에서 오른쪽 상단의 아이콘을 클릭하여 다시 연 다음, 오른쪽 상단의 파란색 'X'버튼을 클릭하여 미리보기 창을 엽니다.
  +
           To see the browser title bar change in the live example,
           open it again in the Plunker editor by clicking the icon in the upper right,
           then pop out the preview window by clicking the blue 'X' button in the upper right corner.
  
positive.code: 
  
  :marked
    ## The problem with *&lt;title&gt;*
  
    The obvious approach is to bind a property of the component to the HTML `<title>` like this:
  code-example(format='').
    &lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
  :marked
    Sorry but that won't work.
    The root component of our application is an element contained within the `<body>` tag.
    The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.
  
    We could grab the browser `document` object and set the title manually.
    That's dirty and undermines our chances of running the app outside of a browser someday.
  .l-sub-section
    :marked
      Running your app outside a browser means that you can take advantage of server-side
      pre-rendering for near-instant first app render times and for SEO.  It means you could run from
      inside a Web Worker to improve your app's responsiveness by using multiple threads.  And it
      means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
  
  :marked
    ## Use the *Title* service
    Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
    The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API
    for getting and setting the current HTML document title:
  
    * `getTitle() : string` &mdash; Gets the title of the current HTML document.
    * `setTitle( newTitle : string )` &mdash; Sets the title of the current HTML document. 
    
    Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
  
  +makeExample( "cb-set-document-title/ts/src/app/app.component.ts", "class", "src/app/app.component.ts (class)" )(format='.')
  :marked
    We bind that method to three anchor tags and, voilà!
  figure.image-display
     img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title")
  
  :marked
    Here's the complete solution
  
  +makeTabs(
  
negative.code: 
  .l-main-section
  :marked
    ## 우리가 *부트스트랩*에 *Title* 서비스를 제공하는 이유
  
    ## Why we provide the *Title* service in *bootstrap*
  
    일반적으로 애플리케이션 전반의 서비스를 최상위 애플리케이션 컴포넌트인 `AppComponent`에 제공하는 것을 추천합니다.
  
    We generally recommended providing application-wide services in the root application component, `AppComponent`.
  
    런타임 Angular 환경을 구성하기 위해 예약한 위치인 부트스트핑 동안에 타이틀 서비스를 등록하는 것을 추천합니다.
  
    Here we recommend registering the title service during bootstrapping,
    a location we reserve for configuring the runtime Angular environment.
  
    그것이 바로 우리가 하는 일입니다.
    `Title` 서비스는 Angular *브라우저 플랫폼*의 일부입니다.
    만약 애플리케이션을 다른 플랫폼에서 실행하면, 특정 플랫폼에 대한 "문서 제목"의 개념을 이해하는 다른 `Title` 서비스를 제공해야 합니다.
    이상적으로 애플리케이션 자체는 런타임 환경을 알고도 신경 쓰지 않습니다.
  
    That's exactly what we're doing.
    The `Title` service is part of the Angular *browser platform*.
  