Desarrollador framework angular 6: Inicio

Home » Blog » Desarrollador framework angular 6: Inicio

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:

  • Personalizados: Podemos crear etiquetas DOM a medida. Las etiquetas base son las de HTML pero podemos crear una propia, por ejemplo <imacresteHeader> y hacer que esta etiqueta esté conectada con un desarrollo. Este es el primer paso para separar la aplicación en pequeños componentes.
  • Shadow DOM: Es un área oculta para scripts, css, etc. que separa unos componentes de otros y del global de la página. Los estilos de un componente personalizado no afectan a  otro componente.
  • Templates: Son las plantillas de HTML + CSS que son propias de cada componentes.
  • Importar HTML: Se pueden cargar paquetes de scripts, css y html.

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!

 



Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023