Search code examples
javascriptjqueryhtmlangularjsangularjs-ng-include

Uncaught Error: [$injector:modulerr] - Angular ng-include

I'm using ng-include to attach some HTML pages to one HTML page in AngularJS.

Find the Main.html page code

<!DOCTYPE html>
<html ng-app="Test">

<head>
<link rel="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-controller="userController">

<div class="container">
  <div ng-include="'test1.htm'"></div>
  <div ng-include="'test2.htm'"></div>
</div>


</body>
</html>

test1.html code

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Full Name: 
</body>
</html>

Seems like nothing wrong in my code. But when I load it in browser nothing is displayed and I get console error says,

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=Test&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387)

Please help me to resolve the issue.

Solution

  • The Error is here

    <html ng-app="Test">

    you have to define a new module to use it as app

    something Like that

    MainModule.js

        var app =angular.module("myApp",[]);
    app.controller("myCTRL"["$scope",function($scope){

    }]);

    then include that js file into your project to use it Like that

        <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
            <link rel="stylesheet" href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>    
            <script src="assets/js/MainModule.js"></script>
</head>

    <body ng-controller="myCTRL">

    <div class="container">
      <div ng-include="'test1.htm'"></div>
      <div ng-include="'test2.htm'"></div>
    </div>


    </body>
    </html>