Develop Reference

JQuery reel breaks inside AJAX called DOM change / insertion .load()

It is a bit hard to explain everything I have done in this situation, but here I go...
From a nav / menu I am inserting a variety of PHP files with content into my index page via .on('click') and .load('page.php')... one of those php pages includes 3 other php elements that are related to 2 JQuery reel instances and a 2 drop down selectors inside of another .on('click') that displays the instructions and the default images.
I have gotten all of my JQuery / raw JS to work inside the called PHP div - those related to the JQuery reel by using getScript inside of the .on('click')->.load('page.php')...
But even using getScript - JQuery reel only initializes the first time. I tried using window reload (because after going back to the home page - the first instance works again) before loading the div with the called PHP (it refreshed to the home page and didn't load the div), I tried clearing the JQuery cache, etc...
Long story short.
JQuery reel populates the head when initializing the css/images... on the first instance but not after that inside of AJAX called content.

The answer was built in to JQuery reel all along. Petre Vostrel is top notch.
FROM: GitHub Reel - issues
"Hi, please use $.reel.scan() method after you inject the HTML. Excerpt from the documentation:
Responsible for discovery and subsequent conversion of data-configured Reel images is $.reel.scan() method, which is being called automagically when the DOM becomes ready. Under normal circumstances you don't need to scan by yourself.
It however comes in handy to re-scan when you happen to inject a data-configured Reel into already ready DOM."

why angular js not loads instantly, it takes time to load

This is the demo is used to build my project:
https://material.angularjs.org/HEAD/demo/
I changed a lot of menus but the page heading and the data stayed the same. I face the same problem as in the demo. The browser does not render the page instantly but it takes some time in the beginning before the elements content is shown.

You can use ngCloak to prevent that. Put ng-cloak on your body tag and follow the documentation.
When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.

Your question isn't clear! But from what u r facing seems, your one/more service call(s) taking time to fetch data intially which might be making your application slow. Go to network in dev tools and check which service is taking lots of time!

HTML tags don't appear in DOM when included using ng-include

I'm trying to include a file using ng-include.
the side-bar appear in the UI but when I say view page source that time the HTML tags of the side-bar doesn't appear.

That is because when you view the source of an HTML page in any browser, it will perform a fresh GET of the original document and display that source code. Since AngularJS injects elements to the DOM dynamically (and because it is "just" JavaScript all together), the original generated by the server-side will not be modified. To see the generated source, use a developer tool of your choice, i.e F12 Developer Tools in IE. Also, you may want to read up on the role JavaScript plays in the whole lifecycle of webpage rendering.

AngularJS - ng-view Not Loading

I have an application I am trying to set up as a SPA with AngularJS that hooks into a REST API off of our internal SharePoint site. I am having issues with ng-view and getting any of the views to actually load. Both views are setup as ng-template and whenever it tries to find one, it kicks back a 404 Not Found like it's still looking for a separate page.
Here is the plnkr.
I know that none of the data will load because of this coming from an internal SharePoint list, but the views should at least load something to give us an idea of what is going on.
Edit: I cannot actually answer this since my account is too new, but I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized.

Just so that this doesn't stay as unanswered:
I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized by Angular and not loaded in the wrong order compared to the DOM.

Multiple pages on a single page

I am using backbone.js and building a single page application, inspired by trello.com ..
I want to know how you show many pages on top of the original page. As in how you architect it.
How do you use Backbone routers to achieve this?
For example in trello
Basepage
And then now on top of the base page you have dynamic content
like a cards detail
like a boards details
How could i architecture something like this?

I've done a couple of approaches so far in projects with 50+ pages and they both scaled well. I did not use backbone.js but the approaches are straight forward and do not require a framework to learn other than I used jQuery for selectors.
Both of them have in common creating a single overlay window that you can pull in content into the window. I wrote mine from scratch but you could easily use jQuery UI dialog. The two approaches only differ in how the content is pulled. Also, using the information on the link is all you should need to pull in the "module" or overlay content as your rule. Do not need tons of scripts loaded in to start your app. Have the modules pull in the behavior for you.
Option 1) Use the jQuery load method to pull content from stand-alone web pages by using a placeholder variable like so:
var $ph = $('<div />');
$ph.load(URL); // loads gui of remote URL + executes any script that URL has
The $ph var now contains all the GUI loaded in from the external URL so you can use selector on it to extract the particular HTML and place it into your DOM or overlay as you need.
Here is an example of the stand-alone HTML output:
<div class="module">
<a class="link">click me</a>
</div>
<script>
(function(){
// put any private vars here
$('.module .link').click(function(){
// do something
});
})();
</script>
If you remove() or destroy the dom inside the overlay through jQuery, it will automatically remove all the events directly assigned aka "bind" and "unbind" them but using "live" or "delegate" you will need to worry about "die" and "undelegate" etc. just doing die('.namespace').live('click.namespace') will ensure is cleaned.
Here is an example of this on one of my websites -> http://www.kitgui.com/docs
But the better example is within the customer section as the docs is fairly simple using hash history.
2) Using an iframe inside your overlay and assigning it a URL.
This is the easiest option but is a little slower because each page called has to have a full standalone behavior and dependencies with the iframe. Also you must worry about sizing the frame etc. unless you have a fixed overlay window.
You must have a loader overlay your iframe while its loading then have the iframe talk the parent to tell it its done loading and hide the loader.
I did this for several sites but one of them is a site in development you can see here to get the code ->
http://dev.zipstory.com (sign in and go to my zipstory and click "group" settings etc to see this, just view source to see how I did this as its all there)
The thing about iframes is you should write some code on the parent that accepts standard messages from the iframe that you agree on as a typical set of behavior such as notifying its done loading or passing messages to update something on the parent etc. This can be added on the fly and refactored as you need as long as your aim is KISS approach.

Each of the 'dynamic content' pages should be a template (underscore.js gives you _.template()) rendered by a backbone view. The main page needs to have events that initialize new views and render the templates. Look at the todos app (http://documentcloud.github.com/backbone/docs/todos.html) to get a basic idea about the flow of a backbone app.