Hvad er nyt i Angular 7.0, og hvordan du kan opgradere

Introduktion

Angular har udgivet sin seneste version, Angular 7.0. I denne artikel vil vi undersøge følgende punkter:

  • Hvad er nyt i Angular 7.0
  • Oprettelse af din første Angular 7.0-applikation ved hjælp af Angular CLI
  • Sådan opdateres din eksisterende Angular-applikation til Angular 7.0

Hvad er nyt i Angular 7.0?

  1. Mens der oprettes et nyt Angular-program, beder Angular CLI brugeren om at vælge, om de vil tilføje funktioner som Angular routing eller formatet på det stilark, de vil bruge i deres applikation
  2. Angular 7.0-applikationer bruger Bundle Budget-funktionen i Angular CLI. Dette advarer udviklere, hvis applikationsbundtestørrelsen overstiger den foruddefinerede grænse. Standardværdien for advarslen er indstillet til 2 MB, og for fejl er den 5 MB. Denne værdi kan konfigureres og kan ændres fra angular.jsonfilen. Denne funktion forbedrer applikationens ydeevne betydeligt.
  3. Component Dev Kit (CDK) af kantet materiale modtager også nogle nye funktioner som en del af denne opdatering. De to nyligt tilføjede funktioner i CDK er:
  • Virtuel rulning Hvis du forsøger at indlæse en stor liste med elementer, kan det påvirke applikationens ydeevne. Dettag kan bruges til at indlæse kun den synlige del af listen på skærmen. Det gengiver kun de emner, der kan passe på skærmen. Når en bruger ruller gennem listen, indlæser og aflader DOM elementerne dynamisk baseret på skærmstørrelsen. Denne funktion må ikke forveksles med uendelig rulning, som i det hele taget er en anden strategi for at indlæse elementer. Du kan læse mere om Virtual Scrolling her.
  • Træk og slip

    Vi kan nemt tilføje træk og slip-funktionen til et element. Det understøtter funktioner såsom gratis trækning af et element, omordning af emner på en liste, flytning af emner mellem listen, animation, tilføjelse af et brugerdefineret trækhåndtag og begrænset trækning langs X- eller Y-aksen. Du kan læse mere om træk og slip her.

4. Den mat-form-fieldunderstøtter nu brugen af ​​det oprindelige valgelement. Dette giver forbedret ydeevne og anvendelighed til applikationen. Læs mere om denne funktion her.

5. Angular 7.0 har opdateret sine afhængigheder til understøttelse af Typescript 3.1, RxJS 6.3 og Node 10.

Nu fortsætter vi med at oprette vores første Angular 7-applikation.

Forudsætninger

  • Installer den nyeste version af Node.js herfra
  • Installer Visual Studio-kode herfra

Installation af Node.js installerer også npm på din maskine. Efter installation af Node.js skal du åbne kommandoprompten. Kør følgende sæt kommandoer for at kontrollere den version af node og npm, der er installeret på din maskine.

  • node -v
  • npm -v

Se billedet nedenfor:

Installation af kantet CLI

Angular CLI er kommandolinjegrænsefladen til Angular. Det hjælper os med at initialisere, udvikle og vedligeholde Angular-applikationer let.

For at installere Angular CLI skal du køre følgende kommando i kommandovinduet:

npm i -g @angular/cli

Dette installerer Angular CLI 7.0 globalt på din maskine. Se billedet nedenfor:

For at kontrollere den version af kantet CLI, der er installeret på din maskine, skal du køre følgende kommando:

Se billedet nedenfor:

Opret Angular 7-appen

Åbn Visual Studio Code og naviger til View >> Terminal. Dette åbner VS-kodeterminalvinduet. Alternativt kan du også bruge tastaturet sho rtcut ctrl + `til at åbne terminalvinduet.

Skriv følgende rækkefølge af kommandoer i terminalvinduet. Disse kommandoer opretter en mappe med navnet “ng7Demo”. Opret derefter en kantet applikation med navnet “ng7App” inde i den mappe.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng ny ng7App

Når du kører den nye kommando, beder Angular CLI dig om at foretage valg i følgende to muligheder:

  1. Vil du tilføje Angular routing? (å / n)
  2. Hvilket stilarkformat vil du bruge?

Når du har valgt indstillingerne og trykket på enter, oprettes applikationen Angular 7.0.

Se nedenstående Gif for bedre forståelse.

Når applikationen er oprettet med succes, skal du køre følgende kommando for at åbne projektet:

  • kode.

Se billedet nedenfor:

Dette åbner kodefilen for vores applikation i et nyt VS-kodevindue. Du kan se følgende filstruktur i Solution Explorer.

Åbn filen package.json, og du kan se, at vi har de nyeste Angular 7.0.0-pakker installeret i vores projekt.

{ "name": "ng7-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.1", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.1" } }

Eksekveringsdemo

Navnet på vores Angular-applikation er ng7App, som er inde i ng7Demo- biblioteket.

Så vi navigerer først til vores applikation ved hjælp af nedenstående kommandoer.

  • cd ng7Demo
  • cd ng7App

Nu bruger vi følgende kommando til at starte webserveren.

  • ng server

Se billedet nedenfor:

After running this command, you can see that it is asking to open //localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to //update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

Vi har lært om de nye funktioner i Angular 7.0. Vi installerede også Angular CLI 7.0. For at oprette og udføre en Angular 7.0-app har vi brugt Angular CLI og VS-kode. Vi undersøgte også metoden til at opgradere en eksisterende applikation til Angular 7.0.

Se også

  • Kom godt i gang med Angular 6.0
  • Forståelse af vinkel 6 animationer
  • Kom godt i gang med Angular 5 ved hjælp af Visual Studio-kode
  • CRUD-operationer med ASP.NET-kerne ved hjælp af Angular 5 og ADO.NET
  • ASP.NET Core - CRUD ved hjælp af Angular 5 And Entity Framework Core
  • ASP.NET Core - Brug af Highcharts With Angular 5

Oprindeligt offentliggjort på //ankitsharmablogs.com/