ToDo List Application using AngularJS

17 Sep by vichu

ToDo List Application using AngularJS

Reading Time: 6 minutes

Here we go! A simple “ToDo List” application in Angularjs. This tutorial mainly concentrate for beginners in AngularJS. Here we go!!

See the Pen Demo todo Application by Vishal Srinivasan (@vishal_srini) on CodePen.0



Here is a video tutorial for that. It has first demo alone for second demo please read the blog. 🙂

This is the full application which we gonna develop. Lets start understanding like how to build this.

Step 1: Creating Modules for ToDo List

Create an module known as “todoModule” and add a controller to it. Here named as “todoController“.

The controller adds an array known as “listItems” and it is iterated in the front end as unordered list. There is no CSS component in this application as it mainly concentrate on how to build a simple application and not on the styles. If you want any styles then you can take that course separately.

Iteration in front end is done using ng-repeat which takes all the values and iterate it further. Want to learn more about ng-repeat? take a course about that here.

Step 2: Adding an item inside ToDo List

Create an input box named “itemsToAdd” and a button which on click will call an angularjs function (In AngularJS onClick is represented as ng-click). lets name that function as “addItem( )”.

Inside this function we will push the data into the array “listItems“. Now when we run our application and give data in the input field after clicking on “add item” button, we can see the items are getting added in the list



Step 3: Removing items once done from ToDo List

Until this we know how to add an item now will discuss on how to delete it. For deleting we are going to use SPLICE function of JavaScript. This will delete an entity in the array if we give the position of that particular item in that array and the number of items to get deleted. Here we are passing “$index” of each iterated variable into this “removeItem( )” function. This means we are passing the position of the data in that array. This is an very important step as it passes only the position and not the item to delete. Now in the removeItem function we splice the array of items in this particular position.

Step4: Adding Validations and Enhancements

These are additional details that are necessary for a full fledged application. Here is a separate codepen demo for that.

See the Pen A Shopping List (TO DO EXAMPLE) by Vishal Srinivasan (@vishal_srini) on CodePen.0

In the previous example, try to add a duplicate entry in the list. The application will get struck. Now your main condition is “Not to add duplicate entry“. For this I am using a function called “indexOf( )“. This is again a predefined function in JavaScript that gives -1 if the item is not in the array. Thus based on the output i am creating an error message to display like “no duplicate element should be added”.

Now, “I dont want to display the item name in the input box once added!! :@”. Don’t get tension!! we can do that by simply passing a null value to that variable once the data is added inside addItem function. 😀 You can see that in my second demo.

No error messages will be found on the first demo where as we created a span for it in second demo. Thus enhancing the application is in your hand but the core concept is explained in this blog. Hope you like it. If so then share it with your friends. Thank you. 🙂

Stay tuned for new tutorials. 😀



Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *