7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Costruzione di un Front-End alimentato da WordPress: Avvio , Indirizzamento e Servizi

Scroll to top
Read Time: 13 mins
This post is part of a series called Building a WordPress-Powered Front End With the WP REST API and AngularJS.
Building a WordPress-Powered Front End: Introduction and Setup
Building a WordPress-Powered Front End: A Custom Directive for Post Listing

Italian (Italiano) translation by Piergiorgio Sansone (you can also view the original English article)

Nella parte precedente di questa serie sulla creazione di un front-end WordPress-powered con l'API REST di WP e AngularJS, abbiamo analizzato i requisiti di progetto, valutato wireframes, scaricato e compilato il pacchetto HTML, e costruito il companion plugin per WordPress che consente di modificare le risposte per le risorse di tutti i messaggi e gli utenti.

Avendo posto un fondamento solido per il nostro progetto, ora siamo pronti per iniziare a lavorare sul front-end e impostare le configurazioni di base per la nostra applicazione con AngularJS.

Nella parte corrente della serie, ci impegniamo a:

  • Avviare l'app AngularJS
  • sezionare i modelli per diversi punti di vista nel pacchetto HTML
  • configurare il routing per la nostra app
  • configurare i servizi per diverse risorse nell'API REST WP

Iniziamo inizializzando l'app AngularJS e la dissezione dei modelli per le viste incluso l'elenco dei post, il singolo post e le categorie.

L'avvio dell'App AngularJS

La prima cosa di cui dobbiamo fare per costruire la nostra applicazione alimentata dalla API REST WP è di inizializzarlo con la direttiva di AngularJS ng-app. La direttiva di ng-app è utilizzata per l'auto-avvio dell'applicazione, e prende il nome del modulo AngularJS come valore facoltativo.

Ma prima di iniziare a modificare qualsiasi file, assicuraratevi di avere eseguito il comando di gulp navigando nella directory quiescent-rest-api-html. Questo farà sì che le modifiche apportate nella directory /src immediatamente vengano compilate nella directory /dist dal comando gulp watch. E oltre a questo, vorrei anche incoraggiarvi a navigare nella directory /dist in un'altra finestra della console ed eseguire il comando http-server che eseguirà il server HTTP di Node.js per questa directory, potreste inoltre visualizzare in anteprima il tuo sito nel browser semplicemente digitando un indirizzo web semplice come 127.0.0.1: 8080.

La direttiva di ng-app solitamente viene inserito nell'elemento radice, cioè il tag <html>. Quindi, noi modificheremo il tag <html> nel file src/index.html al seguente:

Qui, quiescentApp è il nome del nostro modulo AngularJS principale che abbiamo inizializzeremo successivamente nel nostro file di src/js/app.js.

Il file src/js/app.js contiene attualmente solo una riga di codice per inizializzare la funzionalità JavaScript fornita dalla Fondazione Zurb. Possiamo modificare questo file per includere il seguente codice per il modulo principale della nostra applicazione di AngularJS:

La prima cosa nel codice precedente è il self-richiamo funzione anonima che è rappresentato nel modo seguente:

Come suggerisce il nome, la funzione di cui sopra è anonima, cioè non ha nome e richiama sé immediatamente l'esecuzione di tutto il codice che si trova all'interno del suo corpo. È un buon modo per limitare l'ambito delle nostre variabili e funzioni, quindi non sono accessibili a livello globale per qualsiasi manipolazione.

All'interno della funzione anonima, inizializziamo il nostro modulo di AngularJS utilizzando il metodo angular.module(). La funzione angular.module() accetta il nome del modulo come primo argomento e una matrice di dipendenze come secondo argomento.

Le dipendenze che passiamo nel secondo argomento come matrice sono ngRoute, ngSanitize e ngResource. Ecco ciò che ciascuna di loro fa:

  • ngRoute: questo modulo fornisce servizi di routing e deep linking per la nostra applicazione. Si trova nel file angular-route.js nel pacchetto AngularJS come scaricato dal sito ufficiale.
  • ngResource: questo modulo fornisce il supporto per l'interazione con servizi RESTful. Dal momento che stiamo progettando di utilizzare l'API REST di WP, questo sarà il singolo modulo più importante nella nostra applicazione lo utilizzeremo per interagire con le risorse tra cui utenti, categorie e post.
  • ngSanitize: questo modulo fornisce funzionalità per la sanificazione del HTML. Avremo bisogno di questo modulo quando emetteremo HTML nella pagina. Esempi includono il titolo del post, il contenuto del post e un estratto.

Siete pregati di notare che, prima di inserire questi moduli come dipendenze nel nostro modulo principale, i rispettivi file devono essere inclusi nel documento HTML. Ma non devete preoccuparvi di questo, è già configurato nel nostro file di gulp.js.

Dopo aver messo il codice precedente nel vostro file app.js, in testa all'indirizzo fornito dal server HTTP di node.js. Aprite anche gli strumenti di sviluppo del vostro browser, e se non vedete errori di JavaScript, siamo a posto!

Ora che abbiamo inizializzato correttamente la nostra applicazione AngularJS, possiamo lavorare sulla parte di templating e sezionare modelli per diversi punti di vista.

 Modelli per dissezione per diverse visualizzazioni

Dal momento che stiamo costruendo un' applicazione a pagina singola (SPA), abbiamo bisogno di configurare modelli per diverse visualizzazione che si caricano dinamicamente nella pagina quando qualcuno fa clic su un link.

Attualmente, abbiamo più pagine nel nostro HTML, tra cui quelle del profilo di post, post singolo, autore e categoria. L'HTML è stato strutturato in modo tale che l'intestazione, piè di pagina e il contenitore principale sia lo stesso per tutte le pagine. Il contenitore principale nel nostro caso è div.columns.medium-8 all'interno del tag div.main.row. AngularJS ci permette di configurare diversi modelli per i diversi percorsi nell'applicazione. Ma prima di configurare il routing, abbiamo bisogno di dividere questi modelli dai file HTML esistenti.

Così invece di utilizzare quattro pagine diverse per la pagina di indice, singolo post, autore e categoria, possiamo utilizzare una pagina HTML principale e per caricare modelli di viste diverse in base al percorso corrente.

Cominciamo con la dissezione del modello per la visualizzazione dell'elenco di post. Aprite il file di /src/index.html nell'editor di vostra scelta e tagliate tutto il codice che è all'interno del contenitore di div.columns.medium-8. Create un nuovo file denominato listing.html all'interno della directory /src/views e incollare il codice in quel file.

Questo modello servirà come una vista per la nostra pagina di profilo. Possiamo ripetere la procedura per ciascuno dei file post-single.html, author.html e category.html. Aprire ciascuno di questi file nell'editor e tagliate il contenuto del contenitore div.columns.medium-8 e incollatelo nel nuovo file creato all'interno della directory /src/views. I nomi dei file modello deve essere rispettivamente.  single.html, author.html e category.html

Creare un nuovo file nella directory /src/views per la pagina 404 e denominarlo 404.html. Non deve contenere qualcosa di speciale, ma solo la seguente riga di codice:

Ora possiamo tranquillamente rimuovere il file /src/category.html, /src/author.html e /src/post-single.html. Conserveremo il file /src/index.html, che servirà come punto di ingresso principale per la nostra applicazione.

L'ultima cosa che dobbiamo fare ora è dire ad AngularJS caricare questi modelli. E possiamo farlo aggiungendo la direttiva ng-vista nel contenitore div.columns.medium-8 all'interno del file /src/index.html:

La direttiva ng-vista dice ad AngularJS dove caricare il contenuto dei modelli.

Possiamo anche aggiungere l'attributo auto-scroll = "true"sul contenitore div.columns.medium-8, in modo che quando dobbiamo navigare avanti e indietro tra le visualizzazioni, il browser ci porterà al punto da cui siamo partiti.

Torna al tuo browser e aggiornalo, si dovrebbe vedere una pagina che contiene solo l'intestazione e il piè di pagina. Questo è perché noi non abbiamo ancora configurato il routing. E questo è quello che faremo dopo.

Configurazione del Routing per la nostra applicazione

Dopo aver creato i modelli per diverse viste nella nostra applicazione, è tempo di dire ad AngularJS come e quando caricare questi modelli. A questo scopo, AngularJS fornisce un componente provider chiamato $routeProvider. La $routeProvider fornisce un metodo denominato .when() che può essere utilizzato per configurare il percorso insieme con i loro modelli e alcune altre proprietà.

Si consideri il codice seguente:

Qui ci stiamo configurando la nostra applicazione utilizzando il metodo .config() inserendovi la $routeProvider. La funzione accetta un argomento — $route — per la $routeProvider e poi lo utilizzeremo per configurare percorsi diversi.

Il metodo .when() consente di configurare una nuova rotta, e accetta due parametri rispettivamente per la $path e la $route. L'argomento di $path è una stringa che rappresenta il percorso per il quale ci stiamo configurando il percorso. L'argomento $route è un oggetto che contiene informazioni quali l'URL del modello da utilizzare, il controller, l'identificatore del controller, ecc.

Nel codice precedente, abbiamo configurato quattro percorsi rispettivamente per le viste elenco, singolo post, autore e categoria. Abbiamo appena assegnato loro il rispettivo modello URL e configureremo i controller più avanti in questa serie, quando li costruiremo. Quindi a partire da questo punto costruiremo progressivamente sulla base di questo codice.

Nel codice precedente, notaterete che i gruppi denominati sono seguiti da due punti: per i singoli post, autore e categoria. Questi sono memorizzati nel servizio $routeParams e saranno resi disponibili a qualsiasi direttiva o controller che vuole usarli. Guarderemo più in dettaglio, ma per ora, basta pensare a loro come luoghi dove un post slug, un ID utente o un ID di categoria, come previsto dall'utente nell'URL, possano essere accessibili.

