Posted on

[Sample] Angular hitting API with Service

If you want the sample main steps scroll to the “TO THE POINT” part of this article thanks. If you all good keep reading.

So this lock out isolation thing has been quite challenging for everyone and I feel your pain. I was working on an angular portfolio…but its been mainly css when trying to cater for mobile view and tablet view…so I want to take a break from the css and get into interacting with an API

If you don’t know what an API is…this wont cover the fundamentals sadly, it’ll be a working example of an api request. As for now we are Focusing on Angular working with APIs using services.

There are many free open API sites the one i came across apifootball.com where upon registering they’ll provide you with an API key (you’ll need to keep this safe and secure) From my experience most of the free apis require a registration.

We have an api and an api key, now you want to check and see if we can make a call of some sort and log a response. A great API tool is postman. Basically setup the API call to your liking and it allows you to see and track the response and what not, look its great.

ok so that is the long of it. Now i’m going to try to keep it as short as possible. Yes that does say “overal_league_payed” learned that the hard way.

TO THE POINT HOW TO SETUP TO HIT AN API

Using the angular cli we can just enter the following command in the terminal

// short hand
ng g s serviceName
// full on
ng generate service serviceName

The command will generate a service for you in your solution. Basic boiler plate.

Right now you know your API is working. Let’s make that service in our angular app give that API a call and see if we can get their response.

We need RXJS thats right that beast that does magic with Observables (high level comparison of observables vs promises.).

npm i rxjs

Make sure that you are using HttpClient for the http calls.
I normally use the below structure for api calls. Adding variable for base urls and other things that are constant like my apiKey this is just personal preference.

I was advised that when it comes to services, make sure they only deliver the data keep that part clean. Now moving along to the app.component we’ll need to create a function that hits that service and the getLeagueStand and subscribe to the response and then extract the data you want. Make sure you return the url.

And ALSO do not forget to import your service and the httpClient module to your app.module file like so…I can’t believe I forgot to add this guy.



As you can see in the code above we subscribing to the data and then setting out its values to variables. Here is a repo to a working sample. You’ll need to add your own apikey though.

Posted on

Inherit a Codebase or Rewrite one?

For all you guys that just want the pros and cons, check at the bottom of the post for the main out comes of my experience and findings. Continue reading if you want to read more details on said findings.

I never thought so early in my career there would be a time that I would need to inherit a codebase.

There was a bit of talk with the team and with the client about a lift and shift an existing code base and what not. I didn’t really have a problem with it cause everything was still pretty new to me.

So new codebase, go through the norm git clone <https://github.com/tony2tones/angular/someotherbsprojectthatcouldbegreatorlame.git and you npm install and so on. I navigate around and then start looking at the code base…you got to make sure that the project works before looking right?

So i navigate around and its just things i’ve never seen before, I’m checking this shit out and there is like Models within Models Referencing other models and other things i’ve seen before.

I tried to remain calm even though knowing full well that i’d need to upkeep this possibly add features to this code base so I was nervous.

I heard from the other devs that the codebase was actually pretty good, to a high ‘clean code’ standard I believe. That was quite a big deal. So the codebase was ours to hold and to manage.

These are the first few things i realised:

  • Code was not unit tested(which basically become our duty to fix)
  • Code was to a high standard but reading the code was difficult…there was a lot going on
  • Not unit tested therefor code was not developed to be unit tested
  • Lots of refactoring breaking down code and making sure it would be unit testable
So the lift and shift was a success(in the pipeline and all) but the unit tests  were incredibly difficult...it came down to whenever i got assigned a unit test on that codebase, I needed help. Everyone struggled...I was a little annoyed thinking i'm really new at this job and they are giving me things that senior devs are struggling on....don't get me wrong they did them and they're were very complex but you know a lot of effort is all i'm saying. So reading the code and understanding it for me...took quite some time weeks infact..so ya lot of time understanding things and always struggling at unit tests..I learned a bit but ya i'm far from perfect.

Thanks for reading the above journey of my experience. So my understanding and outcomes come to these things:

TLDR

Here are my main experience and findings.

Yes, there is a typo ‘may be more ‘

The above is just my findings of inHeriting vs rewriting a codebase. Open to discussion i’ll be happy to update. This is like XP Xperience Post