当html5Mode为true时,AngularJs将HTTP调用路由到服务器

时间:2015-03-17 17:10:03

标签: angularjs node.js angularjs-routing location-provider

我已在我的应用程序中将html5Mode设置为true。我的路线定义如下:

app.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $locationProvider.hashPrefix('!');

        $routeProvider.
            when('/api/', {
                templateUrl: '../../html/console.html',
                controller: 'paramsController'
            }).
            when('/', {
                templateUrl: '../../html/timeline.html',
                controller: 'timelineController'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

但每当我以http://localhost:3000/api的身份发出请求时,它都会进行HTTP调用并请求转到服务器而不是解析为我的角度路由。

我需要在这里做些什么。

我的主页上添加了以下标记:

<base href="/">

只是声明,如果它在这里改变了什么。 是否需要任何其他配置。我使用node.js作为express.js的服务器。

2 个答案:

答案 0 :(得分:2)

发生这种情况的原因是因为您正在访问未提供前端应用程序且未正确配置服务器的URL。

您实际上需要在服务器上进行URL重写才能使其正常工作。

请参阅angularJS官方documentation上的解释。

答案 1 :(得分:1)

正如@oLeduc在评论中提到的那样,这是因为没有在服务器端配置URL重写。

我在服务器端路由中添加了以下内容(我正在使用expressjs)。

app.all('/*', function(req, res) {
    console.log("Server re-writing for angular routing");
    res.sendfile('home.html');
});

这样可以将路由重定向回为home.html配置的角度路由。

可以改变模式:

'/*' to '/api/*`

如果您想匹配UI路线,请说/api/test