Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 10 SPA with Laravel 8 Backend Data.
Hi guys, in this working post, I will tell all about angular single page application. In this post, I will tell you, how to create new pages or components in Angular 10, how to add bootstrap in Angular 10, how to make angular routing, how to get data from Laravel 8 backend with rest api and show that data in Angular 10 etc.
Angular10 , Laravel 8 came and if you are new then you must check below two links:
Friends now I proceed onwards and here is the working code snippet for Angular 10 SPA with Laravel 8 Backend Data and please use this carefully to avoid the mistakes:
1. Firstly friends we need fresh angular 10 setup and for this we need to run below commands but if you already have angular 10 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
Guys you can skip this first step if you already have angular 10 fresh setup:
npm install -g @angular/cli ng new angularspa //Create new Angular Project cd angularspa // Go inside the Angular Project Folder ng serve --open // Run and Open the Angular Project http://localhost:4200/ // Working Angular Project Url
2. After done with above, we need to run below commands to set bootstrap environment into your angular 10 application:
npm install --save bootstrap npm install jquery --save npm install popper.js --save
3. Now friends we need to add below code into your angular.json file:
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
4. Now friends we need to run below commands into our project terminal to create new pages or components:
ng g c home ng g c services ng g c aboutus ng g c contactus ng g c faq ng serve
5. Now friends we need to add below code into our angularspa/src/app/app-routing.module.ts file:
...
import { AboutusComponent } from './aboutus/aboutus.component';
import { HomeComponent } from './home/home.component';
import { FaqComponent } from './faq/faq.component';
import { ServicesComponent } from './services/services.component';
import { ContactusComponent } from './contactus/contactus.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'faq', component: FaqComponent },
{ path: 'about-us', component: AboutusComponent },
{ path: 'services', component: ServicesComponent },
{ path: 'contct-us', component: ContactusComponent }
];
...
6. Now friends we need to add below code inside angularspa/src/app/app.module.ts file:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
imports: [
...
HttpClientModule
],
...
})
7. Now friends we need to add below code into our angularspa/src/app/app.component.html file:
<nav class="navbar navbar-expand-md bg-light navbar-light">
<a class="navbar-brand" [routerLink]="['/']">Angular SPA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']" routerLinkActive="activeclass" [routerLinkActiveOptions]="{exact: true}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/about-us']" routerLinkActive="activeclass" [routerLinkActiveOptions]="{exact: true}">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/services']" routerLinkActive="activeclass" [routerLinkActiveOptions]="{exact: true}">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/faq']" routerLinkActive="activeclass" [routerLinkActiveOptions]="{exact: true}">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/contct-us']" routerLinkActive="activeclass" [routerLinkActiveOptions]="{exact: true}">Contact Us</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>Footer text.</p>
</div>
8. Now friends we need to add below code into our angularspa/src/app/home/home.component.html file:
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>{{data.title}}</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="com-sm-12">
<p class="text-justify">{{data.content}}</p>
</div>
</div>
</div>
9. Now friends we need to add below code into our angularspa/src/app/home/home.component.ts file:
...
import { HttpClient } from '@angular/common/http';
export class HomeComponent implements OnInit {
...
data:any;
constructor(private http: HttpClient){
this.http.get('http://localhost/laravel8/laravel8/public/api/homepage').subscribe(data => {
this.data = data[0];
console.log(this.data);
}, error => console.error(error));
}
...
}
10. Now friends we need to add below code into our angularspa/src/app/aboutus/aboutus.component.html file:
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>{{data.title}}</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="com-sm-12">
<p class="text-justify">{{data.content}}</p>
</div>
</div>
</div>
11. Now friends we need to add below code into our angularspa/src/app/aboutus/aboutus.component.ts file:
...
import { HttpClient } from '@angular/common/http';
export class AboutusComponent implements OnInit {
...
data:any;
constructor(private http: HttpClient){
this.http.get('http://localhost/laravel8/laravel8/public/api/aboutpage').subscribe(data => {
this.data = data[0];
console.log(this.data);
}, error => console.error(error));
}
}
12. Now friends we need to add below code into our angularspa/src/app/contactus/contactus.component.html file:
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>{{data.title}}</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="com-sm-12">
<p class="text-justify">{{data.content}}</p>
</div>
</div>
</div>
13. Now friends we need to add below code into our angularspa/src/app/contactus/contactus.component.ts file:
...
import { HttpClient } from '@angular/common/http';
export class FaqComponent implements OnInit {
...
data:any;
constructor(private http: HttpClient){
this.http.get('http://localhost/laravel8/laravel8/public/api/faqpage').subscribe(data => {
this.data = data[0];
console.log(this.data);
}, error => console.error(error));
}
}
14. Now friends we need to add below code into our angularspa/src/app/faq/faq.component.html file:
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>{{data.title}}</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="com-sm-12">
<p class="text-justify">{{data.content}}</p>
</div>
</div>
</div>
15. Now friends we need to add below code into our angularspa/src/app/faq/faq.component.ts file:
...
import { HttpClient } from '@angular/common/http';
export class FaqComponent implements OnInit {
...
data:any;
constructor(private http: HttpClient){
this.http.get('http://localhost/laravel8/laravel8/public/api/faqpage').subscribe(data => {
this.data = data[0];
console.log(this.data);
}, error => console.error(error));
}
}
16. Now friends we need to add below code into our angularspa/src/app/services/services.component.html file:
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>{{data.title}}</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="com-sm-12">
<p class="text-justify">{{data.content}}</p>
</div>
</div>
</div>
17. Now friends we need to add below code into our angularspa/src/app/services/services.component.ts file:
...
import { HttpClient } from '@angular/common/http';
export class ServicesComponent implements OnInit {
data:any;
constructor(private http: HttpClient){
this.http.get('http://localhost/laravel8/laravel8/public/api/servicepage').subscribe(data => {
this.data = data[0];
console.log(this.data);
}, error => console.error(error));
}
}
18. Finally friends here is Laravel 8 backend api’s routes with custom data:
<?php
...
Route::get('homepage', function()
{
return response()->json([
[
'title' => 'Home',
'content' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
]
]);
});
Route::get('aboutpage', function()
{
return response()->json([
[
'title' => 'About Us',
'content' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
]
]);
});
Route::get('contactpage', function()
{
return response()->json([
[
'title' => 'Contact Us',
'content' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
]
]);
});
Route::get('faqpage', function()
{
return response()->json([
[
'title' => 'Faqs',
'content' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
]
]);
});
Route::get('servicepage', function()
{
return response()->json([
[
'title' => 'Services',
'content' => "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
]
]);
});
Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Recent Comments