Actualmente Angular es el entorno de desarrollo front-end más popular

¿Qué es Angular?

Lo primero que debes saber es que Angular es un Framework del lado del cliente para desarrollar aplicaciones Web multiplataforma, orientado a aplicaciones de forma modular.

Si lo que deseas es crear y/o mantener aplicaciones web de una sola página, Angular es una buena opción.

Angular permite aplicaciones de una sola página gracias a su enrutador de componentes.

¿Cómo funciona?

  • Utiliza HTML, TypeScript y CSS para crear las aplicaciones.
  • Se reduce el código mediante HTML dinámico creando templates.
  • Se programa mediante el lenguaje TypeScript compilado a JavaScript plano.
  • Cada carpeta que contiene nuestra aplicación tiene una clase y/o una interfaz.
  • Utiliza decoradores para convertir las clases en tipos especiales.

Cuenta con 4 tipos principales de clases

  • Componentes

Es una clase que controla un cachito de lo que aparece en pantalla (vista).

@component ({})

Un componente puede tener más componentes y estos a su vez pueden comunicarse entre sí.

  • Directivas

Es una clase especial donde se definen las palabras claves que se usarán en el template.

Pueden ser de dos tipos:

 Estructural: modifica diseño.

 Atributo: modifica apariencia o comportamiento de un componente.

  • Módulos

Esta es la clase principal, todas las apps tienen al menos uno, en ella se especifican las dependencias que se vayan a utilizar.

  • Servicios

Son clases que usan los componentes para pedir datos u operaciones, también para aislar la lógica de negocio o para pedir peticiones a API´s.

¡ Hagamos un hola mundo !

Necesitamos:

  • Angular
  • Angular cli.
  • Node.js
  • Algún editor como Sublime Text o el de tu preferencia.
  1. Instalar Node.js

Podemos obtenerlo de la siguiente URL

https://nodejs.org/en/download/

Se  instala como cualquier programa de instalación.

Para verificar que ha sido correctamente instalado, abriremos la consola de Windows y escribimos el siguiente comando:  npm –v

Si está instalado de manera correcta obtendremos la versión de node.js.

  1. Instalar Angular CLI

Para eso, pondremos la siguiente instrucción en la consola:

npm install -g @angular/cli

de manera inmediata comenzará la descarga, la cual podrás verificar desde la consola.

  1. Una vez instalado nuestro entorno de desarrollo, procederemos a crear un nuevo proyecto.

Nuevamente nos situamos en la consola y pondremos el siguiente comando:

ng new (nombre de tu proyecto)

Podrás ver el avance de la creación del proyecto desde tu consola.

El angular Cli instala los paquetes necesarios para que funcione la aplicación, creando un proyecto estándar por default.

  1. Levantando la aplicación

Nuevamente desde consola escribimos el siguiente comando:

cd (nombre de aplicación)

Esto nos llevará a la dirección donde se encuentra nuestra aplicación.

Una vez situados en nuestro proyecto, escribimos el siguiente comando

npm start

Si todo está correctamente, podremos ver nuestra aplicación en:

http://localhost:4200/

  1. Modificando nuestra aplicación

Ahora utilizaremos nuestro editor de texto.

Abriremos la carpeta donde se encuentre nuestra aplicación desde nuestro editor de preferencia.

Dentro del directorio encontrarás la carpeta app donde se encuentra un archivo html llamado app.component.html.

Si tienes nociones de HTML, te darás cuenta que dentro de este se encuentra el diseño de la pantalla principal, solo basta con poner el famosos HOLA MUNDO donde se indica en la imagen anterior y podrás ver lo siguiente:

Para finalizar, te dejo algunos links con información y ejercicios para reafirmar el tema.

  1. https://carlosazaustre.es/tutorial-ejemplo-de-aplicacion-web-con-angular-js-y-api-rest-con-node/
  2. https://www.w3schools.com/angular/angular_examples.asp
  3. https://www.campusmvp.es/recursos/post/las-5-principales-ventajas-de-usar-angular-para-crear-aplicaciones-web.aspx
  4. https://www.campusmvp.es/recursos/post/angular-5-todo-lo-que-necesitas-saber-en-10-minutos-o-menos.aspx

Deja un comentario

A %d blogueros les gusta esto: