One*_*ezy 5 relative-path location-provider pushstate angularjs angular-ui-router
我一直在寻找,我找到了解决这个问题的"解决方案",但我仍然无法使其正常工作.
我正在使用UI路由器构建一个Angular(版本1.2)网站,并在localhost上的Node服务器上运行它.我试图让它与$ locationProvider一起使用"漂亮"的url并打开html5(true).点击它我的网站工作正常,但当我尝试导航到相对链接路径或刷新链接路径时,页面中断.我还打算在完成后将此webapp部署到Heroku:
相对链接路径:
http://localhost:8000/locksmith-services
PAGE输出结果
Cannot GET /locksmith-services
1.)在我的"index.html"<head>中,我将基本网址设置为:
<base href="/"></base>
2.)在我的app.js文件中(对于Angular),我写了如下:
// App Starts
angular
.module('app', [
'ui.router',
'ngAnimate',
'angular-carousel'
])
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/home.html',
controller: 'homeCtrl'
})
.state('services', {
url: '/locksmith-services',
templateUrl: 'pages/locksmith-services.html',
controller: 'servicesCtrl'
})
.state('locations', {
url: '/locksmith-locations',
templateUrl: 'pages/locksmith-locations.html'
})
.state('payment', {
url: '/locksmith-payment',
templateUrl: 'pages/locksmith-payment.html'
})
// use the HTML5 History API
$locationProvider.html5Mode(true);
}])
3.)在我的导航中,我将我的html写成:
<div class="wrapper">
<a ui-sref="home">
<img src="images/logo.png" class="logo" alt="Austin Texas Locksmith" />
</a>
</div>
<nav class="row navigation">
<a class="mobile33" ui-sref="services" ui-sref-active="active" class="active">Services</a>
<a class="mobile33" ui-sref="locations" ui-sref-active="active">Locations</a>
<a class="mobile33" ui-sref="payment" ui-sref-active="active">Payment</a>
</nav>
4.)我的server.js文件(节点服务器)
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
什么是最好的解决方案？在此先感谢您的帮助.
感谢@trehyu帮助我得到这个答案.
就像他写的那样,我需要在我的server.js文件上设置一些设置,将用户重定向到我的"index.html"文件.
所以取决于你的文件结构......
之前(不工作)
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/front'));
var port = process.env.PORT || 8000;
app.listen(port);
之后(工作)
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/front/js'));
app.use('/build', express.static(__dirname + '/../build'));
app.use('/css', express.static(__dirname + '/front/css'));
app.use('/images', express.static(__dirname + '/front/images'));
app.use('/pages', express.static(__dirname + '/front/pages'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('/front/index.html', { root: __dirname });
});
var port = process.env.PORT || 8000;
app.listen(port);
我希望这有助于其他人!
| 归档时间： |
|
| 查看次数： |
4130 次 |
| 最近记录： |