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

98

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

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

У меня в index.htmlфайле есть этот кусок 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: // локальный: 8000 / админ #! /

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

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

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

angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6 Ава Мелвин
источник
1
возможно связаны? github.com/angular/angular.js/commit/…
Claies

Ответы:

172

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

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

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

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

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

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

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

Критическое изменение # 14202 должно быть отменено, поскольку справочная спецификация уже официально устарела # 15715

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

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

Джорджог
источник
16
Извини, что сажусь на мою высокую лошадь, но ... Как это было выпущено? Это серьезная ломающая ошибка.
MiloTheGreat
2
@MiloTheGreat, не стесняйтесь оставлять свой отзыв команде AngularJS - github.com/angular/angular.js/issues/15715
georgeawg
39

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

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
v-tec
источник
7
Ничего себе, потраченные впустую часы после устаревших руководств по маршрутизации ... все, что мне не хватало, это '!'. Спасибо!
Philippe Maes
Со всей этой болтовней про хеши и хэшбэнг, я никогда не думал, что "!" кажется незаконным символом, который появляется без ссылки. И если я просто приму это и признаю, что он существует, проблема была бы решена.
Мохаммед Джораид
Я тоже ... это сводило меня с ума!
VictorEspina
6

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

Если вы предпочитаете более старую версию 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"
});
});
Ликсон
источник
Как сохранение версии 1.5 влияет на обновление до Angular 2/3/4/5 / и т. Д.? NgUpgrade работает с 1.5 до 2+? Мне кажется, что ngUpgrade может быть для нас нежизнеспособным. (да, этот комментарий будет в основном невидимым и будет
завывать
0 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
Пранав VR
источник
0

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

В 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('');
     });
Manikantan
источник