CodeSchool Angular.js Level4

첫시간은 ng-include다. 여러 페이지에서 재사용해야 하는 경우 include를 이용하는게 좋겠지.

index.html

<div ng-show="tab.isSet(1)">

  <h4>Description</h4>

  <blockquote>{{product.description}}</blockquote>

</div>

이 부분에서 h4와 blockquote 내용을 밖으로 빼낸다. 

product-description.html

<h4>Description</h4>

<blockquote>{{product.description}}</blockquote>

그리고 

<div ng-show="tab.isSet(1)" ng-include="'product-description.html'">  

</div>

이렇게 include하면 완료. 여기서 주의해야할 점은 작은 따옴표로 감싸줘야 한다는 것!

ng-include를 쓰는 대신 커스텀 태그를 만들어 쓰는 것도 가능하다.

app.js

app.directive("productDescription", function(){

  return {

    restrict : 'E',

    templateUrl : 'product-description.html'

  };

});

restrict가 E 인 경우 Element 를 뜻하고, A 인 경우 Attribute 이다. 지금은 Element로 만든다.

index.html

<div ng-show="tab.isSet(1)">

   <product-description ng-show="tab.isSet(1)"></product-description>

</div>

html에서 쓸때는 camelCase가 아닌 -(dash)로 쓴다. html에서 쓴 dash가 javascript에선 camelCase로 자동 변환된다.

그리고 이때 ng-show는 또 써줘야한다. 안써도 잘 나오던데... 쓰라고 하는 이유가 뭔지 모르겠다.

이번엔 Element가 아닌 Attribute로 만들어보자. 사용법은 거의 똑같다.

app.js

app.directive("productSpecs", function(){

  return {

    restrict : 'A',

    templateUrl : 'product-specs.html'

  };

});

Element 태그 만드는 것과 동일하다. 다만 restrict 이 부분만 A로 달라진다.

그리고 사용할때는

index.html

<div ng-show="tab.isSet(2)" product-specs>            

</div>

이렇게 속성값으로 넣어주면 해당 div밑에 product-specs.html의 내용이 include가 된다. 간단하다.

이어서... Controller도 include로 빼서 쓸 수 있다!!

이렇게 빼서 쓰면 일단 소스가 깔끔해지니 좋긴 하다. 귀찮긴 하지만..

index.html

<!-- Product Tabs  -->

<section ng-controller="TabController as tab">

  <ul class="nav nav-pills">

    <li ng-class="{ active:tab.isSet(1) }">

      <a href ng-click="tab.setTab(1)">Description</a>

    </li>

    <li ng-class="{ active:tab.isSet(2) }">

      <a href ng-click="tab.setTab(2)">Specs</a>

    </li>

    <li ng-class="{ active:tab.isSet(3) }">

      <a href ng-click="tab.setTab(3)">Reviews</a>

    </li>

  </ul>

  <!--  Description Tab's Content  -->

  <div ng-show="tab.isSet(1)" ng-include="'product-description.html'">

  </div>

  <!--  Spec Tab's Content  -->

  <div product-specs ng-show="tab.isSet(2)"></div>

  <!--  Review Tab's Content  -->

  <product-reviews ng-show="tab.isSet(3)"></product-reviews>

</section>

여기 있는 section을 통째로 커스텀 태그로 뺄 예정이다.

app.js

app.controller("TabController", function() {

  this.tab = 1;

  this.isSet = function(checkTab) {

    return this.tab === checkTab;

  };

  this.setTab = function(setTab) {

    this.tab = setTab;

  };

});

app.directive('productTabs', function(){

    return {

      restrict : 'E',

      templateUrl : 'product-tabs.html'      

    };    

  });

현재 상태를 보면 당연히 TabController는 따로 작성되어있다. productTabs directive에 이 컨트롤러를 추가해줘야 한다.

app.directive('productTabs', function(){

    return {

      restrict : 'E',

      templateUrl : 'product-tabs.html',

      controller : function(){

        this.tab = 1;

        this.isSet = function(checkTab) {

          return this.tab === checkTab;

        };

        this.setTab = function(setTab) {

          this.tab = setTab;

        }; 

      },

      controllerAs : 'tab'

    };    

  });

이렇게 TabController에 있던 내용을 그대로 넣어주면 된다. Alias는 contollerAs property에 할당해주면 오케이.

그리고 기존에 TabController 부분은 삭제한다.

이제 거의 다 되었다.

index.html의 section 저부분을 통째로 product-tabs.html로 옮긴다. 그리고 ng-controller 태그를 삭제해준다.

product-tabs.html

<section ng-controller="TabController as tab">

  ... 생략 ...

</section>

index.html

<!-- Product Tabs  -->

<product-tabs></product-tabs>

짠!

이렇게 하면 컨트롤러까지 따로 빼는게 가능하다. 대단하지 않은가!?

여기까지 완료하면 레벨 4 끝.

레벨 5에선 드디어 실제로 data를 등록하는 법을 배운다. 

* 소스는 모두 http://campus.codeschool.com 에서 가져온 겁니다.