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.
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:
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.
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.
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.
In the next tutorial we’ll learn How to Create User Registration & Login using Angular JS
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
USA408 365 4638
1301 Shoreway Road, Suite 160,
Belmont, CA 94002
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
COMMENTS ()
Tweet