[Directive Driven] 히치하이커를 위한 Directive 만들어 보기

2014. 8. 4. 00:11 AngularJS/Concept

[Directive Driven] 히치하이커를 위한 Directive 만들어 보기

Highchart에 대한 Directive를 만들며서 controller, compile, link 등을 써보고 있는데, 성능 최적화 및 실시간 데이터 업데이트 방법등에 대해서 고민하면서 좋은 글이 있어서 머리도 정리할 겸 따라쟁이 해본다.

1. Directive 사용 영역

- HTML안에서 element, attribute, class name, comment 4영역

2. 이름 규칙

- HTML안에서 하이픈(hyphens) 으로 단어 사이를 구분하여 사용

- JavaScript안에서 단어사이는 대문자로 구분하여 사용

App.directive('theQuickSilverRiderYoungsik', function() { ... });

3. 테스트전 SaaS

- http://plnkr.co/ 코드 테스트 Preview 서비스를 이용한다

- GitHub 아이디로 로그인 한후 -> [Launch the Editor] 한다

- 자신의 테스트 코드 및 타인의 코드를 서로 공유할 수 있다

- 해당 서비스 자체가 AngularJS 기반으로 만들어 졌다 (Node.js + AngularJS 소스 공개)

- 그림 오른쪽의 angular.js 라이브러리 버전을 선택하면 index.html에 자동 삽입되고 코딩을 시작할 수 있다

4. 간단한 테스트 수행

- 사용자 정의 태그를 만든다

- 이름 : angular

// index.html

// script.js

var App = angular.module('App', []);
 
App.directive('angular', function() {
  return {
    restrict: 'ECMA',
    link: function(scope, element, attrs) {
      var img = document.createElement('img');
      img.src = 'http://goo.gl/ceZGf';
 
 
      // directives as comment
      if (element[0].nodeType === 8) {
        element.replaceWith(img);
      } else {
        element[0].appendChild(img);            
      }
    }
  };
});

- plunker preview

- <angular> 태그에 <img> 태그가 추가되었다

5. Directive Definition

- AngularJS는 기동될 때(bootstrapped), 사용자정의 및 빌트인된 directives를 찾고 $compile() 메소드를 이용하여 컴파일을 한다

- compile 메소드 역할 : 모든 directives 요소를 찾아서 우선순위 sort하고 link function을 만든다. 또한 scope와 element사이의 2-way data binding을 위하여 $watch를 셋팅하거나 event listener를 생성된 (ng-app, ng-controller, ng-include, etc)같은 scope에 link한다

- Directive 정의

var myModule = angular.module(...); 
myModule.directive('directiveName', function (injectables) {
  return {
    restrict: 'A',
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    priority: 0,
    transclude: false,
    scope: false,
    terminal: false,
    require: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
});

5-1. Compile function

- compile function이 link function을 만든다(produce)

- 2개 파라미터

+ tElement : directive가 선언되어진 template element (jQuery object이다. 따라서 $로 다시 wrap하지 마라)

+ tAttrs : tElement와 관련된 모든 attributes 목록

- ng-repeat같은 것을 사용할 경우 성능상의 이슈로 compile function이 사용된다. DOM과 scope객체를 연결지으려는데 데이터를 가져올 때마다 바인드과정을 거치지 않고 최초 한번 바인드되고 link functioin을 통해서 데이터 변경시에 scope-DOM간의 2-way 바인딩을 하여 변경을 반영한다

// in index.html

// in script.js

App.directive('compileCheck', function() {
   return {
     restrict: 'A',
     compile: function(tElement, tAttrs) {
       tElement.append('Added during compilation phase!');
     }
   };
});

- index.html에 <div compile-check></div>를 추가하고 script.js에 코드를 추가하면 하단에 'Added during compilation phase!'가 첨부된다

5-2. Link function

- DOM과 scope 객체를 2-way data binding 하는 역할이다. compile function에서는 scope 객체에 접근할 수 없다

- $watch 메소드를 통하여 사용자정의 listener를 생성할 수 있다. (register등록은 angular가 자동으로 해준다)

- 3개 파라미터

+ element : directive와 바인드된 요소

+ scope : directive에 의해 사용되어지는 scope 객체

+ attrs : 요소와 관련된 모든 attribute목록

5-3. Restrict

- E : elements

- A : attributes

- C : class name (CSS)

- M : comments

- HTML5 호환 표기가 가능한다 : 빌트인 ng-bind 사용

<span ng:bind="name"></span>
<span ng_bind="name"></span>
<span ng-bind="name"></span>
<span data-ng-bind="name"></span>
<span x-ng-bind="name"></span>

5-4. Template

- html에 넣은 요소와 교체할 내역

- html안의 태그 반복되는 부분을 별도의 모듈화로 중복을 방지 할 수 있다

- https://api.github.com/repos/angular/angular.js 호출하면 angular.js 관련 정보가 JSON 형태로 나옴

// index.html

// script.js

- $scope는 $rootScope를 상속받기 때문에 template에서 {{header}}, {{footer}}를 호출 할 수 있다

5-5. TemplateUrl

- 템플릿 마크업 및 별도의 html 파일로 관리한다

- template 파일의 로딩을 빠르게 할려면 메모리에 적제하여 사용한다. $templateCache

- <script> 태그를 이용한다

<script type='text/ng-template' id='whoiam.html'></script>

- inde.html 내역 : template script 태그를 head 태그안에 넣는다. id로 whoiam.html을 사용한다

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

    
    <script type='text/ng-template' id='whoiam.html'>
      <div class="thumbnail" style="width: 260px;">
          <div><img ng-src="{{data.owner.avatar_url}}" style="width:100%;"/></div>
          <div class="caption">
            <p><b>Name: </b>{{data.name}}</p>
            <p><b>Homepage: </b>{{data.homepage}}</p>
            <p><b>Watchers: </b>{{data.watchers}}</p>
            <p><b>Forks: </b>{{data.network_count}}</p>
          </div>
        </div>
     </script>
</head>

<body>
    <h1>Hello Angular</h1>
    
    <div ng-controller="DemoCtrl">
      <div whoiam>This text will be overwritten</div>
    </div>
</body>

</html>

- script.js 내역

- 호출한 angular.js 정보가 출력된다

5-6. Replace

- directive를 설정한 태그를 템플릿 태그로 교체하고자 할때 따라서 template 또는 templateUrl과 함께 사용한다

- replace: true

- index.html : elment, attribute, class name, comment 4가지 설정

- script.js 내역

var App = angular.module('App', []);

App.directive('angular', function() {
return {
    restrict: 'ECMA',
    template: '<img src="http://goo.gl/ceZGf" />',
    replace: true
};
});

- 결과 html

// attribute

// class name

// element

// comment

- img 태그가 4개 생성되어서 이미지가 4개 보인다

5-7. Priority

- 우선순위에 따라서 compile/link의 순위를 정한다. 값이 클 수록 우선순위가 높다

- 이것은 미리 컴파일된 directive의 결과값을 체크하여 수행할 필요가 있을 때 사용한다

- zero이면 priority 설정을 하지 않고 default priority를 사용한다

- bootstrap의 'btn-primary' 클래스를 적용하려고 할때 index.html

- script.js 내역 : 우선순위로 btn이 먼저 생성되었으므로 primary에 대한 적용이 가능해 진다

- bootstrap의 btn-primary CSS가 적용된 버튼이 보인다

5-8. Terminal

- 가장 최근에 수행된 directive에 terminal: true를 설정하면 그 이후 directive는 수행되지 않는다

- index.html 내역

- script.js 내역 : first -> second -> noEntry 가 수행되지만 second에 terminal: true 설정으로 매noEntry는 수행되지 않는다

- ng-repate, ng-switch는 priority 높음에도 나중에 수행됨. 버그?

- first, second의 priority 값을 서로 바꾸어 보라 : 버튼의 text 순서가 바뀔 것이다. 또는 noEntry의 priority값을 1000이하로 하면 directive가 실행된다

5-9. Controller

- Directive를 제어를 담당한다.

- $scope, this 를 사용하여 properties/methods를 바인할 수 있다

- this 키워드로 바인딩된 데이터는 require옵션을 사용하여 controller를 injecting함으로써 다른 directives에서 엑세스할 수 있게 한다.

- 5-10의 require에서 예제 진행함

App.directive('powerSwitch', function() {
      return {
        restrict: 'A',
        controller: function($scope, $element, $attrs) {
          $scope.state = 'on';
 
          $scope.toggle = function() {
            $scope.$apply(function() {
              $scope.state = ($scope.state === 'on' ? 'off' : 'on');
            });
          };
 
          this.getState = function() {
            return $scope.state;
          };
        },
     };
});

5-10. Require

- controller를 다른 directive에 전달해서 compile/linking function안에 연관시킬 수 있다

- 같은 element 또는 부모와 바인드 되어야 한다

- prefixed 부호가 붙는다

+ ? : 지정한 directive가 없더라도 에러가 발생시키지 않는다

+ ^ : 부모 element위의 directive를 찾는다. 같은 element위치는 유효하지 않다

- index.html 내역

- script.js 내역

- 변경내역 : toggle off일 경우

<div class="btn btn-success ng-binding disabled" power-switch="">

      SWITCHED OFF

    <div class="bulb off" ng-class="bulb" lightbulb=""></div></div>

- 결과 화면 : uppercase 필터 사용

5-11. Scope

- scope가 hierarchy하게 생성/유지되면 element와 부모 element사이의 scope를 설정한다.

- 그러나 자신은 부모 Scope하고만 바인드되어 data에 접근 할 수 있다. 최상위 scope는 $rootScope 객체이다

- scope: false

+ 새로운 scope 객체를 만들지 않고 부모가 가진 같은 scope 객체를 공유한다

- scope: true

+ 새로운 scope 객체를 만들고 부모 scope 객체를 상속받는다

- index.html 내역

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

</head>

<body>
    <h1>Hello Angular</h1>
    
    <div class='well'>
      Bound to $rootScope: <input type="text" ng-model="parent">
      <div child></div>
    </div>

    <div class='form well' ng-controller="OneCtrl">
      ng-controller="OneCtrl"<br/>

      <input type="text" ng-model="children"><br/>
      I am {{children}} and my grandfather is {{parent}}

      <div child></div>
    </div>
</body>

</html>

- script.js 내역 : child 디렉티브의 link에서 conole.log(scope)를 찍어본다

- 결과화면 : child의 scope: true, false로 변경해 가면서 console.log의 내역을 비교해 본다

- scope: true

// 첫번째 child의 $parent객체를 보면 ROOT이다

// 두번째 child의 $parent 객체를 보면 controller의 scope.children='The One' 값이 보임. 즉, controller scope가 부모이다

// Chrom에서 보면 scope 구조도가 보인다

- scope: false

// 첫번째 child의 $parent객체를 보면 ROOT이다

// 두번째 child의 $parent 객체를 보면 ROOT 이다

// 002 는 ROOT scope 이고 그 밑으로 controller scope만 존재하고 child는 이것을 공유한다

- scope: 'isolate'

+ 부모 scope를 상속받지 않는다. 그러나 scope.$parent로 부모 scope를 억세스 할 수 있다

+ iscope.$parent을 사용하지 않고 isolated scope와 부모 scope간의 데이터 공유방법은 어떻게 하는가?

isolated scope는 당신이 부모 scope로 부터 properties를 끌어내어 local scope와 바인드하는 object/hash를 갖는다

1) @ : 부모 scope property 와 local scope 값을 바인딩한다. 원하는 값 전달시 {{}} 를 사용한다

2) = : 부모 scope (전달전 측정되어질) property 를 직접 바인딩 한다

3) & : 속해있는 scope context안에서 수행될 expression 또는 method 와 바인딩 한다

- prefix parent property @, children property =, shout() method & 를 준 예제

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>

</head>

<body>
    <h1>Hello Angular</h1>
    
    <div class='well'>
      Bound to $rootScope: <input type="text" ng-model="parent">
      <div child parent='{{parent}}' shout="shout()"></div>
    </div>

    <div class='form well' ng-controller="OneCtrl">
      ng-controller="OneCtrl"<br/>
      <input type="text" ng-model="children"><br/>
      I am {{children}} and my grandfather is {{parent}}
      <div child parent="{{parent}}" children="children" shout="shout()"></div>
    </div>

</body>

</html>

- script.js 내역

r App = angular.module('App', []);

App.run(function($rootScope) {
    $rootScope.parent = 'ROOT';

    $rootScope.shout = function() {
        alert("I am bound to $rootScope");
    };
});

App.directive('child', function() {
    return {
        restrict: 'A',
        scope: {
            parent: '@',
            children: '=',
            shout: '&'
        },
        template: '<div class="btn btn-link" ng-click="shout()">I am a directive and my father is {{parent || "NIL"}} as well as {{children || "NIL"}}</div>'
    };
});

App.controller('OneCtrl', function($scope) {
    $scope.children = 'The One';

    $scope.shout = function() {
        alert('I am inside ng-controller');
    };
});

- 결과화면

* scope: isolate 에 대한 이해는 egghead.io 사이트를 참조한다

5-12. Transcude

- ngTransclude를 통하여 DOM에 transcluded DOM을 insert 할 수 있다

- transclude: true
transcluded DOM을 template에서 ngTransclude directive에 삽입한다

// index.html

<!DOCTYPE html>

<html ng-app="App">

<head>
    
    <script data-require="angular.js@1.1.5"
      data-semver="1.1.5"
      src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    
    <script type='text/ng-template' id='whoiam.html'>
      <div class="thumbnail" style="width: 260px;">
        <div><img ng-src="{{data.owner.avatar_url}}" style="width:100%;"/></div>
        <div class="caption">
          <p><b>Name: </b>{{data.name}}</p>
          <p><b>Homepage: </b>{{data.homepage}}</p>
          <p><b>Watchers: </b>{{data.watchers}}</p>
          <p><b>Forks: </b>{{data.network_count}}</p>
          <marquee ng-transclude></marquee>
        </div>
      </div>
    </script>
</head>

<body style='padding:30px;'>
<div whoiam>I got transcluded</div>
</body>
</html>

// script.js

// DOM 내역

</div>

    <span class="ng-scope">
      I got transcluded
    </span>

</marquee>

</div>

// 결과 화면 : I got transcluded 메세지가 오른쪽에서 왼쪽으로 움직인다

- transclude: 'element'

+ transclude link function을 compile function안에 정의한다

// index.html

// script.js

var App = angular.module('App', []);
App.directive('transcludeElement', function() {
    return {
        restrict: 'A',
        transclude: 'element',
        compile: function(tElement, tAttrs, transcludeFn) {

           // return 펑션이 link 펑션이 된다. 해당 펑션안에서 scope 객체 데이터 바인딩을 제어한다
            return function (scope, el, tAttrs) {
                transcludeFn(scope, function cloneConnectFn(cElement) {
                    tElement.after('<h2>I was added during compilation </h2>').after(cElement);
                });
            };
        }
    };
});

App.directive('child', function(){
    return {
        restrict: 'E',
        link: function($scope, element, attrs) {
            element.html(' with my child');
        }
    };
});

// DOM 내역

<body style="padding:30px;">
      
    <div class="ng-scope" transclude-element="">
      I got transcluded
      <child>
         with my child
      </child>

</div>

    <h2>
      I was added during compilation
    </h2>

</body>

// 결과 화면

<참조>

- 원문 : The Hitchhiker’s Guide to the Directive

- Scoep Isolate 참조 : egghead.io 사이트

- Yeoman 사용하기

저작자표시 비영리 변경금지

'AngularJS > Concept' 카테고리의 다른 글

[AngularJS] v1.3 - One-time bindings (0)	2015.01.05
[AngularJS] 배우는 방법 & 기본 개념 잡기 (2)	2014.08.03
[Directive Driven] 하이브리드 앱 프레임워크 for Angular.js (0)	2014.06.17
[Directive Driven] Google Chart Directive 사용하기 (0)	2014.06.04
[AngularJS] Prototypal 상속과 Isolated Scope의 관계에 대하여 (0)	2013.11.28

posted by Peter Note

AI Convergence

Publication

Tag

Category

Recent Post