Question

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

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

Answer 1

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

angular.js：4640未捕获错误：[$ injector：modulerr]出现此错误

1 个答案: