Components of Web Application - Express.js, Angular.js and MVC confusion?

Question

I've come across a lot of posts on Stack Overflow about Express.js being used with Angular.js and how there are two MVC components to both the client and back-end sides of the web application, but I've just become confused now. What are the components of a web application, and what does each of these two serve? What are the MVC parts for each of the client and back-end sides exactly?

Thanks in advance for any response!

Answer 1

In most cases, it's pretty straight forward. In my applications, it generally works like this:

1. Express.js provides the backend REST API
2. Express.js serves up the static HTML, JavaScript, CSS and image assets.
3. The frontend HTML/Javascript bits are written using Angular.js.

I tend not to use any of Express.js' view capabilities (the stuff that provides functionality similar to ruby on rails or Django, with templating and all that), but instead serve up a single index.html and then let Angular.js do the rest. It's very possible/typical to make an Angular.js app which has only one main HTML file and therefore the "view" pieces of express are unneeded.

Angular.js itself is structured in an MVC fashion. You have view templates and controllers which provide data to them and handle events from user interaction. The data the controllers act on from comes from the model. The model is simply a layer providing access to the API provided by the Express.js backend. This is typically done using Angular.js resources .

RESTify is another alternative to express for apps stuctured in the way I describe.

As others have recommended, just go through the tutorials on each component's website. I also found a tutorial about integrating Anguar.js and Express.js here: http://technokayiti.blogspot.no/2013/06/lesson-5-angularjs-tutorial-backend.html