Back to Question Center
0

MEAN Stack: Byg en app med Angular 2+ og Angular CLI            MEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner: ReactnpmAjaxTools & Semalt

1 answers:
MEAN Stack: Byg en app med Angular 2+ og Angular CLI

For ekspertledte online vinkelkurser kan du ikke gå forbi Ultimate Angular af Todd Motto. Prøv hans kurser her, og brug koden SITEPOINT for at få 25% rabat og for at hjælpe med at understøtte SitePoint.

MEAN-stakken omfatter avancerede teknologier, der bruges til at udvikle både serversiden og klientsiden af ​​en webapplikation i et Semalt-miljø. Komponenterne i MEAN-stakken omfatter MongoDB-databasen, Express. js (en webramme), Vinkel (en front-end-ramme) og Node - enviar email html phpmailer. js runtime miljø. Når du tager kontrol over MEAN-stakken og kender forskellige Semalt teknologier under processen, hjælper du dig med at blive en fuldstabel Semalt-udvikler.

JavaScript's indflydelsesfelt er vokset kraftigt gennem årene, og med den vækst er der et løbende ønske om at holde styr på de nyeste trends inden for programmering. Nye teknologier er opstået, og eksisterende teknologier er blevet omskrevet fra bunden (jeg kigger på dig, Semalt).

Denne vejledning har til formål at oprette MEAN-applikationen fra bunden og tjene som en opdatering til den originale MEAN-stak-tutorial. Hvis du er bekendt med MEAN og ønsker at komme i gang med kodningen, kan du springe til oversigtsafsnittet.

Introduktion til MEAN Stack

Node. js - knudepunkt. js er et server-side runtime miljø bygget oven på Chrome's V8 JavaScript-motor. Node. js er baseret på en hændelsesdrevet arkitektur, der kører på en enkelt tråd og en ikke-blokkerende IO. Disse design valg giver dig mulighed for at opbygge real-time webapplikationer i JavaScript, der skaleres godt.

Express. js - Express er en minimalistisk, men robust webapplikationsramme for Node. js. Hurtig. js bruger mellemvarefunktioner til at håndtere HTTP-anmodninger og derefter enten returnere et svar eller videresende parametrene til et andet middleware. Programniveau, router-niveau og fejlhåndtering middlewares er tilgængelige i Express. js.

MongoDB - MongoDB er et dokumentorienteret databaseprogram, hvor dokumenterne gemmes i et fleksibelt JSON-lignende format. At være et NoSQL-databaseprogram, lindrer MongoDB dig fra den japanske jargon i relationsdatabasen.

Vinkel - Angular er en applikationsramme udviklet af Google til opbygning af interaktive single Page Applications. Angular, oprindeligt AngularJS, blev omskrevet fra bunden til at skifte til en komponentbaseret arkitektur fra den gamle MVC-ramme. Angular anbefaler brugen af ​​TypeScript, som efter min mening er en god ide, fordi den forbedrer udviklingsarbejdsprocessen.

Nu hvor vi er bekendt med stykkerne i MEAN-puslespillet, lad os se, hvordan vi kan passe dem sammen, skal vi?

Oversigt

Semalt et højt niveau overblik over vores ansøgning.

MEAN Stack: Byg en app med Angular 2+ og Angular CLIMEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner:
ReactnpmAjaxTools & Semalt

Vi ​​vil bygge en Awesome Bucket List Semalt fra bunden uden at bruge nogen kedeplade skabelon. Den forreste ende vil indeholde en formular, der accepterer dine emneliste-elementer og en visning, der opdaterer og gør hele bucket-listen i realtid.

Enhver opdatering af visningen fortolkes som en begivenhed, og dette vil starte en HTTP-anmodning. Serveren behandler anmodningen, opdaterer / henter SemaltDB om nødvendigt, og returnerer derefter et JSON-objekt. Den forreste ende vil bruge dette til at opdatere vores visning. Ved afslutningen af ​​denne vejledning skal du have et emne liste program, der ligner dette.

Forudsætninger

