FUNDAMENTOS

ANGULAR
FABIO ORTIZ
CHARRIS
TEMARIO
ANGULAR

TYPESCRIPT
BOOSTRAP
COMPONENTES
TIPOS DE DATOS
INTERPOLACION-BINDING
RUTAS
DIRECTIVAS
SERVICIOS
ANGULAR

 Angular.io
 Angular es un Framework de JavaScript de código abierto escrito en TypeScript. Su
objetivo principal es desarrollar aplicaciones de una sola página SPA. Google se encarga
del mantenimiento y constantes actualizaciones de mejoras para este framework.
CARACTERÍSTICAS DE ANGULAR

 Document Object Model (DOM)

 DOM (Document Object Model) trata un documento XML o HTML como una estructura de árbol en la
que cada nodo representa una parte del documento.

 Angular usa DOM regular. Hay que tener en cuenta que si se realizan diez actualizaciones en la misma
página HTML. En lugar de actualizar las que ya se actualizaron, Angular actualizará toda la estructura de
árbol de las etiquetas HTML. A diferencia de otros frameworks como React.
TYPESCRIPT

 TypeScript define un conjunto de tipos de JavaScript, lo que ayuda a los usuarios a escribir código
JavaScript que es más fácil de entender. Todo el código TypeScript se compila con JavaScript y se puede
ejecutar sin problemas en cualquier plataforma. TypeScript no es obligatorio para desarrollar una
aplicación Angular.
FUNDAMENTOS TYPESCRIPT

 CONVERTIR TYPESCRIPT A JAVASRIPT

 TIPOS DE DATOS
 FUNCIONES
 TIPADO
 POO:
 CLASES Y OBJETOS
 METODOS
 HERENCIA
 CLASES ABSTRACTAS
 INTERFACES
 DATA BINDING (ENLACE DE DATOS)

 El enlace de datos (data binding) es un proceso que permite a los usuarios manipular elementos de la
página web a través de un navegador web. Emplea HTML dinámico y no requiere secuencias de comandos
ni programación complejas. El enlace de datos se utiliza en páginas web que incluyen componentes
interactivos, como calculadoras, tutoriales, foros y juegos. También permite una mejor visualización
incremental de una página web cuando las páginas contienen una gran cantidad de datos.
TESTING (PRUEBAS)

 Angular usa el Framework de prueba Jasmine. Jasmine proporciona múltiples funcionalidades

para escribir diferentes tipos de casos de prueba. Karma es el ejecutor de tareas para las pruebas
que usa un archivo de configuración para configurar la puesta en marcha, los reportes y el
framework de prueba.
 Angular es un marco modelo-vista-controlador (MVC) completo. Proporciona una guía
clara sobre cómo se debe estructurar la aplicación y ofrece un flujo de datos bidireccional
al tiempo que proporciona un DOM real.
APPMODULE

 Módulos
 Una aplicación Angular tiene un módulo raíz, llamado AppModule, que proporciona el mecanismo de
arranque para iniciar la aplicación.
COMPONENTES

 Estos son piezas o fragmentos de código que define una clase que contiene la lógica y los datos de la
aplicación. Un componente por lo general define una parte de la interfaz de usuario (UI).
 Un componente esta formado por tres archivos principales:
 Html, typescript y un css
 Esto genera el siguiente template para así ser usado:

 <hello-word></hello-Word>
 Cuando Angular haga el render del componente, el DOM resultante será así:
PLANTILLAS

 Es una combinación entre el marcado Angular con HTML para modificar los elementos
HTML antes de que se muestren. Hay dos tipos de enlace de datos:

 Enlace de eventos: permite que su aplicación responda a la entrada del usuario en el

entorno de destino actualizando los datos de su aplicación.

 Enlace de propiedad: permite a los usuarios interpolar valores que se calculan a partir de
los datos de su aplicación en el HTML.
 Cuando la aplicación cargue el componente y su template, el usuario verá lo siguiente:
METADATOS

 Los metadatos le dicen a Angular cómo procesar una clase. Se utiliza para decorar la clase
para que pueda configurar el comportamiento esperado de una clase.
SERVICIOS

 Los servicios sirven para compartir información entre componentes o incluso hacer
peticiones http a apis para obtener la información. Los servicios funcionan solo en ámbito
de lógica o datos, no están asociados a la vista.
INYECCIÓN DE DEPENDENCIA

 Esta característica le permite mantener sus clases de componentes nítidas y eficientes. No

obtiene datos de un servidor, no valida la entrada del usuario ni se registra directamente
en la consola. En cambio, delega tales tareas a los servicios.
DIRECTIVAS ANGULAR

 Las directivas amplían el HTML proporcionándole una nueva sintaxis. Puede detectar
fácilmente las directivas porque tienen el prefijo «ng-«. Considérelos marcadores en el
elemento DOM, indicando a Angular que adjunte un determinado comportamiento al
elemento, o incluso que lo cambie por completo.
 ngFor
 ngIf
 ngClass
 ngModel
VERSIONES DE ANGULAR

 «Angular» es el término general para las distintas versiones que existen. Angular se desarrolló en 2009 y,
como resultado, ha ido evolucionando cada vez más.
 Primero, estaba el Angular original, llamado Angular 1 y eventualmente conocido como AngularJS. Luego
vinieron Angular 2, 3, 4, 5, 6, 7 hasta que finalmente, la versión actual, Angular 12, lanzada el 12/05/2021.
Cada versión posterior de Angular mejora su predecesora, corrige errores, aborda problemas y se adapta a la
creciente complejidad de las plataformas actuales.
 Version actual angular 15
INSTALAR ANGULAR

 Npm install @angular/cli

 Ng new AngularProyect
 Code .

 Instalar angular material

 Ng add @angular/material
ANGULAR/CLI

 La CLI de Angular es una herramienta de interfaz de línea de comandos que se

utiliza para inicializar, desarrollar, montar y mantener aplicaciones de Angular
directamente desde un shell de comandos.

 npm install -g @angular/cli

 ESTRUCTURA PROYECTO ANGULAR

 Al realizar un nuevo proyecto, Angular Cli nos genera un nuevo espacio de trabajo, ng

new.
• e2e: esta carpeta, denominada “end to end”, engloba unas series de ficheros cuya función es la
realización de test automáticos, como si un usuario interactuase con la app. Se ejecuta con el
comando ng e2e.

• node_modules: es la carpeta que contiene todas las dependencias de nuestro proyecto.

• Src: es el directorio donde trabajaremos nuestros módulos. Además, es el más importante, ya

que contiene todo el código.
• Carpeta app
• Aquí se encuentra la carpeta app donde se ubica toda la implementación de los componentes principales, junto a su
template html y archivos de estilos css.
• Carpeta assets
• Contendrá todos los asset y archivos adicionales para hacer que el proyecto funcione.
• Carpeta enviroments
• Donde se encuentra las configuraciones y variables de entorno para poner el proyecto tanto en desarrollo como en
producción..
• Archivo favicon.ico
• Es el archivo del icono del proyecto.
• Archivo index.html
• Es el archivo de la página principal del proyecto.
 Archivo main.ts
 Es el archivo Type Script inicial del proyecto donde podrás configurar todas las configuraciones globales del proyecto.
 editorconfig: es la configuración de nuestro editor de código.
 .gitignore: son las carpetas o archivos que debe ignorar el git cuando lo añadamos al repositorio.
 angularjson: contiene la configuración de Angular. Además, incluye rutas, versiones, etc.
 package.json: es la configuración de nuestra aplicación. Contiene el nombre de la app, las dependencias necesarias
para su correcta ejecución y muchas otras cosas.
 REARME.md: aquí podemos añadir información sobre la aplicación. Este archivo es leído por GIT y los muestra en el
repositorio.
 tsconfig.json: contiene la configuración TypeScript.
 tslint.json: se utiliza para que el código sea sostenible y se mantenga.
 INDEX.HTML – AGREGANDO BOOSTRAP

 <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootst
rap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD6
5VohhpuuCOmLASjC" crossorigin="anonymous">
 <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstra
p.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
 Crear componente Manual
 import {Component } from '@angular/core'

@Component({
 selector:’app-carrusel',
 template:`<h1>Clase Angular</h1><br>
 <h4>Componentes</h4>
 <h4>Angular 13</h4>
 <h4>Semillerosti</h4>
 `
 })
Tipos De Datos

 export class carrusel{

     public titulo!: string;
     public temas!: string;
     public version!: number;
     public grupo!: string;
    
    constructor(){
     this.titulo = "Angular fundamentos";
     this.temas = “Componentes Angular";
     this.version = 13;
     this.grupo = “SemillerosTI”;
     console.log('Mi primer Componente');
    }
 }
 INTERPOLACION

 La interpolación de cadenas en Angular es el mecanismo para sustituir una expresión por un valor de tipo string en la
plantilla (template). Cuando Angular se encuentra una expresión entre {{}} en la plantilla lo evalúa y trata de sustituir el contenido por el valor
de la propiedad del componente con el mismo nombre.
 import {Component } from '@angular/core'

@Component({
 selector:’app-carrusel',
 template:`<h1>{{titulo}}</h1><br>
 <h4>{{nombre}}</h4>
 <h4>{{edad}}</h4>
 <h4>{{activo}}</h4>
 `
 })
 CREAR COMPONENTES LINEA DE COMANDOS

 Ng g c Components/menú

 Ng g c Componnets/footer
 html
 <div class="bg-secondary fixed-bottom">
     <p>Barranquilla, colombia</p>
 </div>
APP.COMPONET.HTML

 <menú></menú>
 <footer></footer>
 <router-outlet></router-outlet>
 @Component({
 selector:’app-carrusel',
 templateUrl: './carrusel.component.html'
 })
CREAR COMPONENTES

 ng g c Componets/Cards
 Ng g c Components/video

 import { YouTubePlayerModule } from ‘@angular/youtube-

player’;
 Imports[ YouTubePlayerModule]
EN EL COMPONENTE HTML

 <youtube-player
videoId="80_Cr9m-1fE"
suggestedQuality="highres"
[height]="250"
[width]="500"
[startSeconds]="4"
[endSeconds]="8">
</youtube-player>
EN EL TS

 ngOnInit() {
 // Este código carga el reproductor de la API en un iframe de manera asíncrona,
siguiendo las instrucciones:
 // https://developers.google.com/youtube/iframe_api_reference#Getting_Started
 const tag = document.createElement('script');

 tag.src = "https://www.youtube.com/iframe_api";
 document.body.appendChild(tag);
 }
RUTAS

 Import {RouteModule, Routes} from “:/@angular/router”

 const routes: Routes = [


    {path: 'Cards', component: CardsComponent},
     {path: 'Carrusel', component: carrusel},
     {path: 'Tabla', component: TablaComponent}

];

 imports: [
     BrowserModule,
     RouterModule.forRoot(routes)
   ],
ROUTERLINK

 <a class="nav-link active" aria-current="page"

href="/Cards">Home</a>

  <a routerLink="/Cards">Cards</a>  <br>  

             <a routerLink="/Carrusel">Carrusel</a>  
DIRECTIVAS NGIF Y NGFOR

 Las directivas *ngIf y *ngFor son atributos que podemos agregarle a los elementos
HTML que nos permiten en el caso del *ngIf condicionar si dicha marca debe agregarse a
la página HTML.

 La directiva *ngFor nos permite generar muchos elementos HTML repetidos a partir del
recorrido de un arreglo de datos.
Directiva *ngFor
 Families:Array<any> = [{
 Codigo: 2341,
 Nombre: 'Fabio',
 Apellidos :'Ortiz Charris',
    {
     Codigo: 5433,
     Nombre: 'Jocelyn',
     Apellidos :'Ortiz Buendía',

 Edad: 45      Edad: 21
     }, 
 },
 {
 {
       Codigo: 4786,
   Codigo: 6542,
       Nombre: 'Johana',
   Nombre: 'Nicolle',        Apellidos :'Gonzalez Ramirez',
   Apellidos :'Ortiz Gonzalez',        Edad: 36
   Edad: 4        },

   },  ]
 <tbody>
         <tr *ngFor="let item of Families; index as i">
         <th scope="row">{{i+1}}</th>
         <td>{{item.Codigo}}</td>
         <td>{{item.Nombre}}</td>
         <td>{{item.Apellidos}}</td>
         <td>{{item.Edad}}</td>
         </tr>
     </tbody>
Ng template

 <td *ngIf="item.habitantes < 50000000;else menor">Numeroso</td>

        <ng-template #menor><td>No es numeroso</td></ng-template>
PIPES

 Las pipes también llamadas tuberías o filtros son funciones que se llaman en una vista
(html) y que tienen por objetivo transformar un dato a mostrar para mejorar la experiencia
del usuario.

 Hay una cantidad reducida de pipes que trae por defecto Angular y podemos hacer uso en
cualquier vistas de nuestras componentes. Lo más importante es que podemos crear
nuestras propias pipes, lo veremos en el próximo concepto.
<p>Nombre del cliente:{{ nombre | uppercase}}</p>
<p>Nombre del cliente:{{ nombre | lowerrcase}}</p>
<p>El saldo es:{{ saldo | currency:'$'}}</p>
<p>Días laborables: {{ dias | slice:1:6}}</p>
<p>{{ articulos | json }}</p>
<p>Fecha actual:{{ fechaActual | date:'d/M/y' }}</p>
Directiva *ngIf

 <h1 class=“container” text-center text-White bg-primary my-4 py-4>

 DIRECTIVA *ngIf </h1>
 <p class=“text-info”>Una directiva es… </p>
 <p class=text-danger” ngIf=“false>… </p>

 <button class=“btn btn-primary” (click)=“show=true”> ver mas…</button>

 <p class=text-danger” ngIf=“show>… </p>
¿QUÉ ES NG-TEMPLATE?

 Es una etiqueta del template propia de angular que puede utilizarse con directivas
estructurales (ngIf, ngFor, ngSwitch) y con directivas propias.
 Esta etiqueta no se renderiza en el DOM

 <p *ngIf="edad>=18; else menor">Es mayor de edad.</p>

 <ng-template #menor><p>Es un menor de edad.</p></ng-template>
*ngIf

 .ts
 Export class NgIf{
 Show:boolean = false;
 ngInit(){

 }
 Constructor(){
 }
 }
NGIF

 <button class=“btn btn-primary” (click)=“show=!show”> ver mas…</button>

 <p class=text-danger” ngIf=“show>… </p>
ngIf con else

 <button class="btn btn-danger" (click)="show=!show">Ver

Imagen...</button>
 <img *ngIf="show else show2" src=“”>
 <ng-template #show2>
 <img src=“”>
 </ng-template>
ngModel

 Esta directiva nos permite tener un enlace unidireccional entre una propiedad de
nuestra clase con el valor que se muestra un control de formulario HTML de tipo
input, textarea etc.

 Import { ngModel } from ‘./angular/core’

NGMODULE

 <div>
 <p>Ingrese nombre<input type="text" [(ngModel)]="nombre"></p>
 <p>Ingrese apellido<input type="text" [(ngModel)]="apellido"></p>
 <p>Nombre completo:{{nombre}} {{apellido}}</p>
 </div>
PASAR DATOS ENTRE COMPONENTES

 Child.ts
 Import { Component, OnInit, Input } from ‘/angular/core’;

 @Input nombre:string = ‘’;

 Father.ts
 Names:string [] =[]
 Cosntructor(){ [‘Nicolle’,’Jocelyn’,’Grego’,’Johana’] }
Father.html

 <div class=“container>
 <ul>
 <li *ngFor item of names></li>
 <app-child [name] = “item”></app-child>
 </ul>
 </div>
ENVIAR DATOS DESDE EL HIJO AL PADRE

 export class HijoComponent {

   @Input() nombrehijo:string = '';
   @Output() respuesta = new EventEmitter<string>();
   ngOnInit(){  }
 constructor(){ }
 mensaje(){
 this.respuesta.emit('Saludos desde el  Componente Hijo'+Date.now.toString);
 }
 }
.html

 <h1>Componente Hijo</h1>
 <h1>{{nombrehijo}}</h1>
 <button class="btn btn-secondary"
(click)="mensaje()">Enviar</button>
 <hr>  
Padre.ts

 export class PadreComponent {

  titulo:string ='Componente padre';
  mensaje:string ='Bienvenido';
  respuesta:string = '';
 ngOnInit(){ }
 constructor(){ }
 mostrar(){
  this.mensaje = 'Hola, saludos desde el ' + this.titulo;
}
.html

 <h1>{{titulo}}</h1>
 <button class="btn btn-primary" (click)="mostrar()">Mostrar</button>
 <hr>
 <app-hijo nombrehijo = {{mensaje}} (respuesta)="titulo = $event"></app-hijo>
FORMULARIOS REACTIVOS
Angular material - tablas

 ng add @angular/material

 App.module
 import { HttpClientModule} from '@angular/common/http’;

 Imports:[
 HttpClientmodule
 ]
servicios

 Ng g s Servicios

 Appmodule
 Import {HttpClientModule } from ‘@angular/common/http’

 Providers[
 HttpClientModule
 ]
 Services.ts

 Import { HttpClient } from ‘@angular/common/http’

 Private uri = ‘https://jsonplaceholder.typicode.com/posts’;
 Constructor(private httpclient: HttpClient){ }
 getPosts(){
 Return httpclient.get(this.uri);
 }
Tablas en Angular Materia UI

 import {MatTableModule} from '@angular/material/table';

 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';

 Imports:[
 ]
Table.ts
  import { MatPaginator} from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource} from '@angular/material/table’;

 export interface Users{

   id:string;
   userid:string;
   title:string;
   body:string
 }

 displayedColumns:string[] = ['id', 'userid','title', 'body’]

 Datasource: MatTableDataSource<Users>
 Post:any
Tabla.ts

 Import { TableService} from ‘’;

 Constructor( private service: TableService){

 this.service.getPosts().subscribe(data=>{
   console.log(data);
 This.post = data;
 This.dataSource = new MatTableDataSource(this.post);
 })
paginador

 @ViewChild(MatPaginator) paginator!: MatPaginator;

 @ViewChild(MatSort) sort! : MatSort;

 En el constructor
 //paginador
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;

 //En el html
 <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page
of users"></mat-paginator>
Filtro

 applyFilter(event: Event){
   const filtervalue = (event.target as HTMLInputElement).value;
   this.dataSource.filter = filtervalue.trim().toLowerCase();
   if(this.dataSource.paginator){
     this.dataSource.paginator.firstPage();
   }
 Datasource: MatTableDataSource<Users>
ANGULAR + ANGULAR MATERIAL

 import {MatMenuModule} from '@angular/material/menu';

APP.COMPONENT.HTML

 <mat-toolbar>
 <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
 <mat-icon>menu</mat-icon>
 </button>
 <span>My App</span>
 <span class="example-spacer"></span>
 <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
 <mat-icon>favorite</mat-icon>
 </button>
 <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
 <mat-icon>share</mat-icon>
 </button>
 </mat-toolbar>
APP.MODULE

 ToolBar
 import {MatToolbarModule} from '@angular/material/toolbar’;
 Mat.Icon
 import {MatIconModule} from '@angular/material/icon’;
 Mat.Button
 import {MatButtonModule} from '@angular/material/button';

 Imports:[
 MatToolbarModule,
 MatIconModule,
 MatButtonModule
 ]
Copiar css

 .example-spacer {
 flex: 1 1 auto;
 }
Math.icon
DIALOG

 import {MatDialogModule} from '@angular/material/dialog’;

 AGRGAR BOTON ABRIR MODAL

 <button mat-button (click)="openDialog()">Open dialog</button>

 AGREGAR COMPONENTE: ng g c dialogo

En el .ts Agregar

 import {MatDialog} from  openDialog() {

'@angular/material/dialog';  this.dialog.open(DialogComponent);
 @Component({  }
 selector: 'dialog-content-example',  }
 templateUrl: 'dialog-content-example.html',
 })
 export class DialogContentExample {
 constructor(private dialog: MatDialog) {}