AngularJS HTML5 모드 - 서버 고유의 변경 없이 다이렉트 링크는 어떻게 동작합니까?

AngularJS HTML5 모드 - 서버 고유의 변경 없이 다이렉트 링크는 어떻게 동작합니까?

주의: 이 질문에는 다음과 같은 내용이 포함될 수 있습니다.

Java에서 해시뱅이 없는 클라이언트 측 MVC 프레임워크 북마크 지원 방법

각진 앱을 전환하고 있습니다.hashtags에 대해서html5mode 성공적으로 설정 완료

$locationProvider.html5Mode(true);

랜딩 페이지(index.html)의 모든 링크는 정상적으로 동작합니다.

문제는 부분 URL을 직접 참조하면 서버 엔드포인트 정의가 클라이언트 측 정의 루트에 결합되지 않기 때문에 당연히 404가 됩니다.

따라서 HTML5가 없으면 SEO가 아닌 해시뱅을 얻을 수 있지만, HTML5를 사용하면 랜딩 페이지(부트스트랩이 각진 페이지) 이외에는 북마크 할 수 없습니다.

디폴트 랜딩 페이지(index.html)를 먼저 요구했을 경우(예: htpp://mydomain.example/):

1. 브라우저가 서버에 index.html을 요구합니다.
2. 서버가 index.html을 반환하고 브라우저가 각도 프레임워크를 로드합니다.
3. URL 의 변경이 클라이언트측 라우터에 송신되어 적절한 부분/s 가 로드됩니다.

, () () ( )) () () () () () () () () () () () () () () () () () () () ()http://mydomain.example/foo됩니다.

1. 브라우저가 서버에서 mydomain/foo를 요청합니다.
2. 리소스가 존재하지 않습니다.
3. 서버가 404를 반환한다.

이 이야기에는 뭔가가 빠져 있어요. 다만 뭐가 뭔지 모르겠어요.여기 내가 볼 수 있는 답은 두 개뿐인데...

• 그것은 고의로 만들어졌다.원래 이렇게 하는 거야?사용자는 항상 클라이언트 MVC 프레임워크의 부트스트랩 페이지(일반적으로 index.html)에 접속하여 거기에서 네비게이트해야 합니다.상태를 저장할 수 없고 북마크할 방법이 없기 때문에 이상적이지 않습니다.기어다니는 건 말할 것도 없고
• 서버 솔루션서버 사이드 트릭으로 해결되었습니까?예를 들어, 모든 요구에 대해 index.html을 반환하고 추가 컨텍스트를 사용하여 라우터를 즉시 호출합니다.만약 그렇다면, 이것은 Angular의 목적에 반하는 것이다.JS는 완전히 클라이언트 측이며 해킹처럼 보입니다.

앵귤러JS 문서에는 실제로 다음과 같은 내용이 기재되어 있습니다.

서버측 이 모드를 사용하려면 서버측에서 URL을 고쳐 써야 합니다.기본적으로 어플리케이션의 엔트리 포인트에 대한 모든 링크(index.html 등)를 고쳐 써야 합니다.

이 경우 Java 기반 솔루션은 서버에 "모든 URL을 index.html에 매핑"하도록 지시하는 것입니다.이것은 임의의 HTTP 서버 또는 컨테이너에서 실행할 수 있습니다.애플리케이션을 HTTP 서버에 의존하지 않고(Apache 대 NginX 또는 Tomcat/JBoss에만 해당) 싶기 때문에 Java/Servert를 사용하여 구현했습니다.

web.xml의 경우:

  <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
      <servlet-name>StaticServlet</servlet-name>
      <jsp-file>/index.jsp</jsp-file>
  </servlet>

  <servlet-mapping>
      <servlet-name>StaticServlet</servlet-name>
      <url-pattern>/app</url-pattern>
  </servlet-mapping>

index.jsp는 다음과 같습니다.

<%@ include file="index.html" %>

또한 index.html 내의 태그에 다음 항목을 추가합니다.

<base href="/app" />

저는 제 PHP 사이트를 위해 이것에 대해 잠시 고민했습니다.서버 사이드 코드를 모두 /api 루트에 걸어 Angular에서 분리합니다.apache 설정을 업데이트하여 생각해 낸 솔루션은 다음과 같습니다.

RewriteEngine on
#let the php framework do its thing
RewriteRule ^(api/.*)$ index.php?url=$1 [QSA,L,NC]
#let angular do its thing
RewriteCond %{REQUEST_FILENAME} !-f      
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.html [NC,L]

http://www.awnage.com/2013/10/10/taking-flight-with-angularjs/에서 Flight PHP 프레임워크를 사용하여 이 작업을 어떻게 진행했는지 정리했습니다.

링크하여 사용자의 주소 표시줄에 배치하는 URL은 서버상의 유효한 콘텐츠를 참조해야 합니다.가능한 경우 올바른 콘텐츠를 참조해야 합니다.물론 모든 URL에 대해 동일한 페이지를 제공하고 클라이언트 코드를 해제하여 실제 콘텐츠를 로드하면 해시 URL 세계에서와 거의 동일하게 작동합니다.사실, 그게 최소한의 방법이에요.그러나 이는 또한 "인터넷을 파괴하는" 것으로 간주되기 때문에 HTML5와 History API는 의미론적으로 올바른 URL에 링크하는 방법을 제공합니다.

예를 들어, https://github.com/kriskowal/q에 접속하여 "filename"을 클릭하면 클라이언트 측 코드가 페이지를 벗어나지 않고 파일브라우저에 "filename" directory를 로드하고 URL 바에 https://github.com/kriskowal/q/tree/master/examples이 표시됩니다.https://github.com/kriskowal/q/tree/master/examples 에 직접 접속하면, 클라이언트측의 코드를 중개하지 않고, 「클라이언트」디렉토리의 컨텐츠를 브라우저에 직접 송신할 수 있습니다.네, "단일 페이지 앱"에서는 불가능할 수도 있지만 가능한 한 언제든지 실행하는 것이 옳습니다.

언급URL : https://stackoverflow.com/questions/17646843/angularjs-html5-mode-how-do-direct-links-work-without-server-specific-changes