HTTP Client Module with Angular REST API and Deployment on Netlify

Why REST API

A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.

A RESTful API (also referred to as a RESTful web service) is based on representational state transfer (REST) technology, an architectural style and approach to communications often used in web services development.

Why Angular

Angular is an open-source software engineering framework used for building single-page web apps (SPA). Developers also use it to create animated menus for HTML web pages.

Angular uses the Model-View-Controller (MVC) architecture, which is used in web app development. This type of architecture consists of:

  • Model – the data structure that manages information and receives input from the controller
  • View – the representation of information
  • Controller – responds to input and interacts with the model
In the context of Angular, the model is the framework, while the view is HTML, and the control is JavaScript.
What is Http Client

Most front-end applications communicate with back-end services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: XMLHttpRequest interface and Fetch API.

The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling.

Let’s Get to Code

Download and install the following tools:

Environment Setup

Create a Model: We do this by going into the src/app folder, then we can create a model folder which will contain the objects instance of the data to be fetched from the external API.

Create a Service: We do this by going into the src/app folder, then we can create a service folder. In the service folder we will be making use of the HttpClient imported from @angular/common/http, user instance created in our model from earlier code and finally we made a GET request to our external API … Interesting?!

Next on the app.component.ts found in the app folder would need to be modified to contain imports of the UserService, User class and data returned from the API request.

Next is modify the changes to the app.module.ts file also in the app folder. This would include our imports and providers.

Finally we need to effect our changes on the app.component.html. This is what is been rendered to the users of the application . I have made modification to this as well and here I have the updated source codes.

Once all this set we can proceed to run ng build to help aid a minified build of the project. To get this project working on our local machine run ng serve. This starts the application development on our terminal and effects the changes on a port that can be accessible, usually on http://localhost:4200/.

PUBLISHING OUR APP ON GITHUB

Here what we need to do is to create a repository on GitHub and push our app to it. I have created my repository and pushed my source code here. For resource on how to create and work on GitHub I strongly recommend GitHub Guides and Git & GitHub Crash Course For Beginners.

Continous Integration on Netlify

To get started on Netlify you need to first sign up on the platform https://www.netlify.com/.

Next, click on the button “New site from Git“.

netlify create site

Since I worked with Github, I would need to select Github and also the repository. Once repository has been selected you can proceed to configure the build command ng build –prod. Also specify the publish directory dist/restapp-api (in our own case).

Finally click on “Deploy site” and a link is generated (in my own case: https://dazzling-wiles-0a1a50.netlify.com/).

🎉Viola the site is up and running! 🎉

CategoriesTags

Related Posts