Nella parte precedente della serie, abbiamo riavviato la nostra applicazione AngularJS, configurato il routing per diverse visualizzazioni e costruito servizi intorno a percorsi per post, utenti e categorie. Usando questi servizi, siamo finalmente in grado di recuperare i dati dal server per alimentare il front-end.
In questa parte della serie, lavoreremo per la creazione di una direttiva AngularJS personalizzata per la funzionalità di inserimento dei post. Nell'attuale parte della serie, dovremo:
presentarci alle direttive AngularJS e perché dovremmo crearne una
pianificare la direttiva per la funzione di post-listing e gli argomenti che prenderà
creare una direttiva AngularJS personalizzata per l'elenco dei post insieme al relativo modello
Iniziamo presentandoci alle direttive AngularJS e al motivo per cui ne abbiamo bisogno.
Presentazione delle direttive AngularJS
Le direttive in AngularJS sono un modo per modificare il comportamento degli elementi HTML e riutilizzare una porzione di codice ripetibile. Possono essere usati per modificare la struttura di un elemento HTML e dei suoi figli, e quindi sono un modo perfetto per introdurre i widget personalizzati dell'interfaccia utente.
Durante l'analisi dei wireframe nella prima parte della serie, abbiamo notato che la funzione di inserimento dei post viene utilizzata in tre viste, vale a dire:
Pubblica un annuncio
Profilo dell'autore
Elenco di messaggi di categoria
Quindi, invece di scrivere funzionalità separate per elencare i post su tutte queste tre pagine, possiamo creare una direttiva AngularJS personalizzata che contenga la logica aziendale per recuperare i post utilizzando i servizi creati nella parte precedente di questa serie. Oltre alla logica aziendale, questa direttiva conterrà anche la logica di rendering per elencare i post su determinate viste. È anche in questa direttiva che verrà definita la funzionalità per post-paginazione e il recupero di post su determinati criteri.
Quindi, la creazione di una direttiva AngularJS personalizzata per la funzionalità di inserimento dei post ci consente di definire la funzionalità solo in un unico punto, e questo renderà più facile per noi in futuro estendere o modificare questa funzionalità senza dover cambiare il codice in tutte e tre le istanze dove viene usato.
Detto questo, iniziamo a codificare la nostra direttiva personalizzata per la funzionalità di inserimento dei post.
Pianificazione della direttiva AngularJS personalizzata per la pubblicazione degli annunci
Prima di iniziare a scrivere qualsiasi codice per la creazione della direttiva per la funzionalità di inserimento dei post, analizziamo la funzionalità necessaria nella direttiva.
A livello di base, abbiamo bisogno di una direttiva che potremmo utilizzare sulle nostre visualizzazioni per l'elenco dei post, il profilo dell'autore e la pagina delle categorie. Ciò significa che creeremo un widget UI personalizzato (o un marcatore DOM) che inseriremo nel nostro HTML, e AngularJS si prenderà cura di tutto il resto a seconda delle opzioni che forniamo per quella particolare istanza della direttiva.
Quindi, creeremo un widget UI personalizzato identificato dal seguente tag:
Ma abbiamo anche bisogno che questa direttiva sia flessibile, vale a dire prendere argomenti come input e agire di conseguenza. Considera la pagina del profilo utente in cui vogliamo solo i post appartenenti a quell'utente specifico da mostrare o la pagina della categoria in cui saranno elencati i post appartenenti a quella categoria. Questi argomenti possono essere forniti nei seguenti due modi:
Nell'URL come parametri
Direttamente alla direttiva come valore di attributo
Fornire argomenti nell'URL sembra essere nativo per l'API, come già sappiamo fare. Quindi un utente può recuperare una serie di messaggi appartenenti a un utente specifico nel modo seguente:
http://127.0.0.1:8080/#/posts?author=1
La funzionalità di cui sopra può essere ottenuta utilizzando il $ routeParams servizio fornito da AngularJS. Qui è dove potremmo accedere ai parametri forniti dall'utente nell'URL. L'abbiamo già esaminato durante la registrazione dei percorsi nella parte precedente della serie.
Come per fornire argomenti direttamente alla direttiva come valore di attributo, potremmo usare qualcosa del tipo:
Il post-args l'attributo nel frammento sopra riportato accetta gli argomenti per il recupero di una serie specifica di post e al momento sta prendendo l'ID autore. Questo attributo può richiedere un numero qualsiasi di argomenti per il recupero di post come supportato da / WP / V2 / messaggi itinerario. Quindi, se dovessimo recuperare una serie di post creati da un utente con un ID 1 e appartenente a una categoria di ID 10, potremmo fare qualcosa di simile al seguente:
Il filtrare [gatto] parametro nel codice precedente viene utilizzato per recuperare un insieme di messaggi appartenenti a una determinata categoria.
L'impaginazione è anche una caratteristica essenziale quando si lavora con le pagine di post-elenco. La direttiva gestirà il post impaginazione e questa funzione sarà guidata dai valori di X-WP-Total e X-WP-TotalPages intestazioni restituite dal server insieme al corpo della risposta. Quindi, l'utente sarà in grado di navigare avanti e indietro tra la serie di post precedente e quella successiva.
Avendo deciso il nocciolo duro della direttiva personalizzata per la pubblicazione dei post, ora abbiamo una base abbastanza solida per iniziare a scrivere il codice.
Costruire una direttiva doganale per la pubblicazione di liste
La creazione di una direttiva per la funzionalità di inserimento dei post include due passaggi:
Crea la logica aziendale per il recupero dei post e la gestione di altre cose.
Crea una vista di rendering per questi post da visualizzare nella pagina.
La logica aziendale per la nostra direttiva personalizzata verrà gestita nella dichiarazione direttiva. E per il rendering dei dati sul DOM, creeremo un modello personalizzato per elencare i post. Iniziamo con la dichiarazione direttiva.
Dichiarazione della direttiva
Le direttive in AngularJS possono essere dichiarate per un modulo con la seguente sintassi:
/ ** * Creazione di una direttiva personalizzata per i messaggi che elencano * / quiescentApp.directive ('postListing', [function () return ;]);
Qui stiamo dichiarando una direttiva sul nostro modulo usando il .direttiva() metodo disponibile nel modulo. Il metodo prende il nome della direttiva come primo argomento e questo nome è strettamente collegato al nome del tag dell'elemento. Dal momento che vogliamo che il nostro elemento HTML sia , forniamo una rappresentazione in cammello del nome del tag. È possibile ottenere ulteriori informazioni su questo processo di normalizzazione eseguito da AngularJS per far corrispondere i nomi delle direttive nella documentazione ufficiale.
Viene chiamata la notazione che stiamo utilizzando nel codice sopra riportato per dichiarare la nostra direttiva iniezione sicura di dipendenza. E in questa notazione, forniamo una serie di dipendenze come secondo argomento che sarà necessario dalla direttiva. Al momento, non abbiamo definito alcuna dipendenza per la nostra direttiva personalizzata. Ma dal momento che abbiamo bisogno del Messaggi servizio per il recupero dei post (che abbiamo creato nella parte precedente della serie) e degli AngularJS nativi $ routeParams e $ location servizi per l'accesso ai parametri URL e il percorso corrente, li definiamo come segue:
/ ** * Creazione di una direttiva personalizzata per i post che elencano * / quiescentApp.directive ('postListing', ['$ routeParams', '$ location', 'Posts', function ($ routeParams, $ location, Posts) return limitt : 'E', scope: postArgs: '=', link: function ($ scope, $ elem, $ attr) ;]);
Queste dipendenze vengono quindi rese disponibili alla funzione che è definita come l'ultimo elemento dell'array. Questa funzione restituisce un oggetto contenente la definizione della direttiva. Attualmente, abbiamo due proprietà nell'oggetto definizione direttiva, ad es. limitare e collegamento.
Il limitare opzione definisce il modo in cui usiamo la direttiva nel nostro codice e ci possono essere quattro valori possibili per questa opzione:
UN: Per utilizzare la direttiva come attributo su un elemento HTML esistente.
E: Per utilizzare la direttiva come nome di un elemento.
C: Per utilizzare la direttiva come nome di classe.
M: Per utilizzare la direttiva come commento HTML.
Il limitare l'opzione può anche accettare qualsiasi combinazione dei suddetti quattro valori.
Dal momento che vogliamo che la nostra direttiva sia un nuovo elemento , abbiamo impostato l'opzione di restrizione a E. Se dovessimo definire la direttiva usando gli attributi su un elemento HTML preesistente, potremmo impostare questa opzione su UN. In tal caso, potremmo usare per definire la direttiva nel nostro codice HTML.
Il secondo scopo la proprietà viene utilizzata per modificare l'ambito della direttiva. Per impostazione predefinita, il valore di scopo la proprietà è falso, il che significa che lo scopo della direttiva è lo stesso di quello dei suoi genitori. Quando gli passiamo un oggetto, viene creato un ambito isolato per la direttiva e qualsiasi dato che deve essere passato alla direttiva dal suo genitore viene passato attraverso gli attributi HTML. Questo è ciò che stiamo facendo nel nostro codice e l'attributo che stiamo usando è post-args, che viene normalizzato in postArgs.
Il postArgs proprietà nel scopo l'oggetto può accettare uno dei seguenti tre valori:
=: Significa che il valore passato nell'attributo sarebbe trattato come un oggetto.
@: Significa che il valore passato nell'attributo sarebbe trattato come una stringa semplice.
&: Significa che il valore passato nell'attributo sarebbe trattato come una funzione.
Dal momento che abbiamo scelto di usare il = valore, qualsiasi valore che viene passato nel post-args l'attributo sarebbe trattato come un oggetto JSON e potremmo usare quell'oggetto come argomento per recuperare i post.
La terza proprietà, collegamento, è usato per definire una funzione che viene utilizzata per manipolare il DOM e definire le API e le funzioni necessarie per la direttiva. Questa funzione è dove viene gestita tutta la logica della direttiva.
Il collegamento la funzione accetta argomenti per l'oggetto scope, l'elemento HTML della direttiva e un oggetto per gli attributi definiti sull'elemento HTML della direttiva. Attualmente stiamo passando due argomenti $ portata e $ elem per l'oggetto scope e l'elemento HTML rispettivamente.
Definiamo alcune variabili su $ portata proprietà che useremo per rendere la funzionalità di inserimento dei post sul DOM.
/ ** * Creazione di una direttiva personalizzata per i post che elencano * / quiescentApp.directive ('postListing', ['$ routeParams', '$ location', 'Posts', function ($ routeParams, $ location, Posts) return limitt : 'E', scope: postArgs: '=', link: function ($ scope, $ elem, $ attr) // definizione delle variabili sull'oggetto $ scope $ scope.posts = []; $ scope.postHeaders = ; $ scope.currentPage = $ routeParams.page? Math.abs ($ routeParams.page): 1; $ scope.nextPage = null; $ scope.previousPage = null; $ scope.routeContext = $ location.path ( );;]);
Quindi abbiamo definito sei proprietà sul $ portata oggetto a cui potremmo accedere nel DOM. Queste proprietà sono:
$ messaggi: Un array per contenere oggetti post che verranno restituiti dal server.
$ postHeaders: Un oggetto per contenere le intestazioni che verranno restituite dal server insieme al corpo della risposta. Li useremo per gestire la navigazione.
$ currentPage: Una variabile intera che contiene il numero di pagina corrente.
$ previousPage: Una variabile che contiene il numero di pagina precedente.
$ nextPage: Una variabile che tiene il numero della pagina successiva.
$ routeContext: Per accedere al percorso corrente usando il $ location servizio.
Il postArgs la proprietà che abbiamo definito in precedenza per gli attributi HTML sarà già disponibile su $ portata oggetto all'interno della direttiva.
Ora siamo pronti a fare una richiesta al server usando il Messaggi servizio per il recupero dei messaggi. Ma prima di questo, dobbiamo prendere in considerazione gli argomenti forniti dall'utente come parametri URL, nonché i parametri forniti nel post-args attributo. E a tale scopo, creeremo una funzione che utilizza il $ routeParams servizio per estrarre i parametri URL e unirli con gli argomenti forniti tramite post-args attributo:
/ ** * Creazione di una direttiva personalizzata per i post che elencano * / quiescentApp.directive ('postListing', ['$ routeParams', '$ location', 'Posts', function ($ routeParams, $ location, Posts) return limitt : 'E', scope: postArgs: '=', link: function ($ scope, $ elem, $ attr) // definizione delle variabili sull'oggetto $ scope $ scope.posts = []; $ scope.postHeaders = ; $ scope.currentPage = $ routeParams.page? Math.abs ($ routeParams.page): 1; $ scope.nextPage = null; $ scope.previousPage = null; $ scope.routeContext = $ location.path ( // preparazione degli argomenti della query var prepareQueryArgs = function () var tempParams = $ routeParams; delete tempParams.id; return angular.merge (, $ scope.postArgs, tempParams);;;]);
Il prepareQueryArgs () metodo nel codice precedente utilizza il angular.merge () metodo, che estende il $ scope.postArgs oggetto con il $ routeParams oggetto. Ma prima di unire questi due oggetti, prima cancella il file id proprietà dal $ routeParams oggetto usando il Elimina operatore. Ciò è necessario dal momento che utilizzeremo questa direttiva per le categorie e le visualizzazioni utente e non vogliamo che la categoria e gli ID utente vengano interpretati erroneamente come l'ID post.
Dopo aver preparato gli argomenti di query, siamo finalmente pronti a fare una chiamata al server e recuperare i messaggi, e lo facciamo con il Posts.query () metodo, che accetta due argomenti:
Un oggetto contenente argomenti per creare la query.
Una funzione di callback che viene eseguita dopo che la query è stata completata.
Quindi useremo il prepareQueryArgs () funzione per preparare un oggetto per gli argomenti di query, e nella funzione di callback, impostiamo i valori di alcune variabili sul $ portata proprietà:
La funzione di callback riceve due argomenti per il corpo della risposta e le intestazioni della risposta. Questi sono rappresentati dal dati e intestazioni argomenti rispettivamente.
Il intestazioni argomento è una funzione che restituisce un oggetto contenente le intestazioni di risposta dal server.
Il codice rimanente è piuttosto auto-esplicativo dato che stiamo impostando il valore di $ scope.posts array. Per impostare i valori del $ scope.previousPage e $ scope.nextPage variabili, stiamo usando il x-WP-TotalPages proprietà nel postHeaders oggetto.
E ora siamo pronti a rendere questi dati sul front-end usando un modello personalizzato per la nostra direttiva.
Creazione di un modello personalizzato per la direttiva
L'ultima cosa che dobbiamo fare per far funzionare la nostra direttiva è creare un modello separato per l'inserimento dei post e collegarlo alla direttiva. A tale scopo, dobbiamo modificare la dichiarazione direttiva e includere a TemplateURL proprietà come la seguente:
/ ** * Creazione di una direttiva personalizzata per i post che elencano * / quiescentApp.directive ('postListing', ['$ routeParams', '$ location', 'Posts', function ($ routeParams, $ location, Posts) return limitt : 'E', scope: postArgs: '=', templateUrl: 'views / directive-post-listing.html', link: function ($ scope, $ elem, $ attr) ;]);
Questo TemplateURL la proprietà nel codice precedente si riferisce a un file chiamato direttiva-post-listing.html nel visualizzazioni directory. Quindi crea questo file nel visualizzazioni cartella e incolla nel seguente codice HTML:
Un buon design è molto simile a un pensiero chiaro reso visivo.
Di Bilal Shahid in Citazioni
Creato giorni avanti Dominio. Sottomettiti molto ha spirito anche noi sesto pesce. Prima carne una sopra. Riempirai per. Non posso sera una luce non lo farà. Grande da rendere l'immagine di firmamento. La vita il suo inizio ha benedetto un minore spirito di carne che i mari benedetti hanno creato un grande inizio verde che non può annullare il movimento. La sera sottomessa rende lo spirito meno grande tutto il firmamento verde alato albero sega una divisione in cui diviso asciugherà sega molto meno, terra il. Accendi il loro.
Post precedenti Post più recenti
Questo è un codice HTML di base che rappresenta un singolo post di inserimento e post impaginazione. L'ho copiato dal views / listing.html file. Useremo alcune direttive AngularJS, tra cui ng-repeat, ng-href, ng-src, e ng-bind-html, per visualizzare i dati che attualmente risiedono nel $ portata proprietà della direttiva.
Modifica il codice HTML al seguente:
Post.title.rendered
Di post.quiescent_author_name in category.name $ last? ": ','
Il codice sopra utilizza il ng-repeat direttiva per iterare attraverso il $ scope.posts array. Qualsiasi proprietà definita su $ portata l'oggetto nella dichiarazione direttiva è disponibile direttamente nel modello. Quindi, ci riferiamo al $ scope.posts array direttamente come messaggi nel modello.
Usando il ng-repeat direttiva, ci assicuriamo che il article.post-entry il contenitore sarà ripetuto per ogni post in messaggi array e ogni post è indicato come inviare nel ciclo interno. Questo inviare l'oggetto contiene dati nel formato JSON restituiti dal server, contenenti proprietà come il titolo del post, l'ID post, il contenuto del post e il link dell'immagine in primo piano, che è un campo aggiuntivo aggiunto dal plug-in companion.
Nel prossimo passaggio, sostituiremo valori come il titolo del post, il link del post e il collegamento dell'immagine in primo piano con le proprietà nel inviare oggetto.
Per l'impaginazione, sostituire il codice precedente con il seguente:
Post più recenti Post precedenti
Per prima cosa accediamo al routeContext proprietà, che abbiamo definito nella nostra dichiarazione direttiva, e lo suffisso con il ?page = parametro e utilizzare i valori del pagina successiva e pagina precedente variabili per navigare avanti e indietro tra i post. Controlliamo anche se la pagina successiva o il link della pagina precedente non lo sono nullo, altrimenti aggiungiamo a .Disabilitato classe al pulsante fornito da Zurb Foundation.
Ora che abbiamo terminato la direttiva, è ora di testarlo. E lo facciamo mettendo un tag nel nostro HTML, idealmente proprio sopra il etichetta. Ciò significa che un elenco dei post verrà visualizzato sopra il piè di pagina. Non preoccuparti della formattazione e degli stili in quanto li tratteremo nella parte successiva della serie.
Quindi questo è più o meno per la creazione di una direttiva AngularJS personalizzata per la funzionalità di inserimento dei post.
Che succede Avanti?
Nella parte attuale della serie sulla creazione di un front-end con l'API REST di WP e AngularJS, abbiamo creato una direttiva AngularJS personalizzata per la funzione di post-elenco. Questa direttiva usa il Messaggi servizio che abbiamo creato nella parte precedente della serie. La direttiva accetta anche l'input dell'utente sotto forma di un attributo HTML e attraverso parametri URL.
Nella parte conclusiva della serie, inizieremo a lavorare sull'ultimo pezzo del nostro progetto, ovvero i controller per post, utenti e categorie e i rispettivi modelli.
Accentsconagua
Share
