Routing issue b/w angularjs and expressjs

Question

Express.js routing of /question/ask

app.get('/question/ask', function (req, res){
    console.log('index.js');
    console.log('came to question/:id');
    res.render('app');
});

The corresponding angularjs routing is:-

when('/ask', {
  templateUrl: 'partials/askQuestion',
  controller: 'xController'
}).

whereas it should be:-

when('/question/ask', {
  templateUrl: 'partials/askQuestion',
  controller: 'xController'
}).

I'm working in $locationProvider.html5Mode(true); mode.

Is there anyway i can get the later angularjs routing working. I'm using angularjs 1.1.5 version.

Edit:-

app.get('/*', function (req, res){
    console.log('index.js');
    console.log('came to question/:id');
    res.render('app');
});

has the same problem, the angular route only routes the last /ask for /question/ask.

The issue for me is that I can only do 1 of the following :-

www.example.com/question/:qId 
www.example.com/discussion/:aId

because the application will catch only 1 when('/:id', { as it does not include the previous /question/ or /discussion/

score 0 · Answer 1 · answered Nov 08 '13 at 10:16

0

Well, if you have the same routes on Express and Angular, if the user types the url directly in the browser you will hit the Express route, but if the user is navigating within the application, then he will hit the Angular route.

Is this what you want ?

What some do is to have a different set of routes on the server for the REST API, and a catch all route to serve the application no matter what the user type as a URL, bringing the user to the home page when a server route is hit. Within the application of course navigation is handled by Angular routes. The problem is that you get no deep linking.

Some other apps have the same routes on both the server and the client, this way they can serve some contents no matter what.

Some will write involved route rewriting to make sure that you both get the application bootstrapping code AND the required URL, thus allowing deep linking.

Cheers

answered Nov 08 '13 at 10:16

Luc Morin

5,302
20
39

You seem to know how to solve it. please see edit, to understand my problem. – Sangram Singh Nov 08 '13 at 10:49
After reading your edits and also re-reading your question, I'm not too sure I had understood correctly the first time. Do you have maybe a small project as an example I can look at ? – Luc Morin Nov 08 '13 at 13:00
Please look at this post, I think it's related and the problem was from a specific version of Angular – Luc Morin Nov 08 '13 at 13:16
which post? I think i've found the solution. which is using 1.2.0-rc.3 angular.js, instead of 1.1.5. – Sangram Singh Nov 08 '13 at 13:24
Sorry: http://stackoverflow.com/questions/18214835/angularjs-how-to-enable-locationprovider-html5mode-with-deeplinking – Luc Morin Nov 08 '13 at 13:39
yes, its points to the same thing. change version of angularjs. i'm using ngIf which is included in angularjs version 1.1.5 and above so using 1.2.0-rc.3 saves the day for me. Many Thanks for the effort! – Sangram Singh Nov 08 '13 at 13:50

score 0 · Accepted Answer · answered Nov 08 '13 at 13:29

0

using angular version 1.2.0-rc.3 cures the problem.

change:

var myApp = angular.module('myApp', []);

to

var myApp = angular.module('myApp', ['ngRoute']);

And include:-

script(type='text/javascript', src='js/angular-route.js')

answered Nov 08 '13 at 13:29

Sangram Singh

7,161
15
50
79

Routing issue b/w angularjs and expressjs

2 Answers2