Icono del sitio Imacreste

Desarrollador framework angular 6: Inicio

Iñigo Mezo Alvarez

El desarrollo de aplicaciones con javascript siempre son complejas ya que su código fuente suele ser bastante complejo, pero se usa para todo tipo de procesos: Manipular la interfaz del usuario, conectar con el servidor, validaciones, etc. Y en muchas ocasiones terminamos con códigos demasiado complejos para que otra persona pueda entenderlos de forma rápida.

En este sentido la aparición de frameworks de javascript como JQUERY supuso un gran avance, sobre todo en la reducción de código fuente, pero así todo se suele generar mucho código fuente si queremos usar el gran potencial de interacción que nos ofrece javascript con los elementos del navegador sin llamadas al servidor ni recargas de la página web.

Y para gestionar esa complejidad surgen frameworks como Angular (versión 6) que basan en los diseños clásicos del desarrollo web del modelo – vista – controlador (MVC).

IMPORTANTE: Angular no solo se puede usar para crear aplicaciones web sino que se pueden crear aplicaciones mvl para android o iPhone, aplicaciones de escritorio, etc.

COMPONENTES

Quizás uno de los aspectos más relevantes al usar angular es que debemos ver las aplicaciones web como pequeños trozos de código que son independientes de la aplicación global, son los componentes. A la hora de gestionar o modificar la aplicación debemos cambiar solo aquellos componentes que sean necesarios, y no afectaran al resto.

Se pueden diferenciar 4 pasos en los componentes:

Como instalar angular

En primer lugar vamos a ver cómo podemos instalar angular en nuestro ordenador.

El primer paso es instalar node.js, y para ello vamos a su web: https://nodejs.org/en/.

Descargamos e instalamos.

Una vez instalado, abrimos la consola de desarrollo (NODE.js COMMAND PROMT)  y vamos a instalar Angular CLI con el siguiente comando:

npm install -g @angular/cli

Cuando termine ya podemos comenzar creando nuestra primera aplicación o proyecto con angular 6. Para ello en primer lugar nos posicionamos en la consola en la carpeta que queramos el proyecto y lo creamos con los comandos:

ng new my-primera-app

Este paso suele tardar un rato, pero una vez finalizado, entramos desde la consola a la carpeta recién creada:

cd my-primera-app

Y con el comando:

ng serve --open

Se nos abre en el navegador la aplicación por defecto de angular 6. Si no ponemos –open no se nos abre el navegador pero podemos verlo escribiendo en la URL http://localhost:4200/.

Instalando BOOTSTRAP

Aunque no sea parte de Angular, vamos a ver cómo podemos relacionarlo con angular y así poder aprovecharnos de las etiquetas html de este framework.

En primer lugar cerramos el servidor, desde la consola: CONTROL+C. Cuando nos pregunte si queremos cerrar el navegador decimos que S y enter.

Luego estando dentro de nuestro proyecto:

npm install bootstrap --save

Una vez instalado, abrimos la carpeta de nuestro proyecto y  abrimos el fichero angular.json y dentro de projects -> architect -> build -> styles añadimos una fila justo encima de: «src/styles.css», la fila apuntara a bootstrap:

«node_modules/bootstrap/dist/

css/bootstrap.min.css»

quedando:

"styles": [
  "node_modules/bootstrap/dist/
css/bootstrap.min.css",
  "src/styles.css"
],

De esta forma podemos usar el framework Bootstrap dentro de nuestro proyecto.

Revisando el código fuente

Ahora si vamos a la carpeta del proyecto recién creado podemos ver que tenemos un montón de carpetas y ficheros.

Vamos a fijarnos solo en un fichero y se pueda entender un poco donde surge la pantalla que hemos visto al ejecutar el servidor.

Vamos a la carpeta src y abrimos el fichero index.hml y veremos algo similar a:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppPrueba</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Sabiendo un poco de HTML vemos que hay una etiqueta fuera de lo normal que es: app-root, que es una etiqueta personalizada y la que se encarga de mostrar todo el contenido. Por tanto en este ejemplo tenemos un único componente.

Y ¿Dónde está realmente lo que veo por pantalla?

Dentro de la carpeta src -> app, abrimos app.component.ts. Y veremos algo similar a:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app-prueba';
}

Y podemos observar que está definido el selector: app-root, que es nuestra etiqueta personalizada. Y como la misma carga el contenido de templateUrl -> app.component.html y los estilos de styleUrls -> app.component.css.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9
IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRo
IGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUg
MzBMMzEuOSA2My4ybDE0LjIgMTIzLjFM
MTI1IDIzMGw3OC45LTQzLjcgMTQuMi0x
MjMuMXoiIC8+CiAgICA8cGF0aCBmaWxs
PSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIy
LjItLjFWMjMwbDc4LjktNDMuNyAxNC4y
LTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8
cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0i
TTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEu
N2wxMS43LTI5LjJoNDkuNGwxMS43IDI5
LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4z
aC0zNGwxNy00MC45IDE3IDQwLjl6IiAv
PgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://angular.io/
tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://github.com/
angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" 
href="https://blog.angular.io/
">Angular blog</a></h2>
  </li>
</ul>

A pesar de ser un ejemplo muy sencillo es muy interesante para ver cómo se conecta la aplicación con los diferentes componentes. Podemos ver como relaciona una variable title con la parte visual {{ title }}. Si tenemos el servidor conectado y cambiamos el valor de title en app.component.ts, por ejemplo:

export class AppComponent {
  title = 'HOLA MUNDO';
}

Vemos como el titular se actualiza pasando a ser: Welcome to HOLA MUNDO!

 

Salir de la versión móvil