Share
Een hoekapplicatie bestaat uit componenten. In een Angular-toepassing bestaat een component uit een HTML-sjabloon en een componentklasse. Van de officiële documenten:
Componenten zijn de meest elementaire bouwsteen van een gebruikersinterface in een Angular-toepassing. Een hoekapplicatie is een boom met hoekcomponenten. Hoekige componenten zijn een subset van richtlijnen. In tegenstelling tot richtlijnen hebben componenten altijd een sjabloon en kan slechts één component worden geïnstantieerd per element in een sjabloon.
In deze zelfstudie leert u hoe u aan de slag kunt met het maken van een boodschappenlijstmanager met Angular.
U heeft Node-versie> 6.9.x en Node Package Manager (npm)> 3.x.x nodig. Zodra u beide hebt, probeert u de Angular CLI te gebruiken met NPM.
npm install -g @ angular / cli
Probeer na het installeren van de Angular CLI een project te maken dat hetzelfde gebruikt.
ng nieuwe AngularGrocery --skip-npm
Het bovenstaande commando zal de projectstructuur creëren. Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.
cd AngularGrocery npm installeren
Om de toepassingswebserver te starten, typt u de volgende opdracht:
ng serveren
Nadat de applicatieserver is gestart, richt u uw browser naar http: // localhost: 4200 / en kunt u de standaardapplicatie bekijken.
De bovenstaande afbeelding toont de applicatiestructuur voor onze boodschappenlijstmanager. De src map bevat de broncode voor de standaardtoepassing. De app map in de src map bevat de TypeScript-code. index.html binnen in de src map is het belangrijkste HTML-bestand waarin de gemaakte hoekige componenten worden gerenderd.
Standaard heeft de applicatie een app-root component. Laten we een nieuw component maken genaamd app-supermarkt voor het maken van onze app voor supermarktbeheer. Maak in de app-map een bestand met de naam app.grocery.ts.
Importeer de bestanddeel module van de hoekige core.
Component importeren vanuit '@ angular / core';
U gebruikt Bootstrap om het onderdeel te ontwerpen. Download en neem het Bootstrap-pakket op vanaf de officiële site. Bewaar de bestanden in de src / assets map.
Laten we het onderdeel definiëren binnen de app.grocery.ts het dossier. Het onderdeel heeft drie eigenschappen: keuzeschakelaar, sjabloon, en styleUrls. keuzeschakelaar geeft de manier aan waarop het onderdeel zal worden gebruikt. sjabloon definieert de HTML die wordt weergegeven wanneer de specifieke selector wordt gebruikt. styleUrls definieert de URL van de stijlen die in de component worden gebruikt.
Binnen app.grocery.ts, Nadat de componentmodule is geïmporteerd, definieert u de app-supermarkt component zoals getoond:
@Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css'])
Zoals te zien is in de bovenstaande code, gebruikt de component een sjabloon genaamd app.grocery.html. Maak een bestand met de naam app.grocery.html binnen in de src / app map. Voeg de volgende code toe aan de app.grocery.html het dossier:
Manager boodschappenlijst
In de app.grocery.ts bestand, voeg de GroceryComponent klasse om te exporteren.
exportklasse kruideniercomponent
U moet het nieuw gemaakte onderdeel importeren in de app.module.ts voordat je het kunt gebruiken. Importeer de GroceryComponent in de app.module.ts.
import GroceryComponent vanuit './app.grocery';
Verklaar en bootstrap de nieuwe component Kruidenierswaren in de app.module.ts het dossier.
@NgModule (declarations: [GroceryComponent], import: [BrowserModule, FormsModule, HttpModule], providers: [], bootstrap: [GroceryComponent])
Nu bent u helemaal klaar om de component Kruidenierswaren in de index.html pagina. Verwijder de standaardcomponent uit de index.html pagina en voeg de volgende HTML-code toe:
Bezig met laden…
Sla de bovenstaande wijzigingen op en start de server opnieuw. Navigeer door de browser naar http: // localhost: 4200 / en het onderdeel Kruidenierswaren wordt weergegeven.
Nadat een item is ingevoerd in het invoertekstvak, moet u het item lezen en opslaan in een lijst. Om de invoer te lezen, maakt u gebruik van ngModel, die het aan een variabele zal binden. Toevoegen ngModel naar het invoertekstvak.
Telkens wanneer een tekst in het invoertekstvak wordt ingevoerd, wordt de tekst taak variabele wordt overeenkomstig bijgewerkt. Definieer de taak variabele binnen de GroceryComponent in de app.grocery.ts het dossier. Voeg een variabele toe met de naam taken om een verzameling taken bij te houden.
taak: string; taken = [];
Door op de knop OK te klikken, wordt de taak toegevoegd aan de taken verzamellijst die u hebt gedefinieerd in de GroceryComponent. Definieer een bij klikken methode binnen de GroceryComponent om de OK-knop aan te klikken. Hier is hoe het eruit ziet:
onClick () this.tasks.push (name: this.task); this.task = ";
Voeg de klikgebeurtenis toe aan de OK-knop zoals weergegeven:
Wanneer op de knop OK wordt geklikt, wordt de nieuwe taak toegevoegd aan de taken collectie lijst. De taak variabele wordt ook gereset om het invoertekstvak te wissen.
Sla de bovenstaande wijzigingen op en bij het invoeren van de taak en klik op de knop OK, de taak is toegevoegd aan de taken verzameling. Om de verzameling taken weer te geven, voegt u een bereik toe app.grocery.html.
Accentsconagua
taken | json Voer de taak in het invoervak in en druk op OK knop. Je hebt de taken variabele weergegeven als JSON op de pagina.
Hier is het complete app.grocery.ts het dossier:
Component importeren vanuit '@ angular / core'; @Component (selector: 'app-grocery', templateUrl: './app.grocery.html', styleUrls: ['... /assets/css/bootstrap.min.css']) exportklasse GroceryComponent task: string ; taken = []; onClick () this.tasks.push (name: this.task); this.task = ";
Nu, aangezien u de toegevoegde items in de taken variabele, u kunt deze gebruiken om de taken weer te geven. U zult gebruik maken van de NgFor richtlijn om het te herhalen taken verzamelen en dynamisch de HTML maken voor het weergeven van de taken. U toont de taak binnen het UL-element en herhaalt de LI met behulp van de NgFor richtlijn. Hier is hoe het eruit ziet:
Zoals te zien in de bovenstaande code, itereert u door de taken variabele en maak het LI-element en de reeks dynamisch aan. Hier is hoe de complete app.grocery.html sjabloonbestand ziet er:
Manager boodschappenlijst
- Opdrachtnaam
Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 4200 / en voer de taak in en druk op OK knop. Elke toegevoegde taak wordt weergegeven in de onderstaande lijst.
In deze Angular-zelfstudie zag je hoe je moest beginnen met het maken van een boodschappenlijstmanager met Angular. U hebt geleerd hoe u de weergave voor het onderdeel Kruidenierswaren maakt, items aan de boodschappenlijst toevoegt en de toegevoegde items weergeeft.
In het volgende deel van deze tutorial implementeer je de functies om de voltooide items te markeren, de voltooide items te archiveren en de toegevoegde items te verwijderen..
Broncode van deze tutorial is beschikbaar op GitHub. Laat ons uw suggesties weten in de opmerkingen hieronder.
