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 Animations Part 1
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End JavaScript Frameworks: Angular
502 个评分
The Hong Kong University of Science and Technology
502 个评分
课程 2（共 5 门，Specialization Full Stack Web and Multiplatform Mobile App Development）
从本节课中
Client-Server Communication
In this module you will explore client-server communication using both Angular HTTP module and the REST API. You will get a brief introduction to animation support in Angular and create a custom attribute directive. You will also learn about testing, building and deploying Angular applications.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
As we learned in the previous lecture,
animations add a lot of intrinsic value to your application.
It adds to a better user experience.
Now, obviously, that doesn't mean that your true animations all over the place,
just for the sake of doing animations.
You put animations in place for the sake of making their user experience better.
In this exercise, we'll do our first animation within our angular application
that we have developed so far.
And along the way,
learn how animations can be implemented in an angular application.
We'll continue this thread in the second part of the exercise where we'll
add more animation to our angular application.
When we started out this course,
in the very first exercise with angular,
we had already added in that animation module
into our angular application in the app.module.ts.
So we have important animation right there.
Now, the next step is to go to the components and then add in the animation,
wherever it is, request.
The first animation that we're going to add is in the dish detail component here.
So going to the dish detail component,
let me import a few classes here.
I'll import trigger, state, style, animate,
and transition from angular animations.
Now, once we import these we can make use of these in constructing our animation.
So, how do you add animation to a component?
We will add the animation triggers into the component decorator here.
So going into the component decorator after the style's URLs,
I'll add in the animations as a property with them there.
And then, in here, I'm going to define a trigger which I call as
visibility trigger and I'm going to define the visibility trigger inside here.
Now, for this visibility trigger,
I will define two states.
I will define one state as 'shown' and I will define
a second state as 'hidden'.
So, I have the flexibility of defining my states like this.
So, for the shown state,
what is it that I want to apply?
So, for the shown state,
I will apply the style as follows.
So, the styles that I'm going to apply for the shown state is l will do
transform and the transform I am going to
apply is a scale of one point zero.
So, I want to show it in its normal size and
in opacity of zero.
So, this is how I define the shown state.
So, and the hidden state,
I define the style as transform.
I will say scale, 0.5.
You can play around with this numbers to see whether the animation is what you desire.
I also played around with these numbers until I got something that I was satisfied
with and zero or for their further shown state,
I will put the capacity as one.
Capacity one means it's completely visible.
Basically, zero means it's completely hidden.
Now, I have defined two steps here,
shown and hidden state.
Now, the transition between these two states,
I'm going to define here as whenever I move from
any state to any state it doesn't matter which state to which state I move.
The transform is done with animation
of 0.5 seconds or 500 milliseconds and I will ease-in-out.
So here, what I'm specifying is that if I
move from shown to hidden state or from hidden to shown state,
I will move within 0.5 Seconds or 500 milliseconds and then,
I will do the transition by easing in and out.
So it won't be a linear transition,
it'll be slowly going in and then easing and then ease out the transition.
So that it won't be a jerky transition from one to the other.
So, you can use this ease in or ease out or ease-in-out
to specify how you want the transition to happen.
So now for this animation,
I have specified the visibility as the trigger for this animation.
Now to enable this animation to work correctly,
I'll go into my digital component and then will specify
within this component the initial value for visibility.
So I will say visibility is initially set to
shown and then whenever I am
changing from one dish to another and this happens whenever I am fetching the dish here.
So whenever I'm changing the dish from one dish to the other,
this is cost whenever that route parameter changes.
So on that point,
I'm going to apply the animation.
I'll make that trigger go from shown to hidden state and then
back from hidden to shown state when the dish is available.
So to apply that transformation,
I'm going to enclose this statement inside
a block here in this arrow function and then also,
define this visibility here as.
So when I am transitioning from one state to another.
So as I begin to fetch the dish information from the server side,
I will first hide that current dish by setting that visibility value
to hidden meaning that
the current edition that is being displayed will be hidden from the view.
And then, when the new dish becomes available,
it'll pop back into the view.
So to do that when my dish becomes available in the second part,
in the subscriber part,
I will say as the last statement in that block,
I will say this visibility music
will do, shown here.
So my view becomes visible at that point.
Now, I am not applying this to
the error message because I'm going to apply this visibility only
to those parts of my template where my dish is actually being shown.
Now, if there is an error then I just want to hide the current dish and
then only show the error message in the view there.
So with this changes to my dish digital component.
So you can see again, explaining this in one more time then I begin
that fetching of the new dish upon change of the route parameter.
I will set the visibility to hidden,
so that current dish that is being displayed in the view
will hide itself and then when the new dish becomes available,
so that will happen when the subscribe is called when the observable becomes available,
and then when that dish becomes available and then I set this dish
to do the dish which came back from the observable.
At that point, I will restore the visibility to that shown state,
so that my new dish that I fetched can be shown on the screen.
With this change, I now go to the template file and within the template file
I'm going to apply the visibility to both the dish here.
So the first, where I am displaying the dish,
I will apply the visibility trigger to that dish and then I will set
that equal to visibility,
which is the variable that I have defined in the code there.
Now, I apply this to the dish here and also,
apply the same thing to that second to where I am displaying the comments.
And, that's it.
So let me save all the changes and then we'll go and take a look at how
this animation works in our example.
Going to the browser,
now I am displaying the menu.
Let me select one of the dishes and then move into the view of the dishes here.
So when the dish is displayed,
notice that any time I move from this dish to the next dish.
So by clicking the light then
the dish disappears and then when the new dish becomes available.
The view, again, becomes visible and then the new dish is shown.
Similarly, I can do one more and then notice that the new dish,
as soon as the information becomes available it, becomes again visible.
So this is the transition that I am applying in this example here.
So going back, you can see the same behavior again repeating itself.
This little user interface change adds a lot
of value to the way the user perceives your application.
As you realize, this doesn't add much to the functionality of your application itself,
but adds to a better user experience.
And that is where we apply animations judiciously within
our application to make certain user experience
more meaningful to the user that is viewing
your angular application or viewing your mobile application,
which we will see in the later courses.
This completes this exercise on animations.
We'll continue the animations exploration
into that second part of the exercise that comes up right after this.
This is a good time for you to do,
get comment with the message: Animations Part 1.
