Scribd
Upload
5 views

3. angular lab assignment service

The document outlines the creation and usage of an Angular service, highlighting its task-based nature and reusability across components. It provides a step-by-step guide to creating a custom service that manages an array of hobbies and includes a simple service method. Additionally, it details the necessary updates to the app.module.ts and component.ts files to integrate the service into an Angular application.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

3. angular lab assignment service

The document outlines the creation and usage of an Angular service, highlighting its task-based nature and reusability across components. It provides a step-by-step guide to creating a custom service that manages an array of hobbies and includes a simple service method. Additionally, it details the necessary updates to the app.module.ts and component.ts files to integrate the service into an Angular application.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Lab assignment Angular :

Angular service
Angular services are task-based. Services are reusable code which shared among different
components. Angular provides built-in(HTTP, router, animation, form, UI Library,) and custom
services. services work on dependency injection mechanism.
Services may be written by just defining a typescript(with extension .service.ts) class with
decorator @Injectable annotation. Providers are used to declaring or injecting classes,
functions, and values by which they may be used by the dependency injection mechanism.
Services may be injected in different components, modules, and other services.

1.creating custom service:

We need to crete a service with array of data containing hobbies and an method
hobbies = [
'dancing',
'singing',
'internet'
];

servicemethod(){
return 'Its just a simple service method';
}

Inject this service to component and test it.

Code:

Step 1: Write the following code into service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
// Create array
hobbies = [
'dancing',
'singing',
'internet'
];
constructor() { }
// Create simple angular service method
servicemethod(){
return 'Its just a simple service method';
}

Step 2: Update app.module.ts (Pass the reference to newly created service and add providers)

// Import reference of service


import { DataService } from './data.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
// Add provider
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }

Step3 : Update component.ts as following code

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<p>hi {{data}}</p>
<li *ngFor="let h of itemsarray">
<b> {{h}} </b>
</li>
`,
export
})
}providers:[DataService]
//
constructor(private
itemsarray=[]
data;
}this.itemsarray
//
this.data
Don't
String
useclass
property
method
forget
and
=AppComponent
this.dataservice.servicemethod();
array
to
of
of
=add
service
service
variable
this.dataservice.hobbies;
dataservice:
reference
declartion
{ ofDataService)
DataService{

You might also like