Mi az AngularJS? Archiszerkezet, jellemzők és előnyök

Mi az AngularJS?

AngularJS egy nyílt forráskódú Model-View-Controller keretrendszer, amelyet nyelven írtak. JavaForgatókönyvAz AngularJS a 2010-es évek egyik legnépszerűbb webes keretrendszere volt, és fejlesztésre használják.ping többnyire egyoldalas alkalmazások. Ezt a keretrendszert egy fejlesztőcsoport fejlesztette ki a következő helyekről: Google maga.

A puszta támogatás miatt Google és egy széleskörű közösségi fórum ötleteinek köszönhetően a keretrendszert aktív élettartama alatt folyamatosan frissítették. Magában foglalta az adott időszak vezető fejlesztési trendjeit is, ezért fut rajta ma is annyi éles kód.

Egy terminológiai pontot érdemes korán tisztázni. Az AngularJS-t széles körben MVC keretrendszerként írják le, ami hasznos kiindulópont. Maga az AngularJS csapata azonban a címkét részesítette előnyben. MVW (Modell-Nézet-Bármi), mivel a futási környezet inkább a Model-View-ViewModel viselkedéséhez hasonlít, mint a klasszikus MVC-hez. A hivatalos AngularJS dokumentáció dinamikus webalkalmazások strukturális keretrendszerének nevezi. Most, hogy ez megtörtént, a darabok így illeszkednek egymáshoz.

AngularJS Architectúra

Az AngularJS az MVC architektúrát követi. Az MVC keretrendszer diagramja alább látható:

AngularJS Architecture diagram

Mindhárom rétegnek egyértelmű feladata van:

• A Controller az üzleti logikával rendelkező réteget képviseli. A felhasználói események aktiválják a vezérlőben tárolt funkciókat. A felhasználói események a vezérlő részét képezik.
• A nézeteket a végfelhasználóknak biztosított megjelenítési réteg ábrázolására használják.
• Az adatok megjelenítésére modelleket használnak. A modellben lévő adatok olyan egyszerűek lehetnek, mintha csak primitív deklarációkkal rendelkeznének. Például, ha diákalkalmazást tart fenn, az adatmodellnek csak egy diákigazolványa és egy név lehet. Vagy összetett is lehet, ha strukturált adatmodellel rendelkezik. Ha autótulajdonosi kérelmet tart karban, rendelkezhet olyan struktúrákkal, amelyek meghatározhatják magát a járművet a motortérfogat, az üléskapacitás stb.

A gyakorlatban a vezérlő ritkán tölt be adatokat kézzel a nézetbe. Az AngularJS figyeli a modellt és frissíti a nézetet, ezt az automatikus szinkronizálást pedig a következőkben ismertetett funkciókészlet biztosítja.

Az AngularJS jellemzői

Az AngularJS a következő főbb jellemzőkkel rendelkezik, amelyek a piacon elérhető egyik legerősebb keretrendszerré teszik:

1. MVC – A keret a híres koncepcióra épül MVC (Model-View-Controller). Ez egy olyan tervezési minta, amelyet minden modern webalkalmazásban használnak. Ez a minta az üzleti logikai réteg, az adatréteg és a megjelenítési réteg külön szakaszokra való felosztásán alapul. A különböző részekre való felosztás azért történik, hogy mindegyik könnyebben kezelhető legyen.
2. Adatmodell kötés – Nem kell speciális kódot írnod ​​az adatok HTML vezérlőkhöz kötéséhez. Ez az AngularJS-ben is megtehető néhány kódrészlet hozzáadásával.
3. Kevesebb kód írása – DOM-manipuláció végrehajtása során sok JavaForgatókönyv kellett megírni bármilyen alkalmazás tervezéséhez. De az AngularJS-sel meglepődsz majd, hogy mennyi kódot kell írnod ​​a DOM-manipulációhoz.
4. Egység Tesztelés kész – A tervezők a Google nemcsak az AngularJS-t fejlesztette ki, hanem egy „Karma” nevű tesztelési keretrendszert is, amely segít az AngularJS alkalmazások egységtesztjeinek tervezésében.
5. Irányelvek – Jelölők, mint például ng-app, ng-model és ng-repeat viselkedést ad hozzá a hagyományos HTML elemekhez.

Ezeket a funkciókat a legkönnyebb megérteni, miután lefuttattuk őket, ezért a következő szakaszban egy működő oldalt építünk fel a nulláról.

Az AngularJS beállítása és az első alkalmazás elkészítése

Az adatkötésről olvasni egy dolog, és egy másik dolog látni, ahogy működik. Az AngularJS-nek nincs szüksége csomagkezelőre, csomagolóra vagy fordítóra, így az első alkalmazásod egyetlen HTML fájl, amely közvetlenül a merevlemezedről fut.

1. lépés) Adja hozzá az AngularJS könyvtárat

Töltsd be a könyvtárat egy CDN-ből egyetlen szkriptcímkével. Az 1.8.3-as verzió az AngularJS végleges kiadása, ezért az oldaladat ehhez a verzióhoz rögzítsd, ne pedig egy lebegő verzióhoz.

2. lépés) Jelölje meg az alkalmazás gyökerét az ng-app paranccsal

Az ng-app direktíva megmondja az AngularJS fordítónak, hogy az oldal melyik részét birtokolja. Ha a html tagbe helyezzük, a teljes dokumentum a keretrendszerhez kerül, és a neki adott érték megnevezi a létrehozni kívánt modult.

3. lépés) Adatok kötése ng-modellel és egy kifejezéssel

Az ng-model direktíva egy bemeneti elemet a hatókör egy tulajdonságához köt, és egy dupla zárójeles kifejezés ugyanezt a tulajdonságot írja ki az oldal más részein. Mivel a kötés kétirányú, typing a mezőben található `` azonnal frissíti a címsort, saját eseménykezelő nélkül.

4. lépés) Vezérlő hozzáadása a logikához

A vezérlő egy egyszerű JavaSzkriptfüggvény, amely fogadja a $scope objektumot és beállítja rajta a kezdeti értékeket. A modulon történő regisztráció után elérhetővé válik az ng-controller direktíva számára.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

5. lépés) Futtassa az oldalt, és ellenőrizze az eredményt

Mentsd el a fájlt index.html néven, és nyisd meg bármelyik böngészőben. A címsor először a „Hello World!” felirattal kezdődik, és minden billentyűleütésre átírja magát. Nincs szükség webszerverre vagy build lépésre.

Ha semmi sem jelenik meg, nyisd meg a böngésző konzolját, és ellenőrizd, hogy a CDN szkript betöltődött-e, és hogy az ng-app-on belüli modul neve pontosan megegyezik-e az angular.module-nak átadott névvel, mert az eltérés esetén a hiba csendben meghiúsul. Ez a kis oldal már bemutatja a következőkben ismertetett erősségeket.

AngularJS előnyei

Íme az AngularJS előnyei:

• Mivel nyílt forráskódú keretrendszerről van szó, a hibák vagy problémák száma minimális lesz.
• Kétirányú kötés – Az AngularJS szinkronban tartja az adat- és a megjelenítési réteget. Nem kell további kódot írni. JavaSzkriptkód a HTML-kódban és az adatrétegben lévő adatok szinkronban tartásához. Az AngularJS automatikusan elvégzi ezt Ön helyett. Csak meg kell adnia, hogy melyik vezérlőelem a modell melyik részéhez van kötve.
• Útválasztás – Az AngularJS képes kezelni az útvonalválasztást, ami azt jelenti, hogy az egyik nézetből a másikba lehet átváltani. Ez az egyoldalas alkalmazások kulcsfontosságú alapja; ahol a felhasználói interakció alapján a webes alkalmazás különböző funkciói között válthat, miközben továbbra is ugyanazon az oldalon marad.
• Az AngularJS támogatja a tesztelést, mindkettőt Egység teszteléseés Integrációs tesztelés.
• Saját elemek, úgynevezett direktívák biztosításával bővíti a HTML-t. Magas szinten a direktívák egy DOM elemen lévő jelölők (például egy attribútum, elemnév és megjegyzés vagy CSS osztály), amelyek utasítják az AngularJS HTML fordítót, hogy egy meghatározott viselkedést rendeljen az adott DOM elemhez. Ezek az direktívák segítenek a meglévő HTML elemek funkcionalitásának kibővítésében, hogy nagyobb teljesítményt biztosítsanak a webalkalmazásodnak.

Az AngularJS előnyei

A kiegyensúlyozott nézőpont ugyanolyan fontos, ezért a kompromisszumokat a következőkben ismertetjük.

Az AngularJS hátrányai és korlátai

Minden keretrendszer lemond valamiről, és az AngularJS sem kivétel. Ezek azok a korlátozások, amelyekről az AngularJS alkalmazásokat karbantartó csapatok a leggyakrabban beszámolnak:

• Nincs saját biztonsági rétege – Az AngularJS sem hitelesítést, sem jogosultságot nem biztosít, ezért mindkettőt ki kell kényszeríteni a szerveren.
• Teljes függőség JavaForgatókönyv – Ha egy látogató letiltja JavaSzkript esetén az oldal visszatér a csupasz jelölőnyelvhez, és nem jelenik meg.
• Az emésztési ciklus teljesítménye – A változásokat a figyelt értékek ismételt összehasonlításával észleli a rendszer, így a több ezer kötéssel rendelkező oldalak lassúnak tűnhetnek.
• Meredek tanulási görbe – A hatókörök, irányelvek, gyárak, szolgáltatások és szolgáltatók átfedésben vannak, és gyakran több módszer is létezik ugyanazon eredmény elérésére.
• A keresőmotor láthatósága – A nézetek a böngészőben állnak össze, ezért extra munkára, például előrenderelésre van szükség, mielőtt a keresőrobotok megbízhatóan indexelnék az oldalakat.
• Nincsenek további frissítések – 2021. december 31. óta nincsenek hivatalos javítások, így az újonnan felfedezett sebezhetőségek javítatlanok maradnak, kivéve, ha egy kereskedelmi szállító javítást biztosít.

Ez az utolsó pont a legtöbb csapatot az utód keretrendszer felé tereli, ami a közös név ellenére is egy másik termék.

AngularJS vs. Angular: Mi a különbség?

Az AngularJS-t és az Angular-t gyakran összekeverik, mivel a nevük nagyon hasonló, pedig különálló keretrendszerekről van szó, különböző nyelvekkel, architektúrákkal és kiadási vonalakkal. Az AngularJS csak az ezen az oldalon ismertetett 1.x sorozatra utal. Az Angular a 2-es verziót és minden azt követő verziót jelent, egy 2016-ban kiadott teljes átdolgozást, amelyet még mindig aktívan fejlesztenek. Code nem mozog közöttük tudatos migrációs munka nélkül.

A gyakorlati következmény az, hogy egy AngularJS vezérlőt nem lehet egyszerűen bedobni egy Angular projektbe. A migráció azt jelenti, hogy minden vezérlőt komponensként kell átírni, ezért inkább valódi mérnöki munkaként kell tervezni, mint frissítésként. Röviden, az AngularJS-t karbantartási készségként, az Angulart pedig új fejlesztések platformjaként kell kezelni.

GYIK