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
– Shibbir Ahmed, Commented Mar 18, 2014 at 20:40
I did it dude. Also, i'm using NetBeans with Ctrl+ Space to view source. — Jhonatan Sandoval
– Jhonatan Sandoval, Commented Mar 18, 2014 at 20:43

António Sérgio Simões · Accepted Answer · 2014-03-18 20:57:32Z

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, 2014 at 20:57

António Sérgio Simões

9917 silver badges11 bronze badges

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

4 Comments

Jhonatan Sandoval Over a year ago

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?

António Sérgio Simões Over a year ago

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: <div id="mainContainer" ng-app></div> <script src="path to angular.js"></script> </body>

Jhonatan Sandoval Over a year ago

It's just for design reasons. Shouldn't it go?

António Sérgio Simões Over a year ago

Ok, I see. Here's a question and answer that will get you started solving your problem: stackoverflow.com/questions/19424357/…

taddy hoops · Accepted Answer · 2014-03-18 20:44:18Z

0

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...

answered Mar 18, 2014 at 20:44

taddy hoops

6033 silver badges17 bronze badges

Comments

vnimbala · Accepted Answer · 2014-03-18 20:51:00Z

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, 2014 at 20:51

vnimbala

745 bronze badges

Collectives™ on Stack Overflow

How to load AngularJS in a div

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related