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> {{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.