Build a ToDoApp using AngularJS

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.

 
class="container"> 
 
  
class="row Gheader"> 
 
class="text-center">*** A ToDo App ***
  
ng-controller="toDoCtrl"> 
 
class="row"> 
 
 
class="panel panel-primary"> 
 
 
class="panel-heading"> CREATE TASK
  
class="panel-body"> 
 
class="row"> 
 
 
class="col-md-4"> TASK type="text" ng-model="task" placeholder="Task Name*" class="form-control"/>
  
class="col-md-4"> TIME class="form-control" kendo-date-time-picker ng-model="time" k-ng-model="time" style="width: 100%;"/>
  
class="col-md-4"> DONE BY type="text" ng-model="doneBy" placeholder="Done By*" class="form-control"/>
  
class="row" style="margin-top: 2%;"> 
 
class="col-md-8">
  
class="col-md-2"> type="button" ng-click="addTask()" class="btn btn-success btn-block">SAVE
  
class="col-md-2"> type="button" ng-click="clearAll()" class="btn btn-danger btn-block">CLEAR
  
class="row"> 
 
class="table table-bordered table-hover table-responsive">TASKTIMEDONE BYng-repeat="task in taskList">type="button" ng-click="editTask(task.id)" class="btn btn-success"> class="glyphicon glyphicon-edit">}}class="glyphicon glyphicon-user">  }type="button" ng-click="deleteTask($index)" class="btn btn-danger"> class="glyphicon glyphicon-trash">
   
class="row Gfooter"> 
 
class="col-md-6"> style="font-family: verdana;" class="text-center">Codestore Technologies Pvt. Ltd. (NOIDA, U.P) 
class="col-md-6"> 
 
style="font-family: verdana;" class="text-center"> Developed By: Gopal Sharma (Software Engineer)
 
Now write code in "App.js" file to make it fully functional.
 
 
 
 
			
If you are planning to develop an app, get in touch with CodeStore! Share your queries with us at sales@codestoresolutions.com or call us at INDIA: +91 95997 20600 | UK: +44 7353 477127