Introducción a Angular

Angular es un framework de JavaScript para crear aplicaciones web de alta

calidad. Utiliza una estructura modular y ofrece herramientas poderosas para
construir aplicaciones complejas de manera clara y concisa. Además, cuenta con
una gran comunidad de desarrolladores y una amplia variedad de recursos para
aprender. Descubre cómo puedes aprovechar esta tecnología impresionante para
llevar tus proyectos al siguiente nivel.
Directivas en Angular
Las directivas son una de las características más poderosas de Angular. Te
permiten extender la funcionalidad de las etiquetas HTML y crear componentes
personalizados. En esta tarjeta, descubre cómo puedes utilizar las directivas de
Angular para mejorar la calidad de tus aplicaciones web y hacer que el código
sea más limpio y fácil de mantener.
Arquitectura de Angular
Componentes Directivas

Los componentes en Angular son las unidades Las directivas te permiten modificar el
fundamentales de la aplicación, encargadas de comportamiento de los elementos del DOM y
mantener la lógica y la interfaz de usuario hacer tu código más dinámico.
separadas.

Servicios Módulos

Los servicios en Angular son objetos que Los módulos son una manera eficaz de organizar y
contienen una funcionalidad específica y pueden reutilizar el código en una aplicación de Angular.
ser inyectados en cualquier componente.
Componentes en Angular
Código Limpio
Los componentes te ayudan a
mantener un código más claro y
fácil de entender. Al dividir la
interfaz de usuario en bloques,
puedes centrarte en cada uno de
ellos de manera individual.
Reutilización
Al mismo tiempo que separamos
el código por bloques, podemos
reutilizar componentes que
necesitemos usar en diferentes
partes del proyecto, esto hace más
eficiente y rápido el desarrollo.
Tecnología Moderna
Angular te da la oportunidad de
trabajar con las últimas tendencias
y herramientas en programación
web, para que estés al día con los
nuevos requerimientos del mundo
digital.
Templates en Angular
1 2
Sintaxis
El «double curly-braces»
{{...}} se usa para mostrar
una variable en el template.
[propertyName]="{{expr
ession}}" se usa para
establecer el valor de una
propiedad.
Structural Directives
Las directivas estructurales
funcionan con HTML y
pueden cambiar el diseño del
documento agregando o
eliminando elementos. Estas
se declaran con * al comienzo
como *ngIf.
3
Interpolación
La interpolación de los
templatess el proceso de
enlazar valores de las
propiedades de las clases de
componentes con plantillas
HTML. Se usa la sintaxis
dobles llaves {{...}} en los
componentes.
Directivas en Angular
1 ngIf 2 ngFor

Esta directiva se utiliza para Esta directiva se utiliza para

mostrar u ocultar elementos repetir una serie de elementos
en función de la expresión HTML para cada objeto
booleana asociada. genérico que se defina en una
lista.

3 ngClass

Angular tiene una directiva nativa que permite aplicar una o varias clases
a un elemento en función de una determinada condición.
Servicios en Angular
Inyección de Dependencias
Los servicios no se instancian
directamente, sino que se crean a
través de la técnica de inyección
de dependencias. Esto permite una
mayor facilidad para mantener y
modificar el código.
Interacción con el Servidor
Los servicios pueden manejar
solicitudes a APIs externas,
mantener el estado de la
aplicación en los navegadores del
usuario y asistir en la
comunicación en tiempo real con
los servidores.
Funcionalidades Especiales
Los servicios pueden ampliar la
aplicacion Angular en nuevas
funcionalidades y personalizar el
comportamiento de las
dependencias inyectadas.
Rutas en Angular
ng generate module const routes: Routes <router-outlet>
app-routing --flat -- = [ ... ];
• Renders the component
module=app matching the URL
• Routes definition array
• TypeScript • Path strings are the keys • Defines the position in a
• template where the
Angular Router
router should render
view.
Conclusión

1 Conclusión

Angular es un framework potente que requiere un compromiso y una curva de aprendizaje. Pero la
inversión es recompensada con aplicaciones escalables y de alta calidad.

2 Adaptación

Angular funciona desde pequeñas aplicaciones MVC a proyectos grandes y complejos, de alta
carga. Adapta la cantidad que necesites de sus características y enfoques.

3 Comunidad

La comunidad de usuarios es activa y solidaria. Se han desarrollado docenas de herramientas y

bibliotecas de soporte para el marco principal. También hay muchas opciones de recursos en línea
para apoyar el aprendizaje y el perfeccionamiento en un amplio rango de niveles de habilidad.
Beneficios de usar Angular
Angular es un framework que ofrece muchas ventajas para desarrolladores web. Con su estructura de componentes,
routing y herramientas de testing, Angular hace que el desarrollo sea más rápido y sencillo. Además, la gran
comunidad de usuarios y la documentación extensa hacen que sea fácil encontrar soluciones a cualquier problema
que surja.
Versiones de Angular
Angular es un framework de desarrollo web que ha tenido varias versiones a lo largo de los años. Cada versión
introduce nuevas características y mejoras, y también puede incluir cambios significativos en la sintaxis y la
estructura del código. Es importante elegir la versión adecuada para su proyecto y mantenerla actualizada para
aprovechar al máximo las últimas funcionalidades.

