AngularJS $ routeProvider: Маршрутизация не работает

Question

По какой-то причине routeProvider не работает в моем коде, когда я нажимаю на ссылку. Кажется, я не могу найти ошибку.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      template: "Order Details"
    })
    .when("/first", {
      templateUrl: "first.html"
    })
    .when("/second", {
      templateUrl: "second.html"
    })
    .when("/third", {
      templateUrl: "third.html"
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<a href="#/first">show details</a>
<a href="#/second">show details</a>
<a href="#/third">show details</a>
<div ng-view></div>

Answer 1

Вот ваше исправление: Измените href = "# / first " на href = "#! First" И добавьте в свою угловую конфигурацию приложения следующие строки:

.config(function ($locationProvider) {
    $locationProvider.hashPrefix('!');
}

Вот рабочий планкр для того же: Нажмите здесь

Поскольку мы определяем параметр templateUrl, которому мы предоставляем путь для загрузки шаблона, это создает разницу. Если бы мы использовали параметр шаблона, для которого мы предоставляем прямой HTML-код для загрузки, тогда ваш код будет работать отлично.