Menu

Compodoc - Documentación en Angular Apps.

angular - February 12, 2018 por Carlos Rojas
Angular CLI1.6.1Angular5.0angularfire25.0.0-rc.4

Cuando los proyectos en Angular crecen un poco más de 50 componentes y se supone va a durar en producción varios años, es buena idea tener Documentación de codigo para las generaciónes futuras.

La documentación es una de las operaciones más aburridoras en la historia de desarrollar una App mantenible y escalable. Por nuestra naturaleza de programadores posiblemente la mejor solución es tener un programa que la haga por nosotros, es por esto que tenemos a Compodoc.

Que es Compodoc ?

Compodoc es un generador de Documentación el cual va a leer los archivos de tu proyecto en Angular y va a generar una Documentación simple y elegante que va contener sus bloques de construcción junto con los comentarios que tengas en los mismos.

Caracteristicas.

Diseño simple y limpio.

La documentación queda organizada de una forma clara y simple.

Busqueda.

Tienes un buscador listo para utilizar y evitar tener que navegar en esos proyectos grandes.

Tabla de Contenido automatizada.

Todo tu contenido queda indexado de una manera facil y automatica.

Soporte de JSDoc.

Los comentarios que expliquén tu codigo van a quedar agregados a tu documentación.

Tiene algunas otras cosas interesantes pero estos me parecieron los principales.

Instalación.

npm install -g @compodoc/compodoc

Creamos una tarea en nuestro package.json para que sea mas facil.

"scripts": {
  ...
  "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
}

y cada vez que queramos actualizar nuestra documentación simplemente usamos:

npm run compodoc

Uso.

He agregado esta herramienta a nuestra App firstAngular para que puedas ver su uso rapidamente solo clonala e instalala.

npm install

Ejecuta la tarea.

npm run compodoc

Tu proyecto debe tener ahora la carpeta documentation

Ahora solo debes ingresar a esa carpeta y ejecutarla con un servidor local, yo recomiendo NWS.

y solamente ingresar a localhost.

Bueno espero que sea de ayuda y no te olvides comentar y compartir :)

Ver código

¡Compártelo!