AngularJS: मार्ग प्रदाता परिवर्तन "/"% 2F में

Question

मैं एक AngularJS appplication निर्माण कर रहा हूँ और मैं यूआरएल जब दूसरे दृश्य के निर्माण के साथ समस्या है:

मेरे appContact.js इस तरह दिखता है:

(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 
      }); 

     }); 
})(); 

मेरी HTML में मैं इस लिंक है:

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

जब मैं ब्राउज़र में मंडराना मैं की तरह सही प्रस्तावित लिंक है:

+०१२३५१६४१०६

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

लेकिन जब मैं नए पेज पर बदल रहा है

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

के लिए URL परिवर्तन नेविगेट करने के लिए लिंक पर क्लिक करें "/"% 2 से एप्लिकेशन विफल बनाने के लिए और एक रिक्त पृष्ठ दिखाया गया है।

क्या आप जानते हैं कि यह क्यों है और इस समस्या को कैसे ठीक किया जाए?

मैंने पहले से ही इसी तरह की पोस्ट पढ़ी हैं लेकिन उनमें से कोई भी काम नहीं कर रहा है क्योंकि ब्राउज़र में पहुंचने से पहले मुझे एन्कोड किए गए यूआरएल तक पहुंच नहीं है और त्रुटि वहां है।

धन्यवाद

राफेल

Answer 1

आप HTML5Mode, जो हमारे लिए history.pushState हैश का उपयोग कर मार्ग करने के लिए के बजाय कोणीय कोशिश करता इसका मतलब है सक्षम होना चाहिए। मान लें कि आपका सर्वर pushState का समर्थन नहीं करता है या विकल्प सक्षम नहीं है?

एपीआई डॉक्स: https://docs.angularjs.org/api/ng/provider/ $ locationProvider

Answer 2

मैं एक ही सवाल को पूरा। मेरे लिए '#' काम को हटा रहा है। आप इस <a asp-controller="Contact" asp-action="Details" ng-href="/details/{{contact.firstName}}" >{{ contact.firstName}}</a>

Answer 3

जैसे लिख सकते हैं यह आपकी मदद करेगा।

में $ locationProvider.hashPrefix ('') शामिल है; आपकी कॉन्फ़िगरेशन में।

  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

मैं की तरह locationProvider जोड़ने के बाद काम कर रहे एक ही मुद्दा था,

नीचे

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(''); 
}]); 

एचटीएमएल

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