¿Qué es $ Scope en AngularJS? Tutorial con ejemplo

¿Qué es $ scope en AngularJS?

$ scope en AngularJS es un objeto integrado que básicamente une 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 ejemplo siguiente:

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

Explicación del código:

  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 del 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 pueden ser activados por la Vista. Una vez definido el comportamiento en el controlador, la vista puede acceder a él.

Veamos un ejemplo de cómo podemos lograrlo.

Guru99

Guru99 Global Event


{{fullName("Guru","99")}}

Explicación del código:

  1. Estamos creando un comportamiento llamado "fullName". Este comportamiento es una función que acepta 2 parámetros (nombre, apellido).
  2. El comportamiento luego 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 con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.

Producción:

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 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 $rootScopees el alcance de toda la aplicación. Una aplicación solo puede tener un $ rootScope y se usa como una variable global. En Angular JS, $ scopes son alcances secundarios y $ rootScope es alcance primario

Articulos interesantes...