1) Node.js es un entorno de ejecución de JavaScript del lado del servidor que permite ejecutar código JavaScript independientemente del navegador. 2) Npm es el administrador de paquetes predeterminado de Node.js que permite instalar paquetes y librerías. 3) El método forEach() ejecuta una función callback por cada elemento de un array sin devolver un nuevo array.

1. CONFIGURACION
ENTORNO DE
DESARROLLO
Mg. Richard E. Mendoza G.

3. https://www.youtube.com/watch?v=jo_B4LTHi3I

5. 5
• Node.js es un entorno multiplataforma de
ejecución de JavaScript. Basado en el motor
JavaScript de Google Chrome V8, permite la
ejecución de código JavaScript en el lado del
servidor, por lo tanto, independiente del
navegador. Por lo general, se usa para
implementar plataformas back-end del lado
del servidor, pero también permite que se use
para desarrollar aplicaciones web que siguen
el paradigma de «JavaScript en todas partes».
Los puntos fuertes de Node.js son la
velocidad y la escalabilidad, especialmente en
entornos con muchas E / S y mucho tráfico.
• Npm es el administrador de paquetes
predeterminado de Node.js.
NODE.JS

6. https://nodejs.org/es/

7. 7
• forEach() ejecuta la función callback una vez por cada elemento del
array; a diferencia de map() o reduce() este siempre devuelve el valor
undefined y no es encadenable. Este método entra dentro del
grupo de Iterables sin devolver una nueva matriz, lo que hace el
forEach es ejecutar una función por cada elemento del arreglo.
En cada iteración se tendrá acceso a 3 variables: valor (del
elemento), índice (del elemento) y arreglo (que estamos
recorriendo).
FOREACH

8. 8
• La estructura de datos Map es una
estructura que ayuda a almacenar datos,
permitiendo asociar valores de tipos
primitivo u objetos con sus respectivas
claves. Cada par consiste en una clave
única y un valor que se asocia con dicha
clave. Es un tipo de estructura
relativamente reciente, ya que se agregó
con la versión ES6 de JavaScript, junto a
otras estructuras como la estructura Set.
• La estructura Map dispone de su
propio constructor, por lo que para
crear una nueva instancia tendremos
que usar la sentencia new:
ESTRUCTURA MAP
const mapa = new Map();
const = new ([ ['nombre', 'Edu'],
['apellido', 'Lazaro'], ['edad', 35] ]);

10. https://www.youtube.com/watch?v=YbyZdFA6Qt4

12. Angular es un framework opensource desarrollado por Google
para facilitar la creación y programación de aplicaciones web de
una sola página, las webs SPA (Single Page Application).
Su objetivo es aumentar las
aplicaciones basadas en
navegador con capacidad
de Modelo Vista
Controlador (MVC), en un
esfuerzo para hacer que el
desarrollo y las pruebas
sean más fáciles.
¿QUÉ ES ANGULAR?

13. Una web SPA (Single Page Application) es una página web la
cual está todo el contenido en una sola página, es decir, carga
tan solo un archivo HTML y todo se produce dentro de este
único archivo. De esta manera se puede ofrecer una
experiencia más fluida, más rápida.
¿QUÉ ES SPA?

14. TypeScript es un lenguaje de programación libre y de código abierto
desarrollado y mantenido por Microsoft.
● EsunSupersetdeJavaScript
● EsunagregadoaJavaScript,noloreemplaza
● Agreganuevascaracterísticascomo
○ Tipos
○ Clases
○ Interfaces
¿QUÉ ES TYPESCRIPT?

15. Esunsetdeherramientasde
consolaprovisto porAngularpara:
● Transpilarnuestrocódigo(ts->js)
● Crearunservidorlocal
● Generarrecursosparanuestraapp
● Entremuchosotros...
¿QUÉ ES ANGULAR CLI?
• Instalar node.js
• npm –v o node -v
• Instalar visual studio
code
• Extensiones
• Angular Language
Service
• TsLint Microsoft
• npm i –g @angular/cli
• ng new projectName
• ng serve

