Scribd
Cargar
200 vistas43 páginas

Angular Enterprise Applications PDF

Este documento presenta una introducción a Angular, incluyendo configuración del entorno, Angular CLI, fundamentos de módulos y componentes, arquitectura de proyectos, rutas y navegación, formularios y validación, servicios e inyección de dependencias, y programación reactiva con RxJS. El orador explica conceptos clave de Angular y provee consejos prácticos para la estructura y desarrollo de aplicaciones.

Cargado por

Hommy Leonardo De jesús Abreu
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
200 vistas43 páginas

Angular Enterprise Applications PDF

Este documento presenta una introducción a Angular, incluyendo configuración del entorno, Angular CLI, fundamentos de módulos y componentes, arquitectura de proyectos, rutas y navegación, formularios y validación, servicios e inyección de dependencias, y programación reactiva con RxJS. El orador explica conceptos clave de Angular y provee consejos prácticos para la estructura y desarrollo de aplicaciones.

Cargado por

Hommy Leonardo De jesús Abreu
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 43

ANGULAR

FUNDAMENTOS Y BUENAS PRÁCTICAS


ABOUT ME
Raymond Coplin

🅰 Organizador de la comunidad Angular Dominicana


💻 Senior Frontend Developer @ BHD León

@RaymondCoplin - @ngDominican
AGENDA

01 CONFIGURACIÓN
Configuración de ambiente

02 ANGULAR CLI
Interfaz de línea de comandos

03 INTRODUCCIÓN A ANGULAR
Archivos, módulos y componentes
AGENDA

04 ARQUITECTURA
Estructura de Proyecto

05 RUTAS Y NAVEGACIÓN
Router Module

06 FORMULARIOS Y VALIDACIÓN
Formularios con validaciones
AGENDA

07 SERVICIOS & DI
Inyección de dependencias

08 PROGRAMACIÓN REACTIVA
RxJS

09 Q&A
WORKSHOP
WORKSHOP
01
CONFIGURACIóN

Configuración de ambiente
Node y NPM
CONFIGURACIóN

● Instalar o actualizar Node.js

Verifica si tienes instalado nodejs ejecutando el comando en la


consola: node -v

● Debes tener mínimo la versión 12 de Node.js


https://nodejs.org/ y descarga e instala la última distribución
(Current). Luego, verifica que tengas mínimo la versión 6 de
npm con el comando: npm -v

Si no, puedes actualizarla con el siguiente comando:


npm install -g npm@latest
02
ANGULAR CLI

Angular Command Line Interface


ANGULAR CLI

El CLI es una herramienta de interfaz de línea de


comandos que se utiliza para inicializar,
desarrollar, hacer scaffolding y mantener
aplicaciones Angular.

Instalación:
npm i -g @angular/cli@latest

Versión CLI:
ng version
ANGULAR CLI
¡ CREEMOS UN PROYECTO !
Para la creación de nuestro proyecto escribimos en consola:

ng new hamburger-creator --minimal --routing --style=css

● ng new: crea un nuevo workspace y una aplicación por default.


● --minimal: opción que crea un proyecto sin ningún framework de
pruebas (Use for learning purposes only)
● --routing: opción que agrega un módulo de rutas para el proyecto inicial.
● --style=css: opción que define la extensión del archivo o preprocesador
para los estilos del proyecto.
03
FUNDAMENTOS

(MÓDULOS Y COMPONENTES)
CONCEPTOS BÁSICOS

MÓDULOS COMPONENTES
Los módulos son las piezas más Los componentes son los bloques
grandes en las que se puede dividir básicos visuales en Angular.
una aplicación en Angular.
Contienen una parte visual en html
(la Vista) y una funcional en
Typescript (el Controlador).
MÓDULOS

Los módulos son contenedores para almacenar los


componentes y servicios de una aplicación. En
Angular cada programa se puede ver como un árbol
de módulos jerárquico. A partir de un módulo raíz se
enlazan otros módulos en un proceso llamado
importación.

Creación por CLI:


ng g m NAME
ng generate module NAME
ANATOMÍA DE UN MÓDULO

@NgModule

● declarations: componentes,
directivas o pipes.
● imports: listado de módulos
● providers: listado de servicios
● bootstrap: componente con el que
inicia la app.:
COMPONENTES

Los componentes son el bloque de construcción más


básico de un UI en una aplicación Angular.

Con este podemos dividir la funcionalidad en


pequeñas piezas que luego al unirlas construyen
una vista de usuario.

Creación por CLI:


ng g c NAME
ng generate component NAME
ANATOMÍA DE UN COMPONENTE

@Component

● selector: tag de HTML que se


insertará en el componente.
● templateUrl o template: indica el
html que usará el componente.
● styleUrls o styles: indicamos los
estilos que usará el componente.:
ARQUITECTURA
(ESTRUCTURA DE PROYECTO)
ARQUITECTURA

