Tu primera aplicación Angular Cómo crear tu primera aplicación Angular en UNA hora o menos

made with

Introducción Gustavo Hernán Dohara (www.gustavodohara.com)

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. 

Antes de Empezar Gustavo Hernán Dohara (www.gustavodohara.com)

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á hasta la siguiente sección):

Node? la explicación corta sería: un programa que entiende y ejecuta código Javascript y que Bueno, primero las presentaciones. ¿Qué es

necesitamos para bajarnos y usar módulos (un conjunto de archivos con cierta lógica) escritos en Para bajarte

Javascript.

Node podes ir a su página, que lo explican más que bien: link.

Cuando vayas a la pagina de LTS que es la versión estable

Node (https://nodejs.org) bajaté la version

 Junto con Node se te instala otro programita, Npm, que te facilita la vida

Node. En general, cuando trabajás con Angular se usan muchos módulos de Node, y Npm te para instalar, desinstalar y actualizar los módulos de

ayuda un montón para no volverte loco bajando y actualizando estos módulos. 

Cómo crear tu primera aplicación Angular en UNA HORA El Mundo de Angular Gustavo Hernán Dohara (www.gustavodohara.com)

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 (este comando se instala en tu ventana de linea de comandos): npm install -g @angular/cli

NOTA: cuanto ejecutas comandos npm es muy comun que te aparezcan warnings por todos lados. ¡No te asustes eso es normal! ¿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 crea la carpeta "my-primerproyecto-angular", luego 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á, para ir a la carpeta que te creó ng: cd my-primer-proyecto-angular

y luego ejecutá ng serve

Y esto es lo que vemos en el browser

Esto va a levantarte la aplicación y abrírtela en tu browser por defecto (y si tu browser no se se abre, sólo tipea en la url lo siguiente sin las comillas: “http://localhost:4200”) y voilá!

BONUS TRACK El mundo de Angular

Gustavo Hernán Dohara (www.gustavodohara.com)

Si te quedaste con ganas, te dejo un par de comandos más de angular-cli para que te diviertas.

ng new my-proyecto -d

Si le agregás -d te muestra todos los archivos que se van a crear, PERO no te crea ningún archivo. Muy útil cuando no sabés que estas haciendo.

ng generate module my-modulo --module app

Este comando crea un nuevo módulo

Angular llamado "my-modulo" y lo

agrega al módulo "app".

ng generate component my-modulo/my-componente --flat -module my-modulo

Este comando te crea un nuevo Componente llamado "my-componente" y te lo agrega al módulo "my-modulo" (el que creamos antes)

Palabras Finales Gustavo Hernán Dohara (www.gustavodohara.com)

¿Te quedaste con ganas de más? ¿Queres saber cómo agregarle mas páginas, cómo se navegan por esas páginas y cómo sacarle el mayor provecho a

Angular? Visitá mi blog y entérate de todo eso en:

http://www.gustavodohara.com

o mandarme un e-mail a  [email protected]

¡Nos Vemos!

made with