Overzicht van AngularJS-architectuur

AngularJS is een raamwerk dat is ontworpen om de mogelijkheden van HTML uit te breiden van eenvoudige statische taal tot een meer dynamische data-intuïtieve client-side taal. AngularJS is 100% JavaScript. Het helpt bij het schrijven van een meer beheerde client-side code. Het geeft de ontwikkelaar meer codecontrole en gegevensmanipulerende bevoegdheden aan de client-kant zelf. Om dit te bereiken heeft AngularJS een goed ontwerppatroon. Dit wordt een MVC-patroon genoemd. Laten we er meer over begrijpen in de volgende sectie. In dit onderwerp gaan we meer te weten komen over AngularJS Architecture .

De architectuur

AngularJS is gebaseerd op het MVC-ontwerppatroon. De principes achter de MVC-architectuur zijn zeer goed opgenomen in AngularJS. Je hebt misschien geweten dat MVC een robuuste architectuur is voor veel server-side talen. AngularJS fuseerde ook het MVC-patroon aan de client-kant.

MVC - Model, weergave, controller

MVC-patroon staat voor Model View Controller-patroon.

  • Model

Het is het laagste niveau van de architectuur. Het is verantwoordelijk voor het bewaren en onderhouden van de applicatiegegevens. De gegevens worden tijdens de gehele levenscyclus van de pagina bewaard en soms zelfs tussen pagina's. Het model werkt zichzelf bij op basis van de instructies die zijn ontvangen van de controller.

  • Visie

Een weergave is de voorkant van de toepassing. Het is de presentatielaag van de architectuur die verantwoordelijk is voor het weergeven van de gegevens aan de gebruiker. Het bevat de volledige code voor de UI-pagina's in elke browser-compatibele taal, meestal HTML. De weergave wordt geactiveerd door de bijbehorende controller. Een weergave verzendt aanvragen naar de controller op basis van gebruikersinteractie met de toepassing. De controller regenereert vervolgens de weergave op basis van het antwoord van de server.

  • controleur

Een controller is het verwerkingsbrein achter het beeld en het model. Het neemt de beslissingen om het beeld en het model te genereren, regenereren of vernietigen. Alle bedrijfsactiviteiten en codelogica worden in de controller geschreven. (Sommige ontwikkelaars schrijven liever de bedrijfslogica in het model zelf). De controller is ook verantwoordelijk voor het verzenden van verzoeken naar de server en het ontvangen van een antwoord. Vervolgens worden de weergave en het model bijgewerkt op basis van de reactie. Kortom, de controller regelt alles.

De MVC-architectuur kan grafisch worden weergegeven via de onderstaande afbeelding.

MVC is robuust omdat het gebaseerd is op het softwareontwikkelingsprincipe van Separation of Concerns. Er zijn verschillende controllers die specifieke gegevenssets bedienen en respectieve weergaven en modellen beheren. De applicatielogica is dus gescheiden van de laag van de gebruikersinterface.

MVC in AngularJS

Dit ging allemaal over MVC en zijn principes. Hoe worden deze principes geïmplementeerd in AngularJS? Laten we het begrijpen.

  • Scope - Scope is het model dat de applicatiegegevens bevat. Scope-variabelen zijn gekoppeld aan de DOM en de variabele eigenschappen zijn toegankelijk via bindingen.
  • HTML met gegevensbinding - De weergave in AngularJS is geen gewone HTML. Het is een gegevensgebonden HTML. Gegevensbinding helpt bij het weergeven van dynamische gegevens in HTML-tags. Op deze manier werkt het model de DOM regelmatig bij.
  • ngController - De ngController-richtlijn is verantwoordelijk voor de samenwerking tussen model, weergave en bedrijfslogica. De controllerklasse die wordt gespecificeerd door de ngController-richtlijn bepaalt het bereik en de weergave.

Conceptueel overzicht

Oké, dus nu begrijpen we dat AngularJS is gebouwd op de MVC-architectuur. Is dat alles? Is er verder niets aan de hand? Natuurlijk is er.

