注意:我尝试了所有与此主题相关的问题和答案。像这样，我尝试了相关问题并尝试解决但没有成功。
我正在构建 angularJS 网络应用程序。纯基于AngularJS/HTML5和NodeJS/ExpressJS，数据库端使用mongo DB，就会出现这个问题。
我想要 '#'在 url 中删除并刷新页面然后显示我的当前页面。但现在显示“未找到 404”。我这样使用 $locationProvider.html5Mode(true);和 <base href="/" />但我没有成功。
I know remove # in URL solution is
$locationProvider.html5Mode(true);and<base href="/" />But i use NodeJS/ExpressJS then I can't use.
我的网址
http://localhost:3000/Tutorial/Routing/StateProvider/index.html#/Setting/StudenList
我要网址
http://localhost:3000/Tutorial/Routing/StateProvider/index.html/Setting/StudenList
注意事项:
没有这个解决方案$locationProvider.html5Mode(true);和
<base href="/" />但我使用 NodeJS/ExpressJS 然后我想删除 # 并解决刷新页面问题
代码
Folder Structure directive .我的代码很长，然后我管理片段(inside html & js)。 不运行代码段，因为我插入所有代码只是为了了解我的代码有什么错误。
sample2(refreshissue) [Project Name]
-- Public
-- Tutorial
--Directive
-index.html
--Routing
--StateProvider
-Account.html
-index.html
-Setting.html
-StudentListing.html
-studentDetails.html
-StateProviderController.js
--Validation
-index.html
-index.html
-- StateProviderController.js
---------------------------------------------------------------------------------
var myapp= angular.module('myapp2',["ui.router"]);
myapp.config(function($stateProvider,$urlRouterProvider,$locationProvider,$urlMatcherFactoryProvider){
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('TutorialHome', {
url:'/index',
templateUrl:'/index.html'
})
.state('Profile',{
url:'/Profile',
templateUrl:'Profile.html'
})
.state('Account',{
url:'/Account',
templateUrl:'Account.html'
})
.state('Setting',{
url:'/Setting',
templateUrl:'Setting.html'
})
.state('Setting.StudenListing', {
url:'/StudenList',
views: {
'StudenListing': {
templateUrl: 'StudenListing.html',
controller:'StudentListingData'
}
}
})
.state('Setting.StudenListing.StudentList',{
url:'/StudenList/:StudentID',
/* templateUrl: 'StudentDetails.html',
controller:'StudentDetails'*/
views:{
'StudentDetails': {
templateUrl: 'StudentDetails.html',
controller:'StudentDetails'
}
}
})
;
// $urlRouterProvider.otherwise('/index');
//$locationProvider.html5Mode(true);
});
myapp.controller('StateProviderCtrl',function($scope){
$scope.message ="Welcome To State Provider Page";
$scope.Home = function()
{
window.open('/',"_self");
}
});
myapp.controller('StudentListingData',function($scope,$http){
console.log('test');
$http.get('/StudenRecordData').success(function(response){
// console.log(response);
$scope.StudentRecorddata =response;
})
});
myapp.controller('StudentDetails',function($scope,$http,$stateParams){
$scope.StudentID = $stateParams.StudentID;
//console.log( $scope.StudentID);
$http.get('/StuentRecordSearch/'+ $stateParams.StudentID).success(function(response){
//console.log(response);
$scope.StuentDetails =response[0];
})
});
==================================================================================================================================================================
---- app.js
---------------------------------------------------------------------------------
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var url =require('url');
var index = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
/*var basepathArray = ['/Tutorial/Routing/StateProvider/','/Tutorial/Validation/','/Tutorial/Directive/'];
app.get('/!*',function(req,res){
var basePath ="";
for(var i=0;i<=basepathArray.length-1;i++)
{
if(req.originalUrl.search(basepathArray[i]) != -1){
basePath =basepathArray[i];
break;
}
}
if(basePath!="")
{
res.sendFile(path.resolve('public'+basePath+'index.html'));
}
else {
res.sendFile(path.resolve('public/index.html'));
}
});*/
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;=================================================================================
-- Account.html
---------------------------------------------------------------------------------
<h1>Account page</h1>
=================================================================================
-- index.html
---------------------------------------------------------------------------------
<!DOCTYPE html>
<html ng-app="myapp2">
<title>Index | Angular Js</title>
<base href="/Tutorial/Routing/StateProvider/" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="StateProviderController.js"></script>
<body ng-controller="StateProviderCtrl">
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="TutorialHome"> State Routing</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="Profile">Profile</a></li><!--State Transition on click-->
<li><a ui-sref="Account">Account</a></li><!--State Transition on click-->
<li><a ui-sref="Setting">Setting</a></li><!--State Transition on click-->
<li style="float: right;" ><a ng-click="Home()"> Home</a></li><!--State Transition on click-->
</ul>
</div>
</nav>
<div class="container" ng-controller="StateProviderCtrl">
<!-- we use ui-view instead of ng-view -->
<!--{{message}}<br>-->
<ui-view></ui-view>
</div>
</body>
</html>
=================================================================================
-- Profile.html
--------------------------------------------------------------------------------
<h1>Profile page</h1>
=================================================================================
-- Setting.html
---------------------------------------------------------------------------------
<div>
<h1>Setting page</h1>
<strong>This page shows Nested states & views. Click on below links to see Nested states in action.</strong><br>
<ul>
<li><a ui-sref="Setting.StudenListing">Show Listing</a></li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:beige;display: inline-block">
<div ui-view="StudenListing"></div>
</div>
</div>
</div>
</div>
<!-- <div ui-view="Descriptions"></div><br>
<div ui-view="Price"></div>-->
=================================================================================
-- StudentListing.html
---------------------------------------------------------------------------------
<!--<ui-view></ui-view>-->
<div class="row">
<div class="col-sm-6" style="background-color:beige;">
<h2>Student Listing</h2>
<p>All Talented Student List</p>
<table class="table" >
<thead>
<tr>
<th>Name</th>
<th>Eduction</th>
<th>Email ID</th>
<th>Details <!--<div ui-view="StudentDetails"></div>--></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in StudentRecorddata">
<td>{{data.Name}}</td>
<td>{{data.Eduction}}</td>
<td>{{data.Email}} </td>
<td><button type="button" class="btn btn-info" ui-sref="Setting.StudenListing.StudentList({StudentID:$index})">View Details</button> </td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-6" style="background-color:beige;">
<!-- <div ui-view="StudenListing"></div>-->
<div ui-view="StudentDetails"></div>
</div>
</div>
=================================================================================
-- studentDetails.html
------------------------------------------------------------------------------<div>
<h2>Student Details </h2>
<br>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Stuent Id:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StudentID}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Name:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.Name}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Age:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.Age}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Eduction:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.Eduction}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Email:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.Email}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">MobileNumber:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.MobileNumber}}</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Gender:</label>
<div class="col-sm-10">
<p class="form-control-static">{{StuentDetails.Gender}}</p>
</div>
</div>
</form>
</div>最佳答案
This is because the web server receiving the request looks for a resource matching the full url on the server, which doesn't exist because the angular portion of the url refers to a route in your angular application and needs to be handled in the client browser
解决这个问题的方法是将所有虚拟 url 重写到主要的 angular index.html 文件
AngularJS + NodeJS/ExpressJS - Routes to prevent 404 error after page refresh in html5mode
var express = require('express');
var path = require('path');
var router = express.Router();
// serve angular front end files from root path
router.use('/', express.static('app', { redirect: false }));
// rewrite virtual urls to angular app to enable refreshing of internal pages
router.get('*', function (req, res, next) {
res.sendFile(path.resolve('app/index.html'));
});
module.exports = router;
AngularJS + IIS - URL Rewrite Rule to prevent 404 error after page refresh in html5mode (for apache click here)
<rewrite>
<rules>
<rule name="AngularJS" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
解决此问题的其他方法
关于javascript - 刷新页面显示找不到文件错误如何使用 [angular js + NodeJS/ExpressJS] 解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41422127/