Angular 7 Sesión #1 PDF
Angular 7 Sesión #1 PDF
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.
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
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
Trata el documento.
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
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.
const Pi = 3.14159;
Convención de codificación
Reglas documentadas para que equipos las sigan o como práctica
de codificación individual.
- Camel Case: Solo las primeras letras están mayúsculas, con excepción
de la primera palabra en algunos casos.
- 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.
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
2) while (condicion)
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
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
Ejercicio
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;
}
}
Ventajas:
- Ayuda a escribir código más limpio.
- Mejorar el rendimiento.
- 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
"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?
Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.
Tiene 3 estados:
Instalan paquetes por nosotros, actualizan los paquetes, permiten publicar paquetes
que creamos y compartirlos con el resto de la comunidad.
- TS es un superset de ES.
function greet(name) {
return "Hello, " + name; Al compilar
document.body.innerHTML = greet(user);
Notación TS
document.body.innerHTML = greet(user);
Variables básicas
Template strings: pueden abarcar líneas múltiples y tener expresiones. Se crean con
backquote ` y las expresiones son de la forma: ${ expr }
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
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
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.
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
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
https://www.w3schools.com/html/html5_webworkers.asp
En otras palabras un WebWorker
https://www.w3schools.com/html/html5_webworkers.asp
Directivas y Servicios
Cuando una
página HTML
se crea el
navegador
crea un
“Document
Object Model”
de la pagina.
DOM HTML
function MainCtrl() {
this.name = 'Foobar';
}
MainCtrl.prototype.clicked = function () {
Dependency injection
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
Guardando en assets.
Integración de Bootstrap
Actualizamos direcciones
en:
.angular-cli.json o
.angular.json
Ejemplo: https://stackblitz.com/angular/omdvopjmdyx
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
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
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.