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 Service Basics
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Front-End JavaScript Frameworks: Angular
635 個評分
The Hong Kong University of Science and Technology
635 個評分
課程 2（共 5 門，Specialization Full Stack Web and Multiplatform Mobile App Development）
從本節課中
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.
與講師見面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
[MUSIC]
Now that we have had a quick introduction to the MVM and
MVVM frameworks, Angular services, and also dependency injection,
let's now move onto our next exercise where we will create our
first Angular service nd then inject it into our component and
make use of it within our component.
To get started, go to your application in
the editor pad within the App folder,
create a new sub-folder and name it as Services.
Now we will make use of Angular CLI to add a new service to our Angular application.
To do that, at the prompt type ng
generate service, and services/dish.
So this will create a new service in the Services folder named dish service.
So, once this is created, you see that two files get created
by the Angular CLI called dishService.ts and dish.service.specter.ts.
This one is used for testing our Angular service while we'll talk about later on.
The second one is where we will create our dish service and
then inject that into our app module and make use of it in our menu component.
Going to the editor, let's open the dish.service.ts file.
Now, when you open this file, you immediately notice here the very first
statement there saying, import {Injectable} from '@angular/core'.
So this injectable allows us to define this injectable
decorator to any class that we defined here.
So you can see that we are defining a class here called a DishService.
By using this injectable decorator to this dish service,
we are making this object now injectable within our application.
So this is what enables the dependency injection to be used within our
application.
So once you declare the class as injectable,
let's now configure our DishService to provide some information for us.
So in here, I'm going to import,
The Dish class from the shared folder,
and also import,
The DISHES constant from,
Shared folder here.
So once I have imported this two,
now my service can be configured to provide the value for us.
So inside the service, I'm going to
add in a new method call getDishes, and
this method will return in array of dishes here.
And, so this method will return the DISHES constant
that we have imported into our DishService.
With this, our DishService is now configured to
supply that DISHES JavaScript object array to any
other part of our application that requires it.
Now before that happens, we need to take this service and
then inject into our application.
To do that, we will open the app module .ts file.
So inside the app module .ts file, right after importing
the components right there, I'm going to import the,
DishService right there.
And this is imported from,
Services DishService here.
So once we import that, then we will declare this DishService as a provider.
So if you go into the ng module decorator, so
you see this third property here called providers.
So we have declarations, imports, and providers.
So whenever you have a service that you want to make available for
all the components from part of this module.
Then you will specify that as a provider within the module here.
So right there, I'm going to say, DishService, here.
So with this, my DishService now becomes available for the rest of the application.
Now, how does this happen?
The Angular's dependency injectable looks at this information that we
have declared here and then decides that it needs to create a DishService and
injects it wherever it is required.
Now, how do we make use of that service?
We see that in the menu component we were earlier getting
the DISHES constant direct by importing from the shared dishes file here.
Now this is not the ideal way of obtaining the information,
instead of tying in the information directly into your component,
you should rather let a service fetch that information for you.
Later on, we can redesign our service to be able to go and
fetch the same information from a back-end server if you so require.
Indeed, that is what we'll be doing in some of the later exercises.
So you will delegate the responsibility of fetching the information to the service
and then you'll just make use of the service within this menu component.
So we will delete this dishes component from there and
instead we will import that DishService here.
And this DishService is imported from,
services/dish.service file here.
So after adding this now we have done one part of the job.
Now we need to make this service available for our component to make use.
So that is where we will come down to this constructor here.
In this constructor, so
now you see the use of the constructor within our class here.
So in this constructor we will see
private dishService and DishService here.
So this is of the DishService type, so
when you declare this in the constructor, when this component is created,
then this DishService that you have injected into the app module.
When you inject that into the app module,
it'll create one single dishService object.
And that dishService object will be made available to you within your menu
component here.
So now you can then call upon the methods that this DishService provides for
you in order to do the work on your behalf.
So once you put that in there,
now we realize that we no longer have this DISHES constant here.
So I need to somehow fetch this information.
Now this is where I'm going to leverage the service that I have available to me to
fetch the information for us.
Where do we fetch this information?
So, this is where we're going to take the help of this life cycle method called
ngOnInit.
So, when you declare this life cycle method called ngOnInit in your
application, so you see that in the class, you say implements the OnInit.
So the implementation of this OnInit requires you to
implement this ngOnInit method as part of your class here.
So inside this ngOnInit method,
you can now ask the service to fetch this information.
Why is that so?
This life cycle method will be executed
by the Angular framework whenever this component is instantiated.
So whenever this component gets created, this method is going to be executed.
So when that method is executed, then at that point I can go and
fetch the dishes from the dishService.
So I can say dishService, and
then you'll know that you have the getDishes method inside the dishService.
You can invoke upon the method to fetch the dishes for you.
Now when we do this, then the dishes object will be supplied by
the service to us through this getDishes method.
And that can be put into our dishes local variable that we have defined here.
So with this, we complete the update
to all of our application files.
Let's go and take a quick look at the resulting Angular application.
Switching to the browser, you can now see that in the browser the Angular
application renders just like before.
In this version as you have seen, the information about the dishes
is going to be fetched into your component by making use of the service.
The service in turn is going to fetch in this information for you.
Now at this moment we are keeping the service very basic.
The service simply returns this constant value that we have defined here.
Later on, you can imagine that you would be extending the service to go and
fetch this information from the back-end server.
When that happens,
the fetching of information is not going to be instantaneously any more.
That is where we would need the help of promises and
also the reactive JavaScript approach for supporting this delay and
dealing with the delay in fetching the information within our application.
We'll talk about that in more detail in the next module.
For now, our application will run just fine, so you can select any one of
those dishes and the information will be displayed just like before.
With this, we compete this exercise where we learn the basics of Angular services.
And we also saw how we can make use of the Angular service,
within our applications component.
This is a good time for you to do a git commit with the message basic services.
[MUSIC].
