{"id":394,"date":"2021-01-31T12:34:50","date_gmt":"2021-01-31T12:34:50","guid":{"rendered":"https:\/\/turtleflyblog.com\/?p=394"},"modified":"2022-02-28T09:24:18","modified_gmt":"2022-02-28T09:24:18","slug":"mimic-serverin-memory-web-api","status":"publish","type":"post","link":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/","title":{"rendered":"Mimic Server(In-Memory Web Api)"},"content":{"rendered":"\n

Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api<\/strong>\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.<\/p>\n\n\n\n

        If you want to install this package, you need DOS and enter the path where you like and do npm command.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

        You then need to import two packages HttpClientModule and InMemoryWebApiModule to AppModule.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

        Call forRoot() method to receive InMemoryDataService the service which is used to initialize memory database<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The diagram below shows AppData ts. To mimic remote http service, you have to implement InMemoryDbService to the class and create createDb()<\/strong> method.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Product class<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Remember to import AppData to AppModule<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then use rxjs library to perform http get method to get product list data.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Html page<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above content manifests how to use the package (In-Memory Web Api) to mimic data query process. Other than the query procedure, the action of data creation, modification and deletion can also be done by this package.<\/p>\n","protected":false},"excerpt":{"rendered":"

Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-programming-2"],"yoast_head":"\nMimic Server(In-Memory Web Api) - Who said turtle cannot fly<\/title>\n<meta name=\"description\" content=\"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mimic Server(In-Memory Web Api) - Who said turtle cannot fly\" \/>\n<meta property=\"og:description\" content=\"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Who said turtle cannot fly\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-31T12:34:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-28T09:24:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png\" \/>\n<meta name=\"author\" content=\"Joseph\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joseph\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/\",\"url\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/\",\"name\":\"Mimic Server(In-Memory Web Api) - Who said turtle cannot fly\",\"isPartOf\":{\"@id\":\"https:\/\/turtleflyblog.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png\",\"datePublished\":\"2021-01-31T12:34:50+00:00\",\"dateModified\":\"2022-02-28T09:24:18+00:00\",\"author\":{\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172\"},\"description\":\"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.\",\"breadcrumb\":{\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#breadcrumb\"},\"inLanguage\":\"en-AU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png?fit=365%2C37&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png?fit=365%2C37&ssl=1\",\"width\":365,\"height\":37},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/turtleflyblog.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mimic Server(In-Memory Web Api)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/turtleflyblog.com\/#website\",\"url\":\"https:\/\/turtleflyblog.com\/\",\"name\":\"Who said turtle cannot fly\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/turtleflyblog.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-AU\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172\",\"name\":\"Joseph\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/turtleflyblog.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g\",\"caption\":\"Joseph\"},\"sameAs\":[\"https:\/\/turtleflyblog.com\/\/\"],\"url\":\"https:\/\/turtleflyblog.com\/author\/joseph\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mimic Server(In-Memory Web Api) - Who said turtle cannot fly","description":"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/","og_locale":"en_US","og_type":"article","og_title":"Mimic Server(In-Memory Web Api) - Who said turtle cannot fly","og_description":"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.","og_url":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/","og_site_name":"Who said turtle cannot fly","article_published_time":"2021-01-31T12:34:50+00:00","article_modified_time":"2022-02-28T09:24:18+00:00","og_image":[{"url":"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png","type":"","width":"","height":""}],"author":"Joseph","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joseph","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/","url":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/","name":"Mimic Server(In-Memory Web Api) - Who said turtle cannot fly","isPartOf":{"@id":"https:\/\/turtleflyblog.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage"},"image":{"@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage"},"thumbnailUrl":"https:\/\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png","datePublished":"2021-01-31T12:34:50+00:00","dateModified":"2022-02-28T09:24:18+00:00","author":{"@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172"},"description":"Nowadays, most computer users retrieve the data they want by executing HTTP service to the server. However, in some scenarios you might not want to do such remote server connection. You just want to have a simple test. There are many fronted-side libraries which allow you to mimic http service. In Angular, there is a package, \u2018in-memory web api\u2019 that allows you to achieve this purpose. After you install this package, your http method will be intercepted by memory web api and do the response.","breadcrumb":{"@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#primaryimage","url":"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png?fit=365%2C37&ssl=1","contentUrl":"https:\/\/i0.wp.com\/turtleflyblog.com\/wp-content\/uploads\/2021\/01\/01-1.png?fit=365%2C37&ssl=1","width":365,"height":37},{"@type":"BreadcrumbList","@id":"https:\/\/turtleflyblog.com\/en\/2021\/01\/31\/mimic-serverin-memory-web-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/turtleflyblog.com\/en\/"},{"@type":"ListItem","position":2,"name":"Mimic Server(In-Memory Web Api)"}]},{"@type":"WebSite","@id":"https:\/\/turtleflyblog.com\/#website","url":"https:\/\/turtleflyblog.com\/","name":"Who said turtle cannot fly","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/turtleflyblog.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-AU"},{"@type":"Person","@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/130c2e1bdce4a8ba27bfe14c65988172","name":"Joseph","image":{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/turtleflyblog.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/539caa7bc4af75cd4ab82fc8d51935da?s=96&d=mm&r=g","caption":"Joseph"},"sameAs":["https:\/\/turtleflyblog.com\/\/"],"url":"https:\/\/turtleflyblog.com\/author\/joseph\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":1,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":661,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/posts\/394\/revisions\/661"}],"wp:attachment":[{"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/turtleflyblog.com\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}