Katsaus AngularJS-arkkitehtuuriin

AngularJS on kehys, jonka tarkoituksena on laajentaa HTML: n ominaisuuksia yksinkertaisesta staattisesta kielestä dynaamisempaan asiakaspuolen data-intuitiiviseen kieleen. AngularJS on 100% JavaScript. Se auttaa kirjoittamaan paremmin hallitun asiakaspuolen koodin. Se antaa kehittäjälle enemmän koodinhallintaa ja tietojen manipulointia koskevia valtuuksia itse asiakaspuolella. Tämän saavuttamiseksi AngularJS: llä on oikea malli. Tätä kutsutaan MVC-kuvioksi. Ymmärretään lisää siitä seuraavassa osassa. Tässä aiheessa aiomme oppia AngularJS-arkkitehtuurista .

Arkkitehtuuri

AngularJS on rakennettu MVC-suunnittelumallille. MVC-arkkitehtuurin taustalla olevat periaatteet ovat erittäin hyvin sisällytetty AngularJS: ään. Voi olla tuntenut, että MVC on vankka arkkitehtuuri monille palvelinpuolen kielille. AngularJS yhdisti MVC-kuvion myös asiakaspuolella.

MVC - malli, näkymä, ohjain

MVC-malli tarkoittaa mallinäkymän ohjaimen mallia.

  • Malli

Se on arkkitehtuurin alin taso. Se vastaa sovellustietojen hallussapidosta ja ylläpidosta. Tietoja ylläpidetään koko sivun elinkaaren ajan ja joskus jopa sivujen välillä. Malli päivittää itsensä ohjaimelta saatujen ohjeiden perusteella.

  • näkymä

Näkymä on sovelluksen etupinta. Se on arkkitehtuurin esityskerros, joka vastaa tietojen näyttämisestä käyttäjälle. Se sisältää käyttöliittymäsivujen täydellisen koodin millä tahansa selaimen kanssa yhteensopivalla kielellä, yleensä HTML. Näkymän laukaisee sen vastaava ohjain. Näkymä lähettää pyynnöt ohjaimelleen käyttäjän vuorovaikutuksen perusteella sovelluksen kanssa. Tämän jälkeen ohjain uudistaa näkymän palvelimelta vastaanotetun vastauksen perusteella.

  • ohjain

Ohjain on prosessoiva aivot kuvan ja mallin takana. Se tekee päätökset kuvan, mallin luomiseksi, uudistamiseksi tai tuhoamiseksi. Kaikki liiketoiminta ja koodilogikat on kirjoitettu ohjaimen sisälle. (Jotkut kehittäjät mieluummin kirjoittavat liiketoimintalogiikan itse malliin). Ohjain vastaa myös pyyntöjen lähettämisestä palvelimelle ja vastauksen vastaanottamisesta. Sitten se päivittää näkymän ja mallin vastauksen perusteella. Lyhyesti sanottuna, ohjain hallitsee kaikkea.

MVC-arkkitehtuuri voidaan esittää graafisesti alla olevan kuvan avulla.

MVC on vankka, koska se perustuu huolenaiheiden erottamisen ohjelmistokehitysperiaatteeseen. On olemassa useita ohjaimia, jotka käyttävät tiettyjä tietojoukkoja ja hallitsevat vastaavia näkymiä ja malleja. Sovelluslogiikka erotetaan siten käyttöliittymäkerroksesta.

MVC AngularJS: ssä

Tämä koski MVC: tä ja sen periaatteita. Kuinka nämä periaatteet pannaan täytäntöön AngularJS: ssä? Ymmärtäkäämme.

  • Soveltamisala - Soveltamisala on malli, jolla on sovellustiedot. Soveltamisalamuuttujat liitetään DOM: iin ja muuttujien ominaisuuksiin päästään sidoksilla.
  • HTML datan sitomisella - AngularJS: n näkymä ei ole säännöllinen HTML. Se on tietoihin sidottu HTML. Tietojen sitominen auttaa tuottamaan dynaamista dataa HTML-tunnisteissa. Tällä tavalla malli päivittää DOM säännöllisesti.
  • ngController - ngController -direktiivi vastaa yhteistyöstä mallin, näkymän ja liiketoimintalogiikan välillä. NgController-direktiivissä määritelty ohjainluokka ohjaa laajuutta ja näkymää.

Käsitteellinen yleiskatsaus

Okei, joten nyt ymmärrämme, että AngularJS on rakennettu MVC-arkkitehtuuriin. Onko siinä kaikki? Eikö muuta ole pelattavissa? Tietysti on.

