Share
Angular is in de loop der jaren geëvolueerd en er zijn voortdurend nieuwe spannende functies aan elke versie toegevoegd. Een van de verbeteringen is Material Design, dat wordt geleverd met nieuwe componenten. Deze tutorial zal Angular Material bekijken en hoe het in Angular 6-projecten kan worden geïntegreerd.
Material Design is een ontwerptaal voor web- en mobiele apps die Google in 2014 heeft ontwikkeld. Met Material Design kunnen ontwikkelaars eenvoudig hun gebruikersinterface aanpassen, terwijl ze toch een goed uitziende app-interface hebben waar gebruikers zich prettig bij voelen. Met Material Design krijgt u een overzichtelijk formaat en de flexibiliteit om uw merk en stijl uit te drukken.
Bekijk voor een voorbeeld van Material Design Houzz, een app voor thuisontwerp die in 2016 de Google Play-awards heeft gewonnen. Deze app maakt gebruik van Material Design om zijn vele functies in het beperkte vastgoed van mobiele apparaten te passen. Dit biedt een goede ervaring voor de gebruiker door hen de applicatie te laten bekijken en navigeren zonder zich overweldigd te voelen. Het is echt een van de beste Material Design-apps.
Dit bericht gaat niet over Material Design, dus we gaan niet in op alle details. Als je meer wilt weten, is er een geweldige tutorial over materiaalontwerp op het Envato-blog.
Hoekig materiaal bestaat uit een reeks vooraf gebouwde hoekcomponenten. In tegenstelling tot Bootstrap, dat je componenten geeft die je op elke gewenste manier kunt stylen, streeft Angular Material ernaar om een verbeterde en consistente gebruikerservaring te bieden. Tegelijkertijd geeft het u de mogelijkheid om te bepalen hoe verschillende componenten zich gedragen.
Angular Material is, net als Angular, enorm geëvolueerd sinds de eerste release, met grote verbeteringen en bugfixes.
Om Hoekig materiaal aan een project toe te voegen, gebruiken we het ng toevoegen commando dat wordt gebruikt om nieuwe mogelijkheden toe te voegen aan Angular-projecten. Deze opdracht is een nieuwe functie in Angular 6 en het is zo simpel als:
ng @ hoekig / materiaal toevoegen
Deze opdracht voegt de bibliotheek toe aan een bestaand project en brengt thema-CSS binnen angular.json. Er worden ook scripts in toegevoegd index.html en werk het AppModule.
Een ander kenmerk van Angular 6 is ng update, welke npm-afhankelijkheden bijwerkt wanneer een nieuwe versie wordt vrijgegeven. Het werkt ook uw RxJS-code en Material Design-code bij om te profiteren van nieuwe API's.
Hoekig materiaal bestaat uit verschillende ontwerpcomponenten die onder de volgende categorieën vallen:
U kunt de startcomponenten genereren met behulp van de ng update commando. Enkele van de schema's die beschikbaar zijn via dit commando zijn:
Deze schema's kunnen eenvoudig worden geïnstalleerd met de ng genereren commando als volgt:
Accentsconagua
ng @ hoekig / materiaal genereren: material-table --name : genereert een component die gegevens weergeeft met een gegevenstabelng @ hoekig / materiaal genereren: material-nav - naam : genereert een component met een navigatie aan de zijkant en een werkbalkng @ hoekig / materiaal genereren: materiaal-dashboard - naam : genereert een component die een dynamische rasterlijst met kaarten bevat.
Om te beginnen, hebt u Angular CLI nodig. Als u geen Angular CLI hebt geïnstalleerd, installeert u dit eenvoudig door de volgende opdracht uit te voeren.
npm install -g @ angular / cli
Vervolgens moeten we een nieuw Angular-project initialiseren. Om dat te doen, geeft u het volgende commando, waar Materiaal-ng is de naam van ons Angular-project.
ng nieuwe Material-ng
Met deze opdracht maakt u verschillende Angular-sjabloonbestanden voor uw project en installeert u de benodigde startervereisten.
Ga naar de map van uw project en voeg hoekig materiaal toe aan uw project.
cd MaterialApp ng voeg @ angular / material toe
Vervolgens voegen we een aantal componenten toe die voor veel applicaties hetzelfde zijn, zoals de navigatie.
Om een navigatiebalk toe te voegen, geeft u eenvoudigweg aan:
ng @ hoekig / materiaal genereren: material-nav - name myNav
Met deze opdracht voegt u een samenvouwbare zijnavigatie en ladecomponent toe. Je zou de volgende output moeten krijgen, die vier bestanden voor ons heeft gegenereerd, namelijk mijn-nav.component.css, mijn-nav.component.html, mijn-nav.component.spec.ts, en mijn-nav.component.ts.
CREATE src / app / my-nav / my-nav.component.css (129 bytes) CREATE src / app / my-nav / my-nav.component.html (958 bytes) CREATE src / app / my-nav / my -nav.component.spec.ts (699 bytes) CREATE src / app / my-nav / my-nav.component.ts (580 bytes) UPDATE src / app / app.module.ts (795 bytes)
Nu open mijn-nav.component.html en je zou alle HTML-code moeten zien voor de navigatie die voor ons is gegenereerd.
Menu Link 1 Link 2 Link 3 Materiaal-ng
Standaard wordt een standaard Angular-project voor de standaardpagina gebruikt, maar we willen de magie van Material Design kunnen zien! Om gebruik te maken van onze gegenereerde NAV-component Material Design, open app.component.html en vervang alle code door:
Nu, wanneer u de app uitvoert, ziet u de navigatiebalk.
Je zou ook moeten opmerken dat de navigatiecomponent die we hebben toegevoegd is geïmporteerd in de hoofdmodule zoals getoond:
# app.module.ts importeer BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer AppComponent van './app.component'; import BrowserAnimationsModule van '@ angular / platform-browser / animations'; importeer MyNavComponent uit './my-nav/my-nav.component'; importeer LayoutModule van '@ angular / cdk / layout'; import MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule uit '@ angular / material'; @ NgModule (declarations: [AppComponent, MyNavComponent], imports: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule], providers: [], bootstrap: [AppComponent]) exportklasse AppModule
In mijn-nav.component.html, laten we ook een paar wijzigingen in de menulijsten aanbrengen:
Huis Formulierbesturing Navigatie-indeling Knoppen en indicatoren Pop-ups & modelen Datatabel
Nu kunt u de ontwikkelserver starten door het volgende uit te voeren:
ng server -open
Het resultaat zou er als volgt uit moeten zien:
Zoals u kunt zien, biedt Angular Material een eenvoudige manier om uw toepassing in gebruik te nemen. Met slechts een paar commando's en enkele regels code hebben we Material Design kunnen integreren in onze Angular-applicatie!
Ga naar onze GitHub-repo voor de volledige broncode van deze voorbeeld-app.
Ik hoop dat deze tutorial je heeft geholpen om te begrijpen hoe je de kracht van Material Design in je app kunt gebruiken voor een eersteklas gebruikersinterface. Raadpleeg de officiële documentatie die kant-en-klare sjablonen bevat voor meer informatie over materiaalontwerp in Angular 6. Het is een geweldige plek om over Angular te leren. Je kunt ook onze Angular tutorials en cursussen hier bekijken op Envato Tuts+!
