Curso gratis de Angular 2

¡Hola! 👋 Si estas leyendo esto supongo que es porque quieres aprender Angular 2, pues bien, he creado este curso totalmente gratis y para siempre en el que podrás aprender Angular desde la base hasta conceptos más avanzados.

Con este curso vas a poder crear tus propias páginas y aplicaciones web utilizando Angular 2 o posterior.

Para empezar con el curso tan solo tienes que dejar tu correo electrónico y te enviaré las instrucciones para empezarlo. Nos vemos dentro.

Apúntate gratis al curso

Qué es Angular 2

Bien, si te has dedidido a aprender Angular, concretamente Angular 2 lo primero que tienes que conocer es qué es Angular y quién está detras y gestiona Angular.

Logotipo de Angular 2

Angular es un framework para la creación de páginas web. A diferencia de otros frameworks javascript como ReactJS o VueJS, Angular no usa Javascript, usa un lenguaje llamado Typescript.

Si no sabes lo que es Typescript no te preocupes, no es un lenguaje raro, es un lenguaje basado en javascript, pero que añade cosas nuevas como tipado, interfaces, etc. El código que escribas se compilara a código Javascript para que el navegador web pueda entenderlo.

Hace años salió Angular bajo el nombre de AngularJS porque usaba Javascript, pero de un tiempo a esta parte, a partir de la versión 2, se reescribió todo el código de Angular por lo que no tiene nada que ver.

Lo bueno es que a partir de la versión 2 de Angular, el código es retrocompatible y por tanto lo que aprendas a partir de ahora, servirá igual para versiones posteriores.

Angular está pensado para crear páginas web o aplicaciones SPA, es decir, Single Page Application. Una web SPA quiere decir que cuando el usuario entra en tu página web, automáticamente se cargan todas las páginas de golpe en segundo plano, por lo que el cambio de una página a otra es instantáneo.

Componentes en Angular

Otra característica de Angular es que está basado en componentes web. Un componente web se compone de 3 cosas: estructura html, estilos css y lógica javascript.

Logotipo de componentes web

Lo bueno de los componentes web es que los puedes reutilizar a lo largo de tu página web. Imagina que creas un componente web en Angular que pinta un calendario con la funcionalidad de poder cambiar de meses y de años. Pues con Angular vas a poder usar este calendario simplemente poniendo en la vista que quieras su etiqieta html, por ejemplo:

<my-calendar></my-calendar>

Cómo instalar Angular 2

Para usar Angular necesitas tener instalado NodeJS en tu equipo, para ello dirigete a esta página y sigue las guías de instalación para tu equipo:

https://nodejs.org/en/

Para comprobar que se te ha instalado bien ejecuta en una consola o en CMD si estás en windows (Abre el menú de windows y teclea CMD):

node -v

También vas a necesitar NPM (el gestor de paquetes de node para librerías Javascript). Con las versiones nuevas de nodejs, npm ya viene instalado cuando instalas nodejs pero por si acaso ejecuta:

npm -v

Si te sale un mensaje de error significa que no lo tienes instalado o que no se ha instalado bien, para instalarlo manualmente hazlo siguiendo la guía de esta página:

https://www.npmjs.com/get-npm

El siguiente paso es descargar Angular CLI, ¿y qué es Angular CLI? Angular CLI es una serie de comandos que nos ayuda en la gestión, configuración y despligue de proyectos Angular. Para descargar Angular CLI ejecuta este comando en la consola:

npm install -g @angular/cli

Con este comando tendremos a nuestra disposición los comandos de Angular CLI.

Cómo crear una aplicación con Angular 2, ejemplo básico

Para empezar a usarlo tenemos que crear un proyecto Angular 2 con una serie de archivos, por suerte al instalar Angular CLI este proceso es automático. Para crear la base de un proyecto Angular ejecuta:

ng new NOMBRE

Sustituye NOMBRE por el nombre que le quieras dar al proyecto, el que quieras.

Ahora tienes que entrar dentro del proyecto que acabas de crear con la consola:

cd NOMBRE

Cambia NOMBRE por el nombre que has puesto antes y estarás dentro de la carpeta. Angular crea los archivos base necesarios y para que funcione correctamente lo mejor es ejecutar este comando para que termine de instalar todas las dependencias que hacen falta:

npm install

Cuando termine este proceso ejecuta:

ng serve --open

Si todo ha salido bien estarás viendo una página con el logo de Angular indicando que acabas de crear tu primer proyecto Angular que te servirá de base para crear una aplicación web con Angular

Verás el logo de Angular y un menú de navegación con 3 links

Estructura de un proyecto. Sistema de carpetas de Angular 2

Si has instalado Angular y has creado un proyecto con el comando ng new, angular habrá creado una serie de carpetas y archivos base para cualquier aplicación angular.

Genera una carpeta src, e2e, node_modules y un montón de archivos

Hay muchos archivos y carpetas, por lo que voy a definir para que sirven las más importantes, es decir, las que vas a necesitar por el momento

  • node_modules: Si has trabajado con anterioridad con proyectos NPM ya te sonará. Se trata de la carpeta donde se instalan todas las dependencias de Angular, no tienes que tocar ningún archivo de esta carpeta.

  • src: Una de las carpetas más importantes, contiene toda la lógica de la aplicación. Dentro de esta carpeta se encuentra una subcarpeta app con un componente hello world de prueba. También hay un archivo index.html que sera el punto de entrada a nuestra web. Por último está el archivo app.module.ts dentro de la carpeta app, en este archivo se importan todos los componentes que se vayan a usar.

  • .angular-cli.json: Configuración propia de angular, no tienes que tocarlo por el momento.

  • package.json: Archivo que contiene el nombre de las dependencias instaladas

Los componentes en Angular se crean dentro de la carpeta app, en este caso hay un componente creado llamado app también, con un archivo para el html, otro para el css y otro con extensión .ts de typescript desde el que se define la lógica de la aplicación. Lo recomendable es crear una carpeta dentro de app para cada componente que vayamos a crear, así no tendremos todos los componentes mezclados.

Si abres el archivo app.component.html podrás observar que hay una línea en la que pone:

Welcome to {{ title }}!

Las dobles llaves en las vistas en Angular sirven para renderizar una variable del componente. Si ahora abres el componente app.component.ts, te darás cuenta de que se defile la variable title:

title = 'app';

Si cambias el valor de esta variable, por ejemplo a hola mundo en Angular 2 y tienes la página servida mediante el comando ng serve al abrir la web otra vez en el navegador el mensaje que aparece en la web abrá cambiado. Lo bueno de Angular es que puedes tener la página servida con el comando ng serve, que si cambias algún archivo, el comando se refresca sin que tengas que hacer nada para que veas directamente los cambios en la web abierta sin tener que reabrir la página.

Ejemplos de páginas hechas con Angular 2

En Internet hay muchas empresas usando Angular para sus páginas webs, te voy a dejar algunos ejemplos por si te quieres inspirar o para que veas cómo funcionan:

Y así podría alargar mucho la lista, como ves son varias las empresas, inclído Google, las que apoyan y utilizan Angular en el día a día. Además Angular tiene mucha comunidad de desarrolladores detrás, otro motivo más para usarlo.

Conclusiones

Como ves empezar a usar utilizar Angular no lleva mucho tiempo, en cuestión de unos minutos tienes una base con la que empezar a programar aplicaciones web. La documentación de Angular es muy completa también por lo que te animo a que la eches un vistazo para que te vayas familiarizando con las herramientas que ofrece. Si vienes de un lenguaje como Java, este framework te va a resultar como estar en casa debido a su similitud con Typescript, el lenguaje de Angular.