Can't navigate directly to Angular UI Router url
This is my router file:
nested inside the require.js block and configured to work with Jade templates
define([
'./app',
'angular.uirouter'
], function(app, angularUIRouter) {
"use strict";
// ROUTES
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
// loads url from the index
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('dashboard', {
url:'/dashboard',
views: {
'core' : {
templateUrl: '/articles/dashboard'
}
}
})
}]);
});
And this is my Express.js router file:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('main', {
title: 'Express'
});
});
router.get('/dashboard', function(req, res) {
console.log("/dashboard requested");
});
router.get('/articles/:name', function (req, res) {
var name = req.params.name;
res.render('articles/' + name);
});
module.exports = router;
When I go to localhost: 3000 / dashboard it makes a GET request to the server. How can I configure Angular UI Router to handle GET requests instead of server?
Note. I can still go to localhost: 3000 / articles / dashboard and see the dashboard. Besides,
a(ui-sref="dashboard")
loads the panel correctly.
source to share
Neither angular nor ui router can handle GET server. angular $ locationProvider html5Mode only allows client side setting - url does not contain # and location controls, nor path in url.
Html5 mode requires server side configuration. Each request must return the entry point of the application — usually index.html.
for example
router.get('/dashboard', function(req, res) {
res.sendfile('path-to/index.html');
});
source to share