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
Exercise (Video): Angular Animations Part 1
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End JavaScript Frameworks: Angular
601 个评分
The Hong Kong University of Science and Technology
601 个评分
课程 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
[MUSIC]
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 you throw animations all over the place
just for the sake of doing animations.
You put animations in place for the sake of making the 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 will 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 the animation module into our Angular application
in the app.module.ts5, so we have imported the animation module right there.
Now the next step is to go to the components and
then add in the animation wherever it is required.
The first animation that we're going to add is in the dishdetail component here.
So going to the dishdetail 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 styles URLs,
and add in the animations as a property within 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, I will do transform, and
the transform that I'm going to apply is a scale of 1.0.
So I want to show it in
its normal size and
an opacity of 0.
So this is how I define the shown style.
So, and the hidden state I define the style as,
Transform, I'll say scale(0.5).
You can play around with these 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 0, or for their further shown state, I will put the opacity as 1.
Opacity 1 means it's completely visible.
Opacity 0 means it's completely hidden.
Now, I have defined two states here, shown and here in 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 ease in 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've specified
the visibility as the trigger for this animation.
Now to enable this animation to work correctly,
I'll go into my DishdetailComponent, and then I 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 am changing the dish from one dish to the other,
this is caused whenever the route parameter changes.
So at that point, I'm going to apply the animation.
I'll make the 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.
So 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 the current dish by setting the visibility
value to hidden, meaning that the current dish 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 subscribe part, I will say as the last statement in that block,
I will say this visibility is equal to 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 correct dish.
Then, only show the error message in the view there.
So, with these changes to my DishdetailComponent.
So, you can see again, explaining this in it one more time.
When I begin the fetching of the new dish upon change of the route parameters,
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 that observable becomes available.
And then, when the dish becomes available and then,
I set this dish to 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 have 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 div where I am displaying the dish I will
apply the, Visibility trigger to the 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 the second div, 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 them 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 anytime I move from
this dish to the next dish, so by clicking the right.
Then that 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 explorations into that second
part of the exercise that comes up right after this.
This is a good time for you to do a Git comment with the message animations,
part one.
[MUSIC]
