AngularJS - 为啥更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

Posted 2023-02-27

【中文标题】AngularJS - 为啥更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

【英文标题】：AngularJS - Why when changing url address $routeProvider doesn't seem to work and I get a 404 errorAngularJS - 为什么更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

【发布时间】：2013-02-21 09:44:27

【问题描述】：

我的$routeProvider 是这样配置的：

teachApp.config(['$routeProvider', '$locationProvider', function($routeProvider,       $locationProvider) 
    $routeProvider.
        when('/teach/', templateUrl: 'views/login_view.html').
        when('/teach/overview', templateUrl: 'views/overview_view.html').
        when('/teach/users', templateUrl: 'views/users_view.html').
        otherwise(redirectTo: '/teach/');
    $locationProvider.html5Mode(true);
]);

在应用程序中，如果我单击 <a href="/teach/overview">Overview</a> 之类的链接，概览部分将按预期显示。但是，当我手动将地址栏中的 URL 更改为完全相同的 URL 时，我收到 404 错误。 $routeProvider 是否配置错误？

我正在使用 MAMP localhost，应用的根 url 为 http://localhost/teach/

【参考方案1】：

您也可以在 URL 中使用 #。

http://localhost/teach/#/overview

这不会向服务器发送请求，而是被 Angular $routeProvider 拦截。

【讨论】：

这是一个不错的简单解决方案。

【参考方案2】：

您需要将您的 apache 设置为 redirect all paths to root。

当您直接打开http://localhost/teach/overview 时，您的网络服务器正在尝试从未定义的路由提供页面。

当您在 Angular 应用程序中单击 href 路径为 http://localhost/teach/overview 的链接时，Angular 会介入，而不是让您的浏览器从服务器请求页面，而是拦截您的点击事件并转到您的 routeProvider 以查看要显示的客户端视图（这就是他们称之为“单页应用程序”的原因）。这就是为什么只要您尝试不直接打开链接，您的链接就可以正常工作。

除了 apache 配置，您可能还想使用带有 href 值为 /teach/ 的 base 标签：

<base href="/teach/" />

这样您就可以让您的 routeProvider 不受固定前缀的约束：

teachApp.config(['$routeProvider', '$locationProvider', function($routeProvider,       $locationProvider) 
    $routeProvider.
        when('/', templateUrl: 'views/login_view.html').
        when('/overview', templateUrl: 'views/overview_view.html').
        when('/users', templateUrl: 'views/users_view.html').
        otherwise(redirectTo: '/');
    $locationProvider.html5Mode(true);
]);