Angular es un potente framework, basado en el lenguaje TypeScript, mantenido por Google y modificado desde una versión anterior nombrada AngularJS. Se basa en módulos y componentes que junto al sistema de imports (importación de módulos) permite crear proyectos con una estructura ordenada y limpia evitando el conocido "código espagueti". Orientado en el modelo MVC (modelo-vista-controlador) permite distinguir de forma clara el Front-End del Back-End. Angular es un proyecto escalable, flexible y de código abierto y se ha convertido en uno de los frameworks más populares de los últimos tiempos.

ANGULAR CLI

Angular CLI  (Command Line Interface) es una herramienta del propio Angular que permite  crear el árbol de directorios y archivos necesarios (scaffolding) para un nuevo proyecto Angular, esto se hace a través de una linea de comandos. 

En caso de no disponer de NodeJS es necesario instalarlo

INSTALAR NODEJS

apt install nodejs

INSTALAR ANGULAR CLI

npm install -g @angular/cli

DESINSTALAR ANGULAR CLI

npm uninstall -g @angular/cli

npm cache clear --force

CREAR PROYECTO ANGULAR

ng new [nombre_proyecto] --[opcion]

Ver opciones: 

ng --help

ng new --help

Ejemplo de creación de un proyecto

ng new preproyecto-angular --prefix pre --style scss --skip-install

PREVIEW (Modo Desarrollo)

ng serve

El comando ng serve de Angular crea un servidor local que permite mostrar la aplicación en modo de prueba.

ng serve -o

ng serve --port 4500

ng serve --prod

La opción "-o" o "--open" ejecuta la aplicación en modo de prueba automáticamente en el navegador predeterminado del sistema, con el "--port" permite especificar el puerto del servidor local. La opción "--prod" optimiza el código del proyecto.

CONSTRUCCIÓN DE UN PROYECTO ANGULAR

ng build

Para desplegar el proyecto al usuario final se puede hacer uso de "build" que crea un directorio en la raíz nombrado "dist/nombre_del_proyecto/"  que contiene todos los archivos necesarios para poder ejecutar la aplicación en un servidor.

ng build --prod

La opción "prod" optimiza el código eliminando espacios y acortando variables y el llamado "tree shaking" que excluye import y export estáticos de módulos EcmaScript que no necesita el proyecto.

PROYECTO ANGULAR EN APACHE

Una vez construido el proyecto con build es posible comprobar la aplicación final en apache en el puerto 8080

http-server dist/nombreproyecto

PRUEBAS CON KARMA (UNIT TESTS Y E2E TESTS)

Angular provee de una herramienta basada en Javascript llamada Karma.js. Karma permite ejecutar en el navegador tests del proyecto y mantenerlos activos para realizar comprobaciones cada vez que se actualiza el proyecto.

UNIT TESTS

Las pruebas unitarias comprueban pequeños módulos de forma independiente que permiten encontrar fácilmente las líneas de error, son muy rápidas y funcionan siempre.

ng test

E2E TESTS (END TO END)

Las pruebas extremo a extremo son útiles para ciertos tipos de errores pero no identifica las líneas de código erróneas, son más lentas ya que necesitan recorrer todo el código y fallan en caso de cualquier fallo.( por ejemplo el caso de un componente externo).

ng e2e

Nota:  Es necesario tener node.js instalado para disponer de Karma. 

CREAR UN BLOQUE ANGULAR

Angular Cli permite crear una serie de bloques "Angular" ya predefinidos (módulos, interfaces, componentes,etc...)

ng generate [bloque] [nombre_bloque] [--opciones] 

Ejemplo de creación de un componente

ng generate component /users/user --module app

Mismo ejemplo de forma abreviada

ng g c /users/user --module app

Bloques disponibles en Angular Cli:

• appShell
• application
• class
• component
• directive
• enum
• guard
• interface
• library
• module
• pipe
• service
• serviceWorker
• universal

CREAR MÓDULO ANGULAR

ng generate module material --module app

CREAR COMPONENTE ANGULAR

ng generate component material/compprueba --module material

Al crear un módulo, Angular crea un directorio con el nombre indicado y dentro un archivo typescript (extensión .ts) con el sufijo ".module" La opción "--module" relaciona el módulo a crear (nombrado material) con el módulo principal (app). En el caso de un componente, Angular crea un directorio con el nombre indicado y dentro cuatro archivos con el sufijo ".component" y su extensión html, css, ts, spec.ts respectivamente. Se puede indicar el lugar a crear añadiendo la ruta al nombre. La opción "--module" relaciona el componente a crear(compprueba) con el módulo indicado (material).

Para que el anterior componente sea dinámico en Angular, es suficiente con añadir las siguientes líneas al archivo app-routing.module.ts

import { ComppruebaComponent } from './material/compprueba/compprueba.component';
const routes: Routes = [
  {
    path: 'compprueba',
    component: ComppruebaComponent,
  }
];