16. V1:ConocidacomoAngularJS,basadaenJavaScript
V2:Revisióncompletadelframework(Angular)
V4:PrimerupdatemayoraAngular
(Preprogramados)
V5: SegundoupdatedeAngular
V6:TercerupdatedeAngular
V11:UltimoupdatedeAngular
VERSION STATUS RELEASED ACTIVE ENDS LTS ENDS
^11.0.0 Active Nov 11, 2020 May 11, 2021 May 11, 2022
^10.0.0 LTS Jun 24, 2020 Dec 24, 2020 Dec 24, 2021
VERSIONES ANGULAR

17. ¿QUÉPASÓCONLAV3?
IgorMinar,líderdelequipodeAngularen
Google,explicóquesesaltódelaversión2ala4
paraalinearlaversióndeAngularRouter(3.3.0)
conladelrestodelosmódulos(2.3.0)
├── .editorconfig # Configuración para editores de código
├── .gitignore # Lista de archivos no rastreados por git
├── angular.json # Archivo de configuraciones de construcción, compilacion y testing.
├── browserslist # Configuración compartidas para los navegadores
├── e2e/ # Carpeta para los test end to end
├── karma.conf.js # Configuraciones de Karma (Unit test)
├── node_modules/ # Carpeta de las librerías y paquetes instalados por npm
├── package-lock.json # Provee información sobre las versiones de las paquetes de npm
├── package.json # Configuración de las paquetes de npm
├── README.md # Introducción a la documentación de la app
├── src/ # Carpeta de la aplicación raíz
├── tsconfig.app.json # Configuraciones de Typescript especificas de la app
├── tsconfig.json # Configuraciones de Typescript
├── tsconfig.spec.json # Configuraciones de Typescript para los test
└── tslint.json # Configuraciones TsLint

18. 18
• En el archivo app-routing-module.ts se
encuentra un objeto Route el cual sirve
para incrustar las rutas del proyecto.
• Además, debemos importar los
decoradores que hacen referencia a los
componentes.
• En el app-component debemos llamar al
tab
• <router-outlet></router-outlet> el cual
carga el componente indicado según su
ruta.
RUTAS EN ANGULAR
La sintaxis dentro del route:
{
path = ‘routeName’,
component = componentName
}
ng g c home
ng g c products
ng g c contact
//app-routing-module.ts
import { HomeComponent } from './home/hom
e.component';
import { ProductsComponent } from './prod
ucts/products.component';
import { ContactComponent } from './conta
ct/contact.component';
const routes: Routes = [
{
path: 'home',
component: HomeComponent},
{
path: 'products',
component: ProductsComponent},
{
path: 'contact',
component: ContactComponent},];
//app.component.html
<router-outlet></router-outlet>

19. 19
• El enlace de datos en aplicaciones (Data-
Binding) en Angular es la sincronización
automática de datos entre el modelo y
los componentes de la vista. La forma en
que Angular implementa el enlace de
datos le permite tratar el modelo como la
única fuente de verdad en su aplicación.
La vista es una proyección del modelo en
todo momento. Cuando el modelo
cambia, la vista refleja el cambio, y
viceversa.
DATA BINDING EN ANGULAR
import { FormsModule } from
‘@angular/forms’
<input type = "text"
[(ngModel)]="usuario"/>
<br>
<h4>Bienvenido: {{usuario}}</h4>

20. 20
• Los módulos y rutas sirven para dividir y
abstraer mejor por dominio la aplicación.
• Los componentes que hacen parte de una
página en particular se pueden
encapsular en un mismo módulo.
• Los módulos especiales son core y
shared.
• Core: guarda todos los servicios y
componentes que usaremos a lo largo de
todos los otros módulos.
• Shared: podemos almacenar
componentes y servicios compartidos.
NGMODULE
ng g c header
ng g c footer
ng g c banner

21. 21
• Los templates de Angular utilizan html
como lenguaje de maquetación donde se
puede ejecutar interpolación de strings
mediante una implementación de
moustache donde dentro de los
corchetes puedes hacer una sentencia
que se resolverá como un string para ser
renderizado en el DOM.
• Nuestros templates tienen acceso a las
variables exportadas en el arc.ts con el
mismo nombre, mismas que podemos
renderizar mediante los string
interpolation, por ejemplo:
STRING INTERPOLATION
<h1>{{ title }}</h1> <!-- Renderiza el
título exportado en el archiv ts -->
<p>
Las suma de 2 + 2 = {{ 2 + 2 }} <!-- 4 -->
</p>

22. 22
Un componente es un bloque, que
contiene un template, contiene estilos ,
contiene lógica:
• Un archivo que será nuestro Template
(app.component.html).
• Un archivo de lógica, la cual es la que
pondremos en un archivo .ts (como por
ejemplo app.component.ts).
• Un archivo para el CSS, donde incluiremos
los estilos.
COMPONENTES

23. 23
• Los decoradores Angular permiten
indicar al framework cómo interpretar un
elemento.
• Por ejemplo, el decorador @Component
se ha utilizado a lo largo de este capítulo
para indicar que la clase asociada se debe
interpretar como un componente.
• Sin el decorador @Component, la clase
se hubiera considerado como una clase
TypeScript simple, sin enlace con
ningún componente.
• La gran ventaja de los decoradores es
separar la parte del negocio, de la
información técnica.
DECORADORES

25. 25
• Las directivas estructurales son
responsables del diseño HTML. Dan
forma o remodelan la estructura del
DOM, generalmente agregando,
quitando o manipulando elementos.
• Al igual que con otras directivas, aplica
una directiva estructural a un elemento
host. Luego, la directiva hace lo que se
supone que debe hacer con ese elemento
de host y sus descendientes
• Las directivas estructurales son fáciles de
reconocer. Un asterisco (*) precede al
nombre del atributo de la directiva como
en este ejemplo.
USO DE ngIf
<div *ngIf="title === 'Store'; then
store">
Simple vista
</div>
<!-- creamos una vista o template de
nombre store -->
<!-- la misma será referencidad en la
condición de arriba -->
<ng-template #store>
Mostrando contenido
</ng-template>

26. 26
• Las directivas estructurales son
responsables del diseño HTML. Dan
forma o remodelan la estructura del
DOM, generalmente agregando,
quitando o manipulando elementos.
• Al igual que con otras directivas, aplica
una directiva estructural a un elemento
host. Luego, la directiva hace lo que se
supone que debe hacer con ese elemento
de host y sus descendientes
• Las directivas estructurales son fáciles de
reconocer. Un asterisco (*) precede al
nombre del atributo de la directiva como
en este ejemplo.
USO DE ngIf
<div *ngIf="title === 'Store'; then
store">
Simple vista
</div>
<!-- creamos una vista o template de
nombre store -->
<!-- la misma será referencidad en la
condición de arriba -->
<ng-template #store>
Mostrando contenido
</ng-template>

27. 27
• Una directiva estructural que genera una
plantilla para cada elemento de una
colección. La directiva se coloca en un
elemento, que se convierte en el padre
de las plantillas clonadas. ngForOf se usa
generalmente en la forma abreviada *
ngFor. De esta forma, la plantilla que
se representará para cada iteración es
el contenido de un elemento de ancla
que contiene la directiva.
USO DE ngFor add y delete
script
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'misiontic-store';
nombre: string;
items = ['juan', 'pedro', 'nicolas'];
addItem() {
this.items.push(this.nombre);
this.nombre = '';
}
deleteItem(index: number) {
this.items.splice(index, 1);
}
}
html
<input type="text" [(ngModel)]="nombre">
<button (click)="addItem()">Add nombre</button>
<ul>
<li *ngIf="items.length === 0"> la lista esta vacia</li>
<li *ngFor="let name of items; index as i">
{{i+1}}--{{name}} <button (click)="deleteItem(i)">Borrar</button>
</li>
</ul>

