Razumijevanje opsega u AngularJS -u

Kad radimo s AngularJS i počinjemo čitati dokumentaciju, prvo što vidimo je riječ OpsegTo bi se moglo prevesti na španjolski kao opseg, međutim upotreba u ovom okviru je mnogo šira.

Zato moramo shvatiti da je to doista Opseg i kako se ponaša u našim aplikacijama, na ovaj način možemo napraviti skok između pokušaja korištenja AngularJS i koristiti ga s osnovom, uvjerenjem, a ne samo ponavljanjem koda.

Najzanimljivije je to što kao AngularJS je potpuno ugrađen JavaScript, možemo uzeti koncepte jezika i primijeniti ih u proučavanju i razumijevanju okvirnih alata, dajući nam tako dodatnu razinu vještina kako bismo mogli razviti logiku koju mislimo za naše aplikacije

Zahtjevi

1- Da bismo ispunili ovaj vodič, potreban nam je web poslužitelj poput Wamp, ili ako se nalazimo u okruženjima poput Linux konfiguraciju Svjetiljka Bit će nam dovoljno, ideja je moći poslužiti naše datoteke koje sadrže AngularJS a ne samo otvoriti dokument HTML.

2- Moramo imati i bogati uređivač teksta koji nam omogućuje pisanje potrebnog koda za naše primjere, to može biti Uzvišen tekst ili Notepad ++.

3- Konačno, moramo imati pristup internetu kako bismo koristili uključivanje AngularJS -a putem njegovog CDN -a ili smo preuzeli datoteku koja sadrži okvir za lokalno posluživanje.

Što je opseg?

To nije ništa drugo do jednostavan objekt JavaScript koja ima mogućnost spremanja strukture ključnih vrijednosti, osim što može pohraniti svojstva. To nam puno pomaže jer, ako to vidimo s tog gledišta, možemo primijeniti osnovne koncepte programskog jezika

Kako radi?AngularJS odgovoran je za automatsko stvaranje ovog objekta i njegovo ugrađivanje u izvršenje naše aplikacije, stoga mu je naziv opseg, jer nam omogućuje manipulaciju i pristup vrijednostima modela, a također služi i kao sučelje za komunikaciju s prikazom. Ova struktura nam omogućuje korištenje Opseg unutar naših kontrolera i dodajemo svojstva, koja možemo nazvati izravno u prikazu, i na taj način ispunjavamo ciklus u kojem je sve povezano i povezano unutar naše aplikacije.

Na sljedećoj slici vidimo kakva je ljestvica ili način na koji AngularJS stvara drugačije Opsezi, iako svi proizlaze iz Opseg elementa koji ih sadrži osim Root Scope koji se prvi generira. Naravno, ako postoje dva elementa na istoj razini unutar korijenskog opsega, oba će naslijediti iz njega.

POVEĆAJTE

Kako prototip funkcionira?

Za razliku od jezika poput Java, C ++ i drugi, JavaScript drukčije postupa s pojmom nasljedstva, zato moramo naučiti čemu služi prototip što nije ništa drugo do metoda koja postoji unutar konstruktora klasa koja nam omogućuje dodavanje novih svojstava unutar našeg koda.

To unatoč činjenici da je to nešto tipično za JavaScript omogućuje nam da malo bolje razumijemo kako možemo postići neke rezultate, osim što nam pomaže razumjeti kako Opseg unutar AngularJS.

U sljedećem primjeru vidjet ćemo kako stvaramo klasu s određenim svojstvima ili atributima, a zatim kroz prototip Mi možemo dodati dodatno svojstvo u našu klasu i tako učiniti instancu da joj možemo pristupiti.

Zanimljivo je da postoji metoda koja nam pomaže provjeriti je li neki atribut tipičan za klasu, ako ova metoda vrati lažnu vrijednost, znat ćemo da je to atribut koji proizlazi iz nasljedstva s prototip. Pogledajmo kod koji predstavlja sve ovo:

 Dokument 

Sada da vidimo kako na konzoli JavaScript dobivamo rezultate koje tražimo:

Tada primjećujemo kako se metoda hasOWnProperty Pomaže nam identificirati izvorne atribute ili svojstva klase ili ne. Tako možemo razumjeti jesmo li stvorili učinkovito nasljedstvo ili ne, budući da možemo shvatiti kako proširujemo sposobnosti atributa klase.

VažnoOva vrsta nasljeđivanja kroz prototip je ono što vrijedi AngularJS pri stvaranju različitih Opsezi dokumenta u aplikaciji, gdje se kreće kroz stablo SUNCE gdje prvo identificira postoji li svojstvo ng-aplikacija, u tom trenutku vjerujte $ rootScope, tada pronalaženje kontrolera stvara varijablu $ opseg što proizlazi iz primjene metode $ rootScope.new ().
I tako eskalira dok pronalazi unutarnje elemente jedan u drugom, nasljeđujući iz neposredno prethodne strukture, uzimajući svoje funkcionalnosti izvedene iz $ rootScope i vlastite funkcionalnosti.

U sljedećem primjeru razvili smo aplikaciju u kojoj imamo dva kontrolera, na ovaj način vidimo kako kroz nasljeđivanje opseg različita svojstva ili atributi istih se nasljeđuju, sve dok ne rezultira ugniježđenom strukturom koja može pristupiti svojstvima roditelja i proširiti funkcionalnosti aplikacije kao takve. Pogledajmo kod:

 {{urednici}} ima knjige iz: {{kategorija}}
Najpopularnije knjige autora {{editors}} su:

 {{knjiga}}

Ovdje nam primjer pokazuje ono što smo gore objasnili, kada je u okviru Drugi kontroler Editors nazivamo svojstvom i kad ga ispišemo vidimo da nosi dodijeljenu vrijednost roditeljskog elementa Prvi kontroler. Na kraju dodajemo atribut ili knjige svojstava koje nije bilo u Opseg root i uspjeli smo ponoviti kroz $ opseg dotičnog kontrolora. Još jedan zanimljiv aspekt je da svojstva Opseg root, iako postoje, nismo ih dozivali unutar opsega u kojem im možemo pristupiti, pa kad vidimo primjer nećemo ih vidjeti na zaslonu preglednika

Ovo se može smatrati pomalo lažnim, ali to je najbolji način da se shvati kako je varijabla $ opseg funkcionira unutar naših aplikacija i na taj način to može primijeniti u okviru svoje logike kako bi izvukli maksimum iz alata okvira. Pogledajmo na sljedećoj slici kako izgleda naša prijašnja aplikacija i kako su ispunjene objašnjene točke:

Tada primjećujemo kako popis knjiga pripada objektu Opseg više interno, međutim, budući da ne definiramo urednički atribut, možemo koristiti onaj koji definiramo u roditeljskom kontroleru, donoseći zaključak da smo predvidjeli upotrebu prototip po AngulaJS.

Promatrač kao napredni koncept

Postoje slučajevi kada želimo nastaviti i na neki način nadzirati određenu situaciju, tu dolazi objekt. $ sat, što nam omogućuje da radimo upravo ono što objašnjavamo.

Kako radi?Dodavanjem kao slušatelj nekog elementa unutar naše aplikacije, ovaj objekt će se registrirati svaki put kad dođe do njegove promjene. Na ovaj način možemo primijeniti uvjete svaki put kada se dogodi događaj koji utvrdimo. Primjer bi mogao biti kada gradimo košaricu za kupnju, ako korisnik doda više od jednog artikla možemo prikazati poruku ili ako pokuša kupiti više puta pitamo ga ima li problema.

Ovo bi se na prvi pogled moglo činiti kao nešto vrlo napredno, ali AngularJS uzima nam ga u ruke, bez velikih komplikacija. Predmet $ sat Ne samo da može promatrati određenu vrijednost, već mu to možemo dodijeliti i zbirkom, što nam daje mogućnost da se u obzir uzmu više vrijednosti istovremeno, i na taj način postignu složeniji rezultati nego u prethodnom obliku .

Ovim smo završili s ovim vodičem, naučili smo razumjeti što Opseg unutar AngularJS a za to smo se oslonili na najapstraktnije koncepte JavaScript, pokazujući tako da nam ovaj jezik daje sve alate za postizanje naprednih poslova kao i isti okvir o kojem govorimo, ali da ako ovladamo njegovim konceptima možemo učiniti alate koje koristimo nečim superiornijim.

Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod