2 - Primeros pasos
Angular es un framework con muchisimas funcionalidades pero para llegar a un destino siempre tenemos el mismo inicio... Dar el primer paso, por lo tanto en esta unidad nos vamos a enforcar en lo que vamos a necesitar para dar nuestros primeros pasos y vamos a hacer una aplicación muy chiquita (casi un hello word) en distintas formas.
Angular no es mas que un arbol de componentes
Por lo tanto vamos a tener que entender un poco mejor que es un componente, y realmente creo que la primer aproximación es la siguiente:
Pensemos en el TAG <a> este tag que tiene HTML se puede "crear" o "utilizar" de varias formas, por ejemplo:
<a href="#">Mi Link</a>
<a href="#" class="miClassA" style="padding:10px" onClick="ejecutar()"> Soy un link</a>
En estos dos TAG's "a" que utlizamos le dimos distintos atributos para que dependiendo lo que necesitemos tenga una determinado texto, funcionalidad y diseño. Por lo tanto nosotros le dijimos a el navegador, como se va a ver, como va a funcionar y que va a mostrar cuando lo dibuje, esto quiere decir, que le estamos "enseñando" al navegador como queremos que sea.
Este TAG "a" en realidad lo podriamos ver como un componente del HTML, que recibe una serie de INPUTS con los cuales se va a dibujar, y este Componente es oficial de HTML.
Esto esta genial para una landing-page que no necesitamos mas que los tags que existen en HTML para hacerla... Pero si pensamos en una WEBAPP tenemos que pensar que vamos a necesitar mucho mas funcionamiento que el que posee una landing-page, y que posiblemente ciertos comportamientos se repitan.
Entonces imaginemos que dentro de nuestra WEBAPP tenemos un boton para pagar, pero ese boton en realidad se replica en varias pantallas/paginas, lo que hariamos normalmente (si fuese una app solo de js) tendriamos una funcion que hiciera el pago obteniendo los datos de un determinado formulario o inputs.
Pero con este modelo, podemos crear un componente que tenga la visual que necesitamos, el funcionamiento que necesitamos y que lo podamos utilizar con los parametros que necesitamos. WOW dije muchas veces necesitamos pero mejor vamos a un ejemplo un poco mas demostrativo (el código):
En este componente (o la vista HTML del mismo) estamos viendo que tenemos un "TAG" que no conocemos, mejor dicho, que no esta en los TAGS creados por HTML en ninguna de sus versiones.
Pero a simple deducción, es un "boton" para pagar, que tiene un precio de "5", a su vez es un articulo del tipo "libro" tiene un procedente que es "twitter" y ademas tiene un texto, que por lo que parece seria el texto del boton (si es un poco largo, a veces en los ejemplos tenemos que exagerar un poco).
Entonces sin mucho mas que un simple "HTML" pareceria que acá estariamos pagando un libro.
Pero si nosotros ponemos esto es nuestro HTML, el engine del navegador, vamos a suponer V8 de chrome, no va a entender que esta pasando ahi y simplemente lo va a poner como texto plano.
Pero aquí aparece Angular, quien como mencione un poco mas arriba es un "Arbol de componentes" por lo tanto Angular nos va a dar todas las herramientas para que nuestra WEBAPP le enseñe al navegador cada uno de los nuevos "TAGS" o mejor dicho a partir de ahora y para el resto del libro COMPONENTE que vamos creando y conectando a nuestras funcionalidades.
Volviendo a la explicación de componentes, el componentes es un "TAG" de HTML que funciona mediante determinados "Inputs" y devuelve determinados "Outputs" mediante los cuales se contacta con otros sectores del sistema (WEBAPP), los cuales pueden tener estilos personalizados, y pueden ser utilizados por toda la aplicación sin la necesidad de volver a crearlos completos.
Last updated