Nodejs & Angularjs, Clear URLs

Question

How to configure node / angular to index.html/appwork with example.com, notexample.com/app/index.html#/home

I tried putting index.htmlnode in the root of the server, but it still leaves the URL asexample.com/index.html#/home

Answer 1

You need to enable it html5mode. Documentation and considerations can be found here .

Here is an example taken from Brian Ford :

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    // configure $routeProvider, then...
    $locationProvider.html5Mode(true);
  }
]);

The angular -ui structure has an example configuration for connecting it to express.js:

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendfile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

, index.html, /partials/:name, /api/*

Answer 2

Yoeman grunt NODEJS.

server.js , .

var express = require('express');
var app = express();

app.use(express.static(__dirname + "/app"));

app.all('*', function(req, res, next) {
  // Just send the index.html for other files to support HTML5Mode
  res.sendFile('/app/index.html', { root: __dirname });
});
var port = 1337;
app.listen(port); //the port you want to use
console.log('Server running at localhost:' + port);

Hide result

, HTML5 AngularJs

angular.module('yourApp')
  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider
      .when('/some', {
        templateUrl: '../templates/some.html'
      })

      .otherwise({redirectTo: '/'});

    //enabling HTML5 mode
    $locationProvider.html5Mode(true);
  }
  ]);

Hide result