angular.js:4640Uncaught Error: [$injector:modulerr]得到这个错误

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

本文关键字：错误 modulerr injector 4640Uncaught js Error angular      更新时间：2023-09-26

当我运行angularjs路由简单应用程序时，我得到了上面的错误。我为部分模板制作了单独的文件夹。只有三个文件包含简单的标题。

下面的代码为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>

对应js文件。

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";
            })
    });

您的route.js文件被破坏了。我将提供更正后的代码，但如果你已经研究了错误，你会看到错误是非常清楚的- $routeProvider没有controller的功能。您将控制器定义链接到$routeProvider而不是angular对象。

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";
    });
相关文章：