Exercise (Video): Data Binding

Loading...

来自 The Hong Kong University of Science and Technology 的课程

Front-End JavaScript Frameworks: Angular

603 个评分

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

603 个评分

课程 2（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 6.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication through the HTTP client and the use of REST API on the server side. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript frameworks and the Angular framework - Be able to implement single page applications in Angular - Be able to use various Angular features including directives, components and services - Be able to implement a functional front-end web application using Angular - Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications - Be able to use Observables and RxJS in the context of Angular applications

从本节课中

Angular Services, Routing and Single Page Applications

In this week, you learn about data binding in Angular. You will learn how to design basic services. You will learn about Angular router and its use in designing single page applications. You will also learn about single page applications and use Angular Router to design single page applications.

Data Binding12:52

Exercise (Video): Data Binding19:04

与讲师见面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Now that we have examined data binding,

let's make use of them for

working on the Angular application that we have been using so far.

In the previous version of the Angular application,

we had the menu being rendered,

and then we had a specific dish being shown at the bottom.

Now, we would ideally like for the user to be able to click

on any one of the menu items and then the details to be shown to the user.

This is where the use of data binding will help us

to implement our application to enable this kind of a feature.

Going to the current state of our application in the browser,

we can now see that we have our menu and at the bottom we

have the details of one specific dish being shown there.

Now, this is well and good for a start, but ideally,

what we would like to have is that if the user clicks on any one of these dishes,

we want to be able to show the details of the dish at the bottom of the menu here.

So, we would like the details of the dish to be changed

based upon which specific dish we click upon at any moment.

So, how do we achieve this?

So, this is where the use of data binding comes to our rescue.

Going to our application,

the first thing that I'm going to do is in the shared folder,

now you realize that the dish information is being

used both in the menu component as well as in the dish detail component.

Now, when you have information being shared like this,

it would be rather more convenient to have a centralized place

from which this information is supplied to both these components.

So to help me do that,

what I'm going to do is go to the share folder and then create a new file,

and then I will name this file as dishes.ts.

Inside this dishes.ts file,

I'm going to create the constant which supplies the details of the dishes.

So to do that,

I would first import the dish,

from the dish class

that I have already defined earlier.

So now, I can define a

constant called as dishes of the type a dish array,

and then this is where I'm going to store the details of all my dishes.

Now, in the earlier version of the application,

we have seen the use of the dishes and we saw

the JavaScript object array that contains the details of the dishes.

Now, we're going to move all that content and with an updated version of it.

So, an updated version of the dishes

JavaScript object array is given to you in the instructions,

so just go and copy

the entire JavaScript object array from there and then we'll paste it into place here.

So, this becomes the central location from which

the dishes information is supplied to your application.

I have now cut and pasted the details of

the dish that are given in the exercise instructions into place here,

and so I have four dishes pasted here one,

two three, and four dishes pasted here,

and each of those dishes contains of course

the details of the specific dish and also comments for the dish.

Now this way rendering the information in

the dish detail template becomes straightforward for any one of these chosen dishes.

Now, if you roll back you will see that there are some red lines here.

The reason for these red lines is because when you look at the dish object in here,

you will see that in the dish object we don't have a property there called as comments.

So, we need to create a new property called

comments to add into that dish here. So, how do we do that?

So to do that, we will say comments and

then I would say comment array here.

Now immediately you realize that there is no comment array available to us,

so we need to create that comment array.

So, what I'm going to do is I'm going to create another JavaScript class

which contains the details of the comment there.

So to do that, first I will import comment from

the comment class here.

Now of course the red line immediately tells me that I don't have a comment class.

So, how do we add a comment class?

So going to the shared folder,

we'll create a new file named comment.ts and inside this comment.ts,

we'll define a class called comment here.

Now, we need to define certain properties for this comment class.

So, what are the properties that we have?

Let's take a quick look at our dishes.ts file

and then we'll see what the properties for each comment are.

Going to the dishes.ts file,

you see that the comments contains

one property called as a rating which seems to be a number,

then you have a comment which is a string and

author which is a string and a date which is also a string.

So, we need to define four properties for my comment class here.

So, going back to the comment class,

I would define rating as number.

So, in type script,

everything is a number here then we had comment which is a string author,

which is also a string,

and then date which is also a string here.

So, these are the four properties that we have here.

Now, obviously we have seen how we use the date string in the previous exercise,

and in the assignment how we made use of

the date string to show the date for the comment there.

Now, in case you're wondering,

what does this date string actually contain?

Going here, you will see that this date string is with a certain format.

So, this is the standard format for storing a date here.

This date format is the ISO OSI way of specifying the date format.

So, we're just going to use this,

so this is a standardized format that is used also in

many programming languages which allows you to store the data as a string here,

so I'm just going to make use of it as such here.

After making the changes to the

dish.ts file like this here and then also adding in the comment class here,

we now see that the dishes.ts file no longer has those red lines because

the comment has been added in as an object array to my dish class here.

So, this works fine so far.

Now, how do we make use of this?

Now to make use of this,

we will go to the menu component.ts,

and then here we have this constant defined here.

Now, this is not the right way of doing it

later on you will see me using a service for all this.

So, let me cut out this constant from here completely and instead of using that constant,

I am going to now import dishes

