{"id":6426,"date":"2021-03-13T03:02:12","date_gmt":"2021-03-13T03:32:12","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=6426"},"modified":"2025-05-07T17:04:08","modified_gmt":"2025-05-07T17:34:08","slug":"angular-from-scratch-tutorial-step-6-service-and-dependency-injection","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=6426","title":{"rendered":"Angular From Scratch Tutorial &#8211; Step 6: Service And Dependency Injection"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6389\">PREVIOUS: Angular From Scratch Tutorial &#8211; Step 5: Directives<\/a><\/p>\n<p>NEXT:&nbsp; IN PROGRESS, SOON!&nbsp; \ud83d\ude42<\/p>\n<h2><\/h2>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_73 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69fc9e4a6c5f6\" class=\"ez-toc-cssicon-toggle-label\"><span class><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\" \/><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\" \/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-69fc9e4a6c5f6\" checked aria-label=\"Toggle\"><nav><ul class=\"ez-toc-list ez-toc-list-level-1 \"><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#TARGET\" title=\"TARGET\">TARGET<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Source_CodeDownload\" title=\"Source Code\/Download\">Source Code\/Download<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#REFACTORING_STEP3_%E2%80%93_CREATING_AN_INDEX_PAGE_Routing\" title=\"REFACTORING STEP3 &#8211; CREATING AN INDEX PAGE (Routing)\">REFACTORING STEP3 &#8211; CREATING AN INDEX PAGE (Routing)<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#REFACTORING_THE_HOME_PAGE\" title=\"REFACTORING THE HOME PAGE\">REFACTORING THE HOME PAGE<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Creating_the_index\" title=\"Creating the index\">Creating the index<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Refactoring_the_cards_to_create_an_index\" title=\"Refactoring the cards to create an index\">Refactoring the cards to create an index<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#ADJUSTING_THE_BINDING_PAGE\" title=\"ADJUSTING THE BINDING PAGE\">ADJUSTING THE BINDING PAGE<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#CREATING_THE_SERVICE_FOR_A_FAKE_IN-MEMORY_DATABASE\" title=\"CREATING THE SERVICE FOR A FAKE IN-MEMORY DATABASE\">CREATING THE SERVICE FOR A FAKE IN-MEMORY DATABASE<\/a><ul class=\"ez-toc-list-level-3\"><li class=\"ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#ANGULAR_AND_THE_MVC_MODEL\" title=\"ANGULAR AND THE MVC MODEL\">ANGULAR AND THE MVC MODEL<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#MODELING_THE_DATABASE\" title=\"MODELING THE DATABASE\">MODELING THE DATABASE<\/a><ul class=\"ez-toc-list-level-4\"><li class=\"ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Creating_person_class\" title=\"Creating person class\">Creating person class<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Creating_the_Persons_registry\" title=\"Creating the Person&#8217;s registry\">Creating the Person&#8217;s registry<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-4\"><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Creating_person-table_class\" title=\"Creating person-table class\">Creating person-table class<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#CREATING_THE_SERVICE_CLASS\" title=\"CREATING THE SERVICE CLASS\">CREATING THE SERVICE CLASS<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-3\"><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#CREATING_THE_SERVICES_CLIENT_%E2%80%93_THE_COMPONENT\" title=\"CREATING THE SERVICE&#8217;S CLIENT &#8211; THE COMPONENT\">CREATING THE SERVICE&#8217;S CLIENT &#8211; THE COMPONENT<\/a><\/li><\/ul><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#CONCLUSIONS\" title=\"CONCLUSIONS\">CONCLUSIONS<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#NEXT\" title=\"NEXT\">NEXT<\/a><\/li><li class=\"ez-toc-page-1 ez-toc-heading-level-2\"><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/ultering.com\/it4us\/?p=6426\/#Credits\" title=\"Credits\">Credits<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"TARGET\"><\/span>TARGET<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using it, it turns necessary to do a &#8220;disk swap&#8221; bringing from &#8220;disk&#8221; to your &#8220;memory&#8221; again. \ud83d\ude42<\/p>\n<p>If it is your first Angular approach, or you are a newbie, it is recommended to go first to the Angular&#8217;s documentation. After, this page will serve you as a summary for fast referencing and revision.<\/p>\n<p>This post bring basic approaches handling Dependency Injection and Services.<br>\nThe tutorial emulates an in-memory fake database, using class-model approach to create a database service.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Source_CodeDownload\"><\/span>Source Code\/Download<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For more details, the source code may be found on <a href=\"https:\/\/github.com\/alsdias\/afsTutorial\">GitHub<\/a>, &#8220;<a href=\"https:\/\/github.com\/alsdias\/afsTutorial\/tags\">step6<\/a>&#8221; tag (includes step1 up to step3).<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"REFACTORING_STEP3_%E2%80%93_CREATING_AN_INDEX_PAGE_Routing\"><\/span>REFACTORING STEP3 &#8211; CREATING AN INDEX PAGE (Routing)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The tutorial is growing, as it is a real project in our professional life.<br>\nThe initial steps took the most simple approach and now it is time to create an index to give to the project better organization and navigation.<\/p>\n<p>A central index may contain navigation to specific pages, each one implemented in its specific component.<\/p>\n<p>To create the page for &#8220;binding&#8221; subject, it is created the &#8220;binding&#8221; component, as follows:<\/p>\n<p>ng g c binding<\/p>\n<p>Move the content that shall be in the specific module from app.component.html and app.component.ts to the respective new component&#8217;s files.<br>\nMake sure to not override the class definition, so split the copies to respect that.<\/p>\n<p>Create a new path on app-routing.module.ts:<\/p>\n<div>\n<pre class>import { BindingComponent } from '.\/binding\/binding.component';\n\nconst routes: Routes = [\n  {path: '',   redirectTo: 'index',  pathMatch: 'full'},\n  {path: 'ori-init-page', component: OriginalInitPageComponent },\n  {path: 'binding', component: BindingComponent }\n];\n\nThe router directive must be on the entry point, in this example, it is the app\\app.component.html page that shall contain:<\/pre>\n<div>\n<pre class>&lt;router-outlet&gt;&lt;\/router-outlet&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<\/div>\n<p>Start the application:<\/p>\n<p>npm start<\/p>\n<\/div>\n<p>Point to localhost:4200\/binding:<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6445\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01.jpg\" alt width=\"1000\" height=\"572\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01-300x172.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01-768x439.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6445 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20572%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"572\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20572%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01-300x172.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01-768x439.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_01.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"REFACTORING_THE_HOME_PAGE\"><\/span>REFACTORING THE HOME PAGE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The content of this page was moved to binding package.<br>\nNow, it is time to create its new content to hold the tutorial&#8217;s index.<\/p>\n<p>&nbsp;<\/p>\n<p>Copy from &#8220;app.component.html&#8221;:<\/p>\n<pre class>&lt;div class=\"d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow\"&gt;\n  &lt;h5 class=\"my-0 mr-md-auto font-weight-normal\"&gt;{{title}}&lt;\/h5&gt;\n  &lt;nav class=\"my-2 my-md-0 mr-md-3\"&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Features&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Enterprise&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Support&lt;\/a&gt;\n  &lt;\/nav&gt;\n  &lt;a class=\"btn btn-outline-primary\" href=\"#\"&gt;Sign up&lt;\/a&gt;\n&lt;\/div&gt;\n&lt;div class=\"pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center\"&gt;\n  &lt;h1 class=\"display-4\"&gt;&lt;img [src]=\"siteBadge\"&gt;&lt;\/h1&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>and paste in &#8220;app.component.html&#8221;, like this:<\/p>\n<pre class>&lt;div class=\"d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow\"&gt;\n  &lt;h5 class=\"my-0 mr-md-auto font-weight-normal\"&gt;{{title}}&lt;\/h5&gt;\n  &lt;nav class=\"my-2 my-md-0 mr-md-3\"&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Features&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Enterprise&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Support&lt;\/a&gt;\n  &lt;\/nav&gt;\n  &lt;a class=\"btn btn-outline-primary\" href=\"#\"&gt;Sign up&lt;\/a&gt;\n&lt;\/div&gt;\n&lt;div class=\"pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center\"&gt;\n  &lt;h1 class=\"display-4\"&gt;&lt;img [src]=\"siteBadge\"&gt;&lt;\/h1&gt;\n&lt;\/div&gt;\n\n\n&lt;router-outlet&gt;&lt;\/router-outlet&gt;\n<\/pre>\n<p>Copy from &#8220;binding.component.ts&#8221;:<\/p>\n<pre class>  title = 'afsTutorial';\n  siteBadge = '..\/assets\/img\/afstutorial_main_image.jpg';\n<\/pre>\n<p>&nbsp;<\/p>\n<p>And past to &#8220;app.component.ts&#8221;:<\/p>\n<pre class>export class AppComponent implements OnInit {\n\n  title = 'afsTutorial';\n  siteBadge = '..\/assets\/img\/afstutorial_main_image.jpg';\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Pointing to localhost:4200, we have:<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6452\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02.jpg\" alt width=\"960\" height=\"447\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02.jpg 960w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02-300x140.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02-768x358.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6452 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20447%22%3E%3C%2Fsvg%3E\" alt width=\"960\" height=\"447\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20960%20447%22%3E%3C%2Fsvg%3E 960w\" sizes=\"(max-width: 960px) 100vw, 960px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02.jpg 960w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02-300x140.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02-768x358.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_02.jpg\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creating_the_index\"><\/span>Creating the index<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Copy the &#8220;cards&#8221; from &#8220;binding.component.html&#8221;:<\/p>\n<p>&nbsp;<\/p>\n<pre class>&lt;div class=\"container\"&gt;\n  &lt;div class=\"card-deck mb-12 text-center\"&gt;\n      &lt;div class=\"card mb-6 box-shadow\"&gt;\n          &lt;div class=\"card-header\"&gt;\n            &lt;h4 class=\"my-0 font-weight-bold\"&gt;{{1 + 1}}\" style=\"background-color:#D2D2D2\"&lt;\/h4&gt;\n          &lt;\/div&gt;\n          &lt;div class=\"card-body\"&gt;\n            &lt;table cellpadding=\"10px\" cellspacing=\"10px\"&gt;\n              &lt;tr&gt;\n                &lt;th&gt;ISBN&lt;\/th&gt;\n                &lt;th&gt;Title&lt;\/th&gt;\n                &lt;th&gt;Price&lt;\/th&gt;\n              &lt;\/tr&gt;\n              &lt;tr&gt;\n                &lt;td&gt;3476896&lt;\/td&gt;\n                &lt;td&gt;Angular for Now&lt;\/td&gt;\n                &lt;td&gt;$53&lt;\/td&gt;\n              &lt;\/tr&gt;\n            &lt;\/table&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"card mb-6 box-shadow\"&gt;\n          &lt;div class=\"card-header\"&gt;\n              &lt;h4 class=\"my-0 font-weight-bold\"&gt;Property Binding Example Using a Button&lt;\/h4&gt;\n          &lt;\/div&gt;\n          &lt;div class=\"card-body\"&gt;\n            &lt;p&gt;The button is disabled because its value is bound to the property buttonDisabled=true.&lt;\/p&gt;\n            &lt;button [disabled]=\"buttonDisabled\"&gt;Button Enable\/Disable property binding&lt;\/button&gt;\n          &lt;\/div&gt;\n      &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<p>We get:<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6453\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03.jpg\" alt width=\"1000\" height=\"489\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03-300x147.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03-768x376.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6453 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20489%22%3E%3C%2Fsvg%3E\" alt width=\"1000\" height=\"489\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20489%22%3E%3C%2Fsvg%3E 1000w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03.jpg 1000w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03-300x147.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03-768x376.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_03.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Refactoring_the_cards_to_create_an_index\"><\/span>Refactoring the cards to create an index<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6457\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04.jpg\" alt width=\"959\" height=\"562\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04.jpg 959w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04-300x176.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04-768x450.jpg 768w\" sizes=\"(max-width: 959px) 100vw, 959px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6457 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20959%20562%22%3E%3C%2Fsvg%3E\" alt width=\"959\" height=\"562\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20959%20562%22%3E%3C%2Fsvg%3E 959w\" sizes=\"(max-width: 959px) 100vw, 959px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04.jpg 959w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04-300x176.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04-768x450.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_04.jpg\"><\/p>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"ADJUSTING_THE_BINDING_PAGE\"><\/span>ADJUSTING THE BINDING PAGE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>&nbsp;<\/p>\n<p>There some small things to be done on the binding.component.html page.<br>\nWe need to remove the menu, removing the following code:<\/p>\n<pre class>&lt;div class=\"d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow\"&gt;\n  &lt;h5 class=\"my-0 mr-md-auto font-weight-normal\"&gt;{{title}}&lt;\/h5&gt;\n  &lt;nav class=\"my-2 my-md-0 mr-md-3\"&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Features&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Enterprise&lt;\/a&gt;\n      &lt;a class=\"p-2 text-dark\" href=\"#\"&gt;Support&lt;\/a&gt;\n  &lt;\/nav&gt;\n  &lt;a class=\"btn btn-outline-primary\" href=\"#\"&gt;Sign up&lt;\/a&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>Also, it was created a new logo for subtitles.<\/p>\n<p>&nbsp;<\/p>\n<p>Final result when we point to http:\/\/localhost:4200\/binding:<\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6459\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05.jpg\" alt width=\"937\" height=\"946\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05.jpg 937w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05-297x300.jpg 297w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05-768x775.jpg 768w\" sizes=\"(max-width: 937px) 100vw, 937px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6459 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20937%20946%22%3E%3C%2Fsvg%3E\" alt width=\"937\" height=\"946\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20937%20946%22%3E%3C%2Fsvg%3E 937w\" sizes=\"(max-width: 937px) 100vw, 937px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05.jpg 937w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05-297x300.jpg 297w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05-768x775.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_05.jpg\"><\/p>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"CREATING_THE_SERVICE_FOR_A_FAKE_IN-MEMORY_DATABASE\"><\/span>CREATING THE SERVICE FOR A FAKE IN-MEMORY DATABASE<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"ANGULAR_AND_THE_MVC_MODEL\"><\/span>ANGULAR AND THE MVC MODEL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span data-preserver-spaces=\"true\">A task becomes simple when we split it into smaller parts.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In an MVC (model, view, control) project, the artifacts (classes, etc.) are structured into three main layers.<br>\n<\/span><span data-preserver-spaces=\"true\">Angular doesn&#8217;t have strict compliance to the MVC structure but in its way applies the same principles.<br>\n<\/span><span data-preserver-spaces=\"true\">When a &#8220;something&#8221; component is created, there are the&nbsp;<\/span><em><span data-preserver-spaces=\"true\">something.component.ts<\/span><\/em><span data-preserver-spaces=\"true\">&nbsp;and&nbsp;<\/span><em><span data-preserver-spaces=\"true\">something.component.html<\/span><\/em><span data-preserver-spaces=\"true\">&nbsp;files under the&nbsp;<\/span><em><span data-preserver-spaces=\"true\">something<\/span><\/em><span data-preserver-spaces=\"true\">&nbsp;folder.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The &#8220;.html&#8221; file represents the view layer and the &#8220;.ts&#8221; file represents the model layer.<br>\n<\/span><span data-preserver-spaces=\"true\">As you may notice, the view and model layers are scattered into their respective folders (&#8220;packages&#8221;) throughout the project.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">In a simple project, like this, the control layer may be represented by one file, the &#8220;app-routing.module.ts&#8221;.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Anyway, the MVC concept is embedded into Angular&#8217;s way of doing things.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Usually, mapping the domain&#8217;s entities is one of the first approaches when beginning a project.<br>\n<\/span><span data-preserver-spaces=\"true\">That way, we shall create first the classes that model the database.<br>\n<\/span><span data-preserver-spaces=\"true\">After that, we may think about the service that handles those classes to expose the service&#8217;s interfaces.<br>\n<\/span><span data-preserver-spaces=\"true\">Eventually, the service&#8217;s client is usually a component or another service.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The database classes belong to the model\/persistence layer.<br>\n<\/span><span data-preserver-spaces=\"true\">The entities mapped from the domain belong to the model layer or model\/entities layer (names vary but usually round up the same meaning).<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">A domain has its rules that belong to the model\/business.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">This structure may not be represented explicitly through the folder&#8217;s structure but the concept is still there and helps us to guide ourselves during the project&#8217;s implementation.<br>\n<\/span><span data-preserver-spaces=\"true\">Other languages, like Java, may have a more strict way of doing things remaining more adherent to the MVC model.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Anyway, the key point is respect to the concept that you apply to the project because this is what leads us to keep the project well structured, organized, and maintainable.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">&nbsp;<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"MODELING_THE_DATABASE\"><\/span>MODELING THE DATABASE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An in-memory database is something as sophisticated as it is a conventional database, except that its data is persisted not on disks but on the server&#8217;s memory.<br>\nOur database is very simple as it shall be, but I couldn&#8217;t call it a mock, because it is not.<br>\nIt may offer a CRUD operation using OO, working with classes saved in memory, resembling an in-memory Object database.<br>\nOur target here is to train using classes with Angular and TypeScript that are handled by an Angular service.<\/p>\n<p>The database is modeled as an object&#8217;s table compounded by registries.<br>\nA table&#8217;s registry has an ID and the respective object.<br>\nThe object materializes a domain concept, and in this example, we use the Person entity.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Creating_person_class\"><\/span>Creating person class<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>It models a person entity.<br>\nRun:<br>\nng g c model\/person<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Then add the following code:<\/strong><\/p>\n<pre class>export class Person {\n\n  public name: string;\n  public age: number;\n  public doc: string;\n\n  constructor(name: string, age: number, doc: string){\n      this.name = name;\n      this.age = age;\n      this.doc = doc;\n  }\n\n  print(): string {\n    return this.name + ', ' + this.age + ',' + this.doc;\n  }\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Creating_the_Persons_registry\"><\/span><strong>Creating the Person&#8217;s registry<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>It models a person&#8217;s table registry.<br>\nRun:<br>\nng g c model\/person-registry<\/p>\n<pre class><\/pre>\n<p><strong>After that, add the following code:<\/strong><\/p>\n<pre class>import { Person } from '.\/person.model';\n\nexport class PersonRegistry {\n  id: number;\n  person: Person;\n  isDeleted: boolean;\n\n  constructor(id: number, person: Person) {\n    this.id = id;\n    this.person = person;\n    this.isDeleted = false;\n  }\n\n  static genFakeRegistries(): PersonRegistry[] {\n    const registries = [];\n    registries.push(new PersonRegistry(1, new Person('Mary Doe', 30, '123 123')));\n    registries.push(new PersonRegistry(2, new Person('John Doe', 31, '123 123')));\n    registries.push(new PersonRegistry(3, new Person('Helen Doe', 12, '123 123')));\n    return registries;\n  }\n\n  print(): string {\n    return this.id + ', ' + this.person.print() + ', ' + this.isDeleted;\n  }\n\n}\n<\/pre>\n<p>Notice that there is a static method that populates the table with some initial data for the purposes of this tutorial.<br>\nTo each new Person object it is associated an ID.<br>\nWhy is the idDeleted attribute for?<br>\nThis database has logial deletion. When isDeleted=true, the data is considered deleted and the user will not see it.<br>\nThe data itself remains on the database for security purposes, to be audited and etc.<\/p>\n<p>&nbsp;<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Creating_person-table_class\"><\/span>Creating person-table class<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>It models the &#8220;table&#8221;.<br>\nRun:<br>\nng g c model\/person-table<\/p>\n<p>&nbsp;<\/p>\n<p><strong>After creation, add the following code:<\/strong><\/p>\n<pre class>import { PersonRegistry } from '.\/person-registry.model';\n\nexport class PersonTable {\n\n  personRegistries: PersonRegistry[];\n\n  constructor() {\n    \/\/ populates\n    this.personRegistries = PersonRegistry.genFakeRegistries();\n  }\n\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CREATING_THE_SERVICE_CLASS\"><\/span>CREATING THE SERVICE CLASS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Run:<br>\nng g s model\/db<\/p>\n<p><strong>Add the code:<\/strong><\/p>\n<pre class>import { Injectable, OnInit  } from '@angular\/core';\nimport { PersonRegistry } from '.\/person-registry.model';\nimport { PersonTable } from '.\/person-table.model';\nimport { Person } from '.\/person.model';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class DbService {\n\n  personTable: PersonTable;\n\n  constructor() {\n    this.personTable = new PersonTable();\n  }\n\n  allPersons(): PersonRegistry[] {\n    return this.personTable.personRegistries;\n  }\n\n  findPersonById(id: number): PersonRegistry {\n    let pr = null;\n    for (const idx in this.personTable.personRegistries) {\n      if (this.personTable.personRegistries[idx].id === id) {\n        pr = this.personTable.personRegistries[idx];\n      }\n    }\n    return pr;\n  }\n\n  insert(name: string, age: number, doc: string): void {\n    this.personTable.personRegistries.push(new PersonRegistry(2, new Person(name, age, doc)));\n  }\n\n}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>In a service class, an important thing to highlight is the @Injectable annotation:<\/p>\n<pre class>@Injectable({\n  providedIn: 'root'\n})\n<\/pre>\n<p>The &#8220;providedIn: root&#8221; turns the service visible throughout the application and the @Injectable annotation enables to inject the service into a component.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CREATING_THE_SERVICES_CLIENT_%E2%80%93_THE_COMPONENT\"><\/span>CREATING THE SERVICE&#8217;S CLIENT &#8211; THE COMPONENT<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Generate the service&#8217;s client component:<br>\nng g c fake-db<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Add the code to the fake-db.component.ts file:<\/strong><\/p>\n<pre class>import { Component, OnInit } from '@angular\/core';\nimport { DbService } from '..\/model\/db.service';\nimport { PersonRegistry } from '..\/model\/person-registry.model';\nimport { Person } from '..\/model\/person.model';\n\n@Component({\n  selector: 'app-fake-db',\n  templateUrl: '.\/fake-db.component.html',\n  styleUrls: ['.\/fake-db.component.css']\n})\nexport class FakeDbComponent implements OnInit {\n\n  siteBadge = '..\/assets\/img\/sitebadge_step6.jpg';\n  db: DbService;\n  persons: string[];\n  todaydate: Date;\n\n  constructor(private dbsvc: DbService) {\n    this.db = dbsvc;\n    this.allPersons();\n  }\n\n  ngOnInit(): void {\n  }\n\n  allPersons(): void {\n    this.persons = [];\n    const regs = this.db.allPersons();\n    regs.forEach(reg =&gt; { this.persons.push(reg.print()); });\n  }\n\n}\n\n<\/pre>\n<p>Notice that &#8220;siteBadge&#8221; defines the view&#8217;s subjects (the page&#8217;s badge).<br>\nThe constructor is responsible for initializing the attributes.<br>\nThe allPersons() method uses the service to obtain the data and initialize persons. This belongs to the business layer.<br>\nAn example of a simple business rule that loads all persons to enable their visualization to the user.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Add the code to the fake-db.component.html file:<\/strong><\/p>\n<pre class>&lt;div class=\"pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center\" style=\"margin-top: 90px;\"&gt;\n  &lt;h1 class=\"display-4\"&gt;&lt;img [src]=\"siteBadge\"&gt;&lt;\/h1&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"card mb-12 box-shadow spacer\" style=\"margin-top: 50px;\"&gt;\n  &lt;div class=\"card-header\"&gt;\n      &lt;h4 class=\"my-0 font-weight-bold\"&gt;Example Using Fake In-memory Database&lt;\/h4&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"card-body\" style=\"margin-top: 40px;\"&gt;\n      &lt;h5&gt;ID, Name, Age, Logical deletion&lt;\/h5&gt;\n      &lt;p&gt;----------------------------------------------&lt;\/p&gt;\n      &lt;h6 *ngFor=\"let person of persons\"&gt;{{person}}&lt;\/h6&gt;\n    &lt;br \/&gt;&lt;br \/&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Result:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6463\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06.jpg\" alt width=\"1087\" height=\"930\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06.jpg 1087w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06-300x257.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06-768x657.jpg 768w\" sizes=\"(max-width: 1087px) 100vw, 1087px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-6463 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201087%20930%22%3E%3C%2Fsvg%3E\" alt width=\"1087\" height=\"930\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201087%20930%22%3E%3C%2Fsvg%3E 1087w\" sizes=\"(max-width: 1087px) 100vw, 1087px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06.jpg 1087w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06-300x257.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06-768x657.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/afstutorial_step6_06.jpg\"><\/p>\n<h2><\/h2>\n<h2><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"CONCLUSIONS\"><\/span>CONCLUSIONS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>The objective of this tutorial is to learn how to create an Angular&#8217;s service, but as important as to understand how it is done, also it is to comprehend why it is done in that way.<\/strong><\/p>\n<p><strong>Getting the concepts involved in its architecture leads us to clear and organize our minds to create a good maintainable code. We get the answer to the questions:<\/strong><\/p>\n<p><strong>Where do I write this piece of code?<\/strong><\/p>\n<p><strong>How are classes related?<\/strong><\/p>\n<p><strong>Which order do I follow to create and instantiate the classes?<\/strong><\/p>\n<p><strong>Where and how do I create each class, component, where do they belong to the structure?<\/strong><\/p>\n<p><strong>Right answers to such questions are vital for good programming.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"NEXT\"><\/span>NEXT<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=7175\">Angular From Scratch Tutorial &#8211; Index<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6438\">NEXT: Angular From Scratch Tutorial &#8211; Step 7: Forms<\/a><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=6389\">PREVIOUS: Angular From Scratch Tutorial &#8211; Step 5: Directives<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Credits\"><\/span>Credits<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/angular.io\/guide\/dependency-injection\">Angular documentation &#8211; Dependency Injection in Angular<\/a><\/p>\n<p>&nbsp;<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Angular From Scratch Tutorial &#8211; Index PREVIOUS: Angular From Scratch Tutorial &#8211; Step 5: Directives NEXT:&nbsp; IN PROGRESS, SOON!&nbsp; \ud83d\ude42 TARGET The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=6426\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;Angular From Scratch Tutorial &#8211; Step 6: Service And Dependency Injection&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[192,26],"tags":[],"class_list":["post-6426","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6426"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6426\/revisions"}],"predecessor-version":[{"id":7319,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/6426\/revisions\/7319"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}