Question

试图在AngularJS中使用route注入视图。当我单击链接时，它不会在页面中显示视图。有index.html文件正在尝试注入视图。

这是index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Angular Routing</title>
    <!--<script src="Scripts/angular.min.js"></script>-->
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <link href="CustomStyle.css" rel="stylesheet" />

    <script src="Scripts/script.js"></script>
</head>
<body  ng-app="Demo">

    <table style="font-family: Arial">
        <tr>
            <td colspan="2" class="header">
                <h1>
                    WebSite Header
                </h1>
            </td>
        </tr>
        <tr>
            <td class="leftMenu">
                <a href="#/home">Home</a>
                <a href="#/courses">Courses</a>
            </td>
            <td class="mainContent">
                <ng-view></ng-view>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="footer">
                <b>Website Footer</b>
            </td>
        </tr>
    </table>

</body>
</html>

这是名为script.js的模块

var app = angular.module("Demo", ["ngRoute"])
    .config(function ($routeProvider) {
        $routeProvider
            .when("/home", {
                templateUrl: "Templates/home.html",
                controller:"homeController"
            })
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller:"coursesController"
            })
    })
    .controller("homeController", function ($scope) {
        $scope.message = "Home Page";
    })
    .controller("coursesController", function ($scope) {
        $scope.courses = ["C#","HTML","JAVA","Angular JS"];
    })

当我单击其中一个链接说“首页”时，它会显示在浏览器地址栏中 http://localhost:51008/index.html#!#%2Fhome 而不是此 http://localhost:51008/index.html/#home 并且控制台中没有显示错误This is my Directory Structure

无法使用路由在Angular JS中注入视图

0 个答案: