Using angular in partial pages loaded into a main page

Question

I have a single page app. The main index page has <div> section that loads different partial pages depending on user actions. Each partial page has different functionality.

For example, here is how my main page looks like. Pretty basic:

 <html> 
 <head>...</head>
 <body>
 ...
 <div id='content-body'>
 ...
 </body>
 </html>

The partial pages get loaded into the content-body <div> via jQuery like so:

$('#content-body').load(filename, function (....) ...);

Some partial pages are simple forms and have javascript behind it. Again, pretty basic:

<form id="ABC">
 <div class="row">
   <fieldset class="form-group col-sm-3">
   ...
</form>
<script src="scripts/abc.js" />

Problem: For some partial pages (not all), I'd like to use angular. I've created something like so:

<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <p>Angular TEST: {{ 1 + 2 }}</p>
    <form id="DEF">
    ...
    </form>
</div>
<script src="scripts/def.js"></script>

This does not work. From what I can tell, it is because angular needs to compile the whole page and wont work on just a partial page. Is this correct? Is there a way I can get angular to work in a partial page only like this?

Also - I cannot apply angular to the whole app / main index page. It is not an option for me.

I dont think that is correct. You probably just need to bootstrap it. (creating a fiddle now to test it) — Nix
– Nix, Commented Feb 10, 2016 at 23:28

Nix · Accepted Answer · 2016-02-10 23:43:31Z

2

I will post a sample below but here are the steps. You need to basically manually bootstrap the app. To bootstrap you need the element, and the module. So in my example I start with an empty div with an id of content-here. When the dom loads I basically insert a mini angular app and then manually call the bootstrap function. If you can in advance load the scripts i recommend you do it. If you have to wait to load them let me know and I'll update the fiddle.

<div id='content-here'> </div>

Then you would setup your angular app however you chose.

angular.module('myApp', []);
angular.module('myApp').controller('NixCtrl',NixCtrl);


function NixCtrl($scope){
  $scope.test = "Hello there Angular!"
}

The last step is to setup an event listener or some block of code to add the angular app to the dom, and then call the bootstrap function:

document.addEventListener("DOMContentLoaded", contentLoaded);

function contentLoaded(){
  var template = ' <div ng-app="myApp"><div ng-controller="NixCtrl">{{test}} </div> </div>';

  $('#content-here').html(template);
   angular.bootstrap($('#content-here'), ['myApp']);
}

http://jsfiddle.net/ncapito/wzdf9k6d/1/

edited Feb 10, 2016 at 23:43

answered Feb 10, 2016 at 23:35

Nix

58.8k31 gold badges154 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Lee Over a year ago

Many thanks Nix. I didnt know you can manually bootstrap initialization. This site also helped me: docs.angularjs.org/guide/bootstrap

Collectives™ on Stack Overflow

Using angular in partial pages loaded into a main page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related