python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
7 Services

How to Setup and Create Angular Services?

How to setup and create services?
Before starting to create a service, you just need to set up a dev environment.
Install Node.js and npm if they are not already on your machine.

Then install the Angular CLI globally.
npm install -g @angular/cli

Angular CLI tool will allow you to easily and quickly generate services, components, pipes, and many more files for your project.

Now, create a new project using the CLI command -
ng new MyProject

And go to your created project directory and launch the server.
ng serve --open

Now come to service - execute below the command for generating service class.
ng g service MyService

It will create the two files in the folder - src/app/
1.      my-service.service.spec.ts
2.      my-service.service.ts

Now, import my service file into the angular module - app.module.ts file. It looks like this.
import { AppComponent } from './app.component';
import {MyService}  from './my-service.service';//Import Service

//AppModule class with @NgModule decorator
@NgModule({
  //Static, This is the compiler configuration
  //declarations is used for configure the selectors.
  declarations: [
    AppComponent
  ],
  //Composability and Grouping
  //imports used for composing NgModules together.
  imports: [
    BrowserModule
  ], 
  //Runtime or injector configuration
  //providers is used for runtime injector configuration.
  providers: [MyService],
  //bootstrapped entry component
  bootstrap: [AppComponent]
})
export class AppModule { }

And let’s see the created service class -my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {

  constructor() { }
}

Now you need to create service methods to get, post, put, and delete the users.
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }

  //I’m using the static data
  //You can also fetch the data using HttpClient service for backend APIs.
  users = [
     "id": 1"name": "Anil Singh"'age' :32 },
     "id": 2"name": "Aradhya" , 'age' :32},
     "id": 3"name": "Reena Singh" , 'age' :32}
  ]

  /* (method) MyService.getUsers(): {
    "id": number;
    "name": string;
    'age': number;
    }[] */
  getUsers(){
    return this.users;
  }
}


Now, use this service in the user component for display on UI - my-user.component.ts
import { ComponentOnInit } from '@angular/core';
import {MyServicefrom '../my-service.service';

@Component({
  selector: 'app-my-user',
  templateUrl: './my-user.component.html',
  styleUrls: ['./my-user.component.css']
})
export class MyUserComponent implements OnInit {
  userList =[];

  constructor(private service :MyService) {
    //Get the user list by using the my service.
    this.userList = service.getUsers();
  }

  ngOnInit() { }
}


And my-user.component.html
<h4>User List -</h4>
<table border="1">
  <tr>
    <th>ID</th><th>Name</th><th>Age</th>
  </tr>
  <tr *ngFor="let user of userList">
    <td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.Age}}</td>
  </tr>
</table>

Finally, you got the user list on your components HTML.

For more detail kindly refer the link.... 
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions