UI路由器刷新問題

Question

我已經這樣配置了我的ui路由器：

app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

        $stateProvider
            .state('home', {
                url: "/home",
                templateUrl : 'home/home.html',
                controllerUrl: 'home/controller.js'
            })
            .state('blog', {
                url: "/blog",
                templateUrl : 'blogger/blog.html',
                controllerUrl: 'bloger/controller.js'
            })

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true
        });
    });

服務器代碼：

var express = require('express');
var serveStatic = require('serve-static');

var server_port = 9000;

var server_ip_address = '127.0.0.1'

var app = express();

app.use(express.static('app'));

app.use(serveStatic('app', {'index': ['index.html', 'index.htm']}));

dirName = 'app';

options = {
  root: dirName,
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true
  }
};

app.get('*', function(req, res) {
  return res.sendFile('index.html', options);
});

app.listen(server_port, server_ip_address, function () {
  console.log( "Listening on " + server_ip_address + ", server_port " + server_port)
});

但是，每當我按Ctrl / Command + R（或刷新）時，它都說找不到路徑？ 我該如何解決這個問題？

文件夾結構：視圖：./ app / home /，app / blog /基本文件：./ app / index.html來自以下位置的Angular UI路由：./ app / base.js

Answer 1

問題出在服務器設置中。 Angular是Front Controller應用程序。 您需要將每個請求重定向到服務器上的index.html / index.php。 例如，Apache中的Htaccess設置。 可以在這里找到更多信息： htaccess Angular路由重定向

Answer 2

您可以在app.js中使用以下代碼，然后開始運行：

更新 ：

    /** Below code set the html as your default engine*/

   var fs = require('fs');
   app.engine('html',function(path,opt,fn){  //manishp
       fs.readFile(path,'utf-8',function(err,str){
          if(err) return str;
          return fn(null,str);
       });
  });


 app.get('*',function(req,res){
    res.render('<your_layout_file_or_basefile>');    
 });

這主要是因為您的AngularJS路由不是實際的html頁面。 例如，如果您的角度應用程序中有一條通往/ login的路線。 如果您從應用程序內部鏈接到該URL，則該URL可以正常工作，但是如果用戶嘗試直接轉到該頁面，則服務器將返回404。

這是因為AngularJS HTML5模式使用History API將新的URL推送到您的瀏覽器。 是的，這需要服務器端進行一些額外的工作才能使這些url返回正確的內容。

Answer 3

問題出在服務器端，您應該處理server.js文件中的所有路由。 例如，這是代碼段

router = settings.express.Router()
dirName = settings.path.resolve(__dirname, '..', '..');

options = {
  root: dirName + '/website/views',
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true
  }
};

router.get('*', function(req, res) {
  return res.sendFile('index.html', options);
});