Here are some handy tips that are useful when developing an Angular app.
1. Access the scope of inside the developers console -
To access the scope attached to element inside developers console -
Select the element (using chrome developers tool) for which you want scope and then use
Here “$0” is the selected element.
Or if you are using jQuery, you can use the normal element selector
e.g In angular phonecat app -
2. Adding function or variable to scope from developer console -
Some time while development/debugging you may need to add/remove or tweak some property or function in scope, you can easily do that as -
Access the scope using above way
But after executing this, you may observe that changes are not reflected on view make sure that you give call to -
to reflect changes, or you can directly use -
Some time you may have to make some changes to angular scope from outside code, you can use code mentioned above (Point 2.) to do that, just make sure that app is not in “$digest” or “$apply” cycle, if its in it you don’t need to use $apply() , as -
4. Getting all the controllers,directives,services,filters etc. for your App in console -
Sometimes you may want to check what all services/controllers/filters are registered in App. (In case where controllers/services are dynamically loaded). To do that first get referencce to module where you have registered these things.
e.g If you have app named myApp and you have registered controller on it as
Then you can check if indeed these are registered properly in console by accessing _invokeQueue
This _invokeQueue give you an array of object (array) of all registered services, controllers etc. Now you can iterate over this array get the name as -
P.S - Will keep updating this post as I come across some more tricks/tips