2017-04-27 5 views
0

私はAngular 1と​​Expressを使用した認証の学習に取り組んでいます。私はテスト目的のために私のバックエンドをセットアップしました、そして、私は現在フロントエンドに取り組んでいます。私は基本的なルートを設定している。Express +角度ルーティングのバグ

これは私のフロントエンドにコアです:

function router($stateProvider, $urlRouterProvider, $locationProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'views/home/', 
     controller: 'mainController' 
    }) 
    .state('login', { 
     url: '/login', 
     templateUrl: 'views/login/', 
     controller: 'loginController' 
    }); 

    $locationProvider.html5Mode(true); 
} 

そしてここでは、関連するだろうバックエンドのルートは以下のとおりです。私が持っている

app.use(express.static(path.join(__dirname, 'public'))); 

app.get('/', function(req,res){ 
    res.sendFile(path.join(__dirname, 'public/', 'index.html')); 
}); 

唯一の他のルーティングは私のためにありますこれらの経路には、apiRouterという定数を使用し、/api/を注入します。

ブラウザから直接ルートにアクセスしようとすると、問題が発生します。私はlocalhost:8080/loginにnagivateしました。私はエラーCannot GET /loginを取得しますが、私のインデックスページでui-srefを使用すると、正常に動作するようです。

アイデア?

答えて

0

私は私の問題が何であるかを考え出しました。

私のサーバーファイルの私のルートパスGETステートメントの後、私は次のコードを追加する必要があります。

app.get('*', function(req,res){ 
    res.sendFile(path.join(__dirname, 'public/', 'index.html')); 
}); 

起こっていたことが、Expressは、私が定義されていた/loginルートを見つけるためにしようとしていたということです。問題は、そのルートがAngularで処理される必要があり、Expressではないため、'*'はExpressが明示的に処理する方法を知らないどのルートのキャッチオールでもあり、その責任をindex.htmlに渡しますファイル。