A continuación se muestra una lista de las versiones de Angular más populares:

AngularJS: también conocido como Angular 1, es la primera versión de Angular y utiliza una sintaxis
diferente a las versiones posteriores. Aunque ya no se recomienda su uso, todavía hay proyectos que lo utilizan.

Angular 2: una reescritura completa de AngularJS, que introdujo un enfoque basado en componentes y mejoró
significativamente el rendimiento. Fue lanzado en 2016.

Angular 4: una versión menor de Angular 2 que introdujo mejoras en la velocidad y la eficiencia, y agregó
nuevas características como animaciones y soporte para la internacionalización. Fue lanzado en 2017.

Angular 5: una versión menor que introdujo mejoras en la velocidad y el rendimiento, así como nuevas
características como la compatibilidad con Progressive Web Apps (PWA). Fue lanzado en 2017.

Angular 6: una versión menor que introdujo mejoras en el rendimiento y la seguridad, así como nuevas
características como la compatibilidad con elementos web y la generación de código de biblioteca. Fue lanzado
en 2018.

Angular 7: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como la compatibilidad con CLI prompts y la compatibilidad con el modo de renderizado por
lotes. Fue lanzado en 2018.

Angular 8: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como el soporte para TypeScript 3.4 y la compatibilidad con la indexación de Google. Fue
lanzado en 2019.
 Angular 8: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como el soporte para TypeScript 3.4 y la compatibilidad con la indexación de Google. Fue
lanzado en 2019.

Angular 9: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como el soporte para el formato de fecha internacional y la compatibilidad con Ivy. Fue lanzado
en 2020.

Angular 10: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como la compatibilidad con TypeScript 3.9 y la compatibilidad con la optimización de paquetes
en tiempo de compilación. Fue lanzado en 2020.
Angular 11: una versión menor que introdujo mejoras en la velocidad y la eficiencia, así como nuevas
características como la compatibilidad con el modo de compilación diferida y la compatibilidad con la carga de
archivos de entrada. Fue lanzado en 2020.

Es importante tener en cuenta que, aunque cada versión de Angular tiene sus propias características y mejoras,
también puede haber cambios significativos en la sintaxis y la estructura del código. A medida que evoluciona el
framework, los desarrolladores deben estar preparados para aprender y adaptarse a las nuevas versiones y
características.
Características clave de Angular

Enfoque basado en componentes: Angular utiliza un enfoque basado en

componentes para la construcción de aplicaciones web. Los componentes son
bloques de construcción autónomos que pueden ser reutilizados en toda la
aplicación.
Inyección de dependencias: Angular tiene un sistema de inyección de
dependencias incorporado que permite a los desarrolladores escribir código
más limpio y eficiente.

Enlace de datos bidireccional: Angular utiliza un enlace de datos

bidireccional para sincronizar automáticamente los datos entre el modelo y la
vista de una aplicación.
Generación de plantillas: Angular tiene una poderosa función de generación
de plantillas que permite a los desarrolladores crear plantillas HTML
dinámicas y reutilizables.
Mejores prácticas de Angular
Cuando se trabaja con Angular, es importante seguir algunas mejores prácticas para garantizar una aplicación bien
estructurada y fácil de mantener. Algunas de estas prácticas incluyen la separación adecuada de componentes y
servicios, el uso de observables en lugar de promesas y la optimización del rendimiento de la aplicación.
Mejores Prácticas para la
Gestión de Estados en Angular

La gestión de estados es crucial para el correcto funcionamiento de una

aplicación Angular. En esta tarjeta, vamos a explorar algunas de las mejores
prácticas para la gestión de estados en Angular, como el uso de NgRx y el patrón
Smart-Dumb Component.
¿Qué son los estados en
Angular?
Los estados en Angular son los valores que describen el estado actual de una
aplicación o componente. Estos estados pueden cambiar en función de las
entradas del usuario, acciones, eventos y otros factores. Una buena gestión de
estados es esencial para mantener una aplicación robusta y escalable.
Seguridad en Angular
La seguridad es un aspecto fundamental en cualquier aplicación web. En esta
tarjeta exploraremos las mejores prácticas para mantener la seguridad en nuestras
aplicaciones Angular. Cubriremos temas como la autenticación, autorización y
prevención de ataques comunes como XSS y CSRF.
XSS (Cross-Site Scripting)
El XSS es un tipo de ataque que permite a un atacante inyectar código malicioso en una página web. Esto puede
permitir que el atacante robe información confidencial, como cookies de sesión o credenciales de usuario. Se puede
prevenir el XSS utilizando técnicas como la validación de entrada y la sanitización de salida.

CSRF (Cross-Site Request Forgery)

El CSRF es un tipo de ataque en el que un atacante engaña al usuario para que realice una acción no deseada en un
sitio web en el que el usuario está autenticado. Por ejemplo, un atacante podría engañar al usuario para que haga
clic en un enlace que realiza una transferencia de fondos no autorizada. Se puede prevenir el CSRF utilizando
tokens de seguridad y verificando las referencias cruzadas.