CODEWITHSUNDEEP
javascriptangularjsexpresssingle-page-application
slevin
slevin

Reputation: 3886

cannot load different page on angular spa

I am building an angular app on an express/node server. There are two pages. I set 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 the index.ejs is 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>

The links are the menu and the different tamplates of the index load in the main div. But when I click on the <li><a href="/users/"> users</a></li> it doesn load the page, it thinks is another template to load in index and fails. I even try to set the link differently like http://localhost:4800/users, nothing. Should I set another when in the routeProvider and then reload the page for users? Is there a smarter way to do this by not using the routeProvider? I declared a different route in app.js for users, why it doesnt just load the page ?

Thanks in advance

UPDATE

I changed this

app.use('/', routes.list);
app.use('/users/', users.showUsers);

to this

app.get('/', routes.list);
app.get('/users/', users.showUsers);

and still nothing

UPDATE 2 I also have an otherwise case in the routing and a relative "notFoundController" controller. I didnt include them at first, to make the question short. When I click users, I get "There seems to be a problem finding the page you wanted" on the page.

UPDATE 3 My original code is sp.config(function ($routeProvider, $locationProvider) { . In the same config function there is $locationProvider.html5Mode(true).hashPrefix('!');. If remove it and change the menu url prefixes from / to # (users has still /)it all works fine. But I dont get why html 5 mode breaks the whole code and I dont want to use #

Upvotes: 4

Views: 732

Answers (1)

alek kowalczyk
alek kowalczyk

Reputation: 4936

Try this:

 <li><a href="/users/" target="_self"> users</a></li>

the target attribute will force angular to not use their own routing, only do a server request.

Upvotes: 2

Related Questions