Question

我正在为一个项目学习AngularJS，但我在渲染部分视图时遇到困难。我已经制作了主页面，其中包含需要在主页面中加载的三个部分模板。还创建了一个javascript文件来定义模块并创建控制器。毕竟这仍然是部分模板没有加载到主索引页面。此外，谷歌Chrome控制台中没有错误。我的文件夹结构如下：

- scripts
 -- angular.min.js
 -- angular-route.min.js
 -- app.js
templates
 -- home.html
 -- courses.html
 -- students.html
index.html

我的index.html是：

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/angular-route-min.js"></script>
        <script src="scripts/script.js"></script>
    </head>
    <body>

        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Title</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#/home">Home</a></li>
                        <li><a href="#/courses">Courses</a></li>
                        <li><a href="#/students">Students</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Home</a></li>
                                <li><a href="#">Courses</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div>
        </nav>


        <div class="container">
            <ng-view></ng-view>
        </div>


    </body>
</html>

我的app.js是：

var app = angular.module("myModule", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider
                .when("/home", {
                    templateUrl: "templates/home.html",
                    controller: "homeController"
                })
                .when("/courses", {
                    templateUrl: "templates/courses.html",
                    controller: "coursesController"
                })
                .when("/students", {
                    templateUrl: "templates/students.html",
                    controller: "studentsController"
                })
        })
        .controller("homeController", function ($scope) {
            $scope.message = "Home Page";
        })
        .controller("coursesController", function ($scope) {
            $scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
        })
        .controller("studentsController", function($scope, $http) {
            $http.get("http://localhost:8000/api/students").then(function(response) {
                $scope.students = response.data;
            });
        });

我也尝试了以下内容：

"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"

但似乎没有任何效果。

ng-view不在AngularJS v1.6.9中渲染部分内容

0 个答案: