Översikt av AngularJS Architecture

AngularJS är ett ramverk som utformats för att utöka HTML-funktionerna från enkla statiska språk till ett mer dynamiskt dataintiivt språk på klientsidan. AngularJS är 100% JavaScript. Det hjälper till att skriva en mer hanterad kod på klientsidan. Det ger utvecklaren mer kodkontroll och datamanipulerande befogenheter på klientsidan. För att uppnå detta har AngularJS ett korrekt designmönster på plats. Detta kallas ett MVC-mönster. Låt oss förstå mer om det i nästa avsnitt. I det här ämnet kommer vi att lära oss om AngularJS Architecture .

Arkitekturen

AngularJS bygger på MVC-designmönstret. Principerna bakom MVC-arkitekturen är mycket väl integrerade i AngularJS. Man kan ha känt MVC för att vara en robust arkitektur för många serversidan. AngularJS sammanslagit också MVC-mönstret på klientsidan.

MVC - Model, View, Controller

MVC-mönster står för Model View Controller-mönster.

  • Modell

Det är den lägsta nivån i arkitekturen. Det ansvarar för att hålla och underhålla applikationsdata. Uppgifterna bevaras under hela livscykeln på sidan och ibland även mellan sidorna. Modellen uppdaterar sig själv baserat på instruktionerna från kontrollenheten.

  • Se

En vy är applikationens framsida. Det är presentationsskiktet i arkitekturen som ansvarar för att visa data till användaren. Den har den fullständiga koden för UI-sidorna på alla webbläsarkompatibla språk, vanligtvis HTML. Vyn utlöses av dess respektive styrenhet. En vy skickar förfrågningar till sin controller baserat på användarinteraktion med applikationen. Styrenheten regenererar sedan vyn baserat på svaret som mottagits från servern.

  • Kontrollant

En styrenhet är behandlingshjärnan bakom vyn och modellen. Det tar besluten att generera, förnya eller förstöra vyn och modellen. All affärsverksamhet och kodlogik skrivs in i styrenheten. (Vissa utvecklare föredrar att skriva affärslogiken i själva modellen). Styrenheten är också ansvarig för att skicka förfrågningar till servern och få ett svar. Därefter uppdateras vyn och modellen baserat på svaret. Kort sagt styr regulatorn allt.

MVC-arkitekturen kan grafiskt representeras genom bilden nedan.

MVC är robust eftersom den är baserad på mjukvaruutvecklingsprincipen Separation of Concerns. Det finns flera kontroller som driver specifika uppsättningar av data och hanterar respektive vyer och modeller. Applikationslogiken separeras sålunda från användargränssnittsskiktet.

MVC i AngularJS

Det handlade om MVC och dess principer. Hur implementeras dessa principer i AngularJS? Låt oss förstå.

  • Scope - Scope är modellen som innehåller applikationsdata. Omfattningsvariabler är kopplade till DOM och de variabla egenskaperna nås via bindningar.
  • HTML med databindning - Vyn i AngularJS är inte vanlig HTML. Det är en databindad HTML. Databindande hjälper till att göra dynamiska data i HTML-taggar. På detta sätt uppdaterar modellen regelbundet DOM.
  • ngController - ngController-direktivet ansvarar för samarbetet mellan modell, vy och affärslogik. Styrenhetsklassen som specificeras av ngController-direktivet styr omfattningen och vyn.

Konceptuell översikt

Okej, så nu förstår vi att AngularJS bygger på MVC-arkitekturen. Är det allt? Finns det inget annat att spela? Naturligtvis finns det.

Det finns några viktiga begrepp som man måste förstå för att förstå beteendet hos AngularJS-applikationer. Låt oss förstå dem.

  • mallar

Mallar är HTML-element tillsammans med AngularJS-specifika element och attribut. Dynamiken i AngularJS-applikationer uppnås genom att kombinera mallen med data från modellen och styrenheten.

  • direktiven

Direktiv är attribut eller element som representerar en återanvändbar DOM-komponent. Direktiv manipulerar direkt den underliggande HTML DOM för att göra den dynamiska vyn. Detta befriar utvecklaren från att oroa sig för inbyggda HTML-element och attribut.

  • Tvåvägsdata bindande

AngularJS synkroniserar automatiskt data mellan modellen och vyn genom databindning. Modellen betraktas som en enda sanningskälla för dina applikationsdata. Vyn är en projektion av modellen hela tiden. Så snart modellen ändras ändras vyn och vice versa. Detta benämns tvåvägsbindning. Det uppnås genom live-sammanställning av mallen till webbläsaren.

  • routing

AngularJS-applikationer som är en-sidiga applikationer (SPA) läggs mycket fokus på dirigering mellan sidor. AngularJS har en robust routningsmekanism som gör URL-matchning från listan över rutter som anges i routern associerad med komponenten. Detta innebär att när en webbläsare begär en URL, återges en tillhörande underordnad komponent snarare än en hel sida.

  • tjänster

En styrenhet är kopplad till en vy. Detta innebär att det är en bra praxis att bara skriva den koden inuti styrenheten som är logiskt användbar för dess syn. Den oberoende logiken kan flyttas någon annanstans så att den också kan användas igen av andra kontroller.

Här kommer tjänsterna i aktion. Tjänster separerar den återanvändbara affärslogiken från visningsspecifik logik. Den visningsspecifika logiken finns sedan i de specifika kontrollerna medan den gemensamma affärslogiken delas av alla kontrollerare.

Som en allmän tumregel skrivs också kod för åtkomst till backenddata i tjänster.

  • Beroende på injektion

Nu när vi har flyttat den vyoberoende logiken till en delad plats, hur kontrollerar vi behörigheterna för att få tillgång till de delade tjänsterna? Detta görs genom Dependency Injection (DI). Dependency Injection är ett mjukvarudesignmönster som hanterar hur objekt skapas och hur de får tag i sina beroenden. Allt i AngularJS, från direktiv till controllers till tjänster och i stort sett allt, är kopplat via DI.

Rolig fakta om AngularJS Architecture

AngularJS namngavs som AngularJS på grund av vinkelfästena i HTML-taggar. Projektet var utformat för att göra HTML mer dynamiskt och datavänligt, och därför beslutade utvecklarna att namnge det efter de vinklade parenteserna i HTML.

Slutsats - AngularJS Architecture

Artikeln täcker alla viktiga begrepp inom AngularJS-arkitektur. Detta är ett bra försprång för att förstå hur olika delar av din AngularJS-applikation fungerar. Nästa steg är att skapa en fullt funktionell AngularJS-applikation med flera kontroller som också hämtar data från backend. Detta skulle ge dig god hand-on-praxis för begreppen AngularJS.

Rekommenderade artiklar

Detta är en guide till AngularJS-arkitekturen. Här diskuterar vi arkitekturen, MVC i angularjs och Conceptual Overview. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -

  1. Karriär i AngularJS
  2. AngularJS intervjufrågor
  3. Vad är Backbone.js?
  4. Programvara för gruvdrift

Kategori:

Mjukvaruutveckling