Angular ng-inspector es una extensión de google chrome que nos permite gestionar de una forma más cómoda los distintos objetos y scopes que nuestra aplicación angular tiene cargados en un momento determinado. El uso de esta extensión es sencillo simplemente la activamos cuando tenemos nuestra aplicación de angular funcionando. Por ejemplo supongamos que tenemos la siguiente aplicación:
<html ng-app="miapp">
<head>
<script src="angular.min.js">
</script>
<script>
angular.module("miapp",[]).controller("controladorPersonas",function($scope){
var listaPersonas=[];
var persona1={nombre:"pepe",apellidos:"perez",edad:20};
var persona2={nombre:"maria",apellidos:"gomez",edad:30};
listaPersonas.push(persona1);
listaPersonas.push(persona2);
$scope.personas=listaPersonas;
});
</script>
</head>
<body>
<div ng-controller="controladorPersonas">
<table >
<tr ng-repeat="persona in personas">
<td>{{persona.nombre}}</td>
<td>{{persona.apellidos}}</td>
<td>{{persona.edad}}</td>
</table>
</body>
</html>
Esta aplicación dispone de un controlador y una lista de personas que se almacenan en el scope de este. Así pues podemos pensar que la estructura que angular construye es similar a la la siguiente.
Sin embargo si tenemos instalado angular ng-inspector podemos activarlo en la barra de navegación
Una vez activado podremos ver realmente todos los objetos y scopes que nuestra aplicación tiene a nuestra disposición.
Como podemos ver ng-inspector nos ayuda sobre manera a entender la estructura real que nuestra aplicación tiene. En nuestro caso nos habíamos olvidado de tener en cuanta tanto el $rootscope como los scopes que crea una directiva ng-repeat. Ng-inspector es una herramienta muy útil a la hora de trabajar con Angular.js
Otros artículos relacionados: angular inyección dependencias, Libro Angular , Arquitecturas JavaScript
[…] Otros artículos relacionados : Angular.js vs Node.js , Angular ng-inspector […]