AngularJS web application view page source only showing “index.html” contents

Question

I am using AngularJS for web application development. In my application I am using UI-router for routing purpose and yeoman folder structure.

I checked other angular Sites like https://www.amazon.com , https://itunesconnect.apple.com . in these sites view page source are showing the html content used in the page. But in my application it's only showing the scripts added in index.html. I don't know why it's happening in my application. I think this because of my ui-router or folder structure.

How can i make the view page source with corresponding HTML in my application. Please suggest what approach will resolve this issue.

Answer 1

If I look at the view source for amazon, I can't find any angularJS files and anything related to AngularJS .

Itunes is using AngularJS but if I look at the body tag, there is no much HTML and I can see the ui-view there at,

<div id="view-wrapper" class="flexcol" ui-view></div>

If you use ui-view , the page will be like yours and itunes page. itunes have massive scripts and other items inside the head tag but only few elements in the body tag.

View Source will show the static html whatever loaded as part of initial synchronous request.

And won't show any content dynamically added by asynchronous (ajax) request.

As ui-view is loading the content asynchronously and appending the html dynamically, You can't view the same in the view source.

If you right click on the page in any modern browsers like Chrome , Firefox , IE11+ etc, you can right click and click "Inspect element" to view the dynamically added content.

Still if you want to show the full html in the view source, you need to get rid of ui-view and make all the required html static.