angular.js:4640Uncaught Error: [$injector:modulerr] got this error

Question

The above error i am getting when i run angularjs route simple application. I made separate folder for partial template. only three files are there that contains simple headings.

below code for route.html

<!DOCTYPE html>
 <html ng-app="myApp">
 <head>
    <title>Angular Js Route Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/external/reset.css" rel="stylesheet" type="text/css"/>
    <link href="css/route.css" rel="stylesheet" type="text/css"/>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
    <script src="js/route.js" type="text/javascript"></script>
</head>
<body>
    <div class="outerWraper">
        <div class="header">
            <h2>Website Header</h2>
        </div>

        <div class="mainContainer">
            <div class="leftContainer">
                <ul class="leftMenuBar">
                    <li><a href="#/home">Home</a></li>
                    <li><a href="#/courses">Courses</a></li>
                    <li><a href="#/students">Students</a></li>
                </ul>
            </div>

            <div class="rightContainer">
                <div class="eachContentDiv">
                    <ng-view> </ng-view>
                </div>
            </div>
        </div>

        <div class="footerWraper">
            <h5>Website footer</h5>
        </div>
    </div>
</body>

Correspondence js file.

var myApp = angular
    .module('myApp', ["ngRoute"])
    .config(function ($routeProvider){
        $routeProvider
            .when("/home", {
                templateUrl: "partial_route_templates/home.html",
                controller: "homeController"
            })
            .when("/courses", {
                templateUrl: "partial_route_templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "partial_route_templates/student.html",
                controller: "studentController"
            })

            .controller('homeController', function ($scope){
                $scope.message = "Home Page";
            })

            .controller('coursesController', function ($scope){
                $scope.message = "courses Page";
            })

            .controller('studentController', function ($scope){
                $scope.message = "student Page";
            })
    });

Your route.html page seems to be missing a reference to your correspondence.js file. — Matt M, Aug 15 '16 at 12:15
I see. I edited the post to make this clearer. In your browser console, can you verify the route.js file is there? — Matt M, Aug 15 '16 at 12:40

score 0 · Answer 1 · answered Aug 15 '16 at 12:53

Your route.js file is bonkered. I'll provide the corrected code, but if you had researched the error at all, you would have seen the error is pretty clear - $routeProvider has no function controller. You're chaining your controller definitions to $routeProvider and not the angular object.

var myApp = angular
    .module('myApp', ["ngRoute"])
    .config(function ($routeProvider){
        $routeProvider
            .when("/home", {
                templateUrl: "partial_route_templates/home.html",
                controller: "homeController"
            })
            .when("/courses", {
                templateUrl: "partial_route_templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "partial_route_templates/student.html",
                controller: "studentController"
            });
    })

    .controller('homeController', function ($scope){
        $scope.message = "Home Page";
    })

    .controller('coursesController', function ($scope){
        $scope.message = "courses Page";
    })

    .controller('studentController', function ($scope){
        $scope.message = "student Page";
    });

working fine after removing controller function in route js file. — user993164, Aug 16 '16 at 04:36

angular.js:4640Uncaught Error: [$injector:modulerr] got this error

1 Answers1