En aquesta publicació, parlarem de les noves funcions de l’última versió Angular 12, les API obsoletes i el formulari de migració 11

També us pot interessar: “En temps real amb sense servidor utilitzant Websocket a AWS”

Característiques:

Nullish Coalescing:

Nullish Coalescing es va introduir primer a Typescript i els desenvolupadors van poder escriure el codi amb un enfocament més net.

I, per tant, ara la plantilla de vista angular també admet Coalescing nul d’Angular 12.

Podeu pensar en aquesta funció com una manera de “retornar” a un valor predeterminat quan es tractanull oundefined . Quan escrivim codi com.

Per exemple:

{{ foo ?? bar() }}

Aquesta és una nova manera de dir que el valorfoo s’utilitzarà quan sigui “present”; però quan ho ésnull oundefined , calcularbar() al seu lloc.

De nou, el codi anterior és equivalent al següent.

{{ foo !== null && foo !== undefined ? foo : bar() }}

Formularis: introduir validadors min i max

Si tinc un<input type="number" min="0" [(ngModel)]="val" #num="NgModel"> , ho hauria de poder suposarnum.valid seràfalse quan el valor de l’entrada és-10 .

Això és només una suposició bàsica i lògica que faran els desenvolupadors, i fer-ho d’una altra manera, fora de la caixa , sense requerir una directiva addicional de “solució alternativa”, etc., els és un mal servei.

Correcció: anteriormentmin imax atributs definits al<input type="number"> van ser ignorats pel mòdul Formularis. Ara la presència d’aquests atributs activaria la lògica de validació min/max (en cas queformControl ,formControlName ongModel les directives també estan presents en una entrada determinada) i l’estat de control de formulari corresponent ho reflectiria.

S’ha afegit el mètode historyGo al servei d’ubicació:

historyGo, que permetrà a l’usuari navegar a una pàgina específica de l’historial de sessions identificada pel seu
posició relativa a la pàgina actual.

Documentació: https://angular.io/api/common/Location#historyGo

Exemple:

location.historyGo(2) avança dues pàgines ilocation.historyGo(-2) retrocedeix dues pàgines. Quan intentem anar més enllà del que s’emmagatzema a la sessió d’historial, ens quedem a la pàgina actual. El mateix comportament es produeix quanrelativePosition és igual a 0

location.historyGo(2)

Admet el treball d’APP_INITIALIZER amb observable

A Angular v12 podreu retornar directament un Observable. Vegem com:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
import { ConfigService } from "./config.service";

function loadConfigFactory(configService: ConfigService) {
  // Easy as pie  
  return () => configService.getConfig(); //  

  // How you might've done it “before”
  // return () => configService.getConfig().toPromise();
}

export const loadConfigProvider: FactoryProvider = {
  provide: APP_INITIALIZER,
  useFactory: loadConfigFactory,
  deps: [ConfigService],
  multi: true
};

Una cosa important a tenir en compte és que l’Observable s’ha de completar , en cas contrari, el procés d’arrencada no continuarà.

Admet metadades de sol·licitud de client http per utilitzar-les en interceptors:

Anteriorment, quan utilitzeu un interceptor http no podeu passar metadades sobre la sol·licitud a l’interceptor

Ara, el context Http emmagatzema valors arbitraris definits per l’usuari i garanteix la seguretat del tipus sense conèixer realment els tipus. Està recolzat per aMap i garanteix que les claus no xoquen.

Documentació : https://angular.io/api/common/http/HttpContext

@Injectable()
export class UsersService {
  constructor(private http: HttpClient) {}
  
  getUsers() {
    return this.http.get('....', {
      context: return new HttpContext().set('cacheRequest', true); // We have added context here
    })
  }
}

Desactivació d’animacions mitjançant BrowserAnimationsModule.withConfig

Anteriorment, l’única manera de desactivar les animacions era proporcionant elNoopAnimationsModule que no permetia desactivar-lo segons la informació del temps d’execució.

Aquests canvis afegeixen suport per desactivar animacions basades en la informació del temps d’execució mitjançant l’úsBrowserAnimationsModule.withConfig({disableAnimations: true}) .

Documentació : https://angular.io/api/platform-browser/animations/BrowserAnimationsModuleConfig

API obsoletes:

Suport per a IE11:

El suport d’Angular per a Internet Explorer 11 (IE11) de Microsoft està obsolet i s’eliminarà a Angular v13.

Documentació : https://angular.io/guide/deprecations#internet-explorer-11

Node versió 10 o anterior:

Ja no podeu utilitzar Angular amb Node.js versió 10 o anterior.

Migració a Angular 12

Primer comproveu la versió d’Angular de la vostra aplicació: des del directori del vostre projecte, utilitzeung version comandament. Perquè pugueu seleccionar la versió a la guia d’actualització interactiva proporcionada per Angular.

Angular proporciona instruccions completes a la Guia d’actualització d’Angular interactiva, perquè pugueu seleccionar les opcions basades en la vostra aplicació i us donarà els passos i la guia per a l’actualització.

Unimedia Technology

A Unimedia Technology tenim un equip de desenvolupadors nadius al núvol que us poden ajudar a desenvolupar les vostres aplicacions AWS i Azure més complexes.