Що таке $scope в AngularJS? Підручник з прикладом

Що таке $scope в AngularJS?

$scope в AngularJS це вбудований об’єкт, який в основному пов’язує «контролер» і «перегляд». Можна визначити змінні-члени в області видимості в контролері, до яких потім може бути доступний перегляд.

Кожен контролер у AngularJS додаток отримує власний екземпляр $scope через впровадження залежностей. Все, що ви прикріплюєте до цього об'єкта, стає видимим для шаблону, яким керує контролер, тому $scope поводиться як спільна модель даних, що знаходиться між вашим JavaЛогіка скрипта та ваша HTML-розмітка.

Розглянемо приклад нижче:

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

Code Пояснення:

1. Назва модуля — «додаток»
2. Назва контролера — «HelloWorldCtrl»
3. Об’єкт області – це основний об’єкт, який використовується для передачі інформації від контролера до представлення.
4. Змінну члена додано до об’єкта області

Один контролер та одне представлення – це лише половина успіху. Реальні програми вкладають контролери, повторюють списки та повторно використовують віджети, що означає, що одночасно існує кілька областей видимості.

Як працюють ієрархія областей видимості та спадкування в AngularJS

Кожен AngularJS-застосунок має рівно одну кореневу область видимості та може мати будь-яку кількість дочірніх областей видимості. Директиви створюють ці дочірні області видимості та приєднують їх до елемента DOM, який вони декорують, таким чином дерево областей видимості відображає структуру відображеної сторінки.

Коли AngularJS обчислює вираз, такий як {{siteName}}, він спочатку шукає цю властивість в області видимості, приєднаній до елемента. Якщо властивість відсутня, пошук переходить до батьківської області видимості та продовжує підніматися, доки не досягне кореневої області видимості. JavaРозробникам скриптів відома така поведінка як прототипальне успадкування, і дочірні області видимості успадковуються від батьків саме таким чином.

У наведеному нижче прикладі один контролер вкладено в інший, щоб ви могли спостерігати за процесом успадкування.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Пояснення:

1. ParentCtrl визначає siteName у власній сфері.
2. ChildCtrl ніколи не визначає siteName, проте внутрішній div все одно друкується Guru99 тому що пошук переходить до батьківської області видимості.
3. lesson знаходиться лише в дочірній області видимості, тому батьківський div не може його прочитати.

Які директиви створюють нову область застосування?

• ng-контролер: створює дочірню область видимості для елемента, на якому вона розміщена.
• ng-повтор: створює одну дочірню область видимості на ітерацію, тому кожен рядок може містити різні значення для одного й того ж виразу.
• Спеціальні директиви: може запитувати дочірню область видимості або ізолювати область, яка навмисно не успадковує від свого батьківського об'єкта.
• Директиви компонентів: будь-що зареєстроване в .component() помічник завжди отримує ізолятну область видимості.

Оскільки дочірні області видимості читаються знизу вгору, розробники часто задаються питанням, де знаходиться вершина цього ланцюжка. Цей об'єкт верхнього рівня називається $rootScope.

$scope проти $rootScope: у чому різниця?

AngularJS $rootScope — це область видимості для всієї програми. Програма може мати лише одну змінну $rootScope, і вона використовується як глобальна змінна. Кожна змінна $scope є дочірньою областю видимості, а $rootScope — батьківською на вершині дерева. У таблиці нижче порівнюються два об'єкти.

Використовуйте $rootScope економно. Все, що розміщено там, зберігається для всієї програми та читається будь-де, тому спільний сервіс зазвичай є безпечнішим місцем для глобального стану. Офіційний Посилання на $rootScope містить повний список API.

Знання того, де зберігаються дані, – це одна половина роботи. Інша половина – навчити розробника реагувати на дії користувача.

Налаштування або додавання поведінки в AngularJS

Щоб реагувати на події або виконувати певні обчислення/обробку в представленні, ми повинні забезпечити поведінку для області.

Поведінки додаються до об’єктів області, щоб реагувати на певні події, які можуть бути викликані View. Як тільки поведінка визначена в контролері, до неї можна отримати доступ за допомогою представлення.

Давайте розглянемо приклад того, як ми можемо цього досягти.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code Пояснення:

1. Ми створюємо поведінку під назвою «fullName». Ця поведінка є функцією, яка приймає 2 параметри (ім’я, прізвище).
2. Потім поведінка повертає конкатенацію цих 2 параметрів.
3. У представленні ми викликаємо поведінку та передаємо 2 значення «Guru«» та «99», які передаються як параметри поведінки.

Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

У браузері ви побачите об'єднання обох значень Guru & 99, які були передані поведінці в контролер.

Прив'язки, подібні до наведеної вище, оновлюються самостійно, і механізм, який це забезпечує, варто зрозуміти, перш ніж програма стане великою.

Чому важливі спостерігачі за обсягом даних та цикл дайджесту

AngularJS підтримує відповідність представлення області видимості (view) до області видимості (scope) за допомогою перевірки "брудних" елементів, а не за допомогою подій зміни (change). Цей процес керується трьома API області видимості:

• $watch: реєструє слухач для виразу. Інтерполяції, такі як {{fullName}} зареєструвати спостерігачів для вас під час зв'язування шаблонів.
• $застосувати: входить у контекст виконання AngularJS, оцінює ваш код, а потім запускає дайджест. Він потрібен лише всередині зворотних викликів користувацьких подій або зворотних викликів сторонніх бібліотек, оскільки вбудовані директиви вже викликають його.
• $дайджест: переглядає кожен спостерігач на $rootScope та його дочірніх об'єктах, порівнюючи поточне значення з попереднім, і повторює це, доки модель не перестане змінюватися.

Оскільки дайджест може виконуватися кілька разів, вирази спостереження повинні залишатися економними. Уникайте доступу до DOM всередині них, оскільки читання DOM відбувається на кілька порядків повільніше, ніж читання JavaВластивість скрипта.

Глибина спостереження також впливає на вартість. Спостереження за посиланням є найшвидшим і помічає лише тоді, коли замінюється все значення. $watchCollection помічає додавання, видалення або зміну порядку елементів всередині масиву чи об'єкта. Спостереження за значенням обходить вкладену структуру на кожному дайджесті та є найдорожчим варіантом, тому використовуйте його в останню чергу.

Поширені запитання