Az AngularJS áttekintése
A Brat Tech LLC-n 2009-ben a Misko Hevery és Adam Abrons fejlesztők kifejlesztettek egy AngularJS keretrendszert, amely után forradalom történt a kezelőfelület fejlesztésében és az egyoldalas alkalmazások építésében. Az AngularJS egy javascript keretrendszer, amely a HTML elemeket javascript objektumokkal köti. Az adatkötés és a függőség-befecskendezés az AngularJ-ok egyik fő jellemzője, amelyek időt takarítanak meg a hosszú kódok megírásában, megkönnyítve a fejlesztők és a böngészők munkáját. Hogyan érik el ezt, mélyebben elmagyarázzuk, de most csak emlékezni fog ezekre a terminológiákra. Ebben a témában megismerjük az AngularJS verziót.
AngularJS változatai
Az AngularJS az 1. szögű verziók, majd ezt követően kifejlesztették a 2. szöget, amely különbözik az 1. szögtől. művek.
Miért az AngularJS verzió és hogyan működik?
Az AngularJS segít interaktív egyoldalas alkalmazások fejlesztésében. Egyoldalas alkalmazások alatt azt értem, hogy a meglátogatott egyetlen oldal javascript használatával betölti az összes többi tartalmat. Ez a szolgáltatás elősegíti az alkalmazás gyors és hatékony alkalmazását.
Ha javascript és html fájlokat használunk az alkalmazások készítéséhez, akkor a nézetet a modellhez kell kötni JS funkciók és objektumok használatával. De ha úgy gondolja, hogy ezek a kétirányú adatok kötelező érvényűek egy gyakorlati ipari alkalmazásban, akkor ugyanaz a megközelítés unalmasá válik a hosszú kódokkal. Ez az egyik fő oka annak, hogy szükség volt az AngularJS tanulására és fejlesztésére.
Ideje megtanulni néhány alapfogalmat, mielőtt elkezdené azon alkalmazások fejlesztését, amelyekre az AngularJS épül:
- Modell: A modell adatokat, objektumokat és logikát tartalmaz.
- Nézet: Ez az alkalmazás vizuális bemutatása, amelyet felhasználói felületnek is neveznek.
- Nézet a modellhez kétirányú kötés: A javascript objektum, azaz az az objektum, amelyet egy Html DOM-hoz kötni szeretne, például egy szövegdobozhoz, bemeneti elemhez vagy bármilyen Html címkéhez, és fordítva, néhány előre definiált AngularJS könyvtár használatával egyszerűen megtehető.
- Vezérlők: A vezérlők javascript funkciók, amelyek összekötik a modellt és a nézetet.
- Szolgáltatások: Az AngularJS szolgáltatások javascript funkciók, amelyek olyan speciális feladatot vagy funkciókat hajtanak végre, amelyeket a javascript tart fenn és tesztel. Néhány példa a szolgáltatásokra: $ ulatás, $ http, $ rootScope.
- Kifejezések: A kifejezéseket az adatok HTML-hez kötéséhez használják. Ez a szolgáltatás interpolációnak is nevezik. A kifejezéseket ((expression)) göndör kapcsokkal írjuk. A kifejezéseket kiértékeljük és html-címkék nélkül meg lehet írni.
- Modulok: A modulok konténerként működnek, amelyek a szög alkalmazás különböző részeit tartalmazzák, például vezérlőt, szolgáltatásokat, irányelveket stb.
Irányelvek és hatály
Koncentráljunk néhány előre meghatározott irányelvre és annak valódi működésére. Ennek az irányelvnek a nagy része az Ang-ból vett ng-vel kezdődik
1. Hatály
- A hatókör meghatározza a javascript objektumot, amellyel az adatok elérhetőek lehetnek a modelltől a HTML-ig. A terjedelem összekötőként működik a kettő között.
- Néhány hatókörű szolgáltatás a $ Scope, a $ rootScope. A '$' meghatározza, hogy ezek a szolgáltatások előre definiáltak és nem módosíthatók. Ne feledje, hogy a HTML kis- és nagybetűket nem érzékeny, de az AngularJS kis- és nagybetűket érzékeny, tehát a $ Scope meghatározhatatlanul hibát dob.
- Ezeket be kell jelenteni a vezérlő funkciónkban, és a szög automatikusan befecskendezi.
2. ng-vezérlő
- Ezt az irányelvet a vezérlő példányának / objektumának létrehozására használják, amelyen keresztül a HTML DOM kommunikálni fog a tényleges logikával.
- A HTML azt mondja, hogy a '-' jelöléssel ellátott összes címkét figyelmen kívül hagyják a Html DOM létrehozásakor.
- A DOM létrehozása után a szögletes tolmács megtalálja az ng-controller irányelvet, és létrehozza az adott vezérlő példányát, amely $ ulatási szolgáltatást is nyújt.
- Egy HTML oldalon sok ng-vezérlő is lehet.
3. az alkalmazás
- Ez az irányelv konténerként működik, amely vezérlőket, irányelveket, szűrőket, kifejezéseket stb. Tartalmaz. Regisztrálja vagy elindítja az alkalmazást vagy a modult.
- Csak egy ng-alkalmazás létezik a HTML-ben. Egy ng-alkalmazás alatt sok ng-vezérlő lehet.
Ez egy alkalmazás-objektumot inicializál a $ rootScope szolgáltatással.
- Így a $ rootScope változók / funkciók teljes alkalmazásban elérhetők.
4. ng-modell
- Az ng-model arra szolgál, hogy az adatokat a html-től a modell-objektumhoz kösse. Kétirányú kötést biztosít.
5. ng-if
- Feltételes utasítások végrehajtására html-címkéken ng-if használható. Ha a feltétel hamis, akkor a DOM nem tartalmazza a DOM-on ezt a felosztást.
6. nem kötődik
- Ahelyett, hogy az (()) -t használja az interpolációhoz, az ng-bind is használható.
7. fogyatékkal
- Egy feltétel alapján a nézetben egy elem letiltható.
8. bemutató
- Ha az ng-show adott feltétele igaz, akkor az adott elem megjelenik a DOM-on.
9. elrejteni
- Ha az ng-hide megadott feltétele teljesül, akkor az adott elem rejtett marad a DOM-ban.
10. ng-ismétlés
- Meg fogja ismételni a Html adott div vagy span szakaszát a megadott tömb vagy lista hosszával.
11. Kattintson a gombra
- A html elem kattintásos eseményén végrehajtja a megadott funkciót vagy feladatot.
Tipp: Bármely nyelv megtanulásának legjobb módja az, ha kódolja. Tehát nézzük meg az első kódunkat.
Példák az AngularJS verzióra
Íme néhány az alábbiakban bemutatott példa
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Kimenet:
Keresztnév: Joseph
Vezetéknév: Alex
A neve: Joseph Alex
Van néhány szempont, amelyre összpontosítani kell a fenti kódrészlet felett:
- A 3. sorban egy angular.min.js fájlt adunk az oldalhoz, amely betölti az AngularJS alkalmazás futtatásához szükséges összes könyvtárat.
- Az AngularJS nagyrészt 2 könyvtárral rendelkezik, az angular.js fájllal, és a fájl tömörített verziójával, mint angular.min.js.
- Az 5. sorban láthatja az irányelvet, mint ng-alkalmazást, amelyet a Html figyelmen kívül hagy, miközben létrehozza a Html DOM-ot, és amelyet az AngularJS vett fel az irányelv indításaként az alkalmazás indításához.
- A 6, 7 sorban az ng-modellt használjuk, amely a szövegmezőbe bevitt szöveget az fname és lname változókhoz köti. Ne feledje, hogy ezek a változók kis- és nagybetűket érzékenyek.
- A 8. sorban a ((fname + ”“ + lname)) kifejezést látja, amely a szög értékeli és megjeleníti a szövegmezőkbe bevitt adatokat. Ezt interpolációnak nevezzük.
Vizsgáljuk meg még egy példa segítségével:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Keresztnév:
Vezetéknév:
Az ügyfél neve ((customerName)), életkora pedig ((customerAge))
Ebben a példában az 5. sorban létrehozunk egy alkalmazást, amelynek neve ClientApp, amely tartalmazza az alkalmazás összes részét. A következő sorban létrejön egy vezérlő, és első névként első névként kapják a nevét. A $ skálát funkcionális paraméterként deklaráljuk. Az AngularJS automatikusan befecskendezi a közvetlenül felhasználható alkalmazásba, a fejlesztőnek nem kell kifejezetten létrehoznia.
Ezt a funkciót függőségi injekciónak nevezzük. Hasonló módon az ng-vezérlőt ugyanahhoz a vezérlőhöz használja az ng-app címke alatt. Ne feledje, hogy az alkalmazás vagy a vezérlő hatóköre az, ahol a div-pontok végéig tart, vagy bármi, ahová az alkalmazást vagy a vezérlőt meghatározza. Ebben az esetben a 16. sor után nem férhet hozzá a vezérlőhöz vagy az alkalmazáshoz.
Ajánlott cikkek
Ez az útmutató az Mi az AngularJS verzióhoz. Itt tárgyaljuk az AngularJS verzióit az irányelvekkel, hatályukkal és hogyan működik az AngularJS. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- AngularJS építészet
- Szög JS alkalmazás
- AngularJS egység tesztelése
- Karrier az AngularJS-ben
- Mi az a 2. szög?