Share
Vinkel har utviklet seg gjennom årene, og nye spennende funksjoner har blitt kontinuerlig lagt til hver versjon. En av forbedringene er i Material Design, som leveres med nye komponenter. Denne opplæringen vil se på Angular Material og hvordan å innlemme den i Angular 6-prosjekter.
Material Design er et design språk for web- og mobilapper som ble utviklet av Google i 2014. Materialdesign gjør det enkelt for utviklere å tilpasse brukergrensesnittet deres, samtidig som de fortsatt har et flott appgrensesnitt som brukerne er komfortable med. Med Material Design får du et godt organisert format sammen med fleksibiliteten til å uttrykke ditt merke og stil.
For et eksempel på Material Design, sjekk ut Houzz, et hjemmedesignprogram som vant Google Play-priser i 2016. Denne appen bruker Material Design for å passe til mange funksjoner i den faste mobile enheten. Dette gir en god opplevelse for brukeren ved å la dem se og navigere søknaden uten å føle seg overveldet. Det er virkelig en av de beste Material Design apps.
Dette innlegget handler ikke om Material Design, så vi vil ikke gå inn i alle detaljer. Hvis du vil lære mer, er det en god opplæring om Material Design på Envato bloggen.
Kantformet materiale består av en serie prefabrikkerte vinkelkomponenter. I motsetning til Bootstrap, som gir deg komponenter du kan stile som du vil, vil Angular Material forsøke å gi en forbedret og konsekvent brukeropplevelse. Samtidig gir den deg muligheten til å kontrollere hvordan ulike komponenter oppfører seg.
På samme måte som Angular, har Angular Material utviklet seg mye siden starten, med store forbedringer og feilrettinger.
For å legge Angular Material til et prosjekt, vil vi bruke ng legg til kommando som brukes til å legge til nye evner til vinkelprosjekter. Denne kommandoen er en ny funksjon i Angular 6, og det er så enkelt som:
ng legg til @ vinkel / materiale
Denne kommandoen vil legge til biblioteket i et eksisterende prosjekt og ta med tema CSS i angular.json. Det vil også legge til skript i index.html og oppdatere AppModule.
En annen funksjon i Angular 6 er ng oppdatering, som oppdaterer npm avhengigheter når en ny versjon er utgitt. Den oppdaterer også RxJS-koden og Material Design-koden for å utnytte nye APIer.
Vinkelt materiale består av flere designkomponenter som faller under følgende kategorier:
Du kan generere startkomponenter ved hjelp av ng oppdatering kommando. Noen av skjemaene som er tilgjengelige via denne kommandoen er:
Disse skjemaene kan enkelt installeres med ng generere kommandoen som følger:
Accentsconagua
ng generere @ vinkel / materiale: materialtabellnavn : genererer en komponent som viser data med en datatabellng generere @ vinkel / materiale: material-nav -name : genererer en komponent med en sidelinje og en verktøylinjeng generere @ vinkel / materiale: material-dashboard - navn : genererer en komponent som inneholder en dynamisk rutenett med kort.
For å komme i gang, trenger du Angular CLI. Hvis du ikke har Angular CLI installert, kan du bare installere den ved å utstede følgende kommando.
npm installer -g @ vinkel / cli
Deretter må vi initialisere et nytt kantprosjekt. For å gjøre det, utsted følgende kommando, hvor Material-ng er navnet på vårt kantprosjekt.
ng ny Material-ng
Denne kommandoen lager flere Angular Template-filer for prosjektet ditt, og installerer nødvendige starteravhengigheter.
Gå inn i katalogen av prosjektet ditt og legg til kantmateriale til prosjektet ditt.
cd MaterialApp ng legg til @ vinkel / materiale
Deretter vil vi legge til noen komponenter som er vanlige for mange applikasjoner, for eksempel navigasjonen.
For å legge til en navigeringslinje, bare utstede:
ng generere @ vinkel / materiale: material-nav-name myNav
Denne kommandoen legger til en sammenleggbar sidenavigasjon og skuffkomponent. Du bør få følgende utdata, som har fire filer generert for oss, nemlig my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, og my-nav.component.ts.
CREATE src / app / my-nav / my-nav.component.css (129 byte) CREATE src / app / my-nav / my-nav.component.html (CREATE src / app / my-nav / my -nav.component.spec.ts (699 bytes) CREATE src / app / my-nav / my-nav.component.ts (580 bytes) OPPDATERING src / app / app.module.ts (795 bytes)
Nå åpen my-nav.component.html og du bør se all HTML-koden for navigasjonen som ble generert for oss.
Meny Link 1 Link 2 Link 3 Material-ng
Som standard serverer et startprosjekt Angular-prosjektet standardsiden, men vi ønsker å se magien i Material Design! For å kunne benytte vår genererte Material Design nav-komponent, åpne app.component.html og erstatt all koden med:
Nå, når du kjører appen, ser du navigasjonslinjen.
Du bør også legge merke til at navigasjonskomponenten vi har lagt til, er importert til hovedmodulen som vist:
# app.module.ts importerer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer AppComponent fra './app.component'; importer BrowserAnimationsModule fra '@ vinkel / plattform-nettleser / animasjoner'; importer MyNavComponent fra './my-nav/my-nav.component'; importer LayoutModule fra '@ vinkel / cdk / layout'; importer MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule fra '@ vinkel / materiale'; @NgModule (declarations: [AppComponent, MyNavComponent], import: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule], leverandører: [], bootstrap: [AppComponent]) eksportklasse AppModule
I my-nav.component.html, la oss gjøre noen endringer i menylistene også:
Hjem Formkontroller Navigasjonslayout Knapper og indikatorer Popups og Modeller Datatabell
Nå kan du starte utviklingsserveren ved å kjøre:
ng server -open
Resultatet skal se slik ut:
Som du kan se, Angular Material gir deg en enkel måte å få applikasjonen din på. Med bare noen få kommandoer og noen få linjer med kode, har vi vært i stand til å innlemme Material Design i vår Angular-applikasjon!
Besøk vår GitHub repo for full kildekoden for dette eksempelet app.
Jeg håper denne opplæringen har hjulpet deg med å forstå hvordan du bruker kraften til Material Design i appen din, for et toppbrudd. For mer informasjon om Material Design i Angular 6, sjekk ut de offisielle dokumentene som inneholder ferdige maler. Det er et flott sted å lære om Angular. Du kan også sjekke ut våre Angular opplæring og kurs her på Envato Tuts+!
