¿Qué es $ Scope en AngularJS? Tutorial con función (ejemplos)

Por: james hartman james hartman
Hours Actualizado

¿Qué es $ alcance en AngularJS?

$ alcance en AngularJS es un objeto incorporado que básicamente vincula el "controlador" y la "vista". Se pueden definir variables miembro en el alcance dentro del controlador a las que luego se puede acceder mediante la vista.

Considere el siguiente ejemplo:

$ alcance en AngularJS

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

Code Explicación:

  1. El nombre del módulo es “aplicación”
  2. El nombre del controlador es "HelloWorldCntrl"
  3. El objeto de alcance es el objeto principal que se utiliza para pasar información desde el controlador a la vista.
  4. Variable miembro agregada al objeto de alcance

Configurar o agregar comportamiento

Para reaccionar a eventos o ejecutar algún tipo de cálculo/procesamiento en la Vista, debemos proporcionar comportamiento al alcance.

Los comportamientos se agregan a los objetos de alcance para responder a eventos específicos que la Vista puede desencadenar. Una vez que el comportamiento está definido en el controlador, la vista puede acceder a él.

Veamos un ejemplo de cómo podemos lograrlo.

Configurar o agregar comportamiento

<!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 Explicación:

  1. Estamos creando un comportamiento llamado "nombre completo". Este comportamiento es una función que acepta 2 parámetros (nombre, apellido).
  2. Luego, el comportamiento devuelve la concatenación de estos 2 parámetros.
  3. En la vista estamos llamando al comportamiento y pasando 2 valores de “Guru” y “99”, que se pasan como parámetros al comportamiento.

Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

Configurar o agregar comportamiento

En el navegador verá una concatenación de ambos valores de Guru & 99 que se transmitieron al comportamiento en el controlador.

Resumen

  • Se pueden agregar varias variables miembro al objeto de alcance a las que luego se puede hacer referencia en la vista.
  • Se puede agregar comportamiento para trabajar con eventos que se generan para acciones realizadas por el usuario.
  • El AngularJS $rootScope es el alcance de toda la aplicación. Una aplicación sólo puede tener un $rootScope y se utiliza como una variable global. En Angular JS $scopes son ámbitos secundarios y $rootScope es ámbito principal

Resumir este post con: