Si sos una persona a la que le gusta saber cómo marchan las cosas, o si tan sólo te quedaste con ganas de saber cómo funciona todo lo que hicimos en el post Cómo crear un proyecto angular en una hora, seguí leyendo.
¿Que es Angular-cli, en detalle?
Angular-cli es una herramienta (de línea de comando) que sirve para inicializar, desarrollar, crear «esqueletos» y mantener aplicaciones en Angular. De forma muy simple te permite crear proyectos nuevos de cero, agregarles componentes, servicios, directivas y módulos de Angular.
Muchas veces copiamos y pegamos código para hacer las cosas mas rápidas pero claro, somos humanos, podemos cometer errores y perder varios minutos de nuestras vidas corrigiéndolos. Pero, con Angular-cli ésto no nos va a pasar, ya que éste se encargará de crear el componente (o proyecto) que queremos, con el nombre que queremos, en la ubicación que le digamos y sin cometer errores de copiado y pegado.
Además, termina siendo más rápido que copiar y pegar código. Si bien es una tarea relativamente rápida que lleva unos minutos, es propensa a las equivocaciones, pero con Angular-cli todo esto lo podemos hacer más rápido, con unas pocas líneas de código y minimizando los errores!
Una vez que te acostumbrás a los comandos de Angular-cli, desarrollás más rápido y con menos fallas ;)
Ahora, pasemos a explicar qué hicimos en el post anterior de una vez!
¿Que hace exactamente «ng new my-primer-proyecto-angular»?
Nota: estoy usando la ultima versión de angular-cli a la fecha: 1.6.3. Para otras versiones, lo que muestre la consola puede variar o no, pero en general la idea es la misma.
Para ver qué hace, vamos a ejecutar el comando en una terminal (si no sabés qué es el comando ng podés fijarte en este post)
Como verás, se crearon varios archivos (que más adelante voy a explicar) pero si te fijás bien, la terminal queda como sin hacer nada. Lo que está pasando en la última línea que se muestra en la pantalla («Installing packages for tolling via npm») es que está bajando e instalando los módulos de Node que tu proyecto necesita.
Esto puede tardar mucho o poco dependiendo de tu conexión a internet, así que… paciencia.
Una vez que termina el comando, vas a ver esto en la consola
Como verás, se crea la carpeta my-primer-proyecto-angular (el mismo nombre que le indicamos a Angular-cli con el comando ng new)
¿Qué son todos esos archivos que se bajan con «ng new»?
Vamos a ver qué se baja, para eso accedemos a la carpeta del proyecto y listamos los archivos con el comando «ls»
Vemos que hay 3 directorios (src, node_modules y e2e) y 6 archivos (README.md, karma.conf.js, package.json, protractor.conf.js, tsconfig.json, tslint.json)
Veamos qué son esos directorios:
- src: Acá esta tu aplicación Angular, las páginas que crees, los componentes y los módulos. En este directorio es en donde generalmente vas a estar metiendo tu código
- node_modules: Acá se bajan todos tus módulos Node, que necesitás para tu aplicación. Desde las dependencias de Angular, dependencias para testear, dependencias para empaquetar tu aplicación hasta cualquier módulo externo que necesites.
- e2e: Acá están tus tests «end 2 end», estos son los tests que prueban tu aplicación como si alguien estuviera navegando en tu browser, a diferencia de los test unitarios, que prueban un componente o servicio de forma aislada.
… y los archivos:
- README.md: En este archivo se explica tu proyecto, qué dependencias usa, qué comandos se pueden ejecutar y cualquier cosa que consideres útil poner para que vos, o cualquier otra persona, puedan tener un pantallazo rápido de tu proyecto sin tener que ver tu código.
- karma.conf.js: Este archivo de configuración lo usa «karma» que es una herramienta para ejecutar tus tests.
- .editorconfig: Otro archivo de configuración, en éste se configuran el estilo o el formato del código que escribas. Por ejemplo, «que al apretar la tecla «tab» siempre te lo remplace por 2 espacios», «definir el número máximo de caracteres por línea», o cualquier otro estilo. Esto es muy útil cuando trabajas con alguien más y querés asegurarte de que todos usen el mismo estilo, ó si trabajas solo y querés estar seguro de usar el mismo estilo en todos tus proyectos.
- .gitignore: Es un archivo de configuración que usa git (muy resumido, git es un programa que te permite tener en otro lado -generalmente un servidor-, tu código, muy útil para compartirlo o para tener copias de seguridad). En el arhivo .gitignore se agregan todos los archivos o directorios que no querés subir al servidor (por ejemplo los módulos de Node)
- package.json: Este archivo lo usa npm principalmente para instalar todos los módulos de Node. En este archivo, se detalla el nombre del módulo y su versión, además se aclara si el módulo lo vas a usar en tu proyecto para la versión final o solo lo usás cuando estás desarrollando (por ejemplo, un módulo de test que solo usás mientras desarrollás).
- protractor.conf.js: Viste que te conté del directorio e2e y de los test end-2-end, bueno, éste es el archivo de configuración. Y como ya podés suponer, protractor es el encargado de ejcutar los test end-2-end.
- tsconfig.json: ¿Y este archivo? Por si no lo sabías, para desarrollar Angular utilizás un lenguaje de programación llamado TypeScript (es como javascript pero con esteroides) . Pero no todos los browsers (por ejemplo las versiones mas viejas) entienden TypeScript, así que un programa tiene que convertir todos tus archivos escritos en TypeScript a Javascript (lenguaje que sí entienden todos los browsers). Bueno, el programa que te hace esa conversión necesita de este archivo de configuración.
- tslint.json: Este archivo lo usa una herramienta (o programa) que analiza tu código Typescript llamada tslint. En este archivo hay un montón de reglas (para mejorar la lectura de tu código, para que sea mas mantenible y para evitar posibles errores), ademas vos podes agregar las tuyas ;).
- .angular-cli: Y si, Angular-cli también tiene un archivo de configuración y es éste.
¿Y qué hace «ng serve» entonces?
Hace 2 cosas: por un lado, hace un build de tu aplicación (o sea, te construye tu aplicación), te convierte tus archivos .typescript a .javascript, te mueve tus contenidos estáticos, te reorganiza tu código y las dependencias externas y hace todo lo necesario para que tu app pueda ejecutarse en un browser. Y todo esto lo hace en la memoria de tu pc.
Y, por otro lado, levanta un servidor local (un servidor es un programa que te lee archivos y los expone para que un browser pueda mostrarlos, como una página web) en la máquina en la que ejecutaste el comando. En este caso, el servidor también es un módulo de Node.
Entonces, el paso 1 es convertir tu proyecto a un conjunto de archivos y directorios que un servidor pueda entender; y el paso 2, es levantar ese servidor. Con estas dos acciones, pegando a la url http://localhost:4200 podés ver tu aplicación ;)
Si no se aburrieron tanto, pueden seguir leyendo la segunda parte acá (próximamente), por lo pronto me despido. Adióós…
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