Hoekig materiaal en hoekig 6 - Materiaalontwerp voor hoekig

Dit bericht is eerst gepubliceerd op CodingTheSmartWay.com.

Abonneren op YouTube | Live demo | Code op GitHub

Angular Material is een verzameling Material Design-componenten voor Angular. Door deze componenten te gebruiken, kunt u Material Design heel gemakkelijk toepassen. Met de release van Angular 6 is het gebruik van Angular Material ook eenvoudiger geworden. In deze tutorial zullen we de recente wijzigingen bekijken. Je leert hoe je Angular Material op de meest eenvoudige manier in je Angular 6-project kunt gebruiken.

De Angular Material-website is te vinden op https://material.angular.io/.

Het Angular 6-project opzetten

Om te beginnen moeten we eerst het Angular 6-project opzetten. Dit wordt gedaan met behulp van Angular CLI (https://cli.angular.io/). Als u Angular CLI nog niet op uw systeem hebt geïnstalleerd, moet u eerst de stappen van de website van het project volgen om de opdrachtregelinterface op uw systeem beschikbaar te maken.

Nadat Angular CLI met succes is geïnstalleerd, kunt u het nieuwe project op de volgende manier starten met de opdracht ng:

$ ng nieuwe ngMat01

In dit voorbeeld is ngMat01 de naam van het nieuwe project. Er wordt een nieuwe projectmap (met die naam) gemaakt, de Angular-projectsjabloon wordt gedownload en de benodigde afhankelijkheden worden geïnstalleerd.

Gebruik ng toevoegen om hoekig materiaal toe te voegen

Met de release van Angular 6 is de nieuwe opdracht ng add beschikbaar, waardoor het eenvoudig is om nieuwe mogelijkheden aan het project toe te voegen. Met deze opdracht wordt de pakketbeheerder gebruikt om nieuwe afhankelijkheden te downloaden en bijbehorende installatiescripts op te roepen. Dit zorgt ervoor dat het project wordt bijgewerkt met afhankelijkheden, configuratiewijzigingen en dat pakketspecifieke initialisatiecode wordt uitgevoerd.

Hieronder gebruiken we de opdracht ng add om hoekig materiaal toe te voegen aan de eerder gemaakte Angular 6-toepassing:

$ ng add @ angular / material

Door deze opdracht uit te voeren, installeren we hoekig materiaal en de bijbehorende thema in het project. Verder worden nieuwe startercomponenten geregistreerd in ng genereren.

Onderdelen van hoekig materiaalstater verkennen

Door het toevoegen van nieuwe Angular Material-startcomponenten voor het genereren van ng, is het heel eenvoudig om aan de slag te gaan met Angular Material. De volgende startonderdelen zijn beschikbaar:

  • @ hoekig / materiaal: materiaal Dashboard: maak een op kaarten gebaseerd dashboardonderdeel
  • @ angular / material: materialTable: maak een component die gegevens weergeeft met een datatabel
  • @ hoekig / materiaal: materialNav: maak een component met een responsieve sidenav voor navigatie

Om van die startcomponenten gebruik te maken, moet u de opdracht ng genereren op de volgende manieren gebruiken:

$ ng genereren @ angular / material: materialNav --name myNav
$ ng genereren @ angular / material: materialDashboard --name myDashboard
$ ng genereren @ angular / material: materialTable - name myTable

Bijv. als u de eerste opdracht gebruikt om een ​​nieuwe myNav-component te genereren, zou u de volgende uitvoer op de opdrachtregel moeten kunnen zien:

CREATE src / app / my-nav / my-nav.component.css (110 bytes)
CREATE src / app / my-nav / my-nav.component.html (945 bytes)
CREATE src / app / my-nav / my-nav.component.spec.ts (605 bytes)
CREATE src / app / my-nav / my-nav.component.ts (481 bytes)
UPDATE src / app / app.module.ts (795 bytes)

Er zijn vier nieuwe bestanden aan het project toegevoegd. Die bestanden bevatten de implementatie van de navigatiecomponent Angular Material. MyNavComponent is toegevoegd aan de declaratieserie van de decorateur @NgModule in AppModule, zodat het component kan worden gebruikt in onze Angular-toepassing.

Om de gebruiker zichtbaar te maken, verwijdert u de standaardinhoud van het bestand app.component.html en voegt u het volgende element in:

Dit is het element dat wordt gebruikt om de uitvoer van MyNavComponent op te nemen in de uitvoer die in de browser wordt gepresenteerd.

Met de ontwikkeling van de webserver gestart

$ ng server - open

je zou het volgende resultaat moeten kunnen zien:

De router toevoegen

Nu de navigatie-indeling beschikbaar is, kunnen we eenvoudig Angular Router-functionaliteit toevoegen. Voeg in app.module.ts de volgende importverklaring toe om RouterModule en Routes te importeren:

import {RouterModule, Routes} van '@ angular / router';

Voeg vervolgens een routerconfiguratie-array toe aan hetzelfde bestand:

const appRoutes: Routes = [
  {pad: 'eerste pagina', component: FirstPageComponent},
  {pad: 'tweede pagina', component: SecondPageComponent},
  {pad: 'derde pagina', component: ThirdPageComponent}
];

Natuurlijk zijn FirstPageComponent, SecondPageComponent en ThirdPageComponent nog niet beschikbaar. We gaan die componenten in de volgende stappen toevoegen.

Om de routerconfiguratie voor onze Angular-toepassing te activeren, moeten we RouterModule op de volgende manier toevoegen aan de import-array van de @NgModule:

invoer: [
    ...
    RouterModule.forRoot (appRoutes)
    ...
  ],

Vervolgens moeten we de routeruitgang (de plaats waar de inhoud van de routecomponent wordt ingevoegd) toevoegen aan het -Element in bestand my-nav.component.html:

 

Verder moeten we de links in het zijbalkmenu bijwerken en de routerLink-richtlijn gebruiken om naar de respectieve routes te wijzen:


       Eerste pagina 
       Tweede pagina 
       Derde pagina 
    

Voeg ten slotte de drie componenten toe om de routerconfiguratie te laten werken met de volgende opdrachten:

$ ng component FirstPage genereren
$ ng component SecondPage genereren
$ ng genereren component ThirdPage

Andere hoekige materiaalcomponenten gebruiken

We hebben de navigatie-startcomponent tot nu toe in onze applicatie gebruikt. U kunt ook gebruik maken van een van de andere hoekige materiaalcomponenten. Kijk voor een overzicht van de beschikbare componenten op https://material.angular.io/components/categories.

In de volgende stap gaan we de MatCard-component uit de Angular Material-bibliotheek gebruiken in een van onze pagina-componenten (bijvoorbeeld FirstPageComponent).

Voeg eerst de MatCardModule-import toe aan het bestand app.module.ts:

import {MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule} uit '@ angular / material';

Voeg het ook toe aan de import-array:

invoer: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule,
    RouterModule.forRoot (appRoutes)
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule
  ],

Nu zijn we klaar om componenten van MatCardModule te gebruiken in de sjablooncode (bijvoorbeeld first-page.component.html):


  
    
     Shiba Inu      Hondenras      Foto van een Shiba Inu        

      De Shiba Inu is de kleinste van de zes originele en verschillende hondenrassen uit Japan.       Een kleine, behendige hond die heel goed overweg kan met bergachtig terrein, de Shiba Inu was oorspronkelijk       gefokt voor de jacht.                        

Voeg ook de CSS-code in first-page.component.css in:

.example-card {
  max. breedte: 400 px;
}
.example-header-image {
  background-image: url ('https://material.angular.io/assets/img/examples/shiba1.jpg');
  achtergrondformaat: omslag;
}

Alle andere Material Design-componenten uit de Angular Material-bibliotheek kunnen op dezelfde manier worden gebruikt.

Dit bericht is eerst gepubliceerd op CodingTheSmartWay.com.

# 1 Angular 6 - De complete gids

Master Angular (Angular 2+, incl. Angular 6) en bouw geweldige, reactieve web-apps met de opvolger van Angular.js
Ga naar cursus ...

Disclaimer: dit bericht bevat affiliatielinks, wat betekent dat als ik op een van de productlinks klik, ik een kleine commissie ontvang. Dit helpt deze blog te ondersteunen!