Creating a Todo List Application using Angular JS Tutorial

Submitted by oretnom23 on Saturday, December 3, 2022 - 16:47.

In this tutorial, you will learn how to Create a Todo List using Angular JS. The tutorial aims to provide IT/CS Students and new programmers with a reference to learn with for developing a simple web application using Angular JS and LocalStorage. Here, a step-by-step tutorial with snippets of building a simple Todo List App is provided with a source code zip file that is free to download.

About the Todo List Application

For this tutorial, we will be creating a very simple Todo List Application that contains the relevant features and functionalities that are commonly found in said application. We will be using Angular JS as the JavaScript Framework for building the application. As for the database, we will only LocalStorage web API.

Features and Functionalities

Here are the different Features and Functionalities of the Todo list application that we are building.

Add New Todo Item
New Item Insertion Success Message
Todo Item List
Checkbox for Done/Undone Todo Items
Todo Item Strike Through Text if already Done
Remove Todo Item from the List
Confirmation before removing Todo Item

Creating the Interface

The below snippets is an HTML file that contains the elements scripts for the form, to-do list, and alert messages. It also contains the AngularJS attributes that we need for initializing the application and functionalities. Save the file as index.html. The snippet below loads the external libraries or plugins using CDN, an internet connection is needed to run the application properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular JS Todo List App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js" integrity="sha512-klc+qN5PPscoGxSzFpetVsCr9sryi2e2vHwZKq43FdFyhSAa7vAqog/Ifl8tzg/8mBZiG2MAKhyjH5oPJp65EA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <style>
        html, body{
            min-height:100%;
            width:100%;
        }
        #todoList .list-group-item .form-check , #todoList .list-group-item .form-check *{
            cursor: pointer;
        }
        #todoList .list-group-item[item-checked="1"] .form-check>label{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
        <div class="container">
            <a class="navbar-brand" href="./">Angular JS Todo List App</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3" ng-app="SampleApp" ng-controller="FormController">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <div class="card rounded-0 shadow mb-3">
                <div class="card-body">
                    <div class="container-fluid">
                        <form ng-submit="formSubmit()">
                                <div class="alert alert-success mb-3" ng-show="success_msg">{{success_msg}}</div>
                                <div class="alert alert-danger mb-3" ng-show="error_msg">{{error_msg}}</div>
                            <div id="item-list">
                                <div class="d-flex w-100 mb-3 justify-content-between align-items-end input-item">
                                    <div class="col-auto flex-shrink-1 flex-grow-1 pe-4">
                                        <label class="form-label">Todo</label>
                                        <input type="text" class="form-control form-control-sm rounded-0" ng-model="todo" name="todo" required>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-block rounded-pill"><i class="fa-solid fa-save"></i> Add to List</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card rounded-0 shadow">
                <div class="card-header">
                    <div class="card-title"><b>Todo List</b></div>
                </div>
                <div class="card-body">
                    <div class="container-fluid">
                        <div id="todoList" class="list-group">
                            <div class="list-group-item" item-checked = "{{item.is_done}}" ng-repeat="item in items track by $index">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="col-auto flex-shrink-1 flex-grow-1">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" item-id="{{item.id}}" value="" id="todo{{item.id}}" ng-click="event = $event" ng-true-value="1" ng-false-value="0" ng-change="todoCheckChange(event)" ng-model="item.is_done" ng-checked="item.is_done === 1">
                                                <label class="form-check-label" for="todo{{item.id}}">
                                                    {{item.todo}}
                                                </label>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-sm rounded-circle border btn-outline-danger" ng-click="removeTodo(item.id)"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
 
 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Creating the Main Script

The snippet below is a JavaScript file that contains the script for initializing the application using AngularJS. It also contains the functions for generating a unique ID for the Todo items. Overall it has 3 different methods or functions in Angular controller. It has the Form Submission, Checkboxes, and Remove Button functions. Save the file as app.js.

var mymodule = angular.module("SampleApp",[]);
var items = JSON.parse(localStorage.getItem('todo-list')) || [];
 
function generate_id(){
    var id;
    while(true){
        id = Math.ceil(Math.random() * (9999 - 1) + 1);
        var key = Object.values(items).findIndex( item => item.id == id )
        if(key < 0)
            break;
    }
    return id;
}
 
/**
    * Angular Controller
    */
 
mymodule.controller("FormController", function ($scope, $http){
    $scope.items = items;
    $scope.todo=''
    $scope.success_msg = "";
 
    /**
        * 
        * Form Submit
        * Adding new todo item
        *  
        */
 
    $scope.formSubmit = function(e){
        $scope.success_msg = "";
        var id = generate_id()
        items.push({id:id, todo: $scope.todo, is_done:false})
        localStorage.setItem('todo-list', JSON.stringify(items))
        $scope.items = items 
        $scope.success_msg = "New todo item has been added successfully";
        $scope.todo=''
    }
 
    /**
        * Event onChange Listener for Todo checkboxes
        * @param {e} event 
        */
 
    $scope.todoCheckChange =function(e){
        $scope.success_msg = "";
        var is_checked = e.target.checked ? 1 : 0
        // console.log(is_checked)
        var id = e.target.getAttribute('item-id')
        var key = Object.values(items).findIndex( item => item.id == id )
        items[key]['is_done'] = is_checked
        localStorage.setItem('todo-list', JSON.stringify(items))
        $scope.items = items 
        $scope.list_success_msg = "Item has been updated";
 
    }
 
    /**
        * Function for removing the todo item from list w/ confirmation
        * @param {*} id 
        *  
        */
    $scope.removeTodo = function (id){
        $scope.success_msg = "";
        if(confirm(`Are you sure to remove the selected todo item?`) === false)
        return false;
        var key = Object.values(items).findIndex( item => item.id == id )
        delete items[key];
        items= Object.values(items).filter( item => item != null )
        localStorage.setItem('todo-list', JSON.stringify(items))
        $scope.items = items 
    }
})

That's it! Check the Todo List Item in your local storage. Open your browser's Developer Tools and navigate the panel to the Application Panel of the Devtools. Then on the right menu bar of the Application Panel, click the Local Storage menu and select the localhost site or your current site. See the image below.

There you go! You can now test the Todo List App in AngularJS on your end and see if the features and functionalities that I have mentioned exist and works properly. I have provided the complete source code zip file. You can download it by clicking the Download Button located below this article.

That's the end of this tutorial. I hope this Todo List App in AngularJS Tutorial helps you with what you are looking for and that you'll find something useful from the source code for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Add new comment

540 views