Day 1
Day 2
Day 3
Day 4
Services in AngularJs (lab)
a. Add
Service from CLI
Creating the services in angulajs.
Once you create the Services you will get the services files
like
b. Register
Service to Application
Service by default not register to app.module.cs, you need
to register it by own, as based on the requirement you can register it to
component where it require or you can register to the root level so it can
share across the component.
There are two way to register the services into application.
App.module.ts [Global Level]
You need to register it for provider
Component Level [Component Copy]
c. Creating
and Register Type
Create a type as Course.ts it will used to define the types.
Declare an interface and define some variables and use it as type.
Now use it to course.ts in
course.service.ts file, Import course.ts
d. Service
Implementation
@Injectable is
use as the identifier that the class is service.
Now declare the courselist
variable and assign the values from constructor as:
Before that you just need to import the course.
Assets Folder having
images folder and contains images as [ That will help to display the images in
application]
Now create the two components to show the course details, that you need to create in home.
e. Course.component
It will use to show the course details what you have.
Now to show the list of course, you need to define below
template in the course.component.html as like below.
Defining the style classes on cource.component.css
Now declare an input variable in course.component.ts to view
the list of courses
f.
Courselist component
We will get the entire course list from the services. So, we
need the list of course list assign it into the services.
Now call the services method as
Than call the courses component multiple times in courselist.component.ts
g. Home.component
Now register it into home component in home.component.html
h. Output
Restful Angular Services
Observable Pattern
Here we use the observable pattern to call the Asynchronous
web services (restful services).
observable will subscribe to the information from the
source, the source may send information multiple times subscription can
terminated(unsubscribe) at any point.
[That you can’t do with promise resolve pattern]
Array Notation:
In arrow function expression has a shorter syntax than a
function expression
Regular
Javascript function
var a = function () {
Return "test";
}
Console.log(a());
Array
notaion for creating function.
For parenthesis
var a = () => "test";
var a = (param) => param;
var a = () : void => "test";
Call Back function:
function extern(c){
console.log("line 1 is extern");
c("data
of the extersn"); // c is function, which will call directly by passing the
parameter c
}
extern(function (data) {
Console.log(data);
Console.log("line 2 will call")
});
Now we have same type of problem on binding the call back
function as below from defining class and calling some outside method.
class check {
constructor() {
this.info = "init data";
}
fun()
{
extern(function (data) {
this.info = data;
}.bind(this)); // if there is no bind than will give
error as
}
display()
{
Console.log(this.info);
}
}
function extern(c)
{
console.log("calling the
value");
}
var o = new check();
obj.fun();
obj.display();
|
Now to use it in array notation as simple and don’t need
bind.
fun()
{
extern((data) => {
this.info = data;
}); // if there is no bind than will give
error as
}
|
Lab 6
a.
Supporting
Create a new services
as review on which will help to create the restful call from services.
Register services into app module as like below.
App.module.ts
Pass it to provider:
Create new Type as review.
Create two more components to view the data as reviews/reviewlist and review/review
App.module.ts
b.
Import HttpClient
In previous version of Http services we are using Http, and
for it we need to have many lines of code.
Now in angular 4 we are using the Httpclient and it is just
a module here. It reduces the line of code here.
app.module.ts
Import httpclientmodule into
Register it into imports.
c.
Review.services
Review.services.ts in review services call that restful services
by using the observable patterns.
just injecting the HttpClient into constructor.
d.
Review.component
It is child review component route/reviews/review
Review.component.html
It is child review component route/reviews/review. Add the
templates over here.
Review.component.css
Add some CSS to see it better for same route/reviews/review component.
Review.component.ts
Defined a @Input variable for which values will be pass from
reviewList
e.
ReviewList.component
It is child review component route/reviews/reviewlist.
ReviewList.component.ts
Now inject the
service here and call the service method which will give you the
callback result or error. Once you get
that assign it to reviewList variable.
Reviewlist.component.html
Call the app-review component and passing the input to
[review] component, by looping the value.
f.
Reviews.component
Reviews.component.html, here you need to call the review
list.
Reviews.component.html
g.
Output.
You can see the output as
No comments:
Post a Comment