Wanneer we werken met AngularJS en we beginnen de documentatie te lezen, het eerste wat we zien is het woord DomeinDit zou in het Spaans vertaald kunnen worden als een toepassingsgebied, maar het gebruik binnen dit kader is veel breder.
Daarom moeten we begrijpen dat het echt de Domein en hoe het zich gedraagt in onze applicaties, op deze manier kunnen we een sprong maken tussen proberen te gebruiken AngularJS en gebruik het met basis, overtuiging en niet alleen door code te herhalen.
Het meest interessante is dat als AngularJS is volledig ingebouwd JavaScript, we kunnen de concepten van de taal nemen en deze toepassen bij de studie en het begrip van de raamwerktools, waardoor we een extra niveau van vaardigheden krijgen om de logica te ontwikkelen die we voor onze toepassingen denken
Vereisten
1- Om aan deze tutorial te voldoen, hebben we een webserver nodig zoals Wamp, of als we ons in omgevingen bevinden zoals Linux een configuratie Lamp Het zal voor ons voldoende zijn, het idee is om onze bestanden te kunnen dienen die bevatten AngularJS en niet zomaar een document openen HTML.
2- We moeten ook een rich text-editor hebben waarmee we de nodige code voor onze voorbeelden kunnen schrijven, dit kan zijn: Sublieme tekst of Kladblok ++.
3- Ten slotte moeten we toegang hebben tot internet om de opname van AngularJS via zijn CDN te gebruiken of het bestand hebben gedownload dat het raamwerk bevat om het lokaal te dienen.
Wat is het bereik?
Het is niets meer dan een eenvoudig object JavaScript die de mogelijkheid heeft om een sleutelwaardestructuur op te slaan, naast de mogelijkheid om eigenschappen op te slaan. Dit helpt ons enorm, want als we het vanuit dat oogpunt bekijken, kunnen we de basisconcepten van de programmeertaal toepassen
Hoe werkt het?AngularJS is verantwoordelijk voor het automatisch maken van dit object en het insluiten ervan in onze applicatie-uitvoering, vandaar de naam scope, omdat het ons in staat stelt om de waarden van de modellen te manipuleren en toegang te krijgen en ook als interface dient om met de weergave te communiceren. Deze structuur stelt ons in staat om de Domein binnen onze controllers en eigenschappen toevoegen, die we direct in de weergave kunnen aanroepen, en zo vervullen we een cyclus waarin alles is verbonden en gerelateerd binnen onze applicatie.
In de volgende afbeelding zien we hoe de schaal eruit ziet of de manier waarop: AngularJS genereert verschillende Scopes, hoewel ze allemaal afkomstig zijn van Domein van het element dat ze bevat, behalve de Wortelbereik die als eerste wordt gegenereerd. Natuurlijk, als er twee elementen op hetzelfde niveau binnen de rootscope zijn, zullen ze er allebei van overerven.
VERGROTEN
Hoe werkt het prototype?
In tegenstelling tot talen als Java, C ++ en anderen, JavaScript gaat anders om met het concept overerving, daarom moeten we leren wat het nut is van voorlopig ontwerp wat niets meer is dan een methode die bestaat binnen klassenconstructors waarmee we nieuwe eigenschappen in onze code kunnen toevoegen.
Dit ondanks het feit dat het iets typisch is voor JavaScript stelt ons in staat om iets meer te begrijpen hoe we bepaalde resultaten kunnen verkrijgen, en helpt ons ook te begrijpen hoe de Domein binnenin AngularJS.
In het volgende voorbeeld zullen we zien hoe we een klasse maken met bepaalde eigenschappen of attributen, en dan via voorlopig ontwerp We kunnen een extra eigenschap aan onze klasse toevoegen en dus door de instantie te maken, hebben we er toegang toe.
Het interessante is dat er een methode is die ons helpt te verifiëren of een attribuut typisch is voor de klasse, als deze methode een false waarde retourneert, dan weten we dat het een attribuut is dat het resultaat is van een erfenis voorlopig ontwerp. Laten we eens kijken naar de code die dit alles vertegenwoordigt:
DocumentLaten we nu eens kijken hoe op de console JavaScript krijgen we de resultaten die we zoeken:
We merken dan hoe de methode hasOWnProperty Het helpt ons om de originele attributen of eigenschappen van de klasse te identificeren of niet. Zo kunnen we begrijpen of we al dan niet een effectieve overerving hebben gecreëerd, omdat we ons kunnen realiseren hoe we de attribuutcapaciteit van een klasse uitbreiden.
BelangrijkDit type overerving door voorlopig ontwerp is wat van toepassing is AngularJS bij het maken van de verschillende Scopes van een document in een applicatie, waar het door de boom beweegt ZON waar eerst identificeert of de eigenschap bestaat ng-app, geloof op dat moment $ rootScope, en het vinden van een controller creëert een variabele $ bereik die voortvloeit uit de toepassing van de methode $ rootScope.new ().
En zo escaleert het naarmate het interne elementen in elkaar vindt, erft van de onmiddellijk vorige structuur, waarbij het zijn functionaliteiten neemt die zijn afgeleid van $ rootScope en zijn eigen functionaliteiten.
In het volgende voorbeeld hebben we een applicatie ontwikkeld waarin we twee controllers hebben, op deze manier zien we hoe door de overerving van domein de verschillende eigenschappen of attributen van hetzelfde worden geërfd, totdat het resulteert in een geneste structuur die toegang heeft tot de eigenschappen van de ouders en de functionaliteiten van de applicatie als zodanig kan uitbreiden. Laten we de code eens bekijken:
{{editors}} heeft boeken van: {{category}}
De meest populaire boeken van {{editors}} zijn:
- {{boek}}
Dit kan als een beetje vergezocht worden gezien, maar het is de beste manier om te begrijpen hoe de variabele $ bereik werkt binnen onze applicaties en kan dit dus binnen onze logica toepassen om het maximale uit de framework-tools te halen. Laten we in de volgende afbeelding zien hoe onze vorige aanvraag eruit ziet en hoe aan de uitgelegde punten is voldaan:
We zien dan hoe de lijst met boeken bij het object hoort Domein meer intern, maar omdat we het redactionele kenmerk niet definiëren, kunnen we het kenmerk gebruiken dat we definiëren in de bovenliggende controller, waardoor we tot de conclusie komen dat we het gebruik van voorlopig ontwerp door AngulaJS.
De kijker als geavanceerd concept
Er zijn momenten waarop we willen doorgaan en op de een of andere manier een bepaalde situatie willen bewaken, dit is waar het object binnenkomt. $ kijken, waardoor we precies kunnen doen wat we uitleggen.
Hoe werkt het?Door het toe te voegen als luisteraar van een element binnen onze applicatie, zal dit object elke keer dat er een verandering in is, worden geregistreerd. Zo kunnen wij iedere keer dat een door ons vastgesteld voorval zich voordoet voorwaarden stellen. Een voorbeeld kan zijn wanneer we een winkelwagentje bouwen, als de gebruiker meer dan één item toevoegt, kunnen we een bericht tonen, of als hij meerdere keren probeert te kopen, vragen we hem of hij een probleem heeft.
Dit lijkt op het eerste gezicht misschien iets heel geavanceerd, maar AngularJS neemt het dicht bij onze handen, zonder al te veel complicaties. Het object $ kijken Het kan niet alleen een specifieke waarde waarnemen, we kunnen het ook toewijzen om dit te doen met een verzameling, wat ons de mogelijkheid geeft om meerdere waarden tegelijkertijd in overweging te nemen en zo complexere resultaten te bereiken dan met het vorige formulier .
Hiermee zijn we klaar met deze tutorial, we hebben geleerd te begrijpen wat de Domein binnenin AngularJS en hiervoor hebben we vertrouwd op de meest abstracte concepten van JavaScript, waarmee wordt aangetoond dat deze taal ons alle tools geeft om banen te bereiken die zo geavanceerd zijn als hetzelfde raamwerk waar we het over hebben, maar dat als we de concepten ervan beheersen, we de tools die we gebruiken iets superieur kunnen maken.
Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
