Crearea unei aplicații Web de la zero folosind AngularJS și Firebase Partea 4

În tutorialul anterior, am implementat funcționalitatea de înregistrare și, de asemenea, am văzut cum să folosim serviciile AngularJS pentru partajarea datelor între controlori. În această parte a seriei de tutorial, vom crea o interfață pentru utilizatorul conectat pentru a crea o postare pe blog.

Noțiuni de bază 

Să începem prin clonarea celei de-a treia părți a tutorialului de la GitHub.

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

După ce ați clonat codul sursă, navigați la directorul proiectului și instalați dependențele necesare.

cd AngularJS_Firebase_Part3 Instalare npm

După instalarea dependențelor, porniți serverul.

npm start

Punctați browser-ul la http: // localhost: 8000 / app / # / home și ar trebui să aveți aplicația să ruleze.

Crearea paginii Adăugați postare

Avem nevoie de o pagină cu care utilizatorul poate crea și publica postări de pe blog. Să adăugăm șabloanele și fișierele necesare pentru a crea pagina Adăugare postare.

Navigați la AngularJS_Firebase_Part3 / app și creați un dosar numit addPost. Interior addPost creați un fișier HTML numit addPost.html și addPost.js. În addPost.html adăugați următorul cod HTML:

       
 
  
 
 
 
 
  
Creați un mesaj
  
 Titlu 
  
 
  
 Post 
  
 
  
  
  
 
 
 
 
  
 
AngularJS & Firebase Blog App
 
  

Interior addPost.js, vom defini rutele pentru vizualizarea Add Post. $ routeProvider are o metodă numită cand, pe care o vom folosi pentru a crea o rută pentru noi addPost vedere. Vom stabili a templateUrl care ar fi prestate în index.html. De asemenea, vom seta a controlor (logica care controlează o vizualizare) pentru nou-creat domeniul de aplicare $ din addPost vedere. Iată cum addPost.js în cele din urmă arată:

"utilizarea strictă"; "$ routeProvider", funcția ($ routeProvider) $ routeProvider.when ('/ addPost', templateUrl: 'addPost / addPost.html') ', controler:' AddPostCtrl ');]) .controller (' AddPostCtrl ', [' $ scope ', functie ($ scope) ]);

Includeți myApp.addPost modul în app.js.

angular.module ('myApp', 'ngRoute', 'myApp.home', 'myApp.register', 'myApp.welcome', 'myApp.addPost' // Modul nou adăugat])

De asemenea, adăugați o referință la addPost.js în app / index.html pagină.

Salvați modificările, reporniți serverul și îndreptați browserul spre http: // localhost: 8000 / app / # / addPost și ar trebui să puteți vedea pagina de adăugare a postării.

Validarea câmpurilor Adăugare Mesaj

În primul rând, trebuie să adăugăm o directivă ngModel la caseta de text de intrare și zona de text din pagina de postare pentru a activa funcția legarea datelor în două direcții.

Când un utilizator publică o postare pe blog, ar trebui să aibă un titlu și o postare. Deci, vom adăuga validarea pentru a verifica dacă o postare pe blog are titlul și postarea. În cazul în care titlul și postul sunt furnizate, vom activa butonul de publicare și utilizatorul își poate publica postarea în blog. Vom folosi o directivă ngDisabled pentru a dezactiva butonul de publicare. Adaugă ngDisabled directivă la butonul de publicare așa cum se arată.

După cum se vede în codul de mai sus, ngDisabled ar dezactiva butonul de publicare atunci când titlul sau postul articolului nu este furnizat.

Implementarea funcționalității Add Post

Apoi vom salva titlul și postarea articolului Firebase când utilizatorul face clic pe butonul de publicare. Pentru a salva datele în Firebase, vom folosi API-ul $ push.

Adaugă ngController directivă în fața organismului addPost.html și adăugați, de asemenea, directiva ngSubmit la formularul din addPost.html.

Deschide addPost.js și adăugați o nouă funcție numită AddPost în interiorul AddPostCtrl controler după cum se arată:

.controler ('AddPostCtrl', ['$ scope', functie ($ scope) $ scope.AddPost = function () // Adauga logica post va fi aici]);

Vom avea nevoie $ firebase pentru a împinge datele la Firebase Db, deci injectați $ firebase în modulul AddPostCtrl controlor.

.controler ("AddPostCtrl", ['$ scope', '$ firebase', functie ($ scope, $ firebase) 

Creați un obiect Firebase utilizând adresa URL Firebase.

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

Utilizarea firebaseObj vom crea un exemplu de $ firebase pe care o vom folosi pentru a împinge datele către Firebase.

var fb = $ firebase (firebaseObj);

Citiți titlul și mesajul introdus de utilizator folosind domeniul de aplicare $. 

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

Deoarece avem titlul și postarea, vom apela API-ul push Firebase pentru a salva date în Firebase.

(funcția (ref) console.log (ref);, funcția (eroare) console.log ("Eroare:", eroare) );

Acum, salvați toate modificările, reporniți serverul și încercați să adăugați o nouă postare pe blog. Odată ce ați făcut clic pe butonul de publicare, verificați consola browserului pentru obiectul de referință. După aceea, conectați-vă la contul Firebase și ar trebui să puteți vedea datele.

Înfășurați-o

În această parte a seriei, am creat o interfață pentru a adăuga sau a publica postări în blog. În următoarea parte a acestei serii, vom crea o interfață pentru a prelua și a afișa toate postările de blog adăugate de utilizatori.

Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne gândurile dvs. în comentariile de mai jos!