$location / html5 모드와 해시방 모드 전환 / 링크 변경
Angular는 tempaltes 내의 앵커 태그의 href 속성에 나타나는 URL을 html5 모드든 hashbang 모드든 동작하도록 고쳐 쓴다는 인상을 받았습니다.로케이션 서비스의 문서에는 HTML 링크 개서가 해시방 상황을 처리한다고 기재되어 있는 것 같습니다.따라서 HTML5 모드가 아닐 때는 해시가 삽입되고 HTML5 모드에서는 삽입되지 않을 것으로 예상됩니다.
그러나 개서가 이루어지지 않고 있는 것 같습니다.다음 예에서는 모드 변경만 허용하지 않습니다.응용 프로그램의 모든 링크는 수동으로 다시 작성해야 합니다(또는 실행 시 변수에서 파생됩니다).모드에 따라 모든 URL을 수동으로 다시 작성해야 합니까?
Angular 1.0.6, 1.1.4 또는 1.1.3에서 클라이언트 측 URL 개서가 진행되지 않습니다.모든 href 값은 해시방 모드에서는 #/, html5 모드에서는 /를 선두에 붙여야 합니다.
개서를 실시하기 위해서 필요한 설정이 있습니까?제가 의사록을 잘못 읽었나요?다른 바보 같은 짓을 하는 거야?
다음은 작은 예입니다.
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>
<body>
<div ng-view></div>
<script>
angular.module('sample', [])
.config(
['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
//commenting out this line (switching to hashbang mode) breaks the app
//-- unless # is added to the templates
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'this is home. go to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
부록: 제 질문을 다시 읽을 때, 저는 누가 언제 다시 쓰고 싶은지에 대한 충분한 명확성 없이 "다시 쓰기"라는 용어를 사용했다는 것을 알게 되었습니다.문제는 Angular가 경로를 렌더링할 때 URL을 다시 작성하도록 하는 방법과 두 모드에서 JS 코드의 경로를 균일하게 해석하도록 하는 방법입니다.이것은 웹 서버가 HTML5 호환 요청의 개서를 수행하도록 하는 방법에 관한 것이 아닙니다.
Angular에 대한 설명서가 명확하지 않습니다.JS 라우팅해시방과 HTML5 모드에 대해 설명합니다.사실 Angular는JS 라우팅은 다음 3가지 모드로 동작합니다.
- 해시방 모드
- HTML5 모드
- HTML5 모드의 해시방
각 모드에는 각각의 LocationUrl 클래스(LocationHashbangUrl, LocationUrl 및 LocationHashbangIn)가 있습니다.HTML5Url).
URL 개서를 시뮬레이트하려면 실제로 html5 모드를 true로 설정하고 다음과 같이 $sniffer 클래스를 장식해야 합니다.
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
이제 더 자세히 설명하겠습니다.
해시방 모드
설정:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(false)
.hashPrefix('!');
이는 다음과 같이 HTML 파일에 해시가 있는 URL을 사용해야 하는 경우입니다.
<a href="index.html#!/path">link</a>
에서 다음.http://www.example.com/base/index.html#!/base/path
순수 해시방 모드에서 볼 수 있듯이 HTML 파일 내의 모든 링크는 "index.html#!" 등의 베이스로 시작해야 합니다.
HTML5 모드
설정:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
베이스를 HTML 파일로 설정해야 합니다.
<html>
<head>
<base href="/">
</head>
</html>
이 모드에서는 HTML 파일에서 # 없이 링크를 사용할 수 있습니다.
<a href="/path">link</a>
브라우저 링크:
http://www.example.com/base/path
HTML5 모드의 해시방
이 모드는 실제로 HTML5 모드를 사용하지만 호환되지 않는 브라우저일 때 활성화됩니다.$sniffer 서비스를 꾸미고 이력을 false로 설정하면 호환되는 브라우저에서 이 모드를 시뮬레이트할 수 있습니다.
설정:
$provide.decorator('$sniffer', function($delegate) {
$delegate.history = false;
return $delegate;
});
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true)
.hashPrefix('!');
베이스를 HTML 파일로 설정합니다.
<html>
<head>
<base href="/">
</head>
</html>
이 경우 HTML 파일에 해시를 사용하지 않고 링크를 쓸 수도 있습니다.
<a href="/path">link</a>
브라우저 링크:
http://www.example.com/index.html#!/base/path
미래의 모피 독자 여러분, 만약 당신이 Angular 1.6을 사용한다면, 당신은 또한 변경할 필요가 있습니다.hashPrefix:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('');
}]);
HTML 의 도 잊지 말아 주세요.<head>:
<head>
<base href="/">
...
</head>
changelog 상세 정보
이것을 깨닫는 데 시간이 걸려서 이렇게 작동하게 되었습니다.# for SEO の Angular WebAPI ASP Routing 。
- Index.html에 추가 - base href="/">
$locationProvider.html5Mode(true); app.config에 추가합니다.
이미지를 업로드 할 때 무시해야 할 컨트롤러(홈 컨트롤러에 있는 컨트롤러)가 필요했기 때문에 Route Config에 그 규칙을 추가했습니다.
routes.MapRoute( name: "Default2", url: "Home/{*.}", defaults: new { controller = "Home", action = "SaveImage" } );Global.asax에서 다음을 추가합니다.API와 이미지 업로드 경로를 무시하면 정상적으로 기능합니다.그렇지 않으면 다른 모든 것을 재루팅할 수 있습니다.
private const string ROOT_DOCUMENT = "/Index.html"; protected void Application_BeginRequest(Object sender, EventArgs e) { var path = Request.Url.AbsolutePath; var isApi = path.StartsWith("/api", StringComparison.InvariantCultureIgnoreCase); var isImageUpload = path.StartsWith("/home", StringComparison.InvariantCultureIgnoreCase); if (isApi || isImageUpload) return; string url = Request.Url.LocalPath; if (!System.IO.File.Exists(Context.Server.MapPath(url))) Context.RewritePath(ROOT_DOCUMENT); }리다이렉트에는 반드시 $location.url('/XXX')을 사용하고 window.location ...을 사용하지 마십시오.
절대 경로를 사용하여 CSS 파일을 참조합니다.
가 아니라
<link href="app/content/bootstrapwc.css" rel="stylesheet" />
마지막 메모 - 이렇게 하면 웹 구성을 완전히 제어할 수 있으므로 웹 구성을 수행할 필요가 없습니다.
이게 도움이 됐으면 좋겠는데, 알아내는 데 시간이 좀 걸렸어요.
HTML5 모드와 고정 토큰을 사용하여 응용 프로그램에 액세스한 후 해시방 방식으로 전환하고 싶었습니다(사용자가 페이지를 새로 고칠 수 있도록 토큰을 보관합니다).
내 앱에 액세스하기 위한 URL:
http://myapp.com/amazing_url?token=super_token
그런 다음 사용자가 페이지를 로드할 때:
http://myapp.com/amazing_url?token=super_token#/amazing_url
그 후 사용자가 탐색하는 경우:
http://myapp.com/amazing_url?token=super_token#/another_url
이것에 의해, URL 에 토큰을 보관해, 유저가 열람하고 있는 상태를 유지합니다.URL이 조금 보이지 않게 되었습니다만, 완벽한 방법은 없습니다.
따라서 HTML5 모드를 활성화하지 않고 다음 컨트롤러를 추가합니다.
.config ($stateProvider)->
$stateProvider.state('home-loading', {
url: '/',
controller: 'homeController'
})
.controller 'homeController', ($state, $location)->
if window.location.pathname != '/'
$location.url(window.location.pathname+window.location.search).replace()
else
$state.go('home', {}, { location: 'replace' })
언급URL : https://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting
'programing' 카테고리의 다른 글
| jQuery를 사용하여 비동기적으로 이미지 로드 (0) | 2023.03.07 |
|---|---|
| 열 값을 null SQL Developer로 명시적으로 설정합니다. (0) | 2023.03.07 |
| 아래로 스크롤할 때 플로팅 메뉴바를 작성하는 방법 (0) | 2023.03.07 |
| 다중 응답 AJAX 요청 (0) | 2023.03.07 |
| Gson에서 JSON 문자열: 큰따옴표 제거 (0) | 2023.03.07 |