MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) _ Adrian Mejia Blog
MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) _ Adrian Mejia Blog
We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS,
AngularJS and NodeJS). This is the last part of three-post series tutorial.
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 1/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
Before completing the app, let’s cover some background about the this stack. If you
rather jump to the hands-on part click here to get started.
Ubiquitous
As you can see, a single thread of execution in Node can handle perform multiple
tasks vs a non-blocking style that execute each one sequentially. You can read more
about it in NodeJS faster than Java article.
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.
The community behind Javascript is quite vibrant. It has permeated in almost all the
fields of technology: data visualization, server-side, databases, robotics, building tools
and many more.
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 3/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
In the previous post, we have gone through the process of building a RESTful API
and we are going to be building on top of that. Repository here.
Let’s go first to the ExpressJS app (todoAPIjs) and review the default routing system:
1 // app.js
2 var routes = require('./routes/index');
3 app.use('/', routes);
4
5 // ./routes/index.js
6 router.get('/', function(req, res) {
7 res.render('index', { title: 'Express' });
8 });
9
10 // ./views/index.ejs
11 <h1><%= title %></h1>
12 <p>Welcome to <%= title %></p>
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. <html ng-app="app"> .
diff
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 4/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
1 // Service
2 .factory('Todos', ['$http', function($http){
3 return $http.get('/todos');
4 }])
5
6 // Controller
7 .controller('TodoController', ['$scope', 'Todos', function ($scope, To
8 Todos.success(function(data){
9 $scope.todos = data;
10 }).error(function(data, status){
11 console.log(data, status);
12 $scope.todos = [];
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 5/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
13 });
14 }])
diff
“ Try it in your browser!s If you have data from the previous tutorial you should be
able to see it.
1 npm start
1 nodemon
It comes with the following actions already defined; it is missing one though… Can
you tell?
$resource actions
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 6/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
The instances are used in the following way (examples will come later):
$resource is not part of the Angular core, so it requires to ngResource and the
dependency. We can get it from the CDN:
ngResource dependency
1 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/ang
$resource.query()
Angular will render an empty $scope.todos . but, when Todos.query() comes with
the data from the server it will re-render the UI.
diff
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 7/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
AngularJS Create
We will need to create a new text box, a button to send a POST request to server and
add it to the $scope .
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.
diff
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 $index .
diff
ng-show: this directive shows the element if the expression evaluates to true.
Otherwise, the content is hidden.
ng-change: directive for input elements that evaluates the expression after any
change.
Template todos.html
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 9/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
Todo Controller
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 10/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
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.
While were are editing notice that we copy the original todo task into the editing
variable. This server for two purposes:
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 11/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
Now, going to the Todo Details. We would like that to be updated as well and add
notes.
Todo Details
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 / .
TodoDetailCtrl controller
diff
AngularJS Delete
These are the changes added to perform the remove functionality:
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 12/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
todos.html Template
todoDetails.html Template
1 <button ng-click="remove()">Remove</button>
TodoController
1 $scope.remove = function(index){
2 var todo = $scope.todos[index];
3 Todos.remove({id: todo._id}, function(){
4 $scope.todos.splice(index, 1);
5 });
6 }
todoDetails controller
1 $scope.remove = function(){
2 Todos.remove({id: $scope.todo._id}, function(){
3 $location.url('/');
4 });
5 }
diff
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 13/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
What’s next?
Learn how to use GruntJS to automate repetitive tasks in your MEAN Stack workflow.
GruntJS Tutorial
Using MEAN.io
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.
Using MEAN.js
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 14/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
NEWER OLDER
Grunt JS tutorial from Beginner Creating RESTful APIs with NodeJS and MongoDB
to Ninja Tutorial (Part II)
email address
Subscribe
Follow @iAmAdrianMejia
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 16/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
Contents
1. Why MEAN stack?
2. TODO app with MEAN
3. Wiring up the App
4. What’s next?
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 17/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
47 Comments
1 Login
Name
Emery Clark − ⚑
10 years ago
Hey, thanks for this excellent blost post. I found it on the first page of google search results. the
links at the end were especially helpful. thanks again. btw, no offense, but if you have any native
english speaking friends you should ask them to make corrections for grammar, there were a
handful of mistakes that were distracting from the content-not a big deal but I figured it might be
good to mention. keep up the good work!
78 0 Reply ⥅
0 0 Reply ⥅
helpme − ⚑
H 10 years ago
7 0 Reply ⥅
Just type "npm start" from your project root directory. After that you should be able to
anvigate to http://localhost:3000/ to see your app. You could also change the settings by
providing them in "port" variable. For more information see the www/bin file in the
repository.
76 0 Reply ⥅
Santosh − ⚑
S 8 years ago
Thanks for this article, i was searching for some starting point to start learning this is the most
useful article i found.
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 18/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
1 0 Reply ⥅
0 0 Reply ⥅
TechSideOnline.com − ⚑
9 years ago
1 0 Reply ⥅
Rohit Agarwal − ⚑
4 years ago
At present huge amount of unstructured being generated from many sources continuously which
demands alternative of RDBMS. In such scenario, https://www.smartsight.in/m... become more
relevant as it is free, open source, cross platform, document oriented database system which helps
you overcome limitation of strictly structured RDBMS.
0 0 Reply ⥅
shakunthala − ⚑
S 6 years ago edited
0 0 Reply ⥅
− ⚑
מ
מיכל יוסף
7 years ago
Great tutorial
How can I seperate all the code in index.ejs to seperate files? (a different file fore each controler
and for each template)
0 0 Reply ⥅
Supraja Kv − ⚑
7 years ago
Hey thanks for the excellent post! I don't know if it is an appropriate platform to ask you some
questions regarding the problems I have faced during calling the Restful API from angular2.I am
able to make only 9 requests to my express API may it be get or post and for the 10th request I am
not receiving any data back to the client and the repsonse for the GET is as follows:
[nodemon] 1.12.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./bin/www`
GET /distinct 200 88.992 ms - 48596
GET /sepsis/17338147258 200 45.130 ms - 833
GET /vital/17338147258 200 243.486 ms - 143290
GET /distinct 304 52.203 ms - -
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 19/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
0 0 Reply ⥅
Yandi Ar − ⚑
8 years ago
Great tutorial.. !!
thanks
0 0 Reply ⥅
Sam − ⚑
S 8 years ago
0 0 Reply ⥅
0 0 Reply ⥅
Sach − ⚑
S 8 years ago
Hi,
I really liked this tutotial and appreciate you taking time to pass the knowledge. I am however stuck
at one place, the update function for TodoDetails is throwing the below error, while the update for
"todo" template is working fine, can you please help?
<h1>Invalid atomic update value for $resolved. Expected an object, received boolean</h1>
<h2></h2>
Error: Invalid atomic update value for $resolved. Expected an object, received boolean
0 0 Reply ⥅
I got the same Exception. Did you found a solution for this?
0 0 Reply ⥅
vijay − ⚑
8 years ago edited
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 20/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
8 years ago edited
0 0 Reply ⥅
victorL − ⚑
V 8 years ago
while it is minor, I think you should not mix port 3000 and 4000 in your curl codes in the tutorial.
0 0 Reply ⥅
Kresna Hendri − ⚑
K 8 years ago
0 0 Reply ⥅
Leo Zeron − ⚑
8 years ago
Great
0 0 Reply ⥅
VisionaryArtworks − ⚑
V 9 years ago
how can I get the angular templates etc. out of this one file? how can i organise large complicated
websites so that the routes really do split in many files and even headers etc... ?
this didn't help me too much... you didn't explain ejs either. why is it used? I don't see any server-
side templating here
0 0 Reply ⥅
ayaan kh − ⚑
A 9 years ago
0 0 Reply ⥅
Yes, I'm about to start video tutorials on Packt about the MEAN stack!
0 0 Reply ⥅
thanks alot
0 0 Reply ⥅
ayaan kh − ⚑
A
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 21/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
ayaa
A 9 years ago
your ecommerce mean stack book having giving such errors while practicing mostly npm
packages are deprecated im getting frustated while using your book. Help if you can
0 0 Reply ⥅
0 0 Reply ⥅
i used this and its working fine thanks nice book and explaination so far
1 0 Reply ⥅
Ashish G − ⚑
A 9 years ago
Hi ,I m a beginner for nodejs,some doubts i have.Why u have used index.ejs, we suppose to use
only html pages at client side.and is it necessary to write all server-side coding in Server.js,is there
any way to make a communication between files at server-side,as we do in JAVA ,thank you so
much for posting this blog.
0 0 Reply ⥅
Junior Osho − ⚑
9 years ago
bodyParser = require('body-parser'),
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials', 'true');
next();
};
0 0 Reply ⥅
John Skelton − ⚑
J 9
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 22/26
J
3/17/25, 2:18 PM
9 years ago
MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
I was getting an error trying to use $scope.editing before it was defined (angular-etc
1.4.8/Chrome). Fixed this with the following addition to $scope.edit:
if (typeof editing == 'undefined'){
$scope.editing = [];
}
0 0 Reply ⥅
Majid Lotfi − ⚑
M 10 years ago
http://localhost:3000/
0 0 Reply ⥅
Majid Lotfi − ⚑
M 10 years ago edited
Hi, Thanks for this tutorial, please provide the source code, because I got this error :
0 0 Reply ⥅
click on that error and you will see details regarding it on agularjs.org page
0 0 Reply ⥅
https://docs.angularjs.org/...
0 0 Reply ⥅
0 0 Reply ⥅
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 23/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
py ⥅
saksham − ⚑
S 10 years ago
I got the problem when I used "npm start" on the root directory of the project and given such type
of error .
$npm start
0 0 Reply ⥅
b|ank − ⚑
B 10 years ago
if I set routing in angular project, should I duplicate the routes set also in express routing ? How
can I navigate from a page to another using angular and node.js to serve that HTML page ?
0 0 Reply ⥅
Angular does most of the routing for you. You will set up an initial route index in express.
Also, you will want to set up route params for your templates that you are creating. The
rest is done client side. .
0 0 Reply ⥅
Vladimir − ⚑
V 10 years ago
Hello, thats nice tutorial but there is some problem. I can't update my note, seems the problem with
server-side: Mod on _id not allowed
0 0 Reply ⥅
0 0 Reply ⥅
V 10 years ago
Thanks a lot. It seems was problem on my local, with mongolab it works perfect
now ;)
0 0 Reply ⥅
I think i had the same problem. In the TodoDetailCtrl controller the first line has to be:
$scope.todo = Todos.get({id: $routeParams.id}); With Parentheses instead of square
brackets.
0 0 Reply ⥅
Thank you for reply, Bart. But actually that is the same as it was in original. Can
you commit your solution on Github?
0 0 Reply ⥅
Dirk − ⚑
D 10 years ago
Hey thanks for the tutorial pretty nice to follow Interest for node: check
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 25/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 26/26