angularjs 1.6.0 (terbaru sekarang) rute tidak berfungsi

98

Saya berharap untuk melihat pertanyaan ini di Stackoverflow tetapi tidak. Rupanya saya satu-satunya yang mengalami masalah ini yang menurut saya sangat umum.

Saya memiliki proyek dasar yang sedang saya kerjakan tetapi rute tampaknya tidak berfungsi meskipun semua yang telah saya lakukan sejauh ini tampaknya benar.

Saya memiliki bagian html ini di index.htmlfile saya :

<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>

dan ini milikku 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: '/' });
}]);

Sekarang ketika saya baru saja mengunjungi halaman, inilah yang saya dapatkan di url:

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

dan ketika saya mengklik Add quotetombolnya, saya mendapatkan ini:

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

Apa masalahnya di sini? Terimakasih atas bantuannya

— Awa Melvine
sumber

1

mungkin berhubungan? github.com/angular/angular.js/commit/…

— Klai

172

Cukup gunakan hashbang #!di href:

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

Karena aa077e8 , awalan hash default yang digunakan untuk $ location URL hash-bang telah berubah dari string kosong ( '') menjadi bang ( '!').

Jika Anda benar-benar ingin tidak memiliki awalan hash, Anda dapat memulihkan perilaku sebelumnya dengan menambahkan blok konfigurasi ke aplikasi Anda:

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

Untuk informasi lebih lanjut, lihat

Maaf karena terlalu bersemangat, tapi ... Bagaimana ini bisa dilepaskan? Ini sangat besar, merusak bug. - @MiloTheGreat

Perubahan yang mengganggu pada # 14202 harus dikembalikan karena spesifikasi referensi sudah resmi dihentikan # 15715

Saya akan menutup masalah ini karena kami belum mendapat masukan apa pun. Jangan ragu untuk membuka kembali masalah ini jika Anda dapat memberikan masukan baru.

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

— georgeawg.dll
sumber

16

Maaf karena terlalu bersemangat, tapi ... Bagaimana ini bisa dilepaskan? Ini sangat besar, merusak bug.

— MiloTheGreat

2

@MiloTheGreat merasa bebas untuk meninggalkan umpan balik Anda dengan Tim AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Cukup masukkan !ke dalam href:

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

— v-tec
sumber

7

Wow membuang waktu berjam-jam mengikuti tutorial yang tidak berlaku lagi tentang perutean .. yang saya lewatkan hanyalah '!'. Terima kasih!

— Philippe Maes

Dengan semua jumpo mumpo tentang hashes dan hashbang saya tidak pernah berpikir bahwa "!" Sepertinya karakter ilegal yang muncul tanpa referensi. Dan jika saya menerimanya dan mengakui keberadaannya, masalahnya akan terpecahkan.

— Mohammed Joraid

Aku juga ... ini membuatku gila!

— VictorEspina

6

Saya tidak bisa mendapatkan perutean untuk bekerja di 1.6.4 jadi saya memutuskan untuk menggunakan angular 1.5.11 dan perutean berfungsi dengan baik meskipun saya perlu menentukan semua perutean saya saat (..) berfungsi dengan "/" trailing

Jika tetap berpegang pada versi sudut yang lebih lama adalah pilihan bagi Anda, maka pertimbangkan itu karena dapat menyelamatkan saraf Anda ...

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
sumber

Bagaimana tinggal di 1.5 mempengaruhi peningkatan ke Angular 2/3/4/5 / dll? Apakah ngUpgrade berfungsi dari 1.5 hingga 2+? Saya merasa ngUpgrade mungkin tidak dapat digunakan untuk kami. (ya komentar ini sebagian besar tidak akan terlihat dan melolong ke angin)

— 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
sumber

0

Coba yang ini mungkin Membantu ...

Dalam html atau lihat Halaman

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

Di Halaman Script

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

— Manikantan
sumber