$ locationProvider html5mode在刷新时导致“无法获取”错误 - AngularJS Node应用程序

时间:2016-04-14 21:24:39

标签: javascript angularjs node.js mongodb .htaccess

我正在尝试使用locationProvider从我的Angularjs应用程序的URL中删除主题标签,并且在我手动刷新页面之前它运行良好。这总是会导致浏览器出现“无法获取......”错误。我已经做了一些研究,我认为我必须使用.htaccess文件进行重定向,但我不确定如何实现它,我已经在网上搜索了一个解决方案但到目前为止没有运气。

这是我的app.js,它处理到我的Angular视图和控制器的路由:

(function () {
    'use strict';
    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', { 
                templateUrl: 'views/partials/play.html',
                controller: 'playCtrl'
            }).
            when('/dictionary', {
                templateUrl: 'views/partials/dictionary.html', 
                controller: 'dictionaryCtrl'
            }).
            when('/add', {
                templateUrl: 'views/partials/word.html', 
                controller: 'wordCtrl'
            }).
            when('/about', {
                templateUrl: 'views/partials/about.html', 
                controller: 'aboutCtrl'
            }).

            otherwise({redirectTo: '/'});

        // use the HTML5 History API
        $locationProvider.html5Mode(true);
    });
})();

我还在index.html中的<head>中添加了这个:

<base href="/">

该应用程序是使用Node.js,Express,Angular&amp; Mongodb如果有帮助的话。

非常感谢。

2 个答案:

答案 0 :(得分:2)

如果其他人想知道您需要将Node未使用的所有路由重定向到Angular:

app.get('*', function(req, res) {
  res.sendfile('./path/to/index.html')
})

这必须在server.js中完成。不要忘记在sendfile链接中使用./:

答案 1 :(得分:1)

这取决于Angular版本。

最新的Angular版本需要以下选项:

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
  

如果您将$ location配置为使用html5Mode(history.pushState),那么   需要使用a指定应用程序的基本URL   标记或配置$ locationProvider以不需要基本标记   将requireBase:false的定义对象传递给   $locationProvider.html5Mode()

官方文档here

中的模式详细信息

所以你需要的是处理你在服务器端以角度描述的每个路径,并使用角度插入渲染相同(可能是索引)的页面。