A parte i quattro percorsi, abbiamo configurato il modello 404 utilizzando il metodo .otherwise(). Questo metodo indica AngularJS per reindirizzare l'utente a un particolare modello, se nessuno dei percorsi configurati viene abbinato.

Troverete ulteriori informazioni sul servizio di routing AngularJS e suoi diversi metodi e argomenti nella documentazione ufficiale.

Ora è possibile aprire uno qualsiasi dei seguenti quattro URL nel vostro browser e dovreste vedere caricare il modello corretto  :

L'indirizzo http://127.0.0.1:8080 potrebbe essere diverso nel tuo caso. ID/slug che stiamo fornendo qui (in questo caso 10) a questo punto non importa .

L'ultima cosa che dobbiamo fare ora è quello di creare servizi per le risorse come post, utenti e categorie.

Creazione di servizi RESTful per le risorse

AngularJS ci fornisce con il modulo ngResource, che ci permette di costruire il servizio RESTful intorno a un endpoint specificato per una risorsa. Ma prima di addentrarci a scrivere codice per la creazione di servizi, creiamo alcune variabili di configurazione che memorizzano alcune informazioni di base.

Il percorso del server potrebbe essere diverso nel vostro caso, e mi raccomando modificatelo di conseguenza. Dichiarare queste variabili permette di configurare il percorso del server in un solo posto invece di scriverlo separatamente per ciascun servizio. Il codice sopra riportato dovrebbe essere posizionato all'interno della funzione anonima, e io ho messo subito dopo la mia dichiarazione di modulo quiescentApp.

La creazione di un servizio intorno a un endpoint in AngularJS è semplice come il seguente codice:

Il codice precedente crea un servizio intorno la risorsa Post in API REST di WP. Qui, quiescentApp è il nome del nostro modulo principale che abbiamo definito all'inizio.

Il metodo di .factory() prende il nome come primo argomento, e il secondo argomento è una matrice contenente un elenco di dipendenze e una funzione. La funzione accetta gli argomenti passati come dipendenze. Dato che abbiamo fornito $resource come una dipendenza per il nostro servizio, viene passato alla funzione come argomento, e poi la usiamo per creare un servizio per la risorsa di Post.

Già abbiamo dichiarato una variabile per il percorso di API, quindi possiamo sostituire il percorso con il seguente:

Ora che abbiamo creato un servizio per la risorsa di Post, possiamo iniettare questo servizio come una dipendenza nelle nostre direttive e controller e iniziare a utilizzare i suoi metodi come Posts.query(), Posts.get(), ecc. Impareremo di più su questi metodi e ciò che fanno nelle seguenti parti della serie, ma se siete curiosi, si può sempre controllare la documentazione ufficiale.

Per la creazione di un servizio per la risorsa di Post, abbiamo fornito il percorso di /wp/v2/posts. Questo percorso fa riferimento all'insieme dei post e può essere utilizzato anche per la creazione di un singolo post. Ma nella nostra applicazione, abbiamo anche bisogno di recuperare un singolo post basato su suo slug. Per tenere conto di questa caratteristica, possiamo modificare il codice nel modo seguente:

Si tratta di un modello di URL con parametri e i parametri sono il suffisso utilizzando due punti:.

Questa modifica permette di recuperare una raccolta di post utilizzando il percorso /wp/v2/posts, così come il recupero di un singolo post avviene utilizzando come argomento il suo slug  /posts?slug =<slug>.

Oltre a post, ci sarà recupero di categorie e gli utenti dai loro ID. Così il codice seguente crea servizi per le risorse di Utenti e Categorie:

Quindi, il codice per tutti i tre servizi è il seguente:

E il nostro file /src/js/app.js  simile al seguente:

Il metodo .get() su un servizio RESTful restituisce un singolo oggetto utilizzando il metodo HTTP GET. Il metodo .query() utilizza lo stesso metodo HTTP GET, ma restituisce una matrice. Ci sono tre metodi più predefiniti forniti dal servizio, vale a dire .save(), .remove() e .delete(), che utilizzano POST e metodi di eliminazione. Ma ci occuperemo solo con i metodi .get() e .query() in questa serie, come abbiamo solo a che fare con il recupero dei dati.

E questo conclude la nostra esercitazione per oggi.

Cosa ci sarà nel prossimo?

Nell'esercitazione di oggi, abbiamo scritto un sacco di codice JavaScript per la nostra applicazione di avvio automatico, configurato i percorsi e creato i servizi RESTful. Abbiamo sezionato anche i modelli per le diverse viste della nostra applicazione.

Nella parte successiva della serie, ci sarà la costruzione di una direttiva di AngularJS personalizzata per la funzionalità di profilo di posta utilizzando il servizio di Post che abbiamo creato. Questo ci permetterà di includere la funzione del profilo di post in molte posizioni senza ripeterci. Quindi rimanete sintonizzati...

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.