AngularJS 웹사이트는 어떻게 생성되나?

⌘ 웹사이트 소스코드는 angular.js가 빌드 될 때 생성

• /angular.js/blob/master/Gruntfile.js#L310
• docs라는 Grunt Task가 정의
  • /angular.js/blob/master/lib/grunt/plugins.js#L37-L42

 

⌘ 결과 확인

• 쉘에서 명령어를 실행

grunt package webserver

• 브라우저에서 URL 접근

http://0.0.0.0:8000/build/docs

• angularjs.org와 동일한 화면이 보임

 

⌘ docs 빌드는 glup 사용

 

⌘ 문서생성은 dgeni 사용

• /angular.js/blob/master/docs/gulpfile.js#L5
• /angular.js/blob/master/docs/gulpfile.js#L51-L57

 

⌘ bootstrap CSS와 AngularJS로 만들어짐

• /angular.js/blob/master/docs/docs.config.js#L80-L98
• /angular.js/blob/master/docs/docs.config.js#L99-L105

 

---

 

⌘ Dgeni

 

⌘ Dgeni는 document processor들을 파이프라인으로 연동한 툴, 즉 여러 document processor 묶음이다. Technology agnostic - 서로 다른 문제들을 해결 위해 여러 다른 도구들을 사용한다는 관점

• http://en.wikipedia.org/wiki/Document_processor
• /dgeni#architecture
• /dgeni-example/blob/master/README.md#why-should-i-use-dgeni

 

⌘ 기본 엔진은 구현은 간단?! 프로세서들이 Promise를 통해 Chaining 됨

• /dgeni/blob/master/lib/doc-processor.js#L108-L134

 

⌘ deni-packages가 있다. 문서를 생성하기 위한 패키지들

• 요기에 AngularJS용 ngdoc-package 패키지가 있다

 

⌘ 정작 Dgeni 자체가 문서화가 잘 되어 있지 않다며 example을 제공

• /dgeni-example/blob/master/README.md#how-does-dgeni-work

• 사용예 - jsdoc 패키지를 사용한다면

  • /dgeni-example/blob/master/docs/dgeni.conf.js#L7
  • /dgeni-example/blob/master/src/app.js#L1-L3

• 사용예 - nunjucks template를 사용한다면

  • /dgeni-example/blob/master/docs/dgeni.conf.js#L10
  • /dgeni-example/blob/master/docs/templates/common.template.html