web-dev-qa-db-ja.com

anglejsで404をリダイレクトする代わりに404をレンダリングする

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

読んでくれてありがとう、皆さんに理解できるといいのですが。

angularjsuser-experience
15
Dzung Nguyen

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を実行して、「ねえ、この男は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）。

13
jjperezaguinaga

私は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;
1
Sam Grieger

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

0
fabiowitt