angularjs 1.6.0 (остання зараз) маршрути не працюють

98

Я очікував побачити це питання на 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-цитата

У чому тут може бути проблема? Дякуємо за допомогу

— Ава Мелвін
джерело

1

можливо, пов'язані? github.com/angular/angular.js/commit/…

— Claies

172

Просто використовуйте хешбанг #!у 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/isissue/15715#issuecomment-281785369

— georgeawg
джерело

16

Вибачте, що потрапив на мого високого коня, але ... Як це звільнили? Це масовий, ламаючий клоп.

— MiloTheGreat

2

@MiloTheGreat не соромтесь залишати свій відгук команді AngularJS - github.com/angular/angular.js/isissue/15715

— georgeawg

39

Просто включіть !у href:

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

— v-tec
джерело

7

Нічого не витрачав годин на застарілі підручники з маршрутизації. Все, що мені не вистачало, було "!". Дякую!

— Філіп Мейс

З усією стрибаючою мумпою про хеши та хешбанг я ніколи не думав, що "!" видається незаконним символом, який з’являється без посилання. І якби я просто прийняв це і визнав, що це існування, проблема була б вирішена.

— Мохаммед Джораїд

Я теж ... це зводило мене з розуму!

— VictorEspina

6

Я не міг змусити маршрутизацію працювати в 1.6.4, тому я вирішив використовувати кутовий 1.5.11, а маршрутизація прекрасно працює, хоча мені потрібно було визначити всі мої маршрутизації в функціях, коли (..) із заднім числом "/"

Якщо дотримуватися старішої версії кутового - це варіант для вас, то розгляньте це, оскільки це може врятувати ваші нерви ...

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 впливає на оновлення до кутових 2/3/4/5 / тощо? Чи працює ngUpgrade від 1,5 до 2+? Я якось відчуваю, що оновлення може не бути життєздатним для нас. (так, цей коментар здебільшого буде невидимий і виє на вітер)

— eflat

0

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

— Пранав В.Р.
джерело

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('');
     });

— Манікантан
джерело