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";
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("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";

        extern(function (data) {
            this.info = data;
        }.bind(this)); // if there is no bind than will give error as



function extern(c)
    console.log("calling the value");

var o = new check();

Now to use it in array notation as simple and don’t need bind.
        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


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.
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
It is child review component route/reviews/review. Add the templates over here.

Add some CSS to see it better for same  route/reviews/review component.

Defined a @Input variable for which values will be pass from reviewList

e.       ReviewList.component

It is child review component route/reviews/reviewlist.

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.

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.

g.      Output.

You can see the output as

No comments:

Post a Comment