Các tuyến đường anglejs 1.6.0 (mới nhất hiện tại) không hoạt động

98

Tôi đã mong đợi để xem câu hỏi này trên Stackoverflow nhưng không. Rõ ràng tôi là người duy nhất gặp phải vấn đề này mà đối với tôi dường như rất phổ biến.

Tôi có một dự án cơ bản đang thực hiện nhưng các tuyến dường như không hoạt động mặc dù mọi thứ tôi đã làm cho đến nay dường như là đúng.

Tôi có đoạn html này trong index.htmltệp của mình :

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

và đây là của tôi 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: '/' });
}]);

Bây giờ khi tôi vừa truy cập trang, đây là những gì tôi nhận được trong url:

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

và khi tôi nhấp vào Add quotenút, tôi nhận được:

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

Vấn đề có thể là gì ở đây? Cảm ơn vì sự giúp đỡ

— Awa Melvine
nguồn

1

có thể liên quan? github.com/angular/angular.js/commit/…

— Khiếu nại

172

Chỉ cần sử dụng hashbang #!trong href:

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

Do aa077e8 , tiền tố băm mặc định được sử dụng cho các URL băm $ location đã thay đổi từ chuỗi rỗng ( '') thành bang ( '!').

Nếu bạn thực sự muốn không có tiền tố băm, thì bạn có thể khôi phục hành vi trước đó bằng cách thêm khối cấu hình vào ứng dụng của mình:

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

Để biết thêm thông tin, hãy xem

Xin lỗi khi lên ngựa cao của tôi nhưng ... Làm thế nào mà điều này được giải phóng? Đây là một lỗi lớn, phá vỡ. - @MiloTheGreat

Thay đổi vi phạm là # 14202 sẽ được hoàn nguyên vì đặc điểm kỹ thuật tham chiếu đã chính thức không được dùng nữa # 15715

Tôi sẽ kết thúc vấn đề này vì chúng tôi chưa có bất kỳ phản hồi nào. Vui lòng mở lại vấn đề này nếu bạn có thể cung cấp phản hồi mới.

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

— georgeawg
nguồn

16

Xin lỗi khi lên ngựa cao của tôi nhưng ... Làm thế nào mà điều này được giải phóng? Đây là một lỗi lớn, phá vỡ.

— MiloTheGreat

2

@MiloTheGreat vui lòng để lại phản hồi của bạn với Nhóm AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Chỉ cần đưa !vào href:

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

— v-tec
nguồn

7

Wow đã lãng phí hàng giờ đồng hồ theo các hướng dẫn không dùng nữa về định tuyến .. tất cả những gì tôi còn thiếu là dấu '!'. Cảm ơn bạn!

— Philippe Maes

Với tất cả jumpo mumpo về băm và băm, tôi chưa bao giờ nghĩ rằng "!" có vẻ như một ký tự bất hợp pháp xuất hiện mà không có tham chiếu Và nếu tôi chấp nhận nó và thừa nhận sự tồn tại của nó thì vấn đề đã được giải quyết.

— Mohammed Joraid

Tôi cũng vậy ... điều này đã làm tôi phát điên!

— VictorEspina 14/09/17

6

Tôi không thể định tuyến hoạt động trong 1.6.4 vì vậy tôi quyết định sử dụng góc 1.5.11 và định tuyến hoạt động tốt mặc dù tôi cần xác định tất cả các định tuyến của mình trong các hàm when (..) với dấu "/"

Nếu gắn bó với một phiên bản cũ hơn của góc cạnh là một lựa chọn cho bạn thì hãy xem xét nó vì nó có thể tiết kiệm thần kinh của bạ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
nguồn

Giữ nguyên trên 1.5 ảnh hưởng như thế nào đến việc nâng cấp lên Angular 2/3/4/5 / etc? NgUpgrade có hoạt động từ 1.5 đến 2+ không? Tôi cảm thấy rằng nâng cấp có thể không khả thi đối với chúng tôi. (yeah nhận xét này sẽ chủ yếu là vô hình và gào thét vào trong gió)

— 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
nguồn

0

Hãy thử cái này có thể Giúp ...

Trong html hoặc xem Trang

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

Trong trang tập lệnh

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

— Manikantan
nguồn