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
Data Binding
Loading...
Do curso por The Hong Kong University of Science and Technology
Front-End JavaScript Frameworks: Angular
634 classificações
The Hong Kong University of Science and Technology
634 classificações
Curso 2 de 5 em Specialization Full Stack Web and Multiplatform Mobile App Development
Na lição
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.
Conheça os instrutores
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[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]
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
