Conoce Angular en 5 minutos, es nuestro primer artículo de una serie en donde vamos a hablar sobre una tecnología específica, y que sabemos que te puede llevar sólo 5 minutos o un poco más conocer de ella.
Angular es uno de los Framework FrontEnd mas populares del mundo, utilizado por miles de personas cada día para desarrollar grandes aplicaciones.
Fundamentos de Angular
Existen muchas versiones de Angular, por un lado tenemos a las versiones inferiores a angular 2, conocido anteriormente como AngularJS, y por el otro las nuevas versiones a partir de la versión 2.
A partir de Angular 2, 3, 4, 5…, es decir Angular a secas es un entorno de trabajo muy completo, orientado a hacer grandes aplicaciones de forma modular y más moderna.
Crear nuestro primer proyecto
Para instalar tu primer proyecto en Angular, debes tener instalado Node y su gestor de dependencias NPM, para automatizar las tareas de desarrollo con Angular, debemos instalar Angular CLI.
Angular CLI, nos permite automatizar muchas de las tareas de desarrollo, para su instalación ejecutar el siguiente comando:
npm install -g @angular/cli
Una vez instalado Angular CLI, debemos crear nuestro prime proyecto:
ng new 'nombre_de_tu_app'
Una vez creado el proyecto debemos lanzar el servidor para visualizar la aplicación creada, supongamos que nuestra aplicación se llama hola-mundo, el proceso sería el siguiente:
cd hola-mundo ng serve
Y deberíamos ver en el navegador la siguiente pantalla:
Conoce Angular: Arquitectura y como funciona
Para empezar a programar en Angular hay que conocer el lenguaje TypeScript.
TypeScript luego es compilado a JavaScript. Cada fichero que compone la aplicación, va contener una clase y una interfaz.
También va contener decoradores que nos van a permitir transformar estas clases en tipos especiales.
Conoce Angular: Tipos de Clases
En Angular existen 4 tipos clases: los componentes, los módulos, las directivas y los servicios.
Conoce Angular en 5 minutos, empieza a conocer el poder de este Framework #Angular #JavaScript Clic para tuitear
Los componentes.
Son clases que controlan como se comporta una parte de lo que aparece en pantalla, es decir controla el comportamiento de una sección de nuestra aplicación web, esa parte o sección se le llama vista.
Para saber que una clase es un componente vamos a utiliar el decorador component.
Ya para mostrar lo que hace este componente se utiliza un template, es decir una plantilla html, y que para mostrar el valor de title sería el siguiente código:
<h1>
{{ title }}
</h1>Un componente Angular, puede a su vez contener más componentes en su interior, para que un componente pueda comunicarse con los otros componentes que tiene dentro, existen dos formas de hacerlo:
- Para el envío de datos se utiliza propiedades.
- Para recibir datos se utiliza eventos.
Establecer la comunicación entre los componentes es esencia, y para ello se utiliza Bindings (Uniones), existen 3 tipos de Bindings:
El Binding de propiedad. Donde asignamos un valor a uno de los inputs del componente, cada vez que cambie este valor el componnte lo va recibir.
<mi-componente-hijo [entradaDeDatos] = "Cualquier-Valor"> </mi-componente-hijo>
El Binding de evento. Cada vez que el componente hijo emita un evento, el componente padre va ser notificado.
<mi-componente-hijo (salidaDeDatos) = "AlgunMetodo()"> </mi-componente-hijo>
Y por último el Binding doble, que es una combinación de los anteriores, cada vez que cambie el valor se notifica al hijo, y cada vez que cambie el hijo se notifica al padre:
<input type="text" [(ngModel)]="unaVariable" />
Las Directivas
Es una clase especial que define palabras claves que se pueden utilizar dentro de nuestros Templates. Una directiva puede ser estructural si modifica el diseño, como por ejemplo el ngFor.
<mi-componente-hijo *ngFor="let elemento of ArrayDeElementos" [entradaDeDatos] = elemento> </mi-componente-hijo>
También puede ser una directiva de atributo, que modifica la apariencia o el comportamiento de un componente.
<input type="text" [(ngModel)]="unaVariable" />
Módulo
El módulo es la clase principal, todas las aplicaciones tendrán al menos un módulo principal, si son aplicaciones muy grandes, se puede tener varios modulos, uno para cada funcionalidad de la aplicación.
En un modulo se especifican, que dependencias tiene la aplicación, que componentes va contener, y cuál de ellos es el principal.
Servicios
Los Servicios son clases que son utilizadas por los componentes para pedir datos u operaciones, los servicios son utilizados para aislar toda la lógica de negocio de la aplicación.
Una de las funciones principales para el uso de servicios son las peticiones a APIS.
Conoce Angular: Inyección de dependencias.
La inyección de dependencias es un patrón de diseño, en donde pasamos los objetos por parámetros a una clase en lugar de ser la propia clase la que instancie esos objetos.
De está forma el testeo se hace mucho más fácil en la clase a la cuál le inyectamos los objetos.
En Angular se deben indicar que clases van a ser inyectables.
De este modo cada vez que queremos utilizar las inyecciones, Angular automáticamente las instanciará por nosotros.
constructor (private miServicio: miServicio){
miServicio.hacerAlgo();
}Palabras finales.
Esperamos que esta breve introducción a lo que es Angular te permita conocerlo un poco más.
Angular es un poderoso Framework, que te ayuda a crear tus propias aplicaciones web modernas de forma rápida.
No olvides compartir el artículo, y si tienes pensado aprende angular te dejamos la recomendación de los mejores cursos para aprenderlo, no olvides visitar nuestra sección de cursos.
