함수가 제자리를 찾았으니, 애플리케이션 헤더에서 HTML을 추가하여 장바구니와 상품 개수를 표시할 자리를 만들 준비가 되었습니다. 코드 3-8과 같이 헤더의 마크업을 수정하세요.

코드 3-8 장바구니 지시자 추가하기: chapter-03/cart-indicator.html

<header>
  <div class="navbar navbar-default">
    <h1>{{sitename}}</h1>
  </div>
  <div class="nav navbar-nav navbar-right cart"> -- 장바구니를 오른쪽 정렬합니다. 
    <span class="glyphicon glyphicon-shopping-cart">
      {{cartItemCount}} -- 계산된 속성을 표시하는 데이터 바인딩을 보여 줍니다. 
    </span> 
  </div>
</header>

---

 

헤더에 div 요소를 추가해서 장바구니 자리를 만들고, 계산된 속성 값을 표시하기 위해 cartItemCount 바인딩을 사용했습니다. 바인딩은 카운터 옆에 장바구니 아이콘을 추가할 수 있는 스타일 훅으로 사용할 span 요소로 감쌌습니다. 이제 테스트해 볼 시간입니다.