angularjs 1.6.0 (najnowsze teraz) trasy nie działają

98

Spodziewałem się, że zobaczę to pytanie w Stackoverflow, ale tak się nie stało. Najwyraźniej tylko ja mam ten problem, który wydaje mi się być bardzo powszechny.

Mam podstawowy projekt, nad którym pracuję, ale trasy wydają się nie działać, mimo że wszystko, co zrobiłem do tej pory, wydaje się być w porządku.

Mam w index.htmlpliku ten fragment kodu 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>

a oto moje 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: '/' });
}]);

Teraz, kiedy tylko odwiedzam stronę, oto co otrzymuję w adresie URL:

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

a kiedy klikam Add quoteprzycisk, otrzymuję to:

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

Jaki może być tutaj problem? Dzięki za pomoc

— Awa Melvine
źródło

1

prawdopodobnie powiązane? github.com/angular/angular.js/commit/…

— Claies

172

Po prostu użyj hashbang #!w href:

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

Ze względu na aa077e8 , domyślny przedrostek hash używany w adresach URL $ location hash-bang zmienił się z pustego ciągu ( '') na bang ( '!').

Jeśli faktycznie nie chcesz mieć prefiksu z krzyżykiem, możesz przywrócić poprzednie zachowanie, dodając blok konfiguracyjny do swojej aplikacji:

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

Więcej informacji znajdziesz w

Przepraszam, że wsiadam na mojego wysokiego konia, ale ... Jak to się stało? To jest ogromny, zepsuty błąd. - @MiloTheGreat

Przełomowa zmiana, o której mowa w numerze 14202, powinna zostać cofnięta, ponieważ specyfikacja referencyjna została już oficjalnie wycofana # 15715

Zamknę ten problem, ponieważ nie otrzymaliśmy żadnej opinii. Jeśli możesz przesłać nową opinię, otwórz ponownie ten problem.

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

— georgeawg
źródło

16

Przepraszam, że wsiadam na mojego wysokiego konia, ale ... Jak to się stało? To jest ogromny, zepsuty błąd.

— MiloTheGreat

2

@MiloTheGreat możesz zostawić swoją opinię zespołowi AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Po prostu umieść !w href:

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

— v-tec
źródło

7

Wow, straciłem godziny na przestarzałe samouczki dotyczące routingu… brakowało mi tylko znaku „!”. Dziękuję Ci!

— Philippe Maes

Przy całym tym mumiu o hashach i hashbangu nigdy nie pomyślałem, że „!” wygląda na niedozwolony znak, który pojawia się bez odniesienia. A gdybym to zaakceptował i przyznał, że istnieje, problem zostałby rozwiązany.

— Mohammed Joraid

Ja też ... to doprowadzało mnie do szału!

— VictorEspina,

6

Nie mogłem zmusić routingu do działania w 1.6.4, więc zdecydowałem się użyć kątowego 1.5.11 i routing działa dobrze, chociaż musiałem zdefiniować wszystkie moje trasy w funkcjach when (..) z końcowymi znakami „/”

Jeśli trzymanie się starszej wersji kątowej jest dla ciebie opcją, rozważ ją, ponieważ może to uratować twoje nerwy ...

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"
});
});

— lixonn
źródło

Jak pozostanie przy 1.5 wpływa na aktualizację do Angular 2/3/4/5 / etc? Czy ngUpgrade działa od 1.5 do 2+? Mam wrażenie, że ngUpgrade może nie być dla nas opłacalny. (tak, ten komentarz będzie w większości niewidoczny i wyjący pod wiatr)

— eflat

0

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

— Pranav VR
źródło

0

Spróbuj tego, co może pomóc ...

W html lub wyświetl stronę

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

Na stronie skryptu

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

— Manikantan
źródło