블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

06-25 02:49

Category

Recent Comment

2013. 4. 9. 09:56 AngularJS/Concept

재사용성을 위하여 사용자 정의 컴포넌트는 어떻게 만들 수 있는지 알아보자. Markdown 컴포넌트를 만들어 본다



1) 코딩하기 

  - <markdown> 태그안에 들어가는 마크다운 포멧을 해석하여 주는 showdown library는 GitHub에서 다운로드 받는다 

  - 해당 내용을 showdown 라이브러리에서 해석할 수 있도록 컴포넌트를 만든다 


  - 사전준비 

     + 소스복제 : git clone https://github.com/ysyun/prototyping

     + 모듈소스 : cd prototyping/angularjs/component


  - component.html 소스코드 

    + ng-app 태그를 통하여 어떤 모듈을 사용할지 지정

    + showdown 로컬에 다운로드

    + component.js 안에 myApp안에 사용할 markdown directive 를 정의한다

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Hello World using Directives</title>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<script src="../../underscore/underscore-min.js"></script>
     <script src="../../showdown/compressed/showdown.js"></script>
<script src="component.js"></script>
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<markdown>
[[MobiCon]](http://mobicon.tistory.com/)

This is Test
============
    'function() { console.log('hi youngsik'); }
</markdown>


</body>
</html>


  - component.js 소스코드 

    + angular.module 정의

    + ng-app=myApp 에 대한 모듈이며, 의존관계 없음

    + new Showdown.converter()를 통하여 마크다운 포멧 해석기 생성

    + 'E' : DOM Element 지정, A-attribute, C-class, M-comment (참조)

angular.module('myApp', [])
    .directive('markdown', function() {
        var converter = new Showdown.converter();
        return {
            restrict : 'E',
            link : function (scope, element, attrs) {
                var htmlDiv = converter.makeHtml(element.text());
                console.log(htmlDiv);
                element.html(htmlDiv);
            },
// template: '<textarea rows="10" cols="10"></textarea>'
        }
    })


** 소스 : https://github.com/ysyun/prototyping/tree/master/angularjs/component



2) 동영상

  - component-1
 
  - component-2



<참조>

  - 원문 : http://blog.angularjs.org/2012/05/custom-components-part-1.html

              http://blog.angularjs.org/2012/05/custom-components-part-2.html

posted by peter yun 윤영식