فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴

29 تیر 1396
معرفی درخواست‌های Http در انگولار ۴

با مطالعه‌ی فصل ۱۰ اطلاعات کاملی در ارتباط با فیلتر‌ها در انگولار ۴ بدست آوردید. همچنین اگر به خاطر داشته باشید در فصول گذشته اشاره‌های فراوانی به مشاهده‌ کننده‌ها یا Observable داشتیم. در این بخش می‌خواهیم علاوه بر آشنایی شما با درخواست‌های http، نحوه‌ی بکارگیری مشاهده کننده ها و کاربردهای آن را در این نوع درخواست‌ها بررسی کنیم. با ما همراه باشید.

درخواست Http چیست؟

همانطور که در جریان هستید یک نرم‌افزار از دو قسمت تشکیل می‌شود: ۱) Backend (سمت سرور) ۲) Frontend (سمت کاربر). برای ارتباط Frontend با Backend یک رابط نیاز است و آن درخواست‌های Http هستند. یعنی با استفاده از این درخواست ها می‌توان اطلاعات را از سرور دریافت و یا به آن ارسال کرد. فرمت ارسال داده در این نوع درخواست به صورت JSON یا XML‌ می‌باشد.

شروع با یک مثال

مطابق تمام فصل‌ها برای درک بهتر مفهوم درخواست‌های HTTP مثالی ارائه خواهیم داد. همانطور که در تصویر زیر مشاهده می‌کنید در این مثال یک دکمه برای اضافه کردن سرور قرار داده‌ایم که با کلیک کردن روی آن نام یک سرور به همراه یک شناسه (id) تصادفی به لیست سرور اضافه می‌شود.

مثال درخواستهای http در انگولار ۴

حال ما می‌خواهیم این اطلاعات داخل یک مخزنی ذخیره شود و بتوانیم آن را مجددا بازیابی کنیم. برای انجام اینکار به یک پایگاه داده در backend احتیاج داریم. توجه داشته باشید که برای ایجاد یک پایگاه داده‌ی امن می‌توانید از سرویس‌های پایگاه‌ داده مانند MySql یا SqlServer یا Oracel‌ و.. استفاده کنید. ایجاد پایگاه داده و قسمت Backend به عهده خود شماست و در این بخش تنها به آموزش انگولار می‌پردازیم.

ارسال اطلاعات با متد post

برای برقراری ارتباط با سرور آنلاین خود ابتدا یک فایل server.service.ts‌ در پوشه app و روت اصلی برنامه ایجاد و محتویات درون آن را به صورت زیر کدنویسی خواهیم کرد همچنین مطابق تمام سرویس‌هایی که تا به الان ایجاد کرده‌ایم باید همواره سرویس server.service.ts را درون ویژگی provider فایل app.module.ts فراخوانی کنیم. توجه داشته باشید که می‌خواهیم از سرویس توکار http درون این سرویس استفاده نماییم بنابراین باید مفسر یا دکوراتور Injectable@ را در ابتدای برنامه‌ی خود اعمال کنیم.:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";

@Injectable()
export class ServerService{
    constructor(private http: Http){

    }
    storeServer(servers: any[]){
        this.http.post("yourBackendControllerPath", servers);
    }
}

همانطور که ملاحظه کردید در این سرویس از ماژول Http توکار انگولار استفاده کرده و با استفاده از متد post داده‌ها را به صفحه backend سرویس خود ارسال کردیم. توجه داشته باشید که به جای عبارت yourBackendControllerPath باید مسیر ذخیره‌سازی داده در سرور را قرار دهید.

برای مطالعه‌ی دقیق درباره امنیت و روش‌های ارسال داده مطالعه‌ی مقاله‌ی زیر به شدت توصیه می‌شود:

حال برای ذخیره‌کردن سرورهای معرفی شده در صفحه باید در قالب app.component.html یک دکمه جهت ذخیره‌ کردن اطلاعات و ارسال آنها توسط متد آن به سرور استفاده کرد:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" #serverName>
      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">افزودن سرور</button>
      <hr>
      <button class="btn btn-primary" (click)="onStoreServer()">ذخیره کردن</button>
      <ul class="list-group" *ngFor="let server of servers">
        <li class="list-group-item">{{ server.name }} (شناسه: {{ server.id }})</li>
      </ul>
    </div>
  </div>
</div>

در نهایت متد onStoreServer را به صورت زیر تعریف می‌کنیم:

  onStoreServer(){
    this.serverService.storeServer(this.servers)
  }

البته باید سرویس serverService را درون سازنده پیش‌فرض این کلاس کامپوننت تعریف کنید.

تمامی این درخواست‌ها در پس‌زمینه انگولار با استفاده از مشاهده‌کننده‌ها (Observable) ارسال می‌شوند زیرا در این نوع درخواست‌ها داده‌ها به صورت غیرهمزمان ارسال می‌شوند. حال اگر شما دستور فوق را اجرا کنید هیچ اتفاقی نمی‌افتد و با خطا مواجه خواهید شد. بنابراین برای رفع این خطا باید داده را به صورت یک Observable ارسال کنید و در نهایت با متد subscribe‌ به اشتراک بگذارید. بنابراین برای اصلاح این مثال ابتدا فایل server.Service.ts را به صورت زیر ویرایش می‌کنیم:

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";

@Injectable()
export class ServerService{
    constructor(private http: Http){

    }
    storeServer(servers: any[]){
        return this.http.post("yourBackendControllerPath", servers);
    }
}

سپس متد موجود در فایل app.component.ts را به صورت زیر تغییر می‌دهیم:

  onStoreServer(){
    this.serverService.storeServer(this.servers).subscribe(
        (response) => console.log(response),
        (error) => console.log(error)
    )
  }

بسیار عالی در این حالت علاوه بر اینکه یک درخواست post به سرور شما ارسال می‌شود. وضعیت پاسخ به آن درخواست و همچنین خطای آن را نمایش می‌دهد.

اضافه کردن header به درخواست‌ها

در صورتی که نیاز داشته باشید تا سربرگ مشخصی را برای هر درخواست یا پاسخ درنظر بگیریم باید آن را به صورت زیر در سرویس‌ خود تعریف کنیم:

storeServer(servers: any[]){
        const header = new Headers({'Content-Type': 'application/json'})
        return this.http.post("yourBackendControllerPath", servers, header);
    }

دریافت اطلاعات با متد get

همانطور که در جریان هستید برای دریافت اطلاعات از سرور معمولا از متد get استفاده می‌کنند. حال برای پیاده‌سازی این تکنیک ابتدا فایل server.service.ts را باز می‌کنیم سپس کدهای زیر را در آن اعمال خواهیم کرد:

    getServer(){
        return this.http.get("yourBackendControllerPath")
    }

در نهایت یک دکمه درون صفحه اصلی و فایل app.component.html ایجاد کرده تا اطلاعات را از سرور فراخوانی کند. بنابراین داریم:

import {Response} from "@angular/http";
.
.
.
  onGetServer(){
    this.serverService.getServer()
        .subscribe(
          (response: Response) => {
            const data = response.json();
            console.log(data)
          },
          (error) => console.log(error)
    )
  }

بسیار با اعمال این کدها اطلاعات از سرور موردنظر شما فراخوانی و دریافت می‌شوند.

بروزرسانی اطلاعات با متد put

برای بروزرسانی یک فیلد یا داده درون لیست داده‌ها می‌توان از متد put یا patch استفاده کرد. برای انجام اینکار فایل server.Service.ts را باز کرده و دستورات زیر را درون آن لحاظ می‌کنیم:

storeServer(servers: any[]){
        const header = new Headers({'Content-Type': 'application/json'})
        return this.http.put("yourBackendControllerPath", servers, header);
    }

همانطور که ملاحظه می‌کنید ساختار این دستور دقیقا مشابه post می‌باشد با این تفاوت که اگر دو رکورد یکسان وجود داشته باشند به هنگام ذخیره سازی اطلاعات آن رکورد را با داده‌ی جدید بروزرسانی می‌کند.

بسیار عالی به شما عزیزان تبریک می‌گوییم در این بخش توانستید با درخواست‌های HTTP کار کنید و نحوه بکارگیری آنها در سرویس‌ها را بررسی نمایید.

امیدوارم این سری از مجموعه‌های آموزشی انگولار ۴ برای شما عزیزان مفید واقع شده باشد. با مطالعه‌ی این ۱۱ فصل می‌توانید به سادگی هر چه تمام تر از این فریم ورک قدرتمند استفاده کنید.

جهت عضویت در گروه برنامه نویسی روکسو در تلگرام روی اینجا کلیک کنید.

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)

آموزش حرفه ای انگولار ۵ به زبان فارسی


فصل ۱

فصل ۲

فصل ۳:‌ خطایابی (Debugging) در انگولار ۴

فصل ۴

فصل ۵

فصل ۶

فصل ۷

فصل ۸: معرفی Observable یا مشاهده کننده‌ها در انگولار ۴

فصل ۹

فصل ۱۰: معرفی فیلترها یا Pipes در انگولار ۴

فصل ۱۱: معرفی درخواست‌های Http در انگولار ۴

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان انگولار توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (6 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

علی ظریف
03 اسفند 1398
توضیحات خیلی ناقص و گیج کننده است.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

الی
06 مهر 1398
آموزش های انگولار عالی بودند .سپاس فراوان بابت لطف و زحماتتون ... پاینده باشین .

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

اسماعیل دامن پاک
10 اردیبهشت 1398
سلام توی اآنگولار چطوری میشه از دوتا قالب HTML یکی واسه سایت و یکی واسه داشبورد استفاده کرد؟ توی دات نت کور از Area استفاده میشد اینجا چیکار میشه کرد؟>

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
11 اردیبهشت 1398
سلام وقت شما بخیر این کار را باید با ایجاد پروژه های متعدد روی یک angular-cli انجام دهید. یعنی در واقع در فایل angular.json، یک پروژه جدید تعریف می کنید ولی از یک cli استفاده خواهید کرد. برای راهنمایی بهتر لطفا این آموزش را مطالعه کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

اسماعیل دامن پاک
13 اردیبهشت 1398
سلام مجدد خدمت شما سرور گرامی بنده از لینکی آموزشی که فرمودید استفاده کردم و بسیار خوب بود منتها یه مشکلی که هست وقتی طبق لینک آموزشی کار کردم سایت من چندین صفحه اصلی داره و همچنین یه پنل کاربری که هرکدوم از قالبی خاص استفاده شده وقتی من روی لینک داشبورد کلیک میکنم چون داشبود در دل سایت لود میشه بنابراین تمام فایلهای Css و JS روی قالب داشبورد تاثیر میزاره.انگاری قالب داشبورد لود نمیشه میشه راهنمایی بفرمایید

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
13 اردیبهشت 1398
درود بر شما برای انجام اینکار شما باید حتما و حتما برای هر پروژه یک پوشه جداگانه ایجاد کنید. یعنی مسیردهی فایل های CSS و JS نیز در یک فایل index.html جداگانه صورت میگیرد. به عبارت دیگر تحت هیچ شرایطی نباید بین پروژه های شما همپوشانی وجود داشته باشد. چنانچه این مشکل همچنان برقرار است لطفا از طریق سایت روکسو کیو سوال خود را با جزئیات به همراه کدهای فایل angular.json مطرح کنید تا دوستان و سایر متخصصین به شما پاسخ دهند.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Hasan
19 آبان 1397
سلام ودرود تشکر ویژه بخاطراموزشتون/گاهی مثال درحین اموزش کارای بهره وری و افزایش میده/ممنون

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حسن
19 اردیبهشت 1397
با سلام شما که تا اینجا آموزش دادید لطفاً یک مثال ساده و کامل شامل فرم و کنترلر و مدل و درنهایت ذخیره در یک بانک اطلاعاتی مانند mysql یا postgres نیز قرار دهید و درصورت امکان در یک مقاله تمام مسیر را توضیح دهید با تشکر از زحمات شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
19 اردیبهشت 1397
سلام وقت شما بخیر اکثر آموزش های مربوط به انگولار در طی این ۱۱ فصل ارائه شده است در صورتیکه نیاز به یادگیری یک پروژه از صفر تا صد دارید می توانید از طریق این لینک آموزش ویدیویی انگولار ۵ و ۶ را به صورت پروژه محور دریافت کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امین
25 شهریور 1396
با تشکر از زحمات بی دریغ و خوبی هاتون. خدا خیرتون بده. راستی: بنر بالای آموزش اشتباها نوشته شده فصل ده.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.