AngularJS TO-DO List Application



AngularJS TO-DO List Application

Hi friends, today we will show you how to make angularjs to-do list application. To develop this app, we have used HTML, CSS and AngularJS. We have included javascripts such as angular-route.js, and base.js.

STEP 1:

First step is to create the ‘index.html’ page to make the angular layout.

<!doctype html>
<html lang="en" data-framework="angularjs">
	<head>
		<meta charset="utf-8">

		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
		
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%5Bng-cloak%5D%20%7B%20display%3A%20none%3B%20%7D%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

	</head>
	<body ng-app="todomvc">
		<ng-view />

		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fng-template%22%20id%3D%22todomvc-index.html%22%3E%0A%09%09%09%3C%2Fp%3E%0A%3Csection%20id%3D%22todoapp%22%3E%0A%09%09%09%09%3C%2Fp%3E%0A%3Cheader%20id%3D%22header%22%3E%0A%09%09%09%09%0A%09%09%09%09%09%3C%2Fp%3E%0A%3Cform%20id%3D%22todo-form%22%20ng-submit%3D%22addTodo()%22%3E%0A%09%09%09%09%09%09%3Cinput%20id%3D%22new-todo%22%20placeholder%3D%22Enter%20Todo%20List%22%20ng-model%3D%22newTodo%22%20ng-disabled%3D%22saving%22%20autofocus%3E%0A%09%09%09%09%09%3C%2Fform%3E%0A%3Cp%3E%0A%09%09%09%09%3C%2Fheader%3E%0A%3Cp%3E%0A%09%09%09%09%3C%2Fp%3E%0A%3Csection%20id%3D%22main%22%20ng-show%3D%22todos.length%22%20ng-cloak%3E%0A%09%09%09%09%09%3Cinput%20id%3D%22toggle-all%22%20type%3D%22checkbox%22%20ng-model%3D%22allChecked%22%20ng-click%3D%22markAll(allChecked)%22%3E%0A%09%09%09%09%09%3Clabel%20for%3D%22toggle-all%22%3EMark%20all%20as%20complete%3C%2Flabel%3E%0A%09%09%09%09%09%3C%2Fp%3E%0A%3Cul%20id%3D%22todo-list%22%3E%0A%09%09%09%09%09%09%3C%2Fp%3E%0A%3Cli%20ng-repeat%3D%22todo%20in%20todos%20%7C%20filter%3AstatusFilter%20track%20by%20%24index%22%20ng-class%3D%22%7Bcompleted%3A%20todo.completed%2C%20editing%3A%20todo%20%3D%3D%20editedTodo%7D%22%3E%0A%3Cbr%20%2F%3E%0A%3Cdiv%20class%3D%22view%22%3E%0A%09%09%09%09%09%09%09%09%3Cinput%20class%3D%22toggle%22%20type%3D%22checkbox%22%20ng-model%3D%22todo.completed%22%20ng-change%3D%22toggleCompleted(todo)%22%3E%0A%09%09%09%09%09%09%09%09%3Clabel%20ng-dblclick%3D%22editTodo(todo)%22%3E%7B%7Btodo.title%7D%7D%3C%2Flabel%3E%0A%09%09%09%09%09%09%09%09%3Cbutton%20class%3D%22destroy%22%20ng-click%3D%22removeTodo(todo)%22%3E%3C%2Fbutton%3E%0A%09%09%09%09%09%09%09%3C%2Fdiv%3E%0A%3Cp%3E%0A%09%09%09%09%09%09%09%3C%2Fp%3E%0A%3Cform%20ng-submit%3D%22saveEdits(todo%2C%20'submit')%22%3E%0A%09%09%09%09%09%09%09%09%3Cinput%20class%3D%22edit%22%20ng-trim%3D%22false%22%20ng-model%3D%22todo.title%22%20todo-escape%3D%22revertEdits(todo)%22%20ng-blur%3D%22saveEdits(todo%2C%20'blur')%22%20todo-focus%3D%22todo%20%3D%3D%20editedTodo%22%3E%0A%09%09%09%09%09%09%09%3C%2Fform%3E%0A%3Cp%3E%0A%09%09%09%09%09%09%3C%2Fli%3E%0A%3Cp%3E%0A%09%09%09%09%09%3C%2Ful%3E%0A%3Cp%3E%0A%09%09%09%09%3C%2Fsection%3E%0A%3Cp%3E%0A%09%09%09%09%3C%2Fp%3E%0A%3Cfooter%20id%3D%22footer%22%20ng-show%3D%22todos.length%22%20ng-cloak%3E%0A%09%09%09%09%09%3Cspan%20id%3D%22todo-count%22%3E%3Cstrong%3E%7B%7BremainingCount%7D%7D%3C%2Fstrong%3E%0A%09%09%09%09%09%09%3Cng-pluralize%20count%3D%22remainingCount%22%20when%3D%22%7B%20one%3A%20'item%20left'%2C%20other%3A%20'items%20left'%20%7D%22%3E%3C%2Fng-pluralize%3E%0A%09%09%09%09%09%3C%2Fspan%3E%0A%09%09%09%09%09%3C%2Fp%3E%0A%3Cul%20id%3D%22filters%22%3E%0A%09%09%09%09%09%09%3C%2Fp%3E%0A%3Cli%3E%0A%09%09%09%09%09%09%09%3Ca%20ng-class%3D%22%7Bselected%3A%20status%20%3D%3D%20''%7D%20%22%20href%3D%22%23%2F%22%3EAll%3C%2Fa%3E%0A%09%09%09%09%09%09%3C%2Fli%3E%0A%3Cp%3E%0A%09%09%09%09%09%09%3C%2Fp%3E%0A%3Cli%3E%0A%09%09%09%09%09%09%09%3Ca%20ng-class%3D%22%7Bselected%3A%20status%20%3D%3D%20'active'%7D%22%20href%3D%22%23%2Factive%22%3EActive%3C%2Fa%3E%0A%09%09%09%09%09%09%3C%2Fli%3E%0A%3Cp%3E%0A%09%09%09%09%09%09%3C%2Fp%3E%0A%3Cli%3E%0A%09%09%09%09%09%09%09%3Ca%20ng-class%3D%22%7Bselected%3A%20status%20%3D%3D%20'completed'%7D%22%20href%3D%22%23%2Fcompleted%22%3ECompleted%3C%2Fa%3E%0A%09%09%09%09%09%09%3C%2Fli%3E%0A%3Cp%3E%0A%09%09%09%09%09%3C%2Ful%3E%0A%3Cp%3E%0A%09%09%09%09%09%3Cbutton%20id%3D%22clear-completed%22%20ng-click%3D%22clearCompletedTodos()%22%20ng-show%3D%22completedCount%22%3EClear%20completed%3C%2Fbutton%3E%0A%09%09%09%09%3C%2Ffooter%3E%0A%3Cp%3E%0A%09%09%09%3C%2Fsection%3E%0A%3Cp%3E%0A%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22node_modules%2Ftodomvc-common%2Fbase.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22node_modules%2Fangular%2Fangular.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22node_modules%2Fangular-route%2Fangular-route.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fapp.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fcontrollers%2FtodoCtrl.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fservices%2FtodoStorage.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fdirectives%2FtodoFocus.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fdirectives%2FtodoEscape.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	</body>
</html>

STEP 2:

Please download the rest of the code from the ‘Download Source’ button provided on the top  of the article.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

Bonus: We also give training on following topics:

Bonus: We also give training on following topics:

                       1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.