Share
Im vorherigen Teil der Angular-Blog-Lernreihe haben Sie gelernt, wie Sie das erstellen ShowPostComponent um die Liste der Blogbeiträge auf der Startseite anzuzeigen. Sie haben die Datensätze abgerufen, die mit dem erstellten REST-API-Endpunkt aus der MongoDB-Shell eingefügt wurden.
In diesem Lernprogramm erstellen Sie eine neue Komponente mit dem Namen AddPostComponent Die Benutzeroberfläche zum Hinzufügen eines neuen Blogbeitrags zur MongoDB-Datenbank bereitstellen.
Beginnen wir mit dem Klonen des Quellcodes aus dem vorherigen Teil der Tutorialserie.
git clone https://github.com/royagasthyan/ShowPost AddPost
Navigieren Sie zum Projektverzeichnis und installieren Sie die erforderlichen Abhängigkeiten.
cd AddPost / Client npm install cd AddPost / Server npm installieren
Nachdem Sie die Abhängigkeiten installiert haben, starten Sie die Client- und Serveranwendung neu.
cd AddPost / client npm start cd AddPost / Serverknoten app.js
Richten Sie Ihren Browser auf http: // localhost: 4200, und Sie sollten die Anwendung ausführen.
Beginnen wir mit dem Erstellen der AddPostComponent. Erstellen Sie einen Ordner mit dem Namen Add-Post in der src / app Mappe. In der Add-Post Erstellen Sie eine Datei mit dem Namen add-post.component.ts und fügen Sie den folgenden Code hinzu:
Component aus '@ angle / core' importieren; import Post aus '… /models/post.model'; @Component (Selektor: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) Exportklasse AddPostComponent Konstruktor ()
Erstellen Sie eine Datei mit dem Namen add-post.component.html und den folgenden HTML-Code:
Sie zeigen die Add-Post-Komponente als Popup an.
Jetzt müssen Sie das hinzufügen AddPostComponent zum NgModule. Importieren Sie die AddPostComponent in dem app.module.ts Datei.
import AddPostComponent aus './add-post/add-post.component';
Fügen Sie die Komponente dem hinzu NgModule Erklärungen Liste. So sieht es aus:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; importiere ROUTING von './app.routing'; FormsModule aus '@ angle / forms' importieren; importiere HttpClientModule aus '@ angle / common / http'; importiere RootComponent aus './root/root.component'; LoginComponent aus './login/login.component' importieren; HomeComponent aus './home/home.component' importieren; import ShowPostComponent aus './show-post/show-post.component'; import AddPostComponent aus './add-post/add-post.component'; @NgModule (Deklarationen: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent]), importiert: [BrowserModule, ROUTING, FormsModule, HttpClientModule], Anbieter: [], Bootstrap: [RootComponent]) Exportklasse AppModule
Um das Popup zum Hinzufügen eines Postens auszulösen, haben Sie bereits das Datenziel Attribut der Schaltfläche in home.component.html.
Speichern Sie die obigen Änderungen und starten Sie die Anwendung erneut. Melden Sie sich bei der Anwendung an und klicken Sie auf Hinzufügen Link auf der Homepage. Sie werden die haben AddPostComponent als Popup angezeigt.
Ergänzen Sie die ngModel Direktive zu den Eingabeelementen für Titel und Beschreibung.
Füge hinzu ein klicken Anweisung an die Schaltfläche zum Aufrufen der Methode zum Speichern des Blogposts.
Importieren Sie die Post Modell aus src / app / models / post.model.ts in dem add-post.component.ts Datei.
import Post aus '… /models/post.model';
Definiere das Post Variable in der add-post.component.ts Datei.
öffentliche Post: Post;
Definiere das addPost Methode innerhalb der add-post.component.ts Datei. Von dem addPost Methode, bestätigen Sie die Eingabe Titel und Beschreibung und rufen Sie die Servicemethode auf, um die REST-API aufzurufen. So sieht die Methode aus:
Accentsconagua
addPost () if (this.post.title && this.post.description) // Ruft die Servicemethode auf, um post hinzuzufügen else alert ('Titel und Beschreibung erforderlich'); Lassen Sie uns die Servicedatei für die Komponente erstellen AddPostComponent. Erstellen Sie eine Datei mit dem Namen add-post.service.ts und fügen Sie den folgenden Code hinzu:
import Injectable aus '@ angle / core'; HttpClient aus '@ angle / common / http' importieren; import Post aus '… /models/post.model'; @Injectable () Exportklasse AddPostService Konstruktor (privater http: HttpClient)
In der AddPostService, Erstellen Sie eine Methode namens addPost um den REST-API-Aufruf auszuführen.
addPost (post: Post) return this.http.post ('/ api / post / createPost', title: post.title, Beschreibung: post.description)Wie im obigen Code zu sehen ist, haben Sie die HttpClient machen Sie den API-Aufruf und geben Sie das zurück Beobachtbar.
In dem add-post.component.ts Datei in der addPost Methode, abonnieren Sie die addPost Methode aus der add-post.service.ts Datei.
this.addPostService.addPost (this.post) .subscribe (res => // Antwort vom REST-API-Aufruf);
Hier ist wie das add-post.component.ts Datei sieht:
Component aus '@ angle / core' importieren; importiere AddPostService von './add-post.service'; import Post aus '… /models/post.model'; @Component (Selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], Anbieter: [AddPostService] ) Exportklasse AddPostComponent öffentlicher Beitrag: Beitrag; Konstruktor (privates addPostService: AddPostService) this.post = new Post (); addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => console.log ('response is', res)) ; else alert ('Titel und Beschreibung erforderlich'); Lassen Sie uns einen REST-API-Endpunkt zum Hinzufügen des Blogbeitrags zur MongoDB-Datenbank erstellen. In dem server / app.js Datei, erstellen Sie einen API-Endpunkt wie gezeigt:
app.post ('/ api / post / createPost', (req, res) => // füge die Details in MongoDB ein)Zuerst müssen Sie mit der MongoDB-Datenbank eine Verbindung herstellen Mungo Klient.
mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; console.log ('Verbindung hergestellt'););Nachdem die Verbindung hergestellt wurde, müssen Sie ein Modellobjekt mithilfe von erstellen Post Schema definiert in der server / model / post.js Datei.
const post = neuer Beitrag (title: req.body.title, Beschreibung: req.body.description)
Wie im obigen Code zu sehen, haben Sie das Post-Objekt mithilfe von erstellt Titel und Beschreibung von der Anfrage übergeben req Objekt.
Ruf den sparen Methode für das Post-Objekt, um den Eintrag in MongoDB zu speichern.
post.save ((err, doc) => if (err) werfen err; return res.status (200) .json (status: 'success', data: doc)
Wie im obigen Code zu sehen, einmal die sparen Die Methode callback wird ohne Fehler aufgerufen Erfolg Nachricht zusammen mit dem zurückgegebenen Objekt doc.
So sieht der Endpunkt der REST-API schließlich aus:
app.post ('/ api / post / createPost') (req, res) => mongoose.connect (url, useMongoClient: true, Funktion (err) if (err) werfen err; const post = neuer Post (title: req.body.title, Beschreibung: req.body.description) post.save ((err, doc) => if (err) throw err; return res.status (200) .json (status : 'success', data: doc)));)Speichern Sie die obigen Änderungen und starten Sie die Angular- und Knotenserver erneut. Melden Sie sich bei der Anwendung an und versuchen Sie, einen neuen Blogeintrag hinzuzufügen. Sobald Sie auf die Schaltfläche klicken Hinzufügen Schaltfläche, überprüfen Sie die Browserkonsole, und die Erfolgsantwort wird protokolliert.
Wenn die Blogpost-Details erfolgreich zur Datenbank hinzugefügt wurden, müssen Sie das Popup schließen. Um das Popup zu schließen, gibt es eine Schaltfläche zum Schließen, auf die Sie programmgesteuert klicken müssen.
Sie werden das verwenden @ViewChild Dekorateur, um auf die Schließen-Schaltfläche zuzugreifen.
Einführen ViewChild und ElementRef im AddPostComponent.
import Component, ViewChild, ElementRef aus '@ angle / core';
In der AddPostComponent, Definiere die folgende Variable:
@ViewChild ('closeBtn') closeBtn: ElementRef;Initiiere die closeBtn Klicken Sie mit folgendem Code auf:
this.closeBtn.nativeElement.click ();
Fügen Sie den obigen Code zum Erfolgsrückruf des hinzu addPost Methode. Hier ist der addPost Methode aus add-post.component.ts.
addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click ();); else alert ('Titel und Beschreibung erforderlich'); Speichern Sie die Änderungen und starten Sie den Client-Server neu. Melden Sie sich bei der Anwendung an und versuchen Sie, einen neuen Blogeintrag hinzuzufügen. Sobald die Blogpost-Details erfolgreich gespeichert wurden, wird das Popup-Fenster geschlossen.
Zu beachten ist, dass der neu hinzugefügte Blogeintrag nicht in der Blogeintragsliste angezeigt wird. Sie müssen also einen Auslöser hinzufügen, um zu benachrichtigen, wann das Update erfolgen soll ShowPostComponent. Sie verwenden einen gemeinsamen Dienst, um zwischen den beiden Komponenten zu kommunizieren.
Erstellen Sie einen Ordner mit dem Namen Bedienung in der src / app Mappe. Erstellen Sie eine Datei mit dem Namen common.service.ts mit dem folgenden Code:
import Injectable aus '@ angle / core'; Betreff aus 'rxjs / Betreff' importieren; @Injectable () Exportklasse CommonService public postAdded_Observable = new Betreff (); constructor () notifyPostAddition () this.postAdded_Observable.next ();
Wie im obigen Code zu sehen ist, haben Sie eine Gegenstand namens postAdded_Observable um den neuen Blogbeitrag in der Datenbank zu verfolgen. Immer wenn ein neuer Blogeintrag zur Datenbank hinzugefügt wird, rufen Sie das an notifyPostAddition Methode, die die Abonnenten über die Aktualisierung informiert.
Importieren Sie die CommonService im app.module.ts und füge es in die NgModule Liste des Anbieters. So sieht es aus:
BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; importiere ROUTING von './app.routing'; FormsModule aus '@ angle / forms' importieren; importiere HttpClientModule aus '@ angle / common / http'; importiere RootComponent aus './root/root.component'; LoginComponent aus './login/login.component' importieren; HomeComponent aus './home/home.component' importieren; import ShowPostComponent aus './show-post/show-post.component'; import AddPostComponent aus './add-post/add-post.component'; CommonService von './service/common.service' importieren; @NgModule (Deklarationen: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent]), importiert: [BrowserModule, ROUTING, FormsModule, HttpClientModule], Anbieter: [CommonService], bootstrap: [RootComponent]) Exportklasse AppModule
Einführen CommonService in dem show-post.component.ts Datei und initialisieren Sie es in der Konstruktormethode.
CommonService aus '… /service/common.service' importieren;
Konstruktor (private showPostService: ShowPostService, private commonService: CommonService)
In der ngOnInit Methode, abonnieren Sie die postAdded_Observable Variable und laden Sie die getAllPost Methode. Hier ist wie das ngOnInit Methode sieht aus:
ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost (););
Einführen CommonService in dem add-post.component.ts Datei und rufen Sie die notifyPostAddition Methode, sobald der Blogbeitrag hinzugefügt wurde. Hier ist wie das addPost Methode aus der AddPostComponent sieht aus:
addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService). notifyPostAddition ();); else alert ('Titel und Beschreibung erforderlich'); Speichern Sie die obigen Änderungen und starten Sie den Client-Server erneut. Melden Sie sich bei der Anwendung an und fügen Sie einen neuen Blogeintrag hinzu. Nach dem Hinzufügen wird die Blogpostliste mit dem neuen Blogpost aktualisiert.
In diesem Lernprogramm haben Sie das erstellt AddPostComponent um die Blogpost-Details zur MongoDB-Datenbank hinzuzufügen. Sie haben die REST-API zum Speichern eines Blogposts in der MongoDB-Datenbank mithilfe von erstellt Mungo Klient.
Im nächsten Teil der Serie implementieren Sie die Funktionalität zum Bearbeiten und Aktualisieren der Blogpost-Details.
Der Quellcode für dieses Tutorial ist auf GitHub verfügbar.
Wie war deine bisherige Erfahrung? Lassen Sie mich Ihre wertvollen Vorschläge in den Kommentaren unten wissen.
