¿Alguien puede explicar la diferencia entre $ scope y $ rootScope?
Yo creo que
Podemos obtener las propiedades del modelo ng en un controlador particular de la página en particular usando this.
Podemos obtener todas las propiedades del modelo ng en cualquier controlador desde cualquier página usando this.
¿Es esto correcto? ¿O algo más?
Respuestas:
"$ rootScope" es un objeto principal de todos los objetos angulares "$ scope" creados en una página web.
$ scope se crea con ng-controllermientras que $ rootscope se crea con ng-app.
La principal diferencia es la disponibilidad de la propiedad asignada con el objeto. Una propiedad asignada con $scopeno se puede usar fuera del controlador en el que está definida, mientras que una propiedad asignada con $rootScopepuede usarse en cualquier lugar.
Ejemplo: si en el ejemplo siguiente reemplaza $rootScopecon $scopela propiedad del departamento, no se completará desde el primer controlador en el segundo
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>De acuerdo con la Guía de alcances del desarrollador de Angular :
Cada aplicación Angular tiene exactamente un alcance raíz, pero puede tener varios alcances secundarios. La aplicación puede tener varios ámbitos, porque algunas directivas crean nuevos ámbitos secundarios (consulte la documentación de la directiva para ver qué directivas crean nuevos ámbitos). Cuando se crean nuevos ámbitos, se agregan como elementos secundarios de su ámbito principal. Esto crea una estructura de árbol que es paralela al DOM donde están conectados.
Tanto los controladores como las directivas hacen referencia al alcance, pero no entre sí. Esta disposición aísla al controlador tanto de la directiva como del DOM. Este es un punto importante ya que hace que los controladores se vean agnósticos, lo que mejora enormemente la historia de prueba de las aplicaciones.
De otra manera podemos ver esto; $rootScopees global mientras que $scopees local. Cuando Controllerse asigna a una página, una $scopevariable se puede utilizar aquí porque se une a este controlador. Pero cuando queremos compartir su valor con otros controladores o servicios, entonces $rootScopese está utilizando (** hay formas alternativas, podemos compartir valores, pero en este caso queremos usar $rootScope).
Su segunda pregunta sobre cómo define esas dos palabras es correcta.
Por último, un poco desviado, utilícelo $rootScopecon cuidado. De manera similar a la forma en que usa las variables globales, puede ser difícil depurar y puede cambiar accidentalmente la variable global en algún lugar dentro de un temporizador o algo que haga que su lectura sea incorrecta.
Cada aplicación tiene al menos un único rootScope y su ciclo de vida es el mismo que el de la aplicación y cada controlador puede tener su propio alcance, que no se comparte con otros.
Mira este artículo :
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Le recomiendo que lea la documentación oficial en profundidad de Angular para los ámbitos. Empiece en la sección 'Jerarquías de ámbito':
https://docs.angularjs.org/guide/scope
Básicamente, $ rootScope y $ scope identifican partes específicas del DOM dentro de las cuales
Todo lo que pertenezca a $ rootScope está disponible globalmente en su aplicación Angular, mientras que cualquier cosa que pertenezca a $ scope está disponible dentro de la parte del DOM a la que se aplica ese alcance.
$ RootScope se aplica al elemento DOM que es el elemento raíz de la aplicación Angular (de ahí el nombre $ rootScope). Cuando agrega la directiva ng-app a un elemento del DOM, este se convierte en el elemento raíz del DOM dentro del cual $ rootScope está disponible. En otras palabras, las propiedades, etc. de $ rootScope estarán disponibles en toda su aplicación Angular.
Un alcance $ angular (y todas sus variables y operaciones) está disponible para un subconjunto particular del DOM dentro de su aplicación. Específicamente, el alcance $ para cualquier controlador en particular está disponible para la parte del DOM a la que se ha aplicado ese controlador en particular (usando la directiva ng-controller). Sin embargo, tenga en cuenta que ciertas directivas, por ejemplo, ng-repeat, cuando se aplican dentro de una parte del DOM donde se ha aplicado el controlador, pueden crear ámbitos secundarios del ámbito principal, dentro del mismo controlador, un controlador no necesariamente contiene solo un ámbito.
Si observa el HTML generado cuando ejecuta su aplicación Angular, puede ver fácilmente qué elementos DOM 'contienen' un alcance, ya que Angular agrega la clase ng-scope en cualquier elemento al que se haya aplicado un alcance (incluido el elemento raíz de la aplicación, que tiene $ rootScope).
Por cierto, el signo '$' al comienzo de $ scope y $ rootScope es simplemente un identificador en Angular para cosas reservadas por Angular.
Tenga en cuenta que el uso de $ rootScope para compartir variables, etc. entre módulos y controladores no suele considerarse una práctica recomendada. Los desarrolladores de JavaScript hablan de evitar la 'contaminación' del alcance global compartiendo variables allí, ya que puede haber conflictos más adelante si se usa una variable del mismo nombre en otro lugar, sin que el desarrollador se dé cuenta de que ya está declarada en $ rootScope. La importancia de esto aumenta con el tamaño de la aplicación y el equipo que la desarrolla. Idealmente, $ rootScope solo contendrá constantes o variables estáticas, que deben ser consistentes en todo momento en toda la aplicación. Una mejor manera de compartir cosas entre módulos puede ser utilizar servicios y fábricas, ¡que es otro tema!
Ambos son objetos de secuencia de comandos de Java y la diferencia se ilustra mediante el diagrama que se muestra a continuación.
NTB: La
primera aplicación angular intenta encontrar la propiedad de cualquier modelo o función en $ scope, si no encuentra la propiedad en $ scope, busca en el ámbito principal en la jerarquía superior. Si la propiedad aún no se encuentra en la jerarquía superior, angular intenta resolver en $ rootscope.
Los nuevos estilos, como AngularJS Styleguide de John Papa , sugieren que no deberíamos usar $scopepara guardar las propiedades de la página actual. En su lugar, deberíamos usar el controllerAs with vmenfoque donde la vista se une al objeto controlador en sí. Luego use una variable de captura para esto cuando use la sintaxis controllerAs. Elija un nombre de variable coherente, como vm, que significa ViewModel.
Sin embargo, aún necesitará el $scopepor sus capacidades de observación.