13

我$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/

4

2 回答 2

15

您还可以在 URL 中使用 #。 

http://localhost/teach/#/overview

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

于 2013-03-06T21:30:45.073 回答
13

您需要设置 apache 以将所有路径重定向到 root。

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

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

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

<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);
}]);
于 2013-03-06T15:13:24.937 回答