AngularJS : html5mode (true)가 켜져있을 때 상대 링크 경로가 깨졌습니다.

Question

검색 중이며 "솔루션"이 발견되었지만 아직 제대로 작동하지 않습니다.

시나리오 :

나는 UI 라우터와 각도 (버전 1.2) 웹 사이트를 구축하고 로컬 호스트 노드 서버에서 실행하고 있습니다. 나는 $ locationProvider로 "pretty"url을 만들고 html5 (true)를 on으로 설정하려고 노력하고있다. 내 웹 사이트는 링크를 클릭하면 제대로 작동하지만 상대 링크 경로로 이동하거나 링크 경로를 새로 고침하면 페이지가 중단됩니다. 완료 할 때 나는 또한 Heroku가이 웹 애플리케이션을 배포 할 예정 :

RELATIVE 링크 경로 :

http://localhost:8000/locksmith-services 

페이지 출력 결과

Cannot GET /locksmith-services 

단계 I 찍은 : 각도에 대한 (내 app.js 파일에서

<base href="/"></base> 

2) : 내 "index.html을"< 머리에서

1), 나는 내 기본 URL을 설정 한>

:

이 내 HTML을 같이 쓸 내 탐색에서

// App Starts 
angular 
    .module('app', [ 
     'ui.router', 
     'ngAnimate', 
     'angular-carousel' 
    ]) 
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) { 
     $urlRouterProvider.otherwise("/"); 

     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: 'pages/home.html', 
       controller: 'homeCtrl' 
      }) 
      .state('services', { 
       url: '/locksmith-services', 
       templateUrl: 'pages/locksmith-services.html', 
       controller: 'servicesCtrl' 
      }) 
      .state('locations', { 
       url: '/locksmith-locations', 
       templateUrl: 'pages/locksmith-locations.html' 
      }) 
      .state('payment', { 
       url: '/locksmith-payment', 
       templateUrl: 'pages/locksmith-payment.html' 
      }) 
     // use the HTML5 History API 
     $locationProvider.html5Mode(true); 
    }]) 

3), 내가 가진 :), I는 다음과 같이 작성해야

4)

<div class="wrapper"> 
    <a ui-sref="home"> 
     <img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" /> 
    </a> 
</div> 
<nav class="row navigation"> 
    <a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a> 
    <a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a> 
    <a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a> 
</nav> 

는 server.js 파일 (노드 서버)

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port); 

은 무엇 최적의 솔루션이 될 것입니다 내? 귀하의 도움에 미리 감사드립니다.

Answer 1

감사 나는이 대답을 얻는다.

그는 작성한 것처럼 내 "index.html"파일로 사용자를 리디렉션하는 server.js 파일에 설정이 필요합니다.

파일 구조에 따라 ... AFTER (작동하지 않는)

var express = require('express'); 
var app = express(); 

app.use(express.static(__dirname + '/front')); 
var port = process.env.PORT || 8000; 
app.listen(port); 

전

(작업)

var express = require('express'); 
var app = express(); 

app.use('/js', express.static(__dirname + '/front/js')); 
app.use('/build', express.static(__dirname + '/../build')); 
app.use('/css', express.static(__dirname + '/front/css')); 
app.use('/images', express.static(__dirname + '/front/images')); 
app.use('/pages', express.static(__dirname + '/front/pages')); 

app.all('/*', function(req, res, next) { 
    // Just send the index.html for other files to support HTML5Mode 
    res.sendFile('/front/index.html', { root: __dirname }); 
}); 

var port = process.env.PORT || 8000; 
app.listen(port); 

나는이 다른 사람이 도움이되기를 바랍니다!

Answer 2

HTML5 모드를 true로 설정하면 서버에서 AngularJS UI 라우터가 자동으로 사용자를 색인 페이지로 리디렉션하도록 설정해야합니다.

URL에 해시 (#)가 없으면이 URL을 리터럴 URL로 사용하고 URL을 새로 고치거나 직접 붙여 넣을 때 탐색하려고합니다.

난 당신이 그렇게 얼마나 확신하지 노드에 매우 익숙하지 해요,하지만 당신이 시작하는 데 도움이해야 UI 라우터 GitHub의에 FAQ 페이지가 : 도와 @trehyu하는 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode