Opprette en webapp fra grunnen ved hjelp av AngularJS og Firebase Del 4

I den forrige opplæringen implementerte vi påloggingsfunksjonaliteten og så også hvordan du bruker AngularJS-tjenester for å dele data mellom kontroller. I denne delen av opplæringsserien lager vi et grensesnitt for den innloggede brukeren for å lage et blogginnlegg.

Starter 

La oss begynne med å klone den tredje delen av opplæringen fra GitHub.

git klon https://github.com/jay3dec/AngularJS_Firebase_Part3.git

Etter kloning av kildekoden, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.

cd AngularJS_Firebase_Part3 npm installere

Når avhengighetene er installert, start serveren.

npm start

Pek nettleseren din til http: // localhost: 8000 / app / # / home, og du bør ha programmet kjørt.

Opprette siden Legg til innlegg

Vi trenger en side som brukeren kan opprette og publisere blogginnlegg. La oss legge til krever maler og filer for å opprette siden Legg til innlegg.

Naviger til AngularJS_Firebase_Part3 / app katalog og opprett en mappe som heter addPost. Innsiden addPost opprett en HTML-fil kalt addPost.html og addPost.js. I addPost.html legg til følgende HTML-kode:

       
 
  
 
 
 
 
  
Opprett innlegg
  
 Tittel 
  
 
  
 Post 
  
 
  
  
  
 
 
 
 
  
 
AngularJS & Firebase Blog App
 
  

Innsiden addPost.js, Vi definerer ruter for Legg til innlegg-visningen. $ routeProvider har en metode kalt når, som vi skal bruke til å lage en rute for våre addPost utsikt. Vi setter en templateUrl som ville bli gjengitt i index.html. Vi stiller også en kontrolleren (logikk som styrer en visning) for den nyopprettede $ omfang av addPost utsikt. Dette er hvordan addPost.js endelig ser ut:

'bruk streng'; angular.module ('myApp.addPost', ['ngRoute']) .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ addPost', templateUrl: 'addPost / addPost.html ', kontroller:' AddPostCtrl ');] .controller (' AddPostCtrl ', [' $ scope ', funksjon ($ scope) ]);

Inkluder myApp.addPost modul i app.js.

angular.module ('myApp', ['ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome', 'myApp.addPost' // Nytilkoblet modul])

Legg også til en referanse til addPost.js i app / index.html side.

Lagre endringene, start serveren på nytt og pek nettleseren din til http: // localhost: 8000 / app / # / addPost, og du bør kunne se siden for legge til innlegg.

Validerer leggingsfeltene

Først må vi legge til et ngModel-direktiv i tekstboksen og tekstområdet på siden Legg til for å aktivere toveis data bindende.

Når en bruker publiserer et blogginnlegg, bør det ha en tittel og et innlegg. Så vi legger til validering for å sjekke om et blogginnlegg har tittel og innlegg. Hvis tittelen og innlegget er oppgitt, aktiverer vi publiserings-knappen, og brukeren kan publisere hans eller hennes blogginnlegg. Vi bruker et ngDisabled-direktiv for å deaktivere publiseringsknappen. Legg til ngDisabled Direktiv til publiseringsknappen som vist.

Som vist i koden ovenfor, ngDisabled ville deaktivere publiseringsknappen når tittelen eller innlegget i artikkelen ikke er oppgitt.

Implementere Add Functionalitet

Deretter lagrer vi tittelen og innlegget til artikkelen til Fire når brukeren klikker publiseringsknappen. For å lagre dataene i Firebase, bruker vi $ push-API.

Legg til ngController direktiv til kroppen av addPost.html og legg også til ngSubmit-direktivet til skjemaet i addPost.html.

Åpne opp addPost.js og legg til en ny funksjon som heter AddPost inne i AddPostCtrl kontrolleren som vist:

.controller ('AddPostCtrl', ['$ scope', funksjon ($ scope) $ scope.AddPost = funksjon () // Legg til Postlogikk vil være her]);

Vi trenger $ Fire å skyve data til Firebase Db, så injiser $ Fire modul i AddPostCtrl kontrolleren.

.controller ('AddPostCtrl', ['$ scope', '$ firebase', funksjon ($ scope, $ firebase) 

Opprett et Firebase-objekt ved hjelp av din Firebase-URL.

var firebaseObj = ny Firebase ("https://blistering-heat-2473.firebaseio.com");

Ved hjelp av firebaseObj vi lager en forekomst av $ Fire som vi skal bruke til å skyve data til Firebase.

var fb = $ ildbase (firebaseObj);

Les tittelen og innlegget som er oppgitt av brukeren ved hjelp av $ omfang. 

var title = $ scope.article.title; var post = $ scope.article.post;

Siden vi har tittelen og innlegget, kaller vi Firebase push API for å lagre data til Firebase.

fb. $ push (title: title, post: post). da (funksjon (ref) console.log (ref);, funksjon (feil) console.log ("Feil:", feil); );

Lagre alle endringene, start serveren igjen, og prøv å legge til et nytt blogginnlegg. Når du har klikket på publiseringsknappen, må du sjekke nettleserkonsollen for referansebjektet. Deretter logger du inn på Firebase-kontoen din, og du bør kunne se dataene.

Pakke det opp

I denne delen av serien opprettet vi et grensesnitt for å legge til eller publisere blogginnlegg. I neste del av denne serien lager vi et grensesnitt for å hente og vise alle blogginnleggene som er lagt til av brukerne.

Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine tanker i kommentarene nedenfor!