Ülevaade AngularJS arhitektuurist

AngularJS on raamistik, mis on loodud HTML-i võimaluste laiendamiseks lihtsast staatilisest keelest dünaamilisema kliendi poolel kasutatava andmete-intuitiivse keeleni. AngularJS on 100% JavaScript. See aitab kirjutada paremini hallatava kliendipoolse koodi. See annab arendajale kliendi poolel rohkem koodikontrolli ja andmetega manipuleerimise võimalusi. Selle saavutamiseks on AngularJS-il olemas sobiv kujundusmuster. Seda nimetatakse MVC mustriks. Saame sellest lähemalt aru järgmises jaotises. Selles teemas tutvume AngularJS arhitektuuriga .

Arhitektuur

AngularJS on üles ehitatud MVC kujundusmustrile. MVC arhitektuuri taga olevad põhimõtted on AngularJS-is väga hästi sisse viidud. Võib-olla oli MVC teada, et see on paljude serveripoolsete keelte kindel arhitektuur. NurgaJS ühendas MVC mustri ka kliendi poolel.

MVC - mudel, vaade, kontroller

MVC muster tähistab mudeli vaatekontrolleri mustrit.

  • Mudel

See on arhitektuuri madalaim tase. See vastutab rakenduse andmete hoidmise ja haldamise eest. Andmeid säilitatakse kogu lehe elutsükli jooksul ja mõnikord isegi lehtede vahel. Mudel värskendab ennast kontrollerilt saadud juhiste põhjal.

  • Vaade

Vaade on rakenduse esikülg. See on arhitektuuri esitluskiht, mis vastutab andmete kuvamise eest kasutajale. See sisaldab kasutajaliidese lehtede täielikku koodi mis tahes brauseriga ühilduvas keeles, tavaliselt HTML-is. Vaate käivitab vastav kontroller. Vaade saadab kontrollerile päringuid, mis põhinevad kasutaja interaktsioonil rakendusega. Seejärel taastab kontroller vaate serverilt saadud vastuse põhjal.

  • Kontroller

Kontroller on töötlemise aju vaate ja mudeli taga. See võtab vastu vaate ja mudeli genereerimise, taastamise või hävitamise otsused. Kõik äritegevused ja koodiloogika on kirjutatud kontrolleri sisse. (Mõned arendajad eelistavad äriloogika kirjutamist mudelis endas). Kontroller vastutab ka serverile päringute saatmise ja vastuse saamise eest. Seejärel värskendatakse vastuse põhjal vaadet ja mudelit. Lühidalt, kontroller kontrollib kõike.

MVC arhitektuuri saab graafiliselt esitada allpool oleva pildi kaudu.

MVC on vastupidav, kuna põhineb tarkvaraarenduse põhimõttel Murede eraldamine. On mitmeid kontrollereid, mis haldavad konkreetseid andmekogumeid ja haldavad vastavaid vaateid ja mudeleid. Rakendusloogika eraldatakse seega kasutajaliidese kihist.

MVC nurgasJS

See kõik oli seotud MVC ja selle põhimõtetega. Kuidas neid põhimõtteid rakenduses AngularJS rakendatakse? Saagem aru.

  • Ulatus - ulatus on mudel, mis sisaldab rakenduse andmeid. Ulatusmuutujad kinnitatakse DOM-ile ja muutujate omadustele pääseb juurde köidete kaudu.
  • HTML koos andmete sidumisega - vaade AngularJS-is pole tavaline HTML. See on andmetega seotud HTML. Andmete sidumine aitab HTML-märgendites dünaamilisi andmeid renderdada. Nii värskendab mudel DOM-i regulaarselt.
  • ngController - direktiiv ngController vastutab mudeli, vaate ja äriloogika vahelise koostöö eest. NgControlleri direktiivis määratletud kontrolleriklass kontrollib ulatust ja vaadet.

Kontseptuaalne ülevaade

Olgu, nüüd saame aru, et AngularJS on üles ehitatud MVC arhitektuurile. Kas see on kõik? Kas pole muud mängul? Muidugi on.

AngularJS-i rakenduste käitumise mõistmiseks tuleb mõista mõnda olulist mõistet. Saame neist aru.

  • Mallid

