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
Exercise (Video): Angular Template-driven Forms Part 1
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End JavaScript Frameworks: Angular
501 个评分
The Hong Kong University of Science and Technology
501 个评分
课程 2（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
Angular Forms, Angular and Reactive JavaScript
In this module we study Angular support for forms and form validation. Both template-driven forms and reactive forms will be introduced. You will also learn about Promises. Then you will learn briefly about reactive programming, RxJs and its use in Angular.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
Time to get started on our next exercise,
where we will look at template different forms.
We will construct a template driven from
in our angular application that we have been working on so far,
to enable the user to type in their login information into our web application.
We'll also see the use of the angular material dialogue component,
in order to display that log in
form in your dialogue on top of our web application.
To get started, let's go to our header component and
then we will include a link in to that toolbar of the header component.
We're going to use this link in order to trigger
the showing of the dialogue that contains our log in form.
So, to do that, go into the header component here, the template file.
Inside the toolbar, I'm going to include
a span with the class flex-spacer.
The flex-spacer is a CSS class that we defined
in our application's SCSS file, the style dot
SCSS file in the root folder of our application.
The flex-spacer class defines an automatic spacing
between two elements within our layout,
such that the maximum amount of spacing between the elements can be achieved.
Now when I include the login link into my toolbar,
I want to place the login link at the right edge of the screen.
So that's why I am putting a flex spacer between that and the next element where
I'm going to add an md button to an a tag.
Which will support the log in link here.
So with the md button, within this a tag,
I am going to include a font or some icons.
So let me do a span class fa
fa-sign-in fa-lg.
And then specify to this one,
along with this I will specify the text as login.
So this will include a button to the right edge of my toolbar.
With the Font Awesome icon for sign in and also the login link there.
Now when this link is clicked, what do I want to do?
So this is where I would include a click
here, with a call to
a method inside my header component typescript file called openLoginForm.
So with this I now will have
a link in my head that which when clicked should open my login form.
Now, in order to make use of this, we're going to take advantage
of the angular materials support for a dialogue component.
The dialogue component will be displayed superimposed on the web page in front
of the rest of the web page, you have seen dialogs pop up on web pages before.
So the dialog component in the angular material
supports similar kind of behavior.
It also gives us enough flexibility to design our own layout for
that dialog box that pops up on the screen.
To use that, we're going to create a new component and
add it to our angular application.
We'll call this as the log in component.
So going to the terminal, at the terminal let me create a new component
in my angular application called login.
And this login component is the one that is going to cost that
template driven form that enables the user to type in their login information.
Subsequently we will be able to process this login information
once we have the server side in place.
Once the login component is created let's go ahead and
then configure the login component.
Going to the editor, we now have the login component .ts file open here.
Now in this file we're going to add in the support for
the dialogue component that is available through angular material.
So to do that, I'm going to import MdDialog.
So this is the dialogue component that is available through angular material.
And then, also MdDialogueRef.
The MdDialogueRef gives me access to the angular component, the dialogue so
that any interaction on the dialogue will be able to respond to that.
And this will be imported from @angular/material.
So this component now becomes available for us.
Now, once we do this, let's now go and
configure our login component template file.
Opening the login components template file, I'm going to replace this
with <md=></md=> Toolbar,
you'll already know the toolbar angular material component and
to this toolbar I'm going to add in a MD dialogue title.
The md-dialog-title is a directive that is provided
by the dialog component in angular material, sorry md-dialog-title.
So this would display as a title for my dialog box.
We'll see the result of this in a short while.
So, and also I will set the color of this to
the primary color in my angular application.
So in here let me close off the toolbar.
Inside this toolbar, I'm going to include a title called Login.
And also define a span with the class Flex-spacer.
So you see that I'm going to space out whatever I'm going to include
later on by using the flex-spacer.
So this part, which would be a button.
This button would be positioned to the right edge in my toolbox.
So this is md-button.
md-dialog-close.
So the dialog-close directive turns this button into
a button richment clicked, and close this dialogue.
Then I would say × so I'm going to include times.
The cross in the button here.
So that will prepare my toolbar button here.
Now, in order to make a Component into a dialogue component.
We need to go into our app module.
In the app module, along with the declarations import providers,
we also need to include one more Property called as entryComponent.
This entryComponent specifies a list of components that are not
directly used in our
application part will be triggered by another part of the application.
So we will include the LoginComponent as an entryComponent.
Now what this means is the LoginComponent will be triggered by a click
In another component.
And then this will neither be part of the router module
that we have seen, nor will it be a component that will be
explicitly included into the template of another component.
Instead, this component will be opened through code.
Now, how do we open that?
That I will come to in the next step.
Earlier we had already included a link into the tool bar of our header component
and named that link as Log in.
Our expectation was that when the user clicks on that log in link,
then this dialogue will pop up on the screen.
So to enable that behavior, we need to go to the header component,
start script file and set it up to open that dialogue Components view.
So to do that, We go to our head of component and
then in here, we will import the MdDialog And
MdDialogRef, just like we did with the log in component.
This would be imported from Angular Material.
And also I'm going to import the LoginComponent
that we have already design, and
this LoginComponent is in login and
login component.
In order to trigger the dialog in my constructor for my header component,
I'm going to include
a reference to the MdDialog in the constructor.
Now, once this is available, then inside my code I need to create this
openLoginForm method that I had already included for the link.
In my header components template file.
In the open login form method, I'm going to do this dialog.
So the dialog service provides a method of.
Opening a dialogue here.
So this dialogue open and
this will open the login component for the dialogue.
I can also specify the width and the height for
this view that the login component will pop up, the dialogue
view that the log in component Will enable us to pop-up on the screen.
So here, let me specify the width as,
400 pixel.
And height is 350 pixel here.
So with this, my dialog box will now pop-up whenever I click
on the login link in my applications toolbox.
So, notice how the dialog is open.
The dialog component is open.
So we say this dialog which is of course as we see of the type MD dialog.
And then, this provides a method called open which takes a first parameter
which is the component whose view will be included inside my dialog.
View and then also I can specify the width and the height.
This is optional.
So with these changes,
let's save the changes then take a quick look at what our application will do.
And how it'll pop up that dialog view on the screen.
So let's say, well, the change is to the files.
Going to our application in the browser, you see now that in the.
Header in the toolbar of the Header component,
we now have a Login button on the right edge.
So you can see how the Login button has been
created using the Font Awesome icon and the Login here.
And then note that the use of the span with the flex spacer introduces this
arbitrary amount of space such that
this button is pushed to the right edge of the screen here.
So this is one way you can Position items in your Tool Bar.
Let see what happens when we click on the Login link here.
So when we click on this link,
you immediately see that a dialogue box pops up upon the screen.
The size of this dialogue box was set up in our header component there.
So and also the Dialog box has
template, now contains just a toolbar with Login and
this button here till right here.
Now, if we wanted to dismiss the dialog box, I can simply click on this and
then the dialog box will be dismissed.
Now the alternative is that you can simply click on any of the location other than
the dialog box and the dialog box disappears.
If you come from the bootstrap world,
this is the same as the models that are supported in bootsrap.
So this is how you can pop-up information on top of
your web applications view using a dialogue component in
Angular material.
So with this, now, of course what we want to do is to
include a form into this dialog.
View here so that the form built using the angular template
forms will enable our user to type in their user name and password.
So let's go to the next step of constructing the form inside
the view of this log in component.
Going back to our code here.
Now in here I'm going to include a form as you would expect
the form element will enable label as the designer form here.
So include the form here.
Now for this form I am going to also specify a novalidate attribute here.
Meaning that.
The default HTML 5 validation should not be applied to this one.
Instead, we will be leveraging the angular support perform validation exclusively for
validating this form.
So that is set up of the form.
Now, inside the form, obviously, you want to add information into the form.
So this is where I will leverage the support that Angular Material provides for
the form elements, I am styling the form elements.
If you were using Bootstrap, you will use Bootstrap support for
styling the form elements.
Now Angular Material provides interesting set of components for
styling the form elements.
So here, I'm going to do a p here, and inside was p,
I'm going to include the elements in the form.
So this is where I'm going to leverage an Angular Material
support called md-input-container.
So this md-input-container, as you expect,
is the one that would contain an input element for my form.
So, inside this md-input-container, I can now define an input.
We are all familiar with the input tag from HTML.
So, I'm going to simply use the input to this input.
The angular Material provides a directive called as mdInput,
which enables you to style this as an Angular Material input element, mdInput.
And then, we're going to also define for this, placeholder,
you're all familiar with placeholders for input elements.
So, I will specify the placeholder as Username.
Obviously, you're going to see why we have this here.
And the type for this is text.
So far so good, all this looks quite familiar to you.
And, I will say,
required, so this element will be required.
Now, the next part, this is a Username in a login form along with a username,
you will normally also type in the password so
I'm going to just copy that part and then create another element
here, Called as that password.
So the place word here will be, placeholder will be Password,
and the type will be password type.
So now, I have two elements in my form here, okay?
Username and a Password, so far, so good.
And also, I'm going to include one more element here from Angular Material
called md- checkbox.
This checkbox will as you expect, create a checkbox in the form.
So to this checkbox, I will add in some more information a little bit later.
And so, for the checkbox there, the text would be, Remember Me.
So this would give me a checkbox in my login form which the user can check
in order for the application to remember the user's credentials or not.
You have seen these kinds of login forms on many websites.
So, with this, we know have three elements in my form here,
the Username, Password, and also the Remember Me.
Now, together with this, we will also define the name attributes for these.
So, for the username I would define the name attribute as username, obviously.
And for the password, the Attribute would be password.
And also for the Remember Me, I would define the attribute
to be remember here.
Okay, now we have three items in my form.
Now, in order to activate this form, you recall that we need to use
two way data binding between our elements in the form and our JavaScript code.
So let me quickly jump to the login components JavaScript code.
And here, I'm going to define a,
user variable here.
I'm not going to give it a type at the moment, later on,
we will define a user class.
And then, assign the user here to that user class, for the moment,
we're going to just leave it as such and I will define one property
here by default called remember false here for this user.
Now, why do I need this JavaScript object here?
Now, I'm going to bind in the form elements to this JavaScript objects.
So that any changes that I make in my form elements will automatically
make changes to this object and this object enables me to retrieve
their form information and use it within my Angular application.
We'll see how we do that a little bit later.
Now, that we haven't introduced this user app JavaScript
object into our code, let's jump back to our form template.
And then, do the two-way data binding between this user object and
its properties, and the form elements.
Going back to my form, what I'm going to do is to use an ng model attribute for
this form element here, the first one for the username.
I'm going to use the banana in a box way of specifying things.
So, I would say ngModel.
So you recalled that the ngModel
attribute directive allows me to do the two-way data binding.
So this ngModel directive, I'm going to
bind this to the user object that I have defined in my JavaScript class.
And then inside the user object, I'm going to define a property, call this username.
Right now the user object doesn't have that, but, when this form element is
modified that username property will be created in the user object.
And any input that I give in this input element
will be automatically tied into that username
property of the JavaScript object layer.
Now similarly, I will go the password here, the second one, and
the password also, I'm going to tie it in using the two-way data binding
with ngModel and I'll say, ngModel,
banana in a box = to user.password.
What else do you expect?
User password, so now, the first input element I have tied into username and
the second one to the password.
So, the username and password any changes that I make to these input elements
will be automatically reflected into the JavaScript object in my code.
Because of this two-way data binding, using the ngModel directive here.
Now, similarly, this checkbox value,
also I'm going to tie it in into the remember
property that I defined already for
my user JavaScript object.
So I would say, user.remember.
So if you are curious about how this form looks like at this moment,
what we're going to do is, right up there, I will include a p element.
And then inside this p,
what I'm going to do is I'm going to
display the user object from my class.
Recall that this interpolation can be used to define,
to access the user object there.
Now I'm going to display this by filtering it through a pipe, the JSON pipe here.
So the user object will be filtered through the JSON pipe, and
then shown as a JSON object in my login components viewed.
Now, obviously, if you create forms that you use in your Angular application,
you should not be including it there.
The reason why I put it there is so that you can see as you type in to
the input element, you would see the changes immediately reflected there.
Now, once that application is completely ready, you need to remove this from your
application because that is not something that you want to see in your application.
But just so that you see the two-way data binding,
I have included that into my applications view there.
Let's save the changes.
Going to my Angular application in the browser, let me click on the Login
component and then you immediately see that form pop-up here.
And with the Username and Password elements and
then the Remember Me element here.
Now, this Remember Me, if you click on it, you notice how
the value of the remember property is changing between true and false.
If you click it, it changes to true, if you unclick it, it'll change to false.
Similarly, if you now type in the Username, You
immediately see the username property appear in
the user object there, and then password too.
So now you see that any changes you make in your template will be immediately
reflected into the JavaScript object there.
That is an illustration of the two-way data
binding in action in your Angular application.
I see that this form is a little bit small.
So maybe I should increase the width a bit more.
I should increase the height of this form a little bit more.
So let's change the width and the height attributes for
this form in the header component.
Going to the header component, I will change this width to say,
500 pixels, and then the height to say,
450 pixels.
Now again,
you can adjust these values until you get a form that is satisfactory for you.
Of course, a form is of no use if you just type information into the input field.
You would rather submit the form once the form is filled.
So how does Angular support submission of forms and
how does Angular handle the submission of forms?
So this is where we're going to leverage the use of buttons that you can include
a submit button that we're going to include into our Angular application.
So coming down to this form here,
I am going to now surround this p inside
a md-dialog-content tag here.
So this is the dialog content here.
In addition, the dialog component
in Angular provides also
a md-dialog-actions, Directive.
So inside here, I can now include button stitch.
You have seen similar things with
the card component earlier with the Angular material.
So inside my dialog actions, I'm going to now
include a span with the class="flex-spacer."
So you see that whatever comes after this will be displaced to the right,
as much as possible.
And then, I will include a button here with md-button,
and then md-dialog-close.
So you see the md-dialog-close attribute directive being used here.
And this would be the Cancel button.
So when you click on the Cancel button,
you're going to cancel the submission of the form.
Now, this second button which would be acting as the Submit button for me.
So I would say button type="submit", so this would be the Submit button.
And then I would add the md-button class to this.
And then also add some classes to this button.
So I will set the background of this button to background-primary,
which is a CSS class that I have already defined in my styles.scss file there.
And then text-floral-white, so
that foreground text will be white in color.
And then the button I would call it as the Login button there.
So this should display two buttons at the bottom of the form,
a Cancel and a Login button there.
Now obviously,
when the Login button is clicked, this would result in a submission of the form.
So how is the form submission handled in Angular?
So this is where we come to
the form element here, and
then add in a ngSubmit directive here.
And then, the ngSubmit will result in a call to a method called onSubmit.
This onSubmit method should be implemented inside my login components.
Type script file there.
So let's move to the login component start script file.
In the login component start scrip file,
I'm going to include a onSubmit method here.
So this method will trigger whenever the user submits the form.
So, when the user summons the form,
I'm going to simply do a console log of the user.
Object here, so, their is a console.log, this.user.
Right now, when the form is submitted, I have nothing to do,
because I don't have a cyber site, that will authenticate the user, and so on.
So, let me come, later on In this specialization.
For the moment I'm just going to capture the user object and
then put it onto the console.log of my developer
tools in my browser so that we can watch this.
And also I want you to dismiss the dialog when the user clicks on the login form.
So one the information is obtained, I can then
Call this dialogRef.close.
What is this dialogRef?
This dialogRef is something that I would define
here as a reference to
the MdDialogRef,
and then the LoginComponent.
So this is how you define this variable called dialog ref in the constructor.
So this will return a reference to
my dialog which contains the log in component here.
And then when I invoke the closed method of that,
then the dialogue box will be closed from my view.
So essentially, earlier we saw that by clicking on the cross
in the toolbar of my dialogue view, I was able to close the dialogue.
Similarly, when I clicked outside the dialogue view,
I was able to close the dialogue.
This third way is a way of closing the dialog from your JavaScript code.
So here you see that when the Submit method is invoked
after I collect the value, then I will Post the dialog at that point, so
this is the behavior that you have seen with many log in forms on many websites.
We can do more inside the on submit method here but
that will be left over for later on in this specialization.
Now with all these changes, let's save all the changes.
And then take one final look at our
LogInComponent view inside my dialog view and
also see how the template form is handled in Angular.
Going to the browser, I'm going to open the Developer
tools here and the JavaScript console of my developer tools at the bottom here.
So, whenever something is printed with console log,
it will show up here in the JavaScript console here.
So, let's click on the login, and you see that login form pop up here.
Now, with a larger login form like this it looks better, so
let me type in a user name and a password.
And then click on Remember Me, and then when I click on the Login
button you immediately see that in the JavaScript console,
the value of this of object is printed out.
So, you can see the three properties of the user object being printed out there.
Remember the true user main and password, define there.
And also, you notice when we clicked on the log in
button where form automatically disappeared.
So as you can see, you can also click on the console to make the form disappear.
You can also click on this button up there to make the form disappear.
Let's submit one more.
It doesn't matter, just type in something and
notice when I click on the Login button that phone disappears and
then you'll see the resulting value being printed into the consult log.
So this is because the on submit method is invoked and
the value is printed into my JavaScript console.
So you see that the console log enables you to do some debugging also
within your angular application.
With this, we complete this exercise.
In this exercise, we learnt how to make use of the dialog component from angular
material to design a dialog to show the Login form for our Angular application.
We also saw how we can use the Angular support for
template forms to create a form within our login component's template and
then activate the form, so that even the user can submit information
using their form to our Angular application.
This completes this exercise.
This is a good time for you to do a git-commit with a message
Template forms part one
