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 / แอดมิน #! /

และเมื่อฉันคลิกที่Add quoteปุ่มฉันจะได้รับสิ่งนี้:

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

อะไรคือปัญหาที่นี่? ขอบคุณที่ช่วยเหลือ


1
อาจเกี่ยวข้อง? github.com/angular/angular.js/commit/…
Claies

คำตอบ:


172

เพียงใช้ hashbang #!ใน href:

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

เนื่องจากaa077e8คำนำหน้าแฮชเริ่มต้นที่ใช้สำหรับ $ location hash-bang URL ได้เปลี่ยนจากสตริงว่าง ( '') เป็น 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>

8
ว้าวเสียเวลาไปหลายชั่วโมงตามบทแนะนำเกี่ยวกับการกำหนดเส้นทางที่เลิกใช้แล้ว .. ทั้งหมดที่ฉันขาดไปคือ "!" ขอบคุณ!
Philippe Maes

กับ Jumpo mumpo เกี่ยวกับแฮชและแฮชบังฉันไม่เคยคิดเลยว่า "!" ดูเหมือนตัวละครผิดกฎหมายที่ปรากฏโดยไม่มีการอ้างอิง และถ้าฉันยอมรับมันและยอมรับว่ามีอยู่ปัญหาก็จะได้รับการแก้ไข
Mohammed Joraid

ฉันก็เช่นกัน ... นี่มันทำให้ฉันแทบบ้า!
VictorEspina

6

ฉันไม่สามารถกำหนดเส้นทางให้ทำงานใน 1.6.4 ได้ดังนั้นฉันจึงตัดสินใจใช้ angular 1.5.11 และการกำหนดเส้นทางก็ใช้ได้ดีแม้ว่าฉันจะต้องกำหนดเส้นทางทั้งหมดของฉันในฟังก์ชัน when (.. ) ที่มีการต่อท้าย "/"

หากยึดติดกับเชิงมุมรุ่นเก่าเป็นตัวเลือกสำหรับคุณลองพิจารณาดูเพราะมันอาจช่วยคุณได้ ...

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 / etc อย่างไร? ngUpgrade ใช้งานได้ตั้งแต่ 1.5 ถึง 2+ หรือไม่ ฉันรู้สึกว่า ngUpgrade อาจใช้ไม่ได้สำหรับเรา (ใช่ความคิดเห็นนี้ส่วนใหญ่จะมองไม่เห็นและโหยหวนในสายลม)
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('');
     });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.