Az Angular 7.0 újdonságai és a frissítés módja

Bevezetés

Az Angular kiadta legújabb verzióját, az Angular 7.0-t. Ebben a cikkben a következő pontokat vizsgáljuk meg:

  • Az Angular 7.0 újdonságai
  • Az első Angular 7.0 alkalmazás létrehozása az Angular CLI használatával
  • A meglévő Angular alkalmazás frissítése Angular 7.0 verzióra

Az Angular 7.0 újdonságai

  1. Egy új Angular alkalmazás létrehozása közben az Angular CLI arra kéri a felhasználót, hogy válassza ki, ha olyan szolgáltatásokat szeretne hozzáadni, mint például az Angular routing vagy az alkalmazásában használni kívánt stíluslap formátuma.
  2. Az Angular 7.0 alkalmazások az Angular CLI Bundle Budget funkcióját használják. Ez figyelmezteti a fejlesztőket, ha az alkalmazáscsomag mérete meghaladja az előre meghatározott korlátot. A figyelmeztetés alapértelmezett értéke 2 MB, hibák esetén pedig 5 MB. Ez az érték konfigurálható, és a angular.jsonfájlból megváltoztatható . Ez a szolgáltatás jelentősen növeli az alkalmazás teljesítményét.
  3. A szögletes anyag Component Dev Kit (CDK) is kap néhány új funkciót a frissítés részeként. A CDK két újonnan hozzáadott funkciója:
  • Virtuális görgetés Ha nagy elemlistát próbál betölteni, az hatással lehet az alkalmazás teljesítményére. Acímke csak a lista látható részének betöltésére szolgál a képernyőn. Csak azokat az elemeket rendereli, amelyek elférnek a képernyőn. Amikor a felhasználó végiggörgeti a listát, a DOM dinamikusan be- és kirakja az elemeket a megjelenítési méret alapján. Ez a szolgáltatás nem tévesztendő össze a végtelen görgetéssel, amely teljesen más stratégia az elemek betöltésére. A virtuális görgetésről itt olvashat bővebben.
  • Fogd és vidd

    Könnyen hozzáadhatjuk a drag and drop funkciót egy elemhez. Támogatja az olyan funkciókat, mint az elem szabad húzása, a lista tételeinek átrendezése, elemek áthelyezése a lista között, animáció, egyéni húzási fogantyú hozzáadása és az X vagy Y tengely mentén történő korlátozott húzás. A Drag and Drop-ról itt olvashat bővebben.

4. A mat-form-fieldmostantól támogatni fogja a natív select elem használatát. Ez javítja az alkalmazás teljesítményét és használhatóságát. További információ erről a funkcióról itt.

5. Az Angular 7.0 frissítette függőségeit, hogy támogassa a Typescript 3.1, az RxJS 6.3 és a 10 csomópontokat.

Most folytatjuk az első Angular 7 alkalmazásunk létrehozását.

Előfeltételek

  • Telepítse innen a Node.js legújabb verzióját
  • Telepítse innen a Visual Studio kódot

A Node.js telepítésével az npm is települ a számítógépére. A Node.js telepítése után nyissa meg a parancssort. Futtassa az alábbi parancsokat a számítógépre telepített csomópont és npm verziójának ellenőrzéséhez.

  • csomópont -v
  • npm -v

Lásd az alábbi képet:

Szögletes CLI telepítése

Az Angular CLI az Angular parancssori felülete. Segít a szögletes alkalmazások inicializálásában, fejlesztésében és karbantartásában.

Az Angular CLI telepítéséhez futtassa a következő parancsot a parancsablakban:

npm i -g @angular/cli

Ez globálisan telepíti az Angular CLI 7.0-t a gépére. Lásd az alábbi képet:

A gépre telepített szögletes CLI verziójának ellenőrzéséhez futtassa a következő parancsot:

Lásd az alábbi képet:

Hozza létre az Angular 7 alkalmazást

Nyissa meg a Visual Studio kódot, és keresse meg az View >> Terminalt. Ez megnyitja a VS kód terminál ablakát. Alternatív megoldásként használhatja a sho rtcut ctrl + ` billentyűzetet is a terminál ablakának megnyitásához.

Írja be a következő parancssorozatot a terminál ablakába. Ezek a parancsok létrehozzák az „ng7Demo” nevű könyvtárat. Ezután hozzon létre egy „ng7App” nevű Angular alkalmazást a könyvtárban.

  • mkdir ng7Demo
  • cd ng7Demo
  • új ng7App

Az új parancs futtatásakor az Angular CLI felkéri Önt, hogy válasszon a következő két lehetőségből:

  1. Szeretné hozzáadni a szögletes irányítást? (igen / nem)
  2. Melyik stíluslap formátumot szeretné használni?

Miután kiválasztotta az opciókat és lenyomta az Enter billentyűt, létrejön az Angular 7.0 alkalmazás.

A jobb megértés érdekében olvassa el az alábbi Gif-et.

Az alkalmazás sikeres létrehozása után futtassa a következő parancsot a projekt megnyitásához:

  • kód .

Lásd az alábbi képet:

Ez megnyitja alkalmazásunk kódfájlját egy új VS-kódablakban. A következő fájlszerkezetet láthatja a Megoldáskezelőben.

Nyissa meg a package.json fájlt, és megfigyelheti, hogy a legújabb Angular 7.0.0 csomagok vannak telepítve a projektünkbe.

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

Végrehajtási bemutató

Az Angular alkalmazásunk neve ng7App, amely az ng7Demo könyvtárban található.

Tehát először az alábbi parancsok segítségével navigálunk alkalmazásunkhoz.

  • cd ng7Demo
  • cd ng7App

Most a következő parancsot használjuk a webkiszolgáló elindításához.

  • tálalás

Lásd az alábbi képet:

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/