ToDoApp using AngularJS

Welcome to my blog on AngularJS, Here I will develop a “ToDo App” using angular.
Technologies to be used:
1.HTML
2.Bootstrap
3.AngularJS
4.toastr
5.Kendo UI
So Let’s Start, Please follow the steps below.

STEP: 1 : Create new project

STEP: 2 : Select ASP.Net Web Application Named TODoAppAngularJS.

STEP: 3 Select Empty Template.

STEP: 4: You will see the below screen now.

STEP: 5. Add New HTML Page.

STEP: 6 – Now add a HTML file and name it “index.html”

Step 7: Download AngularJS library from https://angularjs.org/ and reference it.

Step 8: Now Add a JavaScript file to do code in it named “App.js”

Now Let’s Code.
First of All, We will design our UI like below image:

So now add all reference files and libraries.

<div class="container">
    <br/>
    <style>
        .Gheader {
            color: white;
            background-color:crimson;
        }
    </style>

    <div class="row Gheader">
        <h4 class="text-center">*** A ToDo App ***</h4>
    </div>
    <br/>

    <div ng-controller="toDoCtrl">
        <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    CREATE TASK
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-4">
                            <b>TASK</b>
                            <input type="text" ng-model="task" placeholder="Task Name*" class="form-control"/>
                        </div>

                        <div class="col-md-4">
                            <b>TIME</b>
                            <input class="form-control" kendo-date-time-picker
                                   ng-model="time"
                                   k-ng-model="time"
                                   style="width: 100%;"/>
                        </div>

                        <div class="col-md-4">
                            <b>DONE BY</b>
                            <input type="text" ng-model="doneBy" placeholder="Done By*" class="form-control"/>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 2%;">
                        <div class="col-md-8">
                        </div>
                        <div class="col-md-2">
                            <button type="button" ng-click="addTask()" class="btn btn-success btn-block">SAVE</button>
                        </div>
                        <div class="col-md-2">
                            <button type="button" ng-click="clearAll()" class="btn btn-danger btn-block">CLEAR</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <table class="table table-bordered table-hover table-responsive">
                <tr>
                    <th></th>
                    <th> TASK </th>
                    <th> TIME </th>
                    <th>DONE BY</th>
                    <th></th>
                </tr>
                <tr ng-repeat="task in taskList">
                    <td><button type="button" ng-click="editTask(task.id)" class="btn btn-success"> <i class="glyphicon glyphicon-edit"></i></button></td>
                    <td>{{task.task}}</td>
                    <td>{{task.time}}</td>
                    <td><i class="glyphicon glyphicon-user"></i>&nbsp; {{task.doneBy}}</td>
                    <td>
                        <button type="button" ng-click="deleteTask($index)" class="btn btn-danger"> <i class="glyphicon glyphicon-trash"></i></button>
                    </td>
                </tr>
            </table>
        </div>
        
        <style>
            .Gfooter {
                color:white;
                background-color: blueviolet;
            }
        </style>
        <div class="row Gfooter">
            <div class="col-md-6">
                <h5 style="font-family: verdana;" class="text-center">Codestore Technologies Pvt. Ltd. (NOIDA, U.P)</h5>
            </div>
            <div class="col-md-6">
                <h5 style="font-family: verdana;" class="text-center">
                    Developed By: Gopal Sharma (Software Engineer)
                </h5>
            </div>
            
        </div>

    </div>
</div>

Now write code in “App.js” file to make it fully functional.

Ajay Kumar Goel

CEO/Director

Let's connect!

✔ 10+ years of professional experience which includes 5+ years as Founder and Co-Founder as a Technology Partner of lean startups across different domains.
✔ Technology Advisor to various companies and organizations.
✔ Passionate for technology & businesses and making them successful.
✔ Core competencies in Project Management methodologies and implementing digital strategies using Web 2.0 Technologies.