from the shared folder

here, shared dishes here.

So, notice that this dishes folder is exporting the dishes constant here.

So, that's the reason why we're able to make use of it.

So going back to the dishes one here,

I need to export this from here,

so I would say export.

Constant. So, when I do that,

then in my menu component I can see that my dishes can be imported here correctly.

Then, the rest of the code here will work just fine without any changes.

You will see that if you save the values now

and then you look at your web application in the browser,

it will render just fine even after these changes.

After saving all the changes that you have done so far in all the files,

if you go and look at your web page,

your web page renders just like before.

Now, the second part of the problem.

We want to be able to communicate.

When we click on any one of these menu items,

we want to be able to communicate that information so that

the corresponding dish will be rendered here.

So, this is where we're going to take the help of

the data binding that we have learned so far.

Going back to the menu components template file,

what we are going to do is that for

this "app-dishdetail" that you include at the bottom here,

to add in the dish detail components template to the menu components template,

we're going to add in a property called as Dish.

Then, we will assign this to be "selectedDish."

You will recall that the selected dish is a variable that we have

defined in our menu components TypeScript file here.

So, that way; that value of that selected dish will

be passed in through this property dish here.

Now, we will see how the dish detail component can retrieve this information

and then make use of it well in the next step in the exercise.

Now, while we are here,

we'll also fix up the other issue that we need to deal with.

That is, when any of the menu items is clicked,

then it'll generate a click event and we want that information to be

delivered to our menu component TypeScript file.

So, to do that, we'll go into menu grid lists that we have defined here.

For this grid tile here,

what I'm going to do is to define the click event here.

So, for the click event,

what I'm going to do is I'm going to call on

select method that I will define inside my menu component.ts file.

To this onSelect method,

I'm going to supply the dish as the parameter here.

What is this dish?

This dish is exactly this dish that you have selected in

this "let dish of dishes" in the ngFor syntax here.

So, that specific dish,

out of the array of dishes that you've selected here,

will be passed in as a parameter to this onSelect method,

what we're going to implement in our menu component.ts file.

So, now that we have done this,

so this is the handler that needs to be implemented.

Let's go to the menu component file and then fix up

this file to implement this handler in there.

So, when you do a click on any one of the menu items,

then the corresponding handle will be called and

the specific dish information will be passed in as a parameter here.

Going to menu component.ts file, now,

the selected dish will be assigned a value based upon which dish I select.

So, I'm going to remove that part and then right below here,

I'm going to implement the onSelect method here.

So, for the onSelect method,

this will obtain a parameter which is the dish parameter.

When that dish parameter comes in,

I'm going to assign this selectedDish equal to dish,

the parameter that came in as the value for the onSelect method here.

So, this is it.

So, when you click on any one of those items in the menu,

any one of the dishes in the menu,

that dish information will be passed in through this and then

the selected dish will be assigned to that dish object here.

Now, we have how the information comes in from the DOM.

The specific click will cause the dish information to

be available to us and the selected dish will be assigned that value.

Now, going back to the menu component HTML file,

we see that we have already assigned this dish property to selectedDish.

So, that way, that selected dish value is being passed

in through this dish property to this app-dishdetail here.

Now, how does my dish detail component get hold of this information?

For that, we're going to go to the dish detail component and fix that.

Going to the dish detail component,

the first thing that I'm going to do is delete

this dish constant from my dish detail component.

I no longer need it.

Now, when a property is being bound,

like what we have seen in the menu component HTML file,

then in my dish detail file,

I can use another module called as the Input Module.

Then, for this dish,

I'm going to simply declare that as DISH.

Now, this input module allows me to declare a decorator

for this dish variable that I defined here,

like this, at input with the parenthesis here to that dish here.

Then, also, I need to import

the dish class

from shared dish here.

So, with this, so what has happened is that I am making use of the input module.

So, this is a way for you to supply information into a component from another component.

You bind a property in the template of

the other component as we saw in the menu component.html file,

and then that will be available as input to this component by

declaring a variable and then calling input decorator for that.

Now, with this, let's save the changes to all the files that we have made

and then have a look at the angular replication.

Going to our browser,

we see that in this Angular replication,

nothing is being displayed here.

Because right now, the selected dish,

we have not selected any one of the dishes so also the selected dish

is an empty object there.

So, we use the ngIf in the template for the dish detail.

So, taking a quick look at the dish details template,

you have implemented this as part of your assignment.

So, you should have used the ngIf with the dish for both the code,

as well as the MD list there.

So, if you do that,

then when the dish is currently unselected,

then nothing will be displayed at the bottom.

But the moment I click on any one of the dishes,

then you immediately see the details of the dish being displayed at the bottom here.

Now I can select the second dish and then immediately,

you'll notice that the dish details being displayed below is changed.

So, anytime I click on any one of these dishes,

the details of that specific dish,

including the comments will be displayed at the bottom here.

So, this is exactly what we want to achieve in this particular exercise.

So, here, you have seen the use of data binding, three different kinds,

including the event and event handler,

and also you saw how we can make use of the input module to be able

to retrieve information into a component coming in from another component.

With this, we complete this exercise,

where we have learned how to make use of various data

binding features available in Angular to implement our application.

This is a good time for you to do a git commit with the message data binding.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取