Add HTTP communication to your app

 

Step 1 - Configure the JSON server :

  • JSON Server is an  open source tool used to create mock REST APIs. You'll use it to serve the housing location data that is currently stored in the housing service.
  1.  Install json-server from  npm  by using the following command.

                                     npm install -g json-server

  • In the root directory of your project, create a file called db.json. This is where you will store the data for the json-server.

  • Open db.json  and copy the following code into the file.


{
  "locations": [
  {
  "id": 0,
  "name": "Acme Fresh Start Housing",
  "city": "Chicago",
  "state": "IL",
  "photo": "https://angular.io/assets/images/tutorials/faa/bernard-
hermant-CLKGGwIBTaY-unsplash.jpg",
  "availableUnits": 4,
  "wifi": true,
  "laundry": true
  },
  {
  "id": 1,
  "name": "A113 Transitional Housing",
  "city": "Santa Monica",
  "state": "CA",
  "photo": "https://angular.io/assets/images/tutorials/faa/brandon-
griggs-wR11KBaB86U
-unsplash.jpg",
  "availableUnits": 0,
  "wifi": false,
  "laundry": true
  },
  {
  "id": 2,
  "name": "Warm Beds Housing Support",
  "city": "Juneau",
  "state": "AK",
  "photo": "https://angular.io/assets/images/tutorials/faa/i-do-nothing-but-love
-lAyXdl1-Wmc-unsplash.jpg",
  "availableUnits": 1,
  "wifi": false,
  "laundry": false
  },
  {
  "id": 3,
  "name": "Homesteady Housing",
  "city": "Chicago",
  "state": "IL",
  "photo": "https://angular.io/assets/images/tutorials/faa/ian-macdonald-
W8z6aiwfi1E-unsplash.jpg",
  "availableUnits": 1,
  "wifi": true,
  "laundry": false
  },
  {
  "id": 4,
  "name": "Happy Homes Group",
  "city": "Gary",
  "state": "IN",
  "photo": "https://angular.io/assets/images/tutorials/faa/krzysztof-hepner-
978RAXoXnH4-unsplash.jpg",
  "availableUnits": 1,
  "wifi": true,
  "laundry": false
  },
  {
  "id": 5,
  "name": "Hopeful Apartment Group",
  "city": "Oakland",
  "state": "CA",
  "photo": "https://angular.io/assets/images/tutorials/faa/r-architecture-
JvQ0Q5IkeMM-unsplash.jpg",
  "availableUnits": 2,
  "wifi": true,
  "laundry": true
  },
  {
  "id": 6,
  "name": "Seriously Safe Towns",
  "city": "Oakland",
  "state": "CA",
  "photo": "https://angular.io/assets/images/tutorials/faa/phil-hearing-
IYfp2Ixe9nM-unsplash.jpg",
  "availableUnits": 5,
  "wifi": true,
  "laundry": true
  },
  {
  "id": 7,
  "name": "Hopeful Housing Solutions",
  "city": "Oakland",
  "state": "CA",
  "photo": "https://angular.io/assets/images/tutorials/faa/r-architecture-
GGupkreKwxA-unsplash.jpg",
  "availableUnits": 2,
  "wifi": true,
  "laundry": true
  },
  {
  "id": 8,
  "name": "Seriously Safe Towns",
  "city": "Oakland",
  "state": "CA",
  "photo": "https://angular.io/assets/images/tutorials/faa/saru-robert-
9rP3mxf8qWI-unsplash.jpg",
  "availableUnits": 10,
  "wifi": false,
  "laundry": false
  },
  {
  "id": 9,
  "name": "Capital Safe Towns",
  "city": "Portland",
  "state": "OR",
  "photo": "https://angular.io/assets/images/tutorials/faa/webaliser-_
TPTXZd9mOo-unsplash.jpg",
  "availableUnits": 6,
  "wifi": true,
  "laundry": true
  }
  ]
  }

Comments

Post a Comment

Popular posts from this blog

JAVASCRIPT interview question

                                                              java script interview question  1.What is JavaScript? JavaScript is a high-level, interpreted programming language used to create dynamic and interactive web pages. 2.What are the different data types in JavaScript? JavaScript supports several data types, including number, string, boolean, object, function, and undefined. Additionally, there's a special data type called null. 3.What is the difference between == and === in JavaScript? == is used for loose equality comparison, which means it only checks if the values are equal. === is used for strict equality comparison, which not only checks if the values are equal but also checks if they have the same data type. 4.What is the difference between nu...
Read more

Angular full tutorial

  Understanding the Basics What is Angular? Angular is a framework for building web applications. It provides tools and libraries that help you build robust, maintainable, and scalable applications. It follows the Model-View-Controller (MVC) architecture, which helps separate concerns in your code, making it more organized and easier to manage. 1. Setup Environment: Install Node.js : Angular requires Node.js to run. Download and install it from nodejs.org . Verify Installation: Open Terminal. Type node -v and npm -v to check the installed versions. node -v  - Node.js installed. Node.js is a JavaScript runtime used for running JavaScript code outside of a browser, like on servers or for building tools. npm -v - (Node Package Manager) installed.   npm is used to manage packages (libraries or tools) that you can use in your Node.js projects. Install Angular CLI :  The Angular CLI (Command Line Interface) helps with creating and managing Angular proj...
Read more

CSS interview question

                                                  C ss interview question  1.What is CSS?           CSS stands for Cascading Style Sheets. It's a style sheet language used for describing the presentation of a document written in HTML. 2.What are the different ways to include CSS in a web page?                CSS can be included in a web page using three methods: Inline CSS      : Using the style attribute within HTML elements. Internal CSS  : Including CSS within <style> tags in the <head> section of an HTML document.        External CSS: Linking an external CSS file using the <link> tag in the <head> section of an HTML document. 3.What is the difference be...
Read more