There are multiple processes involved in creating a comprehensive AngularJS to-do list application. I'll walk you through every step of the process here, including adding, modifying, and removing jobs along with the relevant warnings and duplicate value checking.

A List of Tasks in AngularJS
Install the AngularJS application in step 1.

Make the index.html HTML file
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>AngularJS To-Do List</title>
    <link rel="stylesheet" href="styles.css">
    <script src=""></script>
    <script src="app.js"></script>
<body ng-app="todoApp" ng-controller="todoController">
    <div class="container">
        <h1>To-Do List</h1>
        <div class="input-group">
            <input type="text" ng-model="newTask" placeholder="Add a new task" class="form-control">
            <button ng-click="addTask()" class="btn btn-primary">Add Task</button>
        <div ng-if="alertMessage" class="alert" ng-class="{'alert-success': alertType=='success', 'alert-danger': alertType=='danger'}">
            {{ alertMessage }}
        <ul class="list-group">
            <li ng-repeat="task in tasks" class="list-group-item">
                <span ng-if="!task.editing">{{ }}</span>
                <input type="text" ng-if="task.editing" ng-model="" class="form-control">
                <button ng-if="!task.editing" ng-click="editTask(task)" class="btn btn-warning btn-sm">Edit</button>
                <button ng-if="task.editing" ng-click="saveTask(task)" class="btn btn-success btn-sm">Save</button>
                <button ng-click="deleteTask(task)" class="btn btn-danger btn-sm">Delete</button>

Create the AngularJS file (app.js)
var app = angular.module('todoApp', []);
app.controller('todoController', function($scope) {
    $scope.tasks = [];
    $scope.alertMessage = '';
    $scope.alertType = '';
    $scope.addTask = function() {
        if (!$scope.newTask) {
            $scope.showAlert('Task cannot be empty', 'danger');
        if ($scope.tasks.some(task => === $scope.newTask)) {
            $scope.showAlert('Task already exists', 'danger');
        $scope.tasks.push({ name: $scope.newTask, editing: false });
        $scope.newTask = '';
        $scope.showAlert('Task added successfully', 'success');
    $scope.editTask = function(task) {
        task.editing = true;
    $scope.saveTask = function(task) {
        if (!$scope.tasks.some(t => t !== task && === {
            task.editing = false;
            $scope.showAlert('Task edited successfully', 'success');
        } else {
            $scope.showAlert('Duplicate task name', 'danger');
    $scope.deleteTask = function(task) {
        var index = $scope.tasks.indexOf(task);
        if (index > -1) {
            $scope.tasks.splice(index, 1);
            $scope.showAlert('Task deleted successfully', 'success');
    $scope.showAlert = function(message, type) {
        $scope.alertMessage = message;
        $scope.alertType = type;
        setTimeout(function() {
            $scope.$apply(function() {
                $scope.alertMessage = '';
        }, 3000);

Create a CSS file (styles.css) for styling
body {
    font-family: Arial, sans-serif;
    margin: 20px;
.container {
    max-width: 600px;
    margin: auto;
.input-group {
    display: flex;
    margin-bottom: 20px;
.form-control {
    flex: 1;
    padding: 10px;
    font-size: 16px;
.btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
.list-group {
    list-style-type: none;
    padding: 0;
.list-group-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f9f9f9;
    margin-bottom: 5px;
    border: 1px solid #ddd;
.alert {
    padding: 10px;
    margin-bottom: 20px;
.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;

Explanation of the Code
HTML Structure

  • The HTML file sets up the structure of the To-Do list application.
  • It includes an input field for new tasks, a button to add tasks, and a list to display tasks.
  • Each task can be edited or deleted.

AngularJS Controller (app.js)

  • The todoController manages the tasks array and handles adding, editing, and deleting tasks.
  • The addTask function checks for duplicate tasks and alerts the user if a task already exists.
  • The editTask function enables editing mode for a task.
  • The saveTask function saves the edited task and checks for duplicate names.
  • The deleteTask function removes a task from the list.
  • The showAlert function displays an alert message for 3 seconds.

Styling (styles.css)

  • The CSS file styles the To-Do list application, including the input field, buttons, list items, and alert messages.

By following these steps, you can create a fully functional To-Do list application in AngularJS with features like adding, editing, deleting tasks, and handling duplicate tasks with appropriate alerts.