MEAN stack: which files do I use?

Question

TLDR; This tutorial advises to delete the folders bin , views , routes altogether, and I wonder if that is the convention when using the MEAN stack.

I am new to MEAN stack and I am confused by the conflicts between the server and client. More specifically, I am not sure which files from Express I should replace with Angular files.

shoppingMall
..bin
..data
..node_modules
..public
....images
....javascripts
....stylesheets
..routes
....index.js
....users.js
..views
....index.jade
....layout.jade
..app.js
..package.json

Here are my specific questions:

1. Do I use views/index.jade at all or must I create public/views/index.html ? Am I right if I think the first is server-side html rendering while the latter is client-side html rendering?
2. What do I do with routing? routes/index.js is a routing file provided by Express but doesn't Angular also provide a $routeProvider ?

routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

$routeProvider example

$routeProvider
  .when('/', {
    templateUrl: 'views/home.html',
    controller: 'MainCtrl'
  })
  .when('/shows/:id', {
    templateUrl: 'views/detail.html',
    controller: 'DetailCtrl'
  })
  .when('/login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl'
  })
  .when('/signup', {
    templateUrl: 'views/signup.html',
    controller: 'SignupCtrl'
  })
  .when('/add', {
    templateUrl: 'views/add.html',
    controller: 'AddCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });

Getting a clear answer to this question will help me understand how Angular really works with Express. Thank you in advance. This question also explains why I am confused with the stack but I tried to specify my confusion better in this question.

Answer 1

Angular is a framework primarily designed for building single page web applications (SPAs). What that means is that the applications you write will only ever perform a full page load once - everything after that is incremental.

To be honest I haven't read that tutorial, and despite using express for my own server side apps, haven't seen the directory structure you are talking about before. Express doesn't require a particular directory structure, so I guess that's a suggestion from the tutorial or from some other 'best practice' type article - you should be able to incorporate my next couple of points into that structure but I won't address it directly.

So this is my approach:

Routing

As you mentioned, angular can handle view routing very well, either with the out of the box stuff (soon to be updated), or using the excellent ui.router module. Also remember that because the web page only loads once ( S PA), your app won't actually request pages from the server if you link to other views using relative urls or angular's $location service.

As such if returning a full web page, it should always (generalisation of course) be index.html . If you enable HTML5 mode on angular's $locationProvider then it will do the rest magically.

But the chances are, you do still need express routing too: your app will very likely make AJAX requests for data - creating and deleting it as well as just fetching it. Those routes will need to run database operations and all of your server-side app logic that makes it do what it does.

The way I differentiate between a request that should just return index.html and one that should be caught and dealt with by express is by putting all of the REST API style data transactions under /api/[route] .

In other words: myserver.com/about will return index.html . Angular then loads and looks at the URL, realises it's in the about route, and displays the appropriate view. Conversely, if I request myserver.com/api/users , my express sever knows it shouldn't send me the index page, and will query the database for a list of users and return them in JSON format (of course security applies first).

However, you also need to think about static files:

Partials

Partials/templates (html files that make up your views for your angular routes) are just like any other static file - angular will request them when the time is right, and you just need to serve them.

Express has a great middleware that does this called static - look it up.

To confuse things further, you can "compile" your partials into a javascript file that populates angular's $templateCache so it's faster to load views for the first time. If you're interested in this google it..

index.jade vs index.html

To start with, forget jade and just use index.html. There are scenarios where jade can be useful for the server to communicate application state to the client without using an extra request but they are outside the scope of this question.

If you still don't understand, I would recommend creating a very simple application (perhaps the classic angular "todo" app) from scratch and working it out with an example!

Hope this helps.