Forstå omfanget i AngularJS

Når vi arbejder med VinkelJS og vi begynder at læse dokumentationen, det første vi ser er ordet AnvendelsesområdeDette kunne oversættes til spansk som et omfang, men anvendelsen inden for denne ramme er meget bredere.

Derfor skal vi forstå, at det virkelig er Anvendelsesområde og hvordan det opfører sig i vores applikationer, på denne måde kan vi tage et spring mellem at prøve at bruge VinkelJS og brug den med base, overbevisning og ikke kun ved at gentage kode.

Det mest interessante er, at som VinkelJS er fuldstændig indbygget JavaScript, vi kan tage sprogets begreber og anvende dem i studiet og forståelsen af ​​rammeværktøjerne og dermed give os et yderligere niveau af færdigheder for at kunne udvikle den logik, vi tænker for vores applikationer

Krav

1- For at kunne udføre denne tutorial har vi brug for en webserver som Wamp, eller hvis vi er i miljøer som Linux en konfiguration Lampe Det vil være nok for os, tanken er at kunne betjene vores filer, der inkorporerer VinkelJS og ikke bare åbne et dokument HTML.

2- Vi skal også have en rich text editor, der giver os mulighed for at skrive den nødvendige kode til vores eksempler, dette kan være Sublim tekst eller Notesblok ++.

3- Endelig skal vi have adgang til Internettet for at bruge optagelsen af ​​AngularJS via dets CDN eller have downloadet den fil, der indeholder rammerne til at betjene den lokalt.

Hvad er omfanget?

Det er intet mere end et simpelt objekt JavaScript der har mulighed for at gemme en nøgleværdistruktur, udover at kunne lagre ejendomme. Dette hjælper os meget, da hvis vi ser det fra dette synspunkt, kan vi anvende de grundlæggende begreber i programmeringssproget

Hvordan virker det?VinkelJS er ansvarlig for at oprette dette objekt automatisk og integrere det i vores applikationsudførelse, derfor er dets navn omfang, da det giver os mulighed for at manipulere og få adgang til værdierne for modellerne og også fungere som en grænseflade til at kommunikere med udsigten. Denne struktur er det, der giver os mulighed for at bruge Anvendelsesområde inde i vores controllere og tilføje egenskaber, som vi kan kalde direkte i visningen, og dermed opfylder vi en cyklus, hvor alt er forbundet og relateret inden for vores applikation.

I det følgende billede ser vi, hvordan skalaen er eller måden VinkelJS genererer anderledes Anvendelsesområder, selvom alle stammer fra Anvendelsesområde af elementet, der indeholder dem bortset fra Rodens omfang som er den første der genereres. Selvfølgelig, hvis der er to elementer på samme niveau inden for rodomfanget, arver de begge fra det.

FORSTØRRE

Hvordan fungerer prototypen?

I modsætning til sprog som Java, C ++ og andre, JavaScript håndterer arvebegrebet forskelligt, derfor skal vi lære, hvad det er, der bruges til prototype hvilket ikke er mere end en metode, der findes inden for klassekonstruktører, der giver os mulighed for at tilføje nye egenskaber inden for vores kode.

Dette på trods af at det er noget typisk for JavaScript giver os mulighed for at forstå lidt mere, hvordan vi kan opnå nogle resultater, ud over at hjælpe os med at forstå, hvordan Anvendelsesområde inden for VinkelJS.

I det følgende eksempel vil vi se, hvordan vi opretter en klasse med bestemte egenskaber eller attributter, derefter igennem prototype Vi kan tilføje en ekstra ejendom til vores klasse og dermed ved at lave instansen kan vi få adgang til den.

Det interessante er, at der er en metode, der hjælper os med at kontrollere, om en attribut er typisk for klassen, hvis denne metode returnerer en falsk værdi, vil vi vide, at det er en attribut, der stammer fra en arv med prototype. Lad os se koden, der repræsenterer alt dette:

 Dokument 

Lad os nu se hvordan på konsollen JavaScript vi får de resultater, vi leder efter:

Vi bemærker derefter, hvordan metoden hasOWnProperty Det hjælper os med at identificere de originale attributter eller egenskaber for klassen eller ej. Således kan vi forstå, om vi har skabt en effektiv arv eller ej, da vi kan indse, hvordan vi udvider attributkapaciteten for en klasse.

