Angularjs Does Not Load Scripts Within Ng-View

Angularjs does not load scripts within ng-view

That's the way jqLite works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.

Updated: since some people asked for elaboration in the comments, here it is:

When a route is matched, ngView uses jqLite's (or jQuery's, if loaded) html() method to set the content of the element (the one ngView is declared on). In other words, ngView.link() does something like this:

$element.html(template)

So it boils down to how html() is implemented in jqLite and jQuery. jqLite uses the native innerHTML property, which only sets content but doesn't evaluate scripts. jQuery, on the other hand, parses out all script tags and executes them (by constructing and appending script DOM elements to the page).

AngularJS ng-view not loading

Try this,

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="nav">
        <a href="#home" class="button">Home</a>
        <a href="#about" class="button">About</a>
        <a href="#detail" class="button">Detail</a>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div ng-view=""></div>
</div>

DEMO

Angular ng-view or ng-include not working

How do you access the site?

Are you adding the hash "#" next to the index.html location?

I mean, if you run this at localhost, inside a folder:

http://localhost/folder/#/contactus ?

Remember that AngularJS uses the hash to detect routes.

AngularJS ng-view not loading js

It's hard to see from your code snippet, but have you tried loading jquery before angularjs file ? Angular works with jqLite and if your not loaded jQuery before angularjs file angular tries to load it with jqLite.

But, it is preffered to convert your jquery plugins to a directive in order for them work properly in your angular project.

Angularjs ng-view does not display the Page

The code inside ProductMaster.html is unnecessary, except <h1>Product Master</h1>.

ProductMaster template is just a part of your already included MasterPage.html, and hence having inside another would be redundant.

So, your MasterPage.html should only contain <h1>Product Master</h1>, not the complete html. And it should work. [Supporting Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]

Also, make sure if you're using Bootstrap's JS, your jQ version should be less than 3.

.js not getting applied on ng-view

Either place all the CDN includes (jquery, angular, ...) in the <head> element or place the the userdat.js at the bottom of the <body>.

Note that you if you're accessing DOM elements with JQuery that are injected into the ng-view, you'll need to listen to $routeChangeSuccess events because the html is modified after an angular digest.

Angularjs Does Not Load Scripts Within Ng-View