AngularJS 사이트에서 API를 설명하는 부분을 살펴보면, 소스 코드가 깔끔하게 표시되어 있고 해당 소스를 실행한 데모도 한 화면에서 모두 테스트할 수 있는 것을 볼 수 있다.
게다가 소스코드에 하이라이팅까지 깔끔하게 되어있는데, 구글 개발자들은 이러한 부분을 한꺼번에 처리해줄 수 있는 모듈까지도 AngularJS에 포함해서 제공하고 있다.
바로 bootstrap-prettify 모듈이다.
이 모듈을 앵귤러 앱 모듈에 포함시켜주고, ng-template 으로 소스코드만 넣어주면 알아서 소스코드도 보여주고 데모도 만들어서 돌려주는 형태이다. 하지만 이러한 bootstrap-prettify 모듈 사용법에 대한 설명은 잘 찾아보기 어려운 것이 사실이다.
이번에 분석한 내용을 바탕으로 이해하기 쉽도록 주석을 충분히 첨부해서 bootstrap-prettify 모듈을 사용하는 예제를 작성해 보았다.
예제 자체에 포함되어 있는 주석을 찬찬히 읽어보고 직접 조금씩 수정해본다면 쉽게 bootstrap-prettify 모듈에 대해 마스터할 수 있을 것이다.
게다가 소스코드에 하이라이팅까지 깔끔하게 되어있는데, 구글 개발자들은 이러한 부분을 한꺼번에 처리해줄 수 있는 모듈까지도 AngularJS에 포함해서 제공하고 있다.
바로 bootstrap-prettify 모듈이다.
이 모듈을 앵귤러 앱 모듈에 포함시켜주고, ng-template 으로 소스코드만 넣어주면 알아서 소스코드도 보여주고 데모도 만들어서 돌려주는 형태이다. 하지만 이러한 bootstrap-prettify 모듈 사용법에 대한 설명은 잘 찾아보기 어려운 것이 사실이다.
이번에 분석한 내용을 바탕으로 이해하기 쉽도록 주석을 충분히 첨부해서 bootstrap-prettify 모듈을 사용하는 예제를 작성해 보았다.
예제 자체에 포함되어 있는 주석을 찬찬히 읽어보고 직접 조금씩 수정해본다면 쉽게 bootstrap-prettify 모듈에 대해 마스터할 수 있을 것이다.
