O que é $ Scope no AngularJS? Tutorial com função (exemplos)

O que é $scope no AngularJS?

$ escopo em AngularJS é um objeto embutido que basicamente liga o “controlador” e a “visualização”. Pode-se definir variáveis de membro no escopo do controlador que podem então ser acessadas pela visualização.

Considere o exemplo abaixo:

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

Explicação do código:

O nome do módulo é “app”
O nome do controlador é “HelloWorldCntrl”
O objeto de escopo é o objeto principal usado para passar informações do controlador para a visualização.
Variável de membro adicionada ao objeto de escopo

Configurando ou adicionando comportamento

Para reagir a eventos ou executar algum tipo de computação/processamento na View, devemos fornecer comportamento ao escopo.

Os comportamentos são adicionados aos objetos de escopo para responder a eventos específicos que podem ser acionados pela Visualização. Uma vez definido o comportamento no controlador, ele pode ser acessado pela visualização.

Vejamos um exemplo de como podemos conseguir isso.

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

Explicação do código:

Estamos criando um comportamento chamado “fullName”. Este comportamento é uma função que aceita 2 parâmetros (primeiro nome, sobrenome).
O comportamento então retorna a concatenação desses 2 parâmetros.
Na visualização estamos chamando o comportamento e passando 2 valores de “Guru” e “99” que são passados como parâmetros para o comportamento.

Se o comando for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.

Saída:

No navegador você verá uma concatenação dos valores Guru e 99 que foram passados para o comportamento no controlador.

Resumo

Várias variáveis de membro podem ser adicionadas ao objeto de escopo que pode então ser referenciado na visualização.
O comportamento pode ser adicionado para trabalhar com eventos que são gerados para ações realizadas pelo usuário.
A AngularJS $rootScope é o escopo de todo o aplicativo. Uma aplicação só pode ter um $rootScope e é usada como uma variável global. Em Angular JS $scopes são escopos filhos e $rootScope é escopo pai

Você pode gostar: