Share
Nella parte precedente di questa serie sulla creazione di un front-end basato su WordPress con WP REST API e AngularJS, abbiamo analizzato i requisiti del progetto, valutato wireframe, scaricato e compilato il pacchetto HTML e creato il plugin companion per WordPress che modifica le risposte per Messaggi e utenti risorse.
Dopo aver gettato solide fondamenta per il nostro progetto, siamo ora pronti per iniziare a lavorare sul front-end e configurare le configurazioni di base per la nostra applicazione con AngularJS.
Nell'attuale parte della serie, dovremo:
Iniziamo inizializzando l'app AngularJS e analizzando i modelli per le visualizzazioni, tra cui post-elenco, post singolo e categorie.
La prima cosa che dobbiamo fare per creare la nostra applicazione WP REST API è quella di eseguirne il bootstrap con ng-app Direttiva AngularJS. Il ng-app direttiva viene utilizzata per avviare automaticamente l'applicazione e prende il nome del modulo AngularJS come valore opzionale.
Ma prima di iniziare a modificare qualsiasi file, assicurati di aver eseguito il file sorso comando navigando nel quiescente-resto-api-html directory. Ciò garantirà che eventuali modifiche apportate nel / src la directory viene immediatamente compilata nel / dist directory dal gulp watch comando. E oltre a questo, vorrei anche incoraggiarti a navigare nel / dist directory in un'altra finestra della console ed eseguire il http server comando che eseguirà il server HTTP Node.js per quella directory e potresti visualizzare l'anteprima del tuo sito nel browser semplicemente digitando un indirizzo web semplice come 127.0.0.1:8080.
Il ng-app la direttiva viene solitamente inserita nell'elemento radice, ad esempio etichetta. Quindi, modificheremo il tag nella src / index.html file al seguente:
Qui, quiescentApp è il nome del nostro principale modulo AngularJS che verrà inizializzato in seguito nel nostro src / js / app.js file.
Il src / js / app.js il file contiene attualmente una sola riga di codice per l'inizializzazione della funzionalità JavaScript fornita da Zurb Foundation. Possiamo modificare questo file per includere il seguente codice per il modulo principale della nostra applicazione AngularJS:
Accentsconagua
(function () / ** * Definizione del modulo per Quiescent App * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']);) ();La prima cosa nel codice precedente è la funzione anonima autoinviante che è rappresentata da quanto segue:
(funzione() )();
Come suggerisce il nome, la funzione sopra è anonimo, non ha un nome e si invoca immediatamente eseguendo tutto il codice che si trova nel suo corpo. È un buon modo per limitare l'ambito delle nostre variabili e funzioni in modo che non siano accessibili globalmente per qualsiasi manipolazione.
All'interno della funzione anonima, inizializziamo il nostro modulo AngularJS usando il angular.module () metodo. Il angular.module () la funzione prende il nome del modulo come primo argomento e una matrice di dipendenze come secondo argomento.
Le dipendenze che abbiamo passato nel secondo argomento come array sono ngRoute, ngSanitize, e ngResource. Ecco cosa fa ognuno di loro:
ngRoute: Questo modulo fornisce servizi di routing e deep linking per la nostra applicazione. Si trova nel angolari-route.js file nel pacchetto AngularJS scaricato dal sito ufficiale.ngResource: Questo modulo fornisce supporti per l'interazione con i servizi RESTful. Dal momento che stiamo progettando di utilizzare l'API WP REST, questo sarà il modulo più importante della nostra applicazione poiché utilizzeremo questo modulo per interagire con risorse quali post, categorie e utenti.ngSanitize: Questo modulo fornisce funzionalità per sanitizzare l'HTML. Avremo bisogno di questo modulo per l'output di HTML sulla pagina. Gli esempi includono il titolo del post, il contenuto del post e l'estratto.Si noti che, prima di iniettare questi moduli come dipendenze nel nostro modulo principale, i rispettivi file devono essere inclusi nel documento HTML. Ma non devi preoccuparti di ciò, come abbiamo già configurato nel nostro gulp.js file.
Dopo aver inserito il codice sopra nel tuo app.js file, dirigersi all'indirizzo fornito dal server HTTP Node.js. Apri anche gli strumenti per sviluppatori nel tuo browser, e se non vedi errori JavaScript, siamo a posto!
Ora che abbiamo inizializzato con successo la nostra applicazione AngularJS, possiamo lavorare sulla parte dei template e sezionare i template per viste differenti.
Dal momento che stiamo creando un'applicazione per pagina singola (SPA), dobbiamo configurare modelli per visualizzazioni diverse che si caricano dinamicamente nella pagina quando qualcuno fa clic su un collegamento.
Al momento disponiamo di più pagine nel nostro codice HTML, incluse quelle di inserimento post, singolo post, autore e categoria. L'HTML è stato strutturato in modo tale che l'intestazione, il piè di pagina e il contenitore principale siano gli stessi per tutte queste pagine. Il contenitore principale nel nostro caso è div.columns.medium-8 dentro il div.main.row etichetta. AngularJS ci consente di configurare diversi modelli per diversi percorsi nell'applicazione. Ma prima di configurare il routing, dobbiamo analizzare questi modelli dai file HTML esistenti.
Quindi, invece di utilizzare quattro pagine diverse per la pagina indice, post singolo, autore e categoria, possiamo usare una pagina HTML principale e lasciar caricare i modelli per viste diverse a seconda della rotta corrente.
Iniziamo col sezionare il modello per la visualizzazione dell'elenco dei post. Apri il /src/index.html file nell'editor di codice di tua scelta e taglia tutto il codice che si trova all'interno div.columns.medium-8 contenitore. Crea un nuovo file chiamato listing.html dentro il / src / viste directory e incollare il codice in quel file.
Questo modello servirà come vista per la nostra pagina di elenco. Possiamo ripetere la procedura per ciascuno dei post-single.html, author.html, e category.html File. Apri ognuno di questi file nel tuo editor di codice e taglia il contenuto del file div.columns.medium-8 contenitore e incollarli in nuovi file creati all'interno del / src / viste directory. I nomi dei file modello sarebbero single.html, author.html, e category.html rispettivamente.
Crea un nuovo file nel / src / viste directory per la pagina 404 e nominarla 404.html. Non deve contenere nulla di speciale ma solo la seguente riga di codice:
404 - Niente trovato
Ora possiamo rimuovere in sicurezza il /src/post-single.html, /src/author.html, e /src/category.html File. Conserveremo il /src/index.html file, che fungerà da punto di ingresso principale per la nostra applicazione.
L'ultima cosa che dobbiamo fare ora è dire ad AngularJS il posto dove caricare questi modelli. E possiamo farlo aggiungendo il ng-view direttiva nel div.columns.medium-8 contenitore dentro il /src/index.html file:
Il ng-view direttiva dice ad AngularJS dove caricare il contenuto dei file modello.
Possiamo anche aggiungere il scorrimento automatico = "true" attributo sul div.columns.medium-8 contenitore in modo che quando navighiamo avanti e indietro tra le visualizzazioni, il browser ci porterà al punto da cui siamo partiti.
Torna al tuo browser e aggiornalo, e dovresti vedere una pagina contenente solo l'intestazione e il piè di pagina. Questo perché non abbiamo ancora configurato il routing. Ed è quello che facciamo dopo.
Avendo creato modelli per viste differenti nella nostra applicazione, è tempo di dire ad AngularJS come e quando caricare questi modelli. A tale scopo, AngularJS fornisce un componente del provider chiamato $ routeProvider. Il $ routeProvider ci fornisce un metodo chiamato .quando() che può essere usato per configurare percorsi insieme ai loro modelli e ad altre proprietà.
Considera il seguente codice:
/ ** * Configurazione dei percorsi per la nostra app * / quiescentApp.config (['$ routeProvider', funzione ($ route) // postare l'elenco route $ route.when ('/ posts', templateUrl: 'views / listing. html ',) // single post route .when (' / posts /: slug ', templateUrl:' views / single.html ',) // percorso profilo autore .quando (' / users /: id ', templateUrl: 'views / author.html',) // percorso profilo categoria .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route .otherwise ( templateUrl: 'views / 404.html');]);Qui stiamo configurando la nostra applicazione usando il .config () metodo iniettando $ routeProvider dentro. La funzione accetta una discussione-$ route-per il $ routeProvider, e poi lo usiamo per configurare percorsi diversi.
Il .quando() metodo configura un nuovo percorso e prende due parametri per il $ path e il $ route rispettivamente. Il $ path argomento è una stringa che rappresenta il percorso per il quale stiamo configurando il percorso. Il $ route argomento è un oggetto contenente informazioni come l'URL modello da utilizzare, il controller, l'identificatore del controller, ecc.
Nel codice sopra, abbiamo configurato quattro route rispettivamente per le visualizzazioni di post, single post, autore e categoria. Abbiamo appena assegnato loro i rispettivi URL dei modelli e configureremo i loro controller più avanti in questa serie quando li costruiamo. Quindi svilupperemo progressivamente questo codice da questo punto.
Nel codice precedente, prendi nota dei gruppi con nome seguiti da due punti : per i percorsi di un singolo post, autore e categoria. Questi sono memorizzati nel $ routeParams servizio e sarà reso disponibile a qualsiasi direttiva o controller che voglia utilizzarli. Esamineremo questo aspetto in modo più dettagliato, ma per ora, pensiamoli come luoghi in cui è possibile accedere a un post slug, a un ID utente o a un ID di categoria, come fornito dall'utente nell'URL..
Oltre ai quattro percorsi, abbiamo configurato il modello 404 utilizzando il .altrimenti() metodo. Questo metodo indica ad AngularJS di reindirizzare l'utente a un determinato modello se nessuna delle route configurate corrispondesse.
Puoi trovare ulteriori informazioni sul servizio di routing AngularJS e i suoi diversi metodi e argomenti nella documentazione ufficiale.
Ora puoi aprire uno dei seguenti quattro URL nel tuo browser e dovrebbe vedere il modello corretto da caricare:
http://127.0.0.1:8080/#/posts http://127.0.0.1:8080/#/posts/10 http://127.0.0.1:8080/#/categories/10 http://127.0.0.1 : 8080 / # / utenti / 10
L'indirizzo http://127.0.0.1:8080 potrebbe essere diverso nel tuo caso. L'ID / slug che stiamo fornendo qui (in questo caso 10) non ha importanza a questo punto.
L'ultima cosa che dobbiamo fare ora è creare servizi per risorse come post, utenti e categorie.
AngularJS ci fornisce il ngResource modulo, che ci consente di creare un servizio RESTful attorno a un dato endpoint per una risorsa. Ma prima di approfondire la scrittura di qualsiasi codice per la creazione di servizi, creiamo alcune variabili di configurazione che memorizzano alcune informazioni di base.
/ ** * Variabili di configurazione per l'app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath;
Il percorso del server potrebbe essere diverso nel tuo caso e ti consiglio di modificarlo di conseguenza. La dichiarazione di queste variabili ci consente di configurare il percorso del server solo in un posto invece di scriverlo separatamente per ciascun servizio. Il codice sopra deve essere inserito all'interno della funzione anonima e l'ho posizionato immediatamente dopo il mio quiescentApp dichiarazione del modulo.
La creazione di un servizio attorno a un endpoint in AngularJS è semplice come il seguente codice:
quiescentApp.factory ('Post', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa ('http: // localhost / wordpress / wp-json / wp / v2 / posts');]);Il codice sopra crea un servizio intorno al Messaggi risorsa nell'API REST di WP. Qui, quiescentApp è il nome del nostro modulo principale che abbiamo definito all'inizio.
Il .fabbrica() il metodo prende il nome come primo argomento e il secondo argomento è un array che contiene un elenco di dipendenze e una funzione. La funzione accetta gli argomenti passati come dipendenze. Dato che abbiamo fornito $ risorsa come dipendenza per il nostro servizio, viene passato alla funzione come argomento e quindi lo usiamo per creare un servizio per il Messaggi risorsa.
Abbiamo già dichiarato una variabile per il percorso dell'API, quindi possiamo sostituire il percorso con quanto segue:
quiescentApp.factory ('Posts', ['$ resource', function ($ resource) return $ resource (apiUrl + 'posts');]);Ora che abbiamo creato un servizio per il Messaggi risorsa, possiamo iniettare questo servizio come dipendenza dalle nostre direttive e controller e iniziare a usare i suoi metodi come Posts.query (), Posts.get (), ecc. Impareremo di più su questi metodi e su cosa fanno nelle seguenti parti della serie, ma se sei curioso, puoi sempre controllare la documentazione ufficiale.
Per creare un servizio per il Messaggi risorsa, abbiamo fornito il / WP / V2 / messaggi itinerario. Questa rotta punta alla raccolta dei post e può anche essere utilizzata per creare un singolo post. Ma nella nostra applicazione, abbiamo anche bisogno di recuperare un singolo post basato sul suo slug. Per tenere conto di questa funzionalità, possiamo modificare il codice al seguente:
quiescentApp.factory ('Post', ['$ risorsa', funzione ($ risorsa) return $ resource (apiUrl + 'posts? slug =: slug');]);Questo è chiamato un modello di URL con parametri e i parametri sono suffisso usando due punti :.
Questa modifica ci consente di recuperare una raccolta di post usando il / WP / V2 / messaggi percorso, così come il recupero di un singolo post dal suo slug utilizzando il / Messaggi? Slug = discussione.
Oltre ai post, recupereremo categorie e utenti in base ai loro ID. Quindi il seguente codice crea servizi per utenti e categorie risorse:
/ ** * Creazione di un servizio per Utenti * / quiescentApp.factory ('Utenti', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'users /: id');]); / ** * Creazione di un servizio per Categorie * / quiescentApp.factory ('Categorie', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'categorie /: id');]);Quindi, il codice per tutti e tre i servizi è il seguente:
/ ** / ** * Creazione di un servizio per Post * / quiescentApp.factory ('Post', ['$ risorsa', funzione ($ risorsa) return $ resource (apiUrl + 'posts? Slug =: slug'); ]); / ** * Creazione di un servizio per Utenti * / quiescentApp.factory ('Utenti', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'users /: id');]); / ** * Creazione di un servizio per Categorie * / quiescentApp.factory ('Categorie', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'categorie /: id');]);E il nostro /src/js/app.js il file ha un aspetto simile al seguente finora:
(function () / ** * Definizione del modulo per Quiescent App * / var quiescentApp = angular.module ('quiescentApp', ['ngSanitize', 'ngRoute', 'ngResource']); / ** * Variabili di configurazione per app * / var serverPath = 'http: // localhost / wordpress /', apiPath = 'wp-json / wp / v2 /', apiUrl = serverPath + apiPath; / ** * Configurazione dei percorsi per la nostra app * / quiescentApp.config (['$ routeProvider', funzione ($ route) // postare l'elenco route $ route.when ('/ posts', templateUrl: 'views / listing.html',) // single post route .when (' / posts /: slug ', templateUrl:' views / single.html ',) // percorso profilo autore. quando (' / users /: id ', templateUrl:' views / author.html ',) / / category profile route .when ('/ categories /: id', templateUrl: 'views / category.html',) // 404 route .otherwise (templateUrl: 'views / 404.html');] / ** * Creazione di un servizio per Post * / quiescentApp.factory ('Post', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'posts? Slug =: slug'); ]); / ** * Creazione un servizio per Utenti * / quiescentApp.factory ('Utenti', ['$ risorsa', funzione ($ risorsa) return $ resource (apiUrl + 'users /: id'); ]); / ** * Creazione di un servizio per Categorie * / quiescentApp.factory ('Categorie', ['$ risorsa', funzione ($ risorsa) ritorno $ risorsa (apiUrl + 'categorie /: id');]); ) (); $ (Document) .foundation ();Il .ottenere() il metodo su un servizio RESTful restituisce un singolo oggetto usando il OTTENERE Metodo HTTP Il .query () il metodo usa lo stesso OTTENERE Metodo HTTP, ma restituisce un array. Ci sono altri tre metodi predefiniti forniti dal servizio, vale a dire .salvare(), .rimuovere(), e .Elimina(), che uso INVIARE e ELIMINA metodi. Ma ci occuperemo solo di .ottenere() e .query () metodi in questa serie poiché stiamo trattando solo con il recupero dei dati.
E questo avvolge il nostro tutorial per oggi.
Nel tutorial corrente, abbiamo scritto un sacco di codice JavaScript per l'avvio della nostra applicazione, la configurazione dei percorsi e la creazione di servizi RESTful. Abbiamo anche sezionato i modelli per diversi punti di vista nella nostra applicazione.
Nella parte successiva della serie, costruiremo una direttiva AngularJS personalizzata per la funzione di post-elenco utilizzando il Messaggi servizio che abbiamo creato. Questo ci consentirà di includere la funzionalità di inserimento di post in molte località senza ripeterci. Quindi rimani sintonizzato ...
