Resumen generación de documentación con Compodoc para Angular 10

Compodoc facilita la generación de la documentación de tu proyecto de Angular. A continuación, voy a exponer un resumen de como utilizarlo.

1 – Instalación

npm install -g @compodoc/compodoc

2 – Añadir en package.json el comando que lo ejecuta.

"scripts": {
"compodoc": "npx compodoc -p tsconfig.app.json"      
//En angular 10 tuve que poner tsconfig.base.json para 
//que me generase bien la documentación.
}

3 – Ejecutar la creación de la documentacion

npm run compodoc

————————————————————————

Aunque hay muchas más, como se puede ver en la documentación que facilita la gente de Compodoc. Algunas de las opciones que se puede ir añadiendo al comando de ejecución son:

-d ---------> directorio destino
-o ---------> abre automáticamente la documentación en el navegador
-s ---------> levanta el servidor de node
--theme -----> selecciona el tema
--includes --> documentacion adicional. Se pone el directorio del summary.json. 
Se crean ficheros md. https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax
-w ---------> detecta los cambios en el código y actualiza la documentación.
--customFavicon -> cambia el favicon.
--hideGenerator -> oculta el logotipo de compodoc.
-y ----------> hoja de estilos propia para compodoc. Se le indica un directorio 
donde haya un style.css.

El comando de generación añadiendo todos esos flags quedaría así:

 "compodoc": "npx compodoc -p tsconfig.base.json -d docs -o -s 
--theme vagrant --includes ./aditionaldoc -w --customFavicon ./src/favicon.ico 
--hideGenerator -y ./src/assets/cssCompodoc"

————————————————————————

Los comentarios deben añadirse así:

- Documentar un método, variable, componente,....
/**
 *
 */

- Documentar parámetro de un método
/**
 * @param variable
 */

- Documentar retorno de un método
/**
 * @returns
 */

- Ignorar en la documentacion para que no salga
/**
 * @ignore
 */

- Ejemplo de uso de un componente u otro objeto.
/**
 * @example
 *
 */

. Se puede comprobar el nivel de comentarios añadidos en la sección de cobertura de código que te genera.

– Excluir en el tsconfig.base.json los ficheros que no queremos que se revisen. Así no saldrán en la cobertura.

"exclude": [
"src/test.ts",
"e2e/**"
]

Ejemplo de uso

Fuente

Dynamic Angular Gallery

Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.

El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery

Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/

Demo funcionando en este enlace: http://gallery.disastercode.com.es

Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es

Ejemplo para creación de Pipe personalizado en Angular

Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.

//Comando de creación Pipe
ng g pipe pipes\NewLine

//código de la clase
import { Pipe, PipeTransform } from '@angular/core';
/**
 * Pipe que convierte los saltos de linea en saltos html.
 */
@Pipe({
  name: 'newLine'
})
export class NewLinePipe implements PipeTransform {
  /**
   * Metodo que realiza la transformación
   * @param value 
   * @param args 
   */
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '
');
  }
}

Ejemplo de uso:

< div [innerHtml]= "description | newline"> < /div >

Fuente Pipe

Quitar la URL Case Sensitive en el Router de Angular

Para evitar que en Angular (probado en angular 10) el Router no haga diferenciacion de las rutas en función de si está en mayúsculas/minúsculas, una posible solución es la siguiente:
En el fichero module.app.ts añadimos lo siguiente:

import { UrlSerializer } from '@angular/router';
import { LowerCaseUrlSerializer} from './lower-case-url-serializer'
...
  providers: [HttpClientModule,
    {
        provide: UrlSerializer,
        useClass: LowerCaseUrlSerializer
    }],
...

Y debemos crear la clase definida antes (LowerCaseUrlSerializer). Esta clase debe extender de DefaultUrlSerializer e implementar el método parse. En ese método lo que se puede hacer es pasar toda la url a minúsculas.

import { DefaultUrlSerializer, UrlTree } from '@angular/router';
/**
 * Elimina el case-sensitive de la url pasándola a minúsculas.
 */
export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    /**
     * Método que realiza la conversión de la url a minúsculas.
     * 
     * @param url - dirección a tratar.
     */
    parse(url: string): UrlTree {
        return super.parse(url.toLowerCase());
    }
}

Leer fichero json local con Angular

Un ejemplo de como se puede acceder a un fichero *.json ubicado en local con Angular (probado con angular 10) es el siguiente:

//Contenido del fichero data.json
{
	"titleSite" : "Dynamic Angular Gallery",
	"descriptionSite" : "Galeria dinámica en angular 10+"
}

import { Injectable } from '@angular/core';
import webData from '../../../_files/data.json';
/**
 * Servicio que realiza el acceso a la información del data.json. 
 */
@Injectable({
  providedIn: 'root'
})
export class JsonDataService {
  /**
   * Objeto en el que se va a volcar la información del fichero data.json.
   */
  public info:{
    titleSite:string, 
    descriptionSite:string,
  } = this.getInfoJson();

  /**
   * Método que devuelve el contenido del fichero data.json
   * @returns - data.json
   */
  public getInfoJson(){
    return webData;
  }
}

Por defecto, Angular no lee el archivo JSON. Así que debemos crear un archivo llamado ‘json-typings.d.ts’ dentro de la carpeta de la aplicación del proyecto. Tal que así:

declare module "*.json" {
    const value: any;
    export default value;
}

Ahora para recuperar el contenido del fichero simplemente seria invocar al servicio JsonDataService y la variable info.

IONIC: Error occurred during initialization of VM

La solución al error que se muestra a continuación al compilar una aplicación IONIC:

