재사용성을 위하여 사용자 정의 컴포넌트는 어떻게 만들 수 있는지 알아보자. 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) 동영상
<참조>
- 원문 : http://blog.angularjs.org/2012/05/custom-components-part-1.html
http://blog.angularjs.org/2012/05/custom-components-part-2.html
'AngularJS > Concept' 카테고리의 다른 글
| [AngularJS] 개발자 가이드 - 03. HTML 컴파일러 (0) | 2013.04.10 |
|---|---|
| [AngularJS] 개발자 가이드 - 02. 시작하기 (0) | 2013.04.10 |
| [AngularJS] 개발자 가이드 - 01. 개요 (0) | 2013.04.10 |
| [SPA] Bootstrap과 Node.js 이용해 만들기 (1) (0) | 2013.01.24 |
| [SPA] 기본개념 잡기 (0) | 2013.01.11 |