Developing a MEAN app with Angular 2.0

Tweet about this on TwitterShare on LinkedIn12Share on Google+0Share on Reddit12Buffer this pageFlattr the authorEmail this to someonePrint this page

I know, I know it is too early to be building end to end apps with Angular 2.0, but I got so excited after looking at ng2-express-starter by my dear friend Antonio Fernandes. I was like, If we can integrate an Angular 2.0 app with an Express app, we can definitely add the MongoDB layer to make it a M.E.A.N. app. So, in this post, we will be developing a MEAN Todo App (Grrr..). This post is heavily inspired by Antonio’s Angular 2.0 Express starter app.

The final app would look like

Screen Shot 2015-04-29 at 1.48.10 pm Screen Shot 2015-04-29 at 1.49.06 pm Screen Shot 2015-04-29 at 1.50.02 pm

You can play with a live instance of the above app here. (It might take upto a minute to load the page, please be patient or open the dev tools – network tab to check progress).

You can find the completed code here.

Couple of things before we proceed

  1. Thumbs up to Tim Jacobi for creating angular2-education repo, which consists of lot of useful links to learn Angular 2.0
  2. Angular 2.0 is still in development. The todo app we are going to build is developed using Angular 2.0 2.0.0-alpha. There is a very good chance that most or all of this code can be of no help when Angular 2.0 becomes stable.

Prerequisites

If you are new to Angular 2.0 check out

  1. Getting Started with Angular 2.0
  2. Tim Jacobi’s angular2-education repo

If you are new to MEAN Stack development check out

  1. MEAN Stack – A Hands on Tutorial (with Angular 1.x)
  2. MEAN Stack Workshop

Architecture

A MEAN stack app would typically consist of a server layer built with Nodejs & Express – Express being the web framework. MongoDB for data persistence & Angular as the client side MVW framework.

ng2As you can see from the above diagram, Express exposes REST End points that would be consumed by the Angular 2.0 app. And when any request is made to the REST end point, Express contacts MongoDB and manages the data.

This is pretty much our architecture.

Note : If you are looking for creating a secure REST API with Nodejs checkout : Architecting a Secure RESTful Node.js App.

Setting up the Server

First, we are going to setup an express app, build the REST API to Create, Read, Update & Delete todos and then integrate it with the Angular app.

Create a folder named ng2do-mean-app. Open a terminal/prompt here and run

npm init

Fill up the details as applicable.

Next, we will add express dependencies to our project. Run

npm install --save body-parser cookie-parser ejs express mongojs morgan path

This will download the required dependencies to run the express app. Once the above installation is done, your package.json should look like

At the root of the ng2do-mean-app create a file named server.js. Update it as below

This is a typical express server. Couple of things, on line 7, 8 we are including two sets of routes and on line 24, 25 we are mapping the routes to end points.

Next, we are going to create the routes folder and the two route files we declared above.

Create a new folder named routes at the root of ng2do-mean-app folder. Create a file named index.js inside the routes folder. And update index.js as below

We define a route to handle the http://localhost:3000/  and dispatch the index.html file.

Next, at the same level as index.js, create another file named todos.js. Update todos.js as below

Things to notice

Line 4 : I have created a new MongoDB instance for this example from MongoLab and configured it with Mongojs.

Line 7 : Endpoint to get all todos

Line 18 : Endpoint to get one todo based on the id provided

Line 31 : Endpoint to save a todo

Line 50 : Endpoint to update a todo

Line 79 : Endpoint to delete a todo

Test REST API

If you save all the file and run

node server.js

the express server would start on port 3000. If you navigate to  http://localhost:3000/api/v1/todos, you should be able to see all the todos (if any & if you have setup everything correctly). You can use Postman or any REST Client to test the remaining methods as well.

Pretty sweet right! Our REST API is completed. Now from our Angular 2.0 app, we are going to connect to the above REST API and manage our UI.

Setup the Client

The first thing we would be doing as part of the client side development is to download the Angular 2.0 starter app. This starter app consists of all the Angular 2.0 code and its dependencies.

