AngularJS将路由路由到路径，而不是加载html页面

Question

我只是用angular-seed制作一个基本的AngularJS应用程序，目前有：

• index.html
• app.js
• home / home.html
• home / home.js

现在，当我单击带有href =“ / home”的li项目Home时，我想重定向到home.html。 这样做可以，但是它将我重定向到目录结构而不是文件。
文件 -
app.js

'use strict';
// Declare app level module which depends on views, and components
angular
    .module('mentorSpot', [
      'ngRoute',
      'mentorSpot.home'
    ])
    .config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
      $routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
      $routeProvider.otherwise({redirectTo: '/home'});
    }]);

home / home.js

'use strict';
angular.module('mentorSpot.home', ['ngRoute'])
.config(['$routeProvider'], function($routeProvider){
        $routeProvider.when('/home', {
            templateUrl: 'home/home.html',
            controller: 'HomeCtrl'
        });
    })
.controller('HomeCtrl',[function(){

}]);

home / home.html

<h1>This is the home page</h1>

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="mentorSpot" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="mentorSpot" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MentorSpot</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
  <!-- W3.CSS Framework-->
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <!-- jQuery and external JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="hp.js"></script>
    <script src="https://use.fontawesome.com/d18274d1d9.js"></script>
    <style>
      body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
      .w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
      .fa-anchor,.f
  </style>
</head>
<body>
  <!-- Navbar -->
  <ul class="w3-navbar w3-blue w3-card-2 w3-top w3-left-align w3-large">
    <li class="w3-quarter w3-center"><h3>MentorSpot.com</h3></li>
    <li class="w3-hide-small"><a href="#/home" class="w3-padding-large w3-hover-indigo">Home</a></li>
    <li class="w3-hide-small"><a href="#htutw" class="w3-padding-large w3-hover-indigo">How to use this website?</a></li>
    <li class="w3-hide-small"><a href="#Catalog" class="w3-padding-large w3-hover-indigo">Courses</a></li>
    <li class="w3-hide-small"><a href="#RegLog" class="w3-padding-large w3-hover-indigo">Register/Login</a></li>
  </ul>
  <div ng-view>

  </div>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="/home/home.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

Answer 1

我认为这条线是错误的，因此未配置您的路由器：

.config(['$routeProvider'], function($routeProvider){

它应该是：

.config(['$routeProvider', function($routeProvider){

我希望这是问题

顺便说一句，您只需定义一次路线。 在示例中，您要设置两次本地路由。