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.

2nd

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.

3rd

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.

4th

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

5th

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

6th

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

7th

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

8th

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

9th

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.

10th

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.

11th

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.

12th

This way, you can save lots of time while understanding and debugging the app. Below, i have mentioned few app related urls.

APP URL:- moviereview
Download Code:- GIT-URL
Buy here:- Amazon

I hope you like the post. Thanks for Joining me.

Thanks,
Rahul Sahay
Happy Coding

2,170 total views, 1 views today