각도 : $ http 404 오류 처리

Question

나는 2 ng-includes가있는 HTML이 있습니다. ng-include src 중 하나가 서버에없는 경우를 고려하십시오. 현재 빈 HTML을로드하고 브라우저 콘솔에 http-404 파일을 찾을 수 없다는 메시지가 표시됩니다.

그래서이 경우, 특정 오류 페이지 (서버에있는 기본 오류 페이지)를 기본 오류 페이지와 nginclude를 통해로드 된 적절한 div로 표시하는 절반 만로드하려고합니다.

내 논리는 HTTP 인터셉터를 사용하여 모든 http 호출을 가로 채고 있습니다. 404가 발생할 때마다 div에로드해야하는 기본 오류 페이지를 반환하고 싶습니다. 그래서 올바른 HTTP 호출을 조롱하지만 대신 오류 페이지를 보내는, 내가 생각하는 적절한 div로드해야합니다.

그러나 이것은 일어나지 않습니다. :). 나는 기본 window.load ('')로 시도했다. 그런 다음 페이지 상단에로드되고 페이지 전체에 표시됩니다.

아니면 div id를 캡처해야합니까? 그렇다면 id를 기본 오류 HTML로로드합니까?

여기에 의견이 필요합니다.

Answer 1

이러한 상황을 처리하려면 http 인터셉터 (여기에서 문서 찾기 : $http)를 사용할 수 있습니다.

인터셉터는 상태 코드 나는했습니다 200

과 함께 초기 대응을위한 데이터로 설정, 404 응답을 잡을 서버와 에서으로 404.html 페이지를로드 할 수있다 그것을 해결하는 방법을 보여주는 프로젝트를 만들었습니다.

저장소 : https://github.com/matys84pl/angularjs-nginclude-handling-404/

가 main.js 파일을 자세히 살펴 보자.

Answer 2

ng-include 값을 채우기 전에 $ n을 통해 원하는 ng-include url을 직접 전달하여 비슷한 결과를 보였습니다.

$http({ url: url, method: "GET", cache: $templateCache}).success(function(data) { 
     /* there was a template for this url - set the $scope property that 
     * the ng-include is using 
     */ 
     $scope.templateUrl = url; 
    }).error(function() { 
     // there was not a template for this url - set the default one 
     $scope.templateUrl = defaultUrl; 
    }); 

여기에 트릭은 $ HTTP에 캐시 인수로 $ templateCache을 통과 -이 인출 된 URL이 사용하는 겨하는-포함 동일한 캐시에 저장하는 것을 의미하고, 그래서 당신은 유효한 템플릿을 찾을 때 templateUrl 속성에 설정하면 ng-include는 템플릿을 다시 가져올 필요가 없습니다.