{"id":1120,"date":"2017-10-16T06:48:52","date_gmt":"2017-10-16T03:48:52","guid":{"rendered":"https:\/\/community.virtono.com\/?p=1120"},"modified":"2020-06-10T16:52:19","modified_gmt":"2020-06-10T13:52:19","slug":"restangular","status":"publish","type":"post","link":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/restangular\/","title":{"rendered":"Restangular"},"content":{"rendered":"<header class=\"entry-header\">\n<h3 id=\"seriesName\">Series:\u00a0Introduction to the MEAN Stack<\/h3>\n<ul id=\"seriesList\">\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hs\" target=\"_blank\" rel=\"noopener\">Part 1: Definition of the MEAN stack<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hz\" target=\"_blank\" rel=\"noopener\">Part 2:\u00a0Setup of the MEAN stack<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-hC\" target=\"_blank\" rel=\"noopener\">Part 3:\u00a0Node.js<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-npm\" target=\"_blank\" rel=\"noopener\">Part 4:\u00a0npm<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-connect\" target=\"_blank\" rel=\"noopener\">Part 5:\u00a0Connect<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-express\" target=\"_blank\" rel=\"noopener\">Part 6:\u00a0Express<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-mongodb\" target=\"_blank\" rel=\"noopener\">Part 7:\u00a0MongoDB<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-mongodb\" target=\"_blank\" rel=\"noopener\">Part 8:\u00a0Mongoose<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-rest\" target=\"_blank\" rel=\"noopener\">Part 9:\u00a0REST<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-baucis\" target=\"_blank\" rel=\"noopener\">Part 10:\u00a0Baucis<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/s7ISfL-bower\" target=\"_blank\" rel=\"noopener\">Part 11:\u00a0Bower<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-i1\" target=\"_blank\" rel=\"noopener\">Part 12:\u00a0AngularJS<\/a><\/li>\n<li><a href=\"https:\/\/wp.me\/p7ISfL-i4\" target=\"_blank\" rel=\"noopener\">Part 13:\u00a0Restangular<\/a><\/li>\n<\/ul>\n<\/header>\n<div class=\"entry-content\">\n<p>After the last time we saw AngularJS only superficially, I want to introduce you today how you can use AngularJS to use a REST API.<span id=\"more-3653\"><\/span><\/p>\n<p>For this purpose we use the REST API, which we have created in the article about Baucis.\u00a0We add only a static file server to the example in the penultimate line so that we can output HTML, CSS, and JavaScript:<\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<br \/>\n21<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\"><span class=\"kw2\">var<\/span>\u00a0mongoose\u00a0<span class=\"sy0\">=<\/span>\u00a0require\u00a0<span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;mongoose&#8217;\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"kw2\">var<\/span>\u00a0baucis\u00a0<span class=\"sy0\">=<\/span>\u00a0require\u00a0<span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;baucis&#8217;\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"kw2\">var<\/span>\u00a0express\u00a0<span class=\"sy0\">=<\/span>\u00a0require\u00a0<span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;express&#8217;\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span>mongoose.\u00a0<span class=\"me1\">connect\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;mongodb: \/\/ localhost: 27017 \/ todo-db&#8217;\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><\/p>\n<p><span class=\"kw2\">var<\/span>\u00a0TodoSchema\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"kw2\">new<\/span>\u00a0mongoose.\u00a0<span class=\"me1\">Schema\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\ntitle\u00a0<span class=\"sy0\">:\u00a0<\/span><span class=\"br0\">{<\/span>\u00a0type\u00a0<span class=\"sy0\">:<\/span>\u00a0String\u00a0<span class=\"sy0\">,\u00a0<\/span><span class=\"kw2\">default\u00a0<\/span><span class=\"sy0\">:\u00a0<\/span><span class=\"st0\">&#8221;<\/span>\u00a0<span class=\"br0\">}\u00a0<\/span><span class=\"sy0\">,<\/span><br \/>\ncompleted\u00a0<span class=\"sy0\">:\u00a0<\/span><span class=\"br0\">{<\/span>\u00a0type\u00a0<span class=\"sy0\">:<\/span>\u00a0Boolean\u00a0<span class=\"sy0\">,\u00a0<\/span><span class=\"kw2\">default\u00a0<\/span><span class=\"sy0\">:\u00a0<\/span><span class=\"kw2\">false\u00a0<\/span><span class=\"br0\">}\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\nmongoose.\u00a0<span class=\"me1\">model\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;todo&#8217;\u00a0<\/span><span class=\"sy0\">,<\/span>\u00a0TodoSchema\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><\/p>\n<p>baucis.\u00a0<span class=\"me1\">rest\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\nsingular\u00a0<span class=\"sy0\">:\u00a0<\/span><span class=\"st0\">&#8216;todo&#8217;\u00a0<\/span><span class=\"sy0\">,<\/span><br \/>\nplural\u00a0<span class=\"sy0\">:\u00a0<\/span><span class=\"st0\">&#8216;todos&#8217;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><\/p>\n<p>express\u00a0<span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"kw2\">use\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;\/ api&#8217;\u00a0<\/span><span class=\"sy0\">,<\/span>\u00a0baucis\u00a0<span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"kw2\">use<\/span><span class=\"br0\">(<\/span>\u00a0Express.\u00a0<span class=\"me1\">Static\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0__dirname\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">)\u00a0<\/span>\u00a0<span class=\"co1\">\/\/ new line<\/span><br \/>\n.\u00a0<span class=\"me1\">listen\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"nu0\">1337\u00a0<\/span><span class=\"sy0\">,\u00a0<\/span><span class=\"st0\">&#8216;127.0.0.1&#8217;\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;<\/span><\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Remember to install Mongoose, Baucis and Express, as well as launch the Node server and MongoDB.\u00a0Also AngularJS should you again with Bower install.<\/p>\n<p>After this preparation we can now begin with the example.\u00a0Like Node, AngularJS is also divided into several modules.\u00a0One of these is $ http, which allows you to perform HTTP requests, which is part of the core modules of AngularJS.\u00a0This means that it is automatically installed with AngularJS.\u00a0Another module with which you can perform HTTP requests is $ resource.\u00a0It is based on $ http and is directly for use with REST APIs.\u00a0It is also developed by the AngularJS team, but must be installed additionally.\u00a0I would like to introduce you to another AngularJS module as a $ resource:\u00a0Restangular,\u00a0Restangular is very similar to $ resource, but offers more comfort and flexibility.\u00a0It is not developed by the AngularJS team, but by Martin Gontovnikas.\u00a0You install it with the following command:<\/p>\n<div>\n<div class=\"codecolorer-container powershell default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<\/div>\n<\/td>\n<td>\n<div class=\"powershell codecolorer\">$ bower install restangular<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>If you have watched the terminal carefully or\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">bower_components<\/span><\/code>\u00a0look\u00a0in your\u00a0folder, you will find that\u00a0you have downloaded\u00a0another framework called\u00a0Lo-Dash in\u00a0addition to Restangular\u00a0.\u00a0Here we see one of the reasons why we use Bower: Sometimes different frameworks (or modules \/ components) depend on each other.\u00a0With package managers like Bower and npm, we do not have to worry about these dependencies and save on work.\u00a0I will not explain Lo-Dash at this point, since we will not use it, but it is a very useful little framework that simplifies the use of objects, arrays, strings, and the like.\u00a0You may want to sniff the\u00a0documentation\u00a0of Lo-Dash to find out more.<\/p>\n<p>You may smoke your head with the many frameworks and you see it as a bad practice to use and install too many frameworks.\u00a0Something worry is, of course, appropriate, but these are really useful and very small frameworks.\u00a0AngularJS may initially be a very large framework, but on the other hand it reduces your own self-written code considerably.\u00a0If the file size of the frameworks disturb, then you are told that the biggest file size problems are still caused by pictures on web pages.\u00a0As long as you do not optimize your images synonymous and thoroughly compressed, you should not yet (or few) thoughts about JavaScript files make.\u00a0The later you all your code minified and packaged in a file &#8211; of which I go now<img data-recalc-dims=\"1\" decoding=\"async\" class=\"wp-smiley\" src=\"https:\/\/i0.wp.com\/www.senaeh.de\/wp-includes\/images\/smilies\/icon_wink.gif?w=750\" alt=\";)\" \/><\/p>\n<p>Now that we have all the necessary resources for our webapp, I show you in one go our client, which I owed the better readability owed completely in a single\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">index.html<\/span><\/code>\u00a0:<\/p>\n<div class=\"codecolorer-container html4strict default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<br \/>\n16<br \/>\n17<br \/>\n18<br \/>\n19<br \/>\n20<br \/>\n21<br \/>\n22<br \/>\n23<br \/>\n24<br \/>\n25<br \/>\n26<br \/>\n27<br \/>\n28<br \/>\n29<br \/>\n30<br \/>\n31<br \/>\n32<br \/>\n33<br \/>\n34<br \/>\n35<br \/>\n36<br \/>\n37<br \/>\n38<br \/>\n39<br \/>\n40<br \/>\n41<br \/>\n42<br \/>\n43<br \/>\n44<br \/>\n45<br \/>\n46<br \/>\n47<br \/>\n48<br \/>\n49<br \/>\n50<br \/>\n51<br \/>\n52<br \/>\n53<br \/>\n54<br \/>\n55<br \/>\n56<br \/>\n57<br \/>\n58<br \/>\n59<br \/>\n60<br \/>\n61<br \/>\n62<br \/>\n63<br \/>\n64<br \/>\n65<br \/>\n66<br \/>\n67<br \/>\n68<br \/>\n69<br \/>\n70<br \/>\n71<br \/>\n72<br \/>\n73<br \/>\n74<br \/>\n75<\/div>\n<\/td>\n<td>\n<div class=\"html4strict codecolorer\"><span class=\"sc2\">&lt;! doctype html&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">html<\/span>\u00a0ng-app\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todoApp&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">head<\/span>\u00a0&gt;\u00a0<\/span><span class=\"sc-1\">&lt;! &#8211; loadscripts -&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">script\u00a0<\/span><span class=\"kw3\">src\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;.\/bower_components\/angular\/angular.js&#8221;<\/span>\u00a0&gt; &lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">script<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">script\u00a0<\/span><span class=\"kw3\">src\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;.\/bower_components\/lodash\/dist\/lodash.js&#8221;<\/span>\u00a0&gt; &lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">script<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">script\u00a0<\/span><span class=\"kw3\">src\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;.\/bower_components\/restangular\/dist\/restangular.js&#8221;<\/span>\u00a0&gt; &lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">script<\/span>\u00a0&gt;\u00a0<\/span><\/p>\n<p><span class=\"sc-1\">&lt;! &#8211; create angular app &#8211; &gt;<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">script<\/span>\u00a0&gt;<\/span><br \/>\nangular<br \/>\n.module ( &#8216;todoApp&#8217;, [ &#8216;restangular&#8217;])<br \/>\nconfig (function (RestangularProvider) {<br \/>\nRestangularProvider.setRestangularFields ({<br \/>\nid: &#8216;_id&#8217;<br \/>\n});<br \/>\n})<br \/>\n.Controller ( &#8216;TodoController&#8217;, function ($ scope, Restangular ) {<\/p>\n<p>$ scope.todos = [];<br \/>\nRestangular<br \/>\n.all ( &#8216;api \/ todos&#8217;)<br \/>\n.getList ()<br \/>\n.then (function (todos) {<br \/>\n$ scope.todos = todos;<br \/>\n});<\/p>\n<p>$ scope.create = function () {<br \/>\n$ scope.todos<br \/>\n.post ({title: $ scope.newTodo})<br \/>\n.then (function (todo) {<br \/>\n$ scope.todos.push (todo);<br \/>\n});<br \/>\n};<\/p>\n<p>$ scope.delete = function (todo, index) {<br \/>\ntodo<br \/>\n.remove ()<br \/>\n.then (function () {<br \/>\n$ scope.todos.splice (index, 1);<br \/>\n});<br \/>\n};<\/p>\n<p>});<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">script<\/span>\u00a0&gt;\u00a0<\/span><\/p>\n<p><span class=\"sc-1\">&lt;! &#8211; add style for completed todos -&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">style<\/span>\u00a0&gt;<\/span><br \/>\n.completed {<br \/>\ncolor: green;<br \/>\n}<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">style<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">head<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"kw2\">body<\/span>\u00a0&gt;\u00a0<\/span><\/p>\n<p><span class=\"sc-1\">&lt;- create view: first a form to create new todos, then show a list of existing todos -&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">div<\/span>\u00a0ng-controller\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;TodoController&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">form<\/span>\u00a0&gt;<\/span><br \/>\nNew Todo:<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">input\u00a0<\/span><span class=\"kw3\">type\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;text&#8221;<\/span>\u00a0ng-model\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;newTodo&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">button<\/span>\u00a0ng-click\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;create ()&#8221;<\/span>\u00a0&gt;<\/span>\u00a0Add<span class=\"sc2\">\u00a0&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">button<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">form<\/span>\u00a0&gt;\u00a0<\/span><\/p>\n<p><span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">ul<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"kw2\">li<\/span>\u00a0ng-repeat\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo in todos&#8221;<\/span>ng\u00a0<span class=\"kw3\">class\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;{completed: todo.completed}&#8221;<\/span>\u00a0&gt;<\/span><br \/>\n{{}} todo.title<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">button<\/span>\u00a0ng-click\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;delete (todo, $ index)&#8221;<\/span>\u00a0&gt;<\/span>\u00a0Remove\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">button<\/span>\u00a0&gt;<\/span>\u00a0or mark as completed:<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">input\u00a0<\/span><span class=\"kw3\">type\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;checkbox&#8221;<\/span>\u00a0ng-model\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo.completed&#8221;<\/span>\u00a0ng-change\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo.put ()&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">li<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">ul<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">div<\/span>\u00a0&gt;\u00a0<\/span><\/p>\n<p><span class=\"sc2\">&lt;<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">body<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">html<\/span>\u00a0&gt;<\/span><\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Let&#8217;s go through the code step by step.\u00a0In the\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">html<\/span><\/code>element, we\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-app<\/span><\/code>\u00a0used\u00a0the attribute as in the last article\u00a0.\u00a0This time we added the value\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">todoApp<\/span><\/code>\u00a0.\u00a0If we want to use additional modules like Restangular, then we need to assign a module directly to an AngularJS app.\u00a0This is done at a later time with the string\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">todoApp<\/span><\/code>.<\/p>\n<p>In the next section, we include AngularJS, Lo-Dash, and Restangular.\u00a0As far as nothing unknown.\u00a0In productive use I would put the scripts to the end of the HTML document, but for reasons of explanation I have brought the whole logic forward.\u00a0Now begins the exciting section.<\/p>\n<p>With the following code lines we create an AngularJS app called\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">todoApp<\/span><\/code>\u00a0and tell her that it depends on Restangular:<\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\">\u00a0 \u00a0 \u00a0 angular<br \/>\n.\u00a0<span class=\"me1\">module\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;todoApp&#8217;\u00a0<\/span><span class=\"sy0\">,\u00a0<\/span><span class=\"br0\">[\u00a0<\/span><span class=\"st0\">&#8216;restangular&#8217;\u00a0<\/span><span class=\"br0\">]\u00a0<\/span><span class=\"br0\">)<\/span><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>This is followed by a configuration section in which individual modules can be configured before their use.\u00a0In this case, we change a setting for Restangular.\u00a0Restangular assumes that the REST API data has a\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">id<\/span><\/code>field\u00a0per document\u00a0.\u00a0However, as we know, this field is called MongoDB\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">_id<\/span><\/code>.\u00a0So we have to change this setting.\u00a0At this point, we also see dependency injection for the first time.\u00a0RestangularProvider\u00a0<i>must be called<\/i>\u00a0RestangularProvider!\u00a0If the parameter is different, we do\u00a0<i>not get<\/i>\u00a0the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">RestangularProvider<\/span><\/code>object!\u00a0For AngularJS the names of parameters are important!<\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\">\u00a0 \u00a0 \u00a0 \u00a0 ,\u00a0<span class=\"me1\">config\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0RestangularProvider\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\nRestangularProvider.\u00a0<span class=\"me1\">setRestangularFields\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\nid\u00a0<span class=\"sy0\">:\u00a0<\/span><span class=\"st0\">&#8216;_id&#8217;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)<\/span><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>We then create a controller.\u00a0The controller receives a name so that it can be assigned to a view later.\u00a0We also inject a\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>&#8211; and a &#8211;\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">Restangular<\/span><\/code>object.\u00a0Dependency injection is used again here.\u00a0If we write the parameters with a different name, we do not get our desired objects.\u00a0In addition, the order of the parameters does not matter.\u00a0Whether we\u00a0\u00a0write\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>\u00a0or\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">Restangular<\/span><\/code>write is irrelevant.\u00a0Restangular makes us easier to use our REST API.\u00a0But what is it \u00a0\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>?\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>\u00a0is the link between View and Controller, which allows two-way data binding.\u00a0All data that is\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>assigned to\u00a0the\u00a0object is accessible in the controller and the view.\u00a0In other words, the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>object holds our model.<\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\">\u00a0 \u00a0 \u00a0 \u00a0 ,\u00a0<span class=\"me1\">controller\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;TodoController&#8217;\u00a0<\/span><span class=\"sy0\">,\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0$ scope\u00a0<span class=\"sy0\">,<\/span>\u00a0Restangular\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>We now know that the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>object gets our model and that we get the data of our model with Restangular via our REST API.\u00a0This realization will be implemented in the next step.\u00a0First, we name our model as a\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todos<\/span><\/code>field on the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>object.\u00a0It is initially an empty array.\u00a0The array is now filled with real data.\u00a0We say Restangular the URL to our REST API and the Collection (\u00a0) and then request with\u00a0\u00a0all available Todos.\u00a0Then you see the function\u00a0, which is a special feature.\u00a0The object which<code class=\"codecolorer powershell default\"><span class=\"powershell\"><span class=\"sy0\">\/<\/span>api<span class=\"sy0\">\/<\/span>todos<\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">getList<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">then<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">getList<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code>\u00a0is not our actual data.\u00a0This is not possible because HTTP requests are asynchronous.\u00a0If you know AJAX, you already know this, after all, the &#8220;A&#8221; is asynchronous.\u00a0What we are back is a so-called\u00a0<strong>promise<\/strong>\u00a0.\u00a0This is a widely used concept in AngularJS.\u00a0However, it is not specific to AngularJS and can, for example, also be used in a node.\u00a0A promise helps us to write asynchronous code more literally.\u00a0In this case is\u00a0\u00a0part of the Promise API.\u00a0The callback\u00a0\u00a0is received as soon as the promise has been met.\u00a0In other words, the callback\u00a0\u00a0is executed when we receive our Todos.\u00a0The Todos are handed over to the callback, so we get them<code class=\"codecolorer javascript default\"><span class=\"javascript\">then<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">then<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">then<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope.<span class=\"me1\">todos<\/span><\/span><\/code>Array.\u00a0But beware: The Todos we receive are not\u00a0<i>exactly<\/i>\u00a0our Todos.\u00a0When you\u00a0\u00a0look at them, you see that they have much more fields and functions.\u00a0These are Restoudangular extended versions of our Todos!\u00a0This allows us to better deal with the data later.<code class=\"codecolorer javascript default\"><span class=\"javascript\">console.<span class=\"me1\">log<\/span><\/span><\/code><\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $ scope.\u00a0<span class=\"me1\">todos\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"br0\">[\u00a0<\/span><span class=\"br0\">]\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\nRestangular<br \/>\n.\u00a0<span class=\"me1\">all\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"st0\">&#8216;api \/ todos&#8217;\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"me1\">getList\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"me1\">then\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0todos\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\n$ scope.\u00a0<span class=\"me1\">todos\u00a0<\/span><span class=\"sy0\">=<\/span>\u00a0todos\u00a0<span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;<\/span><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Since we now have our Todos, let us change them.\u00a0Our client offers the possibility to create new Todos and delete existing ones.\u00a0For this reason, we create a function for this task in our controller:\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">create<\/span><\/code>and\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\"><span class=\"kw1\">delete<\/span><\/span><\/code>.\u00a0We also assign these to the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>object so that they can be called later from the view.\u00a0In the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">create<\/span><\/code>function we take our existing Todos and add\u00a0\u00a0a new Todo.\u00a0(Remember that our Todos have been expanded by Restangular\u00a0, which is an extension that allows us to create new Todos quickly.) You see a new model named\u00a0\u00a0on the<code class=\"codecolorer javascript default\"><span class=\"javascript\">post<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">post<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">newTodo<\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>, which we have not mentioned so far.\u00a0This is a single string from a text input field, which we later define in the view.\u00a0We get a promise\u00a0from the\u00a0function again, after all, the creation of new data via the REST API is asynchronous as is the retrieval of existing data.\u00a0If our new Todo was successfully transferred, the promise is fulfilled and the callback is\u00a0\u00a0called by, in which we\u00a0\u00a0add\u00a0our new Todo\u00a0.\u00a0This step is necessary for AngularJS to know that the data has changed.\u00a0The\u00a0function is very similar, but it refers to a single Todo and not to the entire array.\u00a0The function also has a second parameter<code class=\"codecolorer javascript default\"><span class=\"javascript\">post<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">then<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\"><span class=\"kw1\">delete<\/span><\/span><\/code><code class=\"codecolorer javascript default\"><span class=\"javascript\">index<\/span><\/code>, which however only serves to make deleted Todo in the array easier to find.<\/p>\n<div class=\"codecolorer-container javascript default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<\/div>\n<\/td>\n<td>\n<div class=\"javascript codecolorer\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $ scope.\u00a0<span class=\"me1\">create\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\n$ scope.\u00a0<span class=\"me1\">todos<\/span><br \/>\n.\u00a0<span class=\"me1\">post\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">{<\/span>\u00a0title\u00a0<span class=\"sy0\">:<\/span>\u00a0$ scope.\u00a0<span class=\"me1\">newTodo\u00a0<\/span><span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"me1\">then\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0todo\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\n$ scope.\u00a0<span class=\"me1\">todos<\/span>\u00a0.\u00a0<span class=\"me1\">push\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0todo\u00a0<span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span>$ scope.\u00a0<span class=\"kw1\">delete\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0todo\u00a0<span class=\"sy0\">,<\/span>\u00a0index<span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\ntodo<br \/>\n.\u00a0<span class=\"me1\">remove\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)<\/span><br \/>\n.\u00a0<span class=\"me1\">then\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"kw2\">function\u00a0<\/span><span class=\"br0\">(\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"br0\">{<\/span><br \/>\n$ scope.\u00a0<span class=\"me1\">todos<\/span>\u00a0.\u00a0<span class=\"me1\">splice\u00a0<\/span><span class=\"br0\">(<\/span>\u00a0index\u00a0<span class=\"sy0\">,\u00a0<\/span><span class=\"nu0\">1\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"br0\">)\u00a0<\/span><span class=\"sy0\">;\u00a0<\/span><br \/>\n<span class=\"br0\">}\u00a0<\/span><span class=\"sy0\">;<\/span><\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>A short CSS section follows, in which only one style has been fixed.\u00a0Elements with the class\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">completed<\/span><\/code>\u00a0are to receive a green text.\u00a0So we can distinguish between completed and unsolved deaths.<\/p>\n<p>Now just follow our view.\u00a0The view sits in an\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">div<\/span><\/code>element, which we\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">TodoController<\/span><\/code>\u00a0assign to\u00a0ours\u00a0.\u00a0In this way, we can use the data and functions that the controller exposes over\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">$scope<\/span><\/code>\u00a0in the view.\u00a0The view consists of two parts: a form for creating new Todos and a list for displaying and editing existing Todos.\u00a0The form consists essentially of a text field whose value\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">newTodo<\/span><\/code>\u00a0is bound\u00a0to the model\u00a0, and a button that\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">create<\/span><\/code>calls the controller&#8217;s function at a click.<br \/>\nThe list looks a bit more complicated.\u00a0A single\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>element has been defined in the list that\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-repeat=\"todo in todos\"<\/span><\/code>\u00a0begins\u00a0with\u00a0.\u00a0It is a directive which provides the<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>Element as many times as there are entries in the model\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todos<\/span><\/code>\u00a0.\u00a0Within\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>\u00a0, a single Todo can be\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todo<\/span><\/code>\u00a0referenced.\u00a0In addition, the\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>element\u00a0contains\u00a0the section\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-class=\"{ completed: todo.completed }\"<\/span><\/code>.\u00a0This automatically sets the CSS class\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">completed<\/span><\/code>\u00a0to the\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>element, if the corresponding one has\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todo<\/span><\/code>the value\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\"><span class=\"kw2\">true<\/span><\/span><\/code>\u00a0in the field\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">completed<\/span><\/code>\u00a0!\u00a0If this is not the case, the class is not set.\u00a0Through two-way data binding this check happens at any time if the value changes!\u00a0In the\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">li<\/span><\/code>element, we\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">{{todo.title}}<\/span><\/code>\u00a0first\u00a0display\u00a0the actual Todo\u00a0via the placeholder\u00a0.\u00a0This is followed by a button, which\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\"><span class=\"kw1\">delete<\/span><\/span><\/code>calls\u00a0the\u00a0function of the controller\u00a0at a click\u00a0.\u00a0You see here the use of a special variable called<code class=\"codecolorer javascript default\"><span class=\"javascript\">$index<\/span><\/code>,\u00a0It is generated automatically by AngularJS and describes the index of\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todo<\/span><\/code>\u00a0within the\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\">todos<\/span><\/code>array.\u00a0The following is a check box whose value is directly\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">completed<\/span><\/code>\u00a0linked\u00a0to the field\u00a0.\u00a0If the checkbox is used, the value changes\u00a0<code class=\"codecolorer actionscript3 default\"><span class=\"actionscript3\"><span class=\"kw1\">true<\/span><\/span><\/code>\u00a0to\u00a0<code class=\"codecolorer javascript default\"><span class=\"javascript\"><span class=\"kw2\">false<\/span><\/span><\/code>\u00a0and vice versa.\u00a0The directive\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-change<\/span><\/code>\u00a0allows us to be informed about a change so that we\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">todo.put()<\/span><\/code>\u00a0can store\u00a0it with\u00a0our REST API.<\/p>\n<div class=\"codecolorer-container html4strict default\">\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"line-numbers\">\n<div>1<br \/>\n2<br \/>\n3<br \/>\n4<br \/>\n5<br \/>\n6<br \/>\n7<br \/>\n8<br \/>\n9<br \/>\n10<br \/>\n11<br \/>\n12<br \/>\n13<br \/>\n14<br \/>\n15<\/div>\n<\/td>\n<td>\n<div class=\"html4strict codecolorer\">\u00a0 \u00a0\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">Div<\/span>\u00a0ng-controller\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;TodoController&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">form<\/span>\u00a0&gt;<\/span><br \/>\nNew Todo:<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">input\u00a0<\/span><span class=\"kw3\">type\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;text&#8221;<\/span>\u00a0ng-model\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;newTodo&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">button<\/span>\u00a0ng-click\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;create ()&#8221;<\/span>\u00a0&gt;<\/span>\u00a0Add\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">button<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">form<\/span>\u00a0&gt;\u00a0<\/span><span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">ul<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">li<\/span>\u00a0ng-repeat\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo in todos&#8221;<\/span>\u00a0ng-\u00a0<span class=\"kw3\">class\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;{completed: todo.<\/span>completed} &#8221; &gt;<\/span><br \/>\n{todo.title}}<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">button<\/span>\u00a0ng-click\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;delete (todo, $ index)&#8221;<\/span>\u00a0&gt;<\/span>\u00a0Remove\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">button<\/span>\u00a0&gt;<\/span>\u00a0or mark as completed:<br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">input\u00a0<\/span><span class=\"kw3\">type\u00a0<\/span><span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;checkbox&#8221;<\/span>\u00a0ng-model\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo.completed&#8221;<\/span>\u00a0ng -change\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;todo.put ()&#8221;<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">li<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">ul<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">div<\/span>\u00a0&gt;<\/span><\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Now test the app at\u00a0http:\/\/127.0.0.1:1337\/index.html\u00a0.\u00a0Set Todos on, kill Todos, mark them as done.\u00a0You see that every action in the GUI is reflected.\u00a0Look between again\u00a0and\u00a0again on\u00a0http:\/\/127.0.0.1:1337\/api\/todos\u00a0and you see that the data are equally reflected in the REST API.\u00a0Opens between another browser and you can see the latest data.<\/p>\n<div id=\"attachment_3654\" class=\"wp-caption aligncenter\">\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\" wp-image-3654\" src=\"https:\/\/i0.wp.com\/www.senaeh.de\/wp-content\/uploads\/2013\/10\/127.0.0.1_1337_index.html.png?resize=307%2C163\" alt=\"\" width=\"307\" height=\"163\" \/><\/p>\n<p class=\"wp-caption-text\">Our finished web application<\/p>\n<\/div>\n<p>This ends my introduction to the MEAN stack.\u00a0It was certainly incomplete and incomplete, but you could quickly gain experience in a variety of different technologies.\u00a0They should serve as inspiration and a basic understanding.\u00a0However, it takes much more effort to gain a deeper understanding of the MEAN stack.\u00a0If you need further information or questions, just write in the comments.<\/p>\n<p>I hope I could provide you with my article series a small overview of the MEAN stack.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular After the last time we saw AngularJS only superficially, I<\/p>\n","protected":false},"author":4,"featured_media":1121,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,3],"tags":[],"class_list":["post-1120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-knowledgebase","category-tutorial-how-to"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/ON31nCTRba5GPcZj4elX_WhatsApp-Image-2016-11-21-at-22.22.07.jpeg?fit=600%2C340&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7ISfL-i4","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1089,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/setup-of-the-mean-stack\/","url_meta":{"origin":1120,"position":0},"title":"Setup of the MEAN stack","author":"Daniel Draga","date":"October 9, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In this article, we will lay out the basics for\u2026","rel":"","context":"In &quot;Tutorials&quot;","block_context":{"text":"Tutorials","link":"https:\/\/www.virtono.com\/community\/category\/tutorial-how-to\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/meanjs-1024x492.png?fit=1024%2C492&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1114,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/bower\/","url_meta":{"origin":1120,"position":1},"title":"Bower","author":"Shreyash Sharma","date":"October 15, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular Before we develop a web application with AngularJS, I introduce\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/bower-logo.png?fit=1024%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/bower-logo.png?fit=1024%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/bower-logo.png?fit=1024%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/bower-logo.png?fit=1024%2C900&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1082,"url":"https:\/\/www.virtono.com\/community\/knowledgebase\/definition-of-the-mean-stack\/","url_meta":{"origin":1120,"position":2},"title":"Definition of the MEAN stack","author":"Shreyash Sharma","date":"October 9, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular In a new article series, I would like to\u00a0offer\u00a0you an\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/Mean.jpg?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1095,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/npm\/","url_meta":{"origin":1120,"position":3},"title":"npm","author":"Daniel Draga","date":"October 10, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular npm\u00a0\u00a0is a package manager for managing modules.\u00a0That is, it makes\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/weekly-header-grace-hopper.png?fit=1200%2C498&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1105,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/mongoose\/","url_meta":{"origin":1120,"position":4},"title":"Mongoose","author":"Shreyash Sharma","date":"October 12, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular Mongoose\u00a0is a framework which is based on the\u00a0native MongoDB driver\u00a0and\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/mongoose.png?fit=370%2C200&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1102,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/express\/","url_meta":{"origin":1120,"position":5},"title":"express","author":"Daniel Draga","date":"October 12, 2017","format":false,"excerpt":"Series:\u00a0Introduction to the MEAN Stack Part 1: Definition of the MEAN stack Part 2:\u00a0Setup of the MEAN stack Part 3:\u00a0Node.js Part 4:\u00a0npm Part 5:\u00a0Connect Part 6:\u00a0Express Part 7:\u00a0MongoDB Part 8:\u00a0Mongoose Part 9:\u00a0REST Part 10:\u00a0Baucis Part 11:\u00a0Bower Part 12:\u00a0AngularJS Part 13:\u00a0Restangular Today I present to you the Framework\u00a0Express\u00a0, which is the\u2026","rel":"","context":"In &quot;Knowledgebase&quot;","block_context":{"text":"Knowledgebase","link":"https:\/\/www.virtono.com\/community\/category\/knowledgebase\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":2,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1120\/revisions"}],"predecessor-version":[{"id":1185,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1120\/revisions\/1185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media\/1121"}],"wp:attachment":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media?parent=1120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/categories?post=1120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/tags?post=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}