YT YouTube2Text

YouTube2Text → Transcripts → Services in Angular - Learning Angular (Part 6)

Services in Angular - Learning Angular (Part 6) — Transcript

by Angular · 2,000 words · 312 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:02all right friends welcome back we've
0:05completed the routing and we came across
0:07a challenge how do we get the selected
0:10housing location data to be available in
0:12the details component
0:14we're going to solve this with a concept
0:16called a service now a service has many
0:19different functions or purposes and we
0:22get to decide which of these directions
0:24will take in our application one way a
0:27service can be used is to function as
0:29the way to interact with the data for
0:31example instead of each component having
0:33a copy of the housing location data we
0:36can create a service that is responsible
0:38for retrieving the data from the data
0:40source providing the helpful utility
0:43functions that allow us to access the
0:45data and in some cases having functions
0:48that allow us to persist data to a data
0:50source so let's start by creating a
0:53service using the angular CLI and by the
0:55way have you noticed how helpful the
0:57angular CLI is yeah I'm just saying it's
1:00pretty cool so from the command line in
1:02your project enter the following in g g
1:06s housing in this case the S is an
1:09abbreviation for service and we're
1:12naming it housing
1:13in the
1:17ideopenedhousing.service.ts a service is
1:19a typescript class in angular the
1:22injectable decorator tells angular that
1:24we can use this class in the dependency
1:27injection system meaning that other
1:29parts of the application can request an
1:32instance of the service the provided end
1:35property of the injectable decorated
1:37metadata tells the angular where in the
1:40application disk servers can be injected
1:42now root means that it can be used
1:44throughout the application we need to
1:47move the data from the home component to
1:49this service and
1:51housing.service.ts let's import the
1:54housing location interface from dot
1:57forward slash housing location next add
2:00a protective property to the housing
2:03service class called housing location
2:06list and make that of type housing
2:09location array for now assign housing
2:12location list and empty array we need to
2:14populate the array with data now we'll
2:17copy the data from the home component so
2:20in homecomponent.ts copy the contents of
2:23the housing location array and paste it
2:26into the housing location list array in
2:28housing.service.ts
2:31back in housing.service.cs we're going
2:34to add two methods to the service
2:37first add a method named get all housing
2:40locations that takes no parameters but
2:43returns a housing location array
2:46we'll use this method to return the list
2:49of housing locations to the caller in
2:52the body of the function return this dot
2:55housing location list now wherever we
2:58inject this service we can request the
3:01housing location list we also don't have
3:03to worry about duplicated data because
3:06the servers will now be the source of
3:08Truth the next method we need to add is
3:11get housing location by ID which accepts
3:15a parameter called ID of type number
3:19and it Returns the union type of housing
3:23location or undefined we're using the
3:26typescript union type here because the
3:29call of this function could pass in an
3:31ID that doesn't match any housing
3:32location
3:34in the body of the function we'll search
3:36the array here's how this dot
3:40housinglocationlist dot find and to the
3:43find function will pass in an arrow
3:46function as a parameter the arrow
3:48function has a parameter of housing
3:51location and the logic is this one-liner
3:55housing location dot ID triple equals ID
4:00the find function will return the first
4:03match in the array so we don't have to
4:05worry about any unnecessary iterations
4:08here
4:09now be sure to save your progress we're
4:11going to update a few more files to use
4:13our fancy new service the first
4:15component will update to use the new
4:17housing service is
4:20home.component.ts update the Imports for
4:23the file to include inject from at
4:26angular forward slash core and housing
4:29servers from dot dot forward slash
4:31housing dot service then in the body of
4:35the home component add a property called
4:37housing service make that Camel case and
4:41set the value to a call to the inject
4:45function with housing Service as a
4:47parameter remember that property we had
4:49called housing location list make sure
4:52you've removed all of the contents of
4:54the array so that the value of the
4:56property is just an empty array
4:59create a function called Constructor
5:01that accepts no parameters in the body
5:04of the function let's add the logic to
5:06populate the housing location list
5:08property
5:10this dot housing location list equals
5:14this dot
5:16housingservice.get all housing locations
5:19and don't forget to add the parentheses
5:21at the end because we're invoking the
5:24get all housing locations function now
5:27save all the code and let's check the
5:29browser if we navigate to localhost Port
5:334200 the application will be functioning
5:36just as it was before we refracted the
5:39code to use services this is really
5:42excellent work so far friends
5:45thumbs up now this is an important
5:47change that will actually improve the
5:49app's overall quality let's continue and
5:52get the detail page functioning properly
5:55before we go on we should take a quick
5:58break to discuss why we're using inject
6:00angular uses a concept called dependency
6:03injection to allow components and other
6:06parts of the code to ask the framework
6:08for things that are needed to function
6:10also known as dependencies
6:13at first this might seem like an extra
6:16step but it gives us some great benefits
6:19first it allows us to have testable code
6:22when writing unit tests we can make
6:24mocks of things like databases and
6:27online resources without having to call
6:29them in our test code
6:31second we can have more reusable code we
6:36can create our dependencies and use
6:38dependency injection to get access in
6:40other parts of the application
6:43third we benefit from maintainability as
6:47well when our code is Loosely coupled we
6:50can change the behind the scenes details
6:53and update our code over time without
6:55having to impact other parts of the code
6:57unnecessarily
7:00all right friends back to the code in
7:04details.component.ts let's import
7:06housing servers from dot dot forward
7:09slash housing.service we also need to
7:12import housing location from dot dot
7:15slash housing location next let's add a
7:18reference to the service by adding a
7:20property to the component class called
7:22housing service where the value is a
7:25call to the inject function with housing
7:28Service as a parameter now be sure you
7:31use your class and not your property as
7:34the parameter be mindful there we are
7:37also going to do some slight refactoring
7:39too so delete the Declaration of housing
7:42location ID as a Class Property next add
7:45another class property and that is
7:47housing location of Union type housing
7:50location or undefined then in the body
7:53of the Constructor instead of this dot
7:56housing location ID update the code to
7:59const housing location ID we can make
8:03this ID a local variable now that we
8:05have access to an actual housing
8:07location instance finally let's update
8:10the code to include the following logic
8:12this dot housing location equals this
8:16dot housing
8:18locationservice.get housing location by
8:20ID and as a parameter to this function
8:22pass in housing location ID wait
8:26we're not done making edits because our
8:28code now has an error in the template to
8:31resolve that replace the interpolated
8:33property housing location ID with
8:36housing location question mark dot ID
8:40okay so what are we doing here well in
8:44this case we have to guard against
8:45calling dot ID on undefined so we use
8:49the optional chaining operator from
8:51typescript if the housing location is
8:53undefined the ID property won't be
8:55accessed and we don't have to worry
8:57about an error here save this code and
9:00let's go back to the browser click on
9:02learn more for any of the housing
9:04locations when The Details page renders
9:07we'll find the ID of the selected
9:09housing location being displayed all
9:12right again this is really outstanding
9:14work friends this application is coming
9:17along wonderfully and you should be
9:18really proud of yourselves and the work
9:20that you've done now we've reached the
9:22point where we can finally create the
9:24details component template back in the
9:27IDE in
9:29details.component.ts let's update the
9:32component metadata template property
9:35delete the existing HTML code here and
9:37replace it with an article element now
9:40add an image tag is a child element of
9:43the article in this case give the image
9:45element a source attribute of housing
9:48location question mark dot photo wrap
9:51the source attribute in square brackets
9:53to enable property binding because the
9:55housing location could be undefined
9:57we'll use the optional chaining operator
10:00where an error accessing properties in
10:03this particular template next we're
10:05going to add the title and location
10:06we'll start by adding another child to
10:09the article element a section with the
10:12class name listing Dash description give
10:15the section two children an H2 element
10:19with a class of listing Dash heading and
10:22then using interpolation at the housing
10:24location name property as a child of the
10:27H2 add another child to the section
10:30element this time a paragraph element
10:32set the child content to be the
10:35following interpolate the housing
10:38location city property then to the right
10:41of the interpolated value add a comma
10:43followed by space and then interpolate
10:46the housing location State Property all
10:49right now that we set up the name
10:51location and location image let's add a
10:55section for some details we're going to
10:58add another section as a child of the
11:01article element set the class of the
11:03section element to be listing Dash
11:06features
11:08add an H2 element with the class name
11:10section Dash heading as a child of the
11:14list features section
11:16set the contents of the element to be
11:18about this location
11:21next we're going to list the features of
11:24the location number of units in both
11:27Wi-Fi and laundry status so let's add
11:30the following code to the listing Dash
11:32features section add a UL as a sibling
11:36to that H2 and give the UL
11:393li children elements the first child
11:42has the text units available colon and
11:46then the interpolated value of housing
11:48location available units
11:51the second Ally has a Content does this
11:54location have Wi-Fi colon followed by
11:58the interpolated value of housing
12:00location Wi-Fi and the final Li content
12:03is does this location have laundry colon
12:06followed by the interpolated value of
12:09housing location laundry now we're going
12:12to add one more panel that will expand
12:14on in the next section but we'll add the
12:16placeholder here for now
12:19as a sibling to the listing feature
12:21section let's add a new section with the
12:25class listing Dash apply this section
12:28has two children the first is an H2 with
12:32the class section Dash heading with the
12:35content applied to live here
12:38and the second element is a button with
12:40the class primary and the text apply now
12:44as for the Styles copy the styles from
12:47the URL Linked In the resources of this
12:50video and add them to
12:52details.component.css
12:55now save all of the code and check the
12:58browser our Details page now displays
13:01the details of the selected housing
13:03location and you know what's great about
13:04this it works for all the locations
13:07because the URLs are Dynamic how cool is
13:11that
13:12all right friends that's the end of this
13:15section let's recap what we've covered
13:17we've learned how to create a service
13:21how to inject a service into a component
13:23for use and we've completed our Details
13:27page Bravo very well done technically at
13:31this point you have enough skills to get
13:34started building angular applications
13:36you should be proud of yourselves I know
13:39I'm very proud of you
13:41if you want to continue to expand your
13:43angular skills then join me in the next
13:46section where we'll explore even more
13:48angular features and further build out
13:50the functionality all right friends
13:52catch you in the next one
13:56foreign
14:01[Music]

About this transcript

This page contains the full transcript of Services in Angular - Learning Angular (Part 6) by Angular, generated from the public captions YouTube serves with the video. The transcript has 2,000 words across 312 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.