Pregled arhitekture AngularJS

AngularJS je okvir, zasnovan za razširitev zmogljivosti HTML iz preprostega statičnega jezika na bolj dinamičen jezik na strani odjemalca. AngularJS je 100% JavaScript. Pomaga napisati bolj upravljano kodo na strani odjemalca. Razvijalcu omogoča več nadzora nad kodo in manipulacijo podatkov na sami strani odjemalca. Da bi to dosegli, ima AngularJS ustrezen oblikovalski vzorec. Temu pravimo vzorec MVC. Več o tem bomo razbrali v naslednjem razdelku. V tej temi bomo spoznali arhitekturo AngularJS .

Arhitektura

AngularJS je zasnovan na vzorcu MVC. Načela arhitekture MVC so v AngularJS zelo dobro vgrajena. Mogoče bi kdo vedel, da je MVC robustna arhitektura mnogih jezikov na strani strežnika. AngularJS je združil vzorec MVC tudi na strani odjemalca.

MVC - Model, pogled, krmilnik

Vzorec MVC pomeni vzorec krmilnika za prikaz modela.

  • Model

Je najnižja raven arhitekture. Odgovoren je za shranjevanje in vzdrževanje podatkov o aplikacijah. Podatki se hranijo skozi celoten življenjski cikel strani in včasih celo med stranmi. Model se posodobi na podlagi navodil, prejetih od regulatorja.

  • Pogled

Pogled je sprednji del aplikacije. Gre za predstavitveni sloj arhitekture, ki je odgovoren za prikaz podatkov uporabniku. Vsebuje celotno kodo za strani uporabniškega vmesnika v katerem koli jeziku, ki je združljiv z brskalnikom, običajno HTML. Pogled sproži ustrezni regulator. Pogled pošlje zahteve svojemu krmilniku na podlagi interakcije uporabnika z aplikacijo. Nato krmilnik obnovi pogled na podlagi odziva, ki ga prejme od strežnika.

  • Krmilnik

Krmilnik je procesor možganov za pogledom in modelom. Sprejema odločitve, da ustvari, regenerira ali uniči pogled in model. Vse poslovne operacije in logike kod so zapisane v regulator. (Nekateri razvijalci raje pišejo poslovno logiko v sam Model). Krmilnik je odgovoren tudi za pošiljanje zahtev na strežnik in prejem odgovora. Nato na podlagi odziva posodobi pogled in model. Skratka, krmilnik nadzira vse.

Skozi spodnjo sliko je mogoče grafično predstaviti arhitekturo MVC.

MVC je močan, ker temelji na načelu razvoja programske opreme Ločitev pomislekov. Obstaja več krmilnikov, ki upravljajo z določenimi nabori podatkov in upravljajo z ustreznimi pogledi in modeli. Logika aplikacije je tako ločena od sloja uporabniškega vmesnika.

MVC v AngularJS

To je bilo vse o MVC in njegovih načelih. Kako se ta načela izvajajo v AngularJS? Naj razumemo.

  • Obseg - Področje uporabe je model, ki vsebuje podatke o aplikacijah. Spremenljivke obsega so pritrjene na DOM in do lastnosti spremenljivk so dostopne preko vezi.
  • HTML s povezovanjem podatkov - Pogled v AngularJS ni običajen HTML. To je HTML, vezan na podatke. Zavezujoče podatke pomaga prikazati dinamične podatke v oznakah HTML. Tako model redno posodablja DOM.
  • ngController - Direktiva ngController je odgovorna za sodelovanje med modelom, pogledom in poslovno logiko. Razred krmilnika, določen z direktivo ngController, nadzoruje obseg in pogled.

Konceptualni pregled

Ok, zdaj razumemo, da je AngularJS zasnovan na arhitekturi MVC. Je to vse? Ali ni nič drugega na igrišču? Seveda obstaja.

Obstaja nekaj pomembnih konceptov, ki jih je treba razumeti, da bi lahko razumel obnašanje aplikacij AngularJS. Da jih razumemo.

  • Predloge

