AngularJS rendering process

Question

Im working in a not good JS project, the page rendering is make with a JQuery function.

$("#sameID").html(data);

And using this the guys here can load a .html page (I know, its very bad, but this can't be changed now)

So, using this function the script make a get request on the following html page:

test.html

<div ng-app="myApp">
    <h2>Todo {{1 + 1}}!</h2>
</div>
<script src="angular.js"></script>
<script src="index.js"></script>

index.js

app = angular.module('myApp', []);

But I'm always facing this error if I remove the <div ng-app="myApp"> works.

Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So if you remove the `
` it gives an error, but if you put it back it works? Wouldn't the obvious solution be to... just... keep it? What's the end goal here? — VoteyDisciple, Mar 23 '16 at 21:24
@VoteyDisciple If I remove works, if I keep it doesn't works and the errors appers (My bad) — Fabio Picheli, Mar 23 '16 at 21:26

Bernardo Bosak de Rezende · Answer 1 · 2016-03-23T22:31:45.487

0

You have to dynamically bootstrap your module with angular.bootstrap:

<div id="sameID"></div>
<script>
  $(function() {
    var hardCodedHtml = "<div><h2>Todo {{1 + 1}}!</h2></div>";
    var parentElement = $('#sameID');
    parentElement.html(hardCodedHtml);
    angular.bootstrap(parentElement[0], ['myApp']);
  });
</script>

Running sample: https://plnkr.co/edit/D3B72neDa8uIDFpAlVcr?p=preview

edited Mar 23 '16 at 22:31

answered Mar 23 '16 at 21:31

Bernardo Bosak de Rezende

578
7
13

@FabioPicheli That's odd. Have you re-tested it? Can you submit a JSFiddle or Plunkr with your code? – Bernardo Bosak de Rezende Mar 23 '16 at 21:42
Yes, if I put the code in fiddle works fine, but the main problem in the JQuery request to load the .html, i think same stuff is loading first (idk), I tried [this](http://stackoverflow.com/questions/15250644/loading-an-angularjs-controller-dynamically) way, but Its not a good "work arround" – Fabio Picheli Mar 23 '16 at 22:02
@FabioPicheli Now I see your problem. You have to use angular.bootstrap function. I updated the answer, check it out and let me know whether it helps you. – Bernardo Bosak de Rezende Mar 23 '16 at 22:28

score 0 · Answer 2 · answered Mar 23 '16 at 21:36

In Angular module creation done via:

var app = angular.module('myApp', [
  //dependencies..
}]);

And module retrieving via:

var app = angular.module('myApp');

From the Angular docs:

Creation versus Retrieval

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

AngularJS rendering process

2 Answers2