From the root of ng2do-mean-app folder, run

git clone https://github.com/angular/quickstart.git public/vendor

As of today, the quickstart project does not ship with Angular 2.0 2.0.0-alpha source, which is needed for our project. To update the same, we will run the following commands from inside the public/vendor folder

npm install

gulp

npm install rx --save

The above steps are NEEDED till the quickstart project ships with Angular 2.0 2.0.0-alpha release.

Next, to manage client side dependencies, we are going to use bower. We will create a new bower.json file. From the project root, run

bower init

This will create a new bower.json file and it should look something like

Next, create a file at the same level as bower.json named .bowerrc. This file will consists of bower config. Update .bowerrc as below

Now, we will add Twitter Bootstrap to our app. Run

bower install bootstrap --save

This should download the Bootstrap source and place it inside the public/vendor/bower_components folder.

If you do remember, in routes/index.js we have a route that dispatches the index.html file. We will create that index.html file now.

Create a new folder named views at the root of our project & inside views create a new file named index.html. Update index.html as below.

Things to notice

Line 5 : We have included bootstrap css that we have downloaded using bower

Line 7 : The es6 shim file

Line 12 : Init our base component – todo-app

Line 18 : Paths where our assets are located

Line 28 : Kick off the app

In the next steps, we are going to create all the referenced files.

Client Side code structure

As of today, Angular 2.0 support only HTTP GET request using the XHR module. So, I have borrowed Antonio’s approach for making a HTTP GET, POST, PUT, DELETE calls.

So this is how we are going to structure the app

ng2-client

We will have a Todo App component, that will interact with the Todo Factory, which in turn uses the XHR factory to work with the REST API.

Developing the App

The first thing we are going to do is develop the todo-app component. Create a new folder named components inside the public folder. And create a new folder named todo-app inside the components folder.

Inside todo-app create a new file named todo-app.es6. Update todo-app.es6 as below

Things to notice

Line 1 : We import Component, View, bootstrap, For from Angular 2 source

Line 2 : We import TodoFactory, which we will be creating a bit later

Line 5 : We create a new component identified by the selector todo-app

Line 9 : We are going to load the template for this view from an external file and also specify what directives would be using, so that Angular can inject them.

Line 15 : We create a TodoAppComponent that consists of the component definition.

Line 17 : We create a new variable named todos  of type Array.

Line 19 : Inside the constructor method, we are going to fetch the list of todos using  TodoFactory.getAll() and assign the same to todos. This will take care of loading any existing todos on page load.

Line 27 : This method is used to add a new todo to our DB. When the user enters a Todo and hits the return key, we fetch the text, create a todo object and call the  TodoFactory.save() passing in the todo to be saved. Once we get a response, we update the local  todos with the response from the server, to keep things in sync.

Line 42 : This method is used to update the todo text in the DB. It is pretty much same as the addTodo() except, this time we have a _id  associate with the todo and we use TodoFactory.update() to update the data against the given todo.

Line 59 : This method is used to update the todo status, i.e. the todo completion. Here we pick the todo’s isCompleted property and build a todo object. We then call the same  TodoFactory.update() to update the data.

Line 74 : This method is used to delete a Todo. We pass the Id of the todo to be deleted to TodoFactory.delete() and the todo gets deleted from the DB. Once the server responds with a success, we clear the same from the local todos  array to save a DB call.

Line 91 : This is a utility method, that helps us manage the state of the todo. When clicked on the Edit button, next to the todo, we set isEditMode  to true and when we are done editing, we set isEditMode  to false.

Finally on line 101, we bootstrap the TodoAppComponent.

Next, we are going to create the template. Inside the todo-app folder, create another file named todo-app.html. Update todo-app.html as below

Before digging into the file, we will look at three changes to Angular 2.0 templating syntax.

  • Variable are declared using a hash before them – #name
  • Event Handlers are declared using a parenthesis around them – (click)
  • Property binding are done using square braces – [class]

Keeping the above in mind, we will go through the above template

Line 6 : We create a input element, which is bound to a local variable named todotext which is represented by  #todotext on the tag. We have bound a  (keyup) event that calls  addTodo() in our component definition.

Line 11 : If there are no todos, we show a message – No Todos yet!. This is achieved using  [hidden] property binding

Line 14 : We use the  *for syntax (analogous to ng-repeat) to iterate over all the todos in our collection and display them. Also do notice  [class.strike], (analogous to ng-class) if the current todo is in a completed state, we want to add a class named strike.

Line 16 : We provide a check box for the user to check or uncheck the todo. The state of the checkbox is maintained by  [checked]="todo.isCompleted". And when a user clicks on the checkbox, we set the value of isCompleted for that todo from updateStatus().

Line 19 : We display the todo text if it is not in edit mode

Line 20, 21 : we show the editable text box and a cancel button when the todo is in edit mode.

Line 24 : Button to toggle edit mode

Line 25 : Button to delete a todo

Now you can figure out what is happening on a tag based on the 3 new changes we saw earlier. Also, the classes which you see here are specific to Twitter Bootstrap.

That is it, our todo-app component is ready.

Now, we need to develop the two services. Create a new folder inside the public folder named services. Create a new file inside it named todos-factory.es6 and update it as below

Quite self explanatory.

Important : Angular 2.0 DOES NOT have a $http service. I have created one using the xhr-factory and named it to $http for familiarity sakes.

Next, create a new file named xhr-factory.es6 inside the public/services folder and update it as below

All we are doing is making a HTTP Request using the XMLHttpRequest() and returning a promise.

Pretty simple right! With this we are done with app logic. For some styling, we will create a new folder inside the public folder named css. Inside the css folder, create a new file named app.css and update it as below.

Test the App

That is it! Save all your files and run

node server.js

Next, navigate to  http://localhost:3000 and you should see

Screen Shot 2015-04-29 at 1.48.10 pm

Add a few todos and you can click on edit

Screen Shot 2015-04-29 at 1.49.06 pm

You can mark todos as completed or delete them

Screen Shot 2015-04-29 at 1.50.02 pm

Simple and sweet MEAN App with Angular 2.0


Thanks for reading! Do comment.
@arvindr21

 

Tweet about this on TwitterShare on LinkedIn12Share on Google+0Share on Reddit12Buffer this pageFlattr the authorEmail this to someonePrint this page
  • ravi

    Uncaught ReferenceError: System is not defined

  • Andrè Driesel

    Getting this error:
    EXCEPTION: self.parent.context.deleteTodo is not a function
    is there any update needed?

  • http://www.orderofthemouse.co.uk Peter David Carter

    Should we really need Express.js given that Angular2 has built-in http, routing and rest functions? This seems more like an Angular1, MEAN stack approach applied to a technology that really shouldn’t need so many intermediate stages — stages which are likely to come at the cost of increased complexity, if not necessarily decreased performance or increased server load (that’s going to depend on the exact implementation, of course…

    I’m also concerned about how this setup might deal with observables, and if it will properly utilise their potential in the way we certainly should be if we are going to push web technology to the next level, and not be content with another 5, 10, 15 years of the same old functionality underneath the same old Twitter Bootstrap frontend.

    So far I’ve only seen this tutorial and one for Postgres connected through Rails, both of which seem suboptimal solutions given the versatility and efficiencies that Angular2 has seemed to promise in its inception, and if we are to see a real competitor, if not outright replacement, to React, and to the in-browser VM technologies which seem as prevalent as ever.

  • satendra chaudhary

    When I import ‘xhr-factory.es6′ into my services, I am facing some error: error TS2314: Generic type ‘Promise’ requires 1 type argument(s).

  • will

    got localhost/:16 Uncaught ReferenceError: System is not defined

  • Moiz Kachwala

    You can try this Angular2 MEAN with Angular, Mongo and Typescript
    https://github.com/moizKachwala/Angular2-express-mongo-gulp-node-typescript

  • Aleksandr Poltarjonok
  • Ashish Gupta

    Hi Arvind,
    I have one easy question,
    1) are we rendering the page from server side as i have seen this video https://angularu.com/VideoSession/2015sf/angular-2-server-rendering ,for the better performance and easy loading.

    2) If that so How to use preboot library .
    as the Angular2.0 its very responsive so we can render it from server side,if you have any idea please share.
    thank for your good totorial is very good .

  • JUNIOR FERREIRA

    I am a reader of the blog and like it a lot , the post was actually really speak but lacked the mongoDB , or this project does not have access to bank?

  • Yaseen Llies Meridja

    I have looked online but it’s not clear. Is Angular 2 ready for prime time now?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru
      • Yaseen Llies Meridja

        Thanks that’s a great talk which I haven’t seen yet.
        After making the comment above I went digging further and found the AngularConnect videos of last week, so I watched the keynote:
        https://youtu.be/UxjgUjVpe24

        So in summary there are a few big projects that are already migrating to Angular2 and since I am starting on small greenfield project I thought, yeah what the heck why not give Angular2 a shot.

  • Melissa P

    Got errors on your page

    Loading A M.E.A.N. Todo App…

    in chrome dev tools

    Uncaught SyntaxError: for-in loop variable declaration may not have an initializer.

    ng2do-mean-app.herokuapp.com/:22 Uncaught ReferenceError: System is not defined

    any ideas ?

    • http://www.wuno.com/ NichoDiaz

      Did you ever figure this out? I have the same problem. It appears to be a common issue… Running on osx

    • will

      same error

  • Majid Lotfi

    Hi,

    I got this error :

    Uncaught ReferenceError: System is not defined

    • http://www.wuno.com/ NichoDiaz

      Did you ever figure this out? I have the same problem.

      • Marc

        same here..

        • Vasiliy Ivanov

          Same problem

          • will

            and same problem ….

    • http://williwaw.ru williwaw

      I’m getting the same errors.

  • mutyalarao

    Thanks Arvind garu! Very good article!

    However I have below questions:
    1.what the bootstrap function does. I thought bootstrap is just a UI framework to be used in HTML.
    2.is PUT same as POST with a separate URL? Like here, can we achieve the same result by writing a POST on a route of /todo/add?

    Thanks,
    Rao

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks mutyalarao. To answer your questions,

      1. No, Bootstrap actually means a start up process that is independent & self-sustained. Twitter used this terminology to name there UI framework. In this case, Bootstrap will start the application for us. This is equivalent to ng-app in Angular 1.x

      2. PUT and POST and REST methods that indicate the nature of operation. POST is to save a fresh record, PUT is to update an existing record. You can use POST or PUT to do the same task but it is not really RESTFUL.

  • Julio Sena

    Thx! Excelent post!

  • http://www.jagteshchadha.com Jagtesh Chadha

    Thanks for the insightful article Arvind. I wanted to know if there was a reason why you didn’t use the Http module: https://github.com/angular/http

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      No specific reason. I wanted to try out something different. And also, the HTTP wrapper is inspired by the code from Antonio.

  • Thoai Nguyen

    When I run “gulp” command in public/vendor folder, I get the error message:
    sh command not found as internal or external …

    It seems that “sh” is not supported on Windows.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Yes, the quickstart project is bult for *nix based systems. you can convert the shell script to a batch file and contribute to the repo if you would like.

    • Nicky Lenaers

      I had the same error. Fixed it by using the Git Bash terminal. Might of use to you in the future.

      • http://thejackalofjavascript.com/ Arvind Ravulavaru

        Thanks Nicky! I was not aware that one could run shell script on windows using Git Bash.

  • Kevin

    Thanks for sharing Arvind. I’m new to AngularJs and want to starty with v2.0. Is this realtime app? Say if user A adds a new task 1, can user B see the new task 1 without refresh the page? If not how to implement socket.io to achieve this? Also, can this be done in NW.js as front end?