Alkalmazási keretként az Angular jól integrált könyvtárak gyűjteményét tartalmazza, amelyek a szolgáltatások széles skáláját fedik le.

Az Angular könyvtárak tartalmazzák az útválasztást, az űrlapkezelést, az ügyfél-szerver kommunikációt és még sok mást.

Kezdő lépések az önálló komponensekkel

Az önálló komponensek egyszerűsített módot kínálnak az Angular alkalmazások létrehozására. Az önálló komponensek, direktívák és csatornák célja a szerzői élmény egyszerűsítése az NgModules szükségességének csökkentésével.

Az önálló zászló és az összetevők importálása

Az összetevők, direktívák és csövek mostantól önállóként jelölhetők meg: igaz. Az önállóként megjelölt szögosztályokat nem kell NgModule-ban deklarálni (az Angular fordító hibát jelez, ha megpróbálod).

Használhatja a meglévő NgModuleket önálló összetevőben. Az NgModule alapú alkalmazásokban önálló összetevőket is használhat.

Alkalmazás indítása önálló komponens használatával

Egy Angular alkalmazás NgModule nélkül is indítható, ha egy önálló összetevőt használ az alkalmazás gyökérkomponenseként. Ez a bootstrapApplication API segítségével történik.

// in the main.ts file
import {bootstrapApplication} from '@angular/platform-browser';
import {PhotoAppComponent} from './app/photo.app.component';

bootstrapApplication(PhotoAppComponent);

A függőségi injekció konfigurálása

Egy alkalmazás indításakor gyakran konfigurálnia kell az Angular függőségi befecskendezését, és konfigurációs értékeket vagy szolgáltatásokat kell biztosítania az alkalmazásban való használatra. Ezeket szolgáltatóként adhatja át a bootstrapApplication-nek.

Útválasztás és lusta betöltés

Az útválasztó API-kat frissítették és egyszerűsítették, hogy kihasználják az önálló komponensek előnyeit: sok gyakori, lusta betöltés esetén már nincs szükség NgModule-ra.

Lusta berakodás sok útvonalat egyszerre

A loadChildren művelet most már támogatja az alárendelt útvonalak új készletének betöltését. Ez akkor működik, ha minden így betöltött útvonal önálló összetevőt használ.

Lusta betöltés és alapértelmezett exportálás

A loadChildren és a loadComponent használatakor az útválasztó megérti és automatikusan kibontja a dinamikus import() hívásokat az alapértelmezett exportálásokkal. Ezt kihasználva kihagyhatja a .then() függvényt az ilyen lusta betöltési műveleteknél.

Szolgáltatások biztosítása az útvonalak egy részéhez

Az NgModules (loadChildren) lusta betöltés API-ja egy új „modul” injektort hoz létre, amikor betölti az útvonal lustán betöltött gyermekeit. Ez a funkció gyakran hasznos volt ahhoz, hogy az alkalmazásban csak az útvonalak egy részhalmazát szolgáltassák. A Router mostantól támogatja a további szolgáltatók explicit megadását az útvonalon, ami lehetővé teszi ugyanazt a hatókört anélkül, hogy lusta betöltésre vagy NgModulesre lenne szükség. Az is lehetséges, hogy a szolgáltatókat a loadChildren kiegészítő útválasztási konfigurációval kombinálja, hogy ugyanazt a hatást érje el, mint egy NgModule lusta betöltésével további útvonalakkal és útvonalszintű szolgáltatókkal.

Szögváltozás észlelése

A változásészlelés az a folyamat, amelyen keresztül az Angular ellenőrzi, hogy az alkalmazás állapota megváltozott-e, és hogy szükség van-e DOM frissítésére. Az Angular magas szinten végigvezeti az alkatrészeket felülről lefelé, keresve a változtatásokat. Az Angular rendszeres időközönként futtatja változásészlelési mechanizmusát, így az adatmodell változásai tükröződnek az alkalmazás nézetében. A változásészlelés manuálisan vagy aszinkron eseményen (például felhasználói interakció vagy XMLHttpRequest befejezése) keresztül indítható.

A változásészlelés rendkívül optimalizált teljesítmény, de még mindig lassulást okozhat, ha az alkalmazás túl gyakran futtatja.

Ebből az útmutatóból megtudhatja, hogyan vezérelheti és optimalizálhatja a változásészlelési mechanizmust úgy, hogy kihagyja az alkalmazás egyes részeit, és csak szükség esetén futtatja a változásészlelést.

A zónaszennyezés feloldása

A Zone.js egy jelzőmechanizmus, amelyet az Angular használ annak észlelésére, ha az alkalmazás állapota megváltozhatott. Rögzíti az aszinkron műveleteket, például a setTimeoutot, a hálózati kéréseket és az eseményfigyelőket. A szögütemezések a Zone.js jelei alapján módosítják az észlelést

Egyes esetekben az ütemezett feladatok vagy mikrofeladatok nem módosítanak az adatmodellben, ami szükségtelenné teszi a változás-észlelés futtatását. Gyakori példák a következők. requestAnimationFrame, setTimeout vagy setInterval.
Feladatok vagy mikrofeladatok ütemezése harmadik féltől származó könyvtárak által.

Futtasson feladatokat az NgZone-on kívül

Ilyen esetekben utasíthatja az Angular-t, hogy ne hívja meg a változásészlelést egy adott kódrészlet által ütemezett feladatoknál az NgZone használatával. A harmadik féltől származó könyvtárak általában szükségtelen változásészlelési ciklusokat indítanak el, mert nem a Zone.js figyelembevételével készültek. Kerülje el ezeket az extra ciklusokat az Angular zónán kívüli könyvtár API-k meghívásával. Például, ha egy harmadik féltől származó API eseményfigyelőket ad hozzá egy DOM-elemhez, az Angular nem futtatja a változásészlelést a kezelőik végrehajtása után.

Összetevő részfák kihagyása

A JavaScript alapértelmezés szerint változtatható adatstruktúrákat használ, amelyekre több különböző összetevőből hivatkozhat. Az Angular változásérzékelést futtat a teljes összetevőfán, hogy megbizonyosodjon arról, hogy az adatstruktúrák legfrissebb állapota tükröződik a DOM-ban. A változásérzékelés a legtöbb alkalmazáshoz kellően gyors. Ha azonban egy alkalmazás különösen nagy komponensfával rendelkezik, a változásészlelés az egész alkalmazáson keresztül teljesítményproblémákat okozhat. Ezt úgy kezelheti, hogy a változásészlelést úgy állítja be, hogy csak az összetevőfa egy részhalmazán fusson. Ha biztos abban, hogy az alkalmazás egy részét nem érinti az állapotváltozás, az OnPush segítségével kihagyhatja a változásészlelést a teljes összetevő részfában.

Az OnPush változásészlelés utasítja az Angular-t, hogy csak akkor futtasson változásérzékelést egy összetevő részfánál, ha:

  • A részfa gyökérkomponense a sablon-összerendelés eredményeként új bemeneteket kap. Az Angular összehasonlítja a bemenet jelenlegi és múltbeli értékét az == értékkel
  • Az Angular kezel egy eseményt (például esemény-összerendelés vagy kimeneti összerendelés használatával) a részfa gyökérkomponensében vagy annak bármely utódjában, függetlenül attól, hogy az OnPush változásérzékelést használja-e vagy sem.

Az eseményt egy alapértelmezett változásérzékeléssel rendelkező összetevő kezeli

Ha az Angular az OnPush-stratégia nélküli összetevőn belül kezel egy eseményt, akkor a keretrendszer változásérzékelést hajt végre a teljes összetevőfán. Az Angular kihagyja az OnPush használatával gyökérrel rendelkező leszármazott részfákat, amelyek nem kaptak új bemenetet.

Például, ha a MainComponent változásészlelési stratégiáját OnPush-ra állítjuk, és a felhasználó egy részfán kívüli komponenssel, a gyökér MainComponent mellett lép kapcsolatba, az Angular ellenőrzi az alábbi diagram összes zöld összetevőjét (AppComponent, HeaderComponent, SearchComponent, ButtonComponent), hacsak nem A MainComponent új bemeneteket kap:

Egy eseményt egy OnPush-val rendelkező komponens kezel

Ha az Angular egy eseményt az OnPush stratégiával rendelkező komponensen belül kezel, a keretrendszer változásérzékelést hajt végre a teljes összetevőfán belül. Az Angular figyelmen kívül hagyja az OnPush használatával gyökérrel rendelkező komponens részfákat, amelyek nem kaptak új bemenetet, és kívül esnek az eseményt kezelő összetevőn.

Például, ha az Angular a MainComponenten belül kezel egy eseményt, a keretrendszer változásérzékelést futtat a teljes összetevőfán. Az Angular figyelmen kívül hagyja a gyökér LoginComponent részfát, mert rendelkezik OnPush-val, és az esemény a hatókörén kívül történt.

Egy eseményt egy komponens leszármazottja kezel az OnPush segítségével

Ha az Angular az OnPush segítségével kezel egy eseményt egy komponensben, a keretrendszer változásérzékelést hajt végre a teljes komponensfán, beleértve az összetevő őseit is.

Példaként az alábbi diagramon az Angular egy eseményt kezel a LoginComponentben, amely OnPush-t használ. Az Angular változásérzékelést hív meg a teljes komponens részfában, beleértve a MainComponentet (a LoginComponent szülője), bár a MainComponent rendelkezik OnPush-val is. Az Angular ellenőrzi a MainComponentet is, mert a LoginComponent része a nézetének.

Új bemenetek az OnPush komponenshez

Az Angular változásérzékelést futtat egy gyermekkomponensen belül, ha az OnPush bemeneti tulajdonságot állít be a sablon-összerendelés eredményeként.

Például az alábbi diagramon az AppComponent egy új bemenetet ad át a MainComponentnek, amely rendelkezik OnPush-val. Az Angular végrehajtja a változásérzékelést a MainComponentben, de nem futtatja a változásérzékelést a LoginComponentben, amely szintén rendelkezik OnPush-val, hacsak nem kap új bemeneteket is.