Share
Nella parte precedente della serie di tutorial del blog Angular, hai imparato come creare il ShowPostComponent per visualizzare l'elenco dei post sul blog nella home page. Sono stati recuperati i record che sono stati inseriti dalla shell MongoDB utilizzando l'endpoint dell'API REST creato.
In questo tutorial, creerai un nuovo componente chiamato AddPostComponent per fornire l'interfaccia utente per aggiungere un nuovo post del blog al database MongoDB.
Iniziamo clonando il codice sorgente dalla parte precedente della serie di tutorial.
git clone https://github.com/royagasthyan/ShowPost AddPost
Passare alla directory del progetto e installare le dipendenze richieste.
cd AddPost / client npm install cd AddPost / server npm install
Dopo aver installato le dipendenze, riavviare l'applicazione client e server.
cd AddPost / client npm start cd AddPost / server node app.js
Puntare il browser su http: // localhost: 4200 e l'applicazione dovrebbe essere in esecuzione.
Iniziamo creando il AddPostComponent. Crea una cartella chiamata aggiungi-post dentro il src / app cartella. Dentro il aggiungi-post cartella, creare un file chiamato add-post.component.ts e aggiungi il seguente codice:
importare Component da '@ angular / core'; importare Post da '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css']) classe di esportazione AddPostComponent costruttore ()
Crea un file chiamato add-post.component.html e il seguente codice HTML:
Visualizzerai il componente Aggiungi post come popup.
Ora devi aggiungere il AddPostComponent al NgModule. Importa il AddPostComponent nel app.module.ts file.
importare AddPostComponent da './add-post/add-post.component';
Aggiungi il componente al NgModule dichiarazioni elenco. Ecco come appare:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import ROUTING da './app.routing'; import FormsModule da '@ angular / forms'; import HttpClientModule da '@ angular / common / http'; importare RootComponent da './root/root.component'; importare LoginComponent da "./login/login.component"; import HomeComponent da './home/home.component'; import ShowPostComponent da './show-post/show-post.component'; importare AddPostComponent da './add-post/add-post.component'; @NgModule (dichiarazioni: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importa: [BrowserModule, ROUTING, FormsModule, HttpClientModule], provider: [], bootstrap: [RootComponent]) classe di esportazione AppModule
Per attivare il popup di aggiunta post, hai già aggiunto il data-obiettivo attributo al pulsante in home.component.html.
Salvare le modifiche precedenti e riavviare l'applicazione. Accedere all'applicazione e fare clic su Inserisci link nella home page. Avrai il AddPostComponent visualizzato come popup.
Aggiungi il ngModel direttiva agli elementi di input per titolo e descrizione.
Aggiungere un clic direttiva al pulsante per chiamare il metodo per salvare il post del blog.
Importa il Inviare modello da src / app / models / post.model.ts nel add-post.component.ts file.
importare Post da '... /models/post.model';
Definire il inviare variabile nel add-post.component.ts file.
post pubblico: Post;
Definire il addPost metodo all'interno del add-post.component.ts file. Dal addPost metodo, convaliderà l'immesso titolo e descrizione ed effettuare una chiamata al metodo di servizio per chiamare l'API REST. Ecco come appare il metodo:
Accentsconagua
addPost () if (this.post.title && this.post.description) // chiama il metodo di servizio per aggiungere post else alert ('Title and Description required'); Creiamo il file di servizio per il componente AddPostComponent. Crea un file chiamato add-post.service.ts e aggiungi il seguente codice:
import Injectable da '@ angular / core'; importare HttpClient da '@ angular / common / http'; importare Post da '... /models/post.model'; @Injectable () classe di esportazione AddPostService costruttore (http: HttpClient privato)
Dentro il AddPostService, creare un metodo chiamato addPost per effettuare la chiamata all'API REST.
addPost (post: Post) return this.http.post ('/ api / post / createPost', title: post.title, description: post.description)Come visto nel codice sopra, hai fatto uso di HttpClient per rendere l'API chiamata e restituire il Osservabile.
Nel add-post.component.ts file all'interno del addPost metodo, ti iscriveresti al addPost metodo dal add-post.service.ts file.
this.addPostService.addPost (this.post) .subscribe (res => // risposta dalla chiamata API REST);
Ecco come add-post.component.ts aspetto del file:
importare Component da '@ angular / core'; importare AddPostService da './add-post.service'; importare Post da '... /models/post.model'; @Component (selector: 'app-add-post', templateUrl: './add-post.component.html', styleUrls: ['./add-post.component.css'], provider: [AddPostService] ) classe di esportazione AddPostComponent public post: Post; costruttore (addPostService privato: 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 ('Title and Description required'); Creiamo un endpoint API REST per aggiungere il post del blog al database MongoDB. Nel server / app.js file, creare un endpoint API come mostrato:
app.post ('/ api / post / createPost', (req, res) => // inserisci i dettagli su MongoDB)Innanzitutto, è necessario connettersi al database MongoDB utilizzando il Mangusta cliente.
mongoose.connect (url, useMongoClient: true, function (err) if (err) throw err; console.log ('connection established'););Una volta stabilita la connessione, è necessario creare un oggetto modello usando il Inviare schema definito nel server / modello / post.js file.
const post = new Post (titolo: req.body.title, descrizione: req.body.description)
Come visto nel codice sopra, hai creato l'oggetto Post usando il titolo e descrizione passato dalla richiesta req oggetto.
Chiama il salvare metodo sull'oggetto Post per salvare la voce in MongoDB.
post.save ((err, doc) => if (err) throw err; return res.status (200) .json (status: 'success', data: doc))
Come visto nel codice sopra, una volta il salvare Il callback del metodo viene chiamato senza errori, restituirà il successo messaggio insieme all'oggetto restituito doc.
Ecco come appare l'endpoint dell'API REST:
app.post ('/ api / post / createPost', (req, res) => mongoose.connect (url, useMongoClient: true, function (err) if (err) gira err; const post = new Post (title: req.body.title, description: req.body.description) post.save ((err, doc) => if (err) throw err; return res.status (200) .json (stato : 'successo', dati: doc)));)Salvare le modifiche precedenti e riavviare entrambi i server Angolare e Nodo. Accedi all'applicazione e prova ad aggiungere un nuovo post sul blog. Una volta che fai clic sul Inserisci pulsante, controlla la console del browser e avrai registrato la risposta positiva.
Quando i dettagli del post del blog vengono aggiunti correttamente al database, è necessario chiudere il popup. Per chiudere il popup, c'è un pulsante di chiusura che è necessario fare clic a livello di codice.
Userai il @ViewChild decoratore per accedere al pulsante di chiusura.
Importare ViewChild e ElementRef nel AddPostComponent.
import Component, ViewChild, ElementRef da '@ angular / core';
Dentro il AddPostComponent, definire la seguente variabile:
@ViewChild ('closeBtn') closeBtn: ElementRef;Iniziare il closeBtn clicca usando il seguente codice:
this.closeBtn.nativeElement.click ();
Aggiungere il codice sopra al callback di successo di addPost metodo. Ecco il addPost metodo da 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 ('Title and Description required'); Salvare le modifiche e riavviare il server client. Accedi all'applicazione e prova ad aggiungere un nuovo post sul blog. Una volta che i dettagli del post del blog sono stati salvati correttamente, il popup si chiuderà.
Una cosa da notare è che il post del blog appena aggiunto non compare nell'elenco dei post del blog. Quindi è necessario aggiungere un trigger per notificare quando aggiornare il ShowPostComponent. Utilizzerai un servizio comune per comunicare tra i due componenti.
Crea una cartella chiamata servizio dentro il src / app cartella. Crea un file chiamato common.service.ts con il seguente codice:
import Injectable da '@ angular / core'; importare Subject da 'rxjs / Subject'; @Injectable () classe di esportazione CommonService public postAdded_Observable = new Subject (); constructor () notifyPostAddition () this.postAdded_Observable.next ();
Come visto nel codice precedente, hai dichiarato un Soggetto chiamato postAdded_Observable per tenere traccia del nuovo post del blog aggiunta al database. Ogni volta che un nuovo post del blog viene aggiunto al database, chiamerai il notifyPostAddition metodo, che notificherà agli abbonati l'aggiornamento.
Importa il CommonService nel app.module.ts e includilo nel NgModule elenco dei fornitori. Ecco come appare:
importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import ROUTING da './app.routing'; import FormsModule da '@ angular / forms'; import HttpClientModule da '@ angular / common / http'; importare RootComponent da './root/root.component'; importare LoginComponent da "./login/login.component"; import HomeComponent da './home/home.component'; import ShowPostComponent da './show-post/show-post.component'; importare AddPostComponent da './add-post/add-post.component'; import CommonService da './service/common.service'; @NgModule (dichiarazioni: [RootComponent, LoginComponent, HomeComponent, ShowPostComponent, AddPostComponent], importa: [BrowserModule, ROUTING, FormsModule, HttpClientModule], provider: [CommonService], bootstrap: [RootComponent]) classe di esportazione AppModule
Importare CommonService nel show-post.component.ts file e inizializzarlo nel metodo del costruttore.
import CommonService da '... /service/common.service';
costruttore (private showPostService: ShowPostService, commonService privato: CommonService)
Dentro il ngOnInit metodo, iscriviti al postAdded_Observable variabile e caricare il getAllPost metodo. Ecco come ngOnInit aspetto del metodo:
ngOnInit () this.getAllPost (); this.commonService.postAdded_Observable.subscribe (res => this.getAllPost (););
Importare CommonService nel add-post.component.ts file e chiama il notifyPostAddition metodo una volta aggiunto il post del blog. Ecco come addPost metodo dal AddPostComponent sembra:
addPost () if (this.post.title && this.post.description) this.addPostService.addPost (this.post) .subscribe (res => this.closeBtn.nativeElement.click (); this.commonService. notifyPostAddition ();); else alert ('Title and Description required'); Salvare le modifiche precedenti e riavviare il server client. Accedi all'applicazione e aggiungi un nuovo post sul blog. Una volta aggiunto, l'elenco dei post del blog viene aggiornato con il nuovo post del blog.
In questo tutorial, hai creato il AddPostComponent per aggiungere i dettagli del post del blog al database MongoDB. Hai creato l'API REST per salvare un post del blog nel database MongoDB utilizzando il Mangusta cliente.
Nella parte successiva della serie, implementerai la funzionalità per modificare e aggiornare i dettagli del post del blog.
Il codice sorgente per questo tutorial è disponibile su GitHub.
Com'è stata la tua esperienza finora? Fammi sapere i tuoi preziosi suggerimenti nei commenti qui sotto.
