Angular

Angular basics

Angular Router Jumpstart



Angular

  • Actualización de proyectos de Angular 8 al 9
    • cd carpeta_mi_proyecto_angular
    • ng update @angular/cli@8 @angular/core@8
    • ng update @angular/cli @angular/core

  • Paquetes interesantes
    • @schematics/update: ayuda a cambiar de versión de angular. Ya viene con angular.

  • Ver fotos de google drive

    • <img src='https://drive.google.com/uc?export=view&id=0VNJV2NyOUtWclltOXM' style="width: 50px; max-width: 100%; height: auto">

Instalación:

  • sudo npm i -g @angular/cli
  •  ng -v
  • ng new my-dream-app
  • cd my-dream-app
    • dentro de la carpeta podemos con ng -v podemos ver con más detalle la cl que tenemos de angular para el proyecto en particular.
  • ng serve (por defecto puerto 4200)
  • ng serve -port 4300 (para cambiar puerto)
  • ng serve -o (para que lo abra en el navegador por defecto)
  • sudo npm install --unsafe -perm -g @angular/cli (en el cas de que la Mac no vagi bé)
  • Setup
  • Incluir si ya no está /dist en .gitignore antes de subir el proyecto a GitHub para que no la suba después de ejecutar ng build --prod

Añadir componentes, módulos, servicios, etc

  • ng generate component nombre-carpeta/nombre-componente
  • ng g c nombre-carpeta/nombre-componente    (forma abreviada)
  • ng generate component nombre-carpeta/nombre-componente --dry-run (--dry-run nos mostrará lo que hace pero sin modificar ficheros. Sirve cuando no estamos seguros de lo que hará el comando ng.)
  • ng g module appRouting --flat (--flat no nos crea la carpeta la carpeta app-routing y dentro el modulo approuting.module.ts)
  • ng g m pages/post --routing. (crea el modulo y un archivo de configuración de rutas
  • ng g c nombre-carpeta/nombre-componente  --spec=false -is -it (no debug,no css propio, no template)
  • ng g c nombre-carpeta/nombre-componente   -is --skipTexts (no css propio, no archivo tests
  • ng generate pipe nombre-carpeta/nombre-pipe 
  • ng g p nombre-carpeta/nombre-pipe   (forma abreviada)
  • ng g c nombre-carpeta/nombre-componente --module=app.module
    • Cuando tengamos 2 módulos, hay que indicar en qué módulo hay que importar el componente. En este caso --module=app.module
  • Ej: 
    - creamos la carpeta components dentro de la carpeta app
    - creamos la carpeta footer dentro de la carpeta components
    - nos situamos en la carpeta principal que contiene todo el proyecto
    - ng crea el componente footer en la carpeta -components/footer: entre otros ficheros: footer.component.(html,ts,css,etc...)
  • ng g guard services/auth --skipTests: genera src/app/services/auth.guard.ts 
  • Al crear un guard pide que elijamos entre:
    • CanActivate (cuando no trabajamos con lazyload)
    • CanActivateChild (si la ruta tiene rutas hijas)
    • CanDeactivate ( de momento no lo sé ???????)
    • CanLoad (cuando utilizamos lazyload)
    • El unico que he elegido hasta ahora es CanActivate. 
  • ng help: Ayuda
    • Si queremos ayuda más restringida tecleamos lo máximo que sabemos 
      • ng g c --help
      • ng g m --help
      • ng new --help 
        • ng new clitest --directory="ej1"
      • ng serve --help
        • ng serve --port 4201 -o

Actualizar versión angular:

  • descargar ultima version NodeJS
  • npm install -g npm@latest
  • npm cache clean --force
  • npm set audit false  (????)
  • npm uninstall -g angular-cli
  • npm uninstall -g @angular/cli
  • npm cache clean --force
  • npm install -g @angular/cli@latest

Cuando hacemos "npm install "y al ejecutar "ng serve" nos dá muchos errores:

    • Esto es debido a que por ejemplo en el package.json tenemos una versión anterior de angular a la que tenemos instalado en global
    • ng update --all nos dá un informe de lo que pasa
    • ng update --all --force actualiza todo lo que ha mostrado el informe del punto anterior
    • Una vez corregido estos errores puede que al ejecutar de nuevo ng serve nos dé un error de typescript Error: The Angular Compiler requires TypeScript >=3.6.4 and <3.8.0 but 3.8.3 was found instead.
    • Es necesario ejecutar npm i typescript@3.64  para el error del punto anterior

    • En el apartado tree-shakeable se indica si la librería que queremos utilizar, solamente se cargan los paquetes que utilicemos 


TypeScript

  • ng add @angular/material  
  • The ng add command will additionally perform the following configurations:
    Add project dependencies to package.json
    Add the Roboto font to your index.html
    Add the Material Design icon font to your index.html
    Add a few global CSS styles to:
    Remove margins from body
    Set height: 100% on html and body
    Set Roboto as the default application font
    You're done! Angular Material is now configured to be used in your application.
  • Aclaración
    • Si hemos decidido instalar hammer, añade  import 'hammerjs en main.ts
    • En app.module.ts se añade import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; o import { NoAnimationsModule } from '@angular/platform-browser/animations' y según lo que hayamos respondido en ng add "@angular/material y a continuación lo incluye en 
    • En angular.json  se incluye en "styles" los módulos
    • En index.htm se añaden los enlaces a los fonts de google de iconos y letras
  • Getting Started


Instalar bootstrap en node-modules:

  • parar el servidor ng serve
  • npm install bootstrap --save
  • npm install jquery  --save
  • npm install popper.js  --save
  • arrancar el servidor ng serve y si compila bien significa que todo ok
  • Modificar el Archivo 'angular.json' para:
  • "styles": [
  •               "src/styles.css",
  •               "node_modules/bootstrap/dist/css/bootstrap.min.css"
  •             ],
  • "scripts": [
  •                "node_modules/jquery/dist/jquery.slim.min.js",
  •                "node_modules/popper.js/dist/umd/popper.min.js",
  •                "node_modules/bootstrap/dist/js/bootstrap.min.js"
  •            ]

Instalar ng-bootstrap:   (requiere haber instalado bootstrap)

  • npm install --save @ng-bootstrap/ng-bootstrap
  • Utilización en un módulo
    • Importar todo
        • import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

        @NgModule({ 
        ... 
        imports: [NgbModule, ...],
         ... 
        })
        export class YourAppModule { }
    • Importar lo que necesitas
        • import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';

        @NgModule({
        ... 
        imports: [NgbPaginationModule, NgbAlertModule, ...], 
        ... 
        }) 
        export class YourAppModule { }

Instalar Font Awesome en node-modules: font awesome

  • parar el servidor ng serve
  • npm install --save @fortawesome/fontawesome-free
  • Modificar el Archiv 'angular.json' para:
    • "styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"]

  • angularfire
  • Se requiere haber instalado @angular/cli 
  •  npm install @angular/fire firebase --save
  • Copiar las credenciales paras dk de Firebase en environtment.ts y environtment.prod.ts
    • export const environment = {
      production: false,
      firebase: {
      apiKey: 'Axxxxxxxxxxxxxx',
      authDomain: 'firestore-xxxxxxxxxx',
      databaseURL: 'https://firestorexxxxxx',
      projectId: 'firestore-xxxxxxx',
      storageBucket: 'firestore-xxxxxxxxx',
      messagingSenderId: '111111111111',
      appId: '222222222222222',
      measurementId: 'A-AAAAAAA'
      }
      };
  • Importar Firestore en  xxx.module.ts  código en xxx.module.ts
    • import { BrowserModule } from '@angular/platform-browser';
      import { AngularFireModule } from '@angular/fire';
      import { AngularFirestoreModule } from '@angular/fire/firestore';
      import { environment } from '../environments/environment';
      .........
      import { AppComponent } from './app.component';
      ........

      NgModule({
      declarations: [
      AppComponent

      ],
      imports: [
      BrowserModule,
      .......,
      .......,
      HttpClientModule, AngularFireModule.initializeApp(environment.firebase),
      AngularFirestoreModule
      ],
      providers: [
      GameService
      ],
      bootstrap: [AppComponent]
      })
      export class AppModule { }

  • Código ejemplo en componente
    • import { Component, OnInit } from '@angular/core';
      import { AngularFirestore } from '@angular/fire/firestore';
      import { map } from 'rxjs/operators';
      import { Game } from '../../interfaces/interfaces';

      @Component({
      selector: 'app-inicio',
      templateUrl: './inicio.component.html',
      styleUrls: ['./inicio.component.css']
      })
      export class InicioComponent implements OnInit {

      juegos: any[] = [];
      constructor( private db: AngularFirestore ) { }

      ngOnInit() {
      // obtener referencia a la db para detectar cambios en
      // la base de datos. "valueChanges()""
      // collection es un observable.
      // Necesitamos el pipe para que "resp" sea un array de
      // objetos con los atributos "name y value" que son los
      // que espera "grafico-barra.components.ts".
      // En "resp.map( ({ name, votos })...", utilizamos la
      // desustructuracion con ("{ name, votos })" en lugar de
      // (juegos)"



      this.db.collection('goty').valueChanges()
      .pipe(
      map( (resp: Game[]) => resp.map( ({ name, votos }) => ({ name, value: votos }) ))
      )
      .subscribe( juegos => {
      // console.log('juegos',juegos);
      this.juegos = juegos;
      });


      /* this.db.collection('goty').valueChanges()
      .subscribe( resp => {
      // console.log(juegos);
      console.log("resp... ",resp);
      }); */



      }

      }
Ej.1 CRUD AngularFire
Ej.2 CRUD AngularFire
Ej.3 CRUD AngularFire
Ej.4 CRUD AngularFire
Ej.5 CRUD AngularFire
Acceso a developer twitter




Routing:

Caso1




Caso 2



Caso3




Frequently Used Modules


NgModule
Import it from
Why you use it
@angular/platform-browser
When you want to run your app in a browser
@angular/common
When you want to use NgIf, NgFor
@angular/forms
When you want to build template driven forms (includes NgModel)
@angular/forms
When you want to build reactive forms
@angular/router
When you want to use RouterLink, .forRoot(), and .forChild()
@angular/common/http
When you want to talk to a server


Ejemplo instancia módulo:
 








  • Directivas: transformar el comportamiento del elemento html. *ngfor es una directiva que interna de Angular. Si sólo es para estilos, mejor utilizar CSS

  • Servicios: Patrón inyección de dependencias.
    • Singleton services
    • http status code
    • Si definimos providedIn: 'root' en el decorador, no es necesario importar el servicio en app.module.ts
      • @Injectable({
        providedIn: 'root'
        })
        • Sino ponemos providedIn: 'root' y el servicio lo queremos sólo para un módulo, lo importamos en el módulo y será una referencia única para ese módulo.
    • Los componentes que lo necesitan lo inyectan en el constructor y lo llamamos en  ngOnInit
    • Crea una referencia única. 
    • En las directivas también se hace.
    • Buena práctica
      • @Injectable()
        export class DbzService {
        //definimos _personajes como privada
        private _personajes: Personaje[] = [
        {
        nombre: 'Goku',
        poder: 15000
        },
        {
        nombre: 'Vegeta',
        poder: 7500
        }
        ];

        // definimos un getter personajes publico que
        recupere _personajes y devuelva otro array
        De esta manera, como en javascript los objetos se 
        pasan por referencia, se devuelve otro array y no
        se puede modificar el array _personajes que es el
        que queremos privado.

        get personajes(): Personaje[] {
        return [...this._personajes];
        }

        constructor() {}

        agregarPersonaje( personaje: Personaje ) {
        this._personajes.push( personaje );
        }

        }


  • RouterModule.forRoot( ROUTES, { useHash: true } ) 
    • Añadimos el literal {useHash: true} esto añadirá un # a la ruta, que es un viejo truco de los navegadores para evitar que el navegador recargue la pagina.  ????
  • JSONPlaceholder
  • Eventos:
    • (click): este evento se ejecuta cuando presionamos algo
    • (onModelChange): cuando el valor de nuestra variable cambia. Requiere [(ngModel)]
    • (focus): al interactuar con input y presionarlo para empezar a escribir este evento es lanzado
    • (keydown): al presionar la tecla sobre cierto elemento
    • (keyup): cuando soltamos la tecla este evento es ejecutado
    • (dblclick): al dar doble click sobre un elemento
    • (mouseenter): cuando movemos nuestro mouse sobre un elemento
    • (mouseleave): al salir de ese elemento 

@ViewChild  decorator

debouncer time en un input: 

  • El tiempo de rebote es el retraso que podemos agregar entre las suscripciones a eventos. Como podemos agregar Debounce Time de 1000 milisegundos que se reinicia después de cada evento KeyUp por parte de un usuario, si el intervalo de tiempo entre el evento KeyUp excede los 1000 ms, entonces hacemos una suscripción o hacemos una llamada API.
  • Ejemplo de un input: hecho manualmente. (En los formularios reactivos ya viene incorporado)

  • import { Component, EventEmitter, Output, OnInit, Input } from '@angular/core';
    import { Subject } from 'rxjs';
    import { debounceTime } from 'rxjs/operators';

    @Component({
    selector: 'app-pais-input',
    templateUrl: './pais-input.component.html',
    styles: [
    ]
    })
    export class PaisInputComponent implements OnInit {

    @Output() onEnter : EventEmitter<string> = new EventEmitter();
    @Output() onDebounce: EventEmitter<string> = new EventEmitter();

    @Input() placeholder: string = '';

    debouncer: Subject<string> = new Subject();

    termino: string = '';

    ngOnInit() {
    this.debouncer
    .pipe(debounceTime(300))
    .subscribe( valor => {
    this.onDebounce.emit( valor );
    });
    }

    buscar() {
    this.onEnter.emit( this.termino );
    }

    teclaPresionada() {
    this.debouncer.next( this.termino );
    }

    }


interfaces a partir de json

  • Copiar el json y pegarlo en la web de https://quicktype.io
  • Seleccinar el lenguaje. En nuestro caso typescript
  • A partir del resultado podemos crear un interface.ts para que Angular tenga el tipado

InfiniteScroll: @HostListener

Animate.css

Buenas prácticas



Pipes-1



Pipes-2





tslint.json

  • En "max-line-length": [true, 140] podemos definir el máximo de caracteres por línea de código.
  • En "max-line-length": [false, 140] podemos definir que no verifique el máximo de caracteres por línea de código.

Swiper: un buen slider. Utilizado en angular-cinema (home.component.ts)

ng-starrating - npm : 

  •      crear la calificación promedio con estrellitas. Ejemplo en PeliculasApp (peliculas-poster-grid.component.ts)

Gráficos ngx-charts: 

  • Repositorio ngx-charts
    • En la documentación/ejemplos tenemos el código StackBlitz
    • Documentación
      • npm install @swimlane/ngx-charts --save
    • Ejemplo vertical bar char
      • Código StackBlitz
        • Copiar contenido de app.component.html de StackBlitz a el componente que estamos trabajando
        • Copiamos el código de app.module.ts 
          • import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
            • import { NgxChartsModule } from '@swimlane/ngx-charts
        • Y lo pegamos a nuestro módulo. A continuación importamos 

        • Copiar contenido de class AppComponent en app.component.ts de StackBlitz a el componente que estamos trabajando
        • Copiar contenido de data.ts de StackBlitz a el componente que estamos trabajando
    • Colores adobe para seleccionar colores de una misma gama
  • ngx-charts (swimlane)

Enlace Ejecutar javascript externo:

Auth0

SweetAlert2 : A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT'S POPUP BOXES

Implement a Theme Switch like the angular material site

Learn Angular in depth

How to talk with Web Components in React and Angular


Mapas





Entradas populares de este blog

Ionic & Capacitor

Ionic Ionic framework Developer Hub Get started with Ionic Crear cuenta Ionic Components Comunicación entre componentes @ViewChild Ionic documentación Api Ionic & Firebase Ventajas e inconvenientes IonicThenesDocumentación plantillas  Base datos Sección navegación blog Post Ionic themes tutorials Ionic Full Starter App Install with CLI sudo npm install -g ionic Crear aplicación: elegimos el tipo que queramos ionic start myApp tabs ionic start myApp blanck ionic start myApp sidemenu Al crear la app nos pide si la queremos en Angular. Vemos que nos crea una estructura basada en angular en la carpeta myApp Ir a la carpeta myApp y ejecutamos ionic serve Para levantar ionic lab:  ionic serve --lab En Visual Studio Code instalar las extensiones Auto Close Tag Ionic 4 Snippets Probar con dispositivo Descargar la app ionic DevApp en la App Store En el terminal del mac sudo npm i -g cordova En la carpeta del proyecto ionic co...
Leer más

Spotify

Spotify SPOTIFY: Acceder amb Chrome (en Safari las pruebas de accesos me fallan ?????) Developper Crear aplicación Acceder a DASHBOARD Create a client ID  para crear una app Ya tenemos el  Client ID  y  Client Secret  que serán necesarios para la API. Instalar POSTMAN Token: Ir a Docs, web API, Authorization Guide Seleccionar:  Refreshable app authorization:  Client Credentials Flow Acceso al token:  Ir a Postman y dar de alta para obtener el token Indicar: POST Teclear:  https://accounts.spotify.com/api/token En la pestaña  Body  dar de alta los key-value KEY                                                 VALUE grant_type                        Client_credentials client_id              ...
Leer más