CODEWITHSUNDEEP
javascriptnode.jsangularjsexpress
HelterShelter
HelterShelter

Reputation: 171

AngularJS html5mode reloading page

I have two separate applications:

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

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();
});

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

<!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>

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

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?

Upvotes: 1

Views: 1345

Answers (1)

Eloims
Eloims

Reputation: 5224

You guessed right!

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

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.

Upvotes: 2

Related Questions