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)

score 0 · Accepted Answer · edited May 23 '17 at 12:02

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 '17 at 12:02

Community

1
1

answered Apr 27 '17 at 12:22

Mistalis

17,793
13
73
97

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 – Jean Lopes Apr 28 '17 at 19:28

jQuery.load HTML containing AngularJS

1 Answers1