web-dev-qa-db-ja.com

新しいページが要求されたときにExpress（Node.js）でAngularJSルートを使用する方法は？

静的ディレクトリからAngularJSをロードするExpressを使用しています。通常、http://localhost/を要求します。Expressでは、index.htmlおよび正しいAngularファイルなどすべてが提供されます。Angularアプリでは、これらのルートをセットアップしています、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に移動できます。問題は、ブラウザーをhttp://localhost/project/3にリダイレクトするか、ページを更新しようとすると、リクエストがCannot GET /project/3を返すExpress/Nodeサーバーに送られることです。

これに対応するためにエクスプレスルートを設定するにはどうすればよいですか？ Angularで $location の使用が必要になると思います（ただし、？い？searchと#hashesを使用したくないのですが）。これを処理するためにExpressルートを設定する方法については不明です。

ありがとう。

node.jsexpressangularjs
52
winduptoy

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

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によって処理されない場合、最後のミドルウェアはAngular HTMLビューをクライアントに送信します。これはany =他のミドルウェアでは処理されないURLであるため、Angularアプリは無効なルートを正しく処理する必要があります。

46
Michelle Tilley

express 4では、おそらくすべてのリクエストをキャッチし、angularjs _index.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){...}）

65
Guillaume Vincent

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

私のアプリは単一ページのアプリなので、可能なURLパターンごとにエクスプレスルートを作成し、それぞれが同じことを行います。

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

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

3
winduptoy