$ locationProvider html5mode导致“无法GET”错误刷新 – AngularJS节点的应用程序
我正在尝试使用locationProvider从我的Angularjs应用程序的URL中删除标签,直到手动刷新页面为止。 这总是在浏览器中导致“无法GET ..”错误。 我已经做了一些研究,我想我必须使用.htaccess文件redirect,但我不知道如何实现它,我已经在网上search的解决scheme,但没有运气到目前为止。
这是我的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和Mongodb构build的(如果有帮助的话)。
非常感谢。
如果有人想知道你需要将节点没有使用的所有路由redirect到Angular:
app.get('*', function(req, res) { res.sendfile('./path/to/index.html') })
这必须在server.js中完成。 不要忘记在sendfile链接中使用./
这取决于Angular版本。
最新的Angular
版本需要以下选项:
$locationProvider.html5Mode({ enabled: true, requireBase: false });
如果将$ locationconfiguration为使用html5Mode(history.pushState),则需要使用标记指定应用程序的基本URL,或者将$ locationProviderconfiguration为不需要基本标记,方法是将具有
requireBase:false
的定义对象传递给$locationProvider.html5Mode()
这里的官方文档模式细节
所以你所需要的就是在服务器端处理你描述的每一条path,并使用angular插入来呈现相同的(可能是索引)页面。