Menu

Clase 2 - Fundamentos de Angular

angulares6typescript - December 18, 2017 por Carlos Rojas | Edita este Post.
Angular CLI1.5.0Angular5.0

!Hola!

Esta es la Clase 2 en este viaje para construir tu primera App en Angular. Espero que estes comodo porque esta clase trae una gran cantidad de nuevas cosas que vas a necesitar para entender Ionic, pero no te preocupes porque vas a encontrarlas útiles después cuando continues creando vistas y lógica en tu App.

ECMAScript 6

Javascript es la piedra angular en el mundo de las Hybrid Apps. Angular está construido sobre ECMASCript 6. ECMASCript 6 es la nueva especificación de Javascript para ser usada en toda la WEB en los próximos años. EC6 trae interesantes cosas.

Nuevas Caracteristicas

Clases

Javascript ES 5 no tiene el concepto de Clases que es un paradigma usado en desarrollo en otros lenguajes como C#, Java, Objetive-C. Pero ahora nosotros vamos a poder usar estas caracteristicas en Javascript facilmente.

ES6 (Ahora)

class Person {
  name;
  age;

  constructor (name, age) {
    this.name = name;
    this.age = age;
  }

  getName(){
    return this.name;
  }
}
ES5 (Antés)

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};

Person.prototype.getName = function () {
    return this.name;
};

Modúlos

Ahora nosotros escribimos y podemos importar nuestras librerías sin mucho trabajo.

ES6 (Ahora)

//  lib/math.js
export function multiply (x, y) { return x * y }

//  someApp.js
import { multiply } from "./lib/math"
console.log(multiply(2, 2));

ES5 (Antés)

//  lib/math.js
LibMath = {};
LibMath.multiply = function (x, y) { return x * y };

//  someApp.js
var math = LibMath;
console.log(math.multiply(2, 2));

Promesas

Las promesas son una excelente forma de hacer peticiones asíncronas, en otras palabras preguntar a servidores por datos. Ahora es integrado en Javascript para que lo puedas integrar fácilmente.

ES6 (Ahora)

doSomething(){
   return new Promise((resolve) =>{
     resolve(true);
   })
}

doSomething().then(rta => {
  console.log(rta);
});

ES5 (Antes)

function doSomething (onDone) {
  onDone();
}

doSomething(function(rta){
  console.log(rta);
})

let y const

Ahora podemos integrar el alcance de las variables sin usar funciones de auto invocación.

ES6 (Ahora)

const PI = 3.14;
if(true) {
  let twitter = "@ion_book";
}
console.log(twitter); //Error. twitter is out of the scope.
console.log(PI); //3.14

PI = 3.12; //Error. PI is Constant.

ES5 (Antes)

if(true) {
  var twitter = "@startupersio";
}
console.log(twitter); //twitter is global

Personalmente creo que esta nueva versión de Javascript es excelente :)

TypeScript

TypeScript es un Superset que extiende las capacidades de Javascript otorgandonos cosas como por ejemplo:

Tipos

// Only string permitted.

let alert = (msg: string) => {
  alert(msg);
}

Interfaces

interface Shoe {
  brand: string,
  size: number,
  isCasual: boolean
}

Ok, lo importante a entender aquí es que vamos a tener más caracteristicas gracias a TypeScript y ES 6.

Transpilación

Transpilación es el proceso de convertir un lenguaje a otro, esto es importante de entender porque ES6 no está completamente soportado por los navegadores aún. pero no es importante porque podemos utilizar esta nueva herramienta para convertir código de ES6 a ES5 para usar las nuevas características en el lenguaje que todos los navegadores entienden ya.

Cuando estas usando Angular CLI tu no tienes que preocuparte por esto. Angular CLI maneja todos estos procesos por ti.

Webpack

Este es el constructor de modulos que utiliza el Angular CLI. Es una forma de utilizar diversos tipos de tecnologias y convertirlas en HTML, CSS y JS. No te debes preocupar por esto por que el CLI hace todo pero si quieres ver un poco de la configuración puedes usar el comando:

$ng eject

Bueno esperamos que esta clase te haya sido de utilidad y nos vemos en una proxima.

Ver código

¡Compártelo!