Others

Thursday, 19 July 2018

Angular 4 Tutorial - Day 3


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