Angular esencial

Angular CLI

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Crear un proyecto de Angular manualmente puede ser complicado y consumir mucho tiempo por la necesidad de instalar librerías externas, ajustar los archivos en el lugar correcto y enlazar todas las partes. Las herramientas de consola de Angular facilitan notablemente el proceso, y en esta lección vamos a aprender a instalarlas y utilizarlas.
07:35

Transcripción

Posiblemente, la herramienta que más vamos a utilizar a la hora de crear nuestras aplicaciones en Angular va a ser la línea de comandos. Para eso nosotros tenemos el proyecto llamado Angular CLI, que es parte del proyecto oficial de Angular y lo puedes encontrar dentro de la dirección 'cli . angular. io'. Esta herramienta, básicamente, nos permite trabajar a través de la terminal del sistema una serie de comandos para poder administrar y crear nuestros proyectos en Angular. Puedes encontrar dentro de la página la documentación oficial y también acceder al proyecto en GitHub para ver la última versión. Vamos a trabajar un poco con la línea de comandos. Y yo estoy acá dentro de la terminal del sistema, que la puedes abrir en el caso de usuarios de Mac a través de Cntrl + espacio y escribir el comando'terminal'. Y en el caso de los usuarios de Windows, también entrar al botón de Inicio y buscar también el término 'terminal'. Y en ambos casos vamos a tener acá la terminal del sistema. Y lo que vamos a hacer es que vamos a instalar la línea de comandos de Angular. Para eso vamos a utilizar 'npm', esto significa que tenemos que tener previamente instalado Node. js en nuestro sistema operativo y vamos a poner acá'npm install'. Esto me va a permitir a mí instalar un paquete. Y vamos a darle el parámetro: menos'g', lo que significa que vamos a aplicarlo de manera global dentro de nuestro sistema operativo. Y vamos a definir qué paquete queremos instalar, en este caso va a ser '@angular' "slash" 'cli'. Esto va a instalar la línea de comandos de Angular. El proceso tarda un momento, pero una vez que lo tengamos listo dentro de nuestro equipo, vamos a poder crear y administrar proyectos en Angular. Ahora, mientras esto está ocurriendo, yo voy a crear un nuevo "folder" dentro de mi ordenador y le voy a poner 'proyecto Angular'. Acá yo voy a crear un proyecto en Angular a través de la línea de comandos. Una vez terminada la instalación de Angular CLI dentro de nuestro equipo, vamos a poder gestionar proyectos dentro del ordenador. Vamos a entrar a donde se encuentra esta carpeta. Para hacer eso y de manera rápida, simplemente voy a escribir'cd', voy a arrastrar aquí la carpeta que acabo de crear, voy a definir manualmente también la ruta a la carpeta en el lugar en que se encuentre dentro de tu equipo. Ahora, una vez que ya nos encontramos dentro de la carpeta en la que vamos a trabajar, vamos a incluir el comando 'ng' y esta es la forma en la que vamos a acceder a la línea de comando de Angular, siempre con el comando'ng'. Y le vamos a definir que cree un nuevo proyecto a través del comando 'new'. Le vamos a definir el nombre que queremos que tenga nuestro proyecto, en este caso 'ejemplo 1'. Voy a presionar Enter y esto va a gestionar un proyecto en Angular. Vamos a ver que va a crear una serie de diferentes carpetas y también va a descargar diferentes librerías y archivos que vamos a necesitar para trabajar nuestro proyecto Angular. Si lo abrimos, vemos que acá tenemos la carpeta donde se encuentra el proyecto que acabamos de crear, en este caso'ejemplo1', con el nombre que nosotros definimos para el proyecto. Y vemos que ya tenemos todos los archivos necesarios para poder trabajar. Y te estoy hablando de que gracias a la consola de Angular, nosotros ya tenemos instalados todos los módulos, todos los archivos necesarios y son literalmente cientos de archivos que nosotros vamos a necesitar para poder trabajar un proyecto con una base sólida y tener todo listo para comenzar directamente a trabajar. Estas son las ventajas que nos ofrece la consola de Angular, que es, por ejemplo, ahorrarnos muchísimo trabajo de configuración y de inicialización de un proyecto. Pero también nosotros podemos aprovechar otra serie de herramientas. Con la consola de Angular, nosotros podemos crear componentes como, por ejemplo, si nosotros utilizamos el comando 'ng generate' y, por ejemplo, si yo necesito crear un componente, simplemente pongo'ng generate component' y defino el nombre del componente. En este caso me está dando un error, porque tengo que entrar a la carpeta en la que se encuentra mi proyecto, en este caso estoy trabajando en la carpeta base, así que vamos a realizar este proceso simplemente escribiendo'cd' y ponemos el nombre de la carpeta que acabamos de crear y repetimos el comando 'ng generate component'. Y vamos a crear un componente llamado 'test1'. Y ahora sí va a crear el componente. Vemos que dentro de mi proyecto se acaba de generar acá un componente donde ya tiene todos los archivos necesarios para poder trabajar. Finalmente, también nosotros podemos crear un microservidor, nos va a servir para poder realizar las pruebas. En este caso, yo voy a escribir'ng', que es el comando con el que yo siempre voy a invocar todos los elementos de Angular, y en este caso vamos a llamar a'serve'. Esto va a inicializar un servidor en Node. js que ya viene definido dentro de los parámetros de Angular CLI. Y en este caso va a trabajar por defecto dentro de la dirección'localhost : 4200'. Así que vamos a darle un momento y esto lo que va a hacer es que va a compilar –recordemos que Angular 4 necesita compilar todos los archivos que están funcionando en el formato'ts'o TypeScript–, los vamos a compilar a JavaScript y vamos a tener un proyecto compilado, optimizado y va a estar trabajando en la dirección 'localhost'. Vamos a ponerla acá 'localhost: 4200'. En este caso podemos ver que me aparece un mensaje que dice: "App works! ". Si yo quisiera modificar esta información acá, vamos a buscar donde aparece el módulo en nuestra aplicación. Tenemos acá el componente básico en el que estamos trabajando y vemos que acá aparece un mensaje. Yo lo voy a modificar. Simplemente voy a escribir: "Hola mundo" y voy a guardar. Y vamos a ver que inmediatamente, en el momento que yo he guardado, sin tener que realizar ningún tipo de proceso especial, el servidor automáticamente refresca la información y me permite a mí ver los cambios. Este servidor es bastante útil cuando estamos trabajando y estamos en el proceso de desarrollo de nuestra aplicación, porque podemos ver los cambios inmediatamente, no tenemos que refrescar y ahorrarnos ese par de segundos adicionales de abrir el navegador, revisar, actualizar. Nos permite a nosotros ir ahorrando tiempo y poder trabajar mucho más eficientemente. Esta es la forma en que trabaja de forma básica la consola de Angular, que posiblemente sea la herramienta que más vamos a utilizar durante el desarrollo de nuestras aplicaciones en Angular.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.