AngularJS Tutorial – Writing a To-do Application

AngularJS Tutorial – Writing a To-do Application
COMMENTS ()
Tweet

Hey Guys,

In the previous post we’ve learned How To Create Quick Search Tab Using Angular JS.

In this post I’ll give you a quick AngularJS tutorial on how to develop a To-do application.

AngularJS Tutorial: STEP 1 – Setup Project Hierarchy

In order to build an AngularJS application you’ll first need to setup the project’s hierarchy. To do that you’ll need to perform the following:

  • Create a template file index.html
  • Create a folder called JS and add the app.js and controllers.js files to it
  • Create a folder CSS and add the style.css file to it
  • Download the latest version of the angular.js and save it under the JS folder.

AngularJS Tutorial: STEP 2 – Creating the Template

Next, you’ll need to create a new file index.html and include all the JS (angular.min.js,app.js.controllers.js) and CSS (style.css) files in it, as depicted below.

<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src='js/app.js'></script>
<script src='js/controllers.js'></script>
</head>
<body>
</body>

At this point, you’ve basically setup all the necessary ingredients for an AngularJS application.

AngularJS Tutorial: STEP 3 – Adding Code in app.js and controllers.js

Next, you’ll need to the write the application’s code. To do so, open the app.js file and initialize the application by adding the following code:

var app = angular.module('TaskManager', []);

Then open the controllers.js file and add the business logic of the application i.e. Adding/Deleting Tasks (as depicted below).

app.controller('taskController', function($scope) {
$scope.today = new Date();
$scope.saved = localStorage.getItem('taskItems');
$scope.taskItem = (localStorage.getItem('taskItems')!==null) ?
JSON.parse($scope.saved) : [ {description: "Why not add a task?", date: $scope.today, complete: false}];
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
$scope.newTask = null;
$scope.newTaskDate = null;
$scope.categories = [
{name: 'Personal'},
{name: 'Work'},
{name: 'School'},
{name: 'Cleaning'},
{name: 'Other'}
];
$scope.newTaskCategory = $scope.categories;
$scope.addNew = function () {
if ($scope.newTaskDate == null || $scope.newTaskDate == '') {
$scope.taskItem.push({
description: $scope.newTask,
date: "No deadline",
complete: false,
category: $scope.newTaskCategory.name
})
} else {
$scope.taskItem.push({
description: $scope.newTask,
date: $scope.newTaskDate,
complete: false,
category: $scope.newTaskCategory.name
})
};
$scope.newTask = '';
$scope.newTaskDate = '';
$scope.newTaskCategory = $scope.categories;
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.deleteTask = function () {
var completedTask = $scope.taskItem;
$scope.taskItem = [];
angular.forEach(completedTask, function (taskItem) {
if (!taskItem.complete) {
$scope.taskItem.push(taskItem);
}
});
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
};
$scope.save = function () {
localStorage.setItem('taskItems', JSON.stringify($scope.taskItem));
}
});

As you can see from the code snippet above, we’ve basically added a new controller here called TaskController and also added the functionality for the two methods titled addNew and deleteTask.

AngularJS Tutorial: STEP 4 – Binding the AngularJS Application and Controller Logic to the HTML Attributes using Directives

Now we need to initialize the app using the ng-app directive and add the application flow by binding the ng-controller directive to the div. To do that, add the following code under the

<body> tag.
<div ng-app="TaskManager" >
<div class="container">
<div class="content" ng-controller="taskController">
<h1>To-Do List</h1>
<p class="tagline">An AngularJS Todo Application</p>
<form>
<div class="inputContainer">
<input type="text" id="description" class="taskName" placeholder="What do you need to do?" ng-model="newTask">
<label for="description">Description</label>
</div>
<div class="inputContainer half last"> <i class="fa fa-caret-down selectArrow"></i>
<select id="category" class="taskCategory" ng-model="newTaskCategory" ng-options="obj.name for obj in categories">
<option class="disabled" value="">Choose a category</option>
</select>
<label for="category">Category</label>
</div>
<div class="inputContainer half last right">
<input type="date" id="dueDate" class="taskDate" ng-model="newTaskDate">
<label for="dueDate">Due Date</label>
</div>
<div class="row">
<button class="taskAdd" ng-click="addNew()"><i class="fa fa-plus icon"></i>Add task</button>
<button class="taskDelete" ng-click="deleteTask()"><i class="fa fa-trash-o icon"></i>Delete Tasks</button>
</div>
</form>
<ul  class="taskList">
<li class="taskItem" ng-repeat="taskItem in taskItem track by $index" ng-model="taskItem">
<input type="checkbox" class="taskCheckbox" ng-model="taskItem.complete" ng-change="save()">
<span class="complete-{{taskItem.complete}}">{{taskItem.description}}</span> <span class="category-{{taskItem.category}}">{{taskItem.category}}</span> <strong class="taskDate complete-{{taskItem.complete}}"><i class="fa fa-calendar"></i>{{taskItem.date | date : 'mediumDate'}}</strong> </li>
</ul>
<!-- taskList -->
</div>
<!-- content -->
</div> <!-- container --> </div>

Congratulations! You’ve just created your first AngularJS To-do application. Here’s the snapshot of the app.

AngularJS Tutorial

In the next tutorial we’ll learn How to Create User Registration & Login using Angular JS

ABOUT FOLIO3

As a leading software development company, we specialize in developing enterprise and consumer oriented web applications and websites. We also provide website and web application UI and UX design services. If you have a website development or web application development project that you’d like to discuss or would like to know more about our web development expertise, please Contact Us

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Contact us

Whether you are a large enterprise looking to augment your teams with experts resources or an SME looking to scale your business or a startup looking to build something.
We are your digital growth partner.

Tel: +1 408 365 4638
Support: +1 (408) 512 1812