Qué es Angular y cómo instalarlo

¿Angular es un framework o una biblioteca?

Lo primero que tenemos que dejar claro es que Angular es un framework y no una biblioteca.

¿Qué es una biblioteca?

Una biblioteca es un conjunto de funcionalidades y objetos que cumplen una función acotada (por ejemplo React es una biblioteca cuya función es manejar la vista).

¿Qué es un framework?

Sin embargo, un framework es algo más amplio que una biblioteca.

Un framework es un marco de trabajo, un conjunto estandarizado de conceptos y prácticas para enfocar un tipo de problemática particular que sirve como referencia para resolver nuevos problemas de índole similar.

Un framework es un esqueleto con herramientas y librerías que nos ayudan a construir una aplicación de principio a fin.

Entonces, ¿qué es Angular?

Angular es un framework que facilita la construcción de aplicaciones web.

Angular es propiedad de la empresa Google

Angular puede incluir, entre otras herramientas, soporte de programas, bibliotecas, y un lenguaje interpretado para así ayudar a desarrollar y unir los diferentes componentes de un proyecto web.

En Angular está todo modularizado

Las aplicaciones Angular están modularizadas y Angular tiene su propio sistema de modularización llamado Angular Modules o NgModules.

Angular es un framework que está muy bien para Single Page Applications y que ofrece una experiencia de usuario más ágil.

Angular está pensado para trabajar con módulos y componentes

angular modulos componentes

Está pensado para dividir un proyecto en componentes, lo que permite una mejor reutilización de recursos.

Angular tiene herramientas de comunicación entre Frontend y Backend

Hay una relación uno a uno entre template (código html) y componente (código typescript que define el comportamiento del template).

Por cada template hay un componente

Una de las mejores cosas que tiene Angular es que es “componible”, esto significa que podemos construir grandes componentes a partir de componentes más pequeños.

Una aplicación es simplemente un componente que renderiza a otros componentes

Debido a que los componentes están estructurados en forma de árbol “padre/hijo”, cada vez que se renderiza un componente, éste hace que se rendericen también sus componentes hijos.

¿Cómo se instala Angular?

instalar angular

Para poder trabajar con Angular vamos a tener que instalar las siguientes herramientas:

  1. NodeJs
  2. NPM (en Windows se instala junto con NodeJs)
  3. Angular CLI (interfaz de línea de comandos para Angular)
  4. Un IDE, por ejemplo Visual Studio Code

Instalar NodeJs

Puedes instalar la version LTS de Node.js descargándola de:

https://nodejs.org/en/

Para comprobar si está instalado y ver la versión que tenemos de Node, puedes poner en la consola:

node -v

Instalar Angular CLI

Angular CLI es una herramienta de línea de comandos que nos permite crear un proyecto, agregar archivos y realizar una serie de tareas de desarrollo tales como testear y deployar.

Para instalarlo vamos a tener que abrir una terminal del sistema operativo y poner el siguiente comando:

npm install -g @angular/cli

Para comprobar qué versión tenemos instalada:

ng –version

Instalar Visual Studio Code

Puedes instalar el programa descargándolo de:

https://code.visualstudio.com/

Mi primer proyecto con Angular

primer proyecto angular

Para crear un nuevo proyecto en Angular y hacerlo en modo de desarrollo tenemos que poner lo siguiente en la consola:

ng new nombre-proyecto

Para este primer proyecto, podemos responder a las dos preguntas siguientes con NO y CSS

Dentro de la carpeta nombre-proyecto se crea todo el código necesario para el desarrollo con Angular:

En src/app es donde está nuestro código del proyecto

En la consola, nos situamos en la carpeta nombre-proyecto:

cd nombre-proyecto

Y lanzamos el proyecto para crear un servidor virtual en el puerto 4200 de localhost y así poder compilar según vamos desarrollando:

ng serve

También lo podemos lanzar poniendo npm run start  ya que en el archivo package.json, en «scripts», aparece el comando «start» para ng serve (se puede abreviar a npm start).

Es como un servidor para ver los cambios en tiempo real.

El proyecto por tanto se puede ver en:

http://localhost:4200/

¿Qué es un componente?

Un componente es la combinación de un template (en .html) y un controlador (en .ts). Los componentes son clases que interactúan con los archivos .html.

Cada componente está compuesto por tres partes:

  • Un decorador de componente
  • Una vista
  • Un controlador

Toda aplicación Angular tiene al menos un módulo, el “root module”, convencionalmente llamado “AppModule”.

Como hemos comentado, dentro de la carpeta src, nos vamos a encontrar con otra carpeta llamada app.

Dentro de esta carpeta tenemos los siguientes archivos:

  • app.component.css
  • app.component.html
  • app.component.spect.ts
  • app.component.ts
  • app.module.ts

La página de inicio del proyecto es el template:

src/app/app.component.html

El template es la parte visual del componente.

En el archivo app.component.ts, con la opción template en el @Component, declaramos el template HTML que ese componente va a usar.

De esta forma, el template app.component.html tiene relación con el componente app.component.ts.

El módulo inicial es:

app.module.ts donde se declaran todos los componentes de la aplicación.

Cómo crear un nuevo componente

Lo podemos crear manualmente

Crear una nueva carpeta dentro de src/app, por ejemplo home

Dentro de home crear los archivos:

home.component.ts
home.template.html

En home.component.ts:

import { Component } from ‘@angular/core’;

Y luego para que sea un componente, poner el decorador @Component:

La clase HomeComponent va a actuar como componente del template home.template.html:

@Component ({
selector: ‘app-home’,
templateUrl: ‘./home.template.html’
})
export class HomeComponent {
titulo : string = ‘Este es el título del proyecto’;
}

Luego hay que declarar el componente en el módulo principal app.module.ts en el import:

import { HomeComponent } from ‘./home/home.component’;

(no hace falta poner la extensión .ts)

Y lo agregamos al array declarations dentro de @NgModule:

@NgModule({
declarations: [
AppComponent,
HomeComponent
],

O lo podemos crear más rápido desde Angular CLI

En la consola:

ng generate component home

O con la versión abreviada:

ng g c home

Crea una carpeta nueva con el nombre home del componente y dentro está el controlador, el template, el css, etc.

Y lo agrega automáticamente en el app.module.ts

¿Cómo podemos ver el proyecto en el navegador?

En home.template.html utilizamos la técnica de la interpolación para que acceda a la variable titulo del componente, variable que puede contener por ejemplo el valor «Este es el título del proyecto»:

{{titulo}}

Por otro lado, el selector tiene la tarea de indicar cómo el componente va a ser reconocido cuando sea usado en un template.

De esta forma, podemos borrar todo el contenido que aparece por defecto en app.component.html y llamamos al componente home con el selector:

<app-home> </app-home>

Así, cuando veamos en el navegador http://localhost:4200/ podremos ver el contenido del componente home:

Este es el título del proyecto

En siguientes posts continuaremos con la creación de un proyecto con Angular.

¡Hasta el siguiente post!