Si querés saber cómo crear tu primera aplicación de Angular sin ningún conocimiento previo, seguí leyendo. Olvídate de Angular, de Typescript, de Javascript, de Html, Css y cualquier otra tecnología por un momento. Sólo seguí estos pasos, y en unos 60 minutos o menos vas a tener tu primera aplicación web Angular. (Al momento de hacer este post la versión de angular es la 5)
Pre-requisitos
Antes de empezar, vamos a chequear que tengamos la configuración adecuada en tu máquina ;)
¿Tenés instalado Node? (si la respuesta es si saltáte estos 2 párrafos):
Bueno, primero las presentaciones. ¿Qué es Node? la explicación corta sería: un programa que entiende y ejecuta código javascript y que necesitamos para bajarnos y usar módulos (un conjunto de archivos con cierta lógica) escritos en javascript.
Para bajarte Node podes ir a su página, que lo explican más que bien link.
Junto con Node se te instala otro programita, Npm, que te facilita la vida para instalar, desinstalar y actualizar los módulos de Node. En general, cuando trabajas con Angular se usan muchos módulos de Node, y Npm te ayuda un montón para no volverte loco bajando y actualizando estos módulos.
Creando nuestra primera aplicación Angular
Ahora sí, a crear nuestra primera aplicación de Angular.
Instalar Angular-cli
¿Qué es Angular-cli y para qué sirve?
angular-cli es un módulo de Node, y ¿para qué sirve? para crearte aplicaciones angular de forma muy rápida. Es como si quisieras hacer una casa pero sin tener idea de albañilería, te ponés a hablar con el arquitecto, le vas diciendo, hacéme 2 habitaciones de 6mts x 5mts, con un baño y 2 puertas. Con Angular-cli pasa algo similar, le indicás (mediante lineas de comando) como querés hacer tu aplicación:
hacéme 2 páginas web que se llamen «home» y «contacto», por ejemplo, él te lo crea y vos te olvidas del código (¡por lo menos por ahora!)
Oka, ¿ahora cómo me lo instalo?
Lo instalás usando Npm (como te comenté un poco más arriba) con el siguiente comando:
npm install -g @angular/cli¿y ahora qué sigue?
abrí una linea de comando y ejecutá:
ng new my-primer-proyecto-angular
¿Y esto qué hace?
Bueno, hace varias cosas, pero básicamente te baja un proyecto (la casa) con todas sus dependencias, y todo esto en una sola línea!
Oka, ya tengo mi app en Angular, y ahora ¿cómo veo la app en mi browser?
En una linea de comando ejecutá:
ng serve
Esto va a levantarte la aplicación y abrírtela en tu browser por defecto (y si tu browser no se se abre solo tipea en la url lo siguiente sin las comillas «http://localhost:4200») y voilá! ;)
Conclusiones
Como viste, es muy fácil crear una primera aplicación en Angular usando Angular-cli. Animáte! =)
Suscribíte a la Newsletter!
Si te suscribís, nunca te vas a perder un post Y vas a tener acceso a mi contenido exclusivo de forma totalmente gratuita. ¡Suscribite!
gustavodohara.com te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Gustavo Dohara como responsable de esta web.
Finalidad de la recolección y tratamiento de los datos personales: gestionar el alta a esta suscripción y remitir boletines periódicos con información y oferta prospectiva de productos o servicios propios y de terceros afiliados.
Legitimación: Consentimiento del interesado. Destinatarios: Mailchimp. Puedes consultar aquí su política de privacidad. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en gustavo@gustavodohara.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad