Nodejs & Angularjs, Clean urls - node.js

Question

How do I setup node/angular to have the index.html/app run at example.com rather than example.com/app/index.html#/home
I tried putting the index.html at the root of the node server but that still leaves the url as example.com/index.html#/home

Answer 1

What you need is to enable html5mode. It's documentation and considerations can be found here.
Here's 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 framework has example configuration for wiring this up 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
In Brian's article, you don't have to manually map the static asset folders because his example delivers the single index.html, maps partials to /partials/:name, then interacts with /api/*

Answer 2

If you are using Yoeman, or grunt build on your NODEJS server.
You can simple add new file server.js into root folder, and if your app folder is inside and your root folder.
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);
And make sure you have enabled HTML5 mode inside your AngularJs config
angular.module('yourApp')
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/some', {
templateUrl: '../templates/some.html'
})
.otherwise({redirectTo: '/'});
//enabling HTML5 mode
$locationProvider.html5Mode(true);
}
]);