ExpressJS paired with AngularJS Routing without hashtag on links
I may be wrong about this, but it seems that you may be confusing client side routes with server side routes.
Routes defined via ngRouter are not supposed to hit server at all.
I modified your code to make it work. It should be enough to let you go on your own -- if you have any questions, give me a shout.
Forked repo with below changes.
Files after the changes:
config.js
var angular = angular.module("NodeAngularJSRouting", ["ngRoute"]);angular.config(function($routeProvider, $locationProvider) { $routeProvider .when("/app/sub_one", { templateUrl: "/view/sub_view_one/list.html", controller: "SubViewOneCtrl" }) .when("/app/sub_two", { templateUrl: "/view/sub_view_two/list.html" }) .otherwise({ templateUrl: "/view/default/default.html", controller: "DefaultCtrl" }); $locationProvider.html5Mode(true);});server.js
var port = 3000;var express = require("express");var morgan = require("morgan");var server = express();server.use(morgan("tiny"));// serve bower components staticallyserver.use("/bower_components", express.static(__dirname + "/bower_components"));// for all routes defined on client side send// entry point to the app// btw. changes of those routes on client side// are not supposed to hit server at all (!)server.use("/app*", function(req, res, next){ res.sendFile(__dirname + '/app/main.html');});// for all public requests try to use /app folderserver.use("/", express.static(__dirname + "/app"));server.listen(port, function() { console.log("Node server initialized. Server's port: " + port);});index.html
renamed to main.html
<!DOCTYPE html><html ng-app="NodeAngularJSRouting" > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <title>Node AngularJS Routing</title> <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/view/css/styles.css"> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="/app">Node AngularJS Route</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/app/sub_one">View One</a></li> <li><a href="/app/sub_two">View Two</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container" ng-view></div> <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="/bower_components/angular/angular.js"></script> <script src="/bower_components/angular-route/angular-route.js"></script> <script src="/config/config.js"></script> <script src="/controller/default-default.js"></script> <script src="/controller/sub-one_list.js"></script> </body></html>