Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Costruzione di un front-end alimentato da WordPress : Post, Categorie e Controllori degli utenti

by
Difficulty:IntermediateLength:LongLanguages:
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: A Custom Directive for Post Listing

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

Nella parte precedente della serie, abbiamo costruito una direttiva personalizzata per l'elenco post sul front end. Questa direttiva accetta argomenti direttamente nell'attributo HTML, nonché nell'URL per recuperare i messaggi dal server. La costruzione della direttiva ci ha permesso di visualizzare i l'eleco dei post  ovunque nella nostra applicazione, riutilizzando la logica di business e la logica di rendering previste dalla direttiva.

In questa parte conclusiva della serie, lavoreremo sulla parte restante della nostra applicazione costriremo i controller per l'elenco di post, post singolo, autore e la pagina della categoria. Inoltre lavoreremo sui modelli di questi controllers per visualizzare su di loro i dati forniti dagli stessi controllers.

Per essere specifici, in questa parte della serie vedremo:

  • presentarci ai controller di AngularJS
  • costruire controller per post, categorie e utenti
  • collegare i modelli ai dati forniti dal controller

Quindi iniziamo a presentarci ai controller di AngularJS.

L'introduzione dei controllers AngularJS

I Controllers in AngularJS sono uno dei principali elementi costitutivi dell'applicazione. Essi contengono la logica di business che decide quali dati visualizzare all'utente. Essi guidano molte delle funzionalità correlate a UI dell'applicazione e forniscono supporto anche per l'interazione dell'utente.

Controller sono strettamente collegati al DOM sono il collante del modello dell'applicazione — dove risiedono i dati — per la visualizzazione dell'applicazione.

Nel nostro caso, in cui stiamo costruendo l'applicazione utilizzando l'API REST di WP, i controllori sono dove si mostrano i dati recuperati tramite l'API e diversi servizi per l'utente finale.

Costruzione di un Controller per la visualizzazione dell'elenco dei  Post

I Controllers in AngularJS sono definiti nel modulo e useremo la stessa notazione dello stile sicuro di inserimento delle dipendenze, come abbiamo fatto per la dichiarazione della direttiva personalizzata. Si consideri il codice seguente, in cui stiamo dichiarando un controller per la pagina dell'elenco di post:

I controller sono definiti in un modulo utilizzando il metodo di .controller() che è disponibile nel modulo. Il nome del controller che abbiamo definito sopra è PostListing.

Tutti i dati che abbiamo bisogno di esporre al mondo esterno devono essere impostati sulla parola chiave this all'interno della funzione costruttore del controller. Quindi memoriziamo  parola chiave this creando una self variabile.

 Il controller per l'elenco post è il più semplice di tutti i controller che faremo, nel senso che non ha bisogno di avere tutti i dati. Ha solo bisogno di avere un modello collegato, nel quale per iniziare l'elenco post conterrà la direttiva <post-listing></post-listing>. Il post provvederà al recupero della direttiva utilizzando il servizio Post ed all' elenco di post utilizzando la propria logica di rendering.

Così come primo passo, collegheremo il modello views/listing.html al controller PostListing, e lo facciamo nella sezione .config() della nostra applicazione. La sezione .config() è dove abbiamo configurato la route per l'applicazione, e abbiamo bisogno di modificare il percorso di /wp/v2/posts al seguente:

Nel codice precedente, abbiamo messo due ulteriori proprietà nella definizione del percorso, e queste proprietà sono:

  1. controller: il nome del controller che abbiamo bisogno di collegare a questo percorso e il relativo modello.
  2. controllerAs: la parola chiave con cui ci riferiamo al controller nel nostro modello.

Quindi abbiamo passato PostListing come nome del controller, e ci si riferirà ad esso nel modello utilizzando la parola chiave postListing.

Dopo aver collegato il controller con il percorso e il modello, ora abbiamo  bisogno di modificare il modello per elencare correttamente i post. Quindi aprite il file di modello di views/listing.html per sostituirne il contenuto con il codice riportato di seguito:

Di seguito è riportato uno screenshot del modello completato:

Post listing view

