Simple To Do List App Using AngularJs

Submitted by razormist on Saturday, March 4, 2017 - 18:14.
In this tutorial we will create a Simple To Do List App Using AngularJs. AngularJS is a structural framework for dynamic web application. It is a structural framework for dynamic web application for a better programming tools.This simple application can help organize your overload works by listing it to priority to least. Let's now do the coding... Creating The Mark Up To create the form, Just copy/paste the code below and name it 'index.html'.
  1. <!DOCTYPE html>
  2. <html lang = "en" ng-app = "myModule">
  3.         <head>
  4.                 <script src = "js/angular.js"></script>
  5.                 <script src = "js/app.js"></script>
  6.                 <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  7.                 <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
  8.         </head>
  10.         <nav class  = "navbar navbar-default">
  11.                 <div class = "container-fluid">
  12.                         <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a>
  13.                 </div>
  14.         </nav> 
  15.         <div class = "row">
  16.                 <div class = "col-md-3"></div>
  17.                 <div class = "col-md-6 well">
  18.                         <h3 class = "text-primary">Simple To Do List App Using AngularJs</h3>
  19.                         <hr style = "border-top:1px dotted #000;"/>
  20.                         <div ng-controller = "myController">
  21.                                         <form name = "listfrm" ng-submit = "addList()">
  22.                                                 <div class = "form-inline">    
  23.                                                         <input  class = "form-control" type = "text" name = "newlist" placeholder = "Enter list here..." ng-model = "newlist" required = "required" />
  24.                                                         <button class = "btn btn-primary" ng-disabled = "listfrm.$Invalid"><span class = "glyphicon glyphicon-plus"></span> ADD</button>
  25.                                                 </div>
  26.                                         </form>
  27.                                         <br />
  28.                                         <button class = "btn btn-danger pull-right" ng-click = "clearList()"><span class = "glyphicon glyphicon-remove"></span> Clear selected List</button>
  29.                                         <br /><br /><br />
  30.                                         <ul>
  31.                                                 <li ng-repeat = "list in lists">
  32.                                                         <input type = "checkbox" ng-model = "list.done" />
  33.                                                         <span ng-class = "{done:list.done}">{{list.name}}</span>
  34.                                                 </li>
  35.                                         </ul>
  36.                         </div>
  37.                 </div> 
  38.         </div> 
  39. </body>
  40. </html>
Adding Some CSS Style For The Lists Just copy the code below then paste it inside the head tag.
  1. <style>
  2.   .done{
  3.     text-decoration: line-through;
  4.     color:#ccc;
  5.   }
  6.   ul{
  7.     list-style-type:none;
  8.   }
  9.   ul li{
  10.     font-size:18px;
  11.     color:#5cb85c;
  12.   }
  13. </style>
Creating The AngularJs Directives To make the angularjs works, copy/paste the code below then name it 'app.js' then save it inside the js folder.
  1. angular.module('myModule', [])
  2.                                 .controller('myController', ['$scope', function($scope){
  3.                                         $scope.lists =[
  4.                                                 {name: 'Creating A Database', done: false},
  5.                                                 {name: 'Creating A Database Connection', done: false},
  6.                                                 {name: 'Creating Webpage Layout', done: false},
  7.                                                 {name: 'Adding Some Php Script', done: false},
  8.                                                 {name: 'Adding Javascript Function', done: false},
  9.                                                 {name: 'Need Testing', done: false},
  10.                                         ];
  11.                                        
  12.                                         $scope.addList = function(){
  13.                                                 $scope.lists.push({name: $scope.newlist, done: false})
  14.                                                 $scope.newlist = "";
  15.                                         }
  16.                                        
  17.                                         $scope.clearList = function(){
  18.                                                 $scope.lists = $scope.lists.filter(function(item){
  19.                                                         return !item.done;
  20.                                                 });
  21.                                         }
  22.                                        
  23.                                        
  24.                                 }])
The code above will generate the list to the html form. The $scope.addList function will add some new list when the button is clicked. The $scope.clearList function will delete all the checked checkbox when the button is clicked. There you have it we just created a simple to do list app using angularjs. I hope that this tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site, and don't forget to like our page @ Facebook: https://www.facebook.com/SourceCodester/. Enjoy Coding!!
Tags
AngularJS

Add new comment

About text formats
  • 105 views