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.
[php]
<!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="<style>" title="<style>" />
</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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
</body>
</html>
[/php]
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 because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Facebook Wall System Using Angular JS with Multiple Bindings Tutorial
- Angular Create Read Update Delete Tutorial
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
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.