E questo è tutto! La riga di codice precedente esibisce il potere delle direttive AngularJS. Con una sola riga di codice, siamo stati in grado di simulare la funzionalità per l'elenco post che include la logica di business, così come la logica di rendering. Ed inoltre, nelle sezioni seguenti vedremo quanto può essere flessibile la direttiva AngularJS durante la creazione del controller per la categoria e le viste elenco dell'utente.

Costruzione di un Controller per la visualizzazione per categorie

Avendo familiarizzato con la sintassi della dichiarazione del controller e costruito un controller molto semplice per l'elenco dei post, possiamo iniziare a lavorare su un controller più avanzato per la visualizzazione delle categorie.

Il controller della vista per categorie che costruiremo, utilizzerà il servizio $routeParam per arrivare all'ID della categoria nella URL ed utilizzarlo. Il controller utilizzerà il servizio Categories per prendere le informazioni sulle categorie ed elencare i post ad esse associati. Tuttavia, il controller non preleverà direttamente il post utilizzando il servizio di post, ma piuttosto utilizzerà la direttiva postListing e passerà l'ID di categoria per recuperare un elenco di tutti i messaggi associati a tale categoria.

Di seguito è il codice per il controller di CategoryListing:

Il controller CategoryListing di cui sopra ha due dipendenze per il servizio di $routeParams e il servizio  Categorie personalizzate . Utilizzando il servizio di $routeParams, recupera l'ID della categoria dall'URL e poi le query che utilizzano tale ID per le informazioni di categoria tramite il servizio Categorie.

Il controller ha una variabile definita sull'oggetto $scope denominata categoryInfo. Questa variabile contiene l'oggetto di categoria restituito dal server, e il valore è impostato dopo che la query ha avuto successo.

La prossima cosa che dobbiamo fare è quello di collegare un modello a questo controller che visualizzerà i dati all'utente. E lo facciamo nella sezione .config dell'applicazione, come abbiamo fatto per il controller di PostListing nella sezione precedente.

In questo modo modificate l'itinerario /categories /:id per contenere il codice riportato di seguito:

Nel codice sopra, colleghiamo il percorso al controller CategoryListing e inoltre definiamo la parola chiave categoryListing attraverso la quale ci riferiamo ad esso nel modello.

Ora è il momento di modificare il modello di views/category.html, in modo che vengano visualizzati i dati in modo dinamico invece di mostrare il codice HTML statico.

Nel codice precedente, abbiamo sostituito il nome della categoria codificata con {{categoryListing.categoryInfo.name}}, dove categoryListing è un'istanza del controller CategoryListing. La variabile categoryInfo contiene l'oggetto di categoria restituito dal server, e questo oggetto contiene la proprietà name per il nome della categoria.

Per la funzionalità dell' elenco di post, utilizzeremo la direttiva postListing e passeremo l'ID della categoria attraverso l'attributo post-args. Per questo scopo, utilizziamo la sintassi filter[] supportata dal percorso /wp/v2/posts dell'API REST di WP. Abbiamo familiarità con la sintassi  filter[] avendone parlato già nella quarta parte della serie introduttiva sull'API REST di WP.

Sotto vi mostro uno screenshot della vista per categoria completata:

Category view

Ora lavoriamo fuori il controller per gli utenti, che è molto simile al controller delle categorie.

Costruzione di un Controller per la vista utente

Il controller per la visualizzazione di utente è molto simile a quello delle categorie. Iniziamo modificando la configurazione di routing per collegare il controller con il modello:

Qui ci colleghiamo il controller di UserListing con il percorso e il relativo modello. La parola chiave con cui ci si riferisce all'istanza del controller è userListing.

Di seguito è riportato il codice per il controller di UserListing:

Il controller UserListing assume $routeParams e servizi agli utenti come dipendenza. Utilizzando il servizio di $routeParams, accede all'ID utente nell'URL. Il servizio Utenti è quindi utilizzato per recuperare l'oggetto di utente utilizzando l'ID utente. La variabile di userInfo contiene l'oggetto utente restituito dal server.

Ora modifichiamo il modello views/author.html per il rendering di questi dati per l'utente. Sostituite tutto il contenuto del file author.html con il seguente:

Nel codice precedente, abbiamo avuto accesso alla variabile userInfo definita nell'ambito del controller che contiene l'oggetto informazioni utente. Tramite diverse proprietà di questo oggetto utente, sostituiamo la codificca username gravatar dell'utente e la descrizione dell'utente.

Per l'elenco dei post creati dall'utente, dobbiamo utilizzare la direttiva postListing e passare l'ID utente come il valore del parametro autore. La direttiva quindi recupera i messaggi utilizzando il servizio di post.

Ecco a cosa dovrebbe assomigliare la vista completata:

User view

Il quarto e ultimo controller che dobbiamo realizzare è la vista per l'elenco dei singoli post , e lo faremo nella sezione seguente.

Costruzione di un Controller per la visualizzazione di un messaggio singolo

La vista per il singolo post è leggermente diversa rispetto agli altri  ad esempio non utilizza la direttiva di postListing perché la direttiva utilizza un modello che è più adatto per la pagina elenco posts. Inoltre, ci sarà l'aggiunta di un supporto per visualizzare i commenti per un singolo post in futuro, così abbiamo bisogno di avere un modello separato per il singolo post invece di utilizzare lo stesso modello come per  l'elenco di posts.

A causa di questi motivi, useremo il servizio post manualmente nel controller per un singolo post per recuperare il post basato su questo slug.

Facciamo prima una rapida modifica nel percorso del singolo post per collegare il controller e il modello:

Così il nome del controller per un singolo post sarà SinglePost. Utilizzeremo la parola chiave singlePost per fare riferimento ad esso nel relativo modello.

Di seguito è riportato il codice per la dichiarazione del controller:

Nel codice precedente, abbiamo prima recuperato lo slug del  post utilizzando il servizio di $routeParams e salvato nella proprietà self.postSlug  nello scope del controller. Quindi abbiamo interrogato il database utilizzando il servizio   post fornendo il post slug come argomento della query. I dati restituiti sono in una matrice contenente un singolo oggetto, ed abbiamo impostato la proprietà self.post utilizzando questi dati che ha restituito. Semplice!

Ora per il modello, di seguito vi mostro il contenuto del file views/single.html:

Il codice sopra riportato è piuttosto semplice in cui dobbiamo associare varie proprietà dell'oggetto post a diversi elementi, proprio come abbiamo fatto nelle ultime sezioni.

Di seguito è riportato uno screenshot della vista completata del singolo post:

Single post view

L'applicazione è completata (non ancora!) e offre una vista per l'elenco post, le singole pagine di post, utente e categoria.

Conclusione

Qui concludiamo la nostra serie in quattro parti, in cui abbiamo costruito un front-end arricchito con l'API REST di WP e AngularJS. Abbiamo iniziato analizzando i requisiti e revisionato i wireframes. Quindi abbiamo costruito un companion plugin che fornisse alcuni campi aggiuntivi nelle risposte standard necessari nel nostro front-end.

Nelle parti seguenti, abbiamo eseguito il bootstrap della nostra applicazione AngularJS, abbiamo dissezionato i  modelli per diverse viste e configurato i percordi dell' applicazione. Abbiamo anche costruito una direttiva AngularJS personalizzata per la funzionalità elenco post che astrae la funzionalità per elenco di post e ci consente di  recuperare in modo flessibile un insieme di messaggi a seconda delle esigenze.

Nella parte finale della serie, abbiamo costruito i controller per l'elenco posts, i singoli post, categoria e la vista utente e li abbiamo collegati con rispettivi modelli attraverso la sezione .config() della nostra applicazione.

L'applicazione non è completa e può essere migliorata in molti modi. Alcune idee sono elencate di seguito:

  • thread di commenti sulla visualizzazione di un messaggio singolo
  • Nessun post per autore - messaggio  quando non c'è nessun post da parte dell'utente sulla pagina del profilo autore
  • impaginazione numerata nelle pagine di elenco posts.
  • Un SEO migliore con l'applicazione  AngularJS singola pagina

I prossimi tutorials in futuro cercheremo di costruirli sulla base di queste caratteristiche. Ma per ora, vi lascio giocare con l'applicazione ed invito ad estenderla con nuove fantastiche caratteristiche. Fate in modo di fornire una demo online per l'applicazione dei commenti, sono desideroso di imparare dai miei lettori.

Advertisement
Advertisement
Advertisement
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.