45

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 ステータス コードを含む適切な 404 を返したいと思います (主に SEO の目的で)。

Angular で 404 を処理する最良の方法は何ですか? 私はそれについて心配せず、キャッチオールに固執する必要がありますか? または、キャッチオールを削除して、サーバー側で適切な 404 を提供する必要がありますか?

明確にするために編集された

4

5 に答える 5

18

少し遊んだり、ミゲルと話し合ったりした後、いくつかの異なる解決策をまとめました。

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

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

于 2013-08-09T18:31:32.160 に答える
-1

これがエラーを処理する最良の方法であり、うまく機能します

function ($routeProvider, $locationProvider, $httpProvider) {
    var interceptor = [
        '$rootScope', '$q', function (scope, $q) {

            function success(response) {
                return response;
            }

            function error(response) {
                var status = response.status;

                if (status == 401) {
                    var deferred = $q.defer();
                    var req = {
                        config: response.config,
                        deferred: deferred
                    };
                    window.location = "/";
                }

                if (status == 404) {
                    var deferred = $q.defer();
                    var req = {
                        config: response.config,
                        deferred: deferred
                    };
                    window.location = "#/404";
                }
                // otherwise
                //return $q.reject(response);
                window.location = "#/500";
            }

            return function (promise) {
                return promise.then(success, error);
            };

        }
    ];
    $httpProvider.responseInterceptors.push(interceptor);
});

// routes
app.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/404', {
            templateUrl: '/app/html/inserts/error404.html',
            controller: 'RouteCtrl'
        })
        .when('/500', {
            templateUrl: '/app/html/inserts/error404.html',
            controller: 'RouteCtrl'
        })

        ......

   };
于 2014-03-08T14:51:14.303 に答える