Angular TidBits

Hi Friends,

In today’s discussion, we’ll some good debugging and angular app visualization practices. Let us get started with debugging stuff. Here, i will be using chrome extension for the same. This is known as ng-inspector.

you can search for the same and install in chrome. Once installed, then it will create one icon as shown below in the screen shot.

So, what you can do, when you need check your angular app, whether every piece and all data is returning correctly or not. You can use this tool to check the same, Once you loaded your angular app in chrome, then you can click on this A icon, and this will open a new side window with entire app info.

you can also drill down further as shown below in the screen shot.

This is referring my 1st grid data as shown below.

Therefore, if you refer the API url api/movies , the above ng-inspector is referring to below highlighted record.

Again, when i go to the reviews page and inspect the data, then it will produce the below result as shown below.

you can also verify these values at the api level as shown below in the screen shot.

I am also using JSON Viewer extension for browser for presenting the data in a readable format. Below is the screen shot for the same.

Now, to visualize the app, that what angular stuffs are used in the app and how they are related i am using another extension Angular Dependency Graph.

Therefore, when you load the app and press F12, you will notice one new tab, Angular JS Graph in the toolbar. Once, you click the same, then it will present below shown visualization.