IQSOFT - John Brice Oktatóközpont
IQJB részvételi opció
Kulcsár Ernő

Totózzunk AngularJS használatával - 1.

1.1. Angular-ról általánosságban, avagy MVC az MVC-ben

A böngészők HTML nyelven értenek. Ha elkészítünk egy HTML kódrészletet, azt a böngészők értelmezik és a benne foglalt kód alapján megjelenítenek egy oldalt. A HTML nyelvezetben volt némi kavalkád, ami abból fakadt, hogy folyamatos bővült, történetileg alakult ki, nem pedig alaposan átgondolt gyökerekből nőtt ki. Pl. a .NET Framework alapstruktúráját Microsoft alaposan átgondolta az object osztályból építette fel a több mint 7000 osztályt hierarchikus struktúrába, amelyet azóta is bővít. Tette mindezt tapasztalatok alapján. 

   Igen ám, de amikor a kilencvenes években megjelent a HTML ki gondolta volna, hogy ekkora fejlődésen megy át, nem voltak tapasztalatok, aztán csak rakták hozzá. A helyzetet bonyolította, hogy számos böngésző jelent meg különböző software gyártó cégektől gondoljunk csak Netscape, Interner Explorer, FireFox, Opera, Safari, Chrome böngészőkre és az egyes elemeket kicsit másképp implementálták. Látszólag öröm, hogy megjelent a HTML5, ami némiképpen gyógyír a HTML múltjára, ám a böngészőfüggéség messze nincs megoldva. Tán le kellene ülnie egy kerek asztalhoz az egyes gyártóknak és elbeszélgetni, megállapodni koncepciókban. De cél ez?

Ezek szerint nem. Úgy gondolom elég naív ember az, aki úgy gondolja, ha már HTML-ül tud, akkor övé a világ és mindent tud a WEB alkalmazásfejlesztésről. Tisztán HTML-lel mai modern WEB oldalt készíteni... hát többen elmosolyodnak a gondolaton. Ha stilizálni szeretnénk cascading stylesheet-eket (CSS) használunk. Ha valamit látványossá akarunk tenni, dinamikussá, mozgóvá, akkor jön a szkriptelés. A browser-ek tudnak Javascsript-ül, amely segítségével programozhatjuk web oldalainkat. A Javascript kódot a böngészők futtatják, ezért a kliens oldali programozás kifejezést használjuk. Ha a WEB szerveren akarunk programozni arra ott van Microsoft-éknál az ASP .NET, a C#, ez a szerver oldali programozás világa. Az átlag felhasználó leül egy böngésző el, beír valamilyen URL-t, az egy HTTP requesten keresztül egy web szerverhez fordul, az lefuttatja a szerver oldali programot és HTTP response-ként visszaad a böngészőnek egy HTML oldalt, ami tartalmazhat a script tag-be ágyazott Javascript kódot, amit a böngésző futtat.

Ha ma kitekintünk a nagy világba, modern WEB oldal Javascript nélkül nincs. Hogy ne kelljen feltalálni a spanyol viaszt, hogy ne kelljen megírni mindent elölről különböző Javascript library-k jelentek meg. Nézzük egy párat csak úgy találomra:
• jQuery
• jQueryUI
• ExtJS
• Express
• Three
• Ember
• Required
• Meteor
• Frame
• Backbone
• Marionette
• React
• Node
• Angular és még sorolhatnám..

Mindegyiknek meg van a maga szépsége, célkitűzése. Értelemszerűen a fejlesztések során akár több Javascript libraryt is használhatunk, pl. kiragadva mindegyikből annak előnyét, azt a részt, amire nekünk, cégünknek, fejlesztésünknek leginkább szükségünk van.

Miért pont az Angular? Mi az Angular lényege?
Aki ismer tudja, hogy kisgyermekenként ápolom a MVC tervezési mintát, mert annyira hasznos és kényelmes benne szerver oldali WEB alkalmazást fejleszteni pl. Microsoft fejlesztés során is, mert a tervezési mintát a Microsoft is beépítette az ASP .NET-be és azóta már a 6-os verziónál jár. A minta jól szeparálja a  model, a view és a controller szerepeket. Dióhéjban, lényegileg a model-be kerülnek az adatok, amelyek érkezhetnek adatbáziskezelő szerverről pl. SQL Serverről, hogy ezeket a programozó ADO .NET-en keresztül vagy a modernebb Entity Framework szemlélettel éri el ez az MVC szempontjból lényegtelen. A controller végzi az üzleti logikát, ő a karmester, az összehangoló. A view felelős a megjelenésért: mit fog látni a felhasználó a böngészőben. Mit is? HTML kódból összeállt oldalt, adalékként CSS ill. megspécizve Javascript kóddal.

Ezek a Javascript kódok aztán különböző struktúrájúak lehetnek, vagy egyszerűen csak nyúlnak, burjánzanak, mint a spaghetti. A kód közvetlenül manipulálhatja a HTML oldal elemeit, a Document Object Model (DOM) -on kereszül. Így dolgozik pl. a jQuery, ami nagyon hasznos, de a végén mi sül ki belőle? Ki fogja átlátni? Ezen változtat az AngularJS, amely kliens oldalon implementálja az MVC mintát. A Javascript kódban szétválasztja a model-t, a megjelenítendő adatokat, a view-t, ami a kinézetért felelős és a controller-t, amely itt is a karmester szerepet tölti be.

Nézzük mindezt .NET fejlesztő oldalról. Készíthetek egy ASP .NET WEB alkalmazást szerver oldali MVC struktúrában C# nyelven és annak a view részét (ami HTML és Javascript lesz) Angular Javasciprt kóddal tűzdelem meg. MVC az MVC-ben! Pontosabban csak view-ban MVC, a szerver oldali MVC kód viewja MVC alapján épül fel, a viewba ágyazott kliens oldali Javascript kódot az MVC tervezési minta alapján készíthetem: tartalmaz model-t, controller-t és view-t!

Érdekes. Mégis ha fejlesztőket nyelvi asszociációs játékra invitálnánk Angular szó kapcsán, akkor nem biztos, hogy a model és a view szavakat említenék, hanem inkább a directive, service, routing szavakat. Hogy kerülnek ezek a szavak a képbe? Vágjunk bele az AngularJS-sel való ismerkedésbe


1.2. Ajánlott video

Choosing a JavaScript Framework

Pluralsight
Brian Holt

TODO lista
BackBone, React, Ember, Angular libraryvel

*A teljes szöveg az oktató, Kulcsár Ernő által összeállított tanfolyami jegyzet bevezetéséből való.

Kapcsolódó tanfolyam: Webalkalmazás fejlesztés AngularJS használatával

Kapcsolódó tanfolyamok