28. 28
• routerLink: esta directiva, que viene del
módulo routerModule, se usa en
sustitución del atributo estándar href. La
directiva instruye al navegador para qué
no solicite la ruta al servidor, sino que el
propio código local de JavaScript se
encargará de procesarla.
• routerLinkActive: esta directiva tiene la
función de aplicar una clase cuando la
ruta se encuentre activa, así mismo esta
directiva se aplica en el elemento padre
que contiene el routerLink
routerLink y routerActive
<a [routerLink]="[ 'home', 'location', '1', 'hero' ]">Hero</a>
<li routerLinkActive="active">
<a [routerLink]="[ 'home' ]">Home</a>
</li>
<!--header.component,html-->
<nav>
<a routerLink="/home" routerLinkActiv
e="active">Home</a>
<a routerLink="/products" routerLinkA
ctive="active">Products</a>
<a routerLink="/contact" routerLinkAc
tive="active">Contact</a>
</nav>
/*header.component.scss*/
nav > a {
padding: 5px;
text-decoration: none;}
nav > a.active {
background-color: blue;}

29. 29
• Los formularios en angular, nos debemos
preocupar solamente, en crear un
modelo de nuestro formulario y llamarlo
correctamente en el form… tranquilos es
mas fácil de lo que parece.
• para crear el modelo no usaremos
angular cli, simplemente vamos a crear
la carpeta en nuestro proyecto,
app.componet.ts, recordemos que ts es
por typescript, para nuestros modelos
llevara la siguiente estructura:
FORMULARIOS EN ANGULAR
<h1>Formulario</h1>
<form (ngSubmit)="onRegister()" #myForm="
ngForm"><div class="input-group">
<label for="name">Nombre</label>
<input type="text" name="name" requir
ed id="name" [(ngModel)]="register.name"
/><p>Mensajes de error</p></div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" name="email" required
id="email" [(ngModel)]="register.email"
/><p>Mensajes de error</p></div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" name="password
" required id="password" [(ngModel)]="reg
ister.password" /><p>Mensajes de error</p
></div>
<button [disabled]="myForm.invalid" typ
e="submit">Registrar</button>
<button type="button">Accion</button>
</form>
//app.component.ts
register = {
name: '',
email: '',
password: '',}
onRegister() {
console.log(this.register);}

30. 30
• El paso de información de padres a hijos
se realiza por medio de propiedades del
componente. La información se bindea
desde el template, usando los atributos
de la etiqueta del componente. Las
propiedades del componente se deben
decorar con @Input, de modo que
Angular sea capaz de saber que éstas son
capaces de inicializarse, o modificarse,
desde fuera.
@Input
@Input
data flow
Parent Child
//img.component.html
<img width="200" [src]="img" *ngIf="img; else
elseImg">
<ng-template #elseImg>
<img src="./assets/images/default.png" alt="">
</ng-template>
//img.component.ts
import { Component, OnInit, Input } from
'@angular/core';
@Input() img: string = 'valor init’;
//app.component.ts
export class AppComponent {
imgParent = ’’;}
//app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
FormsModule],

31. 31
• También puede surge que los hijos
comuniquen a los padres cambios en la
información que ellos manejan. Para
definir los eventos que van de los hijos a
los padres, Angular usa el decorador
@Output
@Ouput
@Output
data flow
Parent Child
//img.component.html
<img width="200" (load)="imgLoaded()"
(error)="imgError()" [src]="img" *ngIf="img; else
elseImg">
<ng-template #elseImg>
<img [src]="imageDefault" alt="">
</ng-template>
//img.component.ts
import { Component, OnInit, Input, Output,
EventEmitter } from '@angular/core';
@Input() img: string = '';
@Output() loaded = new EventEmitter<string>();
imageDefault = './assets/images/default.png';
imgError() {
this.img = this.imageDefault;}
imgLoaded() {
console.log('log hijo');
this.loaded.emit(this.img);}
//app.component.ts
export class AppComponent {
imgParent = '';
onLoaded(img: string) {
console.log('log padre', img);}
//app.component.html
<p><input type="text" [(ngModel)]="imgParent"
/></p>
<app-img (loaded)="onLoaded($event)"
[img]="imgParent"></app-img>