● La estructura de archivos influirá en tus tiempos


de desarrollo y en la consistencia de tu proyecto.

● LIFT:
○ Location our code easy.
○ Identify code at a glance.
○ Flat structure as long as we can.
○ Try to stay DRY (don’t repeat yourself).
ARQUITECTURA

REGLA DE LOS
5 SEGUNDOS
ARQUITECTURA
ORGANIZA TU PROYECTO 🤘🏽👏🏽

● Módulos principales: Core, Shared and Features


Modules.
CORE MODULE

En el CoreModule colocaremos todo que sea necesario para la carga


inicial del aplicativo.

● Servicios singleton: todos esos servicios los cuales deben convivir durante
toda la aplicación. (UserService)
● Módulo de Autenticación: el módulo de autenticación el cual contiene sus
propios componentes, servicios y guards.
● Módulo y/o Componentes del Layout: los componentes tales como Header,
Sidebar, Main y Footer.
● Páginas cruciales del aplicativo: en este módulo se deben declarar
los componentes de errores como NotFoundComponent (404).
SHARED MODULE

El SharedModule es el lugar perfecto para declarar componentes


que sean reutilizables.
FEATURES MODULE

El objetivo principal de los features modules es delimitar las


funcionalidades de la aplicación en diferentes unidades de negocio con el
fin de lograr la modularidad.

● Restringe la responsabilidad y alcance del módulo raíz y esto a su vez


ayuda con el tamaño del paquete principal.

● El uso de features modules nos permite aplicar buenas prácticas como Lazy
Loaded Modules.
ARQUITECTURA
TIPS PARA TUS PROYECTOS 📝
● Solo debes importar HttpClientModule en el
AppModule o en el CoreModule.

● Si importas el BrowserModule en el AppModule


no importes el CommonModule 🚫.

● Es buena práctica importar en el AppModule o


CoreModule el ShareModule con su método
estático forRoot si quieres definir servicios y en
los otros módulos (lazy loaded) importarlo de
forma normal.
RUTAS Y NAVEGACIÓN
(ROUTER MODULE)
RUTAS Y NAVEGACIÓN

RouterModule: contiene toda la lógica necesaria para enrutar en


el navegador. Por otro lado, permite la definición de rutas en el
array Routes[]

path: propiedad del objeto Route donde se define la dirección


que resuelve.

component: propiedad que indica el componente que se debe


mostrar cuando la ruta se active.

redirectTo: propiedad que se utiliza para hacer redirecci-


ones de una ruta a otra.
LAZY LOADED MODULES

Para resolver el problema de las grandes esperas y


tamaño del paquete inicial llegó a nosotros Lazy Loading.

Es una técnica que nos permite hacer llamados de los


módulos mediante el sistema de rutas de Angular.
FORMULARIOS Y VALIDACIÓN
(REACTIVE FORMS MODULE)
FORMULARIOS Y VALIDACIÓN

En angular existen dos formas


de construir formularios.

1) Template Driven Forms:


FormsModule, [(ngModel)]

2) Reactive Forms:
ReactiveFormsModule,
Observable based API
SERVICIOS E
INYECCIÓN DE DEPENDENCIAS
SERVICIOS E
INYECCIÓN DE DEPENDENCIAS

1) Los servicios son clases TypeScript. Su


propósito es contener lógica de negocio, clases
para acceso a datos o utilidades de Creación por CLI:
infraestructura. ng g s nombre-servicio

Estas clases son perfectamente instanciables


desde cualquier otro fichero que las importe.
Pero angular nos sugiere que usemos su
sistema de Inyección de Dependencias.
SERVICIOS E
INYECCIÓN DE DEPENDENCIAS

2) La inyección de dependencias es un patrón de


diseño que nos permite inyectar servicios (que,
al fin y al cabo, son clases) en componentes,
sin necesidad de crearlos manualmente y
pasandolos a través del constructor del
componente.
SERVICIOS E
INYECCIÓN DE DEPENDENCIAS
Podemos proveer servicios en
diferentes niveles de nuestra app

1) @Injectable tiene la opción de


metadata providedIn.

2) @NgModule y @Component
tienen la opción de metadata
providers.
JERARQUÍA EN LOS INYECTORES
DE DEPENDENCIA
PROGRAMACIÓN REACTIVA
(RXJS)
PROGRAMACIÓN REACTIVA

La programación reactiva es un paradigma enfocado


en el trabajo con flujos de datos de manera asíncrona.

● Programación funcional
● Patrón observer
● RxJS
PROGRAMACIÓN REACTIVA

1) Observable
2) Observer
3) Subscription
4) Subject
5) Operadores
Muchas Gracias!

@raymondcoplin
ngdominican.com

También podría gustarte