AngularJS html5mode重新加载页面 [英] AngularJS html5mode reloading page

查看:217
本文介绍了AngularJS html5mode重新加载页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有两个单独的应用程序:

I have two separate applications:


  1. AngularJS客户端使用 http:// localhost:8080

  2. NodeJS API服务器在 http:// localhost:3000

  1. AngularJS client working on http://localhost:8080
  2. NodeJS API server working on http://localhost:3000

NodeJS API服务器只是将json数据提供给客户端页)。因此,为了向客户提供与服务器通信的能力,我在我的API服务器上启用CORS技术。

NodeJS API Server just gives json data to client (and does not give any html pages). So, to provide the client with the ability to communicate with the server, I enable CORS technology on my API server.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  next();
});

此外,我想使用没有#符号的干净的URL,所以我启用html5mode在我的AngularJS应用程序

Also I want to use clean URLs without the # symbol, so I enable html5mode in my AngularJS app

function config($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/login');
    ...

--- index.html

---index.html

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <base href="/">
  <title>APP</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/fontello.css">
</head>
<body>

  <div ui-view="content"></div>

  <script src="dist/app.js" type="text/javascript"></script>

</body>
</html>

问题:当我通过btn's与< c $ c> ui-sref 所有工作,但是当我重新加载页面,我得到以下输出:无法GET /约

The problem: when i interact with my app by btn's with ui-sref all working good, but when i reload page, i get the following output: Cannot GET /about

您可以建议我使用重写我所有的链接index.html
例如:

You can suggest me use rewrite all my links to index.html For example:

app.all('/*', function(req, res, next) {
  res.sendFile('index.html', { root: __dirname });
});

但我在我的服务器上没有任何视图。

But i haven't any "views" on my server.

在这种情况下,你能给我什么?

What can you offer me in this situation?

推荐答案

你猜对了!

您需要告诉您的服务器在端口8080上为所有请求(现有静态文件除外)提供index.html文件。

You need to tell your server on port 8080 to serve your index.html file on all requests (other than existing static files).

然后,路由器将路由到您的角色应用程序的相关页面客户端,或者将用户重定向到另一个URL,如果键入的那个不是有效的路由。

UI Router will then route you to the relevant page client-side on your angular app or redirect the user to another url if the one that was typed was not a valid route.

这篇关于AngularJS html5mode重新加载页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