0% found this document useful (0 votes)
9 views

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) _ Adrian Mejia Blog

This document is a tutorial on building a full stack Todo App using the MEAN stack (MongoDB, ExpressJS, AngularJS, NodeJS) and is part III of a three-part series. It discusses the advantages of using the MEAN stack, including JavaScript's non-blocking I/O capabilities, and provides detailed instructions for setting up the backend and frontend of the application. The tutorial includes code snippets and explanations for implementing features such as data retrieval, creation, and updates within the Todo app.

Uploaded by

Asif Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) _ Adrian Mejia Blog

This document is a tutorial on building a full stack Todo App using the MEAN stack (MongoDB, ExpressJS, AngularJS, NodeJS) and is part III of a three-part series. It discusses the advantages of using the MEAN stack, including JavaScript's non-blocking I/O capabilities, and provides detailed instructions for setting up the backend and frontend of the application. The tutorial includes code snippets and explanations for implementing features such as data retrieval, creation, and updates within the Todo app.

Uploaded by

Asif Ali
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog

 

Home Trending Popular About Blog

Coding > Web Development > Angular

MEAN Stack Tutorial MongoDB


ExpressJS AngularJS NodeJS (Part
III)
 Last updated August 6th 2016  252.6k 47 Comments
 express mongodb nodejs todo app tutorial_mean-stack

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.

MEAN Stack tutorial series:

1. AngularJS tutorial for beginners (Part I)


2. Creating RESTful APIs with NodeJS and MongoDB Tutorial (Part II)
3. MEAN Stack Tutorial: MongoDB, ExpressJS, AngularJS and NodeJS (Part III)
👈 you are here

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.

Why MEAN stack?


TL; DR: NodeJS has been built from bottom up a non-blocking I/O paradigm, which
gives you more efficiency per CPU core than using threads in other languages like
Java.

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 used such as Ruby on
Rails and for Python Django and Pylon.

Ubiquitous

Well, it turns out, that JavaScript it is everywhere. It used to be limited to browsers.


But, now you can found it in smartphones, servers, robots, Arduino, RaspberryPi…
Thus, it does not matter what technology you use to build web applications, you need
to be familiar with Javascript. In that case, then, it is a time saver to use wherever it
fits, especially for building web applications. MEAN stack is embracing that, using
Javascript to create end-to-end web applications.​Non-blocking architecture
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 2/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog

JavaScript is a dynamic, object-oriented, and functional scripting language. One of


the features that make it win over Java Applets decades ago, it was its lightness and
non-blocking event loop. Blocking means that when one line of code is executing, the
rest of it is locked waiting to finish. On the other hand, non-blocking gives to each line
of code a shot and then through callbacks it can come back when an event happens.
Programming languages that are blocking (Java, Ruby, Python, PHP, …) overcomes
concurrency using many threads of execution while JavaScript handles it using non-
blocking event loop in a single thread.

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.

Agile and vibrant community

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.

TODO app with MEAN


In this section are going to put together everything that we learnt in the two previous
tutorials.

MEAN Backend with MongoDB, ExpressJS and NodeJS

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.

Getting the back-end code build on Part II

1 git clone https://github.com/amejiarosario/todoAPIjs.git

MEAN stack front-end with 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:

1. app.js loads the all the routes.


2. The root path ( / ) is mounted on the routes/index.js
3. routes/index.js sets the variable title and renders index.ejs .

Tracing ExpressJS index route

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

Wiring up the App


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 XMLHttpRequest or jsonp


request. You can either pass an object with http verb and url or call call $http.verb
( $http.get , $http.post ).

$http returns a promise which has a success and error function.

AngularJS $HTTP Usage Example

1 $http({method: 'GET', url: '/todos'}).


2 success(function(data, status, headers, config) {
3 // this callback will be called asynchronously
4 // when the response is available.
5 console.log('todos: ', data );
6 }).
7 error(function(data, status, headers, config) {
8 // called asynchronously if an error occurs
9 // or server returns response with an error status.
10 console.log('Oops and error', data);
11 });

Let’s try it out in our app. Go to views/index.ejs and do this changes:

Using $http to retrieve data from database

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

$http.get will request data using the GET method.

“ Try it in your browser!s If you have data from the previous tutorial you should be
able to see it.

To start the server, you can use

1 npm start

or if you have it installed

1 nodemon

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 different URL requirement for
/todos/:id for the other methods. There’s an Angular service that has a higher
level of abstraction of $http to deal with RESTful requests. It is called $resource .

Initialize as: $resource(url, [paramDefaults], [actions], options);

It comes with the following actions already defined; it is missing one though… Can
you tell?

$resource actions

1 { 'get': {method:'GET'}, // get individual record


2 'save': {method:'POST'}, // create record
3 'query': {method:'GET', isArray:true}, // get list all records

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

4 'remove': {method:'DELETE'}, // remove record


5 'delete': {method:'DELETE'} }; // same, remove record

The instances are used in the following way (examples will come later):

GET: Resource.get([parameters], [success], [error])


Non-GET: Resource.action([parameters], postData, [success], [error])
Non-GET: 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:

ngResource dependency

1 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/ang

This is what need to set it up:

$resource.query()

1 // add ngResource dependency


2 angular.module('app', ['ngRoute', 'ngResource'])
3
4 // ...
5
6 .factory('Todos', ['$resource', function($resource){
7 return $resource('/todos/:id', null, {
8 'update': { method:'PUT' }
9 });
10 }])
11 // ...
12 .controller('TodoController', ['$scope', 'Todos', function ($s
13 $scope.todos = Todos.query();
14 }])
15

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 .

“ We are using inline templates with


id="/todoDetails.html" . They are not physical files. Just ng-template that we
id="/todos.html" and

create in the part I of these tutorial series .

Add this code at the bottom of the id="/todos.html" template:

New textbox for adding Todos

1 New task <input type="text" ng-model="newTodo"><button ng-click="save()

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.

Save function $resource.$save(...)

1 .controller('TodoController', ['$scope', 'Todos', function ($scope, To


2 $scope.todos = Todos.query();
3
4 $scope.save = function(){
5 if(!$scope.newTodo || $scope.newTodo.length < 1) return;
6 var todo = new Todos({ name: $scope.newTodo, completed: false });
7
8 todo.$save(function(){
9 $scope.todos.push(todo);
10 $scope.newTodo = ''; // clear textbox
11 });
12 }
13 }])

diff

Show Todo details


https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 8/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog

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 .

