Curso para aprender a programar Angular 9 desde cero

Angular 9 es una de las versiones mas recientes hasta el momento de Angular. Hoy te traemos este curso completamente gratuito para aprender a programar Angular desde cero, enfocado en novatos. Cómo siempre antes de empezar un proyecto se recomienda hacer un diagrama de flujo hacerlo nos hará todo más sencillo de cara a la programación. Si bien es cierto que al principio lo verás algo inútil, es algo que ayuda mucho.

¿Qué es angular?

Angular es la última versión de AngularJS, que es una plataforma de desarrollo para crear aplicaciones web móviles y de escritorio. Angular ahora viene con todas las funciones que necesita para crear una aplicación web o móvil compleja y sofisticada. Viene con características como componentes , directivas , formularios , tuberías , servicios HTTP , inyección de dependencias , etc.

Versiones de Angular

La primera versión del Angular fue nombrada como Angular 2 . Luego más tarde fue renombrado a solo Angular. Luego, Angular Team lanza nuevas versiones de las versiones angulares regularmente y la última versión estable disponible es Angular 9.0.0

El angular 9 se libera el 02/06/2020. El Angular 9 es un lanzamiento importante. Esta versión cambia al compilador de hiedra y al tiempo de ejecución por defecto. La hiedra trae tamaños de paquete más pequeños, depuración de pruebas más rápida y mejor, verificación de tipo mejorada, tiempos de construcción, etc.

Curso en vídeo: 1 hora bien explicado

Introducción a angular

Este tutorial de Introducción a Angular le da una idea de Angular. Angular es un marco de interfaz de usuario para crear aplicaciones web móviles y de escritorio. Está construido con Javascript.

Usando Angular puedes construir increíbles aplicaciones del lado del cliente usando HTML, CSS y Typecript. Es muy importante saber cómo funciona el marco angular antes de comenzar a usarlo. Los siguientes tutoriales le presentan a Angular y discuten la arquitectura de Angulares .

Empezando con Angular

El AngularJs fue muy fácil de configurar y comenzar. No fue el caso cuando Angular salió con la versión Angular 2. Pero ahora desde el Angular 7, instalar y crear un nuevo proyecto en angular se ha vuelto muy simple.

Lo único que debe hacer en la instalación y el código de Visual Studio, el administrador de paquetes NPM y la CLI angular. Una vez que instale las dependencias requeridas, crear un nuevo proyecto es tan fácil como ejecutar un comando simple ng new. Angular CLI se encarga de la configuración e inicialización de varias bibliotecas.

Componentes

El componente es el bloque de construcción principal de una aplicación angular. Un Componente contiene la definición de la Vista y los datos que definen cómo se ve y se comporta la Vista. Los componentes angulares son clases simples de JavaScript y se definen usando @component Decorator. Este decorador proporciona al componente la vista para mostrar y metadatos sobre la clase

El Componente pasa los datos a la vista mediante un proceso llamado Enlace de datos. Esto se realiza vinculando los elementos DOM a las propiedades del componente. El enlace se puede usar para mostrar valores de propiedad de clase de componente al usuario, cambiar estilos de elementos, responder a un evento de usuario, etc.

Directivas

La directiva angular nos ayuda a manipular el DOM. Puede cambiar la apariencia, el comportamiento o el diseño de un elemento DOM utilizando las directivas. Te ayudan a extender HTML. Las directivas angulares se clasifican en tres categorías en función de cómo se comportan. Son directivas de componentes, estructurales y de atributos.

El ngFor es una directiva estructural angular, que repite una parte de la plantilla HTML una vez por cada elemento de una lista iterable (Colección). El ngSwitch nos permite Agregar / Eliminar Elemento DOM. Es similar a la declaración de cambio de Javascript. El ngIf nos permite Agregar / Eliminar elemento DOM.

La Directiva ngClass es una Directiva de Atributos Angulares , que nos permite agregar o eliminar clases CSS a un elemento HTML. La directiva ngStyle le permite modificar el estilo de un elemento HTML utilizando la expresión. Usando el ngStyle puede cambiar dinámicamente el estilo de su elemento HTML.

Directivas angulares

• ngFor
• ngSwitch
• ngIf
• ngClass
• ngStyle

Tubería

Las tuberías angulares se utilizan para transformar los datos. Por ejemplo, la tubería de fecha formatea la fecha de acuerdo con las reglas locales. Podemos pasar argumentos a tuberías y cadenas de tuberías. Angular también nos permite crear la tubería personalizada

Comunicación por componentes

Los componentes son inútiles si no comparten datos entre ellos. El componente principal se comunica con el componente secundario mediante la anotación @Input. Los componentes secundarios detectan cambios en estas propiedades de entrada utilizando el enlace del ciclo de vida de OnChanges o con un Setter de propiedades. El componente hijo puede comunicarse con el padre generando un evento, que el padre puede escuchar.

Gancho del ciclo de vida del componente

Los ganchos del ciclo de vida son los métodos que invoca angularmente en directivas y componentes a medida que los crea, cambia y destruye. Usando ganchos de ciclo de vida podemos ajustar el comportamiento de nuestros componentes durante la creación, actualización y destrucción.

Formularios en angular

Los formularios de entrada de datos pueden ser muy simples o muy complejos. Los formularios contienen un gran número de campos de entrada, una variedad de campos como cuadros de texto, fechas, números, correos electrónicos, contraseña, casillas de verificación, cuadros de opciones, etc. Estos campos pueden abarcar múltiples pestañas o páginas. Los formularios también pueden contener lógica de validación compleja interdependiente en múltiples campos.

Los módulos de formularios angulares están diseñados para manejar todo lo anterior y mucho más. Angular Forms ahora admite el enfoque de formas reactivas para el desarrollo de formularios. La forma más antigua de enfoque basado en plantillas también es compatible

Servicios e Inyección de Dependencias

Los servicios nos permiten crear código reutilizable y usarlo en cada componente que lo necesite. Los Servicios se pueden inyectar en componentes y otros servicios utilizando el sistema de inyección de dependencias. Las dependencias se declaran en el Módulo utilizando los metadatos del Proveedor. El angular crea un árbol de inyectores y proveedores que se asemeja al árbol de componentes. Esto se llama patrón jerárquico.

Validación de forularios en Angular

Una de las tareas comunes que se realizan mientras se crea un formulario es Validación. La validación de formularios está integrada en el módulo de formularios angulares. El Angular proporciona varios validadores incorporados listos para usar. Si esos validadores no se ajustan a sus necesidades, puede crear su propio validador personalizado.

HTTP

El módulo HttpClient de nuevo diseño nos permite consultar la fuente de la API remota para obtener datos en nuestra aplicación. Requiere que nos suscribamos a la respuesta devuelta usando observables RxJs.

Enrutador angular

El módulo Router maneja la navegación y el enrutamiento en angular. El enrutamiento le permite moverse de una parte de la aplicación a otra parte o de una vista a otra vista.

¿ Qué cursos de Angular puedo tomar?

Si quieres conocer otros artículos parecidos a Curso para aprender a programar Angular 9 desde cero puedes visitar la categoría Lenguajes de Programación.