Forstå omfanget i AngularJS

Når vi jobber med AngularJS og vi begynner å lese dokumentasjonen, det første vi ser er ordet omfangDette kan oversettes til spansk som et omfang, men bruken innenfor dette rammeverket er mye bredere.

Det er derfor vi må forstå at det virkelig er omfang og hvordan den oppfører seg i applikasjonene våre, på denne måten kan vi ta et sprang mellom å prøve å bruke AngularJS og bruk den med base, overbevisning og ikke bare ved å gjenta koden.

Det mest interessante er at som AngularJS er helt innebygd JavaScript, kan vi ta språkbegrepene og anvende dem i studiet og forståelsen av rammeverktøyene, og dermed gi oss et ytterligere ferdighetsnivå for å kunne utvikle logikken vi tenker for våre applikasjoner

Krav


1- For å oppfylle denne opplæringen trenger vi en webserver som Wamp, eller hvis vi er i miljøer som Linux en konfigurasjon Lampe Det vil være nok for oss, tanken er å kunne betjene filene våre som inneholder AngularJS og ikke bare åpne et dokument HTML.

2- Vi må også ha en rik tekstredigerer som lar oss skrive nødvendig kode for eksemplene våre, dette kan være Sublim tekst eller Notisblokk ++.

3- Til slutt må vi ha tilgang til Internett for å bruke inkluderingen av AngularJS gjennom CDN eller ha lastet ned filen som inneholder rammen for å betjene den lokalt.

Hva er omfanget?


Det er ikke annet enn et enkelt objekt JavaScript som har muligheten til å lagre en nøkkelverdistruktur, i tillegg til å kunne lagre eiendommer. Dette hjelper oss mye siden vi kan anvende de grunnleggende begrepene i programmeringsspråket hvis vi ser det fra dette synspunktet

Hvordan virker det?AngularJS er ansvarlig for å lage dette objektet automatisk og bygge det inn i applikasjonsutførelsen, derav navnet er omfang, siden det lar oss manipulere og få tilgang til modellens verdier og også fungere som et grensesnitt for å kommunisere med utsikten. Denne strukturen er det som lar oss bruke omfang inne i kontrollerne våre og legge til eiendommer, som vi kan kalle direkte i visningen, og dermed oppfyller vi en syklus der alt er koblet og relatert i applikasjonen vår.

I det følgende bildet ser vi hvordan skalaen er eller måten den er på AngularJS genererer annerledes Omfang, selv om alle stammer fra omfang av elementet som inneholder dem bortsett fra Root Scope som er den første som ble generert. Selvfølgelig, hvis det er to elementer på samme nivå innenfor rotomfanget, vil de begge arve fra det.

FORSTØRRE

Hvordan fungerer prototypen?


I motsetning til språk som Java, C ++ og andre, JavaScript håndterer arvebegrepet annerledes, det er derfor vi må lære hva som er bruk av prototype som ikke er mer enn en metode som finnes i klassekonstruktører som lar oss legge til nye egenskaper i koden vår.

Dette til tross for at det er noe typisk for JavaScript lar oss forstå litt mer hvordan vi kan oppnå noen resultater, i tillegg til å hjelpe oss å forstå hvordan omfang innenfor AngularJS.

I det følgende eksemplet vil vi se hvordan vi lager en klasse med bestemte egenskaper eller attributter, deretter gjennom prototype Vi kan legge til en ekstra eiendom i klassen vår, og dermed kan vi få tilgang til den ved å lage forekomsten.

Det interessante er at det er en metode som hjelper oss å kontrollere om noen attributter er typiske for klassen. Hvis denne metoden returnerer en falsk verdi, vil vi vite at det er et attributt som skyldes en arv med prototype. La oss se koden som representerer alt dette:

 Dokument 
La oss nå se hvordan det er på konsollen JavaScript vi får resultatene vi leter etter:

Vi merker deretter hvordan metoden hasOWnProperty Det hjelper oss med å identifisere de opprinnelige attributtene eller egenskapene til klassen eller ikke. Dermed kan vi forstå om vi har skapt en effektiv arv eller ikke, siden vi kan innse hvordan vi utvider attributtkapasiteten til en klasse.

ViktigDenne typen arv gjennom prototype er det som gjelder AngularJS når du lager det forskjellige Omfang av et dokument i et program, der det beveger seg gjennom treet SOL hvor først identifiseres om eiendommen eksisterer ng-app, tror i det øyeblikket $ rootScope, og deretter finner en kontroller en variabel $ omfang som stammer fra anvendelsen av metoden $ rootScope.new ().
Og slik eskalerer den når den finner interne elementer i hverandre, arver fra den umiddelbart forrige strukturen, og tar funksjonalitetene fra $ rootScope og sine egne funksjoner.

I det følgende eksemplet har vi utviklet en applikasjon der vi har to kontrollere, på denne måten ser vi hvordan gjennom arv av omfang de forskjellige egenskapene eller attributtene til det samme arves, til det resulterer i en nestet struktur som kan få tilgang til eiendommen til foreldrene og utvide funksjonaliteten til applikasjonen som sådan. La oss se koden:

 {{redaktører}} har bøker fra: {{category}}

De mest populære bøkene fra {{redaktører}} er:

  • {{bok}}
Her viser eksemplet oss hva vi forklarte ovenfor, når det er innenfor omfanget av Andre kontroller Vi kaller redaktørene eiendom, og når vi skriver det ut, ser vi at den bærer den tildelte verdien til det overordnede elementet Første kontroller. Til slutt legger vi til et attributt eller eiendomsbøker som ikke var i omfang root, og vi var i stand til å iterere gjennom $ omfang av den aktuelle kontrolleren. Et annet interessant aspekt er at egenskapene til omfang root, selv om de eksisterer, har vi ikke påberopt dem innenfor et område der vi kan få tilgang til dem, så når vi ser eksemplet, vil vi ikke se dem på nettleserskjermen

Dette kan sees på som litt langt hentet, men det er den beste måten å forstå hvordan variabelen $ omfang fungerer i applikasjonene våre og dermed kunne bruke dette i logikken vår for å få mest mulig ut av rammeverktøyene. La oss se på bildet nedenfor hvordan vår forrige søknad ser ut og hvordan de forklarte punktene er oppfylt:

Vi merker deretter hvordan listen over bøker tilhører objektet omfang mer intern, men ettersom vi ikke definerer det redaksjonelle attributtet, kan vi bruke det vi definerer i den overordnede kontrolleren, og nå den konklusjonen at vi forventet bruk av prototype av AngulaJS.

Seeren som et avansert konsept


Det er tider når vi ønsker å fortsette og på en eller annen måte overvåke en bestemt situasjon, det er her objektet kommer inn. $ se, som lar oss gjøre akkurat det vi forklarer.

Hvordan virker det?Ved å legge det til som lytteren av et element i applikasjonen vår, vil dette objektet registrere hver gang det er en endring i det. På denne måten kan vi anvende vilkår hver gang en hendelse som vi bestemmer skjer. Et eksempel kan være når vi skal bygge en handlevogn, hvis brukeren legger til mer enn én vare kan vi vise en melding, eller hvis han prøver å kjøpe flere ganger spør vi ham om han har et problem.

Dette ved første øyekast kan virke som noe veldig avansert, men AngularJS tar det nær hendene våre, uten å gjøre mye komplikasjon. Objektet $ se Den kan ikke bare observere en bestemt verdi, vi kan også tilordne den til å gjøre det med en samling, som gir oss muligheten til å ta flere verdier i betraktning samtidig, og dermed oppnå mer komplekse resultater enn med forrige skjema .

Med dette har vi fullført med denne opplæringen, vi har lært å forstå hva omfang innenfor AngularJS og for dette har vi stolt på de mest abstrakte begrepene JavaScriptog demonstrerer dermed at dette språket gir oss alle verktøyene for å oppnå jobber like avansert som det samme rammeverket vi snakker om, men at hvis vi mestrer konseptene, kan vi gjøre verktøyene vi bruker noe overlegen.

Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng

Du vil bidra til utvikling av området, dele siden med vennene dine

wave wave wave wave wave