آموزش استفاده از انگولار در لاراول

در این مقاله قصد داریم به شما نحوه استفاده از انگولار در لاراول را آموزش دهیم. انگولار یکی از فریمورک های front-end محبوب است که برای ساخت برنامه های سمت کلاینت استفاده می شود.

در این مقاله یاد می گیریم که چطور می توان از این دو فریم ورک در کنار هم استفاده کرد و توسط یک api با هم تعامل برقرار کنند.

در این مثال یک اینترفیس ساده در انگولار ایجاد کرده و سپس با فراخوانی یک api داده ها را ذخیره می کنیم. این مثال به شما نشان می دهد که چطور می توان از هر دوی این فریمورک ها برای ساخت یک برنامه full stack استفاده کرد و چگونگی اتصال آنها به یکدیگر توسط یک api را هم فرا خواهید گرفت.

سرفصل های این آموزش

نصب انگولار
ایجاد یک فرم برای ورود داده ها
مدیریت داده های ورودی
ارسال داده ها به سرور لاراول
ایجاد back end برنامه در لاراول برای درخواست ها
حل مشکل cors

توجه کنید:‌ در صورتیکه می خواهید فریم ورک انگولار یا لاراول را به صورت کامل (از صفر تا صد) و پروژه محور یاد بگیرید. دوره های ویدیویی آموزشی زیر را دریافت کنید:

آموزش صفر تا صد و پروژه محور فریم ورک لاراول (آخرین ورژن)

و همچنین:

آموزش ساخت فروشگاه اینترنتی با انگولار (آخرین ورژن)

1- نصب انگولار

ابتدا باید Angular Cli را بصورت سراسری نصب کنیم. برای اینکار ترمینال را باز کرده و دستور زیر را در آن اجرا کنید.

npm install -g @angular/cli

حال یک پروژه انگولار جدید به نام ng4tutorial ایجاد خواهیم کرد. برای اینکار دستور زیر را در ترمینال اجرا کنید.

ng new ng4tutorial

دستور فوق یک سری فایل و فولدر را ایجاد کرده و همچنین تمام وابستگی های بخش Front end برنامه را نصب می کند.

بعد از اتمام نصب، دستورات زیر را اجرا کنید.

cd ng4tutorial
ng serve

2- ایجاد یک فرم برای ورود داده ها

انگولار یک فریمورک کاملاً ماژولاری است. یعنی شما می توانید با استفاده از این فریم ورک بخش های متعددی را به سایت خود در قالب یک ماژول اضافه کنید.

در انگولار تمام کامپوننت ها در مسیر src/app قرار می گیرند.

از فایل css بوت استرپ برای طراحی فرم مان استفاده می کنیم. برای این منظور فایل css بوت استرپ را دانلود کرده و در دایرکتوری src/assets قرار دهید. فایل index.html باید مطابق زیر باشد.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ng4app</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/assets/app.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

تمام فایل های استاتیک عمومی در فولدر assets قرار می گیرند و از آنجا قابل دسترسی هستند.

برای ساخت فرم، باید فایل app.component.html را بروزرسانی کنیم. این فایل در دایرکتوری src/app قرار دارد.

<!--The whole content below can be removed with the new code.-->
<div class="container">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <hr />
    <form>
      <div class="form-group">
        <label for="name">Item Name:</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group">
        <label for="price">Item Price:</label>
        <input type="text" class="form-control">
      </div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
</div>

فایل app.component.ts در نهایت باید مطابق زیر باشد.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Laravel Angular 4 App';
}

ظاهر فرم مان مطابق تصویر زیر است.

ساخت یک فرم در انگولار

3- مدیریت داده های ورودی

اول از همه باید دو ماژول زیر را به فایل app.module.ts ،import کنیم.

FormsModule
HttpClienttModule

همچنین این ماژول ها را به آرایه imports اضافه می کنیم.

فایل src/app/app.module.ts در نهایت باید مطابق زیر باشد.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule}    from '@angular/http';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule, HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

حال باید یک آبجکت فرم انگولار به کدهای html مان اضافه کنیم. کدهای نهایی app.component.ts باید مطابق زیر باشد.

// app.component.ts

<div class="container">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <hr />
    <form (ngSubmit)="onSubmit(fm)" #fm="ngForm">
      <div class="form-group">
        <label for="name">Item Name:</label>
        <input type="text" class="form-control" ngModel name="name">
      </div>
      <div class="form-group">
        <label for="price">Item Price:</label>
        <input type="text" class="form-control" ngModel name="price">
      </div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
</div>

در بالا یک خصیصه (attribute) به نام ngModule به فیلد ورودی اضافه می کنیم. این خصیصه به انگولار می گوید که چه مقادیری در فرم html مان قرار دارند. سپس آبجکت ایجاد شده و بعد از ارسال فرم می توانیم به آن آبجکت دسترسی داشته و مقادیر را از آن دریافت کنیم.

<form (ngSubmit)="onSubmit(fm)" #fm="ngForm">

با این روش به انگولار می گوییم باید آبجکتی ایجاد کند و تمام عناصر فرم و مقادیرشان را توصیف نماید.

بعد از فشردن دکمه submit، متد onSubmit() فراخوانی شده و به این ترتیب می توانیم تمام مقادیر فرم را دریافت کنیم.

// app.component.ts

import { Component } from '@angular/core';
import { Item } from './Item';
import { NgForm }   from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Laravel Angular 4 App';
  onSubmit(form: NgForm){
  	console.log(form.value);
  }
}

در بالا، متد onSubmit() تمام مقادیر فرم را دریافت می کند. حال ما می توانیم یک درخواست post به سرور لاراول ارسال کنیم. در این بخش در واقع می توان از انگولار در لاراول استفاده کرد.

4- ارسال داده ها به سرور لاراول (ارتباط انگولار در لاراول)

در مرحله بعد باید یک Http Service برای مدیریت درخواست های post فراخوانی کنیم.

ابتدا دو ماژول را در فایل app.component.ts ، import می کنیم.

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/toPromise';

در مرحله بعد می توانیم آن سرویس را فراخوانی کنیم. کد کامل فایل app.component.ts مانند زیر است.

// app.component.ts

import { Component, Injectable } from '@angular/core';
import { Item } from './Item';
import { NgForm }   from '@angular/forms';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private _http: Http){}
        private headers = new Headers({'Content-Type': 'application/json'});
  	title = 'Laravel Angular 4 App';
  	onSubmit(form: NgForm): Promise <Item>{
        return this._http.post('http://127.0.0.1:8000/api/items', JSON.stringify(form.value), {headers: this.headers})
  		   .toPromise()
    	           .then(res => res.json().data)
    	            .catch(this.handleError);
  }
  private handleError(error: any): Promise<any> {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
  }
}

در بالا من از promise و observable استفاده کردم.

5 - ایجاد بخش back-end برنامه جهت ارتباط انگولار در لاراول برای مدیریت درخواست ها

ترمینال را باز کرده و دستور زیر را برای ساخت یک پروژه لاراول اجرا کنید.

composer create-project laravel/laravel --prefer-dist ng4Laravel55

سپس مشخصات پایگاه داده MySQL تان را در فایل .env وارد کنید.

سپس، دستور زیر را در ترمینال وارد کنید.

php artisan make:model Item -m

به فایل migration که در مسیر database/migrations/create_item_table قرار دارد رفته و کدهای زیر را در آن کپی کنید.

<?php

// create_items_table

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

دستور زیر را در ترمینال وارد کنید.

php artisan migrate

یک کنترلر با نام ItemController ایجاد کنید.

php artisan make:controller ItemController

روت زیر را در فایل api.php قرار دهید.

Route::post('items', 'ItemController@store');

سپس باید پروپرتی $fillable را برای جلوگیری از بروز استثنای mass assignment به مدل Item.php اضافه کنید.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    protected $fillable = ['name', 'price'];
}

متد store() را در فایل ItemController.php برای ذخیره داده ها در پایگاه داده، تعریف کنید.

<?php

// ItemController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Item;

class ItemController extends Controller
{
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $item = new Item([
          'name' => $request->get('name'),
          'price' => $request->get('price')
        ]);
        $item->save();
        return response()->json('Successfully added');
    }
}

حال با دستور زیر سرور لاراول را راه اندازی کنید.

php artisan serve

6- حل مشکل cors برای ارتباط انگولار در لاراول

هنگامی که شما می خواهید از یک سرویس api لاراول به یک صفحه فرانتد خروجی بدهید معمولا خطای CORS که مخفف عبارت Cross-Origin Resource Sharing است، رخ می دهد. در واقع این خطا برای جلوگیری از استفاده api سایت مرجع در سایر سایت ها می باشد. یعنی به نحوی امنیت را برای API خروجی شما تامین می کند.

پکیج laravel-cors را برای جلوگیری از بروز این مسئله دانلود کنید.

composer require barryvdh/laravel-cors

cors\ServiceProvider را به آرایه providers در فایل config/app.php اضافه کنید.

Barryvdh\Cors\ServiceProvider::class,

برای اعمال Cors روی تمام روت های پروژه middleware HandleCors را به پروپرتی $middleware در کلاس app/Http/kernel.php اضافه کنید.

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

سپس با دستور زیر پیکربندی ها را publish نمایید.

php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

به این ترتیب توانستیم با موفقیت انگولار را به لاراول اضافه کنیم.