Here is my front-end AngularJS routing:
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true).hashPrefix('!');
$stateProvider
.state('main', {
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('review', {
url: '/review',
templateUrl: '/views/review.html',
controller: 'NewReviewCtrl'
})
.state('model', {
url: '/:make/:model',
templateUrl: '/views/model.html',
controller: 'ModelPageCtrl'
});
And here is my server-side routing (node.js):
//...some routes
app.use('/*', function(req, res){
res.sendFile(config.rootPath + '/public/index.html');
});
With /review route, everything works fine, but not with /:make/:model:
HTML:
<a href="" ui-sref="model({make: 'lenovo', model: 'thinkpad-t430'})">See more details...</a>
If I go to this page through that link, everything works fine, but if I refresh or go directly to localhost:3030/lenovo/thinkpad-t430 I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
It is probably because of the html5mode. And I suggest it not working with this URL because, it is a 2 level URL.
How can I fix this?
Edit: Express.js config:
app.set('view engine', 'ejs');
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
app.use(bodyParser());
app.use(session({secret:"some_secret"}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(config.rootPath+"/public"));
