ToDo List Application using AngularJS
Here we go! A simple “ToDo List” application in Angularjs. This tutorial mainly concentrate for beginners in AngularJS. Here we go!!
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
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.
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. 😀