AngularJS가있는 IIS에서 #없이 URL을 다시 쓰는 방법은 무엇입니까?

Question

web.config에서 URL 재 작성을 사용하여 #이 포함되지 않은 URL을 추가하고 http://somewebsite.com/name과 같은 URL을 볼 수있게합니다. 예를 들어 "name"을 매개 변수로 사용하여 템플릿 파일을 검색 할 수 있습니다. 이 param을 XMLHTTPRequest와 함께 사용하면 페이지가 항상 200 응답을 반환합니다. 왜냐하면 모든 URL은 기본적으로 web.config 다시 작성에 의해 유효성이 검사되기 때문입니다. 파일이 존재하는지 여부에 관계없이 올바른 템플릿을 반환하고 맞춤 404 페이지를 반환하지 않는 경로를 Angular로 만들 수있는 방법이 있습니까? 그것이 나의 웹 사이트의 나의 홈페이지에 있기 때문에, 나는 header-ng-view와 footer를 표시하는 template 파일을 포함한다. http://somewebsite.com/random과 같은 페이지를 볼 때 무작위가 페이지에 해당하지 않으면 404 페이지를 표시하지 않고 홈 페이지가 계속로드됩니다. 페이지가 멈추지 않고 계속로드됩니다.

==========의 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.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'; 

    } 
})  

} 

]);

Answer 1

문제는 페이지를 요청할 수 있지만 URL 재 작성 또는 내 앱의 홈 페이지가 반환되므로 페이지가 항상 200을 반환한다는 것입니다. 그래서 대신 내 페이지의 첫 번째 클래스로 "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'; 
     } 


    }