Een webapp maken vanuit kras met AngularJS en Firebase deel 4

In de vorige zelfstudie hebben we de aanmeldingsfunctionaliteit geïmplementeerd en hebben we ook gezien hoe we AngularJS-services gebruiken om gegevens tussen controllers te delen. In dit deel van de zelfstudiegroep maken we een interface voor de ingelogde gebruiker om een ​​blogpost te maken.

Ermee beginnen 

Laten we beginnen met het klonen van het derde deel van de tutorial vanuit GitHub.

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

Nadat u de broncode hebt gekloond, navigeert u naar de projectdirectory en installeert u de vereiste afhankelijkheden.

cd AngularJS_Firebase_Part3 npm installeren

Zodra de afhankelijkheden zijn geïnstalleerd, start u de server.

npm start

Wijs je browser naar http: // localhost: 8000 / app / # / home en je zou de applicatie moeten laten draaien.

De pagina Bericht toevoegen maken

We hebben een pagina nodig waarmee de gebruiker blogberichten kan maken en publiceren. Laten we de vereiste sjablonen en bestanden toevoegen om de pagina Bericht toevoegen te maken.

Navigeer naar de AngularJS_Firebase_Part3 / app map en maak een map genaamd addPost. Binnen addPost maak een HTML-bestand aan met de naam addPost.html en addPost.js. In addPost.html voeg de volgende HTML-code toe:

       
 
  
 
 
 
 
  
Maak bericht
  
 Titel 
  
 
  
 Post 
  
 
  
  
  
 
 
 
 
  
 
AngularJS & Firebase Blog-app
 
  

Binnen addPost.js, we definiëren de routes voor de weergave Post toevoegen. $ routeProvider heeft een methode genaamd wanneer, die we zullen gebruiken om een ​​route te maken voor onze addPost uitzicht. We zullen een instellen templateUrl welke zou worden gerenderd in de index.html. We zullen ook een instellen controleur (logica die een weergave bestuurt) voor de nieuw gecreëerde $ scope van de addPost uitzicht. Hier is hoe addPost.js eindelijk ziet er:

'gebruik strikt'; angular.module ('myApp.addPost', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ addPost', templateUrl: 'addPost / addPost.html ', controller:' AddPostCtrl ');]) .controller (' AddPostCtrl ', [' $ scope ', function ($ scope) ]);

Omvat de myApp.addPost module in app.js.

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

Voeg ook een verwijzing toe naar de addPost.js in de app / index.html pagina.

Sla de wijzigingen op, start de server opnieuw op en richt uw browser op http: // localhost: 8000 / app / # / addPost en u zou de berichtpagina kunnen zien verschijnen.

Validatie van de berichtvelden toevoegen

Eerst moeten we een ngModel-instructie toevoegen aan het invoertekstvak en het tekstgedeelte op de postpagina toevoegen om de bidirectionele gegevensbinding.

Wanneer een gebruiker een blogbericht publiceert, moet deze een titel en bericht hebben. Dus we zullen validatie toevoegen om te controleren of een blogpost titel en bericht heeft. Als de titel en het bericht worden vermeld, schakelen we de knop Publiceren in en kan de gebruiker zijn of haar blogbericht publiceren. We gebruiken een ngDisabled-instructie om de publicatieknop uit te schakelen. Voeg de toe ngDisabled naar de knop Publiceren, zoals weergegeven.

Zoals te zien in de bovenstaande code, ngDisabled zou de knop Publiceren uitschakelen wanneer de titel of het bericht van het artikel niet is opgegeven.

Implementatie van de functie Postfunctionaliteit toevoegen

Vervolgens slaan we de titel en het bericht van het artikel op Firebase wanneer de gebruiker op de publicatieknop klikt. Om de gegevens op Firebase te bewaren, gebruiken we de $ push API.

Voeg de toe ngController richtlijn voor het orgaan van addPost.html en voeg ook de ngSubmit-richtlijn toe aan het formulier in addPost.html.

Doe open addPost.js en voeg een nieuwe functie toe genaamd AddPost binnen in de AddPostCtrl controller zoals getoond:

.controller ('AddPostCtrl', ['$ scope', function ($ scope) $ scope.AddPost = function () // Add Post-logica zal hier zijn]);

We zullen nodig hebben $ firebase om gegevens naar Firebase Db te pushen, dus injecteer de $ firebase module in de AddPostCtrl controleur.

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

Maak een Firebase-object met uw Firebase-URL.

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

Gebruik makend van firebaseObj we zullen een instantie maken van $ firebase die we gebruiken om gegevens naar Firebase te pushen.

var fb = $ firebase (firebaseObj);

Lees de titel en het bericht dat door de gebruiker is ingevoerd met $ scope. 

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

Aangezien we de titel en post hebben, bellen we de Firebase-push-API om gegevens op te slaan naar Firebase.

fb. $ push (title: title, post: post). then (function (ref) console.log (ref);, function (error) console.log ("Fout:", fout); );

Bewaar nu alle wijzigingen, start de server opnieuw op en probeer een nieuw blogbericht toe te voegen. Nadat u op de knop Publiceren heeft geklikt, controleert u de browserconsole voor het referentieobject. Log daarna in op uw Firebase-account en u moet de gegevens kunnen zien.

Inpakken

In dit deel van de serie hebben we een interface gemaakt om blogposts toe te voegen of te publiceren. In het volgende deel van deze serie zullen we een interface maken om alle blogposts die door gebruikers zijn toegevoegd op te halen en weer te geven.

Broncode van deze tutorial is beschikbaar op GitHub. Laat het ons weten in de reacties hieronder!