Tempo di lettura: 75 minuti
Angular e Laravel sono due dei più noti framework oggi presenti in ambito di sviluppo web il primo in ambito front end ed il secondo lato back end.
In questo tutorial darò per scontato che abbiate , quanto meno , le basi degli stessi per poter procedere in maniera fluida. Realizzeremo un sistema di autenticazione dove, il front end sarà realizzato in Angular il quale dovrà comunicare con una Rest Api realizzata in Laravel.
Angular e Laravel: alcuni consigli prima di iniziare
Per poter lavorare con Angular è consigliabile installare node.js, in modo tale da lavorare da linea di comando quando andremo a scaricare il pacchetti necessari al funzionamento della stessa.
Inoltre vi consiglierei anche di installare git Bash per chi non lo avesse o lavora sotto windows.
Bene una volta installati aprite Git e digitate:
node -v
se ritorna la versione senza problemi vuol dire che è tutto a posto.
Fate lo stesso con:
npm -v
Ora non ci rimane che scaricare Angular-cli( command line interface) il quale ci consente di scaricare a sua volta tutte le directory e files di Angular già strutturate.
Dunque, sempre da terminale digitate:
npm install -g @angular/cli
come vedete npm ci consente di scaricare librerie esterne, il -g vuol dire installa in maniera globale ossia presente in tutta la macchina. Quindi ,a meno che non lo si disinstalli , non occorrerà più installarlo quando andremo a realizzare altre applicazioni.
Per verificare che tutto sia andato a buon fine , ad installazione finita testatene la versione da terminale:
ng --version
se vi restituisce questo è ok:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.1.7
Node: 12.16.1
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1001.7
@angular-devkit/core 10.1.7
@angular-devkit/schematics 10.1.7
@schematics/angular 10.1.7
@schematics/update 0.1001.7
grandi!! Siamo pronti per realizzare la nostra web App.
Angular: realizza il front end
Organizziamo il lavoro in una directory, per cui realizzatela dove meglio credete e rinominatela con un nome a piacere, io ,ad esempio, utilizzo , con molta fantasia, angular-laravel.
Cliccateci sopra con il tasto destro ed apritela con git Bash, e digitate:
ng new ngbook --inline-template --skipTests=true --routing=true
ciò vuol dire che realizzeremo un’applicazione di nome ngbook, con un template inline (quindi non in un file separato besnsì nella classe stessa), ometteremo il file di tests e gli diciamo di realizzare anche il file app.routing.module.
Dopo qualche istante terminerà l’installazione, quindi spostatevi all’interno della root principale mediante comenado:
cd ngbook/
e digitate :
ng serve -o
Dove il -o indica di aprire il browser predefinito automaticamente.
Questa è la schermata che vi trovate davanti.
Angular e Laravel: realizza i componenti lato client
Benissimo siamo pronti per realizzare alcuni componenti e nello specifico andremo a creare:
- navbar –barra di navigazione
- home — home page
da terminale posizionatevi all’interno della root principale del progetto e digitate:
ng g c shared/navbar -is ng g c components/home
il -is vuol dire inline style, ossia non realizzare un altro file per gli stili ma li inseriremo all’interno della classe stessa come il template, visto che per quanto riguarda la barra di navigazione sfrutteremo le classi di bootstrap.
Notate anche che ho realizzato il componente navbar all’interno della cartella shared (componenti condivisi) ed il componente home all’interno di components, si tratta semplicemente di una best practice di Angular.
Angular: implementare il framework bootstrap e font awesome
Come dicevo prima per rendere carino e, soprattutto responsive, il layout sfrutteremo Bootstrap, per le icone faremo uso di font-awesome.
Da terminale digitate:
npm install bootstrap font-awesome
Ora aprite il file angular.json ed aggiungete i percorsi al nodo style:
...
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": []
},
"configurations": {
...
quindi , se è avviato, chiudete (killate) il server, da terminale fate ctrl+c, poi riavviatelo affinchè le modifiche abbiano effetto (ng serve).
Angular: realizza la navbar
Aprite il file app.components.ts e cancellate il contenuto relativo al template inserendo:
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-nav></app-nav>
<router-outlet></router-outlet>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngbook';
}
ora aprite il file nav.components ed aggiungete nel template:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
template: `
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand">Angular Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Member
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/register">Register</a>
<a class="dropdown-item" href="/login">Login</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
`,
styles: [
]
})
export class NavComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
questa è solo una barra di navigazione bootstrap, la potete trovare su http://getbootstrap.com/components/#navbar.
Se avviate l’app ora avrete un risultato come in figura:
non è tutto, perchè funzioni tutto (il dropdown e button toggle responsive) aprite il file index.html e sopra la chiusura del tag body aggiungete i link relativi ai file js di bootstrap:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Di certo avrei potuto scaricare ad esempio il file popper.js tramite npm:
npm install popper.js --save
Suggerimento: segui questa guida se desideri utilizzare npm per installare popper.js
Quindi utilizzare ngx-bootstrap per far funzionare i menu a discesa.
Suggerimento: segui questa guida se desideri utilizzare ngx-bootstrap
Ma ho preferito percorrere la via più veloce (anche se è consigliabile l’altra 😉 🙂 )
Angular: realizza altri componenti ed aggiungi contenuti
E’ arrivato il momento di realizzare anche i componenti about, contact e quelli relativi al backend, ossia quelli accessibili previa autorizzazione.
Da terminale quindi digitate:
ng g c components/about -is ng g c components/contact -is ng g c admin/home-admin -is ng g c admin/list-admin -is
Come potete notare ho creato i primi due componenti all’interno della directory components , mentre gli altri all’interno di admin , questa sarà protetta, per tutti ho deciso di realizzare uno stile in linea in quanto non mi dilungherò nel realizzare template complessi, ciò che che conta è che capiate com possano interagire Angular e Laravel.
Aprtite il component about e modificate come di seguito:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-about',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>ABOUT PAGE</h1>
</div>
</div>
</div>
`,
styles: [
`
h1{
color: green;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
`
]
})
export class AboutComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
}
Niente di eccezionale, utilizzo delle classi css di bootstrap, ho inserito un minimo di stile ed un font di google fonts importato in src/index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ngbook</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@300&display=swap" rel="stylesheet"> </head> <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>
Ora passiamo agli altri componenti, aprite contact.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-contact',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>CONTACT PAGE</h1>
</div>
</div>
</div>
`,
styles: [
`
h1{
color: orange;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
`
]
})
export class ContactComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
anche qui solito discorso , cambia solo il colore del font.
Aprite il component home.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>HOME PAGE</h1>
</div>
</div>
</div>
`,
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
visto che in questo componente non abbiamo uno stile in linea aprite anche home.component.css:
h1{
color: red;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
perfetto!
Apriamo il file admin/home-admin.component.ts e digitate:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home-admin',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>ADMIN HOME</h1>
</div>
</div>
</div>
`,
styles: [
`
h1{
color: red;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
`
]
})
export class HomeAdminComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
e per finire il file admin/admin-list.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list-admin',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>ADMIN LIST</h1>
</div>
</div>
</div>
`,
styles: [
`
h1{
color: orange;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
`
]
})
export class ListAdminComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
ora non ci resta che impostare le rotte per poterli visionare.
Angular: imposta le routes
Se vi ricordate quando abbiamo inizializzato la nostra applicazione vi ho fatto creare anche il file app-routing.module.ts:
... --routing=true...
questa è la classe che si occupa appunto di gestire le rotte in angular, ossia il cambio di viste in base al click su un link da parte di un utente molto semplicemente.
Allora apritelo e modificate come di seguito:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {ContactComponent} from './components/contact/contact.component';
import {HomeComponent} from './components/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'about', component: AboutComponent},
{path: 'contact', component: ContactComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ho modificato la constante routes dove ho inserito la chiave path la quale indica il nome del percorso da seguire, quindi inserisco il valore. Poi la chiave component con il valore appunto del componente da seguire. Ricordatevi di importare i componenti relativi.
Come si può vedere la prima path ha un valore vuoto ed un redirect, ciò vuol dire che in caso di indirizzo semplice tipo http://localhost:4200 mi reindirizzi al componente home.
Una rotta di reindirizzamento deve avere una proprietà pathMatch , che viene utilizzata per indicare come si desidera abbinare un URL al percorso di una rotta . Vogliamo che l’intero URL debba corrispondere ” , quindi il valore pathMatch è pieno .
Reindirizza i contenuti di ogni percorso usando il gancio del router
Se aprite il componente radice e cioè app.component.ts noterete che sotto il tag relativo al nav troviamo:
...
<app-nav></app-nav>
<router-outlet></router-outlet>
...
router-outlet è stato aggiunto in automatico in fase di inizializzazione e ci consente di visualizzare quei componenti contenuti nelle path di app.routing.module in base alla scelta.
Il componente nav lo lascio fuori in quanto voglio vederlo in tutte le viste.
Se aprite il componente nav.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
template: `
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="/" class="navbar-brand">Angular Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Member
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/register">Register</a>
<a class="dropdown-item" href="/login">Login</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
`,
styles: [
]
})
export class NavComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
dobbiamo modificare il tag href :
<li class="nav-item"> <a class="nav-link" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="/contact">Contact</a> </li>
in:
<li class="nav-item"> <a class="nav-link" routerLink="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact">Contact</a> </li>
in Angular si utilizza routerLink, Perfetto!!
Dai provate pure su http://localhost:4200 , verrete reindirizzati su home, ora provate a cliccare sui link about e contact.
