22

I've started using angular in my express generated projects and i'm loving it. Recently I implemented angular routing into one of my test projects and I'm wondering what the advantages and disadvantages are to using angular routing over pure express/node routing (e.g. are there technical issues with this way, or maybe SEO, or is it totally unnecessary).

FYI on my setup: I have express rendering the main index template as well as routing all request (a catch all) to the main index template and then I'm using angular to route to partial templates from within the main index template

zero
  • 2,999
  • 9
  • 42
  • 67
  • 1
    If you're using angular, the "best" (in my opinion) way would be to allow angular to do what it's best at and handle the routing on it's own, and having express simply serve all 404's to the index.html – Kevin B Feb 11 '15 at 17:02
  • @KevinB you mean let express handle the routing? – zero Feb 11 '15 at 17:04
  • No, i mean let angular do the routing. express simply servs up index.html and an api to access data from. – Kevin B Feb 11 '15 at 17:04
  • Either way express will be doing *some* routing, it's just that generally you let angular do most of the work. – Kevin B Feb 11 '15 at 17:11
  • well since you said it's the best (in your opinion), what is the main advantage to doing it with a majority angular approach – zero Feb 11 '15 at 19:52
  • If you did the routes with express instead, you would be reloading your web page (and all assets, though that's less of an issue thanks to caching) with every page change, whereas with angular routing you essentially have a single page application (SPA) that loads all additional pages via ajax. – Kevin B Feb 11 '15 at 19:54
  • There are trade-offs either way, but if it were me, i would either use angular routing, or express routing, not both. If using express routing, i would drop angular altogether and use something lighter since most of the work will be done by node (templating etc.) On sites where i employ this technique (express routing) most of the pages don't even have javascript other than for analytics and maybe some animations. – Kevin B Feb 11 '15 at 19:55
  • yeah that makes sense. well technically there is no way to use angular's routing 100% in the mean stack since express has to serve the main index file and tell all request to go to one place so it winds up being (20% express) and (80% angular) outside of the mean stack (like regular html) I can see angular routing being use roughly 100%. – zero Feb 11 '15 at 21:53
  • so are you saying that because express is being used for routing out of the gate in a typical mean stack project (I'm also using jade because i love it's html syntax) that routing in angular may be unnecessary? – zero Feb 11 '15 at 21:56
  • 2
    No, you'll always have to do *some* routing with express, as you've pointed out, serving index.html and static assets such as your js/css/images. I'm not considering this as "routing" in my above comments, it's just something you would inherently have to do to serve the angular app. That could very well be replaced by nginx serving a static folder. – Kevin B Feb 11 '15 at 22:01
  • ah! got it. yeah I've seen it done this way (but was never explained as to why it was better than just out of the box express). I see that mean.io is using both, but i think the express is reserved for server side controllers (slightly unclear as to what that is) and since jade uses includes for it's templates that means every jade page servered by express is a one pager just not an ajax one pager – zero Feb 11 '15 at 22:11
  • Exactly. Jade would be more for single static(or dynamic) pages. Generating an angular template from a jade template for example sounds like an awful idea, i wouldn't recommend that to anyone. – Kevin B Feb 11 '15 at 22:12
  • ok cool. yeah i'll keep angular for it's two way data binding and other functionality because those parts seem very nice, but will drop the angular routing. can you put this into an answer so i can accept it? – zero Feb 11 '15 at 22:13

2 Answers2

31

With the mean stack (mongo, express, angular) you will have routing at both ends.

Express will serve your static index.html and css/js/images and your api, and angular will interact with the api to get data from mongo.

Routing with express will primarily be done for the API, and routing in angular will be done to handle the front-end of your application. Express will not return any html other than the index.html and any template partials that you have written for angular, however even that can be eliminated by compiling all of the templates directly into your js files using a build-tool such as gulp/grunt.

It certainly is possible to go 100% to one side or the other, however, it's impractical because you'll end up inefficiently using one side or the other. For example, if you did all of your routing with express and used angular on each individual page, you would be ignoring all of the single page app functionality and routing of angularjs, leaving it's only purpose being building the page which could probably be done more effectively with express and jade (or any other templating engine.) It isn't really possible to go in the other direction and do all of your routing with angular because angular requires an api to get data from, unless you include all of the data up front inline in the html, which i'm sure you'll agree is a bad idea. (it also eliminates mongo at that point..)

Kevin B
  • 94,570
  • 16
  • 163
  • 180
8

They are solving two different problems. Angular routing (ui-router) is client-side - loading the correct ui-views. Express routing is server-side - the REST APIs you are exposing.

Brad Barber
  • 2,953
  • 1
  • 19
  • 18
  • so what im asking is what is the main advantage to letting angular do the majority of the routing vs express doing all? – zero Feb 11 '15 at 19:50
  • 2
    Hmm.. This answer made most sense – Valentino Pereira Jun 02 '17 at 05:53
  • express cannot do the routing from the client-side direcrly, Angular routing is the same functionality as if you clicked a link, if you want to change the view from the front-end directly, it uses js, but if you want to serve the content from the server, it sends a request to express. – xx yy May 05 '19 at 08:05