How to load AngularJS in a div

Question

I have a main page with this structure.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>..:: Test Application ::..</title>
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="../css/main.css" />
        <script src="../js/jquery.js"></script>
        <script src="../bootstrap/js/bootstrap.min.js"></script>

        <script>

          function loadOption(idopt){
              if(idopt==1){
                 var curl = '../view/otherpage.php'
              }
              $("#mainContainer").load(curl);
          }        

        </script>

     <body onLoad=loadOption(<?php echo idopt;?>)>
       <div id="mainContainer"></div>
     </body>

</html>

otherpage.php

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/angular.min.js"></script>
    </head>
    <body>
        {{1+1}}
    </body>
</html>

But, when i load the main page... the AngularJS doesn't run. What could be wrong?

make sure the angular source you specified is exists. view the source of the page in the browser. — Shibbir Ahmed, Mar 18 '14 at 20:40
I did it dude. Also, i'm using NetBeans with Ctrl+ Space to view source. — Jhonatan Sandoval, Mar 18 '14 at 20:43

score 2 · Answer 1 · answered Mar 18 '14 at 20:57

2

That's because you're loading otherpage.php after the DOMContentLoaded event has finished.

In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.

So in order to get it to work, you'll have to manually bootstrap Angular.

Here's Angular's documentation about it:

http://docs.angularjs.org/guide/bootstrap

Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.

answered Mar 18 '14 at 20:57

António Sérgio Simões

981
7
11

I was adding manually the `angular.bootstrap` but there isn't result in my browser. If is possible, could you help me with some code? – Jhonatan Sandoval Mar 18 '14 at 21:27
Do you really have to go with the manual bootstrap route? I mean, is there any specific reason for doing so? If not, try to reference angular.min.js at the main page's end:
– António Sérgio Simões Mar 18 '14 at 21:45
It's just for design reasons. Shouldn't it go? – Jhonatan Sandoval Mar 18 '14 at 21:48
Ok, I see. Here's a question and answer that will get you started solving your problem: http://stackoverflow.com/questions/19424357/angular-bootstrapping-after-load-of-html – António Sérgio Simões Mar 18 '14 at 21:56

score 0 · Answer 2 · answered Mar 18 '14 at 20:44

Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.

We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...

score 0 · Answer 3 · answered Mar 18 '14 at 20:51

0

make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

answered Mar 18 '14 at 20:51

vnimbala

74
5

How to load AngularJS in a div

3 Answers3