Créer une application Web à partir de rien avec AngularJS et Firebase Partie 4

Dans le didacticiel précédent, nous avons implémenté la fonctionnalité d'inscription et avons également vu comment utiliser les services AngularJS pour partager des données entre contrôleurs. Dans cette partie de la série de didacticiels, nous allons créer une interface permettant à l'utilisateur connecté de créer un article de blog..

Commencer 

Commençons par cloner la troisième partie du tutoriel de GitHub.

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

Après avoir cloné le code source, accédez au répertoire du projet et installez les dépendances requises..

cd AngularJS_Firebase_Part3 npm installer

Une fois les dépendances installées, démarrez le serveur.

npm start

Pointez votre navigateur sur http: // localhost: 8000 / app / # / home et vous devriez avoir l'application en cours d'exécution.

Création de la page d'ajout de publication

Nous avons besoin d'une page avec laquelle l'utilisateur peut créer et publier des articles de blog. Ajoutons les modèles et les fichiers requis pour créer la page Ajouter un message.

Accédez au AngularJS_Firebase_Part3 / app répertoire et créer un dossier appelé addPost. À l'intérieur addPost créer un fichier HTML appelé addPost.html et addPost.js. Dans addPost.html ajoutez le code HTML suivant:

       
 
  
 
 
 
 
  
Créer un message
  
 Titre 
  
 
  
 Poster 
  
 
  
  
  
 
 
 
 
  
 
Application de blog AngularJS & Firebase
 
  

À l'intérieur addPost.js, nous allons définir les itinéraires pour la vue Add Post. $ routeProvider a une méthode appelée quand, que nous utiliserons pour créer un itinéraire pour notre addPost vue. Nous allons mettre un templateUrl qui serait rendu dans le index.html. Nous allons également définir un manette (logique qui contrôle une vue) pour la nouvelle création $ scope du addPost vue. Voici comment addPost.js regarde enfin:

'use strict'; angular.module ('myApp.addPost', ['ngRoute']) .config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ addPost', templateUrl: 'addPost / addPost.html ', contrôleur:' AddPostCtrl ');]) .controller (' AddPostCtrl ', [' $ scope ', fonction ($ scope) ]);

Inclure le myApp.addPost module dans app.js.

angular.module ('myApp', ['ngRoute', 'monApp.home', 'monApp.register', 'monApp.welcome', 'monApp.addPost' // module nouvellement ajouté])

Ajoutez également une référence à la addPost.js dans le app / index.html page.

Enregistrez les modifications, redémarrez le serveur et pointez votre navigateur sur http: // localhost: 8000 / app / # / addPost et vous devriez pouvoir voir la page d'ajout de publication..

Validation des champs d'ajout de poste

Tout d'abord, nous devons ajouter une directive ngModel à la zone de texte d'entrée et à la zone de texte de la page d'ajout de publication pour permettre la liaison de données bidirectionnelle.

Lorsqu'un utilisateur publie un article de blog, il doit avoir un titre et un article. Nous allons donc ajouter une validation pour vérifier si un article de blog a un titre et un article. Si le titre et l'article sont fournis, nous activerons le bouton de publication et l'utilisateur pourra publier son article de blog. Nous utiliserons une directive ngDisabled pour désactiver le bouton de publication. Ajouter le ngDisabled directive au bouton de publication comme indiqué.

Comme vu dans le code ci-dessus, ngDisabled désactive le bouton de publication lorsque le titre ou l'article de l'article n'est pas fourni.

Implémentation de la fonctionnalité Ajouter une publication

Ensuite, nous allons enregistrer le titre et l'article de l'article dans Base de feu lorsque l'utilisateur clique sur le bouton Publier. Afin de sauvegarder les données sur Firebase, nous utiliserons l’API $ push.

Ajouter le ngController directive au corps de addPost.html et ajoutez également la directive ngSubmit au formulaire addPost.html.

S'ouvrir addPost.js et ajoutez une nouvelle fonction appelée AddPost à l'intérieur de AddPostCtrl contrôleur comme indiqué:

.controller ('AddPostCtrl', ['$ scope', fonction ($ scope) $ scope.AddPost = function () // La logique de publication sera ici]);

Nous aurons besoin $ firebase pousser les données vers Firebase Db, alors injectez le $ firebase module dans le AddPostCtrl manette.

.contrôleur ('AddPostCtrl', ['$ scope', '$ firebase', function ($ scope, $ firebase) 

Créer un objet Firebase en utilisant votre URL Firebase.

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

En utilisant firebaseObj nous allons créer une instance de $ firebase que nous utiliserons pour transmettre des données à Firebase.

var fb = $ firebase (firebaseObj);

Lire le titre et le message saisi par l'utilisateur à l'aide de $ scope. 

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

Puisque nous avons le titre et la publication, nous appellerons l'API push Firebase pour enregistrer les données sur Firebase..

fb. $ push (titre: titre, poste: poste). then (fonction (ref) console.log (réf);, fonction (erreur) console.log ("Erreur:", erreur); )

Enregistrez maintenant toutes les modifications, redémarrez le serveur et essayez d’ajouter une nouvelle publication. Une fois que vous avez cliqué sur le bouton Publier, recherchez l'objet de référence dans la console du navigateur. Ensuite, connectez-vous à votre compte Firebase et vous devriez pouvoir voir les données.

Envelopper

Dans cette partie de la série, nous avons créé une interface pour ajouter ou publier des articles de blog. Dans la prochaine partie de cette série, nous allons créer une interface pour récupérer et afficher tous les articles de blog ajoutés par les utilisateurs..

Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos pensées dans les commentaires ci-dessous!