Laravel With Angularjs

Hello, welcome to therichpost.com. In this post, I will tell you How to Get laravel data in Angular2 with laravel rest api.

Nowadays Angularjs is very popular and known as one page website.

I am familiar with Angular 1 very well but Angular 2 is totally different with Angular 1.

Angular2 is totally command based. Laravel is the best Mvc framework.

Here is the laravel api url and data from that api:

http://test.com/api/sample-restful-apis

In my previous posts, I already told the examples of angularjs with wordpress. Finally here is the working Laravel Api code and you need to add this code into your routes/api.php file:

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

Here please check code in angularjs 2 component and you need to add the code in component(app.component.ts):

import { Component, OnInit } from '@angular/core';
import { Http, Response ,RequestOptions,Headers} from '@angular/http';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
posts: any;
constructor(public http: Http) {this.http.get('http://test.com/api/sample-restful-apis').map(res => res.json()).subscribe(data => {
this.posts = data;
console.log(this.posts);
}); }
ngOnInit() {
}}

Here please check code in angularjs 2 Html component and you need to add the code in html component(app.component.html):

<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Laravel Users Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let name of posts">

<td>#</td>
<td>{{ name}}</td>
</tr></tbody>
</table>

There are many more code in Angular2 and WordPress and i will let you know all. Please do comment if you any query related to this post. I have also shared so many post related to Angular 6 and Laravel 5.7.

Thank you.

Therichpost.com