html5Mode를 사용한 Angularjs 일반 링크

html5Mode를 사용한 Angularjs 일반 링크

---

html 5 모드에서 angularjs로 작업하고 있습니다. 페이지의 모든 href를 제어하는 ​​것으로 보입니다. 그러나 앱의 동일한 도메인 내에 있지만 실제로는 앱에없는 링크를 원하면 어떻게해야합니까? 예를 들어 pdf가 있습니다.

내가 <a href="/pdfurl">각도를 수행 하면 html5mode를 사용하고 경로 공급자를 사용하여 어떤 뷰를로드해야하는지 결정합니다. 하지만 실제로 브라우저가 정상적인 방식으로 해당 페이지로 이동하기를 원합니다.

이를 수행하는 유일한 방법은 경로 공급자를 사용하여 규칙을 만들고 window.location을 사용하여 올바른 페이지로 리디렉션되도록하는 것입니까?

---

HTML5 모드에서 A 태그가 다시 작성되지 않는 세 가지 상황이 있습니다. 각도 문서에서

• 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 rewriteLinks부터 위치 공급자에 대한 새로운 구성 옵션이 있습니다. 그러면 페이지의 모든 링크가 "도용"됩니다.

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

모든 링크에 대해이 동작을 무시하는 것은 귀하의 의도가 아닐 수 있지만 저와 같이 $location모든 링크에 영향을주지 않고 URL을 변경 하기 위해 html5 모드에서만 사용하려는 다른 사용자를 위해이 내용을 게시 합니다.

---

Angular가 href를 제어하지 않으려는 경우. 링크에 대상 속성을 배치하십시오.

따라서 PDF는 html5mode와 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