Todo Walkthrough

The trouble with full stack generators is that if you are not very familiar with the stack you have built, it can be tricky to follow through the code logic and understand how to adapt the starter app to your own needs. To overcome that hurdle, this walkthrough will step through the main functionality of this app and highlight the main areas of interest.

Intro

Firstly let's introduce the app and what it does.

If you have generated an app successfully and then started your database, run npm run dev (or npm start and npm run watch separately), then http://localhost:3000 should automatically open in your default browser. Note that in this example, I am using Angular 2 with Node + Express + Mongoose and Typescript (sometimes called the MEANT stack).

You should see something like this:

Note that it won't show any data until you type something in and press + or hit enter. Click an item and it will disappear. The data is persistent, so open two windows and you'll see both lists update. Restart the browser and the same items are still there - MongoDB is working!

The Code

I am going to try not to get into too much detail about how the core technologies actually work, rather focus on the way the generator has structured these technologies. It is all fairly standard, so if you are familiar with MEAN (or whichever structure you have selected) stack applications, then you may not need this.

Client Side

So the Client folder contains all the code which the user sees, so the html, css and angular code. Our Todo app is very simple so fortunately, there isn't a huge amount to cover here.

~/project/client/dev/todo

So in this directory we have:

• components/ - This is where all of the Angular components are kept controlling what gets shown, these contain references to styles, services and templates;

• services/ - This is where the Angular Services (ways of sharing data logic between components, other services and client/server) are kept;

• styles/ - This is where all of the css is kept to style your pages;

• templates/ - Html pages with Angular references to show dynamic data.

Server Side

On the server side, we have the structure separated and ready to scale. The main points being:

• server.ts - The entry point of the server, the one that wires it all together;

• routes/ - General routes initializer;

• constants/ - General server constants;

• config/ - General config for the server, things related to db and routes are done here (like db url, middlewares, etc)

• common/static/ - The one responsible to sending the index.html to the client;

• api/todo/routes/ - The routes responsible to dealing with the data from and to the client;

• api/todo/controller/ - The controllers responsible to handling what the client sent/wants;

• api/todo/model/ - The model of the object traveling to and from the client;

• api/todo/dao/ - The service responsible to adding/removing todos from the db;