This is the last part of three-series tutorial. We are going to build a full-stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS).
Part III: MEAN Stack
LAMP (Linux-Apache-MySQL-PHP) has dominated web application stack for many years now. Well-known platforms such as Wikipedia, Wordpress, and even Facebook uses it or started with it. Enterprise, usually, used go down the Java path: Hibernate, Spring, Struts, JBoss. More agile frameworks also have been widely used such as Ruby on Rails and for Python Django and Pylon.
(Image from backand.com)
Why MEAN stack then?
Image from strongloop.com
Some companies like Paypal moved from Java backend to NodeJS and reported a increased performance, lower average response times, and development speed gains. Similarly happens to Groupon that came from Java/Rails monoliths.
Agile and vibrant community
MEN for MongoDB, ExpressJS and NodeJS
A for AngularJS
Similarly, we have build a very lean todoApp in the first part of this tutorial. You can download the file to follow along and see it in action here. You might notice the angularJS app is very simple and even it is entirely in one file for simplicity sake. In further tutorials, we are going to make it more modular, split in files, add tests and stylesheets.
Let’s go first to the ExpressJS app (todoAPIjs) and review the default routing system:
app.jsloads the all the routes.
- The root path (
/) is mounted on the
routes/index.jssets the variable title and renders
1 2 3 4 5 6 7 8 9 10 11 12
The best place to load our
./views/index.ejs. So let’s copy the body content from ngTodo.html content in there and change in
./routes/index.js title to “ngTodo App”. Don’t forget to add ng-app on the top.
Wiring it together
AngularJS Read with $http
As you might notice, in the factory, we have a fixed array. We need to change it to communicate with the API that we just build.
$http is Anguar core sevice that allow to make
jsonp request. You can either pass an object with http verb and url or call call $http.verb (
$http returns a promise which has a
1 2 3 4 5 6 7 8 9 10 11
Let’s try it out in our app. Go to
views/index.ejs and do this changes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
If you have data in MongoDB you see them listed in the main page. If you not you can follow the steps in here to get some in.
AngularJS Read with $resource
If you click in one of the Todo elements and get redirected to the detail page, you will not see anything yet. We need to update the
TodoDetailCtrl first. Even though, we already have the GET verb working, we have a slightly different URL requirement for
/todos/:id. There’s an Angular service that has a higher level of abstraction to deal with RESTful requests:
$resource(url, [paramDefaults], [actions], options);
It comes with the following actions already defined; it is missing one though… Can you tell?
1 2 3 4 5
The instances are used in the following way (examples will come later):
Resource.get([parameters], [success], [error])
Resource.action([parameters], postData, [success], [error])
resourceInstance.$action([parameters], [success], [error])
$resource is not part of the Angular core, so it requires to
ngResource and the dependency. We can get it from the CDN:
This is what need to set it up:
1 2 3 4 5 6 7 8 9 10 11 12
$resource does not return a promise like
$http but an empty reference instead. Angular will render an empty
$scope.todos, however, when
Todos.query() comes with the data from the server it will re-render the UI automatically.
We will need to create a new text box, a button to send a
POST request to server and add it to the
Notice that we are using a new directive
ng-click, this one executes a function when it clicked. Angular makes sure that the behaviour is consistent across different browsers.
1 2 3 4 5 6 7 8 9 10 11 12 13
Show Todo details
Every time you click a todo link, it is showing an empty fields. Let’s fix that. First we need set the real
_id to the links instead of
1 2 3 4
1 2 3
Now you should be able to see the details :)
AngularJS Update (in-line editing)
This is going to be a very cool feature. Meet these new directives:
ng-show: is directive that shows the element in which it is declared if attribute is true or hide it when the attribute become false.
ng-change: directive for input elements that evaluates the expression after any change.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
We added a new variable
$scope.editing which shows or hides the form to edit the values. Furthermore, notice ng-click functions: edit, update and cancel. Let’s see what they do.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
While were are editing notice that we copy the original todo task into the editing variable. This server for two purposes: (1) it evaluates to
true and show the forms with
ng-show and (2) it holds a copy of the original value in case we press cancel.
Now, going to the Todo Details. We would like that to be updated as well and add notes.
1 2 3 4 5 6 7 8
Similarly, we added an update method. However, this time we do not need to pass any index, since it is just one todo at a time. After it has been saved, it goes back to root path
1 2 3 4 5 6 7 8 9
$location.url([url])is a getter/setter method that allows us to change url, thus routing/view.
These are the changes added to implement the remove functionality. Pretty straight forward. Notice when we remove elements from the todos array
$scope.todos.splice(index, 1) they also disappear from the DOM. Very cool, huh?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
Congratulations! You are now a MEAN developer!
Learn how to use GruntJS to automate repetitive tasks in your MEAN Stack workflow.
Also, you can learn more about full-stack framework solutions.
What we did in these three series tutorial could have been done with just few keystrokes in the comamnd line ;). However, it’s good to know what’s going on. But at this point you do. So, I will introduce you to some frameworks that can save you a lot of time.
MeanIO uses a customized CLI tool: ‘mean’. Its approach for modularity is leaned towards self-contained packages that have code for both client and server files. At moment of writing this, it has nine packages ranging from MEAN-Admin, Translation, file uploads, image crop and more.
MeanJS it is a fork from the creator of MEAN.IO, it uses Yeoman generators to generate Angular’s CRUD modules, routes, controllers, views, services, and more. Also has generators for Express: models, controllers, routes and tests. It has excellent documentation.
Others Frameworks to look at
- Meteor - Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.
- Sails - The web framework of your dreams. for your next web application.
- Tower.js - Small components for building apps, manipulating data, and automating a distributed infrastructure.