Creating A Reactive Data Source in Angular 4 – Part 2

WRITTEN BY GARETH DUNNE @JSDIARIES

In this part of the tutorial we will be focusing on our API calls and how they interact with the brewery API.

Again, if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

You can see the final version of what my beer app is here. I took the designs and styles of this application from Coursetro’s MEAN stack course and was able to implement a service for interactions with the data and the Brewery API.

Proxy

First up, in order to get data from the Brewery API we want to enable CORS (Cross Origin Resource Sharing) in our browser.

To accomplish this we have two choices:

The easiest option here is to install a CORS Chrome extension here.

This will enable you to perform cross origin shares in Chrome without having to setup a local proxy. This is handy for testing an application locally but would obviously fall short if pushed to a production environment or hosted externally.

The second option, which is something I would encourage you to do is to setup a local proxy. This will allow you to easily enable cross origin resource sharing for all your browsers and doesn’t take long to create.

To do this lets first create a proxy.config.json file in the root of our project directory.

Proxy file location
Proxy file location

This is our proxy API json object. It contains properties that allows our calls to send and receive data to the Brewery API.

However, it won’t work without running the proxy file alongside our application. So we will need to execute this command to start it alongside our application.

Beer Model

Next we need to create a beer view model. This will basically act as an interface for our retrieved data. Properties such as name, description etc will feature here.

In your app folder create a file called beer.ts and put in the following.

We can now import our Beer class to any of our components to reference data retrieved from the Beer API. This is

Get Beers

We now want to implement a method that retrieves all beers from our Beers API. Open up beer.service.ts and change it to the following.

So we now have a getBeers() method and a handleError method for our beers API call.

In our if condition we first check if this.result variable already has a value. This is an important step because our service shares permanent data throughout our application so if the application has already been loaded then there is no point in making the getBeers API call again as the data is already cached in the our browser/service to be used.

We then take the _http variable of type HTTP that was created in our constructor and then invoke the get method using our beer API url details as the parameters for it.

The line .map((res: Response) => res.json()) takes the response from the Beer API server and maps it into an JSON array for us.

.publishReplay(1) will allow the data to be reactive. We will come back to this.

.refCount(1) has a similar function. It allows the Observable returned by the HTTP get request to keep its connection open, this will allow the data source to be reactive.

catch(this.handleError) this will catch any error from our request and run the this.handleError function. All you really need to know about this function is that it will filter down through the error message to the point where it will usually be the most informative. Usually, a detailed HTTP code error or associated.

If you noticed some of the variables declared above the constructor you should see

These are both core Rxjs features that will allows our data to be reactive. We will come back to these but for now just think of them as reactive variables that we will using later on in our home.component.ts

This is the basic version of our service set up with the functionality to retrieve an initial list of beers. It gives a good overview of how our service will share data. However, this on its own will not do anything without injecting it into one of your components.

We will be doing this in part 3. For now think of its as a piece of functionality that will share data throughout the application, the data will be made reactive by using Rxjs Subjects and Observables which are declared at the top of the file.

Creating A Reactive Data Source in Angular 4 – Part 1

WRITTEN BY GARETH DUNNE @JSDIARIES

One of the most important aspects to nail down in Angular 4 is the idea of creating reactive data sources. No matter what kind of data you want to show your user, in order to take advantage of web applications you should really have your data be dynamic and reactive.

In comparison to React.js, Angular 4 enables you to create data that is shareable to all of your components via a service . We will then use Observables and Subjects to make this data reactive. This is achieved using the external reactive JavaScript library Rxjs.

And while Rxjs is also available to be used with React, in my personal opinion it is much easier and it better fits the architecture to be used in combination with Angular 4.

In this tutorial I hope to show how you can make your own reactive data source using the Brewery API for data. In this part we will just start with setting up the project.

As per usual if your looking to expand your Angular and Typescript knowledge I highly recommend this Angular & TypeScript book by Yakov Fain.

You can see the final version of what end of this tutorial series here. I took the designs and styles of this application from Coursetro’s MEAN stack course and was able to implement a service for interactions with the data and the Brewery API.

https://github.com/garethgd/angular-4-beer-search

Source

As this tutorial will be broken down into a few posts, you can see the source code in the GIT here.

Brewery API

In order to retrieve data from a source via HTTP we will use the Brewery API. This will at least keep our data source interesting and offer plenty of different data options to be displayed.

Navigate to the developer API section here.

Brwery API Menu
Brewery Applications

After signing up for a developer account, create a new application with whatever details you like.

Register New Application
Register New Application

The documentation is quite verbose and you can find a wide variety of different ways to query the api for specific beers.

You can also test the results of any api calls via the api explorer. This is useful for when you are testing different query parameters to retrieve specific datasets of beer information

API Explorer
API Explorer

For now, we just need the api key generated by your app. This will be needed in order to make a http request to the Brewery API server so store this somewhere to reference later on.

Setup

In order to progress from here we need to have Node.js and the Angular CLI installed.

No better way to get started than to watch this starting video by Gary Simon from Coursetro.

Once set up, we need to scaffold our Angular application. This is very easily done through the Angular CLI.

We will open up our terminal and in our current directory we want to generate the project with the styles scss flag.

We have now generated a Angular project with a sass styling structure.

Next lets generate our home component. This is a component that will display an initial request of beer from the API.

From here, we want to generate our service that will hold all the logic for retrieving data that can be shared with any of our components.

This is a service that contains all our methods that we will use to request data from the Brewery’s APIs. When you open up this service you will see that the Angular CLI has automatically injected a HTTP object into the constructor for us.

Lets modify this service so it now looks like this.

This HTTP object in the constructor will be used to make the HTTP requests. Meanwhile we have added all the necessary imports in the top of the file that we will need later on for this service.

This is our basic structure set up. In part 2 we will add our API calls to have a list of beers transition into our homepage.