Учебники

4) $ Scope в AngularJS

Январь 29, 2020

Что такое $ scope в AngularJS?

$ scope в AngularJS — это встроенный объект, который в основном связывает «контроллер» и «представление». Можно определить переменные-члены в области видимости в контроллере, которые затем могут быть доступны для представления.

Рассмотрим пример ниже:

Контроллер AngularJS: учиться за 10 минут! 

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

Объяснение кода:

  1. Название модуля — «приложение»
  2. Имя контроллера «HelloWorldCntrl»
  3. Объект Scope — это основной объект, который используется для передачи информации из контроллера в представление.
  4. Переменная-член добавлена ​​в объект области

Настройка или добавление поведения

Чтобы реагировать на события или выполнять какие-либо вычисления / обработку в представлении, мы должны предоставить поведение области.

Поведения добавляются к объектам области для ответа на определенные события, которые могут быть вызваны представлением. Как только поведение определено в контроллере, оно может быть доступно представлению.

Давайте посмотрим на пример того, как мы можем достичь этого.

Контроллер AngularJS: учиться за 10 минут! 

<!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>

Объяснение кода:

  1. Мы создаем поведение под названием «fullName». Это поведение является функцией, которая принимает 2 параметра (firstName, lastname).
  2. Затем поведение возвращает объединение этих двух параметров.
  3. В представлении мы вызываем поведение и передаем 2 значения «Guru» и «99», которые передаются в качестве параметров поведению.

Если команда выполнена успешно, при запуске кода в браузере будет показан следующий вывод.

Вывод:

Контроллер AngularJS: учиться за 10 минут!

В браузере вы увидите объединение обоих значений Guru & 99, которые были переданы поведению в контроллере.

Резюме

  • Различные переменные-члены могут быть добавлены к объекту области видимости, на который затем можно ссылаться в представлении.
  • Поведение может быть добавлено к работе с событиями, которые генерируются для действий, выполняемых пользователем.
  • Angularjs $rootScope— это область применения всего приложения. Приложение может иметь только один $ rootScope и используется как глобальная переменная. В Angular JS $ — это дочерние, а $ rootScope — родительский.

 

60
Share: