Što je novo u Angular 7.0 i kako možete nadograditi

Programiranje

Uvod

Angular je objavio svoju najnoviju verziju, Angular 7.0. U ovom ćemo članku istražiti sljedeće točke:

  • Što je novo u programu Angular 7.0
  • Izrada vaše prve aplikacije Angular 7.0 pomoću Angular CLI-a
  • Kako ažurirati postojeću aplikaciju Angular na Angular 7.0

Što je novo u Angular 7.0?

  1. Tijekom stvaranja nove Angular aplikacije, Angular CLI zatražit će od korisnika da odabere želi li dodati značajke poput Angular usmjeravanja ili format tabele stilova koji želi koristiti u svojoj aplikaciji
  2. Aplikacije Angular 7.0 upotrebljavat će značajku Bundle Budget Angular CLI-a. To će upozoriti programere ako veličina snopa aplikacija premaši unaprijed definirano ograničenje. Zadana vrijednost upozorenja postavljena je na 2 MB, a za pogreške je 5 MB. Ova se vrijednost može konfigurirati i može se promijeniti iz angular.jsondatoteke. Ova značajka znatno poboljšava performanse aplikacije.
  3. Komplet komponenata za razvoj (CDK) kutnog materijala također dobiva neke nove značajke kao dio ovog ažuriranja. Dvije novo dodane značajke CDK-a su:
  • Virtualno pomicanje Ako pokušavate učitati velik popis elemenata, to može utjecati na izvedbu aplikacije. Oznaka može se koristiti za učitavanje samo vidljivi dio popisa na zaslonu. Prikazat će samo one stavke koje mogu stati na zaslon. Kada se korisnik pomiče kroz popis, DOM će dinamički učitavati i istovariti elemente na temelju veličine zaslona. Ovu značajku ne treba miješati s beskonačnim pomicanjem, što je posve drugačija strategija učitavanja elemenata. Više o virtualnom pomicanju možete pročitati ovdje.
  • Povucite i ispustite

    Značajku povlačenja i ispuštanja možemo jednostavno dodati stavci. Podržava značajke kao što su slobodno povlačenje elementa, preuređivanje stavki popisa, premještanje stavki između popisa, animacija, dodavanje prilagođene ručice za povlačenje i ograničeno povlačenje duž X ili Y osi. Ovdje možete pročitati više o povlačenju i ispuštanju.

4. Oporuka mat-form-fieldće sada podržavati upotrebu izvornog elementa select. To će pružiti poboljšane performanse i upotrebljivost aplikacije. Pročitajte više o ovoj značajci ovdje.

5. Angular 7.0 ažurirao je svoje ovisnosti kako bi podržao Typescript 3.1, RxJS 6.3 i Node 10.

Sada ćemo nastaviti s izradom naše prve aplikacije Angular 7.

Preduvjeti

  • Instalirajte najnoviju verziju Node.js odavde
  • Ovdje instalirajte Visual Studio Code

Instaliranje Node.js također će instalirati npm na vašem računalu. Nakon instalacije Node.js otvorite naredbeni redak. Pokrenite sljedeći skup naredbi da biste provjerili verziju čvora i npm instalirane na vašem stroju.

  • čvor -v
  • npm -v

Pogledajte sliku u nastavku:

Instaliranje kutnog CLI-ja

Angular CLI je sučelje naredbenog retka za Angular. Pomaže nam u lakoj inicijalizaciji, razvoju i održavanju kutnih aplikacija.

Da biste instalirali Angular CLI, u naredbenom prozoru pokrenite sljedeću naredbu:

npm i -g @angular/cli

Ovo će instalirati Angular CLI 7.0 globalno u vaš stroj. Pogledajte sliku u nastavku:

Da biste provjerili verziju kutnog CLI-a instaliranu na vašem računalu, pokrenite sljedeću naredbu:

Pogledajte sliku u nastavku:

Izradite aplikaciju Angular 7

Otvorite Visual Studio Code i idite na View >> Terminal. Ovo će otvoriti prozor terminala VS koda. rtcut Za otvaranje prozora terminala možete koristiti i tipkovnicu sho ctrl + `.

U prozoru terminala upišite sljedeći redoslijed naredbi. Te će naredbe stvoriti direktorij nazvan “ng7Demo”. Zatim stvorite Angular aplikaciju s imenom "ng7App" unutar te mape.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng novi ng7App

Dok izvršavate novu naredbu ng, Angular CLI zatražit će od vas da izvršite odabir u sljedeće dvije mogućnosti:

  1. Želite li dodati kutno usmjeravanje? (g / d)
  2. Koji format tablice stilova želite koristiti?

Nakon što odaberete opcije i pritisnete enter, stvorit će se aplikacija Angular 7.0.

Pogledajte donji GIF za bolje razumijevanje.

Nakon što se aplikacija uspješno kreira, pokrenite sljedeću naredbu da biste otvorili projekt:

  • kod.

Pogledajte sliku u nastavku:

Ovo će otvoriti datoteku koda naše aplikacije u novom prozoru VS koda. Sljedeću strukturu datoteka možete vidjeti u programu Solution Explorer.

Otvorite datoteku package.json i možete primijetiti da smo u našem projektu instalirali najnovije Angular 7.0.0 pakete.

{ "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" } }

Demo izvedbe

Naziv naše Angular aplikacije je ng7App koji se nalazi u direktoriju ng7Demo .

Dakle, prvo ćemo prijeći na našu aplikaciju pomoću naredbi u nastavku.

  • cd ng7Demo
  • cd ng7App

Sada koristimo sljedeću naredbu za pokretanje web poslužitelja.

  • ng poslužiti

Pogledajte sliku u nastavku:

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

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

See Also

  • Getting Started With Angular 6.0
  • Understanding Angular 6 Animations
  • Getting Started With Angular 5 Using Visual Studio Code
  • CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET
  • ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
  • ASP.NET Core — Using Highcharts With Angular 5

Originally published at //ankitsharmablogs.com/