Oversigt over AngularJS Architecture

AngularJS er en ramme, der er designet til at udvide HTML-kapaciteterne fra simpelt statisk sprog til et mere dynamisk data-intuitivt klientside. AngularJS er 100% JavaScript. Det hjælper med at skrive en mere administreret kode på klientsiden. Det giver udvikleren mere kodekontrol og datamanipulerende kræfter på klientsiden. For at opnå dette har AngularJS et korrekt designmønster på plads. Dette kaldes et MVC-mønster. Lad os forstå mere om det i det næste afsnit. I dette emne skal vi lære om AngularJS Architecture .

Arkitekturen

AngularJS er bygget på MVC-designmønsteret. Principperne bag MVC-arkitekturen er meget godt integreret i AngularJS. Man kunne have kendt MVC for at være en robust arkitektur for mange sprog på serversiden. AngularJS sammensatte også MVC-mønsteret på klientsiden.

MVC - Model, View, Controller

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

  • Model

Det er det laveste niveau i arkitekturen. Det er ansvarligt for at opbevare og vedligeholde applikationsdata. Data opretholdes gennem hele livscyklussen på siden og undertiden endda mellem sider. Modellen opdaterer sig selv baseret på instruktionerne modtaget fra controlleren.

  • Udsigt

En visning er ansøgningens forside. Det er præsentationslaget i arkitekturen, der er ansvarlig for at vise dataene til brugeren. Det indeholder den komplette kode for UI-siderne på ethvert browser-kompatibelt sprog, normalt HTML. Visningen udløses af dens respektive controller. En visning sender anmodninger til dens controller baseret på brugerinteraktion med applikationen. Controlleren regenererer derefter visningen baseret på svaret modtaget fra serveren.

  • Controller

En controller er behandlingshjernen bag visningen og modellen. Det tager beslutningerne om at generere, regenerere eller ødelægge udsigten og modellen. Al forretningsdrift og kodelogik er skrevet inde i controlleren. (Nogle udviklere foretrækker at skrive forretningslogikken i selve modellen). Controlleren er også ansvarlig for at sende anmodninger til serveren og modtage et svar. Derefter opdateres visningen og modellen baseret på svaret. Kort sagt styrer controlleren alt.

MVC-arkitekturen kan repræsenteres grafisk gennem nedenstående billede.

MVC er robust, fordi det er baseret på softwareudviklingsprincippet Separation of Concerns. Der er flere controllere, der betjener specifikke datasæt og administrerer respektive visninger og modeller. Applikationslogikken adskilles således fra brugergrænsefladelaget.

MVC i AngularJS

Det hele handlede om MVC og dens principper. Hvordan implementeres disse principper i AngularJS? Lad os forstå.

  • Omfang - Omfang er den model, der indeholder applikationsdata. Omfangsvariabler er knyttet til DOM, og de variable egenskaber fås adgang via bindinger.
  • HTML med dataindbinding - Visningen i AngularJS er ikke almindelig HTML. Det er en databundet HTML. Data-binding hjælper med at gengive dynamiske data i HTML-tags. På denne måde opdaterer modellen regelmæssigt DOM.
  • ngController - ngController-direktivet er ansvarlig for samarbejdet mellem model, visning og forretningslogik. Den controller-klasse, der er specificeret af ngController-direktivet, styrer omfanget og visningen.

Konceptuel oversigt

Okay, så nu forstår vi, at AngularJS er bygget på MVC-arkitekturen. Er det alt? Er der intet andet at spille? Selvfølgelig er der.

Der er et par vigtige begreber, som man er nødt til at forstå for at forstå opførslen af ​​AngularJS-applikationer. Lad os forstå dem.

  • Skabeloner

Skabeloner er HTML-elementerne sammen med AngularJS-specifikke elementer og attributter. Dynamikken i AngularJS-applikationer opnås ved at kombinere skabelonen med data fra modellen og controlleren.

  • direktiver

Direktiver er attributter eller elementer, der repræsenterer en genanvendelig DOM-komponent. Direktiver manipulerer direkte den underliggende HTML DOM for at gengive den dynamiske visning. Dette fritager udvikleren fra at bekymre sig om indbyggede HTML-elementer og attributter.

  • Tovejs binding af data

AngularJS synkroniserer automatisk data mellem modellen og visningen gennem databindende. Modellen betragtes som en enkelt kilde til sandhed for dine applikationsdata. Udsigten er en projektion af modellen på alle tidspunkter. Så snart modellen ændres, ændres visningen og vice versa. Dette betegnes som tovejsbinding. Det opnås gennem livekompilering af skabelonen til browseren.

  • routing

AngularJS-applikationer, der er applikationer på én side (SPA), sættes meget fokus på routing mellem sider. AngularJS har en robust routingmekanisme, der gør URL-matching fra listen over ruter, der er specificeret i den router, der er knyttet til komponenten. Dette betyder, at når en browser anmoder om en URL, gengives en tilknyttet underordnet komponent snarere end en hel side.

  • Services

En controller er koblet til en visning. Dette betyder, at det kun er en god praksis at skrive kun den kode inden i controlleren, hvilket er logisk nyttigt til dets syn. Den visningsuafhængige logik kan flyttes andetsteds, så den også kan genanvendes af andre controllere.

Her kommer Tjenesterne i aktion. Tjenester adskiller den genanvendelige forretningslogik fra den specifikke logik. Den visningsspecifikke logik ligger derefter inde i de specifikke controllere, mens den fælles forretningslogik deles af alle controllere.

Som en generel tommelfingerregel er kode for adgang til backend-data også skrevet i tjenester.

  • Afhængighed Injektion

Nu hvor vi har flyttet den visningsuafhængige logik til en delt placering, hvordan kontrollerer vi tilladelserne til at få adgang til de delte tjenester? Dette gøres via Dependency Injection (DI). Dependency Injection er et softwaredesignmønster, der beskæftiger sig med, hvordan objekter oprettes, og hvordan de får fat i deres afhængighed. Alt i AngularJS, fra direktiver til controllere til tjenester og stort set alt, er kablet via DI.

Sjov kendsgerning ved AngularJS-arkitektur

AngularJS blev navngivet som AngularJS på grund af de kantede parenteser i HTML-tags. Projektet var designet til at gøre HTML mere dynamisk og datavænligt, og derfor besluttede udviklerne at navngive det efter de vinklede parenteser i HTML.

Konklusion - AngularJS Architecture

Artiklen dækker alle de vigtige begreber inden for AngularJS-arkitektur. Dette er et godt forspring til at forstå, hvordan forskellige elementer i din AngularJS-applikation fungerer. Det næste trin er at oprette en fuldt funktionel multi-controller AngularJS-applikation, som også henter data fra backend. Dette vil give dig god hånd-on-praksis med begreberne AngularJS.

Anbefalede artikler

Dette er en guide til AngularJS-arkitekturen. Her diskuterer vi arkitekturen, MVC i angularjs og Conceptual Oversigt. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -

  1. Karriere i AngularJS
  2. AngularJS Interview Spørgsmål
  3. Hvad er Backbone.js?
  4. Datamineringssoftware

Kategori:

Softwareudvikling