Angular from Scratch, part 17: Coding a GitHub data service

Aug 15, 2023

Angular from Scratch, part 17: Coding a GitHub data service

In this video on the @jsFromScratch channel, we’ll show how to add a service to fetch the GitHub API in an Angular app.

We’ll use the Angular CLI to generate a service to get the data from the GitHub API.

❤️ Subscribe for more free Web Development tips:
/ @jsfromscratch

🎁 Subscribe to our mailing list to get free ebooks:
https://www.codingexercises.com/get-m…

Content

0.25 -> Welcome to part 17 of the

2.216 -> Angular from Scratch video series.

4.414 -> In this video, we're

6.706 -> going to add a dedicated

9.454 -> service to get data

11.177 -> from the GitHub API.

13.39 -> So this video is a bit

15.116 -> a continuation from the previous one.

17.756 -> To begin, let's first do

20.084 -> some cleanup, namely remove

21.694 -> the gh data

23.158 -> dot name from the app component.

25.546 -> html template file.

27.454 -> Now in app component

29.05 -> ts, we're also going to remove a

32.084 -> reference to the

33.497 -> gh data variable itself.

35.216 -> I'll also remove the

37.479 -> private Http Client

39.286 -> right here being

40.413 -> injected in the constructor.

42.59 -> I'll delete the entire

44.639 -> ng on init right here.

47.168 -> And let's bring this up a little bit.

50.336 -> Then I'm going to

53.127 -> remove the Http Client import from

56.816 -> this class file

59.065 -> and that should be it, I believe.

64.507 -> So now that I save everything, my app

68.072 -> should still

69.365 -> compile and work as expected.

72.89 -> Now remember that in

74.744 -> one of the previous

76.51 -> videos we worked with the

79.488 -> Angular router and

81.332 -> we had Home profile

82.478 -> and login right here.

83.876 -> So what I want to do in this

85.28 -> video is I want to add my GitHub

88.654 -> user data to the profile right here.

91.31 -> So to begin as

93.105 -> I already announced,

94.899 -> we're first going

96.428 -> to generate a separate service

98.207 -> for the

99.322 -> GitHub user data.

100.67 -> So let me increase

102.695 -> the terminal window right here and

106.73 -> click the plus sign

108.641 -> to get a new terminal window.

111.262 -> And I'm going

113.286 -> to type ng g for generate service

118.65 -> GitHub User data.

121.304 -> So this is Camel cased

123.244 -> and now I'll press enter and

125.804 -> that will generate two new

127.114 -> files right here in the root.

128.758 -> So let's stretch this a bit -

131.935 -> the Explorer Sidebar - so

134.432 -> that I can now more

136.474 -> easily locate the

138.202 -> GitHub user data

139.324 -> service spec ts file.

141.346 -> That's just the testing

143.187 -> file - and the

145.894 -> GitHub user data service dot

147.202 -> ts file.

148.258 -> And this looks as expected as we've

150.058 -> already seen in the some data service

152.816 -> ts that we generated

154.13 -> a few videos back.

156.23 -> So now let's do this quickly.

159.14 -> First I'll add the GitHub

161.722 -> user data service

163.439 -> to the app module because

167.12 -> that's going to be

168.119 -> my data provider now.

169.004 -> So going to the app module file, I'll

172.87 -> add it right here

175.402 -> inside the providers array.

178.97 -> And now that I paste it, I get

180.812 -> this red underline and

182.721 -> a light bulb here.

183.968 -> So if I click on this it's going

186.836 -> to suggest how to fix this error.

189.43 -> And it says add import

191.025 -> from GitHub data service.

192.272 -> So this

194.579 -> is what happens when I click

196.652 -> it, it gets added -

198.661 -> the service itself.

200.75 -> So now I have this service

203.829 -> right here and let's

206.374 -> now add the Http Client

208.966 -> to the service's constructor.

210.718 -> So back in here in the

213.464 -> constructor I'm importing

215.018 -> Http Client.

216.43 -> So I'm going to say private http.

221.69 -> And now I'll code a method

224.343 -> of the service

225.788 -> here and this method will

228.495 -> be named get GitHub User

231.118 -> And this is going to be

232.541 -> pretty similar to what we

233.612 -> had in the ng on

235.426 -> init from the previous video.

237.068 -> So I'm going

238.382 -> to say this dot http -

240.826 -> so I'm accessing this one

242.534 -> - and when I

243.764 -> type the dot

245.279 -> I get the helpful autocomplete.

247.798 -> So I'm accessing the get method here

250.73 -> and I'm passing in https

254.617 -> api dot github dot com slash

259.079 -> users slash someone. And we

261.408 -> already sort of saw this in

264.576 -> the previous video

266.369 -> and now I'm just going to return

272.47 -> this so I'm not

273.759 -> subscribing like I did previously.

275.466 -> I'm just returning it from the

276.785 -> get github

277.362 -> user method.

278.43 -> Okay, so now I'll go

280.233 -> into the profile and

282.148 -> display the data

283.576 -> from GitHub in the profile component.

286.206 -> To do that, first I'll need

287.464 -> to go to the profile component

289.218 -> ts file and right here

291.187 -> let's see export

292.41 -> class profile component

293.834 -> implements on init.

295.42 -> And let's add here the data

297.448 -> that we're going to receive.

298.53 -> So we need to store that

299.95 -> data in a variable.

301.05 -> So let's say github

302.19 -> user data and we'll set it to

305.476 -> any to avoid any potential errors.

307.458 -> And now here in the constructor I'm

309.186 -> just going to inject the GitHub

311.982 -> User data service.

312.976 -> So I'm going to say private github

316.99 -> User Data Service

319.587 -> and I'm going to import the Github

323.922 -> User Data Service.

324.952 -> Let's click the icon right here

327.232 -> to close the Explorer briefly.

329.658 -> So now everything is in view.

332.05 -> No need to wrap the code.

333.868 -> So I've got private github

336.006 -> User Data Service

337.868 -> accessing the import of the Github

340.914 -> User Data Service.

342.97 -> And now inside the ng oninit

345.363 -> I can say this dot github

348.174 -> User Data Service dot get

353.096 -> User - that's our method -

356.554 -> let's see if it's

357.786 -> going to autocomplete.

359.63 -> So it says get Github

361.342 -> User and we're going

364.584 -> to subscribe and we're

367.558 -> going to get

369.033 -> the user from this observable.

372.29 -> So the data that we receive is

374.924 -> going to get assigned to

376.284 -> the github User Data.

378.35 -> Now inside the profile

380.641 -> template let's just

382.436 -> output the user dot name or

388.042 -> github User Data dot name.

390.89 -> So profile component

393.49 -> html we're going to delete

395.743 -> profile works and instead

398.27 -> we're going to interpolate

399.714 -> some mustache syntax right

401.12 -> here and we're going to say

403.102 -> github User Data dot name.

406.31 -> So now I'm going

408.514 -> to file save all and I get someone.

413.81 -> So let's say profile page,

418.52 -> github User Data name, file

422.074 -> save all again

423.723 -> and we get profile page someone.

426.92 -> So in case you replace the accessed

432.89 -> name right here to something else,

434.72 -> like for example let's say, coder,

437.104 -> perhaps - CTRL s,

440.57 -> and indeed there is

442.153 -> a profile page named coder.

443.65 -> So there you have it.

445.292 -> We might then

447.28 -> continue making this

449.12 -> I guess a bit more dynamic.

450.958 -> For example, let's say that

452.884 -> we have a variable called

455.156 -> user Name and then

457.471 -> set it to any for now.

460.52 -> And then let's

462.859 -> just interpolate the name

465.608 -> here instead

467.387 -> of coder as the username.

471.094 -> And of course I'm going

471.851 -> to have to use

472.604 -> backticks here because

474.068 -> otherwise this won't work.

475.112 -> And of course I forgot the

476.839 -> keyword this here.

477.788 -> So this dot username and

479.656 -> now file save all

481.124 -> again and

482.858 -> this time everything should work.

486.83 -> But of course

488.302 -> we haven't set the user name to

489.464 -> anything so let's set it

492.597 -> to we had coder

495.094 -> right here so let's make

496.492 -> it a coder again.

497.684 -> So file save all

499.786 -> and now we have the profile page.

502.76 -> So if we change that back to someone,

506.03 -> we're going to get the data for the

508.76 -> someone person

510.493 -> and now everything

512.31 -> works as planned.

514.669 -> So let's go through

516.204 -> all the steps again.

518.33 -> To reiterate,

521.161 -> we first generated

523.517 -> a new service, github

525.814 -> user data, then inside the app

529.859 -> module we imported this

532.952 -> data provider so that it

534.201 -> can be used in any

535.46 -> file of our app module

537.757 -> and then of course we

539.384 -> had to import it right here

540.697 -> and use it in

541.256 -> the provider's

542.837 -> array, then back inside the github

548.242 -> user data service

549.719 -> file - class file itself,

551.443 -> we defined - we

555.272 -> basically injected the Http Client

558.278 -> and then we used it

559.892 -> right here inside a custom method

561.972 -> that we built and

563.624 -> we just returned whatever came from

566.439 -> the API call

568.112 -> and of course we made

569.01 -> it a bit more dynamic using

570.32 -> the username variable

572.058 -> here and then

573.843 -> inside the profile component ts

575.686 -> class, we've injected

578.677 -> the GitHub user data

581.294 -> service - service that we imported

584.746 -> and made as a

586.577 -> private variable and then in the

588.092 -> ng on init we accessed the GitHub

591.574 -> User Data service,

593.019 -> then the method get GitHub user and

596.264 -> we subscribed to the

598.484 -> data feed, got the user data

601.46 -> and assigned the user data

603.549 -> to the GitHub user data

605.012 -> that we defined right here

606.72 -> and then finally inside profile

608.854 -> component's template file,

610.661 -> we simply accessed the data that we

613.064 -> have. So that's it,

614.917 -> that's all there is to it,

616.292 -> pretty simple and in the

618.011 -> next video we'll just make

619.772 -> our app a bit

621.505 -> prettier by finally

622.706 -> using ngx bootstrap

624.058 -> and updating our existing code.

Source: https://www.youtube.com/watch?v=UlciHbXKu18