In this article I will describe how to create a simple “To Do” app in AngularJS and write about some of the basic concepts of AngularJS. The app I will be describing looks like this:<\/p>\n
\nSee the Pen AngularJS Simple To Do App by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
<\/p>\n
To create an AngularJS app, the first thing you will need is a CDN in the script portion of your HTML document.<\/p>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.6\/angular.min.js\"><\/script><\/pre>\nThe two most important parts of this app are the HTML and the JavaScript. Here is what the HTML looks like:<\/p>\n
<div ng-app=\"ToDo\" ng-controller=\"todoController\">\r\n <form name=\"todoform\" ng-submit=\"addTodo()\" class=\"form-style\">\r\n\r\n <input type=\"text\" name=\"newTodo\"\r\n ng-model=\"newTodo\"\r\n class=\"text-field\"\r\n placeholder=\"Type to do item here:\">\r\n <button ng-disabled=\"todoform.$invalid\" class\"btn-style\">Add<\/button>\r\n\r\n <\/form>\r\n <br>\r\n <h2>To Do List:<\/h2>\r\n <div class=\"list-box\">\r\n <ul>\r\n <li ng-repeat=\"todo in todos\">\r\n <input type=\"checkbox\" ng-model=\"todo.done\"\/>\r\n <span ng-class=\"{'done': todo.done}\">{{todo.title}}<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <button ng-click=\"clearCompleted()\">Clear Completed<\/button>\r\n <\/div><\/pre>\nAnd here is the JavaScript:<\/p>\n
let app = angular.module('ToDo', []);\r\n app.controller('todoController', ['$scope', function($scope) {\r\n $scope.todos = [\r\n {'title':'Sample List Item', 'done': false }\r\n ];\r\n $scope.addTodo = function(){\r\n if($scope.newTodo){\r\n $scope.todos.push({'title': $scope.newTodo, 'done': false})\r\n }\r\n $scope.newTodo = ''\r\n }\r\n $scope.clearCompleted = function() {\r\n $scope.todos = $scope.todos.filter(function(item){\r\n return !item.done\r\n\r\n })\r\n }\r\n }])<\/pre>\n<\/p>\n
Step 2: Name the app in both HTML and JS<\/strong><\/h4>\n
In the HTML, we name the app with\u00a0
ng-app=\"ToDo\"<\/code> like so:<\/p>\n<div ng-app=\"ToDo\" ...<\/pre>\nThis corresponds to this line in the JavaScript:<\/p>\n
let app = angular.module('ToDo', []);<\/pre>\nThe HTML tag is “ng-app”. “ng” stands for “Angular”. In the JavaScript, we set up an app variable and call the angular.module() method with two arguments. The first argument is the name of the app. In this case “ToDo”.<\/p>\n
For more information about ng-app, see:
\nhttps:\/\/www.w3schools.com\/angular\/ng_ng-app.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngApp<\/a><\/p>\nFor more information about angular.module(), see:
\nhttps:\/\/www.w3schools.com\/angular\/angular_modules.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/function\/angular.module<\/a><\/p>\n<\/p>\n
Step 3: Set up the controller<\/strong><\/h4>\n
In the HTML, the controller is set up with
ng-controller=\"todoController\"<\/code> like so:<\/p>\n<div ... ng-controller=\"todoController\"><\/pre>\nThis corresponds to this line in the JavaScript:<\/p>\n
app.controller('todoController', ['$scope', function($scope) {<\/pre>\nThe HTML tag is “ng-controller”. In the JavaScript, we use the app variable and call the controller() method with two arguments. The first argument is the name of the controller that was defined in the HTML. In this case “todoController”. The second argument is an array, with the first argument being “$scope” and the second being the body of the “todoController” function.<\/p>\n
For more information about ng-controller, see:
\nhttps:\/\/www.w3schools.com\/angular\/angular_controllers.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngController<\/a><\/p>\nHere is what w3schools says about angular controllers:<\/p>\n
The ng-controller=”myCtrl” attribute is an AngularJS directive. It defines a controller.<\/p>\n
The myCtrl function is a JavaScript function.<\/p>\n
AngularJS will invoke the controller with a $scope object.<\/p>\n
In AngularJS, $scope is the application object (the owner of application variables and functions).<\/p><\/blockquote>\n
<\/p>\n
Step 4: Specify a function to run when the form is submitted
\n<\/strong><\/h4>\nIn the HTML we set up a form with an “ng-submit” tag:
ng-submit=\"addTodo()\"<\/code><\/p>\n<form name=\"todoform\" ng-submit=\"addTodo()\" class=\"form-style\"><\/pre>\nThis specifies what controller function to run when the form is submitted.
\"addTodo()\"<\/code> corresponds to the $scope.addTodo function definition in the controller portion of the Angular code:<\/p>\n$scope.addTodo = function(){\r\n if($scope.newTodo){\r\n $scope.todos.push({'title': $scope.newTodo, 'done': false})\r\n }\r\n $scope.newTodo = ''\r\n}\r\n<\/pre>\nFor more information about ng-submit, see:
\nhttps:\/\/www.w3schools.com\/angular\/ng_ng-submit.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngSubmit<\/a><\/p>\n<\/p>\n
Step 5: Bind the form input to the angular controller using ng-model
\n<\/strong><\/h4>\nHere is what w3schools says about Angular’s ng-model directive:<\/p>\n
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.<\/p><\/blockquote>\n
In the HTML form, the data “newTodo” is defined in ng-model. This is the text input typed by the user in the text field. This is essentially a pipeline from the web page to the Angular controller.<\/p>\n
<input type=\"text\" name=\"newTodo\" ng-model=\"newTodo\" class=\"text-field\" placeholder=\"Type to do item here:\"><\/pre>\nThe Angular controller defines what happens to this data when the addTo function is called:<\/p>\n
$scope.addTodo = function(){\r\n if($scope.newTodo){\r\n $scope.todos.push({'title': $scope.newTodo, 'done': false})\r\n }\r\n $scope.newTodo = ''\r\n}<\/pre>\nIf $scope.newTodo is present, (meaning something was typed into the text field before the user clicked the “Add” button), then assign the text as a value to the ‘title’ key in a small object and push that object into an array called ‘todos’.\u00a0 This array of objects is also defined in the controller:<\/p>\n
$scope.todos = [\r\n {'title':'Sample List Item', 'done': false }\r\n];<\/pre>\nFor more information about ng-model, see:
\nhttps:\/\/www.w3schools.com\/angular\/angular_model.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngModel<\/a><\/p>\n<\/p>\n
Step 6: Display the output in the web app<\/strong><\/h4>\n
When a ‘newTodo’ item is added to the list from Step 5 above, it is displayed in the HTML immediately because of this HTML:<\/p>\n
<ul>\r\n <li ng-repeat=\"todo in todos\">\r\n\t<input type=\"checkbox\" ng-model=\"todo.done\"\/>\r\n\t<span ng-class=\"{'done': todo.done}\">{{todo.title}}<\/span>\r\n <\/li>\r\n<\/ul><\/pre>\nThere are two parts involved in displaying the output in the web page:<\/p>\n
1.
ng-repeat=\"todo in todos\"<\/code>
\n2.{{todo.title}}<\/code><\/p>\nThe Angular ng-repeat directive will basically repeat the HTML element it is defined in for as many data elements as are found in the container that it specifies. In this case the container (usually an array) is called ‘todos’. This is like a for loop. For example:<\/p>\n
For todo in todos, repeat this <li> element and display the title of each todo.<\/p>\n
{{todo.title}}<\/code> is what displays the value associated with the key ‘title’ in each todo object.<\/p>\nFor more information about ng-repeat, see:
\nhttps:\/\/www.w3schools.com\/angular\/ng_ng-repeat.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngRepeat<\/a><\/p>\n<\/p>\n
Step 7: Handle checkboxes for deleting items
\n<\/strong><\/h4>\nIn addition to outputting the title of each todo in the previous step, we can also output a checkbox with each todo which will allow that todo item to be deleted. To do this, we will use ng-model again, but this time, bind to a different key in the todo object. For example, in the HTML:<\/p>\n
<input type=\"checkbox\" ng-model=\"todo.done\"\/>\r\n<span ng-class=\"{'done': todo.done}\">{{todo.title}}<\/span><\/pre>\nThis time ng-model is binding to “todo.done”, which by default is set to false. For example:<\/p>\n
{'title': $scope.newTodo, 'done': false}<\/pre>\nThe next line, which is a span, uses
ng-class<\/span><\/code> which tells the CSS how to style the todo item if the checkbox is clicked. ng-class basically says “If this condition is true, then use the CSS styling associated with this CSS class. Here is the CSS for the “done” class:<\/p>\n.done {\r\n text-decoration: line-through;\r\n color: #ccc;\r\n}<\/pre>\nWhen a checkbox is clicked, the CSS ‘done’ class is activated due to the use of ng-class which gives a strike through style to the item. Also, because of the data binding with ng-model, the todo.done value is toggled to true.<\/p>\n
For more information about ng-class, see:
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngClass<\/a><\/p>\n<\/p>\n
Step 8: Removing checked items<\/strong><\/h4>\n
The final step is to set up a button that will remove all completed todo items that have already been checked. Unlike the ng-submit button we used earlier, this time we will use ng-click with the argument being the name of the angular function that is defined in the controller.<\/p>\n
<button ng-click=\"clearCompleted()\">Clear Completed<\/button><\/pre>\nThe ng-click directive tells Angular to launch the clearCompleted() function when the “Clear Completed” button is clicked. The clearCompleted() function defined in the controller looks like this:<\/p>\n
$scope.clearCompleted = function() {\r\n $scope.todos = $scope.todos.filter(function(item){\r\n return !item.done\r\n})<\/pre>\nWhich basically means, use a filter to only return todo items that don’t have todo.done = true.<\/p>\n
For more information about the ng-click directive, see:
\nhttps:\/\/www.w3schools.com\/angular\/ng_ng-click.asp<\/a>
\nhttps:\/\/docs.angularjs.org\/api\/ng\/directive\/ngClick<\/a><\/p>\nWell, that’s it for this introduction to Angular.<\/p>\n
Note: This To Do app does not save list state, so refreshing the page will delete everything on the list. I will write about how to save the list so that it persists in another article.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article I will describe how to create a simple “To Do” app in AngularJS and write about some of the basic concepts of AngularJS. The app I will be describing looks like this: Step 1: AngularJS CDN To create an AngularJS app, the first thing you will need is a CDN in … Continue reading AngularJS: How to write a simple To Do app<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[148,44],"tags":[156,149,10,105,45,155,150,157,154,151,152,153],"class_list":["post-2150","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript-language","tag-angular-module","tag-angularjs","tag-css","tag-html","tag-javascript","tag-ng-app","tag-ng-class","tag-ng-click","tag-ng-controller","tag-ng-model","tag-ng-repeat","tag-ng-submit"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2150"}],"version-history":[{"count":30,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2150\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2150\/revisions\/2184"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}