Kezdő útmutató a webalkalmazások építéséhez az AngularJS segítségével

angularjs honlapja

Szálljon fel a Google webalkalmazás-keretrendszerével

Ha Ön professzionális JavaScript-fejlesztő, akkor valószínűleg hallott róla Ember.js (egy nyílt forráskódú JavaScript keretrendszer) és Backbone.js (JavaScript könyvtár RESTful JSON felülettel). De ha nem ismeri SzögletesJS ennek ellenére hiányozni fog néhány olyan vonzó funkcióból, amelyek valóban javíthatják a webes alkalmazások HTML-jét.

Itt ízelítőt adunk az AngularJS-ből, egy szuperhős JavaScript MVW-keretrendszerből, beleértve annak kiemelkedő jellemzőit és a kezdeti folyamatot.



Remélhetőleg ez nem csak a jól felépített és karbantartható, gazdag webalkalmazások fejlesztésében segít, hanem szilárd okokat is ad arra, hogy a következő projektjeihez válassza az AngularJS-t. Kezdjük!

legjobb fotószerkesztő monitor 500 alatt

01. Mi az AngularJS?

A Google által épített AngularJS egy nyílt forráskódú webalkalmazás-keretrendszer, amelyet úgy fejlesztettek ki, hogy mind a kezelőfelület fejlesztését, mind a tesztelést megkönnyítse a webfejlesztők számára. Az AngularJS fő célja a webes alkalmazások megnyújtása MVC (Model – view – controller) képességgel. Ez egy kliensoldali JavaScript MVC / MVVM keretrendszer, amely teljes mértékben kibővíthető, könyvtárfüggőség nélkül fut, és más könyvtárakkal is kiválóan működik. Még módosíthatja vagy lecserélheti annak minden funkcióját, hogy megfeleljen az Ön egyedi igényeinek.

Az AngularJS-t 2009-ben Adam Abrons és Mi & scaron; ko Heverym fejlesztették ki, akik akkoriban a Google mérnökei voltak. Amint azt a hivatalos honlapon említettük, ez egy „dinamikus webalkalmazások strukturális kerete”, amely leginkább alkalmas egyoldalas webalkalmazások létrehozására, amelyek csak JavaScript-et, CSS-t és HTML-t igényelnek az ügyféloldalon.

Ez lehetővé teszi, hogy a HTML-t használja sablonnyelvként, és kibővítheti a HTML-szintaxist annak érdekében, hogy a webalkalmazás összetevőit szépen és tömören fejezze ki. Az AngularJS segít a JavaScript-kód jobb strukturálásában, és megkönnyíti a tesztelést, megtanítva a böngészőt arra, hogyan kell használni a függőség-injekciót bármely szerver-technológiához.

Hogyan kell használni az AngularJS-t

Az AngularJS használatának megkezdése meglehetősen egyszerű. Öt perc alatt elkészítheti az egyszerű Angular alkalmazást, ha néhány attribútumot ad a HTML-szkriptekhez. Ezek:

1. Helyezze el az „ng-app” irányelvet a címkében. Ez az AngularJS-t futtatni fogja az oldalon, meghatározva az oldalt Angular alkalmazásként.

2. Helyezze a Szögletes címkét az oldal aljára, ahol a címke véget ér.

3. Adjon hozzá szokásos HTML-t. A HTML attribútumok az AngularJS direktívák elérésére szolgálnak, míg a kifejezések értékelése kettős zárójeles jelöléssel történik.

Today's tasks

  • {{task.name}}

Itt az ng-controller irányelv meghatároz egy névteret, ahol elhelyezheti az Angular JS-t az adatok vezérléséhez és a HTML-ben szereplő kifejezések kiértékeléséhez. Míg az ng-repeat direktíva egy Angular repeater objektum, amely arra kéri az Angular-t, hogy hozzon létre listaelemeket, amíg a megjelenítendő feladatok vannak.

hogyan lehet megnyitni az instagram fotókat egy új lapon

