2017-04-20 35 views
0

我在我的web.config中使用了URL重寫,它允許我添加不包含#的URL,並允許我使用「name」作爲參數來檢索URL,例如http://somewebsite.com/name以檢索模板文件。當我將這個參數與XMLHTTPRequest一起使用時,頁面始終會返回200響應,因爲所有URL都基本上由web.config重寫進行了驗證。有沒有一種方法可以在Angular中創建路線,無論文件是否存在,如果不返回自定義404頁面,都會返回正確的模板?正如我在我的網站的主頁上,我包括一個模板文件,其中顯示標題ng視圖,然後頁腳。當我查看諸如http://somewebsite.com/random這樣的頁面並且隨機不對應於頁面時,主頁將繼續加載而不顯示404頁面。該頁面將繼續無間斷地加載。如何使用AngularJS在IIS上不使用#重寫URL?

========== web.config設置==============

<system.webServer> 
<rewrite> 
    <rules> 
    <rule name="AngularJS Routes" stopProcessing="true"> 
     <match url=".*" /> 
     <conditions logicalGrouping="MatchAll"> 
     <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
     <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
     <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="/" /> 
    </rule> 
    </rules> 
</rewrite> 

======= Angular Route設置===============

angular.module('main').config(['$routeProvider', '$locationProvider', 
function($routeProvider, $locationProvider) 
{ 
    //we cannot use services or factories so using the anguar $http provider is 
    //out of question. Instead we will use a legacy HTTP AJAX request and return 
    //the status of the said page. 

    var checkUrlStatus = function(url){ 
     console.log(url + '.asp'); 
     var http = new XMLHttpRequest(); 
     http.open('GET', url, false); 
     http.send(); 
     console.log(http.status); 
     return (http.status !== 404 ? url : 'https://somewebsite.com/404.asp'); 
    } 


    //removes the hash from the urls, but must be used in conjunction with 
    //the web.config or apache config file 
    if(window.history && window.history.pushState){ 
    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: false 
    }); 
     } 
    //conditions to route page to the correct template. See if the template 
    //returns the right resonse with the checkUrl function and proceed forward. 
$routeProvider.when('/:param',{ 

     templateUrl: function(params){ 
       //return checkUrlStatus('https://somewebsite.com/pages/accounting.asp');  
      console.log(checkUrlStatus('https://somewebsite.com/pages/bob.asp') ); 
      //return "/pages/"+url_param+".asp"; 
     } 
    }).when('/',{ 
    templateUrl: function(){ 
     return 'home.asp'; 
    } 

}).otherwise({ 
    templateUrl: function(){ 
     return 'home.asp'; 

    } 
})  

} 

]);

+1

您不能。 URL的「片段標識符」部分不會發送到服務器,因此服務器無法更改它。你必須在客戶端腳本中完成。 – Dai

+0

我意識到片段部分沒有發送到服務器,這就是爲什麼我想發送一個ajax請求到請求的文件,看看它是否存在,但是當我這樣做時,服務器在檢查之前將重寫爲「/」看看這個文件是否存在,以便在200返回每一個請求。在看到文件是否存在或繞過這個功能之後是否可以重寫?我應該尋找一個特殊的ID標籤嗎? –

回答

0

問題是我可以向頁面發出請求,但是頁面總是會返回200,因爲URL重寫正在返回/或者我的應用程序的主頁。所以相反,我創建了一個標籤「is-content」作爲我頁面上的第一個類,當有這個頁面的AJAX請求時,我尋找這個類。如果存在,我顯示模板的內容,或者顯示我的自定義404頁面的內容。以下是用於測試此功能的示例:

var checkUrlStatus = function(url){ 
     var http = new XMLHttpRequest(); 
     http.open('GET', url, false); 
     http.send(); 
     var responseText = http.responseText; 
     var htmlObject = document.createElement('div'); 
     htmlObject.innerHTML = responseText; 
     var htmlReturn = htmlObject; 
     if (htmlReturn.getElementsByClassName('is-content').length > 0){ 
      return url; 
     } 
     else { 
      return 'https://testwebsite.com/pages/404.asp'; 
     } 


    }