Înțelegerea domeniului de aplicare în AngularJS

Când lucrăm cu AngularJS și începem să citim documentația, primul lucru pe care îl vedem este cuvântul Domeniul de aplicareAcest lucru ar putea fi tradus în spaniolă ca domeniu de aplicare, totuși utilizarea în acest cadru este mult mai largă.

De aceea trebuie să înțelegem că este într-adevăr Domeniul de aplicare și cum se comportă în aplicațiile noastre, în acest fel putem face un salt între încercarea de utilizare AngularJS și utilizați-l cu bază, convingere și nu doar prin repetarea codului.

Cel mai interesant lucru este că așa AngularJS este complet încorporat JavaScript, putem lua conceptele limbajului și le putem aplica în studiul și înțelegerea instrumentelor-cadru, oferindu-ne astfel un nivel suplimentar de abilități pentru a putea dezvolta logica pe care o credem pentru aplicațiile noastre

Cerințe

1- Pentru a îndeplini acest tutorial avem nevoie de un server web de genul Wamp, sau dacă suntem în medii precum Linux o configurație Lampă Va fi suficient pentru noi, ideea este să putem servi fișierele noastre care le încorporează AngularJS și nu doar să deschideți un document HTML.

2- Trebuie să avem și un editor de text bogat care să ne permită să scriem codul necesar pentru exemplele noastre, acesta poate fi Text sublim sau Notepad ++.

3- În cele din urmă, trebuie să avem acces la Internet pentru a utiliza includerea AngularJS prin CDN-ul său sau pentru a descărca fișierul care conține cadrul pentru a-l servi local.

Care este domeniul de aplicare?

Nu este altceva decât un simplu obiect JavaScript care are capacitatea de a stoca o structură cheie de valori, pe lângă faptul că poate stoca proprietăți. Acest lucru ne ajută foarte mult, deoarece dacă îl vedem din acel punct de vedere, putem aplica conceptele de bază ale limbajului de programare

Cum functioneazã?AngularJS este responsabil pentru crearea automată a acestui obiect și încorporarea acestuia în execuția aplicației noastre, de aceea numele său este domeniul de aplicare, deoarece ne permite să manipulăm și să accesăm valorile modelelor și, de asemenea, să servim ca o interfață pentru a comunica cu vizualizarea. Această structură ne permite să folosim Domeniul de aplicare în interiorul controlerelor noastre și adăugăm proprietăți, pe care le putem apela direct în vizualizare, și astfel îndeplinim un ciclu în care totul este conectat și legat în cadrul aplicației noastre.

În imaginea următoare vedem cum este scala sau modul în care AngularJS generează diferite Domenii de aplicare, deși toate derivă din Domeniul de aplicare a elementului care le conține, cu excepția Domeniul de aplicare al rădăcinii care este primul generat. Desigur, dacă există două elemente la același nivel în domeniul de aplicare rădăcină, ambele vor moșteni din acesta.

MARI

Cum funcționează prototipul?

Spre deosebire de limbi ca Java, C ++ si altii, JavaScript gestionează diferit conceptul de moștenire, de aceea trebuie să învățăm la ce folosește prototip care nu este altceva decât o metodă care există în cadrul constructorilor de clase care ne permite să adăugăm noi proprietăți în codul nostru.

Acest lucru în ciuda faptului că este ceva tipic JavaScript ne permite să înțelegem un pic mai mult cum putem obține unele rezultate, pe lângă faptul că ne ajută să înțelegem cum Domeniul de aplicare în AngularJS.

În exemplul următor vom vedea cum creăm o clasă cu anumite proprietăți sau atribute, apoi prin prototip Putem adăuga o proprietate suplimentară la clasa noastră și astfel, făcând instanța o putem accesa.

Interesant este că există o metodă care ne ajută să verificăm dacă un atribut este tipic clasei, dacă această metodă returnează o valoare falsă atunci vom ști că este un atribut rezultat dintr-o moștenire cu prototip. Să vedem codul care reprezintă toate acestea:

 Document 

Acum să vedem cum pe consolă JavaScript obținem rezultatele pe care le căutăm:

Observăm apoi modul în care metoda hasOWnProperty Ne ajută să identificăm atributele sau proprietățile originale ale clasei sau nu. Astfel putem înțelege dacă am creat sau nu o moștenire eficientă, deoarece putem realiza cum extindem capacitatea de atribut a unei clase.

ImportantAcest tip de moștenire prin prototip este ceea ce se aplică AngularJS la crearea diferitelor Domenii de aplicare a unui document dintr-o aplicație, unde se deplasează prin copac SOARE unde identifică mai întâi dacă există proprietatea ng-app, în acel moment credeți $ rootScope, apoi găsirea unui controler creează o variabilă $ scop care derivă din aplicarea metodei $ rootScope.new ().
Și astfel escaladează pe măsură ce găsește elemente interne unul în celălalt, moștenind din structura imediat anterioară, luând funcționalitățile sale derivate din $ rootScope și propriile sale funcționalități.

În exemplul următor am dezvoltat o aplicație în care avem doi controleri, în acest fel vedem cum prin moștenirea scop diferitele proprietăți sau atribute ale acestora sunt moștenite, până când rezultă o structură imbricată care poate accesa proprietățile părinților și extinde funcționalitățile aplicației ca atare. Să vedem codul:

 {{editori}} are cărți de la: {{categorie}}
Cele mai populare cărți de la {{editori}} sunt:

 {{carte}}

Aici exemplul ne arată ce am explicat mai sus, când se află în sfera de aplicare a Al doilea controler Numim proprietatea editorilor și când o imprimăm vedem că poartă valoarea atribuită a elementului părinte Primul controlor. În cele din urmă adăugăm un atribut sau cărți de proprietăți care nu se aflau în Domeniul de aplicare rădăcină și am putut să iterăm prin $ scop controlorului în cauză. Un alt aspect interesant este că proprietățile Domeniul de aplicare root, deși există, nu le-am invocat într-un domeniu în care le putem accesa, așa că, atunci când vom vedea exemplul, nu le vom vedea pe ecranul browserului

Acest lucru poate fi văzut ca un pic îndepărtat, dar este cel mai bun mod de a înțelege modul în care variabila $ scop funcționează în cadrul aplicațiilor noastre și astfel putem aplica acest lucru în cadrul logicii noastre pentru a profita la maximum de instrumentele cadru. Să vedem în imaginea următoare cum arată aplicația noastră anterioară și cum au fost îndeplinite punctele explicate:

Observăm apoi modul în care lista cărților aparține obiectului Domeniul de aplicare mai intern, totuși, deoarece nu definim atributul editorial, îl putem folosi pe cel pe care îl definim în controlerul părinte, ajungând la concluzia că am anticipat utilizarea prototip de AngulaJS.

Observatorul ca un concept avansat

Există momente când vrem să continuăm și să monitorizăm într-un fel o anumită situație, aici intră obiectul. $ ceas, ceea ce ne permite să facem exact ceea ce explicăm.

Cum functioneazã?Prin adăugarea acestuia ca ascultător a unui anumit element din aplicația noastră, acest obiect se va înregistra de fiecare dată când există o modificare în acesta. În acest fel putem aplica condiții de fiecare dată când are loc un eveniment pe care îl determinăm. Un exemplu ar putea fi atunci când construim un coș de cumpărături, dacă utilizatorul adaugă mai multe articole putem afișa un mesaj sau dacă încearcă să cumpere de mai multe ori îl întrebăm dacă are o problemă.

Acest lucru la prima vedere ar putea părea ceva foarte avansat, dar AngularJS o ia aproape de mâinile noastre, fără a face prea multe complicații. Obiectul $ ceas Nu numai că poate observa o anumită valoare, ci o putem atribui să o facă și cu o colecție, ceea ce ne oferă posibilitatea de a lua în considerare mai multe valori în același timp și, astfel, de a obține rezultate mai complexe decât cu forma anterioară. .

Cu aceasta am terminat cu acest tutorial, am învățat să înțelegem ce Domeniul de aplicare în AngularJS și pentru aceasta ne-am bazat pe cele mai abstracte concepte ale JavaScript, demonstrând astfel că acest limbaj ne oferă toate instrumentele pentru a realiza locuri de muncă la fel de avansate ca același cadru despre care vorbim, dar că, dacă îi stăpânim conceptele, putem face instrumentele folosite de ceva superior.

V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv