سرویس ها (Services) در انگولار 7 – آموزش انگولار 7

شنبه ۲۶ مرداد ۱۳۹۸
بازدید ۱,۶۵۸ نفر
AmRo
(بدون امتیاز)
Loading...

تصویر angular7-services_6621 سرویس ها (Services) در انگولار 7 - آموزش انگولار 7

سرویس ها (Services) در انگولار 7

در این بخش از آموزش فریم ورک انگولار 7 به مبحث سرویس ها (Services) در انگولار 7 می پردازیم. گاهی اوقات ممکن است بخواهید بخشی از کدهای پروژه در همه جای آن در دسترس باشد. سرویس ها برای رسیدن به این هدف به ما کمک می کنند. با استفاده از سرویس ها می توایند به متدها و پراپرتی های موجود در کامپوننت های مختلف در همه جای پروژه دسترسی داشته باشید.

به منظور ایجاد یک سرویس باید از خط فرمان و دستور زیر استفاده کنید:

ng g service myservice

1	ng g service myservice

مثال:

C:\projectA7\angular7-app>ng g service myservice
CREATE src/app/myservice.service.spec.ts (348 bytes)
CREATE src/app/myservice.service.ts (138 bytes)

C:\projectA7\angular7-app>ng g service myservice

CREATE src/app/myservice.service.spec.ts (348 bytes)

CREATE src/app/myservice.service.ts (138 bytes)

فایل هایی که بعد از اجرای دستور فوق در دایرکتوری app ایجاد شده اند را در تصویر زیر مشاهده می کنید:

تصویر angular7-services_6621_1 سرویس ها (Services) در انگولار 7 - آموزش انگولار 7

دو فایلی که در انتهای تصویر مشاهده می کنید (myservice.service.specs.ts و myservice.service.ts) مربوط به سرویس جدیدی است که در بالا ایجاد شد.

محتوای فایل myservice.service.ts:

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   constructor() { }
}

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

@Injectable({

providedIn: 'root'

})

export class MyserviceService {

constructor() { }

}

در کد فوق ماژول Injectable از angular/core وارد شده و شامل یک متد با نام @Injectable و یک کلاس با نام MyserviceService است. تابع مربوط به سرویس در این کلاس ایجاد خواهد شد. قبل از استفاده از سرویس ایجاد شده باید آن را به فایل app.module.ts اضافه کنیم.

مانند نمونه زیر:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppRoutingModule , RoutingComponent} from './app-routing.module';

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

import { NewCmpComponent } from './new-cmp/new-cmp.component';

import { ChangeTextDirective } from './change-text.directive';

import { SqrtPipe } from './app.sqrt';

import { MyserviceService } from './myservice.service';

@NgModule({

declarations: [

SqrtPipe,

AppComponent,

NewCmpComponent,

ChangeTextDirective,

RoutingComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [MyserviceService],

bootstrap: [AppComponent]

})

export class AppModule { }

در کد فوق سرویس ایجاد شده را با استفاده از نام کلاس آن import کرده و در MyserviceService قرار داده ایم. سپس آن را به بخش providers اضافه کرده ایم. حال در کلاس مربوط به سرویس ایجاد شده، یک تابع برای نمایش تاریخ روز جاری ایجاد می کنیم.

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   } 
}

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

@Injectable({

providedIn: 'root'

})

export class MyserviceService {

constructor() { }

showTodayDate() {

let ndate = new Date();

return ndate;

}

در کد فوق یک تابع با نام showTodayDate که یک نمونه از کلاس Date باز می گرداند را ایجاد کرده ایم. حال برای دسترسی به این تابع در سایر کامپوننت ها می توانید به صورت زیر عمل کنید.

محتوای فایل app.component.ts:

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({ selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

import { MyserviceService } from './myservice.service';

@Component({ selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7 Project!';

todaydate;

constructor(private myservice: MyserviceService) {}

ngOnInit() {

this.todaydate = this.myservice.showTodayDate();

}

برای دسترسی به اجزای سرویس مورد نظر باید آن را import کنید. تابع ngOnInit به صورت پیشفرض در زمان ایجاد شدن کامپوننت فراخوانی می شود و تاریخ را با استفاده از تابع showTodayDate می گیرد و در متغیر todayDate قرار می دهد. حال به راحتی می توانیم آن را در فایل html نمایش دهیم:

{{todaydate}}
<app-new-cmp></app-new-cmp>

1 2	{{todaydate}} <app-new-cmp></app-new-cmp>

استفاده از سرویس در کامپوننت new-cmp که در بخش های قبلی ایجاد کردیم:

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   todaydate;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
}

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

import { MyserviceService } from './../myservice.service';

@Component({

selector: 'app-new-cmp',

templateUrl: './new-cmp.component.html',

styleUrls: ['./new-cmp.component.css']

})

export class NewCmpComponent implements OnInit {

newcomponent = "Entered in new component created";

todaydate;

constructor(private myservice: MyserviceService) { }

ngOnInit() {

this.todaydate = this.myservice.showTodayDate();

}

همانطور که در بالا گفته شد، برای دسترسی به متدها و پراپرتی های سرویس باید ابتدا آن را import کنیم.

کد مربوط به فایل new-cmp.component.html:

<p>
   {{newcomponent}}
</p>
<p>
   Today's Date : {{todaydate}}
</p>

<p>

</p>

<p>

Today's Date : {{todaydate}}

</p>

خروجی برنامه:

تصویر angular7-services_6621_2 سرویس ها (Services) در انگولار 7 - آموزش انگولار 7

اگر شما پراپرتی موجود در سرویس را در هر کدام از کامپوننت ها تغییر دهید، نتیجه کل کامپوننت ها اعمال می شود. برای مثال یک متغیر در فایل myservice.service.ts ایجاد می کنیم.

مانند نمونه زیر:

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   serviceproperty = "Service Created";
   constructor() { }
   showTodayDate() {
      let ndate = new Date();
      return ndate;
   }
}

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

@Injectable({

providedIn: 'root'

})

export class MyserviceService {

serviceproperty = "Service Created";

constructor() { }

showTodayDate() {

let ndate = new Date();

return ndate;

}

حال از این متغیر به شکل زیر در کامپوننت اصلی برنامه استفاده می کنیم:

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      console.log(this.myservice.serviceproperty);
      this.myservice.serviceproperty = "component created";
      // value is changed. this.componentproperty =
      this.myservice.serviceproperty;
   }
}

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

import { MyserviceService } from './myservice.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7 Project!';

todaydate;

componentproperty;

constructor(private myservice: MyserviceService) {}

ngOnInit() {

this.todaydate = this.myservice.showTodayDate();

console.log(this.myservice.serviceproperty);

this.myservice.serviceproperty = "component created";

// value is changed. this.componentproperty =

this.myservice.serviceproperty;

}

همانطور که مشاهده می کنید، مقدار متغیر ایجاد شده را با استفاده از console.log در کنسول می نویسیم. سپس مقدار آن متغیر را تغییر می دهیم. حال اگر این از متغیر در کامپوننت new-cmp استفاده کنیم، مقدار آن برابر با “component created” خواهد بود.

import { Component, OnInit } from '@angular/core';
import { MyserviceService } from './../myservice.service';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   todaydate;
   newcomponentproperty; newcomponent = "Entered in
   newcomponent"; constructor(private myservice:
   MyserviceService) {}
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.newcomponentproperty =
      this.myservice.serviceproperty;
   }
}

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

import { MyserviceService } from './../myservice.service';

@Component({

selector: 'app-new-cmp',

templateUrl: './new-cmp.component.html',

styleUrls: ['./new-cmp.component.css']

})

export class NewCmpComponent implements OnInit {

todaydate;

newcomponentproperty; newcomponent = "Entered in

newcomponent"; constructor(private myservice:

MyserviceService) {}

ngOnInit() {

this.todaydate = this.myservice.showTodayDate();

this.newcomponentproperty =

this.myservice.serviceproperty;

}

در این کامپوننت مقدار متغیر مربوط به سرویس تغییر نمی کند و فقط مقدار آن در newcomponentproperty قرار داده شده است. تصویر زیر خروجی برنامه و مواردی که در کنسول چاپ شده اند را نشان می دهد:

تصویر angular7-services_6621_3 سرویس ها (Services) در انگولار 7 - آموزش انگولار 7

در زیر می توانید محتوای فایل های app.component.html و new-cmp.component.html را مشاهده کنید:

فایل app.component.html:

<h3>{{todaydate}}>/h3>
<h3> Service Property : {{componentproperty}} </h3>
<app-new-cmp></app-new-cmp>

<h3>{{todaydate}}>/h3>

<h3> Service Property : {{componentproperty}} </h3>

<app-new-cmp></app-new-cmp>

فایل new-cmp.component.html:

<h3>{{newcomponent}} </h3>
<h3> Service Property : {{newcomponentproperty}} </h3>
<h3> Today's Date : {{todaydate}} </h3>

<h3>{{newcomponent}} </h3>

<h3> Service Property : {{newcomponentproperty}} </h3>

<h3> Today's Date : {{todaydate}} </h3>

انگولار 7 - Http Client انگولار 7 - مسیریاب (Routing)

دسته ها: آموزش ها - زبان برنامه نویسی Angular

آموزش ساخت اپلیکیشن آب و هوا برای اندروید با زبان Java

آموزش ساخت وب سایت رمز ارز با پایتون (نمایش نرخ تبادل رمز ارزها)

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

فیلم آموزش AngularJS (انگولار جی اس) به زبان فارسی

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش ASP.NET MVC Core به صورت پروژه محور | طراحی فروشگاه اینترنتی

آموزش ASP.NET MVC به صورت پروژه محور | طراحی فروشگاه اینترنتی

آموزش Angular 7

مباحث پایه Angular 7

مثال های کاربردی Angular 7

سرویس ها (Services) در انگولار 7 – آموزش انگولار 7

سرویس ها (Services) در انگولار 7

سورس سیستم مدیریت سلف سرویس به زبان سی شارپ

سورس سیستم مدیریت تاکسی تلفنی به زبان سی شارپ

سورس سیستم مدیریت هتل با زبان C++

سورس ارسال SMS در ASP.NET Core 2.1

سورس نرم افزار پیام رسان به زبان سی شارپ

سورس شبکه اجتماعی تلگرام با اندروید استودیو (Android Studio)

سورس فروشگاه آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت

سورس تاکسی آنلاین با اندروید استودیو (Android Studio) به همراه پنل مدیریت