This course will be retired on April 12, 2021.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Now that we have a service let's wire up our photo component to display data from the server.
We're finally ready to connect the entry
list components to our entry service and
0:00
display real data from the backend server,
let's get going.
0:04
You're probably wondering,
where does the backend server come in?
0:08
We will be using a traditional
backend server for this course.
0:11
Instead, we'll use a module
developed by the angular community
0:15
in collaboration with the angular team.
0:20
This module is used for testing and
0:23
demo purposes, I've included a link to
the project in the teacher's notes.
0:25
Also in the teacher's notes,
you'll find a link to the source for
0:29
our fake backend server.
0:32
Let's create a new file
in our app directory,
0:34
call it backend .ts.
0:39
Now, copy the contents of the backend
server file from the teacher's note and
0:44
paste it into the backend ts file.
0:49
Then save.
0:54
Now, let's go into the terminal and
0:57
install the Angular
in-memory-web-api package.
0:59
npm install angular-in-memory-web-api
1:03
and we'll use the --save flag
to indicate that this package
1:12
is an application run time dependency,
not a development tooling dependency.
1:21
Be sure to append the at sign With 0.2.4,
1:26
With the --save-exact flag to install
the correct version for this course.
1:35
Because our back-end services used in
the required method to import photos
1:40
We'll need the appropriate
web pack loader installed.
1:44
Let's install the file loader-package.
1:47
This time,
we'll use the save-dev flag since this
1:54
package is related to
the build of our application.
1:59
Next we need to import the in memory
package in the vendor.ts file.
2:15
This is to ensure that
the packages source code and
2:20
our source code doesn't
get bundled together.
2:23
Then, we need to configure angular to use
the angular in memory web API package.
2:26
Open the app.module.ts file and
at the top,
2:32
let's import the in memory web API module.
2:36
This module has a static method
that connects our InMemory service
2:54
with the angular http service.
2:58
Now, we need to import
the InMemoryEntryService
3:03
from our backend TS file we created.
3:10
In the imports array
we'll add a new line and
3:27
add the in memory webapi module and
call the forRoot method and
3:32
pass in our in memory entry service.
3:38
This is the service we just imported.
3:44
The Imports array is where all additional
angular modules are referenced.
3:47
Adding these modules to the import's
array registers their components and
3:51
services for use within our application.
3:56
It's important to note that the imports
array in NG module is only for
3:59
Angular modules and not for
JavaScript modules.
4:03
An example of a JavaScript module
might be the load-library.
4:06
there's no need to import
that type of module here
4:10
since it's not an Angular module.
4:13
In-memory web API module
is now configured to
4:15
intercept requests met
with the HTTP service.
4:18
It's important to know you would be using
the In memory web API module in avail
4:22
application, it should only be use for
educational proposes like this cause.
4:27
Now that we have our
backend server wire up,
4:32
let's connect the entry service
to the entry list component we'll
4:35
start by inputting the EntryService
at the top of the file.
4:40
Next we want to add a reference to
the service in the constructor's
5:00
parameters list.
5:05
We won't be using the entry
service in the constructor So
5:14
we'll need to add the private key word.
5:18
By adding the private or public keywords
to the injected service, it gets added to
5:23
the prototype so that the service is
available other methods on the component.
5:28
Even though we could use the entry
service in the constructor
5:33
is best to put initialization
scripts in the NG on it method.
5:37
Angular has a number of Lifecycle Hooks
Which can be applied to a component.
5:42
The ngOnInit method is one that
Angular calls when a component is
5:46
being initialized.
5:51
There's also the ngOnDestroy method
5:53
that gets called when
the component is destroyed.
5:56
You can learn more about these and other
lifecycle hooks in the teacher's notes.
5:59
A benefit of working with TypeScript Is
that we can define interfaces and
6:03
apply them to classes where we
want to enforce some rules.
6:09
When developing large applications in
a team, its important to put checks and
6:13
balances in place so our code doesn't
break no matter who's working on it.
6:18
Interfaces provide these checks and
balances.
6:22
Let's go ahead and imput the OnInit
interface from angular code.
6:25
We'll tell our Entry List Component
that we'd like to implement the OnInit
6:31
interface by adding the implements
key word follow by OnInit.
6:36
Adding the interface will result
with typescript giving an error.
6:43
By hovering our mouse over the entry
list component class name,
6:47
we can see that the checks and
balances are in action.
6:52
We have to implement the ngOnIt method.
6:55
We're going to set up an entry's array so
7:03
we can display the list of photo
entries from the back end server.
7:06
Add a new property to our
component called entries and
7:18
give it the type definition
of an array of entries.
7:22
We haven't imported the entry model yet
so let's do that now.
7:25
We already have access
to the entry service,
7:38
thanks to dependency injection
.let's put it to work.
7:40
In the ngomit method,
we'll call the get entries method
7:47
Then we can set our components entries
property to be the value returned.
7:57
All instance members of a class,
that is all members that aren't static,
8:06
can be accessed through the 'this' symbol.
8:11
In our HTML template we'll need
to loop through the entries
8:14
like we did with the comments that
we did earlier on in the course.
8:19
Open up the entry list dot HTML file and
let's modify the app entry.
8:22
Let's add the NgFor directive and
loop over our entries.
8:29
We'll also need to pass the entry
data into the entry component.
8:35
We can do that by adding on-way data
binding by passing the entry from the loop
8:40
into our entry component.
8:44
On the left-hand side of the equal sign,
8:46
Put square brackets to indicate that
it's a property on the entry component.
8:51
On the right inside of
the equal sign is the data.
8:56
In this case, the name if the property
8:59
on the left is the same as
the associated variable from the loop.
9:01
Now we need to update our entry
component to receive this new data and
9:07
remove the placeholder data.
9:11
Open the entrycomponent.ts file and
add a new property entry.
9:13
The entry property is how the data is
shared between the two components.
9:20
Just like what we did with the entry list
component, let's import the entry model.
9:25
Now we can assign the entry
type to the entry property.
9:41
We now need to update our template
to reference the entry property.
9:48
Open up the entry component dot html file
and prefix all properties with our entry.
9:53
We'll change the title to entry dot title,
the photo to entry dot photo.
10:02
Description becomes Entry.description.
10:08
Comments become entry.comments
10:18
And be sure to change comments
in both places, okay.
10:37
So our entry component has all
the right pieces in place but
10:43
it still doesn't know how to treat
the data from the entry's component.
10:48
If we take a quick look in the browser
we'll see that the compiler is
10:53
thrown in an error.
10:56
Count binder entry Since it is
isn't a known property on up entry.
10:58
Like most errors we've seen so
11:04
far, this means we haven't configured
something quite correctly.
11:05
We need to apply an input
decorator to our entry property so
11:09
it can receive data from the entry list.
11:14
In the entry.component.ts file,
11:17
we'll need to import the input decorator
from the Angular's call package.
11:19
Just before the entry property
we called the input decorator.
11:26
Don't forget the x sign.
11:31
Save all the files and
head over to the browser.
11:33
The browser console shows no errors and
we have photos
11:36
and we can even toggle comments on and
off by clicking the button.
11:43
Cool, well done.
11:47
You've learned a lot about
angular in this stage.
11:50
Keep up the good work.
11:53
In the next stage,
we'll build out a common form so
11:54
our visitors can tell us how
much they love our photos.
11:56
You need to sign up for Treehouse in order to download course files.
Sign up