¿Qué es $ Scope en AngularJS? Tutorial con función (ejemplos)
¿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:
angular.module('app',[]).controller('HelloWorldCtrl' function($scope) { $scope.message = "Hello World" });
Explicación del código:
- El nombre del módulo es “aplicación”
- El nombre del controlador es "HelloWorldCntrl"
- El objeto de alcance es el objeto principal que se utiliza para pasar información desde el controlador a la vista.
- 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.
<!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>
Explicación del código:
- Estamos creando un comportamiento llamado "nombre completo". Este comportamiento es una función que acepta 2 parámetros (nombre, apellido).
- Luego, el comportamiento devuelve la concatenación de estos 2 parámetros.
- En la vista, llamamos al comportamiento y pasamos 2 valores de "Guru" y "99", que se pasan como parámetros del comportamiento.
Si el comando se ejecuta correctamente, lo siguientewing El resultado se mostrará cuando ejecute su código en el navegador.
Salida:
En el navegador verá una concatenación de los valores de Guru y 99 que se pasaron 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.
- En 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