HTTP错误404在页面刷新ANgular JS1后

我正在使用http-server包来运行我的angular js项目。我的目录结构如下： -HTTP错误404在页面刷新ANgular JS1后

angulardemo /应用/公/控制器

angulardemo /应用/公/ app.js

angulardemo /应用/公/ index.html的

angulardemo /应用程序/公/视图

ANG我app.js文件是

var app = angular.module('angulardemo', ['ngRoute', 'ngCookies']) 
 
\t \t .constant('API_URL', 'http://127.0.0.1:8001') 
 
\t \t .config(function ($routeProvider, $locationProvider, $httpProvider) { 
 
\t \t \t 
 
\t \t \t $httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'}; 
 
\t \t \t $httpProvider.defaults.headers.post = {}; 
 
\t \t \t $httpProvider.defaults.headers.put = {}; 
 
\t \t \t $httpProvider.defaults.headers.patch = {}; 
 

 
\t \t \t /** 
 
\t \t \t * 
 
\t \t \t * Checks for url access 
 
\t \t \t */ 
 
\t \t \t resolver = function (access){ 
 

 
\t \t \t \t return { 
 
\t \t \t \t \t load: function($q, AuthService, $location){ 
 
\t \t \t \t \t \t if(access){ 
 

 
\t \t \t \t \t \t \t return true 
 
\t \t \t \t \t \t }else{ 
 

 
\t \t \t \t \t \t \t if(AuthService.checkLogin()){ 
 

 
\t \t \t \t \t \t \t \t return true; 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t else{ 
 

 
\t \t \t \t \t \t \t \t $location.path("/login"); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t } 
 

 
\t \t \t $routeProvider 
 
\t \t \t .when('/', { 
 

 
\t \t \t \t templateUrl : "/view/home.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/home', { 
 

 
\t \t \t \t templateUrl : "/view/home.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/about', { 
 

 
\t \t \t \t templateUrl : "/view/about.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/team', { 
 

 
\t \t \t \t templateUrl : "/view/team.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/work', { 
 

 
\t \t \t \t templateUrl : "/view/work.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/price', { 
 

 
\t \t \t \t templateUrl : "/view/price.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t \t \t .when('/users/:user_type', { 
 

 
\t \t \t \t templateUrl : "/view/developers.html", 
 
\t \t \t \t controller : 'UsersController' 
 
\t \t \t }) 
 
\t \t \t .when('/user/show/:id', { 
 

 
\t \t \t \t templateUrl : "/view/user.details.html", 
 
\t \t \t \t controller : 'UsersController' 
 
\t \t \t }) 
 
\t \t \t .when('/contact', { 
 

 
\t \t \t \t templateUrl : "/view/contact.html", 
 
\t \t \t \t controller : 'PagesController' 
 
\t \t \t }) 
 
\t   .when('/register', { 
 

 
\t    controller: 'AuthController', 
 
\t    templateUrl: '/view/auth/register.html', 
 
\t \t \t \t resolve:{ 
 

 
\t \t \t \t \t loggedIn: function(AuthService, $location){ 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(!AuthService.checkLogin()) 
 
\t \t \t \t \t \t \t return true; 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t \t $location.path("/home"); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t   }) 
 
\t   .when('/login', { 
 

 
\t    controller: 'AuthController', 
 
\t    templateUrl: '/view/auth/login.html', 
 
\t \t \t \t resolve:{ 
 

 
\t \t \t \t \t loggedIn: function(AuthService, $location){ 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(!AuthService.checkLogin()) 
 
\t \t \t \t \t \t \t return true; 
 
\t \t \t \t \t \t else 
 
\t \t \t \t \t \t \t $location.path("/home"); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 

 
\t   }) 
 
\t \t \t .when('/dashboard', { 
 

 
\t    controller: 'DashboardController', 
 
\t    templateUrl: '/view/dashboard/index.html', 
 
\t \t \t \t pageTitle: 'dashboard', 
 
\t \t \t \t resolve:resolver(false) 
 
\t \t \t }) 
 
\t \t \t .when('/users_personal/:id', { 
 

 
\t    controller: 'UsersController', 
 
\t    templateUrl: '/view/users/personal.html', 
 
\t \t \t \t pageTitle: 'personal_details', 
 
\t \t \t \t resolve:resolver(false) 
 
\t \t \t }) 
 
\t \t \t .when('/users_edu/:id', { 
 

 
\t    controller: 'UsersController', 
 
\t    templateUrl: '/view/users/edu.html', 
 
\t \t \t \t pageTitle: 'edu_details', 
 
\t \t \t \t resolve:resolver(false) 
 
\t \t \t }) 
 
\t \t \t .when('/users_contact/:id', { 
 

 
\t    controller: 'UsersController', 
 
\t    templateUrl: '/view/users/contact.html', 
 
\t \t \t \t pageTitle: 'contact_details', 
 
\t \t \t \t resolve:resolver(false) 
 
\t \t \t }) 
 
\t \t \t .when('/users_other/:id', { 
 

 
\t    controller: 'UsersController', 
 
\t    templateUrl: '/view/users/other.html', 
 
\t \t \t \t pageTitle: 'other', 
 
\t \t \t \t resolve:resolver(false) 
 
\t \t \t }) 
 
\t   .when('/logout', { 
 
\t \t \t \t 
 
\t \t \t \t resolve : { 
 
\t    \t logout: function ($routeParams, $location, $http, API_URL){ 
 
\t \t \t \t \t \t $http.get(API_URL + "/api/auth/logout").success(function (response) { 
 

 
\t \t \t \t \t \t \t if(response === "OK"){ 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t localStorage.removeItem('auth'); 
 
\t \t \t \t \t \t \t \t $location.path('/login').replace(); 
 
\t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t }) 
 
    \t    \t } 
 
\t    } 
 
\t   }) 
 
\t \t \t .otherwise({ 
 
      \t redirectTo: '/', 
 
    \t \t }); 
 
    \t \t $locationProvider.html5Mode({ 
 
\t \t \t \t enabled: true, 
 
\t \t \t \t requireBase: false 
 
\t \t \t }).hashPrefix('*'); 
 
\t \t }).run(['$http', '$cookies', function($http, $cookies) { 
 

 
\t \t \t $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; 
 
\t \t }]);

当我使用“HTTP服务器” 与应用程序目录命令我网址为http://127.0.0.1:8080 http://192.168.10.137:8080

运行项目中的所有网页都工作正常，但是当我刷新页面我得到这个127.0.0.1页面无法找到

没有网页被发现的Web地址：http://127.0.0.1:8080/team HTTP错误404

所以任何人都可以告诉那里有什么不对的地方。并提供解决方案。

见git的枢纽目录结构： -

https://github.com/sanjaysamant/angulardemo/tree/local/app

角的js文件是在公共目录

感谢

请参阅终端的屏幕截图：

来源

2017-05-30 Sanjay Samant

无论何时使用子网址（例如/team）并刷新页面，节点服务器都会查找服务器上文件夹team中的HTML文件，这不是您想要的。您需要服务器将所有这些URL重定向到index.html，以便加载Angular应用程序，然后可以正确地初始化正确的页面。

你可以尝试在server.js文件中的以下内容：

//routes 
app.use('/api/auth', require('./controllers/auth/auth.controller')); 
app.use('/api/users', require('./controllers/users/users.controller')); 
app.use('/api/user/', require('./controllers/users/users.controller')); 
// Redirect unmatched routes (All specific routes such as /api/* need to be before this call) 
app.use(redirectUnmatched); 

function redirectUnmatched(req, res) { 
    res.redirect("/"); 
}

来源

2017-05-30 12:45:34 Chnoch

感谢您的快速响应但我得到同样的错误。而你正在谈论服务器将所有这些URL重定向到你的index.html。那么你能告诉我，我需要使用哪个服务器。我是新角色和节点。谢谢 –

是的，服务器需要重定向所有的URL，因为你总是想加载一个index.html文件。 Node在这种情况下作为服务器运行，而angular和所有html-Files的所有内容都是前端（客户端）。你能告诉我你的server.js文件是什么样的，如果你在运行http-server时有任何错误或信息消息。如果您还没有完成，您还需要在进行更改后停止并重新启动服务器。 – Chnoch

https://github.com/sanjaysamant/angulardemo/tree/local/app还有一件事情，当我只运行angularjs，那么为什么我需要server.js文件？我已经更新了上面的屏幕截图。谢谢 –

什么@Chnoch建议是正确的，但我想给你一个不同的方法。

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

因为对于一个页面的所有请求都将是一个GET请求，你不需要指定POST，并用这种方法，将保留当前的URL你是如（如果你是在http://127.0.0.1:8080/team你将刷新并仍然在/团队），@ Chnoch的方法将始终将您重定向到http://127.0.0.1:8080/。

这样做的目的是为了节点服务器无法解决的任何请求，它只会呈现普通的索引页面，然后可以由Angular的ngRoute来处理以显示模板（您也可以使用模板引擎，如EJS或帕格与此，只需用渲染功能替换res.send）。

只要确保上面的代码在你想被Node服务器解析的所有其他路由之后（例如你的API等），所以它不会干扰路由之后的路由，因为这是一个catch all路线。

来源

2017-05-30 12:58:31 Chifilly

感谢您的回复，但我再次得到相同的错误。 –

并没有得到“你想要由节点服务器解决的LL其他路由”。我正在使用http-server包运行角度js代码。谢谢 –

对不起，不知道为什么错误发生，所以我不能进一步遗憾。我的意思是我提供的代码是一个全部的代码，所以在它之后定义的任何路由都将永远不会到达，所以我只是建议你确保它最后一次 – Chifilly

HTTP错误404在页面刷新ANgular JS1后

回答

相关问题