Nella parte precedente della serie, abbiamo creato una direttiva personalizzata per elencare i post sul front-end. Questa direttiva prende gli argomenti direttamente nell'attributo HTML e nell'URL per recuperare i messaggi dal server. Costruire la direttiva ci ha permesso di mostrare la funzionalità di inserimento dei post ovunque nella nostra applicazione riutilizzando la logica di business e la logica di rendering fornita dalla direttiva.
In questa parte conclusiva della serie, lavoreremo sulla parte rimanente della nostra applicazione e costruiremo i controller per l'elenco dei post, i singoli post, gli autori e la pagina delle categorie. Lavoreremo anche sui modelli di questi controller e visualizzeremo su di essi i dati forniti dai controller.
Per essere precisi, nella parte attuale della serie, dovremo:
presentarci ai controller AngularJS
crea controller per post, categorie e utenti
collegare i modelli ai dati forniti dal controller
Iniziamo presentandoci ai controller AngularJS.
Presentazione dei controller AngularJS
I controller in AngularJS sono uno dei principali elementi costitutivi dell'applicazione. Contengono la logica aziendale che decide quali dati visualizzare all'utente. Gestiscono gran parte delle funzionalità relative all'interfaccia utente dell'applicazione e forniscono anche supporto per l'interazione dell'utente.
I controller sono strettamente collegati al DOM e incollano il modello dell'applicazione, dove risiedono i dati, alla vista dell'applicazione.
Nel nostro caso, in cui stiamo costruendo l'applicazione basata sull'API REST di WP, i controller sono dove mostriamo i dati recuperati tramite l'API e diversi servizi all'utente finale.
Costruire un controller per la visualizzazione degli elenchi dei post
I controller in AngularJS sono definiti nel modulo e useremo la stessa notazione dello stile sicuro dell'input di dipendenza come abbiamo fatto per dichiarare la direttiva personalizzata. Considera il seguente codice, in cui stiamo dichiarando un controller per la pagina di inserimento post:
/ ** * Controller per Post Listing * / quiescentApp.controller ('PostListing', [function () var self = this;]);
I controller sono definiti in un modulo usando il .controllore () metodo disponibile nel modulo. Il nome del controller che abbiamo definito sopra è PostListing.
Tutti i dati che dobbiamo esporre al mondo esterno dovrebbero essere impostati su Questo parola chiave all'interno della funzione di costruzione del controllore. Quindi memorizziamo nel cache Questo parola chiave creando un se stesso variabile.
Il controller per l'elenco dei post è il più semplice di tutti i controller che creeremo, nel senso che non è necessario disporre di alcun dato. Deve solo avere un modello collegato, e metteremo il direttiva in quel modello per iniziare a elencare i post. La direttiva recupera i messaggi da sola usando il Messaggi servizio ed elencale utilizzando la propria logica di rendering.
Quindi, come primo passo, collegheremo il views / listing.html modello per il PostListing controller, e lo facciamo nel .config () sezione della nostra applicazione. Il .config () sezione è dove abbiamo configurato i percorsi per l'applicazione, e abbiamo bisogno di modificare il / WP / V2 / messaggi instradare a quanto segue:
Nel codice precedente, abbiamo inserito due proprietà aggiuntive nella definizione della rotta e queste proprietà sono:
controllore: Il nome del controller che dobbiamo collegare a questa rotta e al suo modello.
controllerAs: La parola chiave con cui ci riferiamo al controller nel nostro modello.
Quindi siamo passati PostListing come nome del controller, e ci riferiremo ad esso nel modello usando il postListing parola chiave.
Avendo collegato il controller con il percorso e il modello, ora dobbiamo modificare il modello per elencare correttamente i post. Quindi apri il views / listing.html template e sostituirne il contenuto con il seguente codice:
Di seguito è uno screenshot del modello completato:
E questo è tutto! La suddetta riga di codice mostra la potenza delle direttive AngularJS. Con una sola riga di codice, siamo stati in grado di simulare le funzionalità per la pubblicazione di post che include la logica di business e la logica di rendering. Vedremo inoltre quanto questa direttiva AngularJS possa essere flessibile quando si costruiscono i controllori per le viste delle categorie e degli elenchi utente nelle seguenti sezioni.
Costruire un controller per la vista categoria
Avendo familiarizzato con la sintassi della dichiarazione del controller e dopo aver creato un controller molto semplice per la pubblicazione dei post, siamo pronti per iniziare a lavorare su un controller più avanzato per la visualizzazione delle categorie.
Il controller di visualizzazione delle categorie che stiamo costruendo userà il $ routeParam servizio per accedere all'ID di categoria nell'URL e utilizzando tale ID, il controller utilizzerà il categorie servizio per recuperare informazioni di categoria e un elenco dei suoi post associati. Tuttavia, il controller non recupera direttamente i messaggi utilizzando il Messaggi servizio, ma piuttosto utilizzerà il postListing direttiva e passargli l'ID della categoria per recuperare un elenco di post associati a quella categoria.
Di seguito è riportato il codice per CategoryListing Controller:
/ ** * Controller per categorie * / quiescentApp.controller ('CategoryListing', ['$ routeParams', 'Categories', function ($ routeParams, Categories) var self = this; self.categoryInfo = ; Categories.get ('id': $ routeParams.id, funzione (dati, intestazioni) self.categoryInfo = data;);]);
Il CategoryListing il controller sopra ha due dipendenze per il $ routeParams servizio e il categorie servizio Clienti. Usando il $ routeParams servizio, recupera l'ID della categoria dall'URL, quindi esegue una query utilizzando quell'ID per le informazioni sulla categoria tramite categorie servizio.
Il controller ha una variabile definita sul $ portata oggetto chiamato categoryInfo. Questa variabile contiene l'oggetto categoria restituito dal server e il suo valore viene impostato dopo il completamento della query.
La prossima cosa che dobbiamo fare è collegare un modello a questo controller che visualizzerà i dati all'utente. E lo facciamo nel .config sezione dell'applicazione, proprio come abbiamo fatto per il PostListing controller nella sezione precedente.
Quindi modifica il / Categorie /: id percorso per contenere il seguente codice:
Nel codice sopra, colleghiamo il percorso al CategoryListing controller e anche definire il categoryListing parola chiave attraverso la quale ci riferiamo ad esso nel modello.
Adesso è il momento di modificare il views / category.html modello in modo che mostri i dati dinamicamente invece di mostrare codice HTML statico.
Categoria: categoryListing.categoryInfo.name
Nel codice sopra, abbiamo sostituito il nome della categoria con hard-coded con CategoryListing.categoryInfo.name, dove categoryListing è un'istanza di CategoryListing controller. Il categoryInfo la variabile contiene l'oggetto categoria restituito dal server e questo oggetto contiene nome proprietà per il nome della categoria.
Per la funzionalità di inserimento dei post, usiamo il postListing direttiva e passare l'ID della categoria attraverso il post-args attributo. Per questo scopo, usiamo il filtro[] sintassi supportata dal / WP / V2 / messaggi percorso dell'API REST di WP. Conosciamo già il filtro[] sintassi dalla quarta parte della serie introduttiva sull'API REST di WP.
Di seguito è riportato uno screenshot della vista della categoria completata:
Esaminiamo ora il controller per gli utenti, che è molto simile al controller delle categorie.
Costruire un controller per la vista utente
Il controller per la vista utente è molto simile a quello delle categorie. Inizieremo modificando la configurazione del routing per collegare il controller con il modello:
Qui colleghiamo il UserListing controller con il percorso e il suo modello. La parola chiave con cui ci riferiamo all'istanza del controller è userListing.
Di seguito è riportato il codice per UserListing Controller:
/ ** * Controller per utenti * / quiescentApp.controller ('UserListing', ['$ routeParams', 'Users', function ($ routeParams, Users) var self = this; self.userInfo = ; self.userId = $ routeParams.id; Users.get ('id': self.userId, function (data, headers) self.userInfo = data;);]);
Il UserListing controller prende $ routeParams e utenti servizi come dipendenze. Usando il $ routeParams servizio, accede all'ID utente nell'URL. Il utenti il servizio viene quindi utilizzato per recuperare l'oggetto utente utilizzando l'ID utente. Il userInfo la variabile contiene l'oggetto utente restituito dal server.
Modifichiamo ora il views / author.html modello per rendere questi dati all'utente. Sostituisci tutti i contenuti del author.html file con il seguente:
Informazioni su userListing.userInfo.name
UserListing.userInfo.description
Post di userListing.userInfo.name
Nel codice sopra, accediamo al userInfo variabile definita sull'ambito del controllore che contiene l'oggetto informazioni utente. Usando varie proprietà di questo oggetto utente, sostituiamo il nome utente hard-coded, l'utente gravatar e la descrizione dell'utente.
Per elencare i post creati dall'utente, usiamo il postListing direttiva e passargli l'ID utente come valore di autore parametro. La direttiva quindi recupera i messaggi usando il Messaggi servizio.
Ecco come dovrebbe apparire la vista completata:
Il quarto e ultimo controller su cui è necessario lavorare ora è per la visualizzazione di un singolo post, e lo facciamo nella sezione seguente.
Costruire un controller per la visualizzazione di singoli post
La visualizzazione per il singolo post è leggermente diversa rispetto agli altri in quanto non utilizzerà il postListing direttiva perché la direttiva utilizza un modello più adatto per la pagina di post-elenco. Inoltre, aggiungeremo il supporto per mostrare i commenti per un singolo post in futuro, quindi è necessario disporre di un modello separato per un singolo post anziché utilizzare lo stesso modello utilizzato per l'inserimento dei post.
Per i motivi sopra indicati, useremo il Messaggi servizio manualmente nel controller per un singolo post per recuperare il post in base al suo slug.
Facciamo prima una modifica rapida nel percorso a singolo post per collegare il controller e il modello:
// single post route .when ('/ posts /: slug', templateUrl: 'views / single.html', controller: 'SinglePost', controllerAs: 'singlePost')
Quindi il nome del controller per un singolo post sarà SinglePost. Useremo il singlePost parola chiave per riferirsi ad esso nel suo modello.
Di seguito è riportato il codice per la dichiarazione del controllore:
/ ** * Controller per Single Post * / quiescentApp.controller ('SinglePost', ['$ routeParams', 'Posts', funzione ($ routeParams, Posts) var self = this; self.postSlug = $ routeParams.slug; self.post = ; Posts.query ('slug': self.postSlug, funzione (dati, intestazioni) self.post = data [0];);]);
Nel codice precedente, per prima cosa recuperiamo il post slug usando il $ routeParams servizio e salvarlo nel self.postSlug proprietà sull'ambito del controller. Quindi interrogiamo il database usando il Messaggi servizio fornendo il post slug come argomento di query. I dati restituiti sono una matrice contenente un singolo oggetto, e abbiamo impostato il self.post proprietà sull'ambito utilizzando questi dati restituiti. Semplice!
Ora per il modello, di seguito sono riportati i contenuti del views / single.html file:
SinglePost.post.title.rendered
Da singlePost.post.quiescent_author_name in category.name $ last? ": ','
Il codice sopra riportato è piuttosto semplice poiché leghiamo varie proprietà dell'oggetto post a elementi diversi, proprio come abbiamo fatto nelle ultime sezioni.
Di seguito è riportato uno screenshot della vista single post completata:
L'applicazione è ora completa (non ancora del tutto!) E fornisce viste per le pagine di annunci, post singoli, utenti e categorie.
Conclusione
Qui concludiamo la nostra serie in quattro parti, in cui abbiamo creato un front-end basato su WP REST API e AngularJS. Abbiamo iniziato analizzando i requisiti e rivedendo i wireframe. Quindi abbiamo creato un plugin companion che fornisce alcuni campi aggiuntivi nelle risposte standard che saranno necessarie nel nostro front-end.
Nelle parti seguenti abbiamo eseguito il bootstrap della nostra applicazione AngularJS, modelli sezionati per diverse visualizzazioni e il routing delle applicazioni configurato. Abbiamo anche creato una direttiva AngularJS personalizzata per la funzione di inserimento dei post che astrae la funzionalità per elencare i post e fornisce un modo flessibile per recuperare un insieme di post per requisiti diversi.
Nella parte finale della serie, abbiamo creato i controller per le visualizzazioni di post, singole post, categorie e visualizzazioni degli utenti e li abbiamo collegati con i rispettivi modelli attraverso il .config () sezione 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 singoli post
Nessun post dell'autore messaggio quando non ci sono post da parte dell'utente nella pagina del profilo dell'autore
impaginazione numerata sulle pagine dell'elenco dei post
migliore SEO con applicazioni a pagina singola AngularJS
Cercheremo di sfruttare queste funzionalità in future esercitazioni. Ma per ora, sto lasciando a te il compito di giocare con l'applicazione ed estenderla con alcune fantastiche funzionalità. Assicurati di fornire una demo online per l'applicazione nei commenti poiché sono desideroso di imparare dai miei lettori.
Accentsconagua
Share
