Let's create a new project in AngularJS named ToDo List.
This project has 2 parts,
- HTML
- JavaScript
We design the UI part of our project in the HTML part, and in the second Javascript part, we write AngularJS code for internal work.
I am adding Bootstrap CDN to my project for better UI design because CDN is fast, updated versions, and doesn't need to save files in your drive.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>Now, I add AngularJS CDN same as Bootstrap CDN for working with AngularJS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Angurr JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</body>
</html>Now, Create the two files in the located folder, first "index.html" for HTML code and the second "app.js" for AngularJS code.
index.html
<!doctype html>
<html lang="en" data-ng-app="todoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Todo List</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container" data-ng-controller="TodoController as todoCtrl">
<h1 class="text-center">Todo List</h1>
<form data-ng-submit="todoCtrl.addTask()" class="row g-3">
<div class="col-12">
<input type="text" data-ng-model="todoCtrl.newTask" placeholder="Add a new task" class="form-control" />
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">
<span class="ms-1">
<i class="bi bi-plus-circle-dotted"></i>
</span>
<span>Add Task</span>
</button>
</div>
</form>
<div class="table-responsive my-3">
<table class="table">
<thead>
<tr>
<th><i class="bi bi-circle"></i></th>
<th scope="col">#</th>
<th scope="col">Task</th>
<th scope="col">Date</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr data-ng-repeat="task in todoCtrl.tasks">
<th>
<i class="bi bi-circle" ng-if="!task.iscomplete"></i>
<i class="bi bi-check2-circle text-success" ng-if="task.iscomplete"></i>
</th>
<th scope="row">
<span ng-if="!task.iscomplete">{{$index + 1}}</span>
<s ng-if="task.iscomplete"><strong>{{$index + 1}}</strong></s>
</th>
<td>
<span ng-if="!task.iscomplete">{{ task.name }}</span>
<s ng-if="task.iscomplete"><strong>{{ task.name }}</strong></s>
</td>
<td>
<span ng-if="!task.iscomplete">{{ task.time }}</span>
<s ng-if="task.iscomplete"><strong>{{ task.time }}</strong></s>
</td>
<td>
<button class="btn btn-link " data-ng-click="todoCtrl.completeTask($index)">Complete</button>
<button class="btn btn-link " data-ng-click="todoCtrl.removeTask($index)">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Angurr JS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script src="app.js"></script>
</body>
</html>
“app.js”
var todoApp = angular.module('todoApp', [])
.controller('TodoController', function () {
var todoCtrl = this;
todoCtrl.tasks = [];
todoCtrl.newTask = '';
todoCtrl.addTask = function () {
if (todoCtrl.newTask !== '') {
todoCtrl.tasks.push({'name' : todoCtrl.newTask, 'time' : new Date().toString(), 'iscomplete' : false});
todoCtrl.newTask = '';
}
};
todoCtrl.completeTask = function (index) {
if(index>-1 && index < todoCtrl.tasks.length)
{
var completedTask = todoCtrl.tasks[index];
completedTask.iscomplete = true;
window.alert("Your \"" + completedTask.name + "\" task is completed.");
}
};
todoCtrl.removeTask = function (index) {
if(index>-1 && index < todoCtrl.tasks.length)
{
todoCtrl.tasks.splice(index, 1);
}
};
});
In this code, I created "todoApp" module for my project, and also added "TodoController" controller for the internal process of my todo list project. I was define three functions in my controller,
- addTask: It is used to add new tasks to my tasks list.
- completeTask: It is used to check whether the task is complete or not, then show a pop-up.
- removeTask: It is used to remove tasks from the task list using an index.
Thank You.
I hope you enjoying this article.
Leave Comment