jQuery.load HTML containing AngularJS

Question

I'm having trouble loading an HTML file that contains AngularJS code!

Here are my snippets:

page1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>   
    <script src="jquery-2.2.4.min.js"></script>
</head>
<body>        
    <div id="content">
    </div>
    <script>
        $(document).ready(function () {
            $('#content').load('page2.html#body');
        });        
    </script>
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="customersCtrl">        
        {{ value }}
    </div>

    <script>
    //<![CDATA[
        var app = angular.module('myApp', []);  
        app.controller('customersCtrl', function($scope) {
            $scope.value = "hello world!";
        });    
    //]]>
    </script>

</body>
</html>

page2 alone works just fine! But when I try to load it inside page1, I get the following error message:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2… at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192) at i (jquery-2.2.4.min.js:2)

Community · Accepted Answer · 2017-05-23 12:02:14Z

0

Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.

<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <script src="jquery-2.2.4.min.js"></script>
    <script src="angular.min.js"></script>
</head>

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 27, 2017 at 12:22

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

1 Comment

Jean Lopes Over a year ago

After adding the jquery it worked! But I am confused now, when I load the page2 alone, it works without explicit importing the jquery.js, can anyone explain why? just curious

Collectives™ on Stack Overflow

jQuery.load HTML containing AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related