더북(TheBook)

~/Projects/addressBook/client/addressList.html

…생략…

 

<template name=“addressInput”>

  <div class=“well”>

     <div class=“form-inline”>

        <div class=“form-group”>

            <input type=“text” class=“form-control” name=“name” placeholder=“이름”>

            <input type=“text” class=“form-control” name=“phone” placeholder=“전화번호”>

            <input type=“text” class=“form-control” name=“email” placeholder=“이메일”>

            <input type=“text” class=“form-control” name=“company” placeholder=“회사”>

            <input type=“text” class=“form-control” name=“birthday” placeholder=“생일”>

            <button class=“btn btn-info btn-sm” name=“saveAddress”>

               <i class=“glyphicon glyphicon-ok”></i> 등록

            </button>

        </div>

     </div>

  </div>

</template>


템플릿 코드 작성만으로 브라우저에서 결과를 확인할 수는 없다. body 안에 addressInput을 추가하여야 한다. main.html에 ”{{> addressInput}}” 코드를 body에 추가한다. 그러면 실행 시점에 우리가 작성한 template 코드와 대체된다. main.html에는 2개의 템플릿이 등록된다. 코드는 다음과 같다.

~/Projects/addressBook/client/main.html

<head>

    <title>Address Book</title>

</head>

 

<body>

    {{> addressInput}} <!– 입력 템플릿 추가 –>

    {{> addressList}} <!– 리스트 템플릿 추가 –>

</body>


신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.