Share
In het vorige deel van de serie Angular blog-tutorials, heb je geleerd hoe je de ShowPostComponent om de lijst met blogberichten op de startpagina weer te geven. U hebt de records opgehaald die zijn ingevoegd vanuit de MongoDB-shell met behulp van het gemaakte REST API-eindpunt.
In deze zelfstudie maakt u een nieuw onderdeel met de naam AddPostComponent om de gebruikersinterface te bieden om een nieuwe blogpost toe te voegen aan de MongoDB-database.
Laten we beginnen door de broncode uit het vorige deel van de zelfstudiegroep te klonen.
git clone https://github.com/royagasthyan/ShowPost AddPost
Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.
cd AddPost / client npm install cd AddPost / server npm install
Nadat de afhankelijkheden zijn geïnstalleerd, start u de client- en servertoepassing opnieuw op.
cd AddPost / client npm start cd AddPost / server node app.js
Richt uw browser op http: // localhost: 4200 en u zou de applicatie moeten laten draaien.
Laten we beginnen door het maken van de AddPostComponent. Maak een map met de naam add-bericht binnen in de src / app map. Binnen in de add-bericht map, maak een bestand aan met de naam add-post.component.ts en voeg de volgende code toe:
Component importeren vanuit '@ angular / core'; importeer Post van '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) exportklasse AddPostComponent constructor ()
Maak een bestand met de naam add-post.component.html en de volgende HTML-code:
Je zult de add post component als een popup laten zien.
Nu moet je het toevoegen AddPostComponent naar de NgModule. Importeer de AddPostComponent in de app.module.ts het dossier.
import AddPostComponent uit './add-post/add-post.component';
Voeg het component toe aan de NgModule declaraties lijst. Hier is hoe het eruit ziet:
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer ROUTING van './app.routing'; importeer FormsModule vanuit '@ angular / forms'; importeer HttpClientModule van '@ angular / common / http'; importeer RootComponent van './root/root.component'; importeer LoginComponent van './login/login.component'; importeer HomeComponent uit './home/home.component'; import ShowPostComponent vanuit './show-post/show-post.component'; import AddPostComponent uit './add-post/add-post.component'; @ NgModule (verklaringen: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], invoer: [BrowserModule, ROUTING, FormsModule, HttpClientModule], providers: [], bootstrap: [RootComponent]) exportklasse AppModule
Om de popup voor het toevoegen van berichten te activeren, hebt u de data-target attribuut aan de knop in home.component.html.
Sla de bovenstaande wijzigingen op en start de toepassing opnieuw. Log in op de applicatie en klik op de Toevoegen link op de startpagina. Je hebt de AddPostComponent weergegeven als een popup.
Voeg de toe ngModel richtlijn voor de invoerelementen voor titel en Omschrijving.
Voeg een ... toe Klik richtlijn naar de knop voor het aanroepen van de methode om het blogbericht op te slaan.
Importeer de Post model van src / app / modellen / post.model.ts in de add-post.component.ts het dossier.
importeer Post van '... /models/post.model';
Definieer de post variabele in de add-post.component.ts het dossier.
openbare post: bericht;
Definieer de addPost methode binnen de add-post.component.ts het dossier. Van de addPost methode, valideert u de ingevoerde titel en Omschrijving en maak een aanroep van de servicemethode om de REST API aan te roepen. Hier ziet u hoe de methode eruitziet:
Accentsconagua
addPost () if (this.post.title && this.post.description) // bel de servicemethode om post else alert ('Titel en omschrijving vereist') toe te voegen; Laten we het servicebestand voor de component maken AddPostComponent. Maak een bestand met de naam add-post.service.ts en voeg de volgende code toe:
Injectable importeren vanuit '@ angular / core'; importeer HttpClient van '@ angular / common / http'; importeer Post van '... /models/post.model'; @Injectable () exportklasse AddPostService constructor (privé http: HttpClient)
Binnen in de AddPostService, maak een methode genaamd addPost om de REST API-aanroep te doen.
addPost (plaatsen: plaatsen) retourneer this.http.post ('/ api / post / createPost', title: post.title, description: post.description)Zoals te zien in de bovenstaande code, hebt u gebruik gemaakt van de HttpClient om de API aanroep te doen en de waarneembaar.
In de add-post.component.ts bestand in de addPost methode, abonneer je je op de addPost methode van de add-post.service.ts het dossier.
this.addPostService.addPost (this.post) .subscribe (res => // antwoord van REST API call);
Hier is hoe het add-post.component.ts bestand ziet er:
Component importeren vanuit '@ angular / core'; import AddPostService van './add-post.service'; importeer Post van '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], providers: [AddPostService] ) exportklasse AddPostComponent openbare post: bericht; constructor (private 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 en omschrijving vereist'); Laten we een REST API-eindpunt maken voor het toevoegen van de blogpost aan de MongoDB-database. In de server / app.js bestand, maak een API-eindpunt zoals getoond:
app.post ('/ api / post / createPost', (req, res) => // voeg de details toe aan MongoDB)Eerst moet u verbinding maken met de MongoDB-database met behulp van de Mangoest cliënt.
mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi err; console.log ('connection established'););Nadat de verbinding tot stand is gebracht, moet u een modelobject maken met behulp van de Post schema gedefinieerd in de server / model / post.js het dossier.
const post = new Post (title: req.body.title, description: req.body.description)
Zoals te zien in de bovenstaande code, hebt u het object Post gemaakt met behulp van de titel en Omschrijving geslaagd voor het verzoek req voorwerp.
Bel de opslaan methode op het object Post om het item op MongoDB op te slaan.
post.save ((err, doc) => if (err) gooi err; return res.status (200) .json (status: 'success', data: doc))
Zoals te zien in de bovenstaande code, eenmaal de opslaan methode callback wordt aangeroepen zonder fout, het geeft de. terug succes bericht samen met het geretourneerde object dokter.
Hier ziet u hoe het REST API-eindpunt er uiteindelijk uitziet:
app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gooi fout; const post = nieuwe bericht (title: req.body.title, description: req.body.description) post.save ((err, doc) => if (err) gooi err; return res.status (200) .json (status : 'success', data: doc)));)Sla de bovenstaande wijzigingen op en start beide hoek- en knooppuntservers opnieuw. Meld u aan bij de toepassing en probeer een nieuwe blogpost toe te voegen. Zodra u op klikt Toevoegen knop, controleer de browserconsole en u hebt het succesantwoord geregistreerd.
Wanneer de details van de blogpost met succes aan de database zijn toegevoegd, moet u de pop-up sluiten. Om de pop-up te sluiten, is er een knop Sluiten die u programmatisch moet aanklikken.
Je zult de gebruiken @ViewChild decorateur om toegang te krijgen tot de knop Sluiten.
Importeren ViewChild en ElementRef in AddPostComponent.
importeer Component, ViewChild, ElementRef van '@ angular / core';
Binnen in de AddPostComponent, definieer de volgende variabele:
@ViewChild ('closeBtn') closeBtn: ElementRef;Start het closeBtn klik met behulp van de volgende code:
this.closeBtn.nativeElement.click ();
Voeg de bovenstaande code toe aan de succes-callback van de addPost methode. Hier is de addPost methode van 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 en omschrijving vereist'); Sla de wijzigingen op en start de clientserver opnieuw op. Log in op de applicatie en probeer een nieuw blogbericht toe te voegen. Zodra de details van de blogpost succesvol zijn opgeslagen, wordt de pop-up gesloten.
Een ding om op te letten is dat het nieuw toegevoegde blogbericht niet in de lijst met blogberichten staat. U moet dus een trigger toevoegen om te melden wanneer u de update moet uitvoeren ShowPostComponent. U maakt gebruik van een gemeenschappelijke service om te communiceren tussen de twee componenten.
Maak een map met de naam service binnen in de src / app map. Maak een bestand met de naam common.service.ts met de volgende code:
Injectable importeren vanuit '@ angular / core'; importeer Subject van 'rxjs / Subject'; @Injectable () exportklasse CommonService public postAdded_Observable = new Subject (); constructor () notifyPostAddition () this.postAdded_Observable.next ();
Zoals te zien is in de bovenstaande code, hebt u verklaard een Onderwerpen riep postAdded_Observable om de nieuwe toevoeging aan de database bij te houden. Telkens wanneer een nieuwe blogpost aan de database wordt toegevoegd, belt u de notifyPostAddition methode, die de abonnees op de hoogte brengt van de update.
Importeer de CommonService in app.module.ts en neem het op in de NgModule lijst van providers. Hier is hoe het eruit ziet:
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer ROUTING van './app.routing'; importeer FormsModule vanuit '@ angular / forms'; importeer HttpClientModule van '@ angular / common / http'; importeer RootComponent van './root/root.component'; importeer LoginComponent van './login/login.component'; importeer HomeComponent uit './home/home.component'; import ShowPostComponent vanuit './show-post/show-post.component'; import AddPostComponent uit './add-post/add-post.component'; import CommonService van './service/common.service'; @NgModule (verklaringen: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], invoer: [BrowserModule, ROUTING, FormsModule, HttpClientModule], providers: [CommonService], bootstrap: [RootComponent]) exportklasse AppModule
Importeren CommonService in de Show-post.component.ts bestand en initialiseer het in de constructormethode.
import CommonService van '... /service/common.service';
constructor (private showPostService: ShowPostService, private commonService: CommonService)
Binnen in de ngOnInit methode, abonneren op de postAdded_Observable verander en laad de getAllPost methode. Hier is hoe het ngOnInit methode lijkt:
ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost (););
Importeren CommonService in de add-post.component.ts bestand en bel de notifyPostAddition methode zodra de blogpost is toegevoegd. Hier is hoe het addPost methode van de AddPostComponent ziet:
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 en omschrijving vereist'); Sla de bovenstaande wijzigingen op en start de clientserver opnieuw op. Log in op de applicatie en voeg een nieuwe blogpost toe. Na toevoeging wordt de blogberichtenlijst bijgewerkt met het nieuwe blogbericht.
In deze zelfstudie hebt u de gemaakt AddPostComponent om de blogpostdetails aan de MongoDB-database toe te voegen. U hebt de REST API gemaakt voor het opslaan van een blogpost in de MongoDB-database met behulp van de Mangoest cliënt.
In het volgende deel van de serie implementeert u de functionaliteit om de details van de blogpost te bewerken en bij te werken.
Broncode voor deze tutorial is beschikbaar op GitHub.
Hoe was je ervaring tot nu toe? Laat me uw waardevolle suggesties weten in de onderstaande opmerkingen.
