Cos'è $ Scope in AngularJS? Tutorial con esempio

Cos'è $ scope in AngularJS?

$ scope in AngularJS è un oggetto incorporato che fondamentalmente lega il "controller" e la "vista". È possibile definire variabili membro nell'ambito del controller a cui è quindi possibile accedere dalla vista.

Considera l'esempio di seguito:

angular.module('app',[]).controller('HelloWorldCntrl'function($scope){$scope.message = "Hello World"});

Spiegazione del codice:

1. Il nome del modulo è "app"
2. Il nome del controller è "HelloWorldCntrl"
3. L'oggetto Scope è l'oggetto principale utilizzato per passare le informazioni dal controller alla vista.
4. Variabile membro aggiunta all'oggetto ambito

Impostazione o aggiunta di comportamenti

Per reagire agli eventi o eseguire una sorta di calcolo / elaborazione nella vista, dobbiamo fornire un comportamento all'ambito.

I comportamenti vengono aggiunti agli oggetti ambito per rispondere a eventi specifici che possono essere attivati ​​dalla vista. Una volta definito il comportamento nel controller, è possibile accedervi dalla vista.

Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.

Guru99 Global Event
{{fullName("Guru","99")}}

Spiegazione del codice:

1. Stiamo creando un comportamento chiamato "fullName". Questo comportamento è una funzione che accetta 2 parametri (firstName, lastname).
2. Il comportamento restituisce quindi la concatenazione di questi 2 parametri.
3. Nella vista chiamiamo il comportamento e passiamo 2 valori di "Guru" e "99" che vengono passati come parametri al comportamento.

Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Produzione:

Nel browser vedrai una concatenazione di entrambi i valori di Guru e 99 che sono stati passati al comportamento nel controller.

Sommario

• È possibile aggiungere varie variabili membro all'oggetto ambito a cui è possibile fare riferimento nella vista.
• Il comportamento può essere aggiunto per lavorare con eventi generati per azioni eseguite dall'utente.
• L'angularjs $rootScopeè lo scopo dell'intera applicazione. Un'applicazione può avere solo un $ rootScope e viene utilizzata come una variabile globale. In Angular JS $ gli ambiti sono ambiti figlio e $ rootScope è l'ambito padre