Scribd
Cargar
14K vistas156 páginas

Angular 7 Sesión #1 PDF

Cargado por

Colque Ninel
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14K vistas156 páginas

Angular 7 Sesión #1 PDF

Cargado por

Colque Ninel
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 156

Angular 7

Sesión #1
JavaScript revisión intensiva
Javascript todo un mundo de Frameworks
¿y Angular 7?
¿y Angular 7?
Con calma,
primero lo
primero
Mocha -> LiveScript -> JavaScript
Creado por Brendan Eich inicialmente “Mocha” (1995) al ser parte del grupo de
desarrollo Netscape.
En Septiembre (1995) renombra a LiveScript.

Luego renombrado a JavaScript por a una estrategia de marketing, cuando


Netscape fue adquirida por Sun Microsystems.

Netscape 2 fue el primer navegador en correr JavaScript.

JScript es denominado para IE debido a que Microsoft no quería manejar una


marca de Sun.
JavaScript y ECMA

European Computer Manufacturers Association (ECMA).

Desde 1961 Ecma International® facilita la creación de estándares globales de Tecnología de la


información y las comunicaciones (TIC) y Electrónica de consumo (EC).

En 1997 se crea un comité (TC39) para estandarizar JavaScript.


Desde entonces, los estándares de JavaScript se rigen como ECMAScript.

A partir de 2015 se nombra ECMAScript por año (ECMAScript 2015), aunque también se lo conoce
como ES6 o ECMAScript 6.
JavaScript y ECMA

ES2015 introdujo muchos cambios en JavaScript:

- Soporte de lenguaje incorporado para módulos


- Definición de variable de alcance de bloque
- Sugar sintáctico, como las clases y la desestructuración.

Resumen:
ECMAScript es solo una especificación. JavaScript es la implementación
correspondiente que se realiza, por los proveedores de navegador.
ECMAScript en los navegadores

Cada navegador implementa


ECMAScript con su propio motor de
JavaScript.

Hay pequeñas diferencias entre


implementaciones, partes del estándar
que no dejan 100% claro cómo se debe
actuar.

Cada motor implementa el lenguaje de


modo más o menos optimizado.
JavaScript y Web Workers

Cuando se ejecutan scripts en una página HTML,


la página deja de responder hasta que el script
finaliza.

Un Web Worker es JavaScript que se ejecuta en


segundo plano, independientemente de otros
scripts, sin afectar el rendimiento de la página.
JavaScript, DOM & BOM

BOM (Modelo de objetos del navegador)

Consiste en el objeto del navegador.

Historial, la pantalla, la ubicación y el documento que


son elementos secundarios de la ventana.
JavaScript BOM
JavaScript, DOM & BOM

DOM (Modelo de objeto de documento)

Se encuentra en el nodo de documento.

Trata el documento.

Representa el contenido de la página.

Los elementos HTML en sí, que pueden ser manipulados usando javascript.
JavaScript, DOM
JavaScript al código ...
Introducir JS
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hola mundo";
</script>

</body>
</html>
Importar JS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>

<script src="codeJS.js"></script>

</head>
<body>

</body>
</html>
Ejecutar Js con snippets

Ejecutando fragmento de código a través


del navegador.

En caso de necesitar probar un conjunto de


código, eventualmente.

En chrome se halla en la opción de


“herramientas de desarrollo” > snippets.
Abrir un snippet con Chrome
Abrir un snippet con Chrome
Ejecutar con node.js
Usando un IDE como intermediario
Intermedio

Extensiones recomendadas
para Vs Code
• Angular 7 Snippets - TypeScript, Html, Angular • JSON to TS
Material, ngRx, RxJS & Flex Layout
• Material Icon Theme
• Angular Language Service
• mysql-inline-decorator
• angular2-inline
• Prettier - Code formatter
• Bootstrap 4, Font awesome 4, Font Awesome 5
• PWA Tools
Free & Pro snippets
• Terminal
• HTML CSS Support
• TSLint
• Ionic 4 snippets
• TypeScript Importer
• JavaScript (ES6) code snippets
• CodeRunner
• jshint
Tipos de variables . . .
Variables tipo var
Las variables declaradas con var son accesibles desde cualquier
parte del scope global, incluso si se declaran dentro de un bloque.

Variables tipo let


Las variables declaradas con vlet son accesibles únicamente en el
bloque (Block Scope) donde se hayan declarado.
Tipos de variables . . .
Variables tipo const
Las variables declaradas con const tienen el mismo
comportamiento que let, con la diferencia de no poder ser
reasignadas.

const Pi = 3.14159;
Convención de codificación
Reglas documentadas para que equipos las sigan o como práctica
de codificación individual.

Se usan pautas de estilo para la programación, las cuales siguen:

- Reglas de denominación y declaración de variables y


funciones.
- Reglas para el uso de espacios en blanco, sangría y
comentarios.
- Programación de prácticas y principios.
- Convenciones de codificación aseguran la calidad:
Convención de codificación

Lo que se espera es:

- Mejorar la legibilidad del código.


- Facilitar el mantenimiento del código.
Estándares de nomenclatura

- Upper Case: Todas las letras del identificador están en mayúsculas.

- Camel Case: Solo las primeras letras están mayúsculas, con excepción
de la primera palabra en algunos casos.

- Snake Case: Cada palabra se separa por un guión bajo ( _ ).

- Kebab Case: Cada palabra se separa por un guión medio ( - ).


Notación camelCase
- Upper Camel Case: la primera letra de cada una de las palabras es
mayúscula.

- Lower Camel Case: igual que la anterior con la diferencia que la primera
letra es minúscula.

Para variables y funciones, empezando con letra, se usará lower camel case.

Para constantes se usará SCREAMING_SNAKE_CASE, que usa todas las letras


en mayúsculas.
Información por consola

4 modos de mostrar por consola:


var a = “hola mundo”;

console.log(a); //info de consola


console.warn(a); //info de consola tipo warning
console.error(a); //info de consola tipo error
console.info(a); //info de consola tipo information
Ejercicio 01

Pase por consola sus datos personales:


- Nombres
- Apellidos
- CI
- Cel.
- etc.
Tipo de datos primitivos y declaración
Tipo Boolean: Representa una entidad lógica y puede tener dos valores: true, y false.
- var booleanTrue = true; //var booleanFalse = false;

Tipo null: Representa una referencia que apunta, a un objeto o dirección no


existente o no válido.
Tiene exactamente un valor: null.
- var nul = null;

Tipo undefined: Variable a la cual no se le haya asignado valor tiene entonces el


valor undefined.
- var und = undefined;
Tipo de datos primitivos y declaración
Tipo number
Sólo existe un tipo numérico: el valor de doble precisión de 64-bits
IEEE 754 (un número entre -(253 -1) y 253 -1).

Puede representar números de coma flotante.

Y tiene tres valores simbólicos:


+Infinity, -Infinity, and NaN (Not A Number o No Es Un Número).

var und = undefined;


Declaración de variables . . .

- var number = 123;


- var booleanTrue = true; //var booleanFalse = false;
- var float = 3.14159;
- var string = “hola”; // var string = ‘hola’;
- var array = [1,2,3];
- var weirdArray = [ 1, Math.PI, "string", { type: 'number', value: 1 }, [ 0, 1 ] ];
- var object = { }
- var und = undefined;
- var nul = null;
Declaración de variables . . .
Los objetos tienen propiedades y métodos, por ejemplo un coche es un
objeto.

Un automóvil tiene propiedades como peso y color, y métodos como iniciar


y detener:
var car = { brand:"Ferrari",
model:"812Superfast",
color:"red",
start: function() {
return "Driving";
}
};
¡Ahora hazlo tú!
Las variables son no tipadas, por lo que no
están sujetas a ningún tipo de dato.
var num = 10;

console.log(‘ variable num: ’ + num);


num = ‘hola mundo’
console.log(‘ variable num: ’ + num);
Ejercicio 02
Ejercicio 03

1. Escribe un array con diferentes tipos de datos.


2. Escribe un objeto con diferentes tipos de datos.
3. Escribe una función que despliegue muestre el objeto y
array.
Paso por valor y referencia
En valores primitivos

- Estos son: Boolean, Null, Undefined, Number, String y Symbol.


- El valor asignado es una copia del valor que estamos asignando, por valor.

En valores NO primitivos o complejos

- Estos son: Object, Array y Function.


- JavaScript copia “la referencia”, lo que implica que no se copia el valor en sí, si no
una referencia a través de la cual accedemos al valor original.
Ejercicio 04

1.- Escriba 5 variables de tipo primitivo para


pasarlos por valor.
2.- Escriba 3 valores complejos y asignarlos por
referencia.
3.- Imprima los valores.
Acceder a elementos de un objeto

var auto = {
Utilizamos la notación punto para ingresar a los color: "Rojo",
elementos internos de un objeto en JS. motor: "5000cc",
detalles: {
anio: "2019",
console.log(‘color: ’ + color.auto ); modelo: "F215F",
ensamblaje: {
console.log(‘modelo: ’ + color.detalles.modelo ); pais: "US",
console.log(‘fabrica: ’ + color.detalles.ensamblaje.fabrica ); fabrica: "Ferrari F1"
}
}
};
Ejercicio 05

Escribe un Objeto en Js de tres


niveles con tus datos y además
debe tener una función.
Iteración de arrays

1) for ([expresion-inicial]; [condicion]; [expresion-final])


sentencia

Crea un bucle que consiste en tres expresiones opcionales, encerradas en


paréntesis y separadas por puntos y comas, seguidas de una sentencia
ejecutada en un bucle.
Iteración de arrays

2) while (condicion)
Sentencia

Crea un bucle que consiste en tres expresiones opcionales, encerradas en


paréntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en
un bucle.
Iteración de arrays

3) do sentencia while (condicion);

Crea un bucle que ejecuta una sentencia especificada, hasta que la


condición de comprobación se evalúa como falsa. La condición se evalúa
después de ejecutar la sentencia, dando como resultado que la sentencia
especificada se ejecute al menos una vez.
Iteración de objetos - arrays

4) for (variable of iterable) {


statement
}

La sentencia for...of crea un bucle que itera a través de los elementos de


objetos iterables (incluyendo Array, Map, Set, el objeto arguments, etc.),
ejecutando las sentencias de cada iteración con el valor del elemento que
corresponda.
Iteración de objetos - arrays

5) for (variable in objeto) { ... }

La sentencia for...in itera sobre todos los elementos de un objeto, en un orden


arbitrario. Para cada uno de los elementos, se ejecuta la sentencia
especificada.
Iteración de objetos - arrays

6) for each (variable in objeto)


Sentencia

Itera una variable específica por todos los valores de las propiedades del
objeto. Para cada propiedad distinta, una sentencia específica es ejecutada.
Ejercicio 06

Itera un array y un objeto con las posibilidades explicadas.


JavaScript Scope

- El Scope (ámbito) de aplicación determina la accesibilidad (visibilidad)


de variables.
Se divide en dos:
- Local scope
- Global scope
JavaScript tiene Scope (ámbito) de función.
Con cada función se crea un nuevo Scope (ámbito).
Las variables definidas dentro de una función no son accesibles
(visible) desde fuera de la función.
Scope o contexto

● El contexto actual de ejecución.


● El contexto en el que los valores y las expresiones son
"visibles" o pueden ser referenciados.
● Si una variable u otra expresión no está "en el alcance
actual", entonces no está disponible para su uso.
● Los ámbitos también se pueden superponer en una
jerarquía, de modo que los ámbitos secundarios tengan
acceso a los ámbitos primarios, pero no al revés.
Scope y funciones
Una función sirve como un cierre , por lo tanto, crea un “scope”.
Entonces no se puede acceder a una variable definida exclusivamente dentro de la
función desde fuera de la función o dentro de otras funciones. Por ejemplo, lo
siguiente no es válido:
function exampleScopeFunction() {
var x = "declared inside function"; // x used in only in exampleFunction
console.log("Inside function");
console.log(x); // works fine
}

console.log(x); // Causes error


Ejercicio 07

- Crear funciones que llamen a otras


funciones.

- Crear funciones dentro de otras.

- Crear función con variable interna


no accesible al exterior.
Las funciones como objetos de primera clase
function say() {
console.log("hello world"); function find(say) {
} return = say.direccion;
say.curso = ’angular’; }
say.clase = ‘js & ts’;
say.direccion = {
pais: "Bolivia",
ciudad: "La Paz",
universidad: {
piso: "EMI",
lugar: "Av. Arce"
}
};
… rest

La sintaxis de “rest parameter” (resto de parámetros) permite


representar un número indefinido de argumentos como un
vector array.

function f(a, b, ...theArgs) {


// ...
}
… rest
A partir de los argumentos ...rest se puede obtener un array.

Sus datos (solo arrays) se pueden descomprimir en distintas


variables.

Los métodos de Array pueden ser usados a los parámetros ...rest.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
Ejercicio

Obtenga el promedio de una función con ...rest


this

Se refiere al objeto al que pertenece, dependiendo donde se use:

en método, this se refiere al objeto dueño.


en una función, al objeto global,
en modo estricto, this es indefinido,
en un evento, al elemento que recibió el evento,
Funciones flecha

● Tiene una sintaxis más corta.


● No vincula sus propios this, arguments, super, o new.target.
● Siempre son anónimas.
● Son funciones no relacionadas con métodos y no pueden ser
usadas como constructores.
● return implícito cuando no hay cuerpo de bloque.
Sintaxis
(param1, param2, …, paramN) => { sentencias }
(param1, param2, …, paramN) => expresion
// Equivalente a: () => { return expresion; }

// Los paréntesis son opcionales cuando sólo dispone de un argumento:


singleParam => { statements }
(singleParam) => { sentencias } singleParam => { sentencias }

// Una función sin argumentos requiere paréntesis: () => { sentencias }


Sintaxis
// Incluir entre paréntesis el cuerpo para retornar un objeto literal:
params => ({foo: bar})

// Soporta parámetros rest y parámetros por default


(param1, param2, ...rest) => { sentencias }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { sentencias }

// Destructuración mediante la lista de parámetros también es soportada


var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
Ejemplo elementos.map(function(elemento){
return elemento.length;
var elementos = [ }); // [9, 5, 5, 7]
"Hidrógeno",
"Helio", elementos.map((elemento) => {
"Litio", return elemento.length;
"Berilio" }); // [9, 5, 5, 7]
];
elementos.map(({length}) => length); // [9, 5, 5, 7]
Ejercicio

Escriba una función anónima y convencional, que


hagan exactamente lo mismo.

Escriba y ejecute una funcion flecha asignada a


una variable que obtenga el promedio de un array
como argumento.
var auto = {
Reto color: "Rojo",
detalles: {
modelo: "F215F",
Convierta un objeto de varios niveles a ensamblaje: {
uno de un solo nivel. pais: "US",
}
}
};

var auto = {
color: "Rojo",
detalles_modelo: "F215F",
ensamblaje_pais: "US"
};
Clases

Las clases son de hecho "funciones especiales", tal y como el caso de las
expresiones de funciones y declaraciones de funciones, la sintaxis de la clase tiene
dos componentes:

● expresiones de clases y
● declaraciones de clases.
Prototype
Los prototipos son un conjunto de normas para integrar Programación Orientada a
Objetos en JavaScript.

class Polygon {
constructor(height, width) {
this.height = height; this.width = width;
}
}

class Square extends Polygon {


constructor(side) { super(side, side); }
getArea() { return this.height * this.width; }
}
var square = new Square(5);
console.log(square.getArea());
Use Strict

- Define que el código JavaScript debe ser ejecutado en el "modo estricto".

- Desde ECMAScript versión 5, expresión literal. No se puede utilizar variables no declaradas.

Ventajas:
- Ayuda a escribir código más limpio.

- Mejorar el rendimiento.

- Previene de errores en la semántica.

- Evita fragmentos de código ejecutados en la consola interactúen entre sí (Ej.: tener algo
creado en una ejecución de consola se está utilizando para una ejecución de consola
diferente).
Use Strict

- Define que el código JavaScript debe ser ejecutado en el "modo estricto".


- (function(){
"use strict";
before your code, and add
})();

"use strict";
Errores: x = {p1:10, p2:20}; //objeto no declarado

"use strict";
pi = 3.14; //variable no declarada.

"use strict";
myFunction();

function myFunction() {
¿Qué son las promesas?

El objeto Promise (Promesa) es usado para computaciones asíncronas.

Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.

Tiene 3 estados:

1. Pendiente (pending): Estado inicial, operación sin confirmar.

2. Resuelta (resolved): Operación cumplida satisfactoriamente.

3. Rechazada (rejected): Operación no cumplida.


Gestores de paquetes o dependencias Javascript

Instalan paquetes por nosotros, actualizan los paquetes, permiten publicar paquetes
que creamos y compartirlos con el resto de la comunidad.

Los paquetes son herramientas, plugins, librerías y frameworks necesarios para


desarrollar aplicaciones web de alto nivel.

Existen muchas dependencias por lo que usar herramientas de gestión de


dependencias facilitan mantener todas las dependencias organizadas y
actualizadas. Proporcionan un flujo de trabajo optimizado para todos los
desarrolladores y gestores de proyectos.
Node Package Manager (NPM)

Desarrollado sobre Node.js, este sistema potencia un repositorio de 100.000 paquetes


y módulos.
Cada proyecto usa el archivo de instalación package.json a través de NPM e incluso
gestionarlo con Gulp (en Node).
Las dependencias pueden ser actualizadas y optimizadas desde la terminal.
Además de desarrollar nuevos proyectos con archivos de dependencias y números de
versión insertados automáticamente desde el archivo package.json.

Sitio oficial: https://www.npmjs.com/


Bower
Se considera que Bower está obsoleto ya que se
ejecuta en NPM, pero aunque NPM es más completo,
Bower va a la reducción en el tamaño del archivo y
los tiempos de carga para las dependencias del
frontend.

Bower puede optimizar el flujo de trabajo


específicamente con las dependencias del frontend.
RubyGems

Open source para Ruby. Programas como Bundler gestiona versiones de


gemas (código que se ejecuta en un entorno de Ruby) y lo mantienen
todo actualizado.

Proporciona un gestor de paquetes frontend en la plataforma Ruby con


una pequeña curva de aprendizaje.

Sitio oficial: https://rubygems.org/


TypeScript revisión intensiva
¿Dónde?
TS y ECMAScript

- Al igual que JS, TypeScript incluye


todas las funcionalidades de ES6, y
además incorpora una capa por
encima con funcionalidades extra.

- TS es un superset de ES.

- Por lo que para aprender TypeScript


también se tiene que aprender ES.
Instalación

Versión estable: npm install -g typescript


Versión beta: npm install -g typescript@next

Revisar versión: tsc --version


Compilación: tsc myFile.ts
Ejecución de Ts
Para ejecutar un archivo Ts se instala TypeScript Node:

TS-node: npm install -g ts-node

Link: npm link typescript

Ejecutar: ts-node script.ts


más info: https://www.npmjs.com/package/ts-node
Código TS

function greet(name) {
return "Hello, " + name; Al compilar

let user = "Dieter";

document.body.innerHTML = greet(user);
Notación TS

function greet(name: string) {


return "Hello, " + name; error TS2345: Argument of type
Al compilar
} 'number[]' is not assignable to
parameter of type 'string'.

let user = [0, 1, 2];

document.body.innerHTML = greet(user);
Variables básicas

Boolean: let isDone: boolean = false;

Number: Todos los números son de punto flotante:

let decimal: number = 6;


let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
Variables básicas

String : let color: string = "blue";


color = 'red';

Template strings: pueden abarcar líneas múltiples y tener expresiones. Se crean con
backquote ` y las expresiones son de la forma: ${ expr }

let brand: string = `Lamborgini`;


let color: string = `red`;

let detail: string = `The car brand is ${ brand } and the color is ${ color }`;

let description: string = "The car brand is "+ brand + " and the color is " + color;
Array

Se declara como elemType[ ]


let list: number[ ] = [1, 2, 3];

También usando: Array<elemType>


let list: Array<number> = [1, 2, 3];
iterar array

Las declaraciones for..of y for..in se repiten sobre


las listas.

for..in devuelve una lista de llaves del objeto que


se está iterando.

for... of devuelve una lista de valores de las


valores de las llaves del objeto que se está
iterando.
Variable any

let whatEver: any = false;


whatEver = 123;
whatEver = “Hello World”;
let whatEverList: any[ ] = [1, true, "text"];
Permite optar por la verificación de tipos durante la compilación.
whatEver.ifItExists(); // si existe en tiempo de ejecución.
whatEver.toFixed(); // si toFixed existe (el compilador no revisa).
Tupla

Permite definir el tipo de dato, en cada posición de un array:


[ tipo1, tipo2, tipo3, tipo4 ]

let tupla: [string, number];


tupla = [‘Hola mundo’, 123];
Enum

Es una forma de dar nombres más “amigables” a conjuntos de valores


numéricos.
Por defecto el valor es cero 0, pero también se lo puede inicializar a otro:
enum colorRange {red, green = 1, blue = 3}
let r: colorRange = colorRange.red;
let g: colorRange = colorRange.green;
let b: colorRange = colorRange.blue;
console.log(r, g, b);
Enum

También se puede, a partir de un valor numérico del enum


obtener el nombre de ese valor.

enum colorRange {red, green = 1, blue = 3};


let colorName: string = colorRange[1];
console.log(colorName); // 'green' por el que tiene 1
Void
No devuelve ningún tipo de dato en una función, no se tiene ningún tipo
de dato.
function nothing(): void {
console.log("message with nothing to return");
}
nothing();

let unusable: void = undefined; // no recomendable


Null & Undefined

Tienen sus propios tipos denominados undefined y null


respectivamente.

No son extremadamente útiles por sí solos.

Son subtipos de todos los demás tipos.

Se puede asignar “null” o “undefined” a algo como un número.


Never
Representa el tipo de valores que nunca ocurren.
Por ejemplo, el tipo de retorno para una función o función flecha que siempre lanza una excepción o
una que nunca devuelve;

function error(message: string): never {


throw new Error(message);
}

function fail() {
return error("Something failed");
}

error('error produced');
fail();
Ejercicio 08

Cree una página HTML para mostrar los datos escritos en Ts.
Realice un algoritmo de ordenamiento escrito en Ts.
Funciones

Se tienen las siguientes:


● Funciones con nombre
● Funciones anónimas o métodos anónimos
● Funciones lambda
● Funciones definidas en las clases
clases

JavaScript ha sido principalmente un lenguaje de programación funcional


donde la herencia se basa en prototipos.

En ECMAScript 6, se introdujo el enfoque basado en clases orientado a


objetos.

El compilador de TypeScript compila la clase en TypeScript para que


funcione de manera simple en las funciones de JavaScript y funcione en
todas las plataformas y navegadores.
Interfaces

La interfaz es una estructura que define el contrato o la sintaxis para las clases a
seguir (duck typing).

Las clases que se derivan de una interfaz deben seguir la estructura proporcionada
por su interfaz.

El compilador de TypeScript no convierte la interfaz a JavaScript.

Puede incluir propiedades y declaraciones de métodos utilizando una función o una


función de flecha.
interface IEmpleado{
carnet: number;
nombre: string;
getSalario: (number) => number; // arrow function
getJefe(number): string;
}
¡Angular 2 y más allá!
principios
Iniciando ...

Google lanzó públicamente el 1er “commit” al repositorio de


Angular 2.

Miembros del equipo de núcleo, en ng-europe, (Igor y Tobias),


decidieron que la nueva versión sería diferente a Angular JS.

El motivo: AngularJS no aprovechaba la evolución web y


requerimientos de aplicaciones JavaScript(JS) escalables .
Puntos importantes

- TypeScript y como se extiende a JS.


- Aplicaciones de interfaz de usuario con base en
componentes.
- Uso del mecanismo de inyección de dependencia y
delegación de la lógica de negocios a los servicios.
- Módulo de enrutador y formularios.
- Compilación Ahead-of-Time para la construcción de
aplicaciones rápidas.
Angular y semver

Google anunció que querían seguir el control de


versiones semánticas (semver).

Define la versión de un
determinado proyecto de
software como el triple X.Y.Z.

X: versión principal.
Y: versión menor.
Z: versión de parche.
Más acerca de SemVer

X: Correcciones de errores. Sin cambios de interrupción


entre dos versiones del mismo proyecto.

Y: La versión secundaria de un proyecto se incrementará


cuando se introduzca una nueva funcionalidad y no se
produzcan cambios de incompatibilidad.

Z: La versión principal se incrementará cuando se


introduzcan cambios incompatibles en la API.
En imágenes

fuente: http://thatcsharpguy.com/tv/semver/
Agenda estricta
Cada semana una nueva versión de parche necesita ser
introducida;
Tres lanzamientos menores mensuales después de cada
lanzamiento principal.
Un “Release” importante cada seis meses.
No todos los lanzamientos importantes introducirán
cambios de ruptura que puedan afectar a los proyectos.
Evolución web
ECMAScript 6 o ES2015, introdujo cambios en JS:
- Soporte Built-in para módulos.
- Variables block scope.
- Syntactical sugar (clases y desestructuración).
Creación de Componentes Web.
- Definición de elementos HTML y agregar
comportamiento a ellos.
Componentes Web y Web Workers

Permiten encapsulación, semántica mejorada de


márgenes, modularidad, mejor comunicación entre
desarrolladores y diseñadores.

<google-map latitude="12.678" longitude="-67.211"></google-map>


Componentes Web y Web Workers
Los web workers, permiten la ejecución de scripts de
fondo que se comunican con el hilo principal por pase de
mensajes.
UX aceptable, evitando demoras al momento de
procesar servicios y tener mejores características de
calidad en desarrollo.
En otras palabras un WebWorker

Al ejecutar secuencias de comandos


en una página HTML, la página deja de
responder hasta que se finaliza el
script.

https://www.w3schools.com/html/html5_webworkers.asp
En otras palabras un WebWorker

Un “Web Worker” es JavaScript que se ejecuta en


segundo plano, independientemente de otros scripts, sin
afectar el rendimiento de la página. Se se puede seguir
haciendo lo que se quiera: clics, seleccionar cosas, etc.,
mientras el “Web Worker” se ejecuta en segundo plano.

https://www.w3schools.com/html/html5_webworkers.asp
Directivas y Servicios

Las directivas colaboran para entregar una UI funcional.

Los Servicios son responsables de encapsular la lógica de


negocio de las aplicaciones.

Los servicios RESTful HTTP, WebSockets o WebRTC se


comunican.
Controladores patrones micro-arquitectónicos

El “core team” llamó a AngulasJS como un entorno de trabajo MVW


(Model View Whatever), porque:

- AngularJS sigue MVC, aunque:


- MVVM(Model View ViewModel), por adjuntar vista de modelos
como propiedades al ámbito o al contexto actual en caso de
"controlador como sintaxis".
- MVP(Model View Presenter pattern).
DOM

El estándar W3C DOM se divide en 3 partes


diferentes:

Core DOM: modelo estándar para todos los tipos


de documentos
XML DOM: modelo estándar para documentos
XML
HTML DOM: modelo estándar para documentos
HTML
DOM

DOM define un estándar para acceder a


documentos.
"El Modelo de Objetos de Documento (DOM) del
W3C es una plataforma y una interfaz neutral
para el lenguaje que permite a los programas y
scripts acceder dinámicamente y actualizar el
contenido, la estructura y el estilo de un
documento".
DOM

Cuando una
página HTML
se crea el
navegador
crea un
“Document
Object Model”
de la pagina.
DOM HTML

DOM HTML es un modelo de objeto estándar y


una interfaz de programación para HTML. Se
define:
- Los elementos HTML como objetos.
- Las propiedades de todos los elementos
HTML.
- Los métodos para acceder a todos los
elementos HTML.
- Los eventos para todos los elementos HTML.
Scope

La vinculación de datos en AngularJS se logra utilizando el objeto


scope.

AngularJS 1.2 introdujo controlador como sintaxis, permite agregar


propiedades al contexto actual dentro del controlador dado (this), en
lugar de inyectar explícitamente el objeto de ámbito y posteriormente
agregar propiedades a él.
scope

<div ng-controller="MainCtrl as main">


<button
ng-click="main.clicked()">Click</button>
</div>

function MainCtrl() {
this.name = 'Foobar';
}
MainCtrl.prototype.clicked = function () {
Dependency injection

Proporciona una serie de beneficios, tales como la


facilidad de prueba, la mejor organización del código y la
modularización y simplicidad.
NodeJs

Entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome.

Usa un modelo de operaciones E/S sin bloqueo y orientado a eventos.

Posee un gestor de dependencias que permite instalar o desinstalar librerías.

Angular se basa en NodeJs para usar el gestor de paquetes y dependencias npm.


Node Js

Inicialmente usado para el lado del cliente en aplicaciones web.


2009 fue un cambio, gracias a Ryan Dall, JS se puedo usar al lado
del servidor con Node Js.

Modelo asíncrono dirigido por eventos. NodeJs, evita recargar la


pagina para recibir respuestas, nueva información o
actualizaciones del lado del servidor.

EL usuario no necesita recargar la pagina para recibir, el servidor


responde de forma automática para responder con información
nueva
NodeJS y WebSockets

Websockets es comunicacion asincrona, el


servidor y el cliente pueden enviarse mensajes
todo el tiempo.
El servidor puede enviar mensajes en cualquier
momento sin necesidad de recibir peticiones del
cliente.
Node Js, usa libreria para conectarse a sockets:
SocketIO.
Instalación o actualización NodeJs

Descargar la versión actual


desde:
https://nodejs.org/es/

Proceder con la instalación por


defecto, salvo se quiera elegir
otra dirección o terminar algún
proceso en ejecución.
Comprobar la instalación en la
Angular CLI

Interfaz de línea de comando, genera proyectos, ficheros


y directorios.

Provee de una serie de comandos para iniciar proyectos


y generar componentes, junto a webpack genera builds
o distribuciones comprimidas para producción.
Instalar Angular CLI desde cero

Para instalar de manera global:


npm install -g @angular/cli

O también para instalar la última versión:


npm install -g @angular/cli@latest
Actualizar a la última versión de Angular CLI

Para desinstalar angular cli:


npm uninstall -g angular-cli
npm uninstall -g @angular/cli

Limpiar cache npm:


npm cache clean

Proceder con la instalación descrita en la diapositiva anterior.


Comenzar un proyecto con Angular CLI
1) Instalación Angular CLI.
2) Creación de un nuevo proyecto.
Con el comando: “ng new” se crea un nuevo
proyecto con la estructura base.
Toma tiempo establecer un nuevo proyecto;
la mayor parte se gasta en la instalación de paquetes npm.
3) Ir a la dirección del proyecto.
4) Iniciar el servidor.
ng serve inicia el servidor, observa los archivos y reconstruye la aplicación a medida
que se realizan cambios en los archivos.

Agregando: --open (o solo -o) abrirá automáticamente el navegador en http: // localhost: 4200 /.
Alternativamente se puede usar el comando: npm start
Comandos angular cli

Levantar el ambiente: ng serve


ng serve -o
ng serve --port (puerto)

Generar clase: ng generate class (nombre)

Generar componente: ng generate component (nombre)


con alias: ng g c (nombre)
Comando para crear (generar) componentes

Sin carpeta: ng g c (ruta)/(componente) --flat


Sin spec: ng g c (nombre) --spec false
Sin HTML: ng g c (nombre) --inline-template
Sin estilo: ng g c (nombre) --inline-style
Con scss: ng g c (nombre) --style=scss
Combinando para tener solo .ts:
ng g c (nombre) --spec false --inline-template --inline-style
Comando para crear (generar) componentes

Definiendo prefijo de selector: ng g c (nombre) --prefix (prefijo)


Definiendo selector entero: ng g c (nombre) --selector (prefijo-nombre)
Sin importar a módulo: ng g c (componente) --skip-import
Indicando módulo: ng g c (componente) --module=app.module
Correr pruebas: ng test
Correr pruebas e2e: ng e2e

Mas info oficial en: https://github.com/angular/angular-cli/wiki


Integración de Bootstrap a Angular 7

Tenemos 3 posibilidades de trabajar con la


librería de Twitter Bootstrap junto a Angular.
Integración
de Bootstrap

Por medio de:


BootstrapCDN
Incluyendo
unicamente
Bootstrap’s CSS
compilado y JS.
Integración de Bootstrap

Guardando en assets.
Integración de Bootstrap

Alternativa además de estar guardando en assets, colocamos el “path”


de cada librería en:
Versiones < Angular 6: .angular-cli.json
Versiones >= Angular 6: .angular.json
Integración de Bootstrap con npm

Es posible incluir los archivos Sass y JavaScript de


origen de Bootstrap a través de npm.

npm install bootstrap

npm install [email protected] jquery


popper.js --save
Integración de Bootstrap con npm

Una vez instalado con npm, se


observa que ya se tienen las
dependencias en el archivo:
package.json

Luego se reemplaza la direcciones


en .angular-cli.json o
.angular.json
Integración de Bootstrap con npm

Actualizamos direcciones
en:

.angular-cli.json o
.angular.json

Se borran las carpetas css y


js de assets.
Rutas y navegación en Angular

Servicio opcional que presenta una vista de componente particular


para una URL determinada.
No es parte del núcleo angular.
Tiene su propio paquete de biblioteca, @ angular / router.
Importe lo que necesite de él como lo haría desde cualquier otro
paquete Angular.
Rutas y navegación en Angular

Importamos en la siguiente dirección:


src/app/app.module.ts (import)

import { RouterModule, Routes } from '@angular/router';

Ejemplo: https://stackblitz.com/angular/omdvopjmdyx
Rutas y navegación en Angular

Se crea un arreglo definido como CONST que describe las rutas de


cómo navegar.
const routes: Routes = [
{path: '', redirectTo: '(url x)', pathMatch: 'full'},
{path: '(url 1)', component: (componente 1)},
{path: '(url 2)', component: (componente 2)}
];
Rutas y navegación en Angular

const appRoutes: Routes = [


{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
Rutas y navegación en Angular

@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } <-- //debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
Rutas y navegación en Angular - explicación

El: id en la 2da ruta es un token para un parámetro de ruta:


path:'hero/:id'

En la 3ra ruta la propiedad data es un lugar para almacenar datos


estáticos arbitrarios asociados con esta ruta específica, Ej.: títulos
de página, texto de ruta de navegación y otros datos estáticos de solo
lectura.

La camino vacío (path: '') en la 4ta ruta, es la ruta predeterminada.

El camino ** (path: '**') en la última ruta es un comodín. Cuando la


URL solicitada no coincide con ninguna ruta definida anteriormente.
Rutas y navegación en Angular - explicación

Una ruta de redirección requiere una propiedad pathMatch, que indica


al enrutador cómo hacer coincidir una URL con la ruta de una ruta.

Por ejemplo, el enrutador debe seleccionar la ruta a HeroListComponent


solo cuando la URL completa coincida con '', ya pathMatch esta en
'full'.

Otro valor es 'prefix', cuando la URL restante comienza con la ruta de


prefijo de la ruta de redirect.
Rutas y navegación en Angular - explicación

El orden de las rutas en la configuración importa y esto es por


diseño. El enrutador usa la primera coincidencia. Se deben colocar
rutas más específicas sobre rutas menos específicas.

Para ver qué eventos suceden durante el ciclo de vida de la


navegación, existe la opción enableTracing, ({ enableTracing: true }).
Cada salida del evento enrutador se muestre en la consola del
navegador.
Router Outlet <router-outlet></router-outlet>

Es una directiva de la biblioteca “router” que se


utiliza como un componente.
Actúa como un marcador de posición que marca
el lugar en la plantilla donde el enrutador debe
mostrar los componentes para esa salida.
En otras palabras carga las rutas, donde se
mostrarán y renderizarán.
Router links

Las directivas RouterLink en las etiquetas de anclaje le dan al


enrutador el control sobre esos elementos.

Las rutas de navegación son fijas, por lo que puede asignar una
cadena al routerLink (un enlace "de una sola vez").
Router links

<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center"
routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes"
routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
Router-links

La directiva RouterLinkActive alterna las clases css para los enlaces


RouterLink activos en función del RouterState actual.
Contiene una cadena de clases CSS delimitada por espacios que el Enrutador
agregará cuando este enlace esté activo.
[routerLinkActive] = "'active fluffy'" o la vincula a una propiedad de
componente que devuelve dicha cadena.
Router-links

Los enlaces de ruta activos caen en cascada a través de cada nivel del árbol de
rutas, por lo que los enlaces de enrutador principal y secundario pueden estar
activos al mismo tiempo.
Para anular este comportamiento, puede enlazar el enlace de entrada
[routerLinkActiveOptions] con la expresión {exact: true}. Al utilizar {exact:
true}, un RouterLink dado solo estará activo si su URL coincide exactamente
con la URL actual.

También podría gustarte