AngularJS - Debugging Tips

Effettuare il debug di codice JavaScript è ormai un'operazione abbastanza agevole. Se però utilizziamo AngularJS non sempre è immediato capire come accedere ai servizi, scope, controller, etc semplicemente utilizzando la console presente nei browser e senza perdersi in breakpoints, step over, step into, etc...

Eccovi qualche informazione che può rendervi la vita un po' più facile.

Ricordo che con Chrome à possibile aprire la console sviluppatori semplicemente premendo sulla tastiera Ctrl+Shift+j e che la variabile $0 rappresenta sempre l'ultimo elemento ispezionato.

Ecco come ottenere:

Un elemento angular (indicate il selettore appropriato)

var elemento = angular.element(document.querySelector("selettore"));
// oppure se volete l'elemento appena ispezionato da console
var elemento = angular.element($0);

Lo scope di un elemento (ottenuto come da punto precedente)

var scope = elemento.scope();

Il controller di un elemento

var ctrl = elemento.controller();

Un service, che sia tra quelli standard, di terze parti o vostro (ad esempio potete provare mettendo $http come "nomeService")

var srv = angular.element(document.body).injector().get('nomeService')

Attenzione: le istruzioni presenti in questo articolo sono relative ad AngularJS versione 1.x e non al 2.x uscito di recente