YT YouTube2Text

YouTube2Text → Transcripts → HTTP in Angular - Learning Angular (Part 8)

HTTP in Angular - Learning Angular (Part 8) — Transcript

by Angular · 1,766 words · 282 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:02welcome back friends and by this point
0:05if you've been able to complete the
0:07previous modules you've built a
0:09beautiful functional application but
0:11since you've come to this module that
0:14tells me that you want more and we can
0:16totally do that right now the
0:19application retrieves data from a
0:21hard-coded array in the housing service
0:24now to make our app a little bit more
0:27realistic we can add support to make
0:30HTTP requests for the housing locations
0:33now the first change that we'll make is
0:36moving the data from a hard-coded array
0:38in our application into a standalone
0:41server on our local machine that we can
0:44use to make HTTP requests
0:47from the command line run npm install
0:50Dash G
0:52json-server next we need to create a new
0:55file in the homes Dash app directory
0:58called db.json once it's been created
1:01open it in your editor in db.json open
1:05the file and add the following code
1:07create an empty Json object then add a
1:11property wrapped in quotes called
1:13locations set the value to be an empty
1:16array
1:17now we need entries for this array so
1:20we'll copy the entries from our housing
1:22service in
1:24housing.service.ts copy the array
1:27entries from the housing location list
1:29class property and paste them into the
1:31locations array in db.json now to
1:35confirm in db.json you should have a
1:38Json object with a property called
1:40locations that has an array value
1:42containing the data entries for the
1:45housing locations now let's confirm that
1:48our data is working by starting the Json
1:50server here's how from a command line
1:53run the following command
1:55json-server Dash Dash
1:58watchdb.json when the server starts you
2:02will receive a URL on my machine it is
2:06localhost Port 3000 forward slash
2:09locations opening this URL in the
2:12browser will reveal our data being
2:14served to us from the local server that
2:17we've just created hey that's nice work
2:19now let's update the application to use
2:21our new server the first change we'll
2:23make is to remove the data from the
2:26service and
2:27housing.location.ts we're going to
2:29remove the housing location list
2:31property and delete the array of values
2:34as well now we're going to add a
2:37property called URL and set it to the
2:40string value
2:41HTTP colon forward slash forward slash
2:44localhost support 3000 for slash
2:47locations in the get all housing
2:50locations function we need to make a
2:53call to the API endpoint to retrieve
2:55this data here's how we'll accomplish
2:57that first update the method signature
3:00for get all housing locations to return
3:02a typed promise the type is housing
3:06location array also Mark the function as
3:08async we're going to use the fet API to
3:12request data from the local Json server
3:15in the body of get all housing locations
3:18function remove the existing code
3:21add a constant local variable called
3:23data and set the value to a weight Fetch
3:27and pass in this dot URL as an argument
3:31to fetch
3:32we're using the async await pattern here
3:35to reduce the amount of code that we
3:37have to write and increase the clarity
3:39next add a return statement return
3:43awaits data.json open close parentheses
3:46because this is a function call then
3:48nullus coalescing operator empty array
3:52if for some reason we get a nullest
3:54value from the call to data.json we'll
3:57default to returning an empty array
3:59there's a few things to note here we're
4:02wrapping the fetch call in a service
4:04which could seem like adding some
4:07complexity here in this application we
4:09only make this call once but in other
4:12applications we may reuse the same call
4:15in multiple places also this gives us
4:18the added benefit of testability we can
4:21provide a mock implementation of the
4:22surface in our test that can return some
4:25data
4:27to keep things simple we're using the
4:29browser fetch API for more complex
4:32examples angular provides the HTTP
4:35client service class so you can use that
4:37and to find out more head over to
4:40angular.io okay great that function has
4:43been taken care of we're going to repeat
4:45a lot of these steps for the get housing
4:48location by ID function
4:50first let's update the method signature
4:53to return a typed promise in this case
4:55though it will be housing location type
4:59in the body of the function at a
5:02constant local variable called data set
5:05to the value await Fetch and as a
5:08parameter to fetch we're going to use
5:10JavaScript string interpolation to
5:13construct our URL
5:14using backticks interpolate this dot URL
5:18followed by a forward slash then
5:21interpolate ID which is the parameter to
5:24get housing locations by ID
5:27next add a return statement return await
5:31data.json open close parentheses then
5:35nullus coalescing operator empty object
5:39literal at this point we've changed the
5:42implementation of the servers but now we
5:44have to update the calls to this service
5:47from the other parts of the application
5:49and
5:51home.component.ts we're going to update
5:53the Constructor method to call the new
5:55promise based service
5:57remove the existing code in the body of
6:00the function and add a call to get all
6:03housing locations
6:05next attach a then function to the call
6:09for the parameter to the then function
6:11provide an arrow function
6:14the parameter of the function is housing
6:17location list of type housing location
6:19array and then the body of the function
6:22assign this dot housing location list
6:25the value housing location list
6:29this is the parameter that we created
6:32finally we'll update
6:36details.component.ts in the Constructor
6:39method we'll replace the existing call
6:41to get housing location by ID with a
6:44call to our new promise based function
6:46delete the code that assigns a value to
6:50this dot housing location and add the
6:52following
6:53make a call to get housing location by
6:56ID in the housing service and pass in
6:59the housing location ID local variable
7:02next attach a then function as a
7:05parameter to the then function provide
7:07an arrow function that has a single
7:09parameter called housing location of
7:11type housing location in the body of the
7:14function assign this dot housing
7:17location the value housing location save
7:20all your code
7:22now in the browser we can confirm that
7:24our housing locations are being
7:26displayed we can also confirm that the
7:29application successfully allows users to
7:32select their housing location and be
7:34navigated to a populated Details page
7:38now we're almost done here but there's
7:40one more feature I'd like to implement
7:44on the landing page there's a search bar
7:47and a button that we haven't addressed
7:49let's turn that into a functioning
7:52filter to do that we'll need to work
7:54with a form and a click Handler
7:59openhome.component.ts we need to
8:01retrieve the data from the filter in the
8:03template for this component we could use
8:06a form group and type forms but that
8:09might be more than we need for this task
8:12instead we'll use something called a
8:14template variable this will allow us to
8:17get a reference to an element in the
8:19template and use it in our application
8:22update the input element and add an
8:25attribute of the format hashtag filter
8:28the hashtag syntax creates our template
8:31variable in this example the variable is
8:34called filter
8:36let's update the button element and add
8:38a click Handler
8:40add click surrounded by parentheses and
8:43set it equal to the string value filter
8:46results and since this is going to be a
8:49function add parentheses to the end and
8:52pass in
8:53filter.value as a parameter one quick
8:56note you may be wondering where
8:58filter.value came from well since we are
9:01using a template variable we have access
9:03to the actual HTML element value is a
9:07property on the input HTML element
9:10in our click Handler invocation we're
9:12passing in the text value from the input
9:15directly into our component class let's
9:18also update the app dash housing Dash
9:20location in G4 code
9:23right now we're displaying the housing
9:25location list but we're going to switch
9:27things up housing location list will be
9:30our source of Truth in the application
9:32for listing so we're going to change a
9:36housing location list to filtered
9:38location list in the ng4
9:42now we'll update the component class add
9:45a new property called filtered location
9:47list that's all camel case of type
9:50housing location array and assign it the
9:52value of empty array and the Constructor
9:55in the then function add a new
9:57expression this dot filter location list
10:00equals housing location list next we'll
10:03update the filter results function
10:07first we'll add code to check for blank
10:09text if
10:11not text this dot filtered location list
10:15equals this.housing location list this
10:19allows users to clear the search box and
10:22receive all housing locations
10:24next this is where we'll handle the
10:27actual filtering this dot filter
10:30location list equals
10:31this.housinglocationlist.filter
10:35now the array filter method takes a
10:38callback that defines the criteria so
10:40provide an arrow function with the
10:42parameter housing location and the body
10:45of the function to be housing location
10:48dot name dot two lowercase parentheses
10:52because we want to ensure that the
10:54census case doesn't interfere with our
10:55comparisons continuing add a call to the
10:59includes function and provide text Dot
11:02to lowercase parentheses as an argument
11:05to the includes function
11:07save this code and return to the browser
11:10in the browser input any text and then
11:13click the search button the results
11:15update this is huge I am so so proud of
11:18you and the progress that you've made so
11:21far so here's what's even cooler right
11:24now we're searching or filtering on the
11:26name of the housing location but you
11:29could expand the filter to compare any
11:31fields that you want all right friends
11:33we've covered quite a bit so let's recap
11:36we've used fetch to make an HTTP request
11:39to a live endpoint we've refactor our
11:42service and service calls to use a new
11:45format
11:46and we've added filtering capabilities
11:48to our application with template
11:51variables and some typescript
11:53all right way to go you should be very
11:57excited for your success and I hope that
11:59you are enjoying the progress that
12:01you've made and at this point you have
12:04everything you need to get started on
12:05building the next great application in
12:08angular congratulations friends
12:10now there is so much more to learn but
12:14you are well on your way I hope that you
12:17have enjoyed this program as I've
12:19enjoyed building this application with
12:21you and traveling with you on your
12:23angular Learning Journey
12:26okay friends until the next time
12:28go build great apps
12:33foreign
12:35[Music]

About this transcript

This page contains the full transcript of HTTP in Angular - Learning Angular (Part 8) by Angular, generated from the public captions YouTube serves with the video. The transcript has 1,766 words across 282 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.