angularjs 1.6.0 (şimdi en son) rotaları çalışmıyor

98

Bu soruyu Stackoverflow'da görmeyi bekliyordum ama görmedim. Görünüşe göre bana çok yaygın görünen bu sorunu yaşayan tek kişi benim.

Üzerinde çalıştığım temel bir projem var ancak şu ana kadar yaptığım her şey doğru gibi görünse de rotalar çalışmıyor gibi görünüyor.

Dosyamda şu html parçası var 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>

ve işte benim 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: '/' });
}]);

Şimdi sadece sayfayı ziyaret ettiğimde, işte url'de şunu buluyorum:

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

ve Add quotedüğmeye tıkladığımda şunu alıyorum:

http: // localhost: 8000 / admin #! / #% 2Fadd-alıntı

Buradaki sorun ne olabilir? Yardım için teşekkürler

— Awa Melvine
kaynak

1

muhtemelen ilgili? github.com/angular/angular.js/commit/…

— Claies

172

Basitçe #!href içinde hashbang kullanın :

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

Aa077e8 nedeniyle , $ location hash-bang URL'leri için kullanılan varsayılan hash-öneki boş dizeden ( '') bang ( '!') olarak değiştirildi.

Aslında karma önek istemiyorsanız, uygulamanıza bir yapılandırma bloğu ekleyerek önceki davranışı geri yükleyebilirsiniz:

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

Daha fazla bilgi için, bkz

Yüksek atıma bindiğim için üzgünüm ama ... Bu nasıl serbest bırakıldı? Bu çok büyük, kırıcı bir böcek. - @MiloTheGreat

Referans şartname zaten resmi olarak kullanımdan kaldırıldığı için # 14202'ye göre kırılma değişikliği geri alınmalıdır # 15715

Bu sorunu kapatacağım çünkü herhangi bir geri bildirim almadık. Yeni geri bildirim sağlayabiliyorsanız, bu sorunu yeniden açabilirsiniz.

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

— Georgeawg
kaynak

16

Yüksek atıma bindiğim için üzgünüm ama ... Bu nasıl serbest bırakıldı? Bu çok büyük, kırıcı bir böcek.

— MiloTheGreat

2

@MiloTheGreat, geri bildiriminizi AngularJS Ekibine bırakmaktan çekinmeyin - github.com/angular/angular.js/issues/15715

— georgeawg

39

Basitçe şunu !içine ekleyin href:

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

— v-tec
kaynak

7

Yönlendirme ile ilgili kullanımdan kaldırılan öğreticilerden sonra vay boşa harcanan saatler .. tüm eksik olan '!' İdi. Teşekkür ederim!

— Philippe Maes

Hash ve hashbang hakkındaki tüm jumpo mumpo ile bunu hiç düşünmemiştim "!" referans olmadan görünen yasadışı bir karakter gibi görünüyor. Ve eğer bunu kabul edip var olduğunu kabul edersem, sorun çözülürdü.

— Mohammed Joraid

Ben de ... bu beni deli ediyordu!

— VictorEspina

6

1.6.4'te çalışmak için yönlendirmeyi alamadım, bu yüzden açısal 1.5.11 kullanmaya karar verdim ve tüm yönlendirmelerimi ne zaman (..) işlevlerinin sonunda "/" ile tanımlamam gerekse de yönlendirme iyi çalışıyor

Eğer daha eski bir açısal versiyona bağlı kalmak sizin için bir seçenekse, sinirlerinizi kurtarabileceği için düşünün ...

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
kaynak

1.5'te kalmak, Angular 2/3/4/5 / vb.'ye yükseltmeyi nasıl etkiler? NgUpgrade, 1.5'ten 2+ 'ye kadar çalışıyor mu? NGUpgrade'nin bizim için uygun olmayabileceğini düşünüyorum. (evet bu yorum çoğunlukla görünmeyecek ve rüzgarda

— uğultu olacak

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
kaynak

0

Bunu deneyin yardımcı olabilir ...

Html'de veya Sayfayı Görüntüle

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

Komut Dosyası Sayfasında

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

— Manikantan
kaynak