MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III)

#angularjs Tutorial for Beginners With #nodejs #ExpressJS and #mongodb #javascript Part I

  • We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS).
  • 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.
  • 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.
  • 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.
  • These are the changes added to perform the remove functionality:

    Do the same for the details Template

    And also in the details controllers

    When we remove elements from the todos array they also disappear from the DOM.

Adrian Mejia blog about programming and software engineering. Featuring MEAN stack (AngularJS, NodeJS, MongoDB and Express), BackboneJS, RESTful APIs, Algorithms and data structures.

@techjunkiejh: #angularjs Tutorial for Beginners With #nodejs #ExpressJS and #mongodb #javascript Part I

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:

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

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.

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

MEAN Backend with MongoDB, ExpressJS and NodeJS

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.

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:

diff

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.

function.

and do this changes:

method.

To start the server, you can use

or if you have it installed

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

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

and the dependency. We can get it from the CDN:

This is what need to set it up:

comes with the data from the server it will re-render the UI.

diff

template:

, this one executes a function when it clicked. Angular makes sure that the behaviour is consistent across different browsers.

diff

Now you should be able to see the details 🙂

diff

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

with the following:

Now let’s change the controller to handle the inline 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:

Now, going to the Todo Details. We would like that to be updated as well and add notes.

is a getter/setter method that allows us to change url, thus routing/view.

diff

These are the changes added to perform the remove functionality:

element:

Do the same for the details Template

B. Add remove functionality in the controllers

And also in the details controllers

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

What’s next?

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.

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS (Part III)

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.