Tuesday, September 22, 2020
therichposts@gmail.com
Angular2Laravel

Laravel With Angularjs

Angular 9 Laravel 7 Auth Login working tutorial Part 2

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

Ajay Malhotra
the authorAjay Malhotra
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 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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