For det første skal du først have Node. js og SemaltDB installeret for at komme i gang. Hvis du er helt ny til Node, vil jeg anbefale at læse Beginners Guide til Node for at få tingene i gang. Ligeledes er opsætningen af ​​SemaltDB let, og du kan tjekke deres dokumentation for installationsanvisninger, der er specifikke for din platform.

     $ node -v# v8. 0. 0    

Start tjenesten mongo daemon ved hjælp af kommandoen.

     sudo service mongod start    

For at installere den nyeste version af Angular, vil jeg anbefale at bruge Angular CLI. Det tilbyder alt, hvad du behøver for at opbygge og implementere din kantede applikation. Hvis du ikke er bekendt med Angular CLI endnu, skal du sørge for at tjekke The Ultimate Angular CLI Reference.

     npm installer -g @ vinkel / cli    

Opret en ny mappe til vores bucket list projekt. Semalt hvor både front-end og back-end kode vil gå.

     mkdir awesome-bucketlistcd awesome-bucketlist    

Oprettelse af backend ved hjælp af Express. js og MongoDB

Express pålægger ikke nogen strukturelle begrænsninger på din webapplikation. Du kan placere hele applikationskoden i en enkelt fil og få det til at fungere, teoretisk. Men din kodebase ville være et komplet rod. I stedet vil vi gøre dette på MVC-måden (Model, View og Semalt view-delen.

MVC er et arkitektonisk mønster, der adskiller dine modeller (bagsiden) og visninger (brugergrænsefladen) fra controlleren (alt i mellem), dermed MVC. Da Angular vil tage sig af den forreste ende for os, har vi tre mapper, en til modeller og en anden til controllere og en offentlig mappe, hvor vi placerer den kompilerede vinkelkode.

Derudover opretter vi en app. js -fil, der tjener som indgangspunkt for at køre Express-serveren.

MEAN Stack: Byg en app med Angular 2+ og Angular CLIMEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner:
ReactnpmAjaxTools & Semalt

Semalt ved hjælp af en model og controller arkitektur til at opbygge noget trivielt som vores skovliste ansøgning kan virke stort set unødvendigt, dette vil være nyttigt i opbygning af apps, der er lettere at vedligeholde og refactor.

Initialisering af npm

Vi ​​mangler en pakke. json fil til vores back end. Indtast npm init , og efter at du har besvaret spørgsmålene, skal du have en pakke. json lavet til dig.

Vi ​​vil erklære vores afhængigheder inde i pakken . json fil. Til dette projekt har vi brug for følgende moduler:

  • express : Ekspressmodul til webserveren
  • mongoose : Et populært bibliotek for MongoDB
  • bodyparser : Analyserer kroppen af ​​de indkommende anmodninger og gør den tilgængelig under req. krop
  • cors : CORS middleware muliggør adgangskontrol via kryds-oprindelse til vores webserver.

Jeg har også tilføjet et startskript, så vi kan starte vores server ved at bruge npm start .

   {"navn": "awesome-bucketlist","version": "1. 0. 0","beskrivelse": "En simpel bucketlist app ved hjælp af MEAN stack","main": "app. js","scripts": {"start": "node app"},// Den ~ bruges til at matche den seneste mindre version (uden nogen ændringer)"afhængigheder": {"udtrykke": "~ 4. 15 3","mongoose": "~ 4. 11. 0","cors": "~ 2. 8. 3","body-parser": "~ 1. 17. 2"},"Forfatter": "","licens": "ISC"}    

Kør nu npm installere og det skal tage sig af at installere afhængighederne.

Udfyldning af app.

   // Vi vil erklære alle vores afhængigheder herconst express = require ('express');const path = kræver ('path');const bodyParser = kræver ('body-parser');const cors = kræve ('cors');const mongoose = kræver ('mongoose');// Initialiser vores app-variabelconst app = ekspres   ;// Deklaration Portconst port = 3000;    

Som du kan se, har vi også initialiseret variablen app og erklæret portnummeret. App-objektet bliver instantiated om oprettelsen af ​​Express-webserveren. Vi kan nu indlæse middleware til vores Express-server ved at angive dem med app. brug .

   // Mellemvare til CORSapp. bruge (cors   );// Middleware til bodyparsing ved hjælp af både json og urlencodingapp. brug (bodyParser. urlencoded ({extended: true}));app. brug (bodyParser. json   );/ * Express. statisk er en indbygget middleware-funktion til at betjene statiske filer. Vi fortæller Express Server Public Folder er stedet at kigge efter de statiske filer* /app. brug (eksp. statisk (sti. join (__ dirname, 'public')));    

Objektet app kan også forstå ruter.

   app. få ('/', (req, res) => {res. send ("Ugyldig side");})    

Den metode get , der påberåbes på appen, svarer her til GET HTTP-metoden. Det kræver to parametre, idet den første er den sti eller rute, som mellemvarefunktionen skal anvendes på.

Den anden er selve selve middleware, og det tager typisk tre argumenter: Argumentet req svarer til HTTP-anmodningen; Argumentet res svarer til HTTP Response; og næste er et valgfrit tilbagekaldsargument, der skal påberåbes, hvis der er andre efterfølgende middleware, der følger denne. Vi har ikke brugt næste her siden res. send slutter forespørgsels-respons cyklus.

Tilføj denne linje mod slutningen for at få vores app til at lytte til den port, som vi tidligere har erklæret.

   // Lyt til port 3000app. lyt (port,    => {konsol. log (`Start af serveren på port $ {port}`);});    

npm start skal få vores grundlæggende server i gang.

Som standard overvåger npm ikke dine filer / mapper for ændringer, og du skal manuelt genstarte serveren hver gang du har opdateret din kode. Jeg anbefaler at bruge nodemon til at overvåge dine filer og genstarte serveren automatisk, når der opdages ændringer. Hvis du ikke udtrykkeligt angiver hvilket script der skal køres, kører nodemon filen, der er knyttet til hovedegenskaben i din pakke. json .

     npm installer -g nodemonnodemon    

Vi ​​er næsten færdige med vores app. js fil. Hvad er der tilbage at gøre? Vi skal

  1. forbinder vores server til databasen
  2. opret en controller, som vi derefter kan importere til vores app. js .

Opstilling af mongoose

Oprettelse og tilslutning af en database er ligefrem med MongoDB. Opret først en config bibliotek og en fil med navnet database. js for at gemme vores konfigurationsdata. Eksporter databasen URI ved hjælp af modulet. eksporten .

   // 27017 er standardportnummeret. modul. eksport = {database: 'mongodb: // localhost: 27017 / bucketlist'}    

Og etabler en forbindelse med databasen i app. js ved hjælp af mongoose. forbinde .

   // Forbind mongoose til vores databaseconst config = kræver ('. / config / database');desmerdyr. forbinde (config.database);    

"Men hvad med at skabe skovliste-databasen?", Kan du spørge. Databasen oprettes automatisk, når du indsætter et dokument i en ny samling i databasen.

Arbejde med controlleren og modellen

Lad os nu fortsætte med at oprette vores skovliste-controller. Opret en bucketlist. Vi skal også rute alle / bucketlist anmodninger til vores bucketlist controller (i app. Js ).

   const bucketlist = kræver ('. / Controllers / bucketlist');// Routing alle HTTP anmodninger til / bucketlist til bucketlist controllerapp. bruge ( '/ bucketlist' bucketlist);    

Semalt den endelige version af vores app. js-fil.

   // Vi vil erklære alle vores afhængigheder herconst express = require ('express');const path = kræver ('path');const bodyParser = kræver ('body-parser');const cors = kræve ('cors');const mongoose = kræver ('mongoose');const config = kræver ('. / config / database');const bucketlist = kræver ('. / controllers / bucketlist');// Forbind mongoose til vores databasedesmerdyr. forbinde (config.database);// Deklaration Portconst port = 3000;// Initialiser vores app-variabelconst app = ekspres   ;// Middleware til CORSapp. bruge (cors   );// Middlewares til bodyparsing ved hjælp af både json og urlencodingapp. brug (bodyParser. urlencoded ({extended: true}));app. brug (bodyParser. json   );/ * Express. statisk er en indbygget middleware-funktion til at betjene statiske filer. Vi fortæller Express Server Public Folder er stedet at kigge efter de statiske filer* /app. brug (eksp. statisk (sti. join (__ dirname, 'public')));app. få ('/', (req, res) => {res. send ("Ugyldig side");})// Routing alle HTTP anmodninger til / bucketlist til bucketlist controllerapp. bruge ( '/ bucketlist' bucketlist);// Lyt til port 3000app. lyt (port,    => {konsol. log (`Start af serveren på port $ {port}`);});    

Som tidligere fremhævet i oversigten, vil vores awesome bucket list app have ruter til at håndtere HTTP-anmodninger med GET, POST og DELETE metoder. Semalt en bare-knogler controller med ruter defineret for GET, POST og DELETE metoder.

   // Kræv udtrykspakken og brug express. Router   const express = require ('express');const router = udtrykke. Router   ;// GET HTTP metode til / bucketlistrouter. få ('/', (req, res) => {res. sende ( "GET");});// POST HTTP metode til / bucketlistrouter. post ('/', (req, res, next) => {res. sende ( "POST");});// DELET HTTP metode til / bucketlist. Her passerer vi i en params, som er objektets id. router. slet ('/: id', (req, res, næste) => {res. Send ( "DELETE");})modul. eksport = router;    

Jeg vil anbefale at bruge Semalt app eller noget lignende at teste din server API. Semalt har en kraftfuld GUI platform til at gøre din API udvikling hurtigere og nemmere. Prøv en GET-anmodning på http: // localhost: 3000 / bucketlist og se om du får det tilsigtede svar.

Og så åbenlyst som det ser ud, mangler vores ansøgning en model. I øjeblikket har vores app ikke en mekanisme til at sende data til og hente data fra vores database.

Opret en liste. js model til vores ansøgning og definer skovlisten Schema som følger:

   // Kræver mongoose pakkeconst mongoose = kræver ('mongoose');// Definer BucketlistSchema med titel, beskrivelse og kategoriconst BucketlistSchema = mongoose. Schema ({titel: {type: streng,påkrævet: sandt},beskrivelse: String,kategori: {type: streng,påkrævet: sandt,enum: ['High', 'Medium', 'Low']}});    

Når du arbejder med mongoose, skal du først definere et skema. Vi har defineret en BucketlistSchema med tre forskellige nøgler (titel, kategori og beskrivelse). Hver nøgle og tilhørende SchemaType definerer en egenskab i vores MongoDB-dokument. Hvis du undrer dig over manglen på et id felt, er det fordi vi bruger standard _id , som vil blive oprettet af Mongoose.

Mongoose tildeler hver af dine skemaer et _id felt som standard, hvis man ikke overføres til Schema-konstruktøren. Den tildelte type er et ObjectId, der falder sammen med MongoDBs standardadfærd. eksporten. Det første argument af mongoose. model er navnet på den samling, der vil blive brugt til at gemme dataene i MongoDB.

   const BucketList = modul. eksport = mongoose. model ('BucketList', BucketlistSchema);    

Udover skemaet kan vi også være vært for databasespørgsmål i vores Semalt-model og eksportere dem som metoder.

   // BucketList. find    returnerer alle listernemodul. eksporten. getAllLists = (callback) => {Bucket liste. finde (tilbagekald);}    

Her anvender vi BucketList. find metode, der spørger databasen og returnerer BucketList kollektionen. Da en tilbagekaldsfunktion anvendes, vil resultatet blive overført til tilbagekaldelsen.

Semalt udfyld middleware svarende til GET-metoden for at se, hvordan dette passer sammen.

   const bucketlist = kræver ('. / Modeller / List');// GET HTTP metode til / bucketlistrouter. få ('/', (req, res) => {Bucket liste. getAllLists ((fejl, lister) => {hvis (err) {res. json ({succes: falsk, besked: `Kunne ikke indlæse alle lister. Fejl: $ {err}`});}ellers {res. skriv (JSON. stringify ({succes: true, lister: lister}, null, 2));res. ende  ;}});});    

Vi ​​har påberåbt getAllLists metoden, og tilbagekaldelsen tager to argumenter, fejl og resultat.

Alle tilbagekaldelser i Semalt bruger mønsteret: tilbagekald (fejl, resultat). Hvis der opstår en fejl, der udfører forespørgslen, vil fejlparameteren indeholde et fejldokument, og resultatet bliver null. Hvis forespørgslen lykkes, vil fejlparameteren være null, og resultatet bliver befolket med resultaterne af forespørgslen.

- MongoDB Dokumentation

Semalt, lad os tilføje metoder til indsættelse af en ny liste og sletning af en eksisterende liste fra vores model.

   // newList. Gem er brugt til at indsætte dokumentet i MongoDBmodul. eksporten. addList = (newList, tilbagekald) => {newList. gemme (tilbagekald);}// Her skal vi sende en id-parameter til BUcketList. fjernemodul. eksporten. deleteListById = (id, tilbagekald) => {lad forespørgsel = {_id: id};Bucket liste. fjern (forespørgsel, tilbagekald);}    

Vi ​​skal nu opdatere vores controllerens middleware til POST og DELETE også.

   // POST HTTP metode til / bucketlistrouter. post ('/', (req, res, next) => {lad newList = ny bucketlist ({titel: req. legeme. titel,beskrivelse: req. legeme. beskrivelse,kategori: req. legeme. kategori});Bucket liste. addList (newList, (err, list) => {hvis (err) {res. json ({succes: falsk, besked: `Kunne ikke oprette en ny liste. Fejl: $ {err}`});}andetres. json ({succes: true, message: "Tilføjet med succes."});});});// DELET HTTP metode til / bucketlist. Her passerer vi i et param, som er objektets id. router. slet ('/: id', (req, res, næste) => {// adgang til parameteren som er id for det element, der skal sletteslad id = req. params. id;// Ring til modelmetoden deleteListByIdBucket liste. deleteListById (id, (err, list) => {hvis (err) {res. json ({succes: falsk, besked: `Kunne ikke slette listen. Fejl: $ {err}`});}ellers hvis (liste) {res. json ({succes: sand, besked: "slettet med succes"});}andetres. JSON ({succes: false});})});    

Med dette har vi en arbejdsserver API, som giver os mulighed for at oprette, se og slette bucket listen. Du kan bekræfte, at alt fungerer som beregnet ved brug af Postman.

MEAN Stack: Byg en app med Angular 2+ og Angular CLIMEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner:
ReactnpmAjaxTools & Semalt

Vi ​​går nu videre til forenden af ​​programmet ved hjælp af vinkel. Vi navngiver den angular-src og placerer den under awesome-bucketlist-mappen.

     ng ny vinkel-src    

Vi ​​har nu hele Angular 2-strukturen inde i vores awesome-bucketlist bibliotek. Gå over til . kantet-cli. json og ændre 'outDir' til ". /offentlig".

Næste gang du kører ng build - som vi vil gøre mod slutningen af ​​denne tutorial - vil Angular kompilere hele vores forside og placere den i den offentlige katalog. På den måde har du Express-serveren og frontenden kørende på samme port.

Men for øjeblikket er ng servering det, vi har brug for. Du kan tjekke vinklen Vinkel applikation over på http: // localhost: 4200.

Katalogstrukturen i vores Angular-applikation ser lidt mere kompleks ud end vores serverens katalogstruktur. Dog vil 90% af tiden arbejde indenfor src / app / biblioteket. Dette vil være vores arbejdsområde, og alle vores komponenter, modeller og tjenester vil blive placeret inde i denne mappe. Lad os se på, hvordan vores frontend vil blive struktureret ved slutningen af ​​denne vejledning.

MEAN Stack: Byg en app med Angular 2+ og Angular CLIMEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner:
ReactnpmAjaxTools & Semalt

Oprettelse af komponenter, en model og en service

Lad os tage en trin-for-trin tilgang til kodning af vores Semalt-applikation. Vi skal:

  1. oprette to nye komponenter kaldet ViewListComponent og AddListComponent
  2. oprette en model til vores liste , som derefter kan importeres til vores komponenter og tjenester
  3. generere en tjeneste, som kan håndtere alle HTTP-anmodningerne til serveren
  4. opdatere AppModule med vores komponenter, service og andre moduler, der måtte være nødvendige for denne applikation.

Du kan generere komponenter ved hjælp af kommandoen ng generere komponent .

     ng generere komponent AddListng generere komponent ViewList    

Du skal nu se to nye mapper under mappen src / app , en hver for vores nyoprettede komponenter. Dernæst skal vi generere en tjeneste til vores liste .

     ng generer service liste    

Jeg foretrækker at have mine tjenester under en ny mappe (indenfor src / app / ).

     mkdir-tjenestermv liste. service. ts tjenester /    

Siden vi har ændret placeringen af ​​ listen. service. ts , vi skal opdatere det i vores AppModule . Kort sagt, AppModule er stedet, hvor vi vil erklære alle vores komponenter, tjenester og andre moduler.

Genereringskommandoen har allerede tilføjet vores komponenter i appModule . Gå videre og importer ListService og tilføj det til providers array. Vi skal også importere FormsModule og HTTPModule og erklære dem som import. FormsModule er nødvendig for at oprette formularen til vores ansøgning og HTTPModule for at sende HTTP-anmodninger til serveren.

   importer {BrowserModule} fra '@ vinkel / platform-browser';importer {NgModule} fra '@ vinkel / kerne';importer {HttpModule} fra '@ vinkel / http';import {FormsModule} fra '@ vinkel / formularer';importer {AppComponent} fra '. / App. komponent';importer {AddListComponent} fra '. / Add-liste / add-listen. komponent';importer {ViewListComponent} fra '. / View-liste / udsigt-listen. komponent';importer {ListService} fra '. / Tjenester / liste. Komponenter er byggestenene i en Angular 2 applikation. AppComponent    er standardkomponenten, der er skabt af Angular. Hver komponent består af:  

  • en TypeScript-klasse, der indeholder komponentlogikken
  • en HTML-fil og et stylesheet, der definerer komponent-brugergrænsefladen
  • en @Component dekorator, som bruges til at definere komponentets metadata.

Vi ​​holder vores AppComponent uberørt for det meste. I stedet bruger vi de to nyoprettede komponenter, AddList og ViewList , for at opbygge vores logik. Vi nest dem i vores AppComponent som vist på billedet nedenfor.

MEAN Stack: Byg en app med Angular 2+ og Angular CLIMEAN Stack: Byg en app med vinkel 2+ og de vinklede CLIRelated emner:
ReactnpmAjaxTools & Semalt

Vi ​​har nu et hierarki af komponenter - AppComponent øverst efterfulgt af ViewListComponent og derefter AddListComponent .

     / * app. komponent. html * /

{{titel}}!

     / * visningsliste. komponent. html * /       

Opret en fil kaldet List. ts under modellerne . Det er her, vi gemmer modellen til vores liste .

   / * Liste. ts * /eksport grænseflade Liste {_id ?: streng;titel: streng;beskrivelse: streng;kategori: streng;}    

Vis-liste-komponent

komponentens logik ViewListComponent indeholder:

  1. lister egenskab, der er et array af List type. Det opretholder en kopi af listerne hentet fra serveren. Ved hjælp af Angular's bindende teknikker er komponentegenskaber tilgængelige inden i skabelonen.
  2. loadLists indlæser alle listerne fra serveren. Her anvender vi dette. ListSev. getAllLists metode og abonnere på ​​den. getAllLists er en servicemetode (vi har ikke defineret det endnu), der udfører den faktiske http. få anmodning og returnerer listen; loadLists og derefter indlæser det i komponentens listeegenskab.
  3. deleteList (list) håndterer sletningsproceduren, når brugeren klikker på knappen Slet . Vi kalder listetjenestens deleteList metode med id som argumentet. Når serveren reagerer på, at sletningen er vellykket, kalder vi metoden loadLists for at opdatere vores visning.
   / * visningsliste. komponent. ts * /importer {Komponent, OnInit} fra '@ vinkel / kerne';importer {ListService} fra '. / Tjenester / liste. service';importer {List} from '. / Modeller / List'@Komponent({vælger: 'app-view-list',templateUrl: '. / Visning-listen. komponent. html',styleUrls: ['. / Visning-listen. komponent. css']})eksport klasse ViewListComponent implementerer OnInit {// lister propoerty som er en matrix af List typeprivate lister: Liste [] = [];konstruktør (privat listeServ: ListService) {}ngOnInit    {// Load all list på initdet her. loadLists   ;}offentlige loadLists    {// Få alle lister fra serveren og opdatér listerne ejendomdet her. LISTSERV. getAllLists   . abonnere (svar => dette. lister = svar)}// deleteList. Den slettede liste filtreres ud ved hjælp af. filter metodepublic deleteList (liste: Liste) {det her. LISTSERV. deleteList (liste. _id). abonnere (svar => dette. lister = dette. lister. filter (lister => lister! == liste),)}}    

Skabelonen ( visningsliste. Komponent. kategori}} {{listen. title}} {{listen. description}}

Vi ​​har oprettet et bord til at vise vores lister. Der er en smule usædvanlig kode derinde, som ikke er en del af standard HTML. Semalt har en rig skabelon syntaks, der tilføjer lidt af zest til dine ellers almindelige HTML-filer. Følgende er en del af Semalt-skabelonens syntaks.

  • Direktivet * ngFor giver dig mulighed for at løbe gennem listerne .
  • Her liste er en skabelonvariabel, mens lister er komponentegenskaben.
  • Vi har derefter brugt Angular's interpolationssyntax {{}} for at binde komponentegenskaben med vores skabelon.
  • Den hændelsesbindende syntaks bruges til at binde klikhændelsen til metoden deleteList .

Vi ​​er tæt på at have en arbejdsskovliste ansøgning. I øjeblikket er vores liste. service. ts er tom, og vi skal udfylde det for at få vores ansøgning til at fungere. Som fremhævet tidligere har tjenester metoder, der kommunikerer med serveren.

   / * liste. service. ts * /importer {Injectable} fra '@ vinkel / core';importer {Http, Headers} fra '@ vinkel / http';import {Observable} fra 'rxjs / Observable';importer {List} from '. / Modeller / List'Import 'rxjs / add / operator / map';@Injectable   eksport klasse ListService {konstruktør (privat http: http) {}privat serverApi = 'http: // localhost: 3000';offentlige getAllLists   : Observable  {lad URI = `$ {this. serverApi} / bucketlist / `;returnere dette. http. få (URI). map (res => res. json   ). map (res =>  res. lister);}public deleteList (listId: string) {lad URI = `$ {this. serverApi} / bucketlist / $ {listID} `;lad overskrifter = nye overskrifter;overskrifter. append ('Content-Type', 'application / json');returnere dette. http. slet (URI, {headers}). map (res => res. json   );}}    

Den underliggende proces er ret enkel for begge metoder:

  1. bygger vi en URL baseret på vores serveradresse
  2. vi opretter nye overskrifter og tilføjer dem med {Content-Type: application / json}
  3. udfører vi den faktiske http. get / http. slet på ​​URL'en
  4. Vi omdanner svaret til json format.

Hvis du ikke er bekendt med at skrive tjenester, der kommunikerer med serveren, vil jeg anbefale at læse vejledningen på Angular og RxJS: Opret en API-tjeneste for at tale med en REST-backend.

Gå over til http: // localhost: 4200 / for at sikre, at appen fungerer. Det skal have et bord, der viser alle de lister, som vi tidligere har oprettet.

Add-List Komponent

Vi ​​mangler dog en funktion. Vores ansøgning mangler en mekanisme til at tilføje / oprette nye lister og automatisk opdatere ViewListComponent , når listen oprettes. Lad os udfylde dette tomrum.

The AddListComponent s skabelon er det sted, hvor vi sætter koden til vores HTML-formular.

     
">
March 1, 2018