刷新Angular RouteProvider路由会导致Python出现404错误

时间:2015-02-20 14:27:35

标签: javascript angularjs

我的网址映射使用角度ng-route模块很有效,直到我点击刷新。然后我收到404错误。我在python SimpleHTTPServer上使用普通的html

目录树

.
└── test1
    ├── html
    └── static
        ├── css
        └── js

服务器在test1目录下运行html文件夹中的所有html文件

路由在app.js

中完成
var eclassApp = angular.module('eclassApp', 
    ['ngRoute', 'eclassControllers' ]
);

eclassApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider){
        $routeProvider.
            when('/',{
                templateUrl: '/html/student-list.html',
                controller: 'StudentsListCtrl',
            }).
            when('/students/:studentId',{
                templateUrl: '/html/student-details.html',
                controller: 'StudentDetailsCtrl',

            }).otherwise({
                redirectTo: '/'
            });
            $locationProvider.html5Mode({
                enabled:true
            });
    }]
);

我可以从应用内导航到我的网址但是当在网页上进行刷新时我会收到404错误。向后移动(历史)我得到同样的错误。这是为什么?是因为我没有使用哈希符号吗?

1 个答案:

答案 0 :(得分:0)

Angular中的HTML5模式使用PushState,在不发出服务器请求的情况下以静默方式更改URL。这不适用于新请求或刷新。从服务器提供的HTML 始终 /index.html。 HTML PushState无法更改服务器页面,直到它实际加载,但实际上无法从/students/1234的请求网址加载(作为代码中的示例)。

在Python SimpleHTTPServer中,您可以在此代码的行中添加一些内容以强制服务器加载/index.html

if not os.path.exists(request_file_path):
    self.path = 'index.html'

如果使用默认路由模式,则行为完全不同。 '散列'路由使用#,为您提供/index.html/#/students/1234等路由。浏览器将哈希解释为锚点,您的服务器将始终获取/index.html的正确请求。

然而,有一点需要注意的是,由于脚本加载时序,路由提供程序可能不会拦截初始哈希路由,因为脚本必须先加载才能解释哈希字符串。在散列路由模式下,页面刷新通常会加载默认状态。