{"id":1117,"date":"2017-10-15T06:46:24","date_gmt":"2017-10-15T03:46:24","guid":{"rendered":"https:\/\/community.virtono.com\/?p=1117"},"modified":"2020-06-10T16:52:28","modified_gmt":"2020-06-10T13:52:28","slug":"angularjs","status":"publish","type":"post","link":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/angularjs\/","title":{"rendered":"AngularJS"},"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>In today&#8217;s article we finally enter the client side of the MEAN stack.\u00a0While the database and the server are essential, the client is the only area that the visitor sees a page real and interacts with.\u00a0Especially in the last few years, this area has developed strongly in technology.\u00a0AngularJS\u00a0is one of the most advanced and popular client-side application\u00a0frameworks\u00a0.<span id=\"more-3649\"><\/span><\/p>\n<p>AngularJS is developed by Google and is based on the MVC architecture.\u00a0At this point, I presuppose a rudimentary prior knowledge of MVC.\u00a0Who does not know this concept, should be\u00a0read\u00a0here\u00a0.<\/p>\n<p>Like other modern MVC frameworks, AngularJS offers a so-called\u00a0<i>two-way data binding<\/i>\u00a0.\u00a0This means that the data in the model and in the view are held synchronously.\u00a0If you change data in the model, you see this effect immediately in the view.\u00a0Conversely, the same applies.\u00a0What this means exactly you will see later in practice.\u00a0In this case, a code line says more than a thousand words!\u00a0Two-way data binding has only one drawback: Once you are used to it, you can never again without programming\u00a0<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=\";)\" \/>It simplifies the code immensely!<br \/>\nThe data binding of AngularJS has a special feature.\u00a0Compared to other frameworks, any simple JavaScript object serves as a model.\u00a0Other frameworks like\u00a0Ember.jsinstead use a kind of proxy object with a special getter and setter API.\u00a0Without going into technical details, this usually means that the use of AngularJS is easier than other frameworks with two-way data binding, but AngularJS is somewhat more performance-hungry.\u00a0However, the speed disadvantage is only noticeable with complex models and should not be relevant to most applications.\u00a0The performance loss results because AngualrJS checks in the so-called\u00a0\u00a0<em>dirty checking<\/em>\u00a0whether a model has changed.\u00a0This check fails if you use a getter \/ setter API.<\/p>\n<p>AngularJS has two other concepts.\u00a0The framework uses\u00a0<i>dependency injection<\/i>.\u00a0This means that functions\u00a0\u00a0can be inserted into other functions\u00a0depending on\u00a0<em>their name<\/em>\u00a0.\u00a0This may sound odd and unusual, but it also simplifies the code.\u00a0Here, too, this property can later be explained more easily in the code itself.<br \/>\nAnother special feature is the use of HTML-based templates and the so-called directives.\u00a0A template is a view that can consist of placeholders for later data and also from logic.\u00a0In later applications the placeholders are filled with real data and corresponding logics are executed (eg &#8220;Show this button only for registered members&#8221;).\u00a0Other frameworks use string-based templates (eg handlebars), rather than HTML-based.\u00a0The use of HTML-based templates is easier to learn &#8211; one writes finally pure HTML &#8211; and is supported by modern IDEs by the house (syntax highlighting, etc.).\u00a0However, it is harder to render on the server side.\u00a0This would be relevant, for example, if JavaScript was deactivated by the user &#8211; even if this case is now rare.\u00a0A component of the HTML-based templates are the directives.\u00a0Simply put, it offers the possibility to develop your own HTML elements or to expand existing ones.\u00a0This makes it much easier to modify HTML documents.<\/p>\n<p>As you can see, AngularJS has some new concepts that have never been developed before.\u00a0You should ask yourself the legitimate question whether it is worth putting a lot of energy and effort into the learning of these concepts or not.\u00a0I answer this with a simple\u00a0<i>yes<\/i>\u00a0!\u00a0This has a good reason: these concepts may be new, but they will not simply disappear again.\u00a0Just at this moment, these concepts are under the umbrella of\u00a0<strong>Web Components<\/strong>standardized.\u00a0Web Components is a set of standards including, but not limited to, Object.observe, the Shadow DOM, ES6 Module, and Custom Elements.\u00a0What are directives for AngularJS are, for example, Custom Elements and Shadow DOM for Web Components.\u00a0As these standards are still under development, they are difficult to implement in real projects.\u00a0However, AngularJS already allows us to develop an understanding of these concepts and to use them in real projects.\u00a0AngularJS not only makes your work easier, but also prepares you for the future.<\/p>\n<p>Now, however, a few code examples showing the use of AngularJS.\u00a0Installed AngularJS in a new project folder with the 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 angular<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Now create one\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">index.html<\/span><\/code>\u00a0with the following content.\u00a0The example is almost completely\u00a0taken over\u00a0from the\u00a0official AngularJS page\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<\/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&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">head<\/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\/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=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">head<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">body<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">div<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">label<\/span>\u00a0&gt;<\/span>\u00a0Name:\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">label<\/span>\u00a0&gt;\u00a0<\/span><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;yourname&#8221;<\/span>\u00a0placeholder\u00a0<span class=\"sy0\">=\u00a0<\/span><span class=\"st0\">&#8220;Enter a name here&#8221;<\/span>\u00a0&gt;<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"kw2\">hr<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;<span class=\"kw2\">h1<\/span>\u00a0&gt;<\/span>\u00a0Hello {{yourName}}!\u00a0<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">h1<\/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><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">body<\/span>\u00a0&gt;\u00a0<\/span><br \/>\n<span class=\"sc2\">&lt;\u00a0<span class=\"sy0\">\/\u00a0<\/span><span class=\"kw2\">html<\/span>\u00a0&gt;<\/span><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>If you\u00a0<code class=\"codecolorer powershell default\"><span class=\"powershell\">index.html<\/span><\/code>\u00a0open\u00a0it\u00a0in a browser &#8211; you do not necessarily have to start a server &#8211; and enter your name into the input field, you can see that the text under the input field changes automatically.\u00a0This example shows two-way data binding in use.\u00a0For the same functionality you would need a lot more code lines with pure JavaScript or jQuery.\u00a0With AngularJS it is in effect three HTML lines!\u00a0First you will\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">html<\/span><\/code>notice the attribute\u00a0in the\u00a0element\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-app<\/span><\/code>\u00a0.\u00a0Attributes or elements with the prefix\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng<\/span><\/code>\u00a0are from AngularJS.\u00a0An\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-app<\/span><\/code>\u00a0on-\u00a0\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">html<\/span><\/code>element means that an AngularJS app should apply to the entire document.\u00a0It sets the\u00a0<em>root<\/em>\u00a0element for the AngularJS app.\u00a0The\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">ng-model<\/span><\/code>attribute in the<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">input<\/span><\/code>Element creates a two-way data binding to a model named\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">yourName<\/span><\/code>\u00a0.\u00a0(This model is automatically created by AngularJS.) As soon as the value in the input field changes, the value of the model also changes\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">yourName<\/span><\/code>.\u00a0This is the case with the placeholder\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">{{yourName}}<\/span><\/code>\u00a0in the\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">h1<\/span><\/code>element.\u00a0To\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">{{}}<\/span><\/code>\u00a0mark any placeholder data within an HTML template.\u00a0In this case, our template is also the actual document.\u00a0In\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">{{}}<\/span><\/code>\u00a0this case, the\u00a0identifier within the\u00a0model\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">yourName<\/span><\/code>\u00a0matches\u00a0our model\u00a0so that the value of\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">yourName<\/span><\/code>\u00a0is displayed\u00a0instead of the placeholder\u00a0.\u00a0(You could\u00a0<code class=\"codecolorer html4strict default\"><span class=\"html4strict\">{{}}<\/span><\/code>\u00a0also as a one-way data binding because it shows the value of the model but can not be changed at this point.)<\/p>\n<p>With this example we scrape only on the surface of AngularJS, but it should suffice for today&#8217;s article.\u00a0The next article will deal with AngularJS in more detail.\u00a0Next time, our largest code sample so far awaits us, so it is quite good that we are going to end this day<img data-recalc-dims=\"1\" decoding=\"async\" class=\"wp-smiley\" src=\"https:\/\/i0.wp.com\/www.senaeh.de\/wp-includes\/images\/smilies\/icon_smile.gif?w=750\" alt=\":)\" \/><\/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 In today&#8217;s article we finally enter the client side of<\/p>\n","protected":false},"author":4,"featured_media":1118,"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-1117","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\/angular_js.jpg?fit=1280%2C720&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7ISfL-i1","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1114,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/bower\/","url_meta":{"origin":1117,"position":0},"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":1117,"position":1},"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":1120,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/restangular\/","url_meta":{"origin":1117,"position":2},"title":"Restangular","author":"Shreyash Sharma","date":"October 16, 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 After the last time we saw AngularJS only superficially, I\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\/ON31nCTRba5GPcZj4elX_WhatsApp-Image-2016-11-21-at-22.22.07.jpeg?fit=600%2C340&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"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&resize=350%2C200 1x, 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&resize=525%2C300 1.5x"},"classes":[]},{"id":1089,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/setup-of-the-mean-stack\/","url_meta":{"origin":1117,"position":3},"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":1111,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/baucis\/","url_meta":{"origin":1117,"position":4},"title":"baucis","author":"Shreyash Sharma","date":"October 14, 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 today's article, we practically apply our theoretical knowledge about\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\/opensouthcode-microservicios-sobre-mean-stack-15-638.jpg?fit=638%2C359&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/opensouthcode-microservicios-sobre-mean-stack-15-638.jpg?fit=638%2C359&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.virtono.com\/community\/wp-content\/uploads\/2017\/10\/opensouthcode-microservicios-sobre-mean-stack-15-638.jpg?fit=638%2C359&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":1095,"url":"https:\/\/www.virtono.com\/community\/tutorial-how-to\/npm\/","url_meta":{"origin":1117,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1117","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=1117"}],"version-history":[{"count":2,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":1184,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/posts\/1117\/revisions\/1184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media\/1118"}],"wp:attachment":[{"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.virtono.com\/community\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}