AngularJS: Đường dẫn liên kết bị hỏng khi html5mode (true) nằm trên

Question

Tôi đã tìm kiếm và tìm thấy "giải pháp" cho vấn đề này, nhưng tôi vẫn không thể làm việc này đúng.

Các Kịch bản:

Tôi đang xây dựng một (phiên bản 1.2) trang web kiễu góc với giao diện người dùng Router và chạy nó trên máy chủ Node trên localhost. Tôi đang cố gắng để làm cho nó có url "đẹp" với $ locationProvider và bằng cách chuyển html5 (true) trên. Trang web của tôi hoạt động tốt khi nhấp qua nó, nhưng khi tôi cố gắng điều hướng đến đường dẫn liên kết tương đối hoặc làm mới đường dẫn liên kết, ngắt trang. Tôi cũng có ý định triển khai ứng dụng web này để Heroku khi hoàn thành:

RELATIVE LINK PATH:

http://localhost:8000/locksmith-services 

TRANG ĐẦU RA KẾT QUẢ

Cannot GET /locksmith-services 

bước tôi đã thực hiện:

1.) Trong "index.html" < đầu tôi>, tôi đã thiết lập địa chỉ cơ sở của tôi để:

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

2.) Trong file app.js của tôi (cho góc), tôi có nó được viết như sau:

// 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.) Trong hướng của tôi, tôi đã html của tôi viết như sau:

<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.) My server.js file (nút máy chủ)

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

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

Điều gì sẽ là giải pháp tốt nhất? Cảm ơn trước sự giúp đỡ của bạn.

Answer 1

Nhờ @trehyu giúp tôi nhận được câu trả lời này.

Như anh ấy đã viết, tôi cần thiết lập gì đó trên tệp server.js của tôi chuyển hướng người dùng đến tệp "index.html" của tôi.

Vì vậy, tùy thuộc vào cấu trúc tệp của bạn ...

TRƯỚC (không hoạt động)

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

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

SAU (làm việc)

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

Tôi hy vọng điều này sẽ giúp người khác!

Answer 2

Khi mã HTML5 được đặt thành true, bạn cần thiết lập gì đó trên máy chủ tự động chuyển hướng người dùng đến trang chỉ mục của bạn để Bộ định tuyến giao diện người dùng AngularJS có thể tiếp quản từ đó.

Lý do cho điều này là không có hàm băm (#) trong URL, nó lấy nó dưới dạng URL theo nghĩa đen và cố gắng điều hướng đến đó khi bạn làm mới hoặc dán url trực tiếp.

Tôi không phải là rất quen thuộc với Node nên không chắc chắn làm thế nào bạn sẽ làm điều đó, nhưng có một trang FAQ trên giao diện người dùng Router GitHub rằng sẽ giúp bạn bắt đầu: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode