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

Serverコード：

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キー/コマンド+ R（またはリフレッシュ）を打つたび、それをパスを見つけることができないと言いますか？この問題を回避するにはどうすればよいですか？

Folder structure : Views : ./app/home/, app/blog/ Basefile: ./app/index.html Angular UI-routing from : ./app/base.js

Answer 1

問題はサーバー設定にあります。 Angularはフロントコントローラアプリケーションです。サーバー上のindex.html/index.phpにリダイレクトされるすべてのリクエストが必要です。例えばApacheのHtaccessの設定。さらに詳しい情報はここで見つけることができます：htaccess redirect for Angular routes

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はアプリ内からリンクすると問題なく動作しますが、ユーザーがそのページに直接アクセスしようとすると、サーバーは404を返します。

これは、AngularJS HTML5モードでは履歴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); 
});