Angular CLI: manera cómoda de crear aplicaciones con Angular 2

Angular CLI es la forma más cómoda para empezar a desarrollar aplicaciones web, móvil con Angular 2, es una herramienta de linea de comandos que facilita la creación, generación, ejecución, testing, deploy. Lo genial es que es parte de los proyectos oficiales de la gente que hace Angular.

Llegado un momento el desarrollo web, específicamente el frontend se volvió algo complejo, conocimiento de muchas herramientas, frameworks, librerías, para el desarrollo, testing, deploy, etc. Angular CLI ayuda a armar la base de todo, estructura del proyecto, herramientas necesarias, etc. Con un par de lineas de comandos tendremos un proyecto ejecutándose. Además tenemos comandos para generar automáticamente componentes, servicios, directivas entre otras cosas propias de Angular.

La página oficial del proyecto es angular.io y específicamente de Angular CLI es cli.angular.io.

Google quiere que llames a Angular 2 simplemente Angular, ya que la anterior versión se la conocía como AngularJS.

Instalación

Requisitos

Lo único que necesitamos es tener Node.js y NPM, si aun no lo tienes puedes obtener ambos aquí.

Instalando desde línea de comandos

Desde la consola o terminal basta con ejecutar lo siguiente (en MacOS posiblemente sea necesario anteponer sudo)

npm install -g angular-cli  

Y listo ya tenemos instalado el comando ng de manera global.

Crear un nuevo proyecto

Desde linea de comandos o la terminal, nos dirigirnos a la carpeta donde ubicaremos nuestro proyecto y ejecutamos lo siguiente con un nombre de proyecto.

ng new mi-proyecto  

Se generará todo lo necesario y más.

Ejecutar

Si queremos ejecutarlo, ingresamos a la carpeta del proyecto creado y a continuación:

ng serve  

Por defecto lo veremos en http://localhost:4200/, y muestra algo parecido a un hello world!, un app works!

Si lo dejamos así, cualquier cambio en el código se detecta, se compila y automáticamente se actualiza en el navegador, muy cómodo.

Generación

Cuando estemos desarrollando necesitaremos crear varias cosas propias de angular, estos son archivos que tienen que tener un nombre específico y estar en una ubicación recomendada, los comandos de generación nos ayudarán en eso.

Component

ng g component mi-componente  

Service

ng g service mi-servicio  

Class

ng g service mi-clase  

Directive

ng g service mi-directiva  

Entre otras cosas que podemos generar. Para poder tener en mano podemos descargar las referencias en PDF, con todos los comandos que podemos usar.

Descargar referencias

Deploy

El siguiente comando generará la carpeta dist con lo que tiene que estar en nuestro servidor (hosting) para publicar nuestra aplicación.

ng build  

Realmente muy cómodo, en otra guía (si les gusta esta publicación) usaremos simplemente un comando más para publicarlo en el servicio gratuito de Firebase Hosting.

Deploy en Github Pages

Si ya tienes un repositorio en Github donde esta tu proyecto puedes publicarlo rápidamente en Github Pages con el siguiente comando.

ng github-pages:deploy --message "Un mensaje de commit"  

Otras cosas que necesitamos saber

Actualizar Angular CLI

Para actualizar a una nueva versión de Angular CLI, ya que posiblemente vayan mejorándolo mucho con el tiempo (seguimos en una versión beta), podemos hacer lo siguiente:

npm uninstall -g angular-cli @angular/cli  
npm cache clean  
npm install -g @angular/cli@latest  

Vamos a crear más contenido de Angular, como integraciones con Firebase, entre otras cosas y si fuera necesario algunos videos en nuestro canal en YouTube, pueden sugerir temas en los comentarios, muchas gracias por la visita.

Daniel Alvarez

Software engineer, developer and producer of native mobile applications for Android and iOS, Angular, Firebase. Teacher. Speaker. Creating bots.