web-dev-qa-db-ja.com

AngularJSと404エラーの処理

AngularJSアプリで適切な404を提供する最良の方法は何ですか？

少しの背景：Angularアプリを作成していて、使用することを選択しました

$locationProvider.html5Mode(true);

uRLを自然に（そして、複数ページの "従来の" Webアプリと見分けがつかないように）見せたいからです。

サーバー側（単純なPython Flaskアプリ）には、すべてをangularアプリにリダイレクトするキャッチオールハンドラーがあります。

@app.route('/', defaults={'path': ''})
@app.route('/<path>')
def index(path):
    return make_response(open('Ang/templates/index.html').read())

今、私は404エラーをどうするかを考えています。私が見たほとんどのAngularアプリは次のことを行います：

.otherwise({ redirectTo: '/' })

つまり、適切な404を提供する方法はありません。

ただし、404ステータスコード（主にSEOの目的）で、適切な404を返したいと思います。

Angularで404を処理する最良の方法は何ですか？心配する必要はありません。または、キャッチオールを削除して、サーバー側で適切な404を提供する必要がありますか？

わかりやすくするために編集

javascriptangularjsflaskhttp-status-code-404angularjs-routing
43
Ryan

少し遊んだり、Miguelと議論した後、いくつかの異なるソリューションをまとめました。

  1. キャッチオールを使用するだけで、適切な404について心配する必要はありません。これは、サーバー側のコード（元のソリューションのように）でセットアップするか、WebサーバーでURLを書き換えてセットアップすることができます。
  2. サイトの特定のセクションをangularアプリ（/appなど）用に予約します。このセクションでは、キャッチオールを設定し、適切な404を心配しません。ページは通常のページとして提供され、/appで始まらない無効なURLにアクセスすると、適切な404になります。
  3. App.js内のすべてのルートがサーバー側のコードにミラーリングされていることを継続的に確認し（そう、非常に迷惑です）、これらのルートでangular app。他のルートは404です。

追伸2番目のオプションは私の個人的なお気に入りです。私はこれを試してみましたが、非常にうまく機能します。

17
Ryan

FlaskルートとAngularルートを混同していると思います。

404エラーコードはHTTPプロトコルの一部です。 Webサーバーは、要求されたURLがサーバーによって認識されていない場合、クライアントへの応答として使用します。 Flaskサーバーにキャッチオールを配置するため、404を取得することはありません。Flaskは、アドレスバーに入力したURLのビュー関数を呼び出します。私の意見では、キャッチオールをすべきではなく、ユーザーがアドレスバーに無効なURLを入力したときにFlaskに404で応答させるだけで、何も問題はありません。 Flaskでは、404コードが返されたときにカスタムページを送信することもできるため、エラーページを他のサイトのように見せることができます。

Angular側では、アプリケーション内部のすべてのルーティングがサーバーでさえ知らなくてもクライアントで行われるため、実際にはHTTPトランザクションはありません。これは混乱の一部である可能性があります。Angularリンクは、html5モードでもサーバーへの要求なしにクライアントで完全に処理されるため、このコンテキストには404エラーという概念はありません。サーバーの関与なし。不明なルートに移動するAngularリンクは、otherwise句に該当します。ここで適切なことは、エラーメッセージを表示するか（ユーザーがこの状態について知る必要があり、それについて何かできる場合）、またはredirectTo: '/'が行うように、未知のルートを無視することです。

これはあなたのケースではないようですが、Angularアプリケーションの提供に加えて、サーバーがAngularの実行中に使用できるAPIを実装している場合、Angularは、無効なURLを使用してこのAPIに非同期リクエストを行った場合、Flaskから404を取得できます。しかし、リクエストがアプリケーションの内部にあり、ユーザーによって直接トリガーされないため、404エラーページが表示されたくない場合は、ユーザーに表示したくないでしょう。

これが状況の明確化に役立つことを願っています！

33
Miguel

これは古いスレッドですが、答えを探している間、私はそれを見て行きます。

これをappRoutes.jsの最後に追加して、404.htmlビューを作成します。

.when('/404', {
    templateUrl: 'views/404.html',
    controller: 'MainController'
})

.otherwise({ redirectTo: '/404' })
2
Russ

サイトの実際のページに使用可能なJavaScript以外のコンテンツを提供していない場合、実際のHTTP 404は「SEOの目的には」かなり役に立たないと思います。検索インデクサーは、インデックス作成のためにangularサイトをレンダリングできません。

SEOが心配な場合は、angularページがレンダリングしているコンテンツをレンダリングするサーバー側の方法が必要になります。その場合、無効なURLに404を追加するのが最も簡単な部分です問題の。

0
rjmunro