🎓 Inscríbete gratis al curso de Angular

Entra y descubre cómo crear todo tipo de páginas webs utilizando tecnologías modernas. Todo el curso es totalmente gratuito. Ya no tienes excusas para aprender y formarte en el desarrollo de aplicaciones web con Angular

👥 Para quién es este curso

Este curso es para todo el mundo que sepa lo básico de HTML y CSS y haya usado alguna vez orientación a objetos.

Si has utilizado con anterioridad Java no vas a tener problemas con este curso porque la sintaxis de Angular salvando las distancias, es muy parecida a Angular.

Si vienes de utilizar un framework tipo React o VueJS, tampoco vas a tener problemas con este curso porque estos frameworks se parecen mucho entre sí.

Si no has utilizado nada de esto no te preocupes porque este con este curso aprenderás Angular desde cero, te voy a explicar los conceptos poco a poco desde la basde para que no te pierdas.

💡 Qué vas a aprender con este curso

Con este curso vas a aprender a usar a partir de Angular 2, es decir, Angular junto con Typescript para sacarle el máximo provecho. Entre lo que vas a apreder destaca:

❓ Introducción a Angular. ¿Qué es Angular exactamente?

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

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.

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

🚀 Qué se puede hacer con Angular

Con Angular se puede hacer todo tipo de páginas webs. Tu tienes el control de todo lo que quieres que pase en tu web. Con Angular, además puedes crear páginas webs SPA para que el rendimiento entre páginas sea perfecto.

Usando Angular nunca más vas a necesitar Jquery en tus proyectos, se acabó lo de tener que buscar elementos en el DOM mediante su clase o su id.

Con Angular además, al estar basado en componentes web, puedes volver a usar los componentes que hayas creado a lo largo de todo el proyecto de tal forma que se pueda ajustar para cada caso de uso particular. Además se pueden compartir componentes web entre proyectos también.

🖥️ 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

En definitiva, Angular ofrece todo lo que necesitas para desarrollar páginas web en la parte del front (cliente). Este curso es el perfecto para los desarrolladores del frontend o para todos aquellos que quieran dar el salto a la programación web. No lo dudes, inscríbete aquí🎓

Te dejo un pequeño video trailer de Angular por quieres echar un vistazo: