Pregled arhitekture AngularJS

AngularJS je okvir dizajniran za proširivanje mogućnosti HTML-a od jednostavnog statičkog jezika do dinamičnijeg intuitivnog jezika na strani klijenta. AngularJS je 100% JavaScript. To pomaže u pisanju više upravljanog koda na strani klijenta. Programeru daje više ovlasti za kontrolu koda i manipuliranje podacima na samoj strani klijenta. Da bi se to postiglo, AngularJS ima prikladan dizajnerski obrazac. To se naziva MVC uzorak. Razjasnimo više o tome u sljedećem odjeljku. U ovoj ćemo temi upoznati AngularJS arhitekturu .

Arhitektura

AngularJS je izgrađen po MVC obrascu dizajna. Principi koji stoje iza MVC arhitekture vrlo su dobro uklopljeni u AngularJS. Moglo bi se znati da je MVC robusna arhitektura za mnoge jezike na strani poslužitelja. AngularJS je udružio MVC obrazac i na strani klijenta.

MVC - Model, pogled, kontroler

MVC uzorak znači za uzorak kontrolera modela.

  • Model

To je najniža razina arhitekture. Odgovorna je za čuvanje i održavanje podataka o aplikaciji. Podaci se održavaju tijekom životnog ciklusa stranice, a ponekad i između stranica. Model se ažurira na temelju uputa dobivenih od kontrolera.

  • Pogled

Pogled je prednja strana aplikacije. To je prezentacijski sloj arhitekture koji je odgovoran za prikazivanje podataka korisniku. Sadrži cjeloviti kod za UI stranice na bilo kojem jeziku koji podržava preglednik, obično u HTML-u. Pogled pokreće odgovarajući kontroler. Pogled šalje zahtjeve svom kontroleru na temelju interakcije korisnika s aplikacijom. Tada kontroler regenerira pogled na temelju odgovora primljenog od poslužitelja.

  • kontrolor

Kontroler je procesorski mozak koji stoji iza pogleda i modela. Odluke donose generirati, regenerirati ili uništiti pogled i model. Sve poslovne operacije i logike koda su zapisane unutar kontrolera. (Neki programeri radije pišu poslovnu logiku u samom modelu). Kontrolor je također odgovoran za slanje zahtjeva na poslužitelj i primanje odgovora. Potom ažurira Pogled i Model na temelju odgovora. Ukratko, kontroler kontrolira sve.

MVC arhitektura može se grafički predstaviti kroz donju sliku.

MVC je robustan jer se temelji na principu razvoja softvera "Separation of Concerns". Postoji nekoliko kontrolera koji upravljaju određenim skupovima podataka i upravljaju odnosnim pogledima i modelima. Logika aplikacije tako je odvojena od sloja korisničkog sučelja.

MVC u AngularJS

Ovdje se radilo o MVC-u i njegovim načelima. Kako su ti principi implementirani u AngularJS? Da razumijemo.

  • Djelokrug - Opseg je model koji sadrži podatke o aplikaciji. Promjenjivim opsegom pridružene su DOM, a svojstvima varijabli pristupa se kroz vezanje.
  • HTML s povezivanjem podataka - prikaz u AngularJS nije uobičajeni HTML. To je HTML vezan za podatke. Vezivanje podataka pomaže pri prikazivanju dinamičkih podataka u HTML oznakama. Na taj način model redovito ažurira DOM.
  • ngController - Direktiva ngController odgovorna je za suradnju između modela, pogleda i poslovne logike. Klasa kontrolera određena ngController direktivom kontrolira opseg i prikaz.

Konceptualni pregled

Ok, sada razumijemo da je AngularJS izgrađen na MVC arhitekturi. Je li to sve? Zar nema ništa drugo u igri? Naravno, postoji.

Postoji nekoliko važnih koncepata koje je potrebno razumjeti kako bi se shvatilo ponašanje AngularJS aplikacija. Da ih razumijemo.

  • Predlošci

Predlošci su HTML elementi zajedno sa elementima i atributima specifičnim za AngularJS. Dinamičnost u AngularJS aplikacijama postiže se kombiniranjem predloška s podacima iz modela i kontrolera.

  • direktive

Direktive su atributi ili elementi koji predstavljaju DOM komponentu koju se može ponovo upotrijebiti. Direktivama izravno manipulira temeljni HTML DOM za postizanje dinamičkog prikaza. To oslobađa programera od brige o izvornim HTML elementima i atributima.

  • Dvosmjerno povezivanje podataka

AngularJS automatski sinkronizira podatke između modela i pogleda putem povezivanja podataka. Model se smatra jedinim izvorom istine za vaše podatke o aplikaciji. Pogled je projekcija modela u svakom trenutku. Čim se model promijeni, prikaz se mijenja i obrnuto. To se naziva dvosmjernim vezanjem. To se postiže živim sastavljanjem predloška na pregledniku.

  • usmjeravanje

AngularJS aplikacije su jednostruke aplikacije (SPA), a veliki je fokus stavljen na usmjeravanje između stranica. AngularJS ima robustan mehanizam usmjeravanja koji podudaranje URL-a vrši s popisa ruta navedenih u usmjerivaču koji su povezani s komponentom. To znači da kad god preglednik zatraži URL, prikazuje se pridružena podređena komponenta, a ne cijela stranica.

  • usluge

Kontroler je povezan s pogledom. To znači da je dobra praksa pisati samo taj kôd unutar kontrolera koji je logično koristan za njegov prikaz. Logika pogleda neovisna može se premjestiti drugdje, tako da je mogu koristiti i drugi kontroleri.

Evo dolaze akcije na djelu. Usluge odvajaju poslovnu logiku koja se može ponovo upotrijebiti od određene logike pogleda. Logika vlasničkog pregleda tada se nalazi unutar određenog kontrolera, dok zajedničku poslovnu logiku dijele svi kontroleri.

U pravilu se u uslugama piše i kod za pristup sigurnosnim podacima.

  • Ubrizgavanje ovisnosti

Sada kada smo logiku neovisnu o pogledu premjestili na zajedničko mjesto, kako kontroliramo dopuštenja za pristup zajedničkim uslugama? To se postiže ubrizgavanjem ovisnosti (DI). Ovisnost ubrizgavanje je softverski obrazac dizajna koji se bavi načinom na koji se objekti stvaraju i kako stječu svoje ovisnosti. Sve u AngularJS-u, od direktiva do kontrolera do servisa i gotovo svega, provodi se putem DI-a.

Zabavna činjenica AngularJS arhitekture

AngularJS je nazvan AngularJS zbog kutnih zagrada u HTML oznakama. Projekt je bio osmišljen kako bi HTML bio dinamičniji i prihvatljiviji za podatke, pa su ga programeri odlučili imenovati po kutnim zagradama u HTML-u.

Zaključak - AngularJS arhitektura

Članak pokriva sve važne koncepte AngularJS arhitekture. Ovo je dobra početna ideja za razumijevanje rada različitih elemenata vaše AngularJS aplikacije. Sljedeći je korak izrada potpuno funkcionalne AngularJS aplikacije s više kontrola koja dohvaća i podatke iz podupirača. Ovo će vam dobro donijeti praksu na konceptima AngularJS.

Preporučeni članci

Ovo je vodič za AngularJS arhitekturu. Ovdje ćemo raspravljati o arhitekturi, MVC-u u kutku i konceptualnom pregledu. Možete i proći naše druge predložene članke da biste saznali više -

  1. Karijera u kutnomJS
  2. AngularJS pitanja za intervju
  3. Što je Backbone.js?
  4. Softver za vađenje podataka

Kategorija:

Razvoj softvera