10

Express JS uses templates for generating HTML and then server sends them to client in response. There may be several other templates from which HTML can be generated. The ones I was able to discover are:

In my app, I need to use both ExpressJS and AngularJs. I am new to both technologies. While learning angular, I had to use it in pure HTML. After learning ExpressJs, I realized, in order to use angularjs, I need to use them in any of the above templates which will be converted to HTML while sending to client.

Now, I want to use expressjs as my server and angularjs as my client side app. For this, I think I have two options.

Option 1

I can stop using templates altogether and use our NodeJS server to respond by sending simple HTML files. These HTML files will then contain AngularJS coding within them. AngularJS then, on client side, will act as our application. It will demand other HTML documents from the server. Or it can also be used like AJAX, where we can only request the piece of information to update just part of the page rather refreshing the whole page for a minor change.

Option 2

I can use angularjs inside expressjs templates (jade or ejs).

Kindly, help me in understanding the pros and cons of both options. Which one will be your choice in such case.

Improve this question
2
  • you could also write html templates and serve them using express.static() Commented Dec 13, 2013 at 17:02
  • why not use option two with template in both frontend and backend. you have the control to mess up or not mess up the application Commented Dec 13, 2013 at 20:09

3 Answers 3

Reset to default
12

This is very much an opinion question and Stack Overflow admins hate anything that smacks of opinion, but here's my experience and opinion nevertheless.

I've done a couple of apps now using purely static files (HTML, CSS, and JavaScript) with those calling a service on the back-end to deliver the data. It reduces the back-end, whatever it is (I've used both Java and Node.js), to just being a set of service URLs but it works very very well.

  • You've got a fantastic hard line between the responsibilities of the two systems
  • It's very easy to work on and test each one independently
  • Bugs are usually very clearly in the front-end or the back-end (all you have to do is look at the data transferred to know)
  • The back-end services are ready to be reused to support alternative UIs from the command line or something mobile specific if you want
  • You can use one technology for the back-end to start with (say Node.js or Ruby on Rails) and then switch to something else later if you need to. As long as the API stays the same the front-end never knows.
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

more benefits to this approach: 1. static html pages can be served via CDN and cached more easily by browser. 2. by loading static page first, then fetching data from server to complete the dynamic portions, the page can start to load much faster than if you first get data from database and use it to build the entire page before sending to client.
Good one CodeToad! The caching is an excellent benefit and one we're working on right now. We're trying to put expires headers on our JavaScript that would allow them to be cached for up to a year and put a mechanism into place that will allow us to bust that cache if we need to. It should make for very fast page loads going forward. I should have listed that.
I do admit that serving static html and have the content loaded async (using angular) renders quicker than server-side. But just thinking…what if some menus of some parts of the page is subjected to authorization (access rights)? Can angular handle that very well? And it could flick before it's fully loaded, not so nice user experience right?
@aheryan I find it's best to assume that a user has no privs to start with (so defaulting to off). Thus parts may appear as we find out they have the authorization to do it, rather than disappearing as we find out they cannot do it.
@aheryan You can absolutely have multiple pages, each of which is its own ng-app. We had to do that in an existing app because we were gradually replacing some horror show code that was a glop of JSP and hundreds of embedded lines of JavaScript and jQuery. As we replaced a page, each one was its own AngularJS app with one view or a few views on a single router. But in a case like Google's inbox, where it's a true SPA, you can download data once, keep it in a service (which persists across routes) and not have to keep making API calls as you go to each route and its corresponding view.
|
3

I personally use AngularJS with Express/Jade. The setup is actually pretty simple and I find writing Jade much more enjoyable than writing HTML. I've also adopted writing my Angular code in CoffeeScript as, again, it makes for quicker development. If you are looking to save keystrokes then Jade is a great solution and its integration with Express makes it a no brainer. If you aren't worried about producing code more quickly then there is absolutely no problem with using HTML.

I will point out that one of the greatest benefits I have found to using Jade over HTML is the ability to develop a single page in multiple files, then use include to have them concated before compiling into HTML. This allows you to take larger pages and break them into more manageable chunks. Together with Angular's templating, this can relieve much frustration.

Really it is all a matter of opinion, but since I decided to give Jade a shot, I have not regretted it and I have never ran into a situation where my HTML was rendered incorrectly when using Angular.

Improve this answer

Comments

2

I went with option 1 because I didn't want to deal with any potential issues with jade or ejs converting the template incorrectly and interfering with Angular. My app essentially has the index page (which is really just the basic page template with my css and js includes) come out of Express as jade and then angular takes it come there and all my angular templates are in a separate location than my jade template.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.