AngularJS: nhà cung cấp tuyến đường thay đổi "/" vào% 2F

Question

Tôi đang xây dựng một appplication AngularJS và tôi có vấn đề với URL khi xây dựng quan điểm thứ hai:

appContact.js của tôi trông như thế này:

(function() { 

    "use strict"; 

    var app = angular.module("appContacts", ["simpleControls", "ngRoute"]) 
     .config(function ($routeProvider, $locationProvider) { 

      $routeProvider.when("/", { 
       controller: "contactsController", 
       controllerAs: "vm", 
       templateUrl: "/views/contactsView.html" 
      }); 

      $routeProvider.when("/details/:firstName", { 
       controller: "contactsDetailsController", 
       controllerAs: "vm", 
       templateUrl: "/views/detailsView.html" 
      }); 

      $routeProvider.otherwise({ redirectTo: "/"}); 

      $locationProvider.html5Mode({ 
       enabled: true, 
       requireBase: false 
      }); 

     }); 
})(); 

trong HTML của tôi, tôi có liên kết này:

<a asp-controller="Contact" asp-action="Details" ng-href="#/details/{{contact.firstName}}" >{{ contact.firstName}}</a> 

Khi tôi di chuột trong trình duyệt tôi có liên kết đưa ra đúng như:

**http://localhost:8000/#/details/Matthew** 

Nhưng khi tôi nhấp vào liên kết để di chuyển đến trang mới những thay đổi URL để

**http://localhost:8000/#%2Fdetails%2FMatthew** 

Thay đổi "/" x% 2 làm cho các ứng dụng không thành công và một trang trống được hiển thị.

Bạn có biết tại sao điều này và cách khắc phục vấn đề này?

Tôi đã đọc các bài đăng tương tự của mình nhưng không có bài đăng nào trong số đó có vẻ hoạt động vì tôi không truy cập được URL được mã hóa trước khi nó đến Trình duyệt và lỗi xảy ra.

Cảm ơn

Rafael

Answer 1

Bạn kích hoạt HTML5Mode, có nghĩa là cố gắng góc cho chúng tôi history.pushState thay vì sử dụng băm để làm định tuyến. Đoán máy chủ của bạn không hỗ trợ pushState hoặc tùy chọn không được bật?

Tài liệu Api: https://docs.angularjs.org/api/ng/provider/ $ locationProvider

Answer 2

Tôi đáp ứng cùng một câu hỏi. Việc xóa '#' hoạt động cho tôi. Bạn có thể viết như thế này <a asp-controller="Contact" asp-action="Details" ng-href="/details/{{contact.firstName}}" >{{ contact.firstName}}</a>

Answer 3

Có thể điều này sẽ giúp bạn.

bao gồm $ locationProvider.hashPrefix (''); trong cấu hình của bạn.

  Example. 
     <div> 
      <a href ="#/table">table</a> 
      <a href ="#/addPage">addForm</a> 
     </div> 

     app.config(function($routeProvider, $locationProvider) { 
      $locationProvider.hashPrefix(''); 
     $routeProvider.when("/addPage", { 

          templateUrl :"partials/add.html", 
          controller : "ngRepeatTableCtrl" 

         }) 
         .when("/tablePage", { 

          templateUrl :"partials/table.html", 
          controller : "ngRepeatTableCtrl" 
        }) 
         .otherwise({ 
          templateUrl :"partials/table.html", 
          controller : "ngRepeatTableCtrl" 

         }); 


    }); 

Answer 4

tôi đã cùng một vấn đề, làm việc sau khi thêm locationProvider như dưới đây

myApp.config(["$routeProvider","$locationProvider", function ($routeProvider,$locationProvider) { 
    $routeProvider 
     .when("/home", { 
      templateUrl: "Templates/home.html" 
     }) 
     .when("/class", { 
      templateUrl: "Templates/class.html" 
     }).otherwise({ 
     redirectTo: "/class" 
    }); 
    $locationProvider.hashPrefix(''); 
}]); 

HTML

<ul> 
     <li> 
      <a href="#/home">Home</a> 
     </li> 
     <li> 
      <a href="#/class">Class</a> 
     </li> 
</ul>