Laravel Angular: Cara Menggunakan Sudut dengan Laravel – Codewithaden

Laravel adalah kerangka aplikasi Web PHP. Angular adalah kerangka kerja depan yang populer untuk membuat aplikasi sisi klien. Hari ini kita akan melihat bagaimana kita dapat menggunakan keduanya dan berinteraksi melalui API.

Cara menggunakan sudut dengan laravel

Untuk menggunakan sudut dengan Laravel, Anda dapat membuat antarmuka frontend di sudut dan membuat API backend di Laravel dengan database MySQL atau NoSQL. Kami membangun antarmuka front-end aplikasi sudut dan kemudian memanggil API untuk menyimpan data. Ini hanyalah aplikasi penyimpanan item dasar menggunakan Angular dan Laravel .

Contoh ini menunjukkan bagaimana kita dapat membuat aplikasi full-stack dan terhubung dengan API

Pertama, kami akan mengatur proyek sudut di sisi klien. Untuk itu, Anda bisa menggunakan Angular-cli untuk boilerplate untuk aplikasi kami. Anda dapat menemukan ini di tautan situs web Angular: Siapkan Lingkungan Pengembangan

  • Langkah 1: Proyek Pengaturan Angular.
  • Langkah 2: Buat formulir menggunakan bentuk sudut.
  • Langkah 3: Tangani data input yang berasal dari formulir menggunakan Angular.
  • Langkah 4: Kirim data formulir ke server Laravel.
  • Langkah 5: Buat Laravel Backend: Buat tabel, tampilan, pengontrol, model.
  • Langkah 6: Menyelesaikan masalah CORS. Anda akhirnya dapat menyimpan data ke database.

Langkah 1: Mengatur lingkungan sudut.

Pertama, kita perlu menginstal CLI Angular secara global. Jadi ketik perintah berikut.

npm install -g @angular/cli 

Oke, sekarang kita perlu membuat satu proyek; Mari kita sebut itu NG4TUTORIAL.

Ketik perintah berikut di terminal Anda.

ng new ng4tutorial 

T akan membuat file dan folder dan menginstal semua dependensi front-end.

Setelah instalasi, ketik perintah berikut.

cd ng4tutorial
ng serve --open 

Langkah 2: Buat satu formulir untuk memasukkan data.

Angular adalah modular. Semua file komponen berada di SRC >> Aplikasi map

Kami menggunakan Kerangka Bootstrap CSS untuk merancang formulir kami. Jadi saya telah mengunduh file CSS bootstrap SRC >> Aset Direktori dipanggil app.css mengajukan.

Kita index.html File terlihat seperti ini.




  
  Ng4app
  
  
  


   
 

Semua file statis publik disajikan dari aktiva map.

Untuk membuat formulir, kita perlu memodifikasi app.component.html mengajukan. File ini berada di SRC >> aplikasi direktori.

Welcome to {{title}}!!


Kita app.component.ts File terlihat seperti ini.

// 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';
} 

Bentuk kami terlihat seperti ini.

Laravel

Langkah 3: Tangani data input.

Pertama, kita perlu mengimpor dua modul di app.module.ts mengajukan.

  1. Formsmodule
  2. Httpmodule

Dan modul -modul ini juga termasuk dalam impor Himpunan. Jadi kami src >> app >> app.module.ts File terlihat seperti ini.

// app.module.ts

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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

Sekarang, kita perlu memasukkan Angular Bentuk objek ke dalam html kami. Kode terakhir kami app.component.ts terlihat seperti ini.

// app.component.ts

Welcome to {{title}}!!


Kami telah menambahkan satu atribut ke kotak input yang disebut “ Ngmodel “. Atribut ini memberi tahu Angular berapa banyak nilai yang ada dalam bentuk HTML. Jadi, pertama -tama, itu membuat objek, dan kemudian, setelah mengirimkannya, kita dapat mengaksesnya dan mengeluarkan nilainya.

Ini adalah cara untuk memberi tahu AngularJS bahwa ia perlu membuat objek yang menggambarkan seluruh elemen bentuk dan nilainya.

Setelah menekan, kirim, Onsubmit () Fungsi disebut, dan dalam hal itu, kita bisa mendapatkan semua nilai formulir.

// 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);
  }
} 

Di Sini Onsubmit () fungsi, kami mendapatkan semua nilai formulir. Sekarang, kita dapat mengirim Permintaan Posting ke Laravel Server.

Langkah 4: Kirim data ke server Laravel.

Langkah selanjutnya adalah memanggil Layanan HTTP untuk menangani POS meminta.

Pertama, kita perlu mengimpor dua modul di app.component.ts mengajukan.

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

Langkah selanjutnya adalah memanggil layanan itu. Ini adalah kode lengkap saya dari app.component.ts mengajukan.

// 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 {
        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 {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
  }
}
 

Saya telah menggunakan janji dan dapat diamati. Saya juga mengimpornya di atas.

Langkah 5: Buat backend Laravel untuk permintaan tersebut.

REATE SATU proyek Laravel dengan mengetikkan perintah berikut.

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

Edit. Env File untuk mengatur kredensial database MySQL.

Selanjutnya, beralih ke antarmuka baris perintah Anda dan ketik perintah berikut.

php artisan make:model Item -m 

Harap navigasikan file migrasi di database >> Migrasi >> create_items_table dan salin kode berikut ke dalamnya.

increments('id');
            $table->string('name');
            $table->integer('price');
            $table->timestamps();
        });
    }

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

Ketik perintah berikut di terminal Anda.

php artisan migrate 

Buat satu pengontrol yang dipanggil ItemController.

php artisan make:controller ItemController 

Daftarkan rute di Rute >> API.php mengajukan.

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

Dalam Item.php model, kita perlu memasukkan $ diisi properti untuk mencegah pengecualian penugasan massal.

Tulis fungsi toko di ItemController.php file untuk menyimpan data ke dalam database.

 $request->get('name'),
          'price' => $request->get('price')
        ]);
        $item->save();
        return response()->json('Successfully added');
    }
} 

Mulai server pengembangan Laravel dengan mengetikkan perintah berikut.

php artisan serve 

Langkah 6: Menyelesaikan masalah CORS

Unduh paket CORS Laravel spesifik berikut untuk menghindari masalah ini dan ikuti langkah -langkahnya.

composer require barryvdh/laravel-cors 

Pertama, tambahkan CORS \ ServiceProvider ke array penyedia Anda.

Barryvdh\Cors\ServiceProvider::class, 

Untuk mengizinkan CORS untuk semua rute Anda, tambahkan Handlecors middleware di $ middleware properti App/http/kernel.php kelas:

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

Anda dapat mempublikasikan konfigurasi menggunakan perintah ini:

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

Sekarang, coba lagi; Ini akan menyimpan data ke dalam database. Saya belum mengatur Redirect Setelah menyimpan data tetapi akan mengaturnya saat Anda memeriksa nilai database.

Ini adalah contoh utama dari Laravel Angular Contoh.

Posting yang disarankan

Laravel Crud

Crud sudut

Bentuk sudut

HTTPClient Angular

Validasi bentuk Laravel

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *