Curso gratis de Angular 2

ATENCIÓN Si quieres aprender Angular desde 0, he creado un curso gratuito para todo el mundo para que tu formación sea mucho más sencilla. Para apuntarte solo tienes que poner tu correo en el formulario de abajo ¿fácil no?, solo con eso te voy a enviar una serie de correos con información, artículos, recursos, etc para aprender Angular de una forma práctica y en español.

Apúntate gratis al curso

Qué es 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 lo conoces no te preocupes, no es un lenguaje raro, es un lenguaje basado en javascript, pero que añade cosas nuevas como tipado, sistema de orientación a objetos mejor que Javascript etc. Además de todo esto, puedes seguir usando código con sitaxis Javascript dentro de Typescript, ya que al compilar Typescript, se convierte todo a Javascript para que el navegador pueda entenderlo.

Hace años salió Angular bajo el nombre de AngularJS porque usaba Javascript, pero hace un tiempo, a partir de la versión 2, se reescribió todo el código de Angular para poder usar Typescript, por lo que si ya sabes usar AngularJS no te va a servir nada para Angular 2. Actualmente han sacado nuevas versiones de Angular (las más importantes son Angular 4 y Angular 6) pero desde Angular 2 todo lo aprendido te sirve para versiones posteriores.

Otra particularidad de Angular es que está orientado a la creación de aplicaciones web SPA, es decir, las siglas de Single Plage Application, o lo que es lo mismo, cuando un usuario abre una página creada con Angular o con cualquier otro framework SPA carga todas la aplicación a la vez en segundo plano. Esto hace que la carga inicial sea un poco más lenta, pero se gana en rendimiento al cambiar de páginas dentro de la web ya que ya está todo cargado.

La arquitectura de Angular es MVC o lo que es lo mismo, modelo vista controlador. Esta arquitectura permite tener una separación de la lógica de los datos y de la vista. Otro dato es que Angular está basado en componentes web, es decir, un componente web es una forma de programar partes de una web reulizables. Por ejemplo si creamos un calendario con sus datos y su vista, este calendario se puede usar en toda la web con el mismo código de tal forma que solo lo tengamos que cambiar en un solo sitio. Mola ¿eh?

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 y hola mundo con 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

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:

{% raw %}

Welcome to {{ title }}!

{% endraw %}

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.




También te puede intersar...