Prezentare generală a arhitecturii AngularJS

AngularJS este un cadru conceput pentru a extinde capabilitățile HTMLului de la un limbaj static simplu la un limbaj mai intuitiv de date din partea clientului. AngularJS este 100% JavaScript. Ajută la scrierea unui cod mai gestionat din partea clientului. Oferă dezvoltatorului mai multe puteri de control al codului și puteri de manipulare a datelor în propria parte. Pentru a realiza acest lucru, AngularJS are un model de proiectare adecvat. Aceasta se numește un model MVC. Haideți să înțelegem mai multe despre asta în secțiunea următoare. În acest subiect, vom afla despre Arhitectura AngularJS .

Arhitectura

AngularJS este bazat pe modelul de design MVC. Principiile din spatele arhitecturii MVC sunt foarte bine încorporate în AngularJS. S-ar putea să știm că MVC este o arhitectură robustă pentru multe limbi ale serverului. AngularJS a amalgamat și modelul MVC pe partea clientului.

MVC - Model, View, Controler

Modelul MVC înseamnă modelul Controller de vizualizare a modelului.

  • Model

Este cel mai scăzut nivel al arhitecturii. Este responsabil pentru păstrarea și păstrarea datelor aplicației. Datele sunt păstrate de-a lungul ciclului de viață al paginii și uneori chiar și între pagini. Modelul se actualizează pe baza instrucțiunilor primite de la controler.

  • Vedere

O vedere este fața din față a aplicației. Este stratul de prezentare a arhitecturii responsabil de afișarea datelor către utilizator. Acesta conține codul complet pentru paginile UI în orice limbă compatibilă cu browserul, de obicei HTML. View este declanșat de controlerul său respectiv. O vizualizare trimite solicitări controlerului său pe baza interacțiunii utilizatorului cu aplicația. Controlorul regenerează apoi vederea pe baza răspunsului primit de la server.

  • Controlor

Un controler este creierul de procesare din spatele vederii și modelului. Este nevoie de decizii pentru a genera, regenera sau distruge punctul de vedere și modelul. Toate operațiunile de afaceri și logica codurilor sunt scrise în interiorul controlerului. (Unii dezvoltatori preferă să scrie logica de afaceri în Modelul însuși). Controlerul este, de asemenea, responsabil pentru trimiterea cererilor către server și primirea unui răspuns. Apoi actualizează Vizualizarea și modelul pe baza răspunsului. Pe scurt, controlorul controlează totul.

Arhitectura MVC poate fi reprezentată grafic prin imaginea de mai jos.

MVC este robust deoarece se bazează pe principiul dezvoltării de software al separarii preocupărilor. Există mai multe controlere care operează seturi de date specifice și gestionează vizualizările și modelele respective. Logica aplicației este astfel separată de stratul de interfață utilizator.

MVC în AngularJS

Aici era vorba de MVC și de principiile sale. Cum sunt implementate aceste principii în AngularJS? Să înțelegem.

  • Domeniu de aplicare - Scopul este modelul care deține datele aplicației. Variabilele de aplicare sunt atașate la DOM și proprietățile variabilei sunt accesate prin legături.
  • HTML cu legare de date - vizualizarea în AngularJS nu este HTML obișnuită. Este un HTML legat de date. Legarea datelor ajută la redarea datelor dinamice în etichetele HTML. În acest fel, modelul actualizează periodic DOM.
  • ngController - Directiva ngController este responsabilă pentru colaborarea dintre model, vizualizare și logica de afaceri. Clasa de control specificată de directiva ngController controlează scopul și vederea.

Prezentare conceptuală

Bine, acum înțelegem că AngularJS este construit pe arhitectura MVC. Asta e tot? Nu există altceva în joc? Desigur, există.

Există câteva concepte importante pe care trebuie să le înțelegem pentru a înțelege comportamentul aplicațiilor AngularJS. Să le înțelegem.

  • Template-uri

Șabloanele sunt elementele HTML împreună cu elementele și atributele specifice AngularJS. Dinamica în aplicațiile AngularJS se realizează prin combinarea șablonului cu datele de la model și controler.

  • directivă

Directivele sunt atribute sau elemente care reprezintă o componentă DOM reutilizabilă. Directivele manipulează direct DOM-ul HTML de bază pentru a reda vizualizarea dinamică. Acest lucru îl scutește pe dezvoltator să se îngrijoreze de elementele și atributele HTML native.

  • Legarea datelor pe două căi

AngularJS sincronizează automat datele dintre model și vedere prin legarea datelor. Modelul este considerat ca o singură sursă de adevăr pentru datele aplicației dvs. Vederea este o proiecție a modelului în orice moment. De îndată ce modelul se schimbă, vederea se schimbă și invers. Aceasta este denumită legătură în două sensuri. Se realizează prin compilarea live a șablonului în browser.

  • Routing

Aplicațiile AngularJS sunt aplicații cu o singură pagină (SPA), o mare atenție este pusă pe rutarea între pagini. AngularJS are un mecanism robust de rutare care face corespondență URL din lista de rute specificate în routerul asociat componentei. Aceasta înseamnă că, de fiecare dată când un browser solicită o adresă URL, este redată o componentă copil asociată, mai degrabă decât o pagină întreagă.

  • Servicii

Un controler este cuplat cu o vedere. Aceasta înseamnă că este o practică bună să scrieți doar codul respectiv în controler, care este logic logic pentru vizualizarea sa. Logica independentă de vedere poate fi mutată în altă parte, astfel încât să poată fi reutilizată și de către alți controlori.

Aici vin Serviciile în acțiune. Serviciile separă logica de afaceri reutilizabilă de logica specifică vizualizării. Logica specifică de vizualizare se află apoi în interiorul controlerelor specifice, în timp ce logica de afaceri comună este împărtășită de toți controlorii.

Ca regulă generală, codul pentru accesarea datelor de backend este scris și în servicii.

  • Injecția de dependență

Acum că am mutat logicele independente de vedere într-o locație partajată, cum controlăm permisiunile pentru accesarea serviciilor partajate? Aceasta se realizează prin dependența de injecție (DI). Dependency Injection este un model de proiectare software care tratează modul în care obiectele sunt create și cum pun stăpânire pe dependențele lor. Totul în AngularJS, de la directive la controlere până la servicii și aproape toate, este conectat prin intermediul DI.

Fun Fact of AngularJS Architecture

AngularJS a fost numit AngularJS din cauza parantezelor unghiulare din etichetele HTML. Proiectul a fost conceput pentru a face HTML-ul mai dinamic și mai prietenos cu datele și, prin urmare, dezvoltatorii au decis să-l numească după parantezele unghiulare în HTML.

Concluzie - Arhitectură AngularJS

Articolul acoperă toate conceptele importante ale arhitecturii AngularJS. Acesta este un început bun pentru a înțelege funcționarea diferitelor elemente din aplicația dvs. AngularJS. Următorul pas este de a crea o aplicație AngularJS multi-controller complet funcțional, care preia și date de la backend. Acest lucru vă va duce la o practică practică bună asupra conceptelor AngularJS.

Articole recomandate

Acesta este un ghid pentru Arhitectura AngularJS. Aici discutăm despre arhitectură, MVC în angularjs și Prezentare conceptuală. Puteți parcurge și alte articole sugerate pentru a afla mai multe -

  1. Cariera în AngularJS
  2. Întrebări de interviu AngularJS
  3. Ce este Backbone.js?
  4. Software de extragere a datelor

Categorie:

Dezvoltare de software