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 Service Basics
Loading...
來自 The Hong Kong University of Science and Technology 的課程
Front-End JavaScript Frameworks: Angular
503 個評分
The Hong Kong University of Science and Technology
503 個評分
課程 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 MVC and MVVM frameworks,
Angular services, and also dependency injection,
let's now move on to our next exercise, where we will create our
first Angular service and then inject it into our component.
And make use of it within our component.
To get started, go to your application in Editor and
within the app folder create a new sub folder and
name it as service [INAUDIBLE].
Now we will make use of the 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 the dish service or
TS and dish service spectra.ts.
This one is used for testing our angular service which 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.
You see that when the services created it,
it says the service is generated but not provided, what exactly does this mean?
We'll see how we will provide the service to our
app module in one of that later steps.
Going to the editor, let's open the dishservices.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 define here.
So you can see that we are defining a class here called as DishService.
By using this injectable decorator to this DishService,
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 this 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've imported these two,
now my service can be configured to provide the value for us.
So inside here, we'll say.
So inside the service, I am going to add in a new method
called getDishes, and
this method will return an array of Dishes here.
And so this method will return the DISHES constant,
what we have imported into our Dish service.
With this our Dish service 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 the service and
then inject it 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/dish.service here.
So once we import that, then we will declare this dish service as a provider.
So, if you are going to the ng module decorator,
you see this third property here called provider.
So we have declarations, imports and providers.
So whenever you have a service that you want to make available for
all the components that form 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 injector will look at this information that we have
declared here and then decide that it needs to create a dish service and
inject 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 directly 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 backend server, if you so require.
Indeed that is what we will be doing in some of the later exercises.
So you will delegate the responsibility of fetching the information to the service
and then you will just make use of the service written this menu component.
So we will delete this Dishes component from there,
and instead, we will import the 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 the service available for our component to make use of.
So that is where we will come down to this constructor here.
And in this constructor, so
now you see the use of the constructor within our class here.
So in this constructor,
we will say private dishService and
dishService here.
So this is off the dishService stock.
So when you declare this in the constructor.
When this component is created, then this dishService that
you have injected in the app module, when you inject that into app module.
It'll create one single dish service object.
And that dish service object will be made available to you within your
many 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 these 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 off 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 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 this method is executed, then at that point I can go and
fetch the dishes from the dishService.
So I can say this.dishService.
And then you know that you have the getDishes method inside the dishService.
We 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 dish's local variable that we have defined here.
So with this, we complete the update to all of our RAM.
Applications files.
Let's go and take a quick look at resulting Angular application.
Switching to the browser, we 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 in to 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 will be extending the service to go and
fetch this information from a back-end search.
When that happens,
the fetching of information is not going to be instantaneous 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, the complete course exercise where we learned 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 comment with the message basic services.
[MUSIC]