On olemassa muutamia tärkeitä käsitteitä, jotka on ymmärrettävä ymmärtääksesi AngularJS-sovellusten käyttäytymistä. Ymmärretään heidät.

  • Mallit

Mallit ovat HTML-elementtejä yhdessä AngularJS-erityisten elementtien ja määritteiden kanssa. Dynaamisuus AngularJS-sovelluksissa saavutetaan yhdistämällä malli mallin ja ohjaimen tiedoilla.

  • direktiivit

Direktiivit ovat määritteitä tai elementtejä, jotka edustavat uudelleenkäytettävää DOM-komponenttia. Direktiivit manipuloivat suoraan taustalla olevaa HTML DOM: ia dynaamisen näkymän tekemiseksi. Tämä vapauttaa kehittäjän huolehtimasta alkuperäisistä HTML-elementeistä ja määritteistä.

  • Kaksisuuntainen tietojen sitominen

AngularJS synkronoi tiedot automaattisesti mallin ja näkymän välillä tietojen sitomisen avulla. Malliä pidetään yhtenä totuuden lähteenä sovellustiedoissasi. Näkymä on koko ajan projektio mallista. Heti kun malli muuttuu, näkymä muuttuu ja päinvastoin. Tätä kutsutaan kaksisuuntaiseksi sitomiseksi. Se saavutetaan mallin live-kokoamisella selaimeen.

  • reititys

AngularJS-sovellukset ovat yhden sivun sovelluksia (SPA), ja keskitytään paljon sivujen väliseen reititykseen. AngularJS: llä on vankka reititysmekanismi, joka vastaa URL-osoitetta komponenttiin liittyvän reitittimen määrittämien reittien luettelosta. Tämä tarkoittaa, että aina kun selain pyytää URL: tä, siihen liittyvä alakomponentti hahmotellaan kokonaisen sivun sijasta.

  • Palvelut

Säädin on kytketty näkymään. Tämä tarkoittaa, että on hyvä käytäntö kirjoittaa vain se koodi koodiin, joka on loogisesti hyödyllinen sen näkymässä. Näkymästä riippumaton logiikka voidaan siirtää muualle, jotta myös muut ohjaimet voivat käyttää sitä.

Tässä ovat Palvelut toiminnassa. Palvelut erottavat uudelleenkäytettävän liiketoimintalogiikan näkymäkohtaisesta logiikasta. Näkymäkohtainen logiikka sijaitsee sitten tietyissä ohjaimissa, kun taas kaikki ohjaimet jakavat yhteisen liikelogiikan.

Yleisenä peuklasääntönä, että taustatietoihin pääsykoodi kirjoitetaan myös palveluissa.

  • Riippuvuusinjektio

Nyt kun olemme siirtäneet näkymästä riippumattoman logiikan jaettuun sijaintiin, kuinka hallitsemme käyttöoikeuksia jaettuihin palveluihin? Tämä tapahtuu riippuvuusinjektion (DI) avulla. Dependency Injection on ohjelmistosuunnittelumalli, joka käsittelee sitä, miten esineet luodaan ja miten ne tarttuvat riippuvuuksiinsa. Kaikki AngularJS: ssä, kaapeleista direktoreihin ja palveluihin, ja melkein kaikki, on kytketty DI: n kautta.

AngularJS-arkkitehtuurin hauska tosiasia

AngularJS nimettiin AngularJS HTML-tunnisteiden kulmasulkojen takia. Projekti suunniteltiin tekemään HTML: stä dynaamisempaa ja tietoystävällisempää, ja tämän vuoksi kehittäjät päättivät nimetä sen HTML: n kulmasulkojen mukaan.

Johtopäätös - AngularJS -arkkitehtuuri

Artikkeli kattaa kaikki AngularJS-arkkitehtuurin tärkeät käsitteet. Tämä on hyvä lähtökohta ymmärtää AngularJS-sovelluksesi eri osien toimintaa. Seuraava vaihe on luoda täysin toimiva moniohjaaja AngularJS-sovellus, joka noutaa tietoja myös taustalta. Tämä antaisi sinulle hyvän käytännön käytännön AngularJS-konsepteihin.

Suositellut artikkelit

Tämä on opas AngularJS-arkkitehtuuriin. Tässä keskustellaan arkkitehtuurista, kulma-alueiden MVC: stä ja käsitteellisestä yleiskatsauksesta. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -

  1. Ura AngularJS: ssä
  2. AngularJS -haastattelukysymykset
  3. Mikä on Backbone.js?
  4. Tietojen louhintaohjelmisto

Luokka:

Ohjelmistokehitys