Míg a legtöbb keretrendszer manapság csak egy csomó meglévő eszközt tartalmaz, az AngularJS egy következő generációs keretrendszer, amely nagyon meggyőző funkciókkal rendelkezik, amelyek nemcsak a fejlesztők, de a tervezők számára is hasznosak. Az alábbiakban bemutatjuk az AngularJS néhány hihetetlen tulajdonságát, amelyek segítenek a fejlesztőknek abban, hogy jövőbeli webalkalmazásaikat félelmessé tegyék ...

Irányelvek

Az irányelvek az AngularJS egyik legerősebb és legmeggyőzőbb jellemzője. Lehetővé teszik a HTML kiterjesztését, és az AngularJS arra használja őket, hogy a műveletet bekapcsolja az oldalba. Lehetővé teszik egyedi és újrafelhasználható HTML címkék megadását, amelyek felhasználhatók a DOM attribútumok manipulálására és az egyes elemek viselkedésének mérséklésére. Az összes irányelv ng- előtaggal van ellátva, amelyet önálló elemekként terveztek az MVC alkalmazástól elkülönítve, és HTML-attribútumokba helyezték.



Néhány figyelemre méltó AngularJS irányelv:

  • ng-app: Ez az irányelv megmondja a szögletesnek, hogy hol lehet aktiválni. Az oldal szögletes alkalmazásként való meghatározásához egy egyszerű kódot kell használnia:.
  • ng-bind: Ez az irányelv azt mondja az Angularnak, hogy változtassa meg a HTML elem szövegtartalmát az adott kifejezés értékével, és frissítse a szöveget, amint az adott kifejezés értéke megváltozik.
  • ng-model: Nagyon hasonlít az ng-bindhez, de a nézetet a modellbe köti, amelyet más irányelvek, például a kiválasztás, a szöveges terület vagy az input igényelnek.
  • ng-class: Lehetővé teszi az osztályattribútumok dinamikus betöltését.
  • ng-controller: Ez az irányelv megadhat egy JavaScript vezérlő osztályt a HTML kifejezések kiértékeléséhez.
  • ng-repeat: Könnyedén hurkol egy elemet, amelyre az adott ciklusváltozó van beállítva, egy gyűjteményben.
  • ng-hide és ng-show: Egy logikai kifejezés értékének felhasználásával ez az irányelv eldönti, hogy az elem megjelenik-e vagy sem.
  • ngIf: Alapvető, ha a utasítás irányelv lehetővé teszi a lefordított elem klónjának újbóli beillesztését a DOM-ba, ha a feltételek teljesülnek. Ha a feltétel hamis, akkor eltávolítja az elemet a DOM-ból.

Az alábbiakban bemutatunk egy példát egy irányelvre, amely meghallgat egy eseményt, és ennek következtében frissíti annak $ hatókörét.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Ez az egyedi irányelv a következőképpen használható:

Adobe hatások után ingyenesen letölthető mac

Kétirányú adatkötés

Az adatkötés valószínűleg az AngularJS legdominánsabb és figyelemre méltó jellemzője. Megtakarítja a fejlesztőket a jelentős mennyiségű kód megírásától, mivel csökkenti a kiszolgáló háttér-terheinek jelentős részét. Egy tipikus webalkalmazásban a kódbázis 80% -át a DOM kezelésére, bejárására és meghallgatására fordítják. Az adat-összerendelés láthatatlanná teszi ezt a kódot, így az alkalmazás egyéb fontos dolgaira koncentrálhat.

Hagyományosan a sablonrendszerek többségében egyirányú adatkötés van: a modell és a sablon összetevőit nézetbe egyesítik. Az egyesítés után a modell változásai nem tükröződnek automatikusan a nézetben. E változások tükrözése érdekében a fejlesztőnek manuálisan kell manipulálnia a DOM elemeket és attribútumokat. Ez a folyamat bonyolultabbá és nehézkesebbé válik, amikor a felhasználó bármilyen módosítást végez a nézetben. Mivel a fejlesztőnek ekkor értelmeznie kell az interakciókat, be kell építenie a modellbe és frissítenie kell a nézetet.

Egyirányú adatkötési diagram

Kép a http://docs.angularjs.org jóvoltából

Ezzel szemben az AngularJS jobban és más módon végzi az adatkötést azáltal, hogy kezeli az adatok szinkronizálását a modell és a DOM között, és fordítva.

Kétirányú adatkötési diagram