Change the ID link in the `id

1 <li ng-repeat="todo in todos | filter: search">


2 <input type="checkbox" ng-model="todo.completed">
3 <a href="#/{{todo._id}}">{{todo.name}}</a>
4 </li>

Update TodoDetailCtrl with $resource.get

1 .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', funct


2 $scope.todo = Todos.get({id: $routeParams.id });
3 }])

Notice the change from $scope.todo = Todos[$routeParams.id]; to $scope.todo


= Todos.get({id: $routeParams.id });

Now you should be able to see the details :)

diff

AngularJS Update (in-line editing)


This is going to be a very cool feature. Let’s meet these new directives:

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.

Replace the template with id="/todos.html" with the following:

Template todos.html

1 <!-- Template -->


2 <script type="text/ng-template" id="/todos.html">
3 Search: <input type="text" ng-model="search.name">
4 <ul>
5 <li ng-repeat="todo in todos | filter: search">

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

6 <input type="checkbox" ng-model="todo.completed" ng-change="upda


7 <a ng-show="!editing[$index]" href="#/{{todo._id}}">{{todo.name}
8 <button ng-show="!editing[$index]" ng-click="edit($index)">edit</
9
10 <input ng-show="editing[$index]" type="text" ng-model="todo.name
11 <button ng-show="editing[$index]" ng-click="update($index)">Upda
12 <button ng-show="editing[$index]" ng-click="cancel($index)">Canc
13 </li>
14 </ul>
15 New task <input type="text" ng-model="newTodo"><button ng-click="sav
16 </script>

Now let’s change the controller to handle the inline editing:

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

1 .controller('TodoController', ['$scope', 'Todos', function ($scope, To


2 $scope.editing = [];
3 $scope.todos = Todos.query();
4
5 $scope.save = function(){
6 if(!$scope.newTodo || $scope.newTodo.length < 1) return;
7 var todo = new Todos({ name: $scope.newTodo, completed: false });
8
9 todo.$save(function(){
10 $scope.todos.push(todo);
11 $scope.newTodo = ''; // clear textbox
12 });
13 }
14
15 $scope.update = function(index){
16 var todo = $scope.todos[index];
17 Todos.update({id: todo._id}, todo);
18 $scope.editing[index] = false;
19 }
20
21 $scope.edit = function(index){
22 $scope.editing[index] = angular.copy($scope.todos[index]);
23 }
24
25 $scope.cancel = function(index){
26 $scope.todos[index] = angular.copy($scope.editing[index]);
27 $scope.editing[index] = false;
28 }
29 }])

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. Try it out!

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

2. It holds a copy of the original value in case we press cancel.

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

1 <script type="text/ng-template" id="/todoDetails.html">


2 <h1>{{ todo.name }}</h1>
3 completed: <input type="checkbox" ng-model="todo.completed"><br>
4 note: <textarea ng-model="todo.note"></textarea><br><br>
5
6 <button ng-click="update()">Update</button>
7 <a href="/">Cancel</a>
8 </script>

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

1 .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', '$loc


2 $scope.todo = Todos.get({id: $routeParams.id });
3
4 $scope.update = function(){
5 Todos.update({id: $scope.todo._id}, $scope.todo, function(){
6 $location.url('/');
7 });
8 }
9 }])

“ Awesome! Time to check it out in the browser!

$location.url([url]) is a getter/setter method that allows us to change url, thus


routing/view.

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

A. Add removes button in the li element:

todos.html Template

1 <button ng-show="!editing[$index]" ng-click="remove($index)">remove</bu

Do the same for the details Template

todoDetails.html Template

1 <button ng-click="remove()">Remove</button>

B. Add remove functionality in the controllers

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 }

And also in the details controllers

todoDetails controller

1 $scope.remove = function(){
2 Todos.remove({id: $scope.todo._id}, function(){
3 $location.url('/');
4 });
5 }

When we remove elements from the todos array $scope.todos.splice(index, 1)


they also disappear from the DOM. Very cool, huh?

diff

“ Congratulations! You are now a MEAN developer!

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

Also, you can learn more about full-stack framework solutions.

Full-Stack Javascript Web Frameworks


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.

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

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.
Yahoo! Mojito - A JavaScript MVC framework for mobile applications, one of the
Yahoo! Cocktails.
Tower.js - Small components for building apps, manipulating data, and
automating a distributed infrastructure.

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)

Subscribe & stay up to date!

email address

Subscribe

About the author

Adrian Mejia is a Software Engineer located in Boston, MA.


Currently working at Google. Adrian enjoys writing posts about
Algorithms, programming, JavaScript, and Web Dev. Also, he likes
to travel ✈️ and biking 🚴‍.

Follow @iAmAdrianMejia

Tutorial Mean Stack Series


https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 15/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog

AngularJS tutorial for


beginners with NodeJS
ExpressJS and
MongoDB (Part I)

Creating RESTful APIs


with NodeJS and
MongoDB Tutorial
(Part II)

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

MEAN Stack Tutorial


MongoDB ExpressJS
AngularJS NodeJS
(Part III)

 Top  Edit this post

Contents
1. Why MEAN stack?
2. TODO app with MEAN
3. Wiring up the App
4. What’s next?

ALSO ON ADRIAN MEJIA'S BLOG

6 years ago • 1 comment 6 years ago • 2 comments


Understanding Self-balanced
JavaScript Binary Search
Callbacks … Trees with AVL …

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

G Join the discussion…

LOG IN WITH OR SIGN UP WITH DISQUS ?

Name

 Share Best Newest Oldest

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 ⥅

Adrian Mejia Mod > Emery Clark − ⚑


9 years ago

haha, thanks. I revised the post and fix the typos ;)

0 0 Reply ⥅

helpme − ⚑
H 10 years ago

how do I run the server?

7 0 Reply ⥅

Nikita Prikazchikov > helpme − ⚑


10 years ago

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 ⥅

Adrian Mejia Mod > Santosh


− ⚑
8 years ago

Glad to hear you found it the most useful so far!

0 0 Reply ⥅

TechSideOnline.com − ⚑
9 years ago

Good tutorial. Very detailed.

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

Thanks for sharing this information

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

GET /sepsis/10930357265 200 40.739 ms - 822


GET /vital/10930357265 200 197.963 ms - 140203
GET /distinct 304 42.478 ms - -
GET /vital/17338147258 304 217.639 ms - -
GET /sepsis/17338147258 304 223.610 ms - -
GET /distinct - - ms - -

Can anyone help me out on this issue.

0 0 Reply ⥅

Yandi Ar − ⚑
8 years ago

Great tutorial.. !!
thanks

0 0 Reply ⥅

Sam − ⚑
S 8 years ago

Cannot read property 'success' of undefined?

0 0 Reply ⥅

sean > Sam − ⚑


S 8 years ago

This is in the controller...

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 ⥅

Steffi > Sach − ⚑


S 8 years ago

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

Thanks for the wonderful article, Please continue.

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.

The tutorials are very good.

0 0 Reply ⥅

Kresna Hendri − ⚑
K 8 years ago

Great!! Thank you for sharing

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

if possible provide a video tutorial on packtpub on mean stack ecommerce book

0 0 Reply ⥅

Adrian Mejia Mod > ayaan kh − ⚑


9 years ago

Yes, I'm about to start video tutorials on Packt about the MEAN stack!

0 0 Reply ⥅

ayaan kh > Adrian Mejia


− ⚑
A 9 years ago

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 ⥅

Adrian Mejia Mod > ayaan kh − ⚑


9 years ago

You can refer to the installation section here: https://github.com/amejiaro...


It will tell you exactly what versions you should use.

0 0 Reply ⥅

ayaan kh > Adrian Mejia − ⚑


A 9 years ago

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

var express = require('express'),

bodyParser = require('body-parser'),

app = module.exports = express(),

allowCors = function(req, res, next) {

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

when I run it and went to :

http://localhost:3000/

I got this error :

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org...

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 :

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org...

and I don't know if it is from a typo or what.


thanks

0 0 Reply ⥅

Karan > Majid Lotfi − ⚑


K 10 years ago

click on that error and you will see details regarding it on agularjs.org page

0 0 Reply ⥅

Majid Lotfi > Karan


− ⚑
M 10 years ago edited

where should todos.html and todoDetails.html go ? , I don't have them in my


todoApp folder.

I clicked on that error , I got this :

https://docs.angularjs.org/...

0 0 Reply ⥅

Adrian Mejia Mod > Majid Lotfi − ⚑


9 years ago

They are inline. Everything is on one file: https://github.com/amejiaro...

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

> [email protected] start /home/saksham/Desktop/todoAPIjs-


b9ff3a863c78d72e71b5cc9eb573bb3cb9d87179
> node ./bin/www

npm ERR! weird error 1


npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! not ok code 0

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 ⥅

steven kauyedauty > b|ank − ⚑


S 10 years ago

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 ⥅

pandiaraj > Vladimir − ⚑


10 years ago

There is a hack to fix this problem :)


In the todos.js, before calling Todo.findByIdAndUpdate, add the below line,
delete req.body._id;

0 0 Reply ⥅

Vladimir > pandiaraj − ⚑


V
https://adrianmejia.com/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 24/26
3/17/25, 2:18 PM MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III) | Adrian Mejia Blog

V 10 years ago

Thanks a lot. It seems was problem on my local, with mongolab it works perfect
now ;)

0 0 Reply ⥅

BartKeulen > Vladimir


− ⚑
10 years ago

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.

Furthermore you have to add ng-model="todo.note" in the textarea in the todoDetails.html


template.

This fixed it for me. Good luck!

0 0 Reply ⥅

Vladimir > BartKeulen − ⚑


V 10 years ago

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

© 2022 Adrian Mejia v.rk61qc

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

You might also like