Mallid on HTML-elemendid koos AngularJS-i konkreetsete elementide ja atribuutidega. Dünaamilisus AngularJS-i rakendustes saavutatakse, ühendades malli mudeli ja kontrolleri andmetega.

  • Direktiivid

Direktiivid on atribuudid või elemendid, mis tähistavad korduvkasutatavat DOM-i komponenti. Dünaamilise vaate muutmiseks manipuleerivad direktiivid otseselt aluseks olevat HTML DOM-i. See vabastab arendaja muretsemast looduslike HTML-i elementide ja atribuutide pärast.

  • Kahesuunaline andmete sidumine

AngularJS sünkroonib andmed mudeli ja vaate vahel automaatselt andmete sidumise kaudu. Mudelit peetakse teie rakenduse andmete jaoks üheks tõeallikaks. Vaade on alati mudeli projektsioon. Niipea kui mudel muutub, muutub vaade ja vastupidi. Seda nimetatakse kahesuunaliseks sidumiseks. See saavutatakse malli reaalajas kompileerimise abil brauseris.

  • Marsruutimine

AngularJS rakendused on ühelehelised rakendused (SPA), keskendudes palju lehekülgede vahelisele marsruutimisele. AngularJS-l on kindel marsruutimismehhanism, mis täidab URL-i komponendiga seotud ruuteris täpsustatud marsruutide loendist. See tähendab, et kui brauser taotleb URL-i, renderdatakse seostatud alamkomponent, mitte terve leht.

  • Teenused

Kontroller on ühendatud vaatega. See tähendab, et hea tava on kirjutada kontrollerisse ainult see kood, mis on selle vaate jaoks loogiliselt kasulik. Vaatest sõltumatut loogikat saab teisaldada mujale, nii et seda saavad kasutada ka teised kontrollerid.

Siit tulevadki teenused. Teenused eraldavad korduvkasutatava äriloogika vaatespetsiifilisest loogikast. Seejärel asub vaatespetsiifiline loogika konkreetsete kontrollerite sees, samas kui ühist äriloogikat jagavad kõik kontrollerid.

Üldine pöidlareegel on see, et tagapõhja andmetele juurdepääsu kood kirjutatakse ka teenustes.

  • Sõltuvuse süstimine

Nüüd, kui oleme teisaldanud vaatest sõltumatu loogika jagatud asukohta, kuidas kontrollida ühiskasutatavatele teenustele juurdepääsu õigusi? Seda tehakse sõltuvuse süstimise (DI) abil. Sõltuvuse süst on tarkvara kujundamise muster, mis tegeleb sellega, kuidas objekte luuakse ja kuidas nad sõltuvustest kinni saavad. Kõik AngularJS-is, alates direktiividest kuni kontrolleriteni ja lõpetades teenustega, ja peaaegu kõik, on juhtme kaudu ühendatud juhtmega.

AngularJS arhitektuuri lõbus tõsiasi

AngularJS nimetati HTML-siltide nurksulgude tõttu AngularJS-ks. Projekti eesmärk oli muuta HTML dünaamilisemaks ja andmesõbralikumaks ning seetõttu otsustasid arendajad nimetada seda HTML-i nurksulgude järgi.

Järeldus - AngularJS Architecture

Artikkel hõlmab kõiki AngularJS-i arhitektuuri olulisi kontseptsioone. See on hea algus teie AngularJS-i rakenduse erinevate elementide toimimise mõistmiseks. Järgmine samm on luua täielikult funktsionaalne mitmekontrolleri AngularJS rakendus, mis tõmbab andmeid ka taustast. See annaks teile hea praktilise praktika AngularJSi kontseptsioonide osas.

Soovitatavad artiklid

See on juhend AngularJS arhitektuurile. Siin arutame arhitektuuri, nurkade alt MVC-d ja kontseptuaalset ülevaadet. Lisateavet leiate ka meie muudest soovitatud artiklitest -

  1. Karjäär nurgasJS
  2. AngularJS intervjuu küsimused
  3. Mis on selgroog.js?
  4. Andmete kaevandamise tarkvara

Kategooria:

Tarkvaraarendus