Dudas varias sobre Angular

Todas las dudas que pueden surgir sobre Angular y que se pueden explicar brevemente

Cómo se crea una clase en Angular desde la terminal

Aquí pongo el código que se pone en la terminal para crear una clase en Angular. No olvidar encontrarse en la carpeta deseada.

ng g class <nombre>

Por ejemplo, si queremos crear el componente footer, utilizamos:

ng generate class footer.component

Tan solo que una vez creado tenemos que modificar el nombre de la clase desde dentro de «footer.component.ts» y renombrarla a «FooterComponent» para cumplir con el estandar y que no de fallo por el punto, «.».

Crear una Clase de Servicio en Angular desde la terminal

Vamos a ver cómo crear un servicio desde la terminal.

ng g service <nombre>

Crear un componente en Angular

Abrir la terminal de comandos en Atom y escribimos el siguiente comando. Vamos a generar un formulario dentro de la carpeta usuarios. Al añadir la bandera «flat» estamos indicando que NO cree la carpeta form, dentro de la carpeta usuarios.

ng g c usuarios/form --flat

¿Qué es CORS?

Son las siglas de Cross Origin Resource Charing, mediante el que conectamos nuestra aplicación Angular, el frontend, con nuestro API REST, que sería el backend. Es un intercambio de recursos de origen cruzado.

¿Cómo instalar SweetAlert2?

Nuestros mensajes de alerta varían en función del navegador que usemos, pero siempre son sosos, un poco feos. ¿Cómo hacemos nuestra aplicación más llamativa cuando se muestren mensajes? Pues resolvemos esta duda con el uso de la librería SweetAlert2. ¿Y cómo la instalamos? Pues mediante npm. Usaremos la bandera save para crear en package.json la entrada a la dependencia.

npm install sweetalert2 --save

Ordenar el código en Angular

Para ordenar el código en Angular usando el IDE Atom podemos instalar el plugin Atom Beautify, y usar el atajo de teclado «ctrl + alt + b».

Crear el componente paginator

Vamos a ver el comando para generar el componente paginator. Necesitamos «paginator» para el desarrollo de la paginación de nuestros listados.

ng g c paginator

Angular Material

Angular Material es un conjunto de recursos para nuestros proyectos en Angular. Por ejemplo, uno de esos recursos es un DatePicker. Podemos instalar Angular Material en nuestra aplicación con el siguiente comando:

ng add @angular/material

Ver versión de Angular cli

Comando para ver la versión de Angular cli:

ng --version

Desinstalar Angular cli

Comando para desinstalar Angular cli

npm uninstall -g @angular/cli

Instalar Angular cli

Comando para instalar una versión de Angular cli:

npm install -g @angular/cli@8.0.4

Si no indicamos la versión su descarga la última.

Crear nueva app en Angular

ng new nombre-app

Arrancar aplicación Angular

Para arrancar una app Angular podemos usar:

npm start

Si la quieres arrancar en un puerto diferente sería:

ng serve --port <número del puerto>

Como testear las Aplicaciones Angular en tablet o móvil

Debemos poner el siguiente comando:

ng serve --host 0.0.0.0

Así podemos tener acceso desde fuera. A continuación vemos cuál es la IP del ordenador desde el que estamos desarrollando y ponemos esa ip seguida del puerto en el dispositivo móvil o tablet desde el que queremos probar. Ej.: 192.168.3.4:4200

Instalar font-awesome

En este caso vamos a instalar la versión 4.7.0.

npm i font-awesome@4.7.0

Acceso desde fuera app Angular

¿Cómo tener acceso desde fuera en app Angular mediante misma red wifi? Así, podrás ver cómo va quedando tu app en desarrollo en tu dispositivo móvil.

Arrancar app así:

ng serve --host 0.0.0.0

A continuación, abre el navegador web de tu móvil y pon:

<tu_ip>:4200

Coger ficheros o cualquier información en Angular

Para traer cualquier info a tu app en Angular, como un array de objetos que tengamos almacenados en un fichero o en una API, utilizamos la clase HttpClient. Import de HttpClientModule en »@angular/common/http’.

Módulo para formularios Angular

FormsModule, es el módulo a importar para trabajar con formularios en Angular.

Import del operador ‘map’

El import para el operador map es:

import { map } from 'rxjs/operators';