angularjs 2 tutorial: Instalación

Home » Blog » angularjs 2 tutorial: Instalación

Voy a empezar a a documentar las pruebas que voy haciendo con angularjs 2, y la mejor forma es ir creando este tutorial. Angularjs es un framework de javascript, es un proyecto de código abierto que esta mantenido por Google y muchos más, y es por eso que esta cogiendo un gran impulso. El proyecto acaba de lanzar su versión de angularjs 2, y es por tanto la que voy a ir documentando.

El objetivo del proyecto es que los programadores desarrollen un código fuente de calidad, generando HTML semántico, que sea fácil de entender  y por tanto de mantener. Se basa en el modelo Vista (HTML), Controlador (Programación) y Modelo (Lógica + base de datos) también conocido como MVC, que precisamente representa la necesidad de separar el código para que sea fácil de mantener.

Angularjs: Instalación

Para empezar necesitamos un servidor que nos permita realizar las pruebas necesarias. Si puedes contratar un servidor de pruebas asegúrate que tenga soporte ya que actualmente no hay mucho hosting que den este soporte.

El primer paso es instalar node.js, podemos descargarlo desde su web: https://nodejs.org/en/download/. Al instalarse tendremos acceso a una consola que usaremos para instalar dependencias.

Ahora es recomendable, aunque no obligatorio, instalar typescript, que es una librería que ayuda con la generación de código fuente javascript (siendo más amigable) que se usa en angularjs 2. Podemos instalarlo desde la consola:

$ npm install -g typescript

Para poder hacer pruebas vamos a crear un fichero HTML básico y lo guardamos con index.html.

<!doctype html>
<html>
<head>
<title>Hola Angularjs 2</title>
</head>
<body>
Kaixo
</body>
</html>

Además un proyecto angularjs se compone de:

  • package.json: Lista de paquetes y scripts que se deben instalar.
  • tsconfig.json: Compilar typescript.
  • typings.json: Identifica los archivos de typescript.
  • systemjs.config.js: Configuraciones js.

Podemos descargarnos estos ficheros de la web de angularjs:  Descargar. Estos ficheros podemos colocarlos en la carpeta raíz del proyecto.

Y ahora solo queda desplegar los paquetes de package.json en nuestro proyecto para lo que desde la consola de node nos posicionamos dentro del proyecto y ejecutamos:

npm install

Ahora ya tendremos todos los ficheros necesarios para poder comenzar a usar angularjs, solo tenemos que llamarlos desde nuestro primer fichero:

<script src="node_modules/es6-shim/es6-shim.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

Primer ejemplo de angularjs 2

Ahora podemos empezar con nuestra primera aplicación, y podemos comenzar añadiendo una carpeta para guardar los css e imágenes que vayamos usando.

Ahora podemos crear nuestro primer código typescript:

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/core";

@Component
(
 {
  selector: 'hola-angularjs2',
  template: 
   `
    <div>
    Bienvenidos al mundo de angularjs 2
    </div>
   `
 }
)

class HolaAngularjs2
{
}
bootstrap(HolaAngularjs2);

Aunque este código fuente puede parecer complejo, es muy simple si lo comparamos con la funcionalidad que nos ofrece y comparándolo con el javascript que habría que crear para que hiciese lo mismo. Es importante guardar este fichero con extensión .ts (typescript).

Con los important estamos llamando a los módulos de angularjs que queremos usar en esta aplicación: Componentes y Bootstrap. En este primer ejemplo no es necesario entender que hace cada cosa, lo iremos viendo poco a poco.

Los componentes de angularjs 2

Cuando creamos aplicaciones javascript hacemos referencia a diferentes etiquetas HTML, pero lógicamente solo podemos llamar a las etiquetas propias del DOM como FORM, SELECT, HEADER, etc.

Los componentes de angularjs 2 permiten crear nuestras propias etiquetas HTML, y es lo que acabamos de hacer en el primer ejemplo con la etiqueta: hola-angularjs2.

<hola-angularjs2></hola-angularjs2>

Un componente tiene 2 partes:

  • La anotación o estructura de la nueva etiqueta (@componet({})), en donde se define el nombre de la misma: selector y la plantilla html que debe mostrarse cuando se invoca la etiqueta: template. CUIDADO: Las comillas de la template deben ser invertidas.
  • Una clase del componente (class nameClass{}). En este primer ejemplo no hacemos uso de ella, pero veremos más adelante que permite crear funcionalidades potentes.

Probar nuestra primera aplicación con angularjs 2

En primer lugar debemos enlazar nuestra primera aplicación angularjs 2 con nuestro código fuente HTML. El código resultante será algo parecido a los siguiente:

<!doctype html>
<html>
<head>
 <title>Hola Angularjs 2</title>
 <script src="node_modules/es6-shim/es6-shim.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/systemjs/dist/system.src.js"></script>
 <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<script src="systemjs.config.js"></script>
<script>
System.import('app-ejemplo.js').then(null, console.error.bind(console));
</script>
<hola-angularjs2></hola-angularjs>
</body>
</html>

Hemos añadido los componentes necesarios para angularjs 2: Carpetas node_modules, llamamos a nuestro css, hacemos referencia al fichero de configuración: systemjs.config.js, que veremos como configurarlo más adelante, y finalmente tenemos un script que carga la aplicación creada.

OJO: Estamos llamando a la aplicación con extensión JS cuando el fichero lo tenemos creado como: app-ejemplo.TS.

Para que todo funcione debemos compilar la aplicación. Primero debemos posicionarnos dentro de la carpeta del proyecto mediante los comandos cd .. (para ir hacia atrás) y cd RUTA (para ir entrando en las carpetas). Y ejecutamos:

tsc

Si estamos dentro de la carpeta del proyecto se creara el correspondiente fichero app-ejemplo.js.

Y con todo esto ya podemos ejecutar nuestra herramienta para lo que necesitamos arrancar el servidor:

npm run lite

Pasados unos instantes, en los que se inicia el servidor, se abrirá nuestro navegador establecido por defecto con la aplicación ejecutándose satisfactoriamente. La ruta por defecto es: localhost:3000 que se puede configurar en el fichero package.json.

Resumen del tutorial para instalar angularjs 2

  1. Descargar e instalar nodjs. (https://nodejs.org/en/download/).
  2. Instalar typescript. ($ npm install -g typescript)
  3. Crear ficheros angularjs 2 (package.json, tsconfig.json, typings.json y systemjs.config.js): (https://angular.io/docs/ts/latest/quickstart.html#!#prereq)
  4. Desplegar paquetes angularjs 2.  (npm install => consola, dentro del proyecto)
  5. Compilar ficheros ts a js. (tsc => consola, dentro del proyecto)
  6. Arrancamos el servidor. (npm run lite=> consola, dentro del proyecto)
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

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

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/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