Co to jest $ Scope w AngularJS? Samouczek z przykładem

Co to jest $ scope w AngularJS?

$ scope w AngularJS jest wbudowanym obiektem, który w zasadzie wiąże "kontroler" i "widok". Można zdefiniować zmienne składowe w zakresie w obrębie kontrolera, do których widok może następnie uzyskać dostęp.

Rozważ poniższy przykład:

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

Objaśnienie kodu:

1. Nazwa modułu to „aplikacja”
2. Nazwa kontrolera to „HelloWorldCntrl”
3. Obiekt Scope to główny obiekt, który służy do przekazywania informacji ze sterownika do widoku.
4. Zmienna składowa dodana do obiektu zasięgu

Konfigurowanie lub dodawanie zachowania

Aby reagować na zdarzenia lub wykonywać jakieś obliczenia / przetwarzanie w Widoku, musimy zapewnić zachowanie zakresu.

Zachowania są dodawane do obiektów zakresu, aby reagować na określone zdarzenia, które mogą być wyzwalane przez View. Po zdefiniowaniu zachowania w kontrolerze można uzyskać do niego dostęp za pomocą widoku.

Spójrzmy na przykład, jak możemy to osiągnąć.

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

Objaśnienie kodu:

1. Tworzymy zachowanie o nazwie „fullName”. To zachowanie jest funkcją, która przyjmuje 2 parametry (firstName, lastname).
2. Zachowanie zwraca następnie konkatenację tych 2 parametrów.
3. W tym widoku wywołujemy zachowanie i przekazujemy 2 wartości „Guru” i „99”, które są przekazywane jako parametry zachowania.

Jeśli polecenie zostanie wykonane pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.

Wynik:

W przeglądarce zobaczysz konkatenację obu wartości Guru i 99, które zostały przekazane do zachowania w kontrolerze.

Podsumowanie

• Do obiektu zakresu można dodać różne zmienne składowe, do których można następnie odwoływać się w widoku.
• Zachowanie można dodać do pracy ze zdarzeniami, które są generowane dla akcji wykonywanych przez użytkownika.
• Angularjs $rootScopeto zakres dla całej aplikacji. Aplikacja może mieć tylko jedną $ rootScope i jest używana jak zmienna globalna. W Angular JS zakresy $ są zakresami potomnymi, a $ rootScope jest zakresem nadrzędnym