¿Acabas de llegar a Angular y no sabes cómo iniciar? En este post, aprenderás los fundamentos de Angular. Te invito a seguir leyendo para descubrir lo que ofrece.
¿Qué es Angular?
Es un framework para crear aplicaciones web dinámicas y Single Page Applications. El objetivo principal de este framework es proporcionar una experiencia de usuario fluida y rápida.
Algunas de estas empresas lo tienen implementado en sus proyectos:
¿Por qué elegir Angular?
El framework ofrece numerosas ventajas para el desarrollo, lo que lo convierte en una opción atractiva para muchos proyectos. Algunas de las principales ventajas son:
- Estructura modular y escalable: Se adapta a las necesidades del proyecto y está basado en el estándar de componentes web.
- Desarrollo más rápido: Evita escribir código repetitivo y mantiene todo más ordenado gracias al patrón MVC (Modelo-Vista-Controlador).
- Rendimiento optimizado: Con Angular Ivy y el Incremental DOM, ofrece un mejor rendimiento al optimizar la renderización de componentes.
- Experiencia de usuario mejorada: Las SPA creadas con Angular proporcionan una experiencia de usuario más fluida y rápida.
- Herramientas poderosas: Viene con un conjunto de herramientas integradas que facilitan la creación, desarrollo y prueba de proyectos.
- Soporte para aplicaciones multiplataforma: Se puede utilizar para crear apps móviles y de escritorio con Ionic y Electron.
- Mantenimiento y actualización constante: Gracias al soporte que le da Google y los aportes de la comunidad.
Estas ventajas hacen de Angular una opción robusta y versátil. Especificamente para proyectos de gran escala que requieren una estructura sólida y un rendimiento optimizado.
En breve, te daré una intro sobre lo puntos claves acerca de los fundamentos de Angular.
Componentes: Los Bloques de Construcción
Imagina que un sitio web es un rompecabezas. Cada pieza tiene su función, sus archivos y su rol específico. En este contexto, los componentes son los bloques más pequeños de la página.
Cada componente tiene su propio archivo HTML, CSS y TypeScript. Un ejemplo para crear una app de tareas. Podrías crear un componente para mostrar la lista de tareas y otro para agregar nuevas tareas.
Estilos: Haciendo que las Cosas se Vean Bien
Los estilos de CSS son esenciales para dar vida a tus componentes. Puedes personalizar los estilos de tus componentes utilizando CSS o incluso Sass. Tambien puedes usar Tailwind para manejar todo desde el HTML.
Ciclos de Vida
Los componentes tienen un ciclo de vida que cumple cierta función durante su existencia. Por ejemplo, cuando se crea un componente, se ejecuta un método llamado ngOnInit(). Aquí se coloca la cargar datos iniciales o configurar suscripciones a eventos.
Los ciclos de vida son un eventos que se disparan en diferentes etapas de la vida de un componente. Entre los más comunes tenemos:
- ngOnInit: Aquí es donde se hacen llamadas a las APIs (no en el constructor). Es ejectuado al ser inicializado el componente.
- ngOnChanges: Se llama cada vez que una campo de tipo input, cambia.
- ngOnDestroy: Es utilizado para evitar memory leaks, eliminando suscripciones a Observables o Event Handlers.
Ejemplo:
export class MiComponente implements OnInit, OnChanges, OnDestroy {
ngOnInit() {
console.log('Componente inicializado');
}
ngOnChanges() {
console.log('Propiedades de entrada cambiadas');
}
ngOnDestroy() {
console.log('Componente destruido');
}
}
Es parte de los fundamentos de angular podrás aprovechar mejor el uso de los componentes.
Directivas
Las directivas son instrucciones en el DOM que Angular interpreta y transforma. Por ejemplo, cuando el usuario está autenticado, puedes usar una directiva, como *ngIf, para mostrar un mensaje de bienvenida.
Hay tres tipos principales:
- Directivas de Atributo: Modifican el comportamiento o el aspecto de un elemento, componente o directiva existente. Ejemplo:
ngClass,ngStyle. - Directivas Estructurales: Alteran el diseño del DOM agregando o eliminando elementos. Ejemplo:
ngIf,ngFor. - Componentes: Son directivas con una plantilla asociada.
Ejemplo:
<div *ngIf="mostrar">Este texto se muestra si 'mostrar' es verdadero.</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
Pipes
Los pipes son una forma de transformar datos en las plantillas. Permiten modificar la presentación de los datos sin alterar el componente profundo.
En este ejemplo el pipe date formatea fechas. El pipe uppercase convierte texto a mayúsculas. Y el pipe currency formatea números como monedas, según su tipo (USD, EUR,…).
Ejemplo:
<p>{{ fecha | date:'longDate' }}</p>
<p>{{ texto | uppercase }}</p>
<p>{{ precio | currency:'USD' }}</p>
Servicios
En todo framework, tiene su apartado para su lógica de negocio. Los servicios se encargan de ofrecer funciones compartidas en diferentes partes de la app. Entre los servicios, está el acceso a datos y otras tareas que no están directamente relacionadas con la interfaz.
Ejemplo:
@Injectable({
providedIn: 'root',
})
export class MiServicio {
obtenerDatos() {
return ['dato1', 'dato2', 'dato3'];
}
}
Decoradores
Los decoradores son una característica parte de los fundamentos de Angular. Te permite modificar metadatos a clases, propiedades, métodos y parámetros.
Los decoradores más comunes en Angular incluyen:
- @Component: Se utiliza para definir y configurar componentes. Especifica el selector, la plantilla, los estilos y otras propiedades del componente.
- @Injectable: Es comúnmente usado en servicios.
- @NgModule: Configura un módulo de Angular, definiendo sus componentes, directivas, servicios y otros elementos.
Ejemplo de uso de decoradores:
@Component({
selector: 'app-example',
template: '<h1>{{ title }}</h1>'
})
export class ExampleComponent {
@Input() title: string;
@Output() clicked = new EventEmitter<void>();
onClick() {
this.clicked.emit();
}
}
Comunicación entre Componentes Padres e Hijos
Las propiedades de entrada y eventos de salida se utiliza para manejar la comunicación entre componentes padre e hijo. Para eso se usan los decoradores @Input() y @Output para comunicarse.
- @Input: El componente recibe los datos de su componente padre.
- @Output: Permite al componente hijo enviar eventos al componente padre.
Ejemplo:
// Componente Hijo
@Component({
selector: 'app-hijo',
template: `<button (click)="enviarMensaje()">Enviar Mensaje</button>`,
})
export class HijoComponent {
@Output() mensajeEnviado = new EventEmitter<string>();
enviarMensaje() {
this.mensajeEnviado.emit('Hola desde el hijo');
}
}
// Componente Padre
@Component({
selector: 'app-padre',
template: `<app-hijo (mensajeEnviado)="recibirMensaje($event)"></app-hijo>`,
})
export class PadreComponent {
recibirMensaje(mensaje: string) {
console.log(mensaje);
}
}
Conclusión
Para cerrar y concluir, es una herramienta poderosa y versátil en el desarrollo web moderno. Desde sus componentes fundamentales hasta la comunicación entre ellos. Incluso ofrece un ecosistema robusto que permite crear aplicaciones web dinámicas y eficientes. Y su enfoque en la modularidad, la reactividad y la experiencia del desarrollador lo convierten en una opción atractiva. Es adecuado para proyectos de cualquier escala.
¿Te ha gustado este contenido? Ayúdame a llegar a más desarrolladores compartiendo este post en tus redes. No olvides seguirme en redes sociales para más contenido.