ToDo App with Bootstrap and AngularJS
AngularJS is a Swiss Army knife for the Data agnostic UI. Let's build a ToDo app to see how things work in AngularJS with Bootstrap for Visual Components
AngularJS is a Swiss Army knife for the Data agnostic UI. So it is exploited to its full potential in apps with large amount of data. To show this lets see a simple ToDo App with Bootstrap and AngularJS.
Here in this simple ToDo app; we are using Bootstrap for quick UI elements and AngularJS for data and behavioural purpose. A basic guide on bootstrap is available here.
This ToDo app will let:
- Add todo task
- Edit todo task
- Delete task
- Mark any task status as complete or incomplete etc.
Now for these use cases we will have a basic angular application and controller which will handle all the functionality of out ToDo App.
In HTML; we will have a form to add and edit the ToDo tasks and a list to see the tasks and mark them as complete (or incomplete).
So lets have a form to add ToDo task. Following is the HTML form for same:
No as we saw the form; now we need to display all the todo tasks along with their available actions. Following is the list to display the list of tasks with action item:
Now lets make it work together. So to handle ToDo list we are using array of ToDo Objects where each object will have its properties like done, name etc. And the form will have a handler function to add ToDo object to the array of ToDo tasks.
And to display the list of tasks; we will use the ng-repeat directive of angular to populate the list of tasks. Following is the list code with ng-repeat:
Following is the AngularJS code for the handling of form.
Now each task in the list should be available for edit, delete and mark as done. So we will create handling functions in our scope. Following is code for that:
Final Code
So as a complete app, the following is the UI of our ToDo App:
And following is the all HTML of our ToDo App:
And following is the AngularJS code (app.js) of our ToDo App:
You can see the working demo of this app by going to the demo link; and you can download the files.
Please share your comments/problems/experiences with us.
Happy coding…!