Developing MEAN Application Part 2

In the part 1 of making MEAN application, we have done the server side coding. Now in this second part we will do the front-end coding in AngularJS.

So lets start

We are using AngularJS, so we have to install AngularJS through bower. but first we need to add bower.json file in our project. So add bower.json file by typing following command in terminal.

bower init

This will add bower.json file in our project.

Now we can install AngularJS in our project by below command.

bower install angularjs --save

This will add a bower_component directory in our project which has AngularJS library and bower.json file is updated with AngularJS dependency.

Now we will create a index.html file in our project. So the directory structure of our MEAN application become

Now write following lines of code in index.html file.

Our server is running at 3000 port so when we hit the URL http://localhost:3000/ then index.html page should be rendered on the browser. But this is not happening right now. For rendering index.html page on browser, we have to write the following code in app.js.

Here Above lines of code redirect our server to index.html page and Now when you hit the URL http://localhost:3000/ then this will render index.html in your browser.
We also have to include AngularJS library in index.html page and for that we have to write below code in app.js

Now we can include AngularJS library in index.html page.


Now we code AngularJS simple program which display application name in browser. Thus our index.html page modified as follows.

Now we create a angular controller file userController.js. So the structure of our application become.

And write following lines of code in userController.js

and include userController.js in index.html page

Now hit the URL http://localhost:3000/ in browser and you will see the output as follows

Now we will write AJAX calls for GET Request to get all users, DELETE Request to delete a user, PUT Request to edit a user and POST Request to add a user. We are using $resource service for making AJAX calls. Here is a very good video link of using $resource service https://www.youtube.com/watch?v=X_NZr_-RaLw

Install angular-resource by following command.

bower install angular-resource --save

This will install angular-resource in your project. Now include angular-resource in index.html page.

Now we should create a service for handling AJAX Request because this is not the responsibility of controller. So create a service file userService.js. Now final structure of our MEAN application become.

Write following lines of code in userService.js file

Now include userService.js in index.html page

Now we will write a GET Request to get all users and display all users in table. for getting all users in controller our userController.js file modifies as follows.

Now we have all users in $scope.users variable and we will use $scope.users variable to display all users in table. So the index.html file become.

Now if you hit the URL http://localhost:3000/ then you will see the all users in table.

There is only one user in my database that is why it is showing only one user in table. Now we will add some css so that this table look better. so add following lines of css in index.html page

so the index.html page become

Now when you hit the http://localhost:3000/ URL then you will see the below output in table.

Now we will implement the functionality of adding a user. So first we will write a html code for adding a user. Now our index.html page modifies as below.

And now we will write the controller code. So the controller code modifies as below.


Now when you refresh the http://localhost:3000/ then you will see the below output

When you enter the user name in the input box and click on the add user button then a user is created. for example if you write the user name deepak and click on the add user button then the output would be

Now we will implement the edit functionality of user. So the index.html page modifies as below.

And the userController.js modifies as below.


Now when you refresh the http://localhost:3000/ then you will see the below output

When you click on the edit button of respective user then that user name will be display in the edit user name input box. Now you need to change the name of user and click on the edit user button. If the PUT Request is successful then it will reflect in the user table. Now we will implement the delete user functionality. So the index.html page modify as below.

And the userController.js modify as below.


Now when you refresh the http://localhost:3000/ then you will see the below output

Now if you click on the delete button of respective user then that user is deleted and our user table changes accordingly.

We are done with our MEAN Application. You can also find code of this MEAN application on my Github account. Here is the link

https://github.com/deepaksisodiya/MEAN-Application

Resources

For ngResource : https://www.youtube.com/watch?v=X_NZr_-RaLw

For MEAN stack : https://www.youtube.com/watch?v=AEE7DY2AYvI