aprender>
Ciência da Computação>
Desenvolvimento Web e Móvel>
Front-End JavaScript Frameworks: Angular cursos>
Data Binding

Loading...

Data Binding

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.

Front-End JavaScript Frameworks: Angular

Universidade de Ciência e Tecnologia de Hong Kong

Curso 2 de 5 no Full Stack Web and Multiplatform Mobile App Development Programa de cursos integrados

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

Visualizar o programa do curso

Habilidades que você aprenderá

Node.Js, Angularjs, Reactive Programming, Typescript

Ministrado por

Jogesh K. Muppala
Associate Professor

Transcrição

[MUSIC]

If you have a static website,

then you have all the data that you need in order to build your website.

And it'll be created once and your website is ready to go.

But many websites these days are driven by data from the backend.

Your web application will fetch data from a backend server and

then use the data to dynamically layout content on your website, or

even update content on your website.

So this requires the data to flow from the backend through

your web application to the DOM.

And any user interaction on the DOM should be conveyed back to your web application.

So this requires the communication between the DOM and

your component in the angular framework for example.

Let's look at how this happens within the angular framework and

with a little bit more detail.

What we have learned so far is how a component is prepared.

So we saw that the component has two major parts, the typescript

file where the component's architecture is defined, and the properties.

And the methods of and then you have the template that

defines how the content is laid out, and added into the DOM.

So the template is the one that is going to supplied by a component to

occupy a part of your webpage.

So the template forms the communication medium to your DOM.

And this template requires data to be gotten from your component in order

to render parts of the content on your template and

correspondingly within the DOM of your web page.

Now, if you didn't have the luxury of a framework like Angular,

you have to deal with the entire details about how

the data flows from the application site to the DOM.

And how the user interaction events that the caused in

the DOM will be sent back to your application.

Fortunately, with frame works like Angular,

they support all these behaviors inherently.

Now we have already seen one use of the flow of data from a components

property to the template in the previous exercises.

Where we used the double curly braces to supply information that

is from a variable in your component's TypeScript code, to your template.

We'll look at other ways, and

then also in the exercise that follows, we will make use of this,

to modify the angular application that we have been developing so far.

What we have been talking, so far, is data binding,

a mechanism for coordinating the flow of information between the template and

the component, or between the DOM and the component.

In the component level, it's some kind of a property or

a method that needs to be either supplied to the template or invoked from the DOM.

Or on the template side, it may be some information

that is required by the template to be rendered into the DOM or

even from the DOM captured and sent back to your component.

So all this requires data flowing from the component to

the template or events that are gathered from the DOM or

to be sent back to your component for it to act upon those events.

Now this can be easily handled in angular framework using four different

kinds of flow of information which we will summarize in the next slide.

Coming back to the interaction between component and the template,

we have already seen the first kind of interaction between the component and

the template where the value of a property was flowing into the template.

So we saw the use of the dish name,

the dish description, the dish comment details and so

on being supplied in order to render information in your template.

So that is where we were using the double braces to enclose the fact that

a value from your component is being used in your template.

Another kind of flow of information which you will see Is where

you specify some kind of a property associated with a tag in square brackets.

And then assign it to be the value from one of the properties in your component.

This kind of approach we will see in the exercise that follows

right after this lecture.

So here we would specify something in square brackets.

So watch out for

an example of that in the exercise where I will discuss more about this.

Similarly, if you have an event generated near DOM,

that event may result in the call to a handler or

a method In your component that will take care of handling this event.

So the methods that are going to be invoked by

the events from your DOM are referred to as handlers.

So, the handle is nothing but, as I said a method, which might also

be passed in some parameter inside the handler methods there.

Later on, when we look at forms, we will see a two-way data binding.

So all the three that we have seen so far, the flow of the value from

the component to the template or the property being assigned to a value or

the event being assigned to a handler to handle the event.

All these are what we refer to as one way data bindings because

they flow only in one direction.

You can also have bidirectional flow where you might also see it

in the syntax what you would specify with square brackets.

And then enclosed inside that with standard parenthesis.

An inside there you will specifies something like an ngModel.

You will see the use of this when it forms later on in the next module.

So this is where you will assign a property to that.

So in this case the information flow is bidirectional.

So any change in your DOM will be reflected back into your property and

the component.

Any change in the component's property will be reflected back to the DOM.

Note the specific syntax that we use for

specifying the ngModel in this example here.

We use a square bracket and inside that we use the standard parenthesis in there.

Let me now summarize what we have just learned about

the data binding in the previous slide in to this table.

So in this table, we are showing the different ways that data binding is used.

One-way data binding from the data source to the view target so

from the component to the DOM,

we are using a double brace expression inside there.

This is what we refer to as Interpolation as an example of which,

would be the dish name, enclosed inside the double braces as we have seen,

used in the exercises, in the previous module.

Then we have, the second kind where you enclose the target

inside a square bracket and then assign it to an expression on the right side.

These expressions could be JavaScript expressions with some limitations.

The examples that we will normally see would be

using a property from one of the classes there.

So, this is what we referred as a property attribute, and

example of which you will see in the exercise that's follows this lecture.

Where you would see the use of a dish, enclosed inside a square bracket,

being equated to a selectedDish, which is a variable declared inside a component.

This can also be expressed using a bind-target,

a way of expressing the same thing.

So both these whether you enclose a target in square brackets or bind-target.

So, for example, you can see bind-dish.

So whichever way you express this, both refer to the same thing.

So the Property Attribute being specified or the Class Style being specified.

Now the one-way flow of information from the view target to

the data source is usually expressed with the target enclosed

inside parentheses here or can also be expressed as on-target.

And at the right hand side would be a statement.

A statement could be some kind of a JavaScript expression typically

would be in the of invocation of a method inside a component.

Well you will see an example in the exercise that follows where

you would have click inside the parenthesis and assigned to onSelect.

Which is a method described inside a component

class there with a parameter dish being supplied to this method there.

The two-way data binding as we saw would be with squire and parentheses,

squire brackets and parentheses which is equated to an expression.

We will see two-way data binding as a set with forms a little bit later where

you will use something like an ngModel, enclosed inside the square brackets and

parentheses, equated to something like dish.name.

Which connects the form element to a property of

a JavaScript object, in our component.

You can also express this as bindon-target.

Which is another way of saying the same thing.

Now, this two-way data binding that we do is sometimes

jocularly referred to as a banana in a box.

So if you look at the square brackets with the parenthesis inside it,

it looks like a banana in a box.

So, you might see this being used In some of the documentation or

in some of the blogs that you might read on the Internet.

Expanding further on the binding targets that we have seen,

the binding targets are the properties that are declared on the left side

of the binding declaration of that data binding declaration.

Typically, enclosed inside square brackets or inside parenthesis or both.

So the right side of the binding expression is their binding sources,

so which are typically like the properties of a JavaScript object, or

a variable, or an expression that we define on the right hand side.

If you define target properties associated with the selective of a component.

That is one way of either passing in information into a component,

or sending back information from one component to another component.

So this facilitates communication between components.

So you would see the use of a decorator like @Input associated with

a way of sending information from one component to another component.

We will see an example of this usage in the exercise

that follows this lecture here.

Similarly, you can use the Output decorator to specify an event

from one component being passed back to another component.

So both these usages are effectively used for communicating between components.

[MUSIC]

Vídeos recomendados

Sobre o Coursera

Courses, Specializations, and Online Degrees taught by top instructors from the world's best universities and educational institutions.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play