![](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/LearningC.R.U.D.10517.png\")
<\/a>\nFirst what we will need is our HTML template. Remember, we\u2019re going simple here, so in the end we are only going to have two files.<\/p>\n
Look through the following markup and I will explain as we go.<\/p>\n
The Markup<\/h3>\n<!DOCTYPE html>\r\n<html ng-app=\"example\">\r\n\r\n<head>\r\n <meta charset=\"utf-8\" \/>\r\n <title>AngularJS CRUD Example<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-alpha.4\/css\/bootstrap.min.css\" \/>\r\n <script>\r\n document.write('<base href=\"' + document.location + '\" \/>');\r\n <\/script>\r\n <script src=\"https:\/\/code.angularjs.org\/1.5.8\/angular.js\"><\/script>\r\n <script src=\"app.js\"><\/script>\r\n<\/head>\r\n\r\n<body ng-controller=\"MainCtrl as main\">\r\n <div class=\"container\">\r\n <h3>Address Book<\/h3>\r\n\r\n <p>\r\n <label>First Name<\/label>\r\n <input type=\"text\" ng-model=\"main.person.firstname \" \/>\r\n <label>Last Name<\/label>\r\n <input type=\"text \" ng-model=\"main.person.lastname\" \/>\r\n <label>City<\/label>\r\n <input type=\"text\" ng-model=\"main.person.city \" \/>\r\n <\/p>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-7\">\r\n <button class=\"btn btn-primary\" ng-click=\"main.addClickHandler()\">Save<\/button>\r\n <button class=\"btn btn-default\" ng-click=\"main.resetClickHandler()\">Clear Form<\/button>\r\n <\/div>\r\n <div class=\"col-md-5\">\r\n <label>Search:<\/label>\r\n <input type=\"text\" ng-model=\"main.search\" \/>\r\n <\/div>\r\n <\/div>\r\n \r\n <p><\/p>\r\n\r\n <div class=\"row\" ng-show=\"main.addresses\">\r\n <table class=\"table table-bordered table-striped table-condensed\">\r\n <thead>\r\n <tr>\r\n <th>First Name<\/th>\r\n <th>Last Name<\/th>\r\n <th>City<\/th>\r\n <th>actions<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr ng-repeat=\"item in main.addresses |filter:main.search \">\r\n <td ng-bind=\"item.firstname \"><\/td>\r\n <td ng-bind=\"item.lastname \"><\/td>\r\n <td ng-bind=\"item.city \"><\/td>\r\n <td>\r\n <button class=\"btn btn-primary\" ng-click=\"main.editClickHandler(item)\">Edit<\/button>\r\n <button class=\"btn btn-danger\" ng-click=\"main.removeClickHandler(item)\">Remove<\/button>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html><\/pre>\nTo begin with, we\u2019re adding the bootstrap CSS to make the application look pretty.<\/p>\n
Second we\u2019re adding AngularJS 1.5.x to the application from a Content Delivery Network or CDN.<\/p>\n
Third we\u2019re making a reference to the JavaScript file which we will be creating and adding our logic to.<\/p>\n
On the HTML tag we added ng-app=\"example\"<\/code>. This is making the entire page scoped to our application. On the body tag we add ng-controller=\"MainCtrl as main\"<\/code>. By using the controller as<\/code> syntax we will be avoiding the use of $scope<\/code> throughout the JavaScript.<\/p>\nNow we can get inside the actual meat of the template. For the form where you\u2019ll be adding a name and city we have the following:<\/p>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-27-at-11.38.16-AM.png\")
<\/a><\/p>\nNotice the usage of main<\/code>. By doing this, we have named the scope of the backing controller. This gives a developer a little more idea of where and what the context of the variable they\u2019re working with.<\/p>\nA second best practice that we\u2019re doing here is using the object person<\/code> to capture the variable of first name, last name, and city. When used with ng-model<\/code>, this is allowing us to set a property on a model rather setting a property on a $scope<\/code>. It\u2019s a much cleaner way of identifying properties when you\u2019re working with them in the JavaScript side of an Angular application.<\/p>\nYou will notice that we have written our buttons in this fashion:<\/p>\n
<button class=\"btn btn-primary\" ng-click=\"main.addClickHandler()\">Save<\/button>\r\n<button class=\"btn btn-default\" ng-click=\"main.resetClickHandler()\">Clear Form<\/button><\/pre>\nOnce again, we\u2019re making sure that our alias main<\/code> is attached to the function which we are going to call from the JavaScript side of the application.<\/p>\nWith this application we\u2019re also going to take advantage of Angular\u2019s filtering so that we will be able to search through our list of people.<\/p>\n
<label>Search:<\/label>\r\n<input type=\"text\" ng-model=\"main.search\" \/><\/pre>\nNow we don\u2019t want an empty table to show before we have people added, so with the following code:<\/p>\n
<div class=\"row\" ng-show=\"main.addresses\"><\/pre>\nWe are going to hide the display until we have at least one address. ng-show<\/code> works on a boolean toggle. So until we have addresses, the toggle will see false; once we have an address, collection the toggle will see true.<\/p>\nOnto the table which will display the people we are adding:<\/p>\n
<tr ng-repeat=\"item in main.addresses |filter:main.search \"><\/pre>\nSimply doing a repeat on the main.address<\/code> collection. We are going to pipe in an Angular filter using the variable we defined earlier: main.search<\/code>.<\/p>\nWhat\u2019s going to happen here is that anything we type in the input will be used as a filter against the main.address<\/code> collection. We will see an immediate effect on the display when the application is running.<\/p>\nThe bindings for the columns are done in this fashion:<\/p>\n
<td ng-bind=\"item.firstname \"><\/td>\r\n<td ng-bind=\"item.lastname \"><\/td>\r\n<td ng-bind=\"item.city \"><\/td><\/pre>\nitem<\/code> is a single item from the collection and by using the dot notation again, we are able to access the properties of that row item.<\/p>\nLast thing in the markup, we are going to have a couple of buttons for each row where we can edit or delete the item.<\/p>\n
<button class=\"btn btn-primary\" ng-click=\"main.editClickHandler(item)\">Edit<\/button>\r\n <button class=\"btn btn-danger\" ng-click=\"main.removeClickHandler(item)\">Remove<\/button><\/pre>\nThese buttons will be pretty much like the first two, except here we are passing the item<\/code> which is associated with that row. This is how we will access that item in the JavaScript.<\/p>\nOkay, we\u2019re done with the markup. Now let\u2019s move on to writing some JavaScript.<\/p>\n
The JavaScript<\/h3>\n
The first thing we\u2019re going to do is make an Angular module.<\/p>\n
(function () {\r\n 'use strict'\r\n angular.module('example', []);\r\n})();<\/pre>\nWe\u2019ve introduced an Immediately Invoked Function Expression<\/code> to modularize this application and to keep our code from living on the global namespace.<\/p>\nOnce again, it\u2019s best practice syntax. Inside we have created our Angular module and we\u2019ve given it a name. We won\u2019t be using any third-party modules, so nothing else will be done here.<\/p>\n
For the rest of the application we\u2019re again going to create an IIFE-wrapped Angular module:<\/p>\n
(function(){\r\n 'use strict';\r\n\r\n angular\r\n .module('example')\r\n .controller(\u2018MainCtrl\u2019, CoreFunction) \r\n \r\n\r\n}());<\/pre>\nNotice we named the module the same as opening module. We named the controller same as we named it on the HTML template side, and we have passed in a variable named CoreFunction<\/code>.<\/p>\nThis variable<\/code> is as it\u2019s called, the core of the controller and all of our logic from this point on will go inside of this function. By doing this we\u2019re giving ourselves the idea of a standalone \u201cclass\u201d which will be passed into the Angular module system. When you see it all together, it feels much more like JavaScript than Angular syntax.<\/p>\nfunction CoreFunction() {\r\nvar vm = this,\r\n \t\taddressCollection = [],\r\n \t\tisEditing = false;\r\n }<\/pre>\nWe create the function and inside of it we instantiate a couple of local variables. The most important one is that we\u2019re going to alias this<\/code> to the abbreviation of vm<\/code>. Functionally there is no reason do this, but by doing this, you have a really good idea of what will be attached to the view via the magic of Angular.<\/p>\nThink of vm<\/code> as view model and think that anything attached to vm<\/code> will be accessible in the template. It makes the mental model of the application a little easier to understand.<\/p>\nAfter setting vm<\/code>, we\u2019re creating an empty array to hold the addresses locally, and we set an editing flag to be used later in the code.<\/p>\nAgain, inside the CoreFunction<\/code>, we\u2019re going to create the actual logic for our Create, Read, Update, and Delete operations.
\nCreate Operation<\/p>\nvar add = function () {\r\n var newPerson = {};\r\n\r\n if (!angular.equals({}, vm.person)) {\r\n if (isEditing !== false) {\r\n addressCollection[isEditing] = vm.person;\r\n isEditing = false;\r\n } else {\r\n newPerson = vm.person\r\n addressCollection.push(newPerson);\r\n }\r\n\r\n vm.addresses = addressCollection;\r\n vm.person = {};\r\n }\r\n },<\/pre>\nThe add<\/code> function does two things. One, if it\u2019s a new person we will take the properties from vm.person<\/code> which came from the template and push that object in the local address collection. The address collection is assigned to the view model\u2019s collection.<\/p>\nSecond, if the add<\/code> function is doing an update, isEditing<\/code> will not be false, and will be used as the index of that person we\u2019re editing. We will replace that existing index with our edited person. Whereupon we reset the editing flag and exit the function.<\/p>\nUpdate Operation<\/h3>\nedit = function (editPerson) {\r\n isEditing = addressCollection.indexOf(editPerson);\r\n vm.person = angular.copy(editPerson);\r\n },<\/pre>\nAs we saw in the add, we\u2019re needing to set the isEditing<\/code> flag to something other than false.<\/p>\nHere we\u2019re accepting the person from the template via a function parameter. We\u2019re using JavaScript\u2019s indexOf<\/code> function and we\u2019re going to set isEditing<\/code> to that index number.<\/p>\nSecond, we\u2019re setting the view model\u2019s person<\/code> object to a copy of the row\u2019s person object using a built-in Angular copy function. By doing this you will not see the row properties change as you edit them in the input boxes on the template.<\/p>\nDelete Operation<\/h3>\nremove = function (removePerson) {\r\n var index = addressCollection.indexOf(removePerson);\r\n addressCollection.splice(index, 1);\r\n if (addressCollection.length === 0) {\r\n vm.person = {};\r\n vm.addresses = undefined;\r\n }\r\n },<\/pre>\nDeleting a row from our address collection is pretty straightforward. Again, we\u2019re taking the person we want to remove and we\u2019re going to again find its array index. This is just like we did for edit.<\/p>\n
Now this time we are going to use another JavaScript function called splice<\/code> to cut out and remove that index from our collection.<\/p>\nNow if we removed the last person from the address collection, we want to clean up the view model so wm.person<\/code> is initialized as an empty object and wm.address<\/code> is set as undefined.<\/p>\nWhy undefined you may ask? Instead of setting the collection to an empty array, which will still have a length, we want to set the variable to something that will be a JavaScript-falsey value. Remember the boolean toggle on the template. Yes, that\u2019s where this value is set to hide the table.<\/p>\n
But Where Is The Read Operation?<\/h3>\n
You may be wondering why there\u2019s no function to \u201cread\u201d the data. Well if you look again at the add<\/code> function, you\u2019ll notice that when you do \u201cadd\u201d a person you\u2019re pushing an item in the address collection which is bound to the vm.addresses<\/code>.<\/p>\nRemember when I said that anything attached to the view model will be accessible in the template, well we have a ng-repeat<\/code> which will actually \u201cread\u201d that collection and generate the rows for us.<\/p>\nSo in essence, \u201cread\u201d is the only operation where we don\u2019t have to actually do much to make it work.<\/p>\n
The Rest Of The Code<\/h3>\n
The rest of the JavaScript is actually pretty simple:<\/p>\n
reset = function () {\r\n vm.person = {};\r\n vm.search = '';\r\n isEditing = false;\r\n }\r\n\r\n \/\/ view model attached click handlers\r\n vm.addClickHandler = function () {\r\n add();\r\n }\r\n\r\n vm.editClickHandler = function (editPerson) {\r\n edit(editPerson);\r\n }\r\n\r\n vm.removeClickHandler = function (removePerson) {\r\n remove(removePerson);\r\n }\r\n\r\n vm.resetClickHandler = function () {\r\n reset();\r\n }<\/pre>\nAgain, all of this code resides in the CoreFunction<\/code>. The reset<\/code> function is a cleanup function where all of our working creating and editing items are set back to a default state. This does not clear the address collection, just the form found in the HTML template.<\/p>\nNow the last four functions are attached to the view model vm<\/code> and are used as our click handlers for the buttons found in the HTML template. Notice that inside of each click handler, we are just going to call the local function and pass on any parameters are necessary.<\/p>\nSummary<\/h2>\n
So after all that hard work you should now have a working Angular 1.x application which allows you to Create, Read, Update and Delete operations from a locally-created collection.<\/p>\n
You can see working example on Plnkr.co<\/a>.<\/p>\nI hope that you found this helpful in getting to know Angular!<\/p>\n
\n
To begin with, we\u2019re adding the bootstrap CSS to make the application look pretty.<\/p>\n
Second we\u2019re adding AngularJS 1.5.x to the application from a Content Delivery Network or CDN.<\/p>\n
Third we\u2019re making a reference to the JavaScript file which we will be creating and adding our logic to.<\/p>\n
On the HTML tag we added Now we can get inside the actual meat of the template. For the form where you\u2019ll be adding a name and city we have the following:<\/p>\n Notice the usage of A second best practice that we\u2019re doing here is using the object You will notice that we have written our buttons in this fashion:<\/p>\n Once again, we\u2019re making sure that our alias With this application we\u2019re also going to take advantage of Angular\u2019s filtering so that we will be able to search through our list of people.<\/p>\n Now we don\u2019t want an empty table to show before we have people added, so with the following code:<\/p>\n We are going to hide the display until we have at least one address. Onto the table which will display the people we are adding:<\/p>\n Simply doing a repeat on the What\u2019s going to happen here is that anything we type in the input will be used as a filter against the The bindings for the columns are done in this fashion:<\/p>\n Last thing in the markup, we are going to have a couple of buttons for each row where we can edit or delete the item.<\/p>\n These buttons will be pretty much like the first two, except here we are passing the Okay, we\u2019re done with the markup. Now let\u2019s move on to writing some JavaScript.<\/p>\n The first thing we\u2019re going to do is make an Angular module.<\/p>\n We\u2019ve introduced an Once again, it\u2019s best practice syntax. Inside we have created our Angular module and we\u2019ve given it a name. We won\u2019t be using any third-party modules, so nothing else will be done here.<\/p>\n For the rest of the application we\u2019re again going to create an IIFE-wrapped Angular module:<\/p>\n Notice we named the module the same as opening module. We named the controller same as we named it on the HTML template side, and we have passed in a variable named This We create the function and inside of it we instantiate a couple of local variables. The most important one is that we\u2019re going to alias Think of After setting Again, inside the The Second, if the As we saw in the add, we\u2019re needing to set the Here we\u2019re accepting the person from the template via a function parameter. We\u2019re using JavaScript\u2019s Second, we\u2019re setting the view model\u2019s Deleting a row from our address collection is pretty straightforward. Again, we\u2019re taking the person we want to remove and we\u2019re going to again find its array index. This is just like we did for edit.<\/p>\n Now this time we are going to use another JavaScript function called Now if we removed the last person from the address collection, we want to clean up the view model so Why undefined you may ask? Instead of setting the collection to an empty array, which will still have a length, we want to set the variable to something that will be a JavaScript-falsey value. Remember the boolean toggle on the template. Yes, that\u2019s where this value is set to hide the table.<\/p>\n You may be wondering why there\u2019s no function to \u201cread\u201d the data. Well if you look again at the Remember when I said that anything attached to the view model will be accessible in the template, well we have a So in essence, \u201cread\u201d is the only operation where we don\u2019t have to actually do much to make it work.<\/p>\n The rest of the JavaScript is actually pretty simple:<\/p>\n Again, all of this code resides in the Now the last four functions are attached to the view model So after all that hard work you should now have a working Angular 1.x application which allows you to Create, Read, Update and Delete operations from a locally-created collection.<\/p>\n You can see working example on Plnkr.co<\/a>.<\/p>\n I hope that you found this helpful in getting to know Angular!<\/p>\nng-app=\"example\"<\/code>. This is making the entire page scoped to our application. On the body tag we add ng-controller=\"MainCtrl as main\"<\/code>. By using the controller as<\/code> syntax we will be avoiding the use of $scope<\/code> throughout the JavaScript.<\/p>\n<\/a><\/p>\nmain<\/code>. By doing this, we have named the scope of the backing controller. This gives a developer a little more idea of where and what the context of the variable they\u2019re working with.<\/p>\nperson<\/code> to capture the variable of first name, last name, and city. When used with ng-model<\/code>, this is allowing us to set a property on a model rather setting a property on a $scope<\/code>. It\u2019s a much cleaner way of identifying properties when you\u2019re working with them in the JavaScript side of an Angular application.<\/p>\n<button class=\"btn btn-primary\" ng-click=\"main.addClickHandler()\">Save<\/button>\r\n<button class=\"btn btn-default\" ng-click=\"main.resetClickHandler()\">Clear Form<\/button><\/pre>\n
main<\/code> is attached to the function which we are going to call from the JavaScript side of the application.<\/p>\n<label>Search:<\/label>\r\n<input type=\"text\" ng-model=\"main.search\" \/><\/pre>\n
<div class=\"row\" ng-show=\"main.addresses\"><\/pre>\n
ng-show<\/code> works on a boolean toggle. So until we have addresses, the toggle will see false; once we have an address, collection the toggle will see true.<\/p>\n<tr ng-repeat=\"item in main.addresses |filter:main.search \"><\/pre>\n
main.address<\/code> collection. We are going to pipe in an Angular filter using the variable we defined earlier: main.search<\/code>.<\/p>\nmain.address<\/code> collection. We will see an immediate effect on the display when the application is running.<\/p>\n<td ng-bind=\"item.firstname \"><\/td>\r\n<td ng-bind=\"item.lastname \"><\/td>\r\n<td ng-bind=\"item.city \"><\/td><\/pre>\n
item<\/code> is a single item from the collection and by using the dot notation again, we are able to access the properties of that row item.<\/p>\n<button class=\"btn btn-primary\" ng-click=\"main.editClickHandler(item)\">Edit<\/button>\r\n <button class=\"btn btn-danger\" ng-click=\"main.removeClickHandler(item)\">Remove<\/button><\/pre>\n
item<\/code> which is associated with that row. This is how we will access that item in the JavaScript.<\/p>\nThe JavaScript<\/h3>\n
(function () {\r\n 'use strict'\r\n angular.module('example', []);\r\n})();<\/pre>\nImmediately Invoked Function Expression<\/code> to modularize this application and to keep our code from living on the global namespace.<\/p>\n(function(){\r\n 'use strict';\r\n\r\n angular\r\n .module('example')\r\n .controller(\u2018MainCtrl\u2019, CoreFunction) \r\n \r\n\r\n}());<\/pre>\nCoreFunction<\/code>.<\/p>\nvariable<\/code> is as it\u2019s called, the core of the controller and all of our logic from this point on will go inside of this function. By doing this we\u2019re giving ourselves the idea of a standalone \u201cclass\u201d which will be passed into the Angular module system. When you see it all together, it feels much more like JavaScript than Angular syntax.<\/p>\nfunction CoreFunction() {\r\nvar vm = this,\r\n \t\taddressCollection = [],\r\n \t\tisEditing = false;\r\n }<\/pre>\nthis<\/code> to the abbreviation of vm<\/code>. Functionally there is no reason do this, but by doing this, you have a really good idea of what will be attached to the view via the magic of Angular.<\/p>\nvm<\/code> as view model and think that anything attached to vm<\/code> will be accessible in the template. It makes the mental model of the application a little easier to understand.<\/p>\nvm<\/code>, we\u2019re creating an empty array to hold the addresses locally, and we set an editing flag to be used later in the code.<\/p>\nCoreFunction<\/code>, we\u2019re going to create the actual logic for our Create, Read, Update, and Delete operations.
\nCreate Operation<\/p>\nvar add = function () {\r\n var newPerson = {};\r\n\r\n if (!angular.equals({}, vm.person)) {\r\n if (isEditing !== false) {\r\n addressCollection[isEditing] = vm.person;\r\n isEditing = false;\r\n } else {\r\n newPerson = vm.person\r\n addressCollection.push(newPerson);\r\n }\r\n\r\n vm.addresses = addressCollection;\r\n vm.person = {};\r\n }\r\n },<\/pre>\nadd<\/code> function does two things. One, if it\u2019s a new person we will take the properties from vm.person<\/code> which came from the template and push that object in the local address collection. The address collection is assigned to the view model\u2019s collection.<\/p>\nadd<\/code> function is doing an update, isEditing<\/code> will not be false, and will be used as the index of that person we\u2019re editing. We will replace that existing index with our edited person. Whereupon we reset the editing flag and exit the function.<\/p>\nUpdate Operation<\/h3>\n
edit = function (editPerson) {\r\n isEditing = addressCollection.indexOf(editPerson);\r\n vm.person = angular.copy(editPerson);\r\n },<\/pre>\nisEditing<\/code> flag to something other than false.<\/p>\nindexOf<\/code> function and we\u2019re going to set isEditing<\/code> to that index number.<\/p>\nperson<\/code> object to a copy of the row\u2019s person object using a built-in Angular copy function. By doing this you will not see the row properties change as you edit them in the input boxes on the template.<\/p>\nDelete Operation<\/h3>\n
remove = function (removePerson) {\r\n var index = addressCollection.indexOf(removePerson);\r\n addressCollection.splice(index, 1);\r\n if (addressCollection.length === 0) {\r\n vm.person = {};\r\n vm.addresses = undefined;\r\n }\r\n },<\/pre>\nsplice<\/code> to cut out and remove that index from our collection.<\/p>\nwm.person<\/code> is initialized as an empty object and wm.address<\/code> is set as undefined.<\/p>\nBut Where Is The Read Operation?<\/h3>\n
add<\/code> function, you\u2019ll notice that when you do \u201cadd\u201d a person you\u2019re pushing an item in the address collection which is bound to the vm.addresses<\/code>.<\/p>\nng-repeat<\/code> which will actually \u201cread\u201d that collection and generate the rows for us.<\/p>\nThe Rest Of The Code<\/h3>\n
reset = function () {\r\n vm.person = {};\r\n vm.search = '';\r\n isEditing = false;\r\n }\r\n\r\n \/\/ view model attached click handlers\r\n vm.addClickHandler = function () {\r\n add();\r\n }\r\n\r\n vm.editClickHandler = function (editPerson) {\r\n edit(editPerson);\r\n }\r\n\r\n vm.removeClickHandler = function (removePerson) {\r\n remove(removePerson);\r\n }\r\n\r\n vm.resetClickHandler = function () {\r\n reset();\r\n }<\/pre>\nCoreFunction<\/code>. The reset<\/code> function is a cleanup function where all of our working creating and editing items are set back to a default state. This does not clear the address collection, just the form found in the HTML template.<\/p>\nvm<\/code> and are used as our click handlers for the buttons found in the HTML template. Notice that inside of each click handler, we are just going to call the local function and pass on any parameters are necessary.<\/p>\nSummary<\/h2>\n