html5Mode를 사용하는 Angularjs 일반 링크

html5Mode를 사용하는 Angularjs 일반 링크

html 5 모드에서 angularjs를 사용하고 있습니다.페이지에 있는 모든 href를 통제하는 것처럼 보입니다.하지만 앱의 동일한 도메인 내에 있는 다른 것에 대한 링크를 실제로 앱에 두고 싶지 않은 경우에는 어떻게 해야 할까요?예를 들어 pdf가 있습니다.

내가 하면<a href="/pdfurl">angular는 html5 모드를 사용하여 루트 공급자를 사용하여 로드해야 할 뷰를 결정합니다.하지만 브라우저가 정상적으로 해당 페이지로 이동하기를 원합니다.

이를 수행하려면 루트 공급자와 규칙을 만들고 window.location을 사용하여 올바른 페이지로 리다이렉트하는 방법밖에 없습니까?

HTML5 모드에서는 A 태그가 고쳐지지 않는 상황은 3가지입니다.각도의 docs에서

• 를 포함하는 링크target기여하다.예를 들어:<a href="/ext/link?a=b" target="_self">link</a>
• 다른 도메인을 가리키는 절대 링크Example: <a href="http://angularjs.org/">link</a>
• '/'로 시작하는 링크는 다음과 같은 경우 다른 기본 경로로 이어집니다.base정의되어 있다Example: <a href="/not-my-base/link">link</a>

따라서 케이스는 1이 됩니다.추가해주세요.target="_self"

Angular v1.3.0 에서는 로케이션 프로바이더의 새로운 설정 옵션이 있습니다.이것에 의해, 페이지의 모든 링크가 「히자킹」됩니다.

module.config(function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false
    });
});

모든 링크에 대해 이 동작을 해제하는 것은 의도하지 않을 수 있지만, 저처럼 사용하고 싶은 다른 사용자를 위해 이 글을 올립니다.$locationhtml5 모드에서만 모든 링크에 영향을 주지 않고 URL을 변경합니다.

Angular가 href를 제어하지 않으려면링크에 타겟아트리뷰트를 배치합니다.

따라서 PDF는 html5 모드를 통과하고 routeProvider와 브라우저는 해당 URL로 이동합니다.

다른 솔루션모든 링크가 정상적으로 동작합니다(페이지 새로고침).마크된 링크ng-href="/path"pushState에서 재생됩니다.작은 JS 해킹이 도움이 됩니다.

.config(["$locationProvider", function($locationProvider) {
    // hack for html5Mode customization
    $('a').each(function(){
        $a = $(this);
        if ($a.is('[target]') || $a.is('[ng-href]')){
        } else {
            $a.attr('target', '_self');
        }
    });

    $locationProvider.html5Mode(true);
}])

언급URL : https://stackoverflow.com/questions/16837704/angularjs-normal-links-with-html5mode