Exercise (Video): Data Binding

Loading...

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

Front-End JavaScript Frameworks: Angular

535 个评分

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

535 个评分

课程 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. 4.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 and the use of REST API on the server side. You will use Restangular for communicating with a server supporting the REST API. 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

[MUSIC]

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 details to be shown to the user.

Now 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 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 will 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, and 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 that Dish from

From the dish, Class that I wanted to define earlier.

So now I can define a constant

called as DISHES of the type Dish[], and

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

In the earlier version of the application we have seen the use of the dishes and

we saw the JavaScript object array that contained the details of the dishes.

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

So an updated version of that dishes JavaScript object array is

given to you in the instruction.

So just go and copy the entire JavaScript object array from data and

then we'll paste it into place here.

So this become 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 straight forward for anyone of this 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 will say comment array here.

Now, immediately you'll 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,

That 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 go into the Shared folder, we'll create a new file named comment.ts.

And inside this comment.ts, we'll define the,

Okay, class called Comment, here.

Now we need to define certain properties of 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'll see that the comments contains

one property called its rating which seems to be a number.

Then you have a comment which is a string.

An 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 TypeScript, 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 are 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 for,

actually we're just going to use this.

So this is a standardized format that is used also in many

Programing languages which allows you to store the data as string here,

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

After making the changes to the dish.ts

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

We know see that the dishes.ts file no longer has those red lines.

Because the comments 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.

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

So let me cut out this constant from here completely.

And instead of using that constant, I'm going to allow import, Dishes,

From the shared folder

here, shared dishes here.

So, notice that the dishes folder is exporting dishes constant here so

that's the reason why we are 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.

And then the rest of the code here will work just fine without any changes.

You would 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 we've done so far in all the files,

if you go and look at your webpage here, webpage renders just like before.

Now, the second part of the problem.

We want to be able to communicate When we click on anyone 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 will be 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're going to do is that for all this app-dishdetail

that you included the bottom here to adding

the dishdetail component template to the menu component template.

We're going to add in a property called as dish.

And then we will assign this to be selectedDish.

You recall that the selected dish Is a variable that we have defined

in our menu components type script file here.

So that way,

that value of that select 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 there 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, Many items are clicked.

Then it generate a click event.

And we want that information to be delivered

to our menu component's type-script file.

So to do that, we go into the menu

grid-list that we have defined here for this grid tiled here.

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

So for the click event, What I am going to do is I'm going to call on

Select Method that I will define inside my menu component.ts file.

And 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 dish, that specific dish out of the array of dishes that you have 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 handler 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 = 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,

anyone of those 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 dome.

The specific click will cause the dish information to be available to us and

the selected dish will be assigned with 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 dishdetail component get hold of this information?

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

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

this DISH constant from my DishdetailComponent.

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.

And 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, @Input with the parentheses here,

to that Dish here And then also I

need to import there { Dish } from

/shared/dish'; here, so with this.

So, what has happened here, 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're buying the property in the template of the other component,

as we saw in the menu component on [INAUDIBLE] table five.

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 application.

Going to our browser we see that in this angular application nothing is

being displayed here because right now the selected dish, we have not selected

any one of the dishes so the selected dish is an empty object there.

And so we use the ngIf in the template for

dish detail so taking a quick look at that dish detail set

template you have implemented this as part of your assignment so

you should of used an ngIf with the dish For

both the card as well as the md-list there.

So if you do that then when the dish is currently unselected,

then nothing will be displayed on 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 a second dish.

And then immediately, you notice that dish detail's being displayed below is changed.

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

the details are 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 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

radius 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.

[MUSIC]

探索我们的目录

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

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

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

通过 App Store 下载

通过 Google Play 获取