Share
En kantet applikasjon består av komponenter. I en Angular-applikasjon består en komponent av en HTML-mal og en komponentklasse. Fra de offisielle dokumentene:
Komponenter er den mest grunnleggende byggeblokken til et brukergrensesnitt i en kantet applikasjon. En kantet applikasjon er et tre av kantede komponenter. Vinkelkomponenter er en del av direktiver. I motsetning til direktivene har komponentene alltid en mal, og bare en komponent kan bli instantiated per element i en mal.
I denne opplæringen lærer du hvordan du kommer i gang med å opprette en dagligvareleder ved å bruke Angular.
Du trenger Node-versjon> 6.9.x og Node Package Manager (npm)> 3.x.x. Når du har begge, prøv å installere Angular CLI ved hjelp av NPM.
npm installer -g @ vinkel / cli
Etter å ha installert Angular CLI, prøv å lage et prosjekt ved å bruke det samme.
ng ny AngularGrocery - skip-npm
Kommandoen ovenfor vil opprette prosjektstrukturen. Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd AngularGrocery npm installere
For å starte applikasjonswebserveren, skriv inn følgende kommando:
ng tjene
Når applikasjonsserveren er startet, pek nettleseren din til http: // localhost: 4200 / og du vil kunne se standardprogrammet.
Ovenstående figur viser søknadsstrukturen for vår dagligvareleder. De src mappen inneholder kildekoden for standardprogrammet. De app mappe inne i src mappen inneholder TypeScript-koden. index.html inne i src mappen er den viktigste HTML-filen der de opprettede kantede komponentene gjengis.
Som standard har applikasjonen en app-rot komponent. La oss lage en ny komponent som heter app-dagligvarebutikk for å lage vår dagligvareprogramvare. Inne i app-mappen, opprett en fil som heter app.grocery.ts.
Importer Komponent modul fra vinkel-kjerne.
importer Komponent fra '@ vinkel / kjerne';
Du bruker Bootstrap til å designe komponenten. Last ned og ta med Bootstrap-pakken fra det offisielle nettstedet. Hold filene i src / eiendeler mappe.
La oss definere komponenten inne i app.grocery.ts fil. Komponenten har tre egenskaper: velger, mal, og styleUrls. velger Indikerer hvordan komponenten skal brukes. mal definerer HTML som vil bli gjengitt når den aktuelle velgeren brukes. styleUrls definerer nettadressen til stilene som brukes i komponenten.
Innsiden app.grocery.ts, Når komponentmodulen er importert, definer du app-dagligvarebutikk komponent som vist:
@Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css'])
Som vist i ovennevnte kode, bruker komponenten en mal som heter app.grocery.html. Opprett en fil som heter app.grocery.html inne i src / app mappe. Legg til følgende kode i app.grocery.html fil:
Daglig lederliste
I app.grocery.ts fil, legg til GroceryComponent klasse for å eksportere.
Eksportklasse Matvarekomponent
Du må importere den nyopprettede komponenten inne i app.module.ts før du kan bruke den. Importer GroceryComponent i app.module.ts.
importer GroceryComponent fra './app.grocery';
Erklær og oppstart den nyopprettede dagligvarekomponenten i app.module.ts fil.
@NgModule (declarations: [GroceryComponent], import: [BrowserModule, FormsModule, HttpModule], leverandører: [], bootstrap: [GroceryComponent])
Nå er du klar til å bruke dagligvarekomponenten i index.html side. Fjern standardkomponenten fra index.html side og legg til følgende HTML-kode:
Laster ...
Lagre endringene ovenfor og start serveren på nytt. Naviger nettleseren til http: // localhost: 4200 / og du vil få matvarekomponenten vist.
Når et element er oppgitt i tekstboksen, må du lese elementet og lagre det i en liste. For å lese innspillet, vil du gjøre bruk av ngModel, som vil binde den til en variabel. Legg til ngModel til tekstboksen.
Hver gang noen tekst legges inn i tekstboksen, legger du til oppgave variabel blir oppdatert tilsvarende. Definer oppgave variabel inne i GroceryComponent i app.grocery.ts fil. Legg til en variabel som heter oppgaver for å beholde en samling oppgavene som er oppgitt.
oppgave: streng; oppgaver = [];
Når du klikker på OK-knappen, blir oppgaven lagt til i oppgaver samlingslisten du har definert inne i GroceryComponent. Definer en ved trykk metode inne i GroceryComponent å håndtere OK-knappen, klikk. Slik ser det ut:
onClick () this.tasks.push (navn: this.task); this.task = ";
Legg klikkhendelsen til OK-knappen som vist:
Når OK-knappen er klikket, legges den nye oppgaven til oppgaver samlingsliste. De oppgave Variabel tilbakestilles også for å fjerne tekstboksen.
Lagre endringene ovenfor, og ved å skrive inn oppgave og klikk på OK-knappen, blir oppgaven lagt til i oppgaver samling. For å vise oppgaveroppsamlingen, legg til et spekter inne app.grocery.html.
Accentsconagua
oppgaver | json Skriv oppgaven i inntastingsboksen og trykk på OK knapp. Du vil ha oppgaver variabel som vises som JSON på siden.
Her er komplett app.grocery.ts fil:
importer Komponent fra '@ vinkel / kjerne'; @Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css']) eksportklasse Matvarekomponent oppgave: streng ; oppgaver = []; onClick () this.tasks.push (navn: this.task); this.task = ";
Nå, siden du har lagt til elementene i oppgaver variabel, kan du bruke den til å vise oppgavene. Du vil gjøre bruk av NgFor direktiv for å gjenskape oppgaver samling og dynamisk lage HTML for å vise oppgavene. Du vil vise oppgaven inne i UL-elementet og gjenta LI ved hjelp av NgFor direktiv. Slik ser det ut:
Som vist i koden ovenfor, gjenspeiler du gjennom oppgaver variabel og lag LI-elementet og spenningen dynamisk. Her er hvordan komplett app.grocery.html malfil ser ut:
Daglig lederliste
- oppgavenavn
Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 4200 / og skriv inn oppgaven og trykk på OK knapp. Hver tilleggsoppgave vises i listen nedenfor.
I denne Angular-opplæringen så du hvordan du kommer i gang med å lage en dagligvareleder med Angular. Du lærte hvordan du lager visningen for dagligvarekomponenten, legger til varer i dagligvarelisten, og viser de ekstra elementene.
I neste del av denne opplæringen implementerer du funksjonene for å markere de ferdige elementene, arkivere de ferdige elementene, og fjerne de lagt til elementene.
Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine forslag i kommentarene nedenfor.
