AngularJS: Względne dowiązania są przerywane, gdy html5mode (true) jest włączone

Question

Szukałem i znalazłem "rozwiązania" dla tego problemu, ale nadal nie mogę tego uruchomić.

Scenariusz:

buduję kątowym (wersja 1.2) Strona z interfejsu rutera i uruchomienie go na serwerze węzeł localhost. Próbuję sprawić, aby miał "ładny" adres URL z $ locationProvider i włączając html5 (true) na. Moja strona internetowa działa dobrze po kliknięciu, ale kiedy próbuję przejść do względnej ścieżki łącza lub odświeżyć ścieżkę łącza, strona zrywa. Zamierzam również wdrożyć tę webapp do Heroku po ukończeniu:

odnośniki względne PATH:

http://localhost:8000/locksmith-services 

strona Wynik WYJŚCIE

Cannot GET /locksmith-services 

Kroki I wziąłem:

1.) W moim "index.html" < head>, mam ustawić mój bazowy URL do:

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

2.) w moim pliku app.js (dla kątowego), muszę to zapisać następująco:

// 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.) W mojej nawigacji, mam html zapisać jako:

<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> 

4.) mój plik server.js (serwer węzeł)

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

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

Co byłoby najlepsze rozwiązanie? Z góry dziękuje za twoją pomoc.

Answer 1

Dzięki @trehyu za pomoc ja dostaję się do tej odpowiedzi.

Tak jak napisał, potrzebowałem konfiguracji w pliku server.js, który przekieruje użytkownika do mojego pliku "index.html".

Tak więc w zależności od struktury pliku ...

PRZED (nie pracuje)

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

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

PO (praca)

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); 

Mam nadzieję, że to pomoże ktoś inny!

Answer 2

Gdy tryb HTML5 jest ustawiony na true, musisz coś skonfigurować na serwerze, który automatycznie przekieruje użytkownika na stronę indeksu, aby router AngularJS UI mógł przejąć stację.

Powodem tego jest to, że bez skrótu (#) w adresie URL, jest on traktowany jako dosłowny adres URL i próbuje nawigować po odświeżeniu lub wklejeniu adresu URL bezpośrednio.

nie jestem bardzo obeznany z Węzła więc nie wiem, jak można to zrobić, ale jest strona FAQ na UI Router GitHub, które powinny pomóc Ci zacząć: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode