Vinkelmateriale og vinkel 6 - Materiale Design til vinkelformet

Dette indlæg er først blevet offentliggjort på CodingTheSmartWay.com.

Abonner på YouTube | Live demo | Kode på GitHub

Angular Material er en samling af materialedesignkomponenter til Angular. Ved at bruge disse komponenter kan du anvende Materialedesign meget let. Med frigivelsen af ​​Angular 6 er brugen af ​​Angular Material også blevet lettere. I denne tutorial vil vi se på de nylige ændringer. Du lærer, hvordan du bruger Angular Material i dit Angular 6-projekt på den mest lette måde.

Angular Materials websted kan findes på https://material.angular.io/.

Opsætning af projektet Angular 6

For at komme i gang skal vi først konfigurere Angular 6-projektet. Dette gøres ved at bruge Angular CLI (https://cli.angular.io/). Hvis du ikke har installeret Angular CLI på dit system, men du først skal følge trinnene fra projektets websted for at gøre kommandolinjegrænsefladen tilgængelig på dit system.

Når Angular CLI er installeret med succes, kan du starte det nye projekt ved at bruge kommandoen ng på følgende måde:

$ ng nyt ngMat01

I dette eksempel er ngMat01 navnet på det nye projekt. En ny projektmappe (med det navn) oprettes, den vinkelformede projektskabelon downloades, og de nødvendige afhængigheder installeres.

Brug af ng add To Add Angular Material

Med frigivelsen af ​​Angular 6 er den nye kommando ng add tilgængelig, hvilket gør det nemt at tilføje nye muligheder til projektet. Denne kommando bruger pakkeadministratoren til at downloade nye afhængigheder og påkalde tilsvarende installationsskripts. Dette sikrer, at projektet opdateres med afhængigheder, konfigurationsændringer, og at pakkespecifik initialiseringskode udføres.

I det følgende bruger vi kommandoen ng add til at tilføje vinkelmateriale til det tidligere oprettede Angular 6-program:

$ ng tilføj @ vinkel / materiale

Ved at udføre denne kommando installerer vi Angular Material og den tilhørende tema i projektet. Desuden er nye starterkomponenter registreret i ng-generering.

Undersøgelse af vinkelmateriale Stater-komponenter

Når du har tilføjet nye Angular Material-startkomponenter til generering af ng, gør det meget let at komme i gang med Angular Material. Følgende starterkomponenter er tilgængelige:

  • @ vinkel / materiale: materialDashboard: Opret en kortbaseret instrumentbrætkomponent
  • @ vinkel / materiale: materialeTabel: Opret en komponent, der viser data med en datatabel
  • @ vinkel / materiale: materialNav: Opret en komponent med en responsiv sidenav til navigation

For at gøre brug af disse startkomponenter skal du bruge kommandoen ng-generering på følgende måder:

$ ng generere @ vinkel / materiale: materialNav - navn myNav
$ ng generere @ vinkel / materiale: materialDashboard - navn på myDashboard
$ ng generere @ vinkel / materiale: materialTable - navn myTable

For eksempel. Hvis du bruger den første kommando til at generere en ny myNav-komponent, skal du være i stand til at se følgende output på kommandolinjen:

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

Fire nye filer er tilføjet til projektet. Disse filer indeholder implementeringen af ​​navigationselementet Angular Material. MyNavComponent er føjet til deklarationsarrayet for @NgModule dekoratøren i AppModule, så komponenten kan bruges i vores vinkel applikation.

For at gøre det synligt for brugeren at slette standardindholdet i filen app.component.html og blot indsætte følgende element:

Dette er det element, der bruges til at inkludere output fra MyNavComponent i output, der præsenteres i browseren.

Efter at have startet udviklingswebserveren med

$ ng server - åben

du skal kunne se følgende resultat:

Tilføjelse af routeren

Nu, hvor navigationslayoutet er tilgængeligt, er vi i stand til let at tilføje Angular Router-funktionalitet. I app.module.ts tilføjes følgende importerklæring for at importere RouterModule og ruter:

import {RouterModule, Routes} fra '@ vinkel / router';

Tilføj derefter en routerkonfigurationsarray i den samme fil:

const appRoutes: Ruter = [
  {sti: 'første side', komponent: FirstPageComponent},
  {sti: 'anden side', komponent: SecondPageComponent},
  {sti: 'tredje side', komponent: ThirdPageComponent}
];

FirstPageComponent, SecondPageComponent og ThirdPageComponent er selvfølgelig ikke tilgængelige endnu. Vi vil tilføje disse komponenter i de følgende trin.

For at aktivere routerkonfigurationen til vores Angular-applikation er vi nødt til at sørge for at tilføje RouterModule til import-Array af @NgModule på følgende måde:

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

Derefter skal vi tilføje routerudløbet (det sted, hvor indholdet af rutekomponenten er indsat) inde i -Element i filen my-nav.component.html:

 

Desuden er vi nødt til at opdatere linkene fra sidefeltmenuen og bruge routerLink-direktivet til at pege på de respektive ruter:


       Første side 
       Anden side 
       Tredje side 
    

Til sidst, for at få routerkonfigurationen til at arbejde, skal du tilføje de tre komponenter ved at bruge følgende kommandoer:

$ ng genererer komponent FirstPage
$ ng genererer komponent SecondPage
$ ng genererer komponent ThirdPage

Brug af andre kantede materialekomponenter

Vi har hidtil brugt navigationsstarterkomponenten i vores applikation. Du kan også gøre brug af en hvilken som helst af de andre kantede materialekomponenter. Se https://material.angular.io/components/categorier for at få et overblik over tilgængelige komponenter.

I det næste trin vil vi bruge MatCard-komponenten fra biblioteket Angular Material i en af ​​vores sidekomponenter (f.eks. FirstPageComponent).

Tilføj først MatCardModule-importen i filen app.module.ts:

import {MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule} fra '@ vinkel / materiale';

Føj det også til import-Array:

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

Nu er vi klar til at bruge komponenter i MatCardModule i skabelonkoden (f.eks. Første-side.component.html):


  
    
     Shiba Inu      Hunderac      Foto af en Shiba Inu        

      Shiba Inu er den mindste af de seks originale og tydelige spitz hunderacer fra Japan.       En lille, smidig hund, der klarer sig meget godt med bjergrigt terræn, Shiba Inu var oprindeligt       opdrættet til jagt.                 LIKE      DEL   

Indsæt også CSS-koden i first-page.component.css:

.eksempel-kort {
  max-bredde: 400px;
}
.eksempel-header-billede {
  baggrund-billede: url ('https://material.angular.io/assets/img/examples/shiba1.jpg');
  baggrund-størrelse: dækning;
}

Alle andre materialedesignkomponenter fra Angular Material-biblioteket kan bruges på samme måde.

Dette indlæg er først blevet offentliggjort på CodingTheSmartWay.com.

# 1 kantet 6 - Den komplette guide

Master Angular (Angular 2+, inkl. Angular 6), og bygg fantastiske, reaktive webapps med efterfølgeren til Angular.js
Gå til kursus ...

Ansvarsfraskrivelse: Dette indlæg indeholder tilknyttede links, hvilket betyder, at hvis du klikker på et af produktlinkene, vil jeg modtage en lille provision. Dette hjælper med at støtte denne blog!