Quando lavoriamo con AngularJS e iniziamo a leggere la documentazione, la prima cosa che vediamo è la parola ScopoQuesto potrebbe essere tradotto in spagnolo come ambito, tuttavia l'uso all'interno di questo quadro è molto più ampio.
Ecco perché dobbiamo capire che è davvero il Scopo e come si comporta nelle nostre applicazioni, in questo modo possiamo fare un salto tra il tentativo di usare AngularJS e usalo con base, convinzione e non solo ripetendo il codice.
La cosa più interessante è che come AngularJS è completamente integrato JavaScript, possiamo prendere i concetti del linguaggio e applicarli nello studio e nella comprensione degli strumenti del framework, dandoci così un ulteriore livello di competenze per poter sviluppare la logica che pensiamo per le nostre applicazioni
Requisiti
1- Per realizzare questo tutorial abbiamo bisogno di un server web come Wamp, o se siamo in ambienti come Linux una configurazione Lampada Ci basterà, l'idea è quella di poter servire i nostri file che incorporano AngularJS e non solo aprire un documento HTML.
2- Dobbiamo anche avere un editor di testo ricco che ci permetta di scrivere il codice necessario per i nostri esempi, questo può essere Testo sublime o Blocco note ++.
3- Infine, dobbiamo avere accesso a Internet per utilizzare l'inclusione di AngularJS tramite il suo CDN o aver scaricato il file che contiene il framework per servirlo localmente.
Qual è l'ambito?
Non è altro che un semplice oggetto JavaScript che ha la capacità di memorizzare una struttura di valori chiave, oltre ad essere in grado di memorizzare proprietà. Questo ci aiuta molto poiché se lo vediamo da quel punto di vista possiamo applicare i concetti base del linguaggio di programmazione
Come funziona?AngularJS è responsabile della creazione automatica di questo oggetto e dell'incorporamento all'interno della nostra esecuzione dell'applicazione, quindi il suo nome è scope, poiché ci consente di manipolare e accedere ai valori dei modelli e funge anche da interfaccia per comunicare con la vista. Questa struttura è ciò che ci permette di utilizzare il Scopo all'interno dei nostri controller e aggiungiamo proprietà, che possiamo chiamare direttamente all'interno della vista, e quindi compiamo un ciclo in cui tutto è connesso e correlato all'interno della nostra applicazione.
Nell'immagine seguente vediamo com'è la scala o il modo in cui AngularJS sta generando diverso ambiti, sebbene tutti derivino da Scopo dell'elemento che li contiene ad eccezione del Ambito radice che è il primo ad essere generato. Ovviamente, se ci sono due elementi allo stesso livello all'interno dell'ambito radice, entrambi erediteranno da esso.
INGRANDIRE
Come funziona il prototipo?
A differenza di lingue come Giava, C++ e altri, JavaScript gestisce il concetto di ereditarietà in modo diverso, ecco perché dobbiamo imparare a cosa serve prototipo che non è altro che un metodo che esiste all'interno dei costruttori di classi che ci consente di aggiungere nuove proprietà all'interno del nostro codice.
Questo nonostante sia qualcosa di tipico di JavaScript ci permette di capire un po' di più come possiamo ottenere dei risultati, oltre ad aiutarci a capire come il Scopo entro AngularJS.
Nell'esempio seguente vedremo come creiamo una classe con particolari proprietà o attributi, quindi attraverso prototipo Possiamo aggiungere una proprietà aggiuntiva alla nostra classe e quindi creando l'istanza possiamo accedervi.
La cosa interessante è che esiste un metodo che ci aiuta a verificare se qualche attributo è tipico della classe, se questo metodo restituisce un valore falso allora sapremo che è un attributo derivante da un'ereditarietà con prototipo. Vediamo il codice che rappresenta tutto questo:
DocumentoOra vediamo come sulla console JavaScript otteniamo i risultati che cerchiamo:
Notiamo poi come il metodo possiedeproprietà Ci aiuta a identificare gli attributi o le proprietà originali della classe o meno. Quindi possiamo capire se abbiamo creato o meno un'eredità effettiva, poiché possiamo realizzare come stiamo estendendo la capacità di attributo di una classe.
ImportanteQuesto tipo di eredità attraverso prototipo è ciò che si applica AngularJS quando si crea il diverso ambiti di un documento in un'applicazione, dove si muove attraverso l'albero SOLE dove prima identifica se la proprietà esiste ng-app, in quel momento credi $ rootScope, quindi trovare un controller crea una variabile $ ambito che deriva dall'applicazione del metodo $ rootScope.new ().
E quindi si intensifica nel trovare elementi interni l'uno nell'altro, ereditando dalla struttura immediatamente precedente, prendendo le sue funzionalità derivate da $ rootScope e le proprie funzionalità.
Nell'esempio seguente abbiamo sviluppato un'applicazione in cui abbiamo due controller, in questo modo vediamo come attraverso l'ereditarietà di scopo vengono ereditate le diverse proprietà o attributi della stessa, fino a ottenere una struttura annidata che può accedere alle proprietà dei genitori ed estendere le funzionalità dell'applicazione in quanto tale. Vediamo il codice:
{{editors}} ha libri da: {{category}}
I libri più popolari di {{editors}} sono:
- {{libro}}
Questo può essere visto come un po' inverosimile, ma è il modo migliore per capire come funziona la variabile $ ambito funziona all'interno delle nostre applicazioni e quindi essere in grado di applicarlo all'interno della nostra logica per ottenere il massimo dagli strumenti del framework. Vediamo nell'immagine seguente come si presenta la nostra precedente applicazione e come sono stati rispettati i punti spiegati:
Notiamo poi come la lista dei libri appartenga all'oggetto Scopo più interno, tuttavia poiché non definiamo l'attributo editoriale possiamo utilizzare quello che definiamo nel controller genitore, arrivando alla conclusione che abbiamo anticipato l'uso di prototipo di AngulaJS.
L'osservatore come concetto avanzato
Ci sono momenti in cui vogliamo continuare e in qualche modo monitorare una situazione particolare, è qui che entra in gioco l'oggetto. $ guarda, che ci consente di fare esattamente ciò che spieghiamo.
Come funziona?Aggiungendolo come ascoltatore di qualche elemento all'interno della nostra applicazione, questo oggetto si registrerà ogni volta che c'è un cambiamento in esso. In questo modo possiamo applicare condizioni ogni volta che si verifica un evento che determiniamo. Un esempio potrebbe essere quando stiamo costruendo un carrello della spesa, se l'utente aggiunge più di un articolo possiamo mostrare un messaggio, oppure se prova ad acquistare più volte gli chiediamo se ha un problema.
Questo a prima vista potrebbe sembrare qualcosa di molto avanzato, ma AngularJS lo prende vicino alle nostre mani, senza fare troppe complicazioni. L'oggetto $ guarda Non solo può osservare un valore specifico, ma possiamo anche assegnarlo a farlo con una collezione, che ci dà la possibilità di prendere in considerazione più valori contemporaneamente, e quindi ottenere risultati più complessi rispetto al modulo precedente .
Con questo abbiamo finito con questo tutorial, abbiamo imparato a capire cosa Scopo entro AngularJS e per questo ci siamo affidati ai concetti più astratti di JavaScript, dimostrando così che questo linguaggio ci offre tutti gli strumenti per realizzare lavori avanzati come lo stesso framework di cui stiamo parlando, ma che se padroneggiamo i suoi concetti possiamo rendere gli strumenti che usiamo qualcosa di superiore.
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
