AngularJS: 디플링으로 $locationProvider.html5Mode를 활성화하는 방법
Angular에서 html5Mode를 활성화하는 경우경유 JS$locationProvider.html5Mode(true)사이트 안쪽 페이지에 접속하면 네비게이션이 왜곡되어 있는 것 같습니다.
예를 들어 다음과 같습니다.
http://www.site.com
루트로 이동하면 사이트의 모든 링크, Angular's를 클릭할 수 있습니다.$routeProvider는 사이트를 탐색하고 올바른 뷰를 로드합니다.http://www.site.com/news/archive
그러나 이 URL로 이동하면(또는 위와 같은 deeplink에 있을 때 새로고침을 누르면) 이 네비게이션이 기대대로 작동하지 않습니다.먼저 $locationProvider.html5Mode의 Documentation에서 규정하는 바와 같이 서버상의 모든 URL을 잡아냅니다.otherwise루트 도메인과 동일한 html을 반환합니다.하지만 만약 제가 그 때$location내부에서 반대하다run각도의 함수, 그것은 나에게 말한다.http://www.site.com나의host그리고 그것/archive나의path.그$routeProvider에 도착하다.otherwise()조항, 나는 오직/news/archive유효한 경로로 지정됩니다.그리고 앱이 이상한 걸 해요.
서버상의 개서를 다른 방법으로 실시할 필요가 있는 경우도 있습니다.혹은 각진 부분을 지정할 필요가 있습니다만, 현시점에서는 각진 부분이 없는 경로가 왜 각진 부분인지 모르겠습니다./news세그먼트 포함.
예 main.disples:
// Create an application module
var App = angular.module('App', []);
App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/login', {
templateUrl: 'templates/login.html'
})
.when('/news', {
templateUrl: 'templates/news.html'
})
.when('/news/archive', {
templateUrl: 'templates/newsarchive.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/home'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
// Initialize the application
App.run(['$location', function AppRun($location) {
debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);
요구에 따라 편집하여 서버 측의 상세 내용을 편집한다.서버측은 zend 프레임워크의 라우팅에 따라 조직되며, 서버측은 자체 루트를 처리합니다(특정 프런트 엔드에 데이터를 제공하기 위해)./apiurls, 그리고 마지막에는 catch-all 루트가 있습니다.특정 다른 루트가 바인드되지 않은 경우 루트루트와 동일한 html을 제공합니다.디플링크된 루트에서 기본적으로 홈페이지 html을 제공합니다.
문제를 조사한 후 업데이트2에서 이 라우팅은 Angular 1.0.7에서는 정상적으로 동작하지만 Angular 1.1.5에서는 위에서 설명한 동작이 불안정함을 알 수 있습니다.
변경 로그를 확인했지만, 지금까지 도움이 되는 것은 발견되지 않았습니다.버그나 그들이 한 특정 변경과 관련된 원치 않는 동작으로 제출하거나 나중에 수정되어 안정된 버전이 출시될지 지켜봐야 할 것 같습니다.
거기에 벌레가 없다는 것을 알았다.추가:
<base href="/" />
고객님께<head />.
이것은 내가 인정하기보다 더 오랜 시간 후에 찾은 최고의 해결책이었다.기본적으로 페이지 새로고침에 필요한 각 링크에 target="_self"를 추가합니다.
http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/
이 문제는 AngularJS 1.1.5(불안하고 1.0.7과 다른 버그나 다른 라우팅 구현)를 사용했기 때문입니다.
1.0.7로 되돌리면 문제가 즉시 해결됩니다.
1.2.0rc1 버전을 시험했지만 코어에서 삭제한 이후 라우터 기능의 일부를 다시 작성해야 했기 때문에 테스트가 완료되지 않았습니다.
Angular를 사용하면 이 문제가 해결됩니다.JS vs 1.0.7
- 각도 설정JS
$location / html5 모드와 해시방 모드 전환 / 링크 변경
- 서버를 설정합니다.
나의 문제는 다음과 같이 해결되었다.
1-머리에 추가:
<base href="/" />
합니다.- 이이 2 2 2 2 2 2 。app.config
$locationProvider.html5Mode(true);
언급URL : https://stackoverflow.com/questions/18214835/angularjs-how-to-enable-locationprovider-html5mode-with-deeplinking
'programing' 카테고리의 다른 글
| 와의 JSON 파일 해석NET core 3.0/System.text.제이슨 (0) | 2023.02.22 |
|---|---|
| Angular에 ng-repeat 스코프가 있는 Directive Isolate 스코프JS (0) | 2023.02.22 |
| spring.jpa.hibernate.ddl-auto 속성은 봄에 정확히 어떻게 작동합니까? (0) | 2023.02.22 |
| 잭슨과 함께 몇 초 만에 타임스탬프를 역직렬화하려면 어떻게 해야 하나요? (0) | 2023.02.22 |
| Angular란JS가 jQuery보다 잘해요? (0) | 2023.02.22 |