VigtigDenne form for arv igennem prototype er det der gælder VinkelJS når man opretter det forskellige Anvendelsesområder af et dokument i en applikation, hvor det bevæger sig gennem træet SOL hvor først identificeres, om ejendommen findes ng-app, i det øjeblik tro $ rootScope, så finder en controller en variabel $ omfang der stammer fra anvendelsen af ​​metoden $ rootScope.new ().
Og så eskalerer det, da det finder interne elementer det ene inden i det andet, arver fra den umiddelbart tidligere struktur og tager dets funktionaliteter afledt af $ rootScope og dens egne funktioner.

I det følgende eksempel har vi udviklet en applikation, hvor vi har to controllere, på denne måde ser vi, hvordan vi gennem arv fra omfang de forskellige egenskaber eller attributter af samme arves, indtil det resulterer i en indlejret struktur, der kan få adgang til forældrenes egenskaber og udvide applikationens funktionaliteter som sådan. Lad os se koden:

 {{redaktører}} har bøger fra: {{category}}
De mest populære bøger fra {{redaktører}} er:

 {{Bestil}}

Her viser eksemplet os, hvad vi forklarede ovenfor, inden for rammerne af Anden controller Vi kalder redaktionen ejendom, og når vi udskriver den, ser vi, at den bærer den tildelte værdi af det overordnede element Første controller. Endelig tilføjer vi en attribut eller ejendomsbøger, der ikke var i Anvendelsesområde rod, og vi var i stand til at gentage gennem $ omfang af den pågældende controller. Et andet interessant aspekt er, at egenskaberne ved Anvendelsesområde root, selvom de findes, har vi ikke påberåbt dem inden for et omfang, hvor vi kan få adgang til dem, så når vi ser eksemplet, vil vi ikke se dem på browserskærmen

Dette kan ses som en smule langt ude, men det er den bedste måde at forstå, hvordan variablen $ omfang fungerer inden for vores applikationer og dermed kunne anvende dette inden for vores logik for at få mest muligt ud af rammeværktøjerne. Lad os i det følgende billede se, hvordan vores tidligere ansøgning ser ud, og hvordan de forklarede punkter er blevet opfyldt:

Vi bemærker derefter, hvordan listen over bøger tilhører objektet Anvendelsesområde mere intern, men da vi ikke definerer den redaktionelle attribut, kan vi bruge den, vi definerer i den overordnede controller, og nå til den konklusion, at vi forventede brugen af prototype ved AngulaJS.

Watcheren som et avanceret koncept

Der er tidspunkter, hvor vi vil fortsætte og på en eller anden måde overvåge en bestemt situation, det er her, objektet kommer ind. $ ur, som giver os mulighed for at gøre præcis, hvad vi forklarer.

Hvordan virker det?Ved at tilføje det som lytter af et eller andet element i vores applikation, vil dette objekt registreres hver gang der er en ændring i det. På denne måde kan vi anvende betingelser hver gang en begivenhed, som vi bestemmer, opstår. Et eksempel kan være, når vi bygger en indkøbskurv, hvis brugeren tilføjer mere end én vare, kan vi vise en besked, eller hvis han prøver at købe flere gange, spørger vi ham, om han har et problem.

Dette ved første øjekast kan virke som noget meget avanceret, men VinkelJS tager det tæt på vores hænder, uden at gøre meget komplikationer. Objektet $ ur Ikke alene kan den observere en bestemt værdi, vi kan også tildele den til at gøre det med en samling, som giver os mulighed for at tage flere værdier i betragtning på samme tid og dermed opnå mere komplekse resultater end med den tidligere form .

Med dette er vi færdige med denne vejledning, vi har lært at forstå, hvad Anvendelsesområde inden for VinkelJS og for dette har vi stolet på de mest abstrakte begreber om JavaScriptog demonstrerer således, at dette sprog giver os alle værktøjer til at opnå job lige så avanceret som de samme rammer, vi taler om, men at hvis vi mestrer dets begreber, kan vi gøre værktøjerne, vi bruger noget overlegen.

Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt