53

静的ディレクトリからAngularJSをロードするExpressを使用しています。通常、http://localhost/Expressが私とすべての正しいAngularファイルなどを提供するように要求します。私のAngularアプリでは、これらのルートを設定し、 ：index.htmlのコンテンツを置き換えます。ng-view

$routeProvider.when('/', {
    templateUrl: '/partials/main.html',
    controller: MainCtrl,
});

$routeProvider.when('/project/:projectId', {
    templateUrl: '/partials/project.html',
    controller: ProjectCtrl,
});

$locationProvider.html5Mode(true);

メインページには、へのリンクがあります。<a href="/project/{{project.id}}">これにより、テンプレートが正常に読み込まれ、指定しhttp://localhost/project/3たIDまたはIDに移動します。問題は、ブラウザをページに誘導しhttp://localhost/project/3たり、ページを更新したりしようとすると、リクエストがExpress / Nodeサーバーに送信され、が返されることCannot GET /project/3です。

これに対応するためにExpressルートを設定するにはどうすればよいですか？Angularでの使用が必要になると$location思いますが（ただし、使用する醜い検索や#hashesは避けたいと思います）、これを処理するためにExpressルートを設定する方法がわかりません。

ありがとう。

4

3 に答える 3

65

Express 4では、おそらくすべてのリクエストをキャッチして、angularjsindex.htmlページにリダイレクトする必要があります。 app.use(app.router);はもう存在せずres.sendfile、非推奨です。res.sendFile大文字のFとともに使用してください。

app.post('/projects/', projectController.createProject);
app.get('/projects/:id', projectController.getProject);
app.get('*', function (req, res) {
    res.sendFile('/public/index.html');
});

すべてのパスのルートの前にすべてのAPIルートを配置しますapp.get('*', function (req, res){...}）

于 2014-12-14T22:11:22.257 に答える
46

必要なデータを送信する通常のルートの後に実行されるキャッチオールハンドラーを作成します。

app = express();
// your normal configuration like `app.use(express.bodyParser());` here
// ...
app.use(app.router);
app.use(function(req, res) {
  // Use res.sendfile, as it streams instead of reading the file into memory.
  res.sendfile(__dirname + '/public/index.html');
});

app.routerすべてのExpressルート（app.getおよびなどapp.post）を実行するミドルウェアです。通常、Expressはこれをミドルウェアチェーンの最後に自動的に配置しますが、ここで行ったように、明示的にチェーンに追加することもできます。

次に、URLがによって処理されない場合app.router、最後のミドルウェアはAngularHTMLビューをクライアントに送信します。これは、他のミドルウェアで処理されないURLで発生するため、Angularアプリは無効なルートを正しく処理する必要があります。

于 2012-11-05T07:35:02.533 に答える
3

テンプレートエンジンの使用には興味がなかったことを明確にすべきだったと思いますが、AngularがすべてのHTMLパーシャルを独自にプルすることで、Nodeはここでは静的サーバーとして完全に機能します（ただし、JSON用ではありません） API。BrianFordは、ここでJadeを使用してそれを行う方法を示しています：http： //briantford.com/blog/angular-express.html

私のアプリはシングルページアプリなので、可能なURLパターンごとにExpressルートを作成しましたが、それぞれが同じことを行います。

fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, content) {
    res.send(content);
});

いくつかのリクエスト変数をAngularに渡す必要があると想定していましたが、Angularが自動的に処理するようです。

于 2012-11-05T05:06:29.770 に答える