Er zijn een paar belangrijke concepten die u moet begrijpen om het gedrag van AngularJS-toepassingen te begrijpen. Laten we ze begrijpen.

  • Sjablonen

Sjablonen zijn de HTML-elementen samen met AngularJS-specifieke elementen en attributen. De dynamiek in AngularJS-toepassingen wordt bereikt door de sjabloon te combineren met gegevens van het model en de controller.

  • richtlijnen

Richtlijnen zijn attributen of elementen die een herbruikbare DOM-component vertegenwoordigen. Richtlijnen manipuleren rechtstreeks de onderliggende HTML DOM om de dynamische weergave te maken. Hierdoor hoeft de ontwikkelaar zich geen zorgen te maken over native HTML-elementen en -kenmerken.

  • Tweezijdige gegevensbinding

AngularJS synchroniseert automatisch gegevens tussen het model en de weergave door gegevensbinding. Het model wordt beschouwd als een enkele bron van waarheid voor uw applicatiegegevens. Het zicht is altijd een projectie van het model. Zodra het model verandert, verandert het aanzicht en vice versa. Dit wordt tweewegbinding genoemd. Dit wordt bereikt door de sjabloon live in de browser te compileren.

  • routing

Omdat AngularJS-applicaties single-page-applicaties (SPA) zijn, wordt veel aandacht besteed aan routing tussen pagina's. AngularJS heeft een robuust routeringsmechanisme dat URL-overeenkomsten uitvoert uit de lijst met routes die zijn opgegeven in de router die aan het onderdeel is gekoppeld. Dit betekent dat wanneer een browser om een ​​URL vraagt, een bijbehorend onderliggende component wordt weergegeven in plaats van een hele pagina.

  • Diensten

Een controller is gekoppeld aan een weergave. Dit betekent dat het een goede gewoonte is om alleen die code in de controller te schrijven, wat logisch handig is voor zijn weergave. De view-onafhankelijke logica kan elders worden verplaatst, zodat deze ook door andere controllers kan worden hergebruikt.

Hier komen de Services in actie. Services scheiden de herbruikbare bedrijfslogica van view-specifieke logica. De view-specifieke logica bevindt zich dan in de specifieke controllers, terwijl de gemeenschappelijke bedrijfslogica wordt gedeeld door alle controllers.

Als algemene vuistregel wordt code voor toegang tot de backend-gegevens ook geschreven in services.

  • Afhankelijkheid injectie

Nu we de weergave-onafhankelijke logica naar een gedeelde locatie hebben verplaatst, hoe kunnen we de rechten voor toegang tot de gedeelde services beheren? Dit gebeurt via Dependency Injection (DI). Dependency Injection is een ontwerppatroon voor software dat handelt over hoe objecten worden gemaakt en hoe ze hun afhankelijkheden te pakken krijgen. Alles in AngularJS, van richtlijnen tot controllers tot services en vrijwel alles, wordt via DI aangesloten.

Leuk weetje van AngularJS Architecture

AngularJS werd AngularJS genoemd vanwege de hoekige haakjes in HTML-tags. Het project is ontworpen om HTML dynamischer en gegevensvriendelijker te maken, en daarom hebben de ontwikkelaars besloten om het te vernoemen naar de hoekige haken in HTML.

Conclusie - AngularJS Architecture

Het artikel behandelt alle belangrijke concepten van AngularJS-architectuur. Dit is een goed begin om de werking van verschillende elementen van uw AngularJS-toepassing te begrijpen. De volgende stap is het creëren van een volledig functionele AngularJS-applicatie met meerdere controllers die ook gegevens uit de backend haalt. Dit zou je een goede praktische oefening geven op de concepten van AngularJS.

Aanbevolen artikelen

Dit is een handleiding voor de AngularJS-architectuur. Hier bespreken we de architectuur, MVC in angularjs en Conceptual Overview. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -

  1. Carrière in AngularJS
  2. Vragen tijdens solliciteren bij AngularJS
  3. Wat is Backbone.js?
  4. Datamining-software

Categorie:

Software ontwikkeling