Comandos y Apuntes Angular

Bárbara D. Ignacio
Uniway Desarrollo
1-4-2022
 Comandos Angular & Snnipet

Índice:
• Instalación Angular
• Crear nuevo proyecto
• Crear componentes
o Sin hoja de estilo
o Crear sin el archivo de pruebas

• Snippet
• Instalación del idioma local
• Crear Pipe
o Pipe impuro

• Crear service
• Map
• Route
• Crear un Módulo
• Directivas
✓ ngClass
✓ ngStyle
✓ ngSwitch
✓ Ciclo de vida
• Guard
• CRUD
•
 Comandos Angular & Snnipet

• Instalación Angular:
npm install -g @angular/cli

• Crear nuevo proyecto:

ng new <nombreProyect>

• Levantar serve:
ng serve
ng serve -o “para que abra la app en el navegador”

• Crear componentes:
ng generate component <rutaComponente>/<nombreComponente>
ej.: ng g c components/heroes

Nota: este comando se puede simplificar en el siguiente

ng g c <rutaComponente>/<nombreComponente>

“Cuando se lanza crea 4 archivos y modifica 1 añadiendo el nuevo componente a en el array de

declaraciones (declarations []) indicando que ese componente es usado. “

✓ Crear un componente sin hoja de estilo

ng g c <rutaComponente>/<nombreComponente> --inline-style o -is

✓ Crear sin el archivo de pruebas

ng g c <rutaComponente>/<nombreComponente> --spec=false o
--spec false o -sp false o —skipTests o --skip-tests

✓ Crear un componente sin hoja de estilo ni template

ng g c <rutaComponente>/<nombreComponente> --inline-template --inline-style

✓ Crear un componente sin hoja de html

ng g c <rutaComponente>/<nombreComponente> --inline-template o -it

✓ Cree los nuevos archivos en el nivel superior del proyecto actual

ng g c components/usuario/usuarioDetalle --inline-template --inline-style --flat

• Snippet:

importar -> ng-import

 Comandos Angular & Snnipet

Generar estructura rutas -> ng-router-appmodule o ng-routes

✓ Instalación del idioma local:

ng add @angular/localize

• Crear Pipe
Sirve para transformar los datos
ng generate pipe ruta/nombre
ng g p <rutaPipe>/<nombrePipe>
ej.: ng g p pipes/pass.pipe

✓ Pipe impuro: son aquellos que propiedad pure se le indica false. Esto hace que cada vez que
se dispare el ciclo detección de cambios no importa en que lado siempre se va a llamar este
pipe.

• Crear Service
ng g service <ruta>/<nombService>
ng g s <ruta>/<nombService>
ej.: ng g s services/spotify
• Map
Operador map lo que hace es adjuntarse a la petición o mi observable lo filtra y regresa los valores que
necesitamos o nos sirve.
• Route
{path: ‘artist/:id’, component: ArtistaComponent} -> obliga a que se tenga que pasar ese
parámetro al ponerle :
{path: ‘home’, component: HomeComponent}
{path: ‘’, pathMatch: ‘full’, redirectTo: ‘home’} -> en caso de url vacío redirecciona al
home
{path: ‘**’, pathMatch: ‘full’, redirectTo: ‘home’} -> en caso de url vacío redirecciona
al home

• Crear un módulo
ng generate module <nombre>
ej.: ng g m components
si añadimos - -flat genera el archivo dentro de la ruta indicada en vez de generar un modulo completo.
 Comandos Angular & Snnipet

importa el NgModule y el CommonModule puede ser no usado, pero lo usamos para ngIf, ngFor… Este
módulo nos ayuda que no tengamos que importar todo sino con importar el modulo sabe que necesita
para trabajar.

• Directivas, componentes, atributos…

✓ Directivas:
Configuración que determinan cómo se debe procesar, instanciar y usar la directiva en tiempo de
ejecución.
Las clases directivas, como las clases de componentes, pueden implementar enlaces de ciclo de
vida para influir en su configuración y comportamiento.

ng g d <ruta>/<nombService>
ej:
ng g d directives/resaltado

tipos de directivas:

➢ ngClass (atributo)
➢ ngStyle (atributo)
➢ ngSwitch (atributo) 1 Ciclo de vida
➢ Componente selector

✓ Ciclo de vida:
➢ ngOnInit: se dispara cuando el componente está
inicializando.
➢ ngOnChanges: se dispara cuando los datos del
componente sufren un cambio.
➢ ngDoCheck: se dispara durante la revisión de la detección
de cambios o cuando pasa algo en la pantalla.
 Comandos Angular & Snnipet

➢ ngAfterContentInit: se dispara cuando se inserta algún tipo de contenido como llamar a

un componente con su etiqueta <app-home></app-home>
➢ ngAfterContentChecked: se dispara después del contenido insertado.
➢ ngAfterViewInit: se dispara después de la inicialización del componente/hijo.
➢ ngAfterViewChecked: se dispara después de cada una de la revisión de los componentes
hijos.
➢ ngOndestroy se dispara después cuando destruimos o cambio de vista o ese elemento

se va a destruir. También cuando se realiza un ngIf del elemento.

Documentación ciclo de vida

• Guard
Genera una nueva definición de protección de ruta genérica en el proyecto dado o predeterminado.
ng g guard <ruta>/<nombre>
ng g g <ruta>/<nombre>
cuando se genera como se puede ver en la captura da 3 opciones a seleccionar:
✓ CanActivate: Interfaz que una clase puede implementar para ser un guardia decidiendo
si se puede activar una ruta. Si todos los guardias regresan true, la navegación
continúa. Si regresa algún guardia false, se cancela la navegación.
✓ CanActivateChild: Interfaz que una clase puede implementar para ser un guardia
decidiendo si se puede activar una ruta secundaria/hija. Si todos los guardias
regresan true, la navegación continúa. Si regresa algún guardia false, se cancela la
navegación.
✓ CanLoad: : Interfaz que una clase puede implementar para ser un guardia decidiendo si
se puede activar elementos secundarios. Si todos los guardias regresan true, la
navegación continúa. Si regresa algún guardia false, se cancela la navegación.
 Comandos Angular & Snnipet

• Formulario: (Proyecto 08-formularios)

✓ Template: toda la configuración del formulario esta del lado del HTML.
✓ Reactive: nos sirve para tener un mayor control del formulario y toda la lógica esta del lado
del TS
formControlName=”nombreValidacion” nos sirve para pintar los datos por defecto

• CRUD: (proyecto 09-heroesApp)

• Angular fire2 (proyecto 10-firechat)

 Comandos Angular & Snnipet