AngularJS和处理404错误

Question

用AngularJS应用程序提供正确404的最佳方式是什么？

一点背景：我要建一个角度应用程序，并选择使用

$locationProvider.html5Mode(true); 

，因为我想要的网址出现自然（和无法区分多页的“传统”的Web应用程序）。

在服务器端（一个简单的Python应用程序瓶），我有一个重定向一切角应用一个包罗万象的处理程序：

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

现在，我试图找出该怎么做404错误。大多数我见过做以下的角的应用程序：

.otherwise({ redirectTo: '/' }) 

这意味着，有没有办法，他们可以成为一个适当的404

不过，我宁愿回到正确的404，与404状态代码（主要用于SEO目的）。

用Angular处理404s的最佳方式是什么？我不应该担心它，并坚持一个全面的？或者我应该删除捕获所有并在服务器端提供正确的404？

编辑为清楚起见

Answer 1

玩弄了一下，以及与米格尔一些讨论后，我整理了几个不同的解决方案：

1. 只需使用一个包罗万象的，不要担心适当的404的。这可以通过服务器端代码（如我的原始解决方案）来设置，或者更好，在您的Web服务器上重新写入URL。
2. 为您的角度应用保留您网站的某个部分（如/app）。对于本节，设置一个全面的，不要担心适当的404。您的其他页面将作为常规页面提供，并访问任何不以/app开头的无效网址将导致404错误。
3. 连续确保app.js中的所有路由都在您的服务器端镜像 - （是的，非常讨厌），你将有这些路线提供你的角度应用程序。所有其他路线将为404.

P.S.第二个选项是我个人的最爱。我已经试过了，它工作得很好。

Answer 2

我想你混淆了瓶路线与角路线。

404错误代码是HTTP协议的一部分。当服务器不知道请求的URL时，Web服务器将其用作对客户端的响应。因为你在Flask服务器中加入了一个全新的东西，你永远不会得到一个404，Flask将为你在地址栏中输入的任何URL调用你的view功能。在我看来，你不应该有一个全面的，并让Flask用404响应，当用户在地址栏中键入一个无效的URL时，没有什么不对。 Flask甚至允许您在返回404代码时发送自定义页面，因此您可以使错误页面看起来像您网站的其余部分。

在Angular方面，确实没有HTTP事务，因为应用程序内部的所有路由发生在客户端，而服务器甚至不知道。这可能是你混淆的一部分，Angular链接完全在客户端处理，即使在html5mode中也没有向服务器发出任何请求，所以在这种情况下没有404错误的概念，仅仅是因为没有服务器参与。发送给未知路线的角度链接将落入otherwise条款。这里要做的正确事情是显示错误消息（如果用户需要了解这种情况并可以做些什么），或者忽略未知路由，如redirectTo: '/'所做的那样。

这似乎不是你的情况，但如果除了服务Angular应用程序之外，你的服务器还实现了一个Angular可以在运行时使用的API，那么Angular可以从Flask得到一个404，如果它向一个异步请求此API使用无效的网址。但是如果发生这种情况，您不希望向用户显示404错误页面，因为请求是应用程序内部的，并且不是由用户直接触发的。

我希望这有助于澄清情况！

Answer 3

这里是处理错误的最好方式和工作很好

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' 
     }) 

     ...... 

    }; 

Answer 4

我认为，一个真正的HTTP 404将是相当无用的“搜索引擎优化的目的，”如果你没有服务可用非-javascript内容为您的网站的真实网页。搜索索引器不太可能能够呈现您的角度网站进行索引。

如果您担心搜索引擎优化，您需要某种服务器端的方式来渲染角色页面呈现的内容。如果你有这个问题，为无效URL添加404s是问题中最容易的部分。

Answer 5

这是一个古老的线程，但我在搜索答案时找到它。

将此添加到appRoutes.js的最后并创建一个404.html视图。

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

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