Predloge so elementi HTML, skupaj z elementi in atributi, specifičnimi za AngularJS. Dinamičnost v programih AngularJS dosežemo s kombiniranjem predloge s podatki modela in krmilnika.

  • Direktive

Direktive so atributi ali elementi, ki predstavljajo komponento DOM, ki se lahko ponovno uporabi. Direktivi neposredno manipulirajo z osnovnim HTML DOM, da postane dinamičen pogled. To razvijalca razbremeni skrbi za domače elemente in atribute HTML.

  • Dvosmerna vezava podatkov

AngularJS samodejno sinhronizira podatke med modelom in pogledom prek vezave podatkov. Model velja za en vir resnice za podatke o vaši aplikaciji. Pogled je ves čas projekcija modela. Takoj, ko se model spremeni, se pogled spremeni in obratno. To se imenuje kot dvosmerna vezava. To dosežemo z živo kompilacijo predloge v brskalnik.

  • Usmerjanje

AngularJS aplikacije so enostranske aplikacije (SPA), veliko pozornosti je usmerjeno na usmerjanje med stranmi. AngularJS ima močan mehanizem usmerjanja, ki ujema URL s seznama poti, določenih v usmerjevalniku, povezanih s komponento. To pomeni, da se vsakič, ko brskalnik zahteva URL, prikaže povezana podrejena komponenta in ne celotna stran.

  • Storitve

Krmilnik je povezan s pogledom. To pomeni, da je dobra praksa, da v krmilnik napišete samo tisto kodo, ki je logično uporabna za njen pogled. Logiko pogleda, ki je neodvisna od pogleda, lahko premaknete drugam, tako da jo lahko ponovno uporabijo tudi drugi krmilniki.

Tukaj delujejo Storitve. Storitve ločijo poslovno logiko, ki se lahko ponovno uporabi, od določene logike. Logika, specifična za prikaz, se nato nahaja znotraj določenih krmilnikov, medtem ko skupno kontrolo delijo vsi upravljavci.

Kot splošno pravilo palca je koda za dostop do zalednih podatkov zapisana tudi v storitvah.

  • Vbrizgavanje odvisnosti

Zdaj, ko smo logiko, neodvisno od pogleda, premaknili na skupno lokacijo, kako nadziramo dovoljenja za dostop do storitev v skupni rabi? To se izvede s pomočjo injekcije odvisnosti (DI). Dependency Injection je vzorec načrtovanja programske opreme, ki obravnava, kako se ustvarjajo predmeti in kako dobijo svoje odvisnosti. Vse, kar je v AngularJS, od direktiv do krmilnikov do storitev in skoraj vse, je napeljano prek DI.

Zabavno dejstvo arhitekture AngularJS

AngularJS je bil imenovan kot AngularJS zaradi kotnih oklepajev v oznakah HTML. Projekt je bil zasnovan tako, da je HTML bolj dinamičen in prijazen do podatkov, zato so se razvijalci odločili, da ga poimenujejo po kotnih oklepajih v HTML.

Zaključek - AngularJS Arhitektura

Članek zajema vse pomembne koncepte arhitekture AngularJS. To je dobra ideja za razumevanje delovanja različnih elementov vaše aplikacije AngularJS. Naslednji korak je ustvariti popolnoma funkcionalno večnadzorno aplikacijo AngularJS, ki pridobiva tudi podatke iz zaledja. Tako bi dobili dobro prakso glede konceptov AngularJS.

Priporočeni članki

To je vodnik za AngularJS arhitekturo. Tukaj razpravljamo o arhitekturi, MVC v angularju in konceptualnem pregledu. Če želite izvedeti več, lahko preberete tudi druge naše predlagane članke -

  1. Poklic v AngularJS
  2. AngularJS Intervju Vprašanja
  3. Kaj je Backbone.js?
  4. Programska oprema za rudarjenje podatkov

Kategorija:

Razvoj programske opreme