Angularjs 1.6.0 (последние сейчас) маршруты не работают

Я ожидал увидеть этот вопрос в Stackoverflow, но не сделал этого. По-видимому, я единственный, у кого есть эта проблема, которая кажется мне очень распространенной.

У меня есть базовый проект, над которым я работаю, но маршруты, похоже, не работают, хотя все, что я сделал до сих пор, кажется правильным.

У меня есть этот кусок html в моем файле index.html:

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

и вот мой app.js:

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


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

Теперь, когда я просто заходил на страницу, вот что я получаю в URL:

http://localhost:8000/admin#!/

и когда я нажимаю кнопку Add quote, я получаю следующее:

http://localhost:8000/admin#!/#%2Fadd-quote

В чем может быть проблема? Спасибо за помощь

Ответы

Ответ 1

Просто используйте hashbang #! в href:

 <a href="#!/add-quote">Add Quote</a>

Из-за aa077e8 префикс по умолчанию для хеша, используемый для URL-адресов $ location hash-bang, изменился с пустой строки ('') на bang ('!').

Если вы на самом деле хотите, чтобы у вас не было префикса хеша, вы можете восстановить предыдущее поведение, добавив в приложение блок конфигурации:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Для получения дополнительной информации см.

Извините, что забрался на мою высокую лошадь, но... Как это выпустили? Это серьезная ошибка. - @MiloTheGreat

Разрушающее изменение, как на # 14202, должно быть отменено, так как эталонная спецификация уже официально устарела # 15715

Я собираюсь закрыть эту проблему, потому что мы не получили никакой обратной связи. Не стесняйтесь, чтобы открыть эту проблему, если вы можете предоставить новый отзыв.

- https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

Ответ 2

Просто включите ! в href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>

Ответ 3

Я не мог получить маршрутизацию для работы в 1.6.4, поэтому решил использовать angular 1.5.11, а маршрутизация работает нормально, хотя мне нужно было определить все мои маршруты, когда (..) функции с завершающим "/"

Если придерживаться более старой версии angular, это вариант для вас, если вы считаете, что это может спасти ваши нервы...

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});

Ответ 4

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

Ответ 5

Попробуйте это может помочь...

В HTML или просмотр страницы

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

На странице скрипта

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });