javascript - 带有 angularjs 的 SPA 仅加载 home.hmtl 页面，仅此而已

问题描述

我的 index.html

    <html ng-app="myAngApp">
<head>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="mainscripts.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Rokkitt" rel="stylesheet">
</head>

<body>

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn">&times;</a>
        <a href="#">Home</a>
            <button id="dropdown-btn" class="dropdown-button">Training</button>
            <div class="dropdown-content" id="dropdown-ctn">
                <a href="#Stundenplan">Stundenplan</a>
                <a href="#Training/MuayThai">Muay Thai</a>
                <a href="#Training/Boxen">Boxen</a>
                <a href="#Training/MMA">MMA</a>
                <a href="#Training/BJJ">BJJ</a>
                <a href="#Training/K1">K1</a>
                <a href="#Training/Capoeira">Capoeira</a>
                <a href="#Training/Junioren">Junioren</a>
                <a href="#Training/WingTsun">Wing Tsun</a>
            </div>
        <a href="#/Team">Team</a>
        <a href="#/Kontakt">Kontakt</a>
    </div>



<div id="main">
    <div class="menubutton">
        <span class="openbtn">&#9776; </span>
    </div>

<!-- Slideshow container -->
<div class="slidelogo-ctn">
    <a href="#" >
        <img src="Images/logo.png" class="logoslider"   alt="MMA Vienna logo"/>
    </a>

    <div class="slides">
        <img src="Images/img1.jpg" />
        <img src="Images/img2.jpg" />
        <img src="Images/img3.jpg" />
    </div>
</div>

<div id="textandpicbox" ng-view>
</div>

我的 mainscripts.js

var app = angular.module('myAngApp', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'HomeController'
  })

  .when('/Stundenplan', {
    templateUrl : 'pages/stundenplan.html',
    controller  : 'StdplController'
  })

  .when('/Training/MuayThai', {
    templateUrl : 'pages/muaythai.html',
    controller  : 'MuaythaiController'
  })

.when('/Training/Boxen', {
    templateUrl : 'pages/boxen.html',
    controller  : 'BoxenController'
  })

.when('/Training/MMA', {
    templateUrl : 'pages/mma.html',
    controller  : 'MmaController'
  })

.when('/Training/BJJ', {
    templateUrl : 'pages/bjj.html',
    controller  : 'BjjController'
  })    

.when('/Training/K1', {
    templateUrl : 'pages/k1.html',
    controller  : 'K1Controller'
  })    

.when('/Training/Capoeira', {
    templateUrl : 'pages/capoeira.html',
    controller  : 'CapoeiraController'
  })    

.when('/Training/Junioren', {
    templateUrl : 'pages/junioren.html',
    controller  : 'JuniorenController'
  })

.when('/Kontakt', {
    templateUrl : 'pages/kontakt.html',
    controller  : 'KontaktController'
  })        

.when('/Team', {
    templateUrl : 'pages/team.html',
    controller  : 'TeamController'
  })    

.otherwise({redirectTo: '/'});  
});

我的本地文件

文件夹

/pages 文件夹内的页面

现在这是问题，它只加载我的“home.html”文件，而在原始 index.hmtl 中，其他文件根本不起作用。我已经在 http 服务器上加载了网站，并在单击链接时检查了 url。它确实发生了变化，因此链接可以正常工作，但不知何故我的 ng-route 无法识别网址。我现在已经尝试了大约 2 个小时，但我一直停留在这一点上。我一直在查看代码，并不能真正找到缺少的东西。据我所知，应用控制器在场景中没有实际功能，还是我错了？

标签： javascriptjqueryhtmlangularjssingle-page-application

javascript - 带有 angularjs 的 SPA 仅加载 home.hmtl 页面，仅此而已

问题描述

解决方案

推荐阅读