home

Angularjs To Do Application with demo

Angularjs is most powefull light weighted front frame work developed by google, if you want more introduction about angularjs foundation please read our previous intro section.

Here we are going to create simple basic To-Do-Application by using angularJs, lets have basic setup in place which is required to run angularJs application like library.this application is like hello world kind of application, its going helps you to understand. In the below we have some basic angularjs library file(CDN angularjs.min.js), before this we have another important thing is  we need to write this any where in the application, but entire application should be inside of this directive data-ng-app="".

Angularjs To Do Application online demo

AngularJs To do Application online demo, demo is created to show the how our code is going to work, in the below we have simple steps to create this demo by following the code and explanation of each directive and each angular component, lets have look into below demo features.

-Enter Any values in the input values

-Go Button will not Enable until you enter some text in input box

-Input values will add in the below list

-Delete Option(you can select any value by using check box infront of text and click on delete button)

  • {{todo.title }}

Why angularjs data-ng-app?

This is mandatory to develop angularjs application, you should write this directive inside the page(parent tag and complete application code follow inside of this directive tag then only one AngularJS application can be automatically bootstrapped per HTML document) other wise it will not consider as an angularJs application, to understand more please refer the below code, in the below example code we have created basic plain html page including the angulajs file and along data-ng-app to html tag.

Step1- To Do Applications Basic Setup

To create AngularJs App we need basic html page with required angularjs setup like angularJs library and with angularjs directive data-ng-app(initialize the app) app name called ToDo. and its a important thing you do before you start creating any application you must need to check your library files is working or not in case of its not working make sure it work by placing in different placess like in side the header or bottom of the page or some where.

<!DOCTYPE html>
<html data-ng-app="ToDo">
<head>
<title>Create Angularjs To Do Application with demo</title>
</head> 
<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</body>
</html>
Step2- To Do Applications Module and Controller

In this step we have module(ToDo) with controller (todoController-this will control the data or application) along with $scope(Scope is the object its refers to the model) object with function, to create list of data we have array object(todos) and controller one property(variable) in the scope (title), and we have status with done directive. Also we have ng-contoller(todoController) to handle the components and title will be shows in the inside of the expression{{todo.title }}.

//AngularJS code to create title for the application
angular.module('ToDo',[]).
    controller('todoController',['$scope', function($scope){
  
  $scope.todos = [{
         'title' : 'Building AngularJs To Do Application', 
           'done': false
                 }];

//html component to display title of application
<div ng-controller="todoController">
<ul>
<li ng-repeat="todo in todos">
<span ng-class="{'done':todo.done}">{{todo.title }}</span>
</li>
</ul>
</div>
Step3- to add list to application

The following code is to generate or add new list to box which you enter in the input box. we have method(addTodo) containing with function when todos app creates the list that add(push) to newTodo. by default add button will be disabled until you enter some value in the input.

  //to add list
  $scope.addTodo = function(){
  $scope.todos.push({'title':$scope.newTodo, 'done':false})
  $scope.newTodo=''//cleares the input once enter any text in input
  }

<div ng-controller="todoController">
<form name="firstName" ng-submit="addTodo()">
<input type="text" ng-model="newTodo" required/>
<button ng-disabled="firstName.$invalid">Add</button>
</form>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<span ng-class="{'done':todo.done}">{{todo.title }}</span>
</li>
</ul>
</div>
Step4- to Delete the selected list

The following code is to delete list by using input check box. we have method (clearDelete with function) when the scope object filters the list and here item is nothing but value. Every things is inside the main app controller. In the continuous of the next step we have complete code.

 //to delete list by using input check box
  $scope.clearDelete = function(){
  $scope.todos=$scope.todos.filter(function(item){
  return !item.done// deletes the selected value
  })
  }
<div ng-controller="todoController">
      <ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<span ng-class="{'done':todo.done}">{{todo.title }}</span>
</li>
</ul>
<button ng-click="clearDelete()">Delete Button</button>
</div>
Angularjs To Do Application with demo
Step4- Final Code with above steps

Finally we are done, if you follow the above steps, defiantly you get same output what I have represented in the demo. We have complete code in the below code section with demo.

<!DOCTYPE html>
<html data-ng-app="ToDo">
<head>
<title>Create Angularjs To Do Application with demo</title>
</head> 
<body>

<div ng-controller="todoController">
<form name="firstName" ng-submit="addTodo()">
<input type="text" ng-model="newTodo" required/>
<button ng-disabled="firstName.$invalid">Add</button>
</form>
<button ng-click="clearDelete()">Delete Button</button>

<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done"/>
<span ng-class="{'done':todo.done}">{{todo.title }}</span>
</li>
</ul>
</div> <script> angular.module('ToDo',[]). controller('todoController',['$scope', function($scope){ $scope.todos = [{'title' : 'Building AngularJs To Do Application', 'done': false}];
//to add list $scope.addTodo = function(){ $scope.todos.push({'title':$scope.newTodo, 'done':false}) $scope.newTodo='' }
//to delete list $scope.clearDelete = function(){ $scope.todos=$scope.todos.filter(function(item){ return !item.done }) } }]) </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </body> </html>