Angular에서 fragment 식별자 제거JS URL(# 기호)
angular.js URL에서 # 기호를 삭제할 수 있습니까?
뷰 변경 시 브라우저의 Back 버튼 등을 사용할 수 있고 URL을 param으로 갱신할 수 있으면 좋겠지만 # 기호는 필요 없습니다.
튜토리얼 routeProvider는 다음과 같이 선언됩니다.
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
# 없이 동일한 기능을 사용할 수 있도록 편집할 수 있습니까?
네, 다음과 같이 설정하고 설정해야 합니다.true:
angular.module('phonecat', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
$locationProvider.html5Mode(true);
}]);
html5 이력 API에 대한 브라우저 지원을 확인하십시오.
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
예쁜 URL의 해시 태그를 삭제하고 최소화 후 코드를 작동시키려면 아래 예시와 같이 코드를 구성해야 합니다.
jobApp.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus', {
templateUrl: 'views/job-list.html',
controller: 'JobListController'
}).
when('/menus/:id', {
templateUrl: 'views/job-detail.html',
controller: 'JobDetailController'
});
//you can include a fallback by including .otherwise({
//redirectTo: '/jobs'
//});
//check browser support
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);
.config 뒤에 web 규칙을 .$locationProvider.html5Mode(true)입니다.app.js
호프, 누굴 좀 도와줘
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
을 index.html에 했습니다.<head>
<base href="/">
서버에 iis용 URL rewriter를 설치하는 것을 잊지 마십시오.
또한 Web API 및 IIS를 사용하는 경우 이 일치 URL은 API 호출을 변경하기 때문에 작동하지 않습니다. 세 입력세 행을하고, "" (" " " " " ) " 에서 합니다.www.yourdomain.com/api
에 있는 경우.MVC와 AngularJs를 사용하는 NET 스택에서는 다음과 같이 URL에서 '#'을 삭제해야 합니다.
를 _Layout 페이지: _Layout 로 설정합니다.
<head> <base href="/"> </head>다음 앱 구성에 과 같이 합니다.
$locationProvider.html5Mode(true)위에서는 URL에서 '#'이 삭제되지만 페이지 새로고침이 작동하지 않습니다.예를 들어 'yoursite.com/about' 페이지 새로고침 시 404가 표시됩니다.이는 MVC가 각도 라우팅에 대해 인식하지 못하고 MVC 패턴에 따라 MVC 라우팅 경로에 존재하지 않는 'about'의 MVC 페이지를 찾기 때문입니다.이 문제를 해결하려면 모든 MVC 페이지 요청을 단일 MVC 뷰로 전송해야 합니다.이러한 요구를 모두 캡처하는 루트를 추가하면 됩니다.
url:
routes.MapRoute(
name: "App",
url: "{*url}",
defaults: new {
controller = "Home", action = "Index"
}
);
html5 모드를 조정할 수 있지만 이는 페이지의 html 앵커에 포함된 링크와 브라우저 주소 표시줄에 URL이 어떻게 표시되는지에 대해서만 작동합니다.페이지 외부에서 해시태그(html5 모드 유무) 없이 서브페이지를 요구하려고 하면 404 오류가 발생합니다.예를 들어, 다음 CURL 요청은 html5 모드에 관계없이 page not found 오류를 발생시킵니다.
$ curl http://foo.bar/phones
다음과 같이 루트/홈 페이지가 반환됩니다.
$ curl http://foo.bar/#/phones
그 이유는 해시태그 후 요청이 서버에 도착하기 전에 삭제되기 때문입니다. ★★★★★★★★★★★★★★★★★★★★★★★★★http://foo.bar/#/portfolio에 으로 도착하다http://foo.bar는 "200 OK"에 대해 200 응답으로 응답합니다(http://foo.bar나머지는 에이전트/클라이언트가 처리합니다.
따라서 다른 사람과 URL을 공유하려면 해시태그를 추가하는 것 외에 다른 방법이 없습니다.
에 .
1. 먼저 앱 구성 파일에서 $locationProvider.html5Mode(true)를 설정합니다.
-(:):
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });
2. 두 번째로 메인 페이지 내에서 <base>를 설정합니다.
-> (:: ->)
<base href="/">
$location 서비스는 HTML5 History API를 지원하지 않는 브라우저의 경우 해시 파트 메서드로 자동 폴백됩니다.
저의 솔루션은 .htaccess를 생성하여 #Sorian 코드를 사용하는 것입니다..htaccess를 사용하지 않으면 #을(를) 삭제하지 못했습니다.
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
서류에 의하면다음을 사용할 수 있습니다.
$locationProvider.html5Mode(true).hashPrefix('!');
브라우저가 HTML 5를 지원하지 않는 경우: 걱정하지 마십시오. 해시방 모드로 폴백됩니다. 때문에 꼭
if(window.history && window.history.pushState){ ... }에 의한
예를 들어 다음과 같습니다.<a href="/other">Some URL</a>
HTML5 브라우저: angular는 자동으로 로 리다이렉트 됩니다.example.com/other
HTML5 브라우저가 아닌 경우: angular는 자동으로 로 리다이렉트 됩니다.example.com/#!/other
이 답변에서는 nginx를 리버스 프록시로 사용하고 있으며 $locationProvider.html5mode를 true로 이미 설정했다고 가정합니다.
-> 위의 멋진 것들로 인해 여전히 어려움을 겪고 있는 분들을 위해.
물론 @maxim grach 솔루션은 정상적으로 동작하지만, 해시태그가 포함되어 있지 않은 요구에 대한 대응 방법은 php가 404를 전송하고 있는지 확인하고 URL을 다시 쓰는 것입니다.다음은 nginx의 코드입니다.
php 로케이션에서 404 php 에러를 검출하고, 다른 로케이션으로 리다이렉트 합니다.
location ~ \.php${
...
fastcgi_intercept_errors on;
error_page 404 = /redirect/$request_uri ;
}
그런 다음 리다이렉트 위치에 URL을 다시 작성하고 proxy_pass 데이터를 전송하며, 물론 웹 사이트 URL을 내 블로그 URL 위치에 둡니다.(요청: 시도한 후에만 질문)
location /redirect {
rewrite ^/redirect/(.*) /$1;
proxy_pass http://www.techromance.com;
}
그리고 마법을 봐.
그리고 그건 확실히 효과가 있어, 적어도 나한테는.
index하여 모든 index.html을 합니다.모두 삭제#부에서<a href="#/aboutus">About Us</a> so it must look like 그러니까 꼭 그런 것처럼 보여야 해<a href="/aboutus">About Us</a>.tml 쓰기 indextml 쓰기 제tml 쓰기 드 write . in write다의들니갑 tag에 index어)<base href="/">마지막 메타 태그 직후에요
이제 라우팅 JS 주입에서$locationProvider글을 쓰세요.$locatonProvider.html5Mode(true);이 같은 뭔가가 있습니다.
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/aboutus",{templateUrl:"Templates/aboutus.html"})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
$locationProvider.html5Mode(true);
});
상세한 것에 대하여는, 이 비디오를 봐 주세요.https://www.youtube.com/watch?v=XsRugDQaGOo
이거 하기엔 너무 늦은 것 같아.단, app.module imports에 다음 구성을 추가하면 작업이 수행됩니다.
RouterModule.forRoot(routes, { useHash: false })
스텝 1: $location Provider 서비스를 앱 구성 컨스트럭터에 주입합니다.
스텝 2: 앱 컨피규레이션의 컨스트럭터에 코드라인 $locationProvider.html5Mode(true)를 추가합니다.
순서 3: 컨테이너(랜딩, 마스터 또는 레이아웃) 페이지에서 다음과 같은html 태그를 추가합니다.<base href="/">태그 안에 있습니다.
스텝 4: 모든 앵커태그에서 라우팅 설정의 모든 '#'을 삭제합니다.예를 들어 href="#home"은 href="home"이 되고, href="#about"은 herf="about"이 되며, href="#contact"는 href="contact"가 됩니다.
<ul class="nav navbar-nav">
<li><a href="home">Home</a></li>
<li><a href="about">About us</a></li>
<li><a href="contact">Contact us</a></li>
</ul>
추가만 하면 됩니다.$locationProvider인
.config(function ($routeProvider,$locationProvider)
그리고 나서 추가한다.$locationProvider.hashPrefix('');끝나고
.otherwise({
redirectTo: '/'
});
바로 그겁니다.
언급URL : https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol
'programing' 카테고리의 다른 글
| MVC ajax json을 컨트롤러에 게시하는 액션 메서드 (0) | 2023.02.25 |
|---|---|
| WP JWT 인증으로 Facebook 로그인 (0) | 2023.02.25 |
| TypeError: 캐시할 수 없는 유형: 'dict' (dict가 다른 dict의 키로 사용되는 경우) (0) | 2023.02.20 |
| AngularJS가 약속하는 콜백은 Jasmine에서 트리거되지 않음JS 테스트 (0) | 2023.02.20 |
| jsfiddle의 js를 디버깅하는 방법 (0) | 2023.02.20 |