AngularJS - 为什么在更改网址时$ routeProvider似乎不起作用,我收到404错误

Question

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

Answer 1

您还可以在网址中使用#.

http://localhost/teach/#/overview

这不会向服务器发送请求,而是由Angular $ routeProvider拦截.

Answer 2

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

直接打开http://localhost/teach/overviewWeb服务器时,尝试从未定义的路由服务页面.

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

除了apache配置,您可能还想使用basehref值为的标签/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);
}]);