15

angularjs で 404 ページをリダイレクトする代わりに、404 ページをレンダリングする良い方法を探しています。私が見つけた多くの解決策は、すべて別のページにリダイレクトすることです。ユーザーがブラウザの戻るボタンをクリックすると、404ページへの別のリダイレクトが作成されるという問題が発生します。そのため、代わりに 404 ページをレンダリングするソリューションを探しています。

お読みいただきありがとうございます。

4

3 に答える 3

13

の使用法は、otherwiseあなたが探しているものかもしれません。

angular.module('MyApp', [])
.config(function($routeProvider) {
  $routeProvider.
    when('/', {templateUrl:'/home.html'}).
    // add as many as you want here...
    otherwise({templateUrl:'/404.html'}); // Render 404 view
});

更新： OPの質問をより注意深く読んだ後（申し訳ありませんが、ここではかなり早い段階で）、別の解決策（実際には2つ）があると思います：

1)コンテンツを非表示に$scopeするメイン UI への変数ng-view

これにはng-show、ビューとresolveパラメーターが必要です。次に$emit、他のコントローラーに a を実行して、「ねえ、この男は 404 をヒットしました。ビューを表示しないでください」と伝えます。

$routeProvider.otherwise({
  controller: 'masterController',
  resolve: {
    404: function(){
      return true;
    };
  });

angular.module('MyApp', [])
.controller('masterController', function($scope, 404) {
  $scope.isOn404 = 404
  ...
})

// In the view

<div ng-controller="masterController">
   <div ng-hide="isOn404">
    <!-- Actual content -->
   </div>
   <div ng-show="isOn404">
    <!-- 404 Page -->
   </div>
</div>

これには、残りの UI を管理するのに役立つマスター コントローラーが必要です。また、単に使用するのではなく、ページの残りの部分を処理するために何らかのコーディングを行う必要がある可能性がありますng-view(たとえば、現在のヘッダー、本文などを表示するコントローラー)。

2) カスタム ルーティング システム

私は実際に特定のプロジェクトに対してこれを行いました。「BackURL」と「FordwardURL」を設定するサービスがあります。$onRouteChangeどこに行き、どこから来たのかを保存するたびに。ユーザーが 404 にヒットしようとしている場合でも、元の例を使用してレンダリングできますが、ユーザーがヒットバックした場合、AngularJS を介してそれをキャッチし、実際の「戻る」ページをレンダリングします。この場合、 Lungoというモバイル デバイスでのルーティングに役立つライブラリと、私が勤務する会社が使用しているLAB (Lungo Angular Bridge) というライブラリを使用しています。

于 2013-09-13T09:00:35.733 に答える
1

私は AngularJS を初めて使用するので、これは理想的な解決策ではないかもしれませんが、404 ページの表示や、ログイン ページなどの同様の用途には機能します。

実施例を見る

すべてを同じマスター テンプレートにリダイレクトします。

$routeProvider
.when('/', {
        controller: 'homeController',
        templateUrl: 'partial.master.html'
    })
.when('/cust/:custid', {
        controller: 'custController',
        templateUrl: 'partial.master.html'
    })

master.html テンプレートは masterController を参照し、サブページがあります。

<div ng-controller="masterController">
    <h2><a href="#">{{title}} - Header</a></h2>
    <hr>

    <div ng-include="subPage"></div>

    <hr>
    <h3>{{title}} - Footer</h3>
</div>

masterController には条件付きサブページ ロジックがあります。

controllers.custController = function($scope, $rootScope, $routeParams){
    $rootScope.subpage = 'cust';
    $scope.cust = getCustomer( $routeParams.custid );
};
controllers.masterController = function($scope, $rootScope) {
    switch($rootScope.subpage) {
    case 'home':
        $scope.subPage = 'partial.home.html';
        break;
    case 'cust':
        if($scope.cust) {
            $scope.subPage = 'partial.cust.html';
        } else {
            $scope.subPage = 'partial.404notfound.html';
        }
        break;
于 2016-04-05T23:38:24.507 に答える
0

以前にここで回答したように、ui-router を使用することもできます: https://stackoverflow.com/a/23290818/2723184。私見、あなたは素晴らしいライブラリを手に入れるだけでなく、より良いソリューションを手に入れることができます.

于 2016-01-26T18:23:01.763 に答える