Oversikt over AngularJS Architecture

AngularJS er et rammeverk designet for å utvide egenskapene til HTML fra enkelt statisk språk til et mer dynamisk dataintuitivt språk på klientsiden. AngularJS er 100% JavaScript. Det hjelper med å skrive en mer administrert kode på klientsiden. Det gir utvikleren mer kodekontroll og datamanipulerende krefter på klientsiden. For å oppnå dette har AngularJS et skikkelig designmønster på plass. Dette kalles et MVC-mønster. La oss forstå mer om det i neste avsnitt. I dette emnet skal vi lære om AngularJS Architecture .

Arkitekturen

AngularJS er bygget på MVC designmønster. Prinsippene bak MVC-arkitekturen er godt integrert i AngularJS. Man kunne ha kjent at MVC var en robust arkitektur for mange serversidespråk. AngularJS amalgamerte MVC-mønsteret også på klientsiden.

MVC - Model, View, Controller

MVC-mønster står for Model View Controller-mønster.

  • Modell

Det er det laveste nivået i arkitekturen. Det er ansvarlig for å holde og vedlikeholde applikasjonsdataene. Dataene opprettholdes gjennom hele livssyklusen til siden og noen ganger til og med mellom sidene. Modellen oppdaterer seg selv basert på instruksjonene mottatt fra kontrolleren.

  • Utsikt

En visning er forsiden av applikasjonen. Det er presentasjonssjiktet i arkitekturen som er ansvarlig for å vise dataene til brukeren. Den har den komplette koden for brukergrensesnittet på alle nettleserkompatible språk, vanligvis HTML. Visningen utløses av den respektive kontrolleren. En visning sender forespørsler til kontrolleren basert på brukerinteraksjon med applikasjonen. Kontrolleren regenererer deretter visningen basert på responsen mottatt fra serveren.

  • Controller

En kontroller er prosesseringshjernen bak utsikten og modellen. Det tar beslutningene å generere, regenerere eller ødelegge utsikten og modellen. All forretningsdrift og kodelogikk er skrevet inne i kontrolleren. (Noen utviklere foretrekker å skrive forretningslogikken i selve modellen). Kontrolleren er også ansvarlig for å sende forespørsler til serveren og motta svar. Den oppdaterer deretter visningen og modellen basert på responsen. Kort sagt styrer kontrolleren alt.

MVC-arkitekturen kan fremstilles grafisk gjennom bildet nedenfor.

MVC er robust fordi den er basert på programvareutviklingsprinsippet Separation of Concerns. Det er flere kontrollere som bruker spesifikke datasett og administrerer respektive visninger og modeller. Applikasjonslogikken skilles således fra brukergrensesnittlaget.

MVC i AngularJS

Dette handlet om MVC og dens prinsipper. Hvordan implementeres disse prinsippene i AngularJS? La oss forstå.

  • Scope - Scope er modellen som inneholder applikasjonsdata. Omfangsvariabler er festet til DOM og de variable egenskapene får tilgang til gjennom bindinger.
  • HTML med datainnbinding - Visningen i AngularJS er ikke vanlig HTML. Det er en data bundet HTML. Data-binding hjelper med å gjengi dynamiske data i HTML-koder. På denne måten oppdaterer modellen DOM regelmessig.
  • ngController - ngController-direktivet er ansvarlig for samarbeidet mellom modell, visning og forretningslogikk. Kontrollerklassen spesifisert av ngController-direktivet kontrollerer omfanget og utsikten.

Konseptuell oversikt

OK, så nå forstår vi at AngularJS er bygget på MVC-arkitekturen. Er det alt? Er det ikke noe annet å spille? Selvfølgelig er det det.

Det er noen viktige konsepter som man må forstå for å forstå oppførselen til AngularJS-applikasjoner. La oss forstå dem.

  • maler

Maler er HTML-elementene sammen med AngularJS-spesifikke elementer og attributter. Dynamisiteten i AngularJS-applikasjoner oppnås ved å kombinere malen med data fra modellen og kontrolleren.

  • direktiver

Direktiv er attributter eller elementer som representerer en gjenbrukbar DOM-komponent. Direktiv manipulerer direkte den underliggende HTML DOM for å gjengi den dynamiske visningen. Dette fritar utvikleren fra å bekymre seg for innfødte HTML-elementer og attributter.

  • Toveis bindende data

AngularJS synkroniserer automatisk data mellom modellen og visningen gjennom databinding. Modellen blir sett på som en eneste sannhetskilde for applikasjonsdataene dine. Utsikten er en projeksjon av modellen til enhver tid. Så snart modellen endres, endres visningen og omvendt. Dette betegnes som toveisbinding. Det oppnås gjennom live-samlingen av malen videre til nettleseren.

  • ruting

AngularJS-applikasjoner som er enkeltsidige applikasjoner (SPA), blir mye fokus lagt på ruting mellom sider. AngularJS har en robust rutemekanisme som gjør URL-matching fra listen over ruter som er spesifisert i ruteren tilknyttet komponenten. Dette betyr at når en nettleser ber om en URL, gjengis en tilknyttet underordnet komponent i stedet for en hel side.

  • tjenester

En kontroller er koblet med en visning. Dette betyr at det er en god praksis å bare skrive den koden inne i kontrolleren som er logisk nyttig for synet. Visningsuavhengig logikk kan flyttes andre steder, slik at den også kan brukes på nytt av andre kontrollører.

Her kommer Tjenestene i aksjon. Tjenester skiller den gjenbrukbare forretningslogikken fra visningsspesifikk logikk. Den visningsspesifikke logikken ligger deretter inne i de spesifikke kontrollerne, mens den vanlige forretningslogikken deles av alle kontrollerne.

Som en generell tommelfingerregel skrives også kode for tilgang til backend-data i tjenester.

  • Avhengighetsinjeksjon

Nå som vi har flyttet den visningsuavhengige logikken til et delt sted, hvordan kontrollerer vi tillatelsene til å få tilgang til de delte tjenestene? Dette gjøres gjennom Dependency Injection (DI). Dependency Injection er et programvaredesignmønster som tar for seg hvordan objekter skapes og hvordan de får tak i avhengighetene. Alt i AngularJS, fra direktiver til kontrollører til tjenester og stort sett alt, er kablet gjennom DI.

Fun Fact of AngularJS Architecture

AngularJS ble navngitt som AngularJS på grunn av de kantete parentesene i HTML-koder. Prosjektet ble designet for å gjøre HTML mer dynamisk og datavennlig, og derfor bestemte utviklerne seg for å navngi det etter de kantete parentesene i HTML.

Konklusjon - AngularJS Architecture

Artikkelen dekker alle viktige konsepter innen AngularJS-arkitektur. Dette er et godt forsprang for å forstå bruken av forskjellige elementer i AngularJS-applikasjonen. Det neste trinnet er å lage en fullt funksjonell multi-controller AngularJS-applikasjon som også henter data fra backend. Dette vil gi deg god hånd-on-praksis på konseptene til AngularJS.

Anbefalte artikler

Dette er en guide til AngularJS Architecture. Her diskuterer vi arkitekturen, MVC i angularjs og Conceptual Overview. Du kan også gå gjennom andre foreslåtte artikler for å lære mer -

  1. Karriere i AngularJS
  2. AngularJS intervjuspørsmål
  3. Hva er Backbone.js?
  4. Datamineringsprogramvare

Kategori:

Programvare utvikling