Es añadir la variable de entorno _JAVA_OPTIONS. Para ello ir a Inicio – Panel de control – Sistema – Avanzado – Variables de systema – Nueva.

Primera aplicación con IONIC

Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.
Se trata de una tecnología muy valida siempre que se impongan al cliente ciertas restricciones en las versiones de los dispositivos soportados. Es decir: Android 4.4+, IOS 8+ y Windows 10+ (Phone y Desktop).

Requisitos previos
– Tener instalado jdk 1.8
– Para android, tener instalado la sdk android (puedes usar el Android Studio)
– Tener instalado Gradle (descargar, descomprimirlo y luego meterlo al path)

Instalamos el framework

	npm install -g ionic@beta
	npm install -g ionic
	npm install -g cordova

Creamos la primera aplicación de ejemplo, podemos elegir uno de estos tipos:
– tabs : a simple 3 tab layout
– sidemenu: a layout with a swipable menu on the side
– blank: a bare starter with a single page
– super: starter project with over 14 ready to use page designs
– tutorial: a guided starter project

	ionic start AppExampleIonic sidemenu  --typescript

Comandos a conocer:

        //Lanza la aplicación en el emulador
	ionic serve

        //Lanza la aplicación en varios tipos de plataformas en el navegador
	ionic serve --lab

        //añade las plataformas a utilizar
	ionic cordova platform add ios android windows

        //Lanza la aplicación android
	ionic cordova run android

        //cosntruye la apliación android
	ionic cordova build android

        //Generar una version de android para producción
	ionic cordova build android --release

        //Generar una version de android para producción
	ionic cordova build ios --prod

Fuente

Aplicación que integra Spring-Boot + AngularJS + Thymeleaf

En mi repositorio de GitHub he dejado una apicación simple que integra Spring-Boot con AngularJS utilizando lo siguiente:

– Para la configuración de Spring se ha utilizado Spring Boot junto con los siguientes módulos
. . . . 1- Spring Data JPA -> como capa de persistencia.
. . . . 2- Spring Data REST con Spring HATEOAS -> para la capa de servicios rest con los que interactuará AngularJS.
. . . . 3- Spring Security -> para la Autenticación y Autorización de la aplicación.
. . . . 4- Spring MVC con Thymeleaf -> se utiliza para gestionar principalmente los listados de consulta, así como todas las vistas que no tienen formularios.
. . . . 5- AngularJS -> se utiliza para las vistas de los formularios de detalles.
. . . . 6- Bootstrap + Angular-ui + Font Awesome + Angular-Show-Errors -> para el diseño y maquetación del front end.
. . . . 7- JUnit -> pruebas unitarias.

– Se utilizan Base de datos y servidor embebidos a modo de ejemplo: H2 y Tomcat.

– Para la creación de informes se utiliza JasperReports. Se ha configurado el pom para que a partir de los ficheros /src/main/resources/static/reports/*.jrxml y genere los /src/main/webapp/jasper/*.jasper. Para ello basta con ejecutar mvn generate-resources.

– La gestión de dependencias se realiza con: Maven y bower.

Instalación
=========
1- Instalar maven (utilizada la 3.0.5)
2- Instalar el wraper de maven para spring-boot:

mvn -N io.takari:maven:wrapper

3- Se puede ejecutar de varias formas:

//Con maven:	
mvn spring-boot:run. 

//o bien

//Construyendo el jar:      
mvn clean package 
//Y haciéndolo correr con:  
java -jar target/springangularjs-0.0.1-SNAPSHOT.jar

4- Si todo va bien la aplicación correrá en: http://localhost:8080/
5- Copiar proyecto e importarlo al eclipse como proyecto de maven.
6- Recordar que para modificar las librerías de js es necesario bower. Para ello:
. . . . a- se necesita tener instalado node.js (https://nodejs.org/)
. . . . b- se necesita también tener instalado git (https://git-scm.com/download/win)
. . . . c- instalamos bower con:

                  npm install -g bower

. . . . d- finalmente ejecutando «bower install» en el proyecto nos colocara en el directorio /src/main/resources/static/bower_components las versiones de las librerías indicadas en el bower.json.

Todo el código esta subido al GitHub
Esquema de la Arquitectura
Digrama de clases

Bower

Bower es un gestor de dependencias para el desarrollo web frontend. Facilita la tarea de instalar y mantener al día las distintas librerías y frameworks del proyecto.

Instalación:
– Primero se necesita instalar node.js. Se descarga de https://nodejs.org/ y se instala el *.msi en windows.
Puedes comprobar que se ha instalado bien ejecutando por consola el comando:

node -v

– Después se instala git. Para ello hay que descargar y ejecutar https://git-scm.com/download/win

– Por último se instala el bower. Para ello necesitamos el comando npm que ya nos instaló node.js.

npm install -g bower

Para crear por primera vez el archivo bower.json lo más cómodo es, desde la raíz de tu proyecto, lanzar el comando:

bower init

El fichero bower.json sera similar a este:

{
  "name": “Prueba Bower”,
  "version": "0.0.0",
  "authors": [
    "Yo "
  ],
  "dependencies": {
    "jquery": "~3.1.0"
  }
}

En «dependencies» se indican las distintas librerías y sus versiones. El símbolo ~ indica que bower instalará la 3.1.0 o una superior cuando salga siempre que sea de la 3.1.x

Guía de comandos de bower

Angularjs

AngularJS es una librería Javascript que nos sirve para hacer aplicaciones muy avanzadas, con una experiencia de usuario de alto. Video de una charla donde los de desarrolloweb hablan sobre él:

Para el que quiera meterse algo más en código en éste artículo contiene un resumen bastante bueno que te permite empezar a aprender angularjs.