I am creating an angular application on an express / node server. There are two pages. I installed them on app.js
var routes = require('./routes/index'); var users = require('./routes/users'); app.use('/', routes.list); app.use('/users/', users.showUsers);
here are the routes ( index.js and users.js )
exports.list = function(req, res){ res.render('index') }; exports.showUsers = function(req, res){ res.render('users') };
Now users.ejs is just a dummy page like
<!DOCTYPE html> <html > <div id="main"> this is where content will be injected </div> </html>
but index.ejs is a spa style like
<html ng-app="sp"> var sp = angular.module('sp', ['ngRoute']); sp.config(function ($routeProvider, $locationProvider) { // configure the routes $routeProvider .when('/', { // route for the home page templateUrl: 'http://localhost:4800/home.html', controller: 'homeController' }) .when('/about', { // route for the about page templateUrl: 'http://localhost:4800/about.html', controller: 'aboutController' }) .otherwise({ templateUrl: 'http://localhost:4800/routeNotFound.html', controller: 'notFoundController' }); $locationProvider.html5Mode(true).hashPrefix('!'); }); sp.controller('homeController', function ($scope) { $scope.message = 'Welcome to my home page!'; }); sp.controller('aboutController', function ($scope) { $scope.message = 'Find out more about us.'; }); sp.controller('notFoundController', function ($scope) { $scope.message = 'There seems to be a problem finding the page you wanted'; }); <li><a href="/"> Home</a></li> <li><a href="about"> About</a></li> <li><a href="/users/"> users</a></li> <div id="main"> <div ng-view></div> </div>
Links are menus and various index load patterns in the main div . But when I click on <li><a href="/users/"> users</a></li> , it doesn’t load the page, it thinks it is a different template to load into the index and it crashes. I am even trying to set the link in a different way, like http://localhost:4800/users , nothing. Should I set another when in routeProvider and then reload the page for users ? Is there a smarter way to do this without using routeProvider ? I declared a different route in app.js for users , why doesn't it just load the page?
Thanks in advance
UPDATE
I changed this
app.use('/', routes.list); app.use('/users/', users.showUsers);
to that
app.get('/', routes.list); app.get('/users/', users.showUsers);
and nothing else
UPDATE 2 I also have an otherwise case in routing and the relative controller is "notFoundController". At first I did not include them so that the question was short. When I click on users, I get “It seems there is a problem finding the page I want” on the page.
UPDATE 3 My source code is sp.config(function ($routeProvider, $locationProvider) { . The same configuration function has $locationProvider.html5Mode(true).hashPrefix('!'); If you delete it and change the url prefixes in the menu from / to # (users still have / ), everything works fine. But I don’t understand why html 5 mode breaks all the code, and I don’t want to use #