Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
Angular 8Laravel 6Php

Angular 8 with laravel 6 backend working example

Angular 9 Laravel 7 Auth Login working tutorial Part 2

Hello to all, welcome to therichpost.com. Today, In this post, I will tell you, Angular 8 with laravel 6 backend working example.

Both Angular 8 and Laravel 6 are the best on their platforms. Today, In this post, I will take Angular 8 as frontend and Laravel 6 as backend.

If you are new then you can check my old posts related to Laravel 6 and Angular 8.

Here is the images showing of Angular 8 frontend in which I am getting data from laravel 6.

Angular 8 with laravel 6 backend working example
Angular 8 with laravel 6 backend working example

Here are the complete code snippet for Angular 8 with laravel 6 backend working example and please use this carefully:

1. Let start, here are the basics commands to set Angular 8 into your pc:

$ npm install -g @angular/cli //Setup Angular8 atmosphere

$ ng new angularlatest8 //Install New Angular App

/**You need to update your Nodejs also for this verison**/

$ cd angularlatest8 //Go inside the Angular 8 Project

 

2. After all above setup, here is code, you need to add into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

 

3. Here is the code, you need to add app.component.ts file:

This is laravel project path(http://localhost/blog/public/api/sample-restful-apis)where I have set the api from where I am getting the data.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8restapi';
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/blog/public/api/sample-restful-apis').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
    }, error => console.error(error));
  }
}

 

4. Here is the code you need to add into app.component.html file:

<table>
    <tr>
      <th>Name</th>
      <th>Domain</th>
      
    </tr>
    <tr *ngFor="let mydata of data[0]">
      <td>{{mydata.name}}</td>
      <td>{{mydata.domain}}</td>
    </tr>
</table>

 

5. Here is the code, you need add into app.component.css file:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

 

 

6. Here is the final code, you need to into your laravel 6 api.php file, where we will have the data to show in angular 8 application:

...
Route::get('sample-restful-apis', function()
{
    return response()->json([
        [
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
        ],[
            'name' => 'Google',
            'domain' => 'Google.com'
            ]
        ]);
});
...

 

In the end don’t forget to run ng serve command to enjoy the final output.

If you have any query then please let me know or comment below.

Jassa Jatt

Thank you

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

9 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.