We Keep Coding

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

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.

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.

div innerhtml object access parent html div

I have a main.html containing the following div:
<div id="main">
I want to dynamically load html in this div (say page1.html and page2.html). I am able to accomplish this through the following code :
document.getElementById("main").innerHTML='<object type="text/html" data="page1.html" ></object>';
Now, I want to have a button id="btn1" in my page1.html, which should load page2.html into div "main" of my parent main.html.
However, in page1.html, I am not able to locate my container div "main"
document.getElementById("main") // returns null
Thanks in advance for the help!

Your issue is trying to use a single page's DOM to interact with content loaded in through an iframe or object. Using these makes life very difficult for a JavaScript developer.
If you are using only plain JavaScript, I would suggest you instead use an AJAX request to load in HTML directly through the DOM instead of transcluding this content using old methods.
Here's a beginner's guide to plain-JS AJAX. Frameworks like jQuery simplify the process immensely.
http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855
Otherwise, no. You cannot access that node's content because of Cross-Site Scripting security features.

How can I get angularJS dynamic content to display in an iframe?

I am generating some tabular content using ng-repeat in AngularJS, and I would like to have this content display in an iframe, so that the user can drag it and resize it.
I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.
I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.
How can I construct my iframe such that the ng-repeat generated content is displayed within?

You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
document.getElementById("frame").contentWindow.document.getElementById("mydiv")
The srcdoc property can be used instead of src to indicate you will be providing code for the contents. Seamless is also expected when you use srcdoc; it tells the browser that the iframe's contents are supposed to be treated as a part of the website, rather than a nested one. Unfortunately, this will trigger styling changes that eliminate the whole reason you wanted the iframe in the first place (the resize handles disappear). Furthermore, you'd have to inject css files and javascript files into the iframe - it's not worth it.
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
Here's a fiddle I was using to test out controlling iframe contents. It's very basic but accurately demonstrates how much trouble they actually are: Fiddle

Initialize ng-app after document is loaded

I'm working with AngularJS.
One of the (technical) requirements is to fetch the "ng enabled" HTML content from the server, in response to a click event, and inject it into a <div ng-app> via JavaScript.
The problem is that the newly injected HTML is not wired, as Angular goes through the compile and link phases only when the page is loaded the first time.
Is there a way to trigger them manually?
Am I approaching this problem in the wrong way? Is there a more idiomatic way to accomplish what I described?
Thanks

There are multiple ways to inject dynamic content into the view in AngularJS. One of the way to inject dynamic content is to use ng-include directive. It can take an endpoint from where to get view.
You can combine it with ng-if to achieve load view on click. For example:
<span ng-if="clicked">
<div ng-include='pathToTheHtml'></div>
</span>
The clicked variable would be false first, on clicking on the button set it to true, this would trigger ng-include to get the content and inject it into html.
If you want finer control then you need to use the $compile service. The html that needs to be injected into the DOM needs to be compiled and linked to the scope using $compile service. This can be done in a directive.
element.append($compile(htmlFragment)(scope))

angular.bootstrap(element, [modules], [config]);

Ruby on Rails / Javascript - How to tell if content was generated dynamically?

I have a Rails application that uses a CMS to render content in the view pages.
I'd like to be able to know if a certain HTML tag has content that was generated by the CMS.
For example, in my index.html.haml, I could have:
%p= #instance_variable.content
If I hover over the <p> tag in the front-end pages, I'd like to have a popup of some sort telling me it has content generated by a CMS.
Can this be done automatically?
I don't want to have to go through every view template and have to manually populate each tag with a data-cms="true". Is this possible? How do I go about doing this? Where do I begin?

Non-trivial if you don't want to be invasive and there's nothing in place already to identify that content.
My first thought is to decorate the content getter with something that embeds it in a <span> tag with a data- attribute, html_safe it, and renders it within the existing <p> tag.