Kép a http://docs.angularjs.org jóvoltából

Az alábbiakban bemutatunk egy egyszerű példát, amely elmagyarázza a bemeneti érték és az an kötését

címke.

Name:

Hello, {{yourName}}!

Függőségi injekció

Az AngularJS beépített injektor alrendszerrel rendelkezik, amely megkönnyíti a fejlesztők számára az alkalmazások fejlesztését, megértését és tesztelését. Az AngularJS függőségi injekciója felelős az összetevők létrehozásáért, annak kezeléséért, hogy miként tudják megszerezni a függőségüket, és kérésre más komponensek rendelkezésére bocsátják őket.

A függőség-injektálás használatával az AngularJS a hagyományos szerveroldali szolgáltatásokat hozza el az ügyféloldali webalkalmazásokba, ami csökkenti a háttérterhet és sokkal könnyebbé teszi a webalkalmazást.

Ha hozzáférést szeretne kapni az alap AngularJS szolgáltatásokhoz, akkor paraméterként hozzá kell adnia egy adott szolgáltatást. Az AngularJS automatikusan észreveszi, hogy használni szeretné ezt a szolgáltatást, és elérhetővé teszi az Ön számára egy példányt.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

Ezen felül meghatározhatja saját egyéni szolgáltatásait, és hozzáférhetővé teheti azokat injekció formájában.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Sablonok

Az AngularJS alkalmazásban HTML-be írnak egy sablont, amely szögspecifikus attribútumokat és elemeket tartalmaz. A sablonnak a vezérlőtől és a modelltől származó információkkal történő kombinálásával az AngularJS megjeleníti a dinamikus nézetet a böngészőkben.

Az alábbiakban felsorolhatók a használható szögletes elemek és attribútumok:

  • Szűrő: Az adatok formázását a megjelenítéshez ez az elem végzi.
  • Űrlapvezérlők: A felhasználói bemenetek ellenőrzéséhez használják.
  • Jelölés: A kifejezések elemekhez való kötéséhez használja a kettős göndör zárójeles jelölést {{}}.
  • Irányelv: Olyan elem vagy attribútum, amely újrafelhasználható DOM-összetevőt eredményez, vagy megnyújt egy meglévő DOM-elemet.

Az alább megadott kód sablont tartalmaz irányelvekkel és jelöléssel:

fekete péntek Apple laptop ajánlatok 2016
{{buttonText}}

Egy tipikus alkalmazásban a sablon CSS, HTML és Angular direktívákat tartalmaz egyetlen HTML fájlban (általában index.html).

Tesztelés

Mivel a JavaScript dinamikus és nagy kifejezési erővel értelmezhető, de szinte nem igényel segítséget a fordítótól. Ezért az AngularJS csapata jól megérti, hogy minden JavaScript-kódnak szigorú tesztek sorozatán kell keresztülmennie. Tehát az AngularJS-t az alapoktól kezdve tesztelhetővé teszik, így a webalkalmazások tesztelése a lehető legegyszerűbb.

Az AngularJS teljes mértékben kihasználja a függőségi injekció előnyeit, előre össze van kötve gúnyokkal, és ösztönzi a viselkedés-nézet szétválasztását. A végpontok közötti teszteléshez az AngularJS rendelkezik egy végponttól végpontig futó futóval, amelyet Protractornak hívnak, amely megérti az AngularJS belső működését a tesztpehely kiküszöbölése érdekében, és szimulálja a felhasználói interakciókat az alkalmazásával.

Az AngularJS másikfajta tesztje az Egységes teszt, amelyen keresztül tesztelheti az egyes kódegységeket. Továbbá az Angular csapata megépített egy Chrome nevű bővítményt is AngularJS Batarang , amely lehetővé teszi a fejlesztők számára a teljesítmény szűk keresztmetszeteinek felismerését, és lehetővé teszi számukra az alkalmazások hibakeresését a böngészőben.

Ajeet Yadav egy professzionális webfejlesztő, akivel kapcsolatban áll wordpressintegration.com , neves webfejlesztő cég, amely kiváló minőségű Photoshop-WordPress téma / sablonkonvertáló szolgáltatást nyújt. Kövesse @Wordpress_INT Twitteren.