Angular Material: Fra Web til Mobil Med Én Kodebase

I en verden hvor brugere forventer sømløse oplevelser på tværs af alle enheder, er det essentielt at kunne levere en applikation, der fungerer lige godt på desktop, tablet og mobil. Angular Material tilbyder en fantastisk samling af Material Design-komponenter til Angular-apps, og når det kombineres med Capacitor, åbner der sig en verden af muligheder for at bygge native mobile apps ud fra en enkelt, vedligeholdelsesvenlig kodebase. Denne artikel vil guide dig gennem hele processen, fra opsætning af et Angular-projekt med Angular Material til integrationen af Capacitor for at skabe native iOS- og Android-apps.

Hvad er Angular Material?

Angular Material er et UI-komponentbibliotek udviklet af Google, specifikt til Angular-frameworket. Det implementerer Googles Material Design-sprog, som sigter mod at skabe intuitive, konsistente og visuelt tiltalende brugergrænseflader. Biblioteket indeholder et bredt udvalg af komponenter, herunder knapper, formularer, navigationselementer, dialogbokse og meget mere, som alle er designet til at være responsive og tilgængelige. Ved at anvende Angular Material kan udviklere hurtigt opbygge professionelle og moderne brugergrænseflader uden at skulle genopfinde hjulet.

Opsætning af Angular Projekt og Angular Material

Lad os starte med at oprette et nyt Angular-projekt. Efter oprettelsen kan vi bruge et schematic fra Angular Material til at tilføje alle de nødvendige pakker og foretage de nødvendige ændringer i vores projekt. Du kan generelt besvare alle spørgsmål med 'ja' under wizardens kørsel. Derefter kan du køre endnu et schematic fra Angular Material, som automatisk opsætter en grundlæggende sidenav-komponent for os.

Følg disse kommandoer i din terminal:

# Start en ny app ng new materialApp --routing --style=scss cd ./materialApp # Schematic til at tilføje Angular Material ng add @angular/material # Generer en komponent med sidenav ng generate @angular/material:navigation app-navigation

Når vi er færdige, skal vi ændre vores src/app/app.component.html for at vise vores nye komponent i stedet for den standardkode, som Angular-appen kommer med:

Dette vil indlæse vores komponent. Nu er det et godt tidspunkt at se på den generelle opsætning af sidenavet:

• Hele koden er omgivet af mat-sidenav-container komponenten.
• Selve side menuen, som vi kan vise, er inde i mat-sidenav.
• Alt inde i mat-sidenav-content er det faktiske hovedområde, som senere viser vores forskellige sider.

Hvis du kører appen lige nu, vil du se menuen selv på større skærme. Typisk vil du dog bruge en topnavigation i den situation. For at opnå denne adfærd skal vi ændre src/app/app-navigation/app-navigation.component.html og fjerne opened-attributten fra mat-sidenav:

Menu Link 1 Link 2 Link 3 menuMy App

Hvis du nu kører appen, bør du kun se menuikonet på mindre skærme og ellers bare toolbaren med din app-titel øverst. Denne side kommer automatisk med et isHandset Observable, som du kan finde i src/app/app-navigation/app-navigation.component.ts. Det bruger Angulars BreakpointObserver til at udsende, om vi har nået en "handset" enhedsstørrelse. Da dette er et Observable, bruger alle forekomster af isHandset-variablen Angulars async pipe til at abonnere på det.

Tilføjelse af Navigation med Forskellige Ruter

Indtil videre har vi kun én side. Nu er det tid til at tilføje flere sider og starter med at generere nogle komponenter. En af dem bruger endda et andet schematic fra Angular Material til at opsætte et fint lille dashboard:

ng generate @angular/material:dashboard dashboard ng generate component about ng generate component error

Nu skal vi referere til de forskellige komponenter og oprette de tilsvarende routing-poster, så Angular routeren kan opløse en URL til en specifik komponent. Til dette skal du åbne src/app/app-routing.module.ts og ændre den som følger:

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './about/about.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { ErrorComponent } from './error/error.component'; const routes: Routes = [ { path: '', children: [ { path: '', component: DashboardComponent }, { path: 'about', component: AboutComponent }, { path: '404', component: ErrorComponent }, { path: '**', redirectTo: '404' } ] } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 

Vi har nu forskellige ruter i vores app:

• / vil åbne Dashboardet.
• /about vil åbne About.
• /404 vil åbne Error-siden.
• Alt andet vil blive omdirigeret til fejl-siden.

Lige nu virker routingen ikke, fordi vi ikke har tilføjet router-outlet nogen steder i vores app. Det bedste sted for det er faktisk nederst i vores sidenav, hvor der som standard er en kommentar. Så bring src/app/app-navigation/app-navigation.component.html frem og indsæt:

MenumenuMy App

Nu skulle du være i stand til direkte at navigere til de forskellige ruter, vi oprettede før! Men selvfølgelig har vi også brug for navigationslinks i vores menu og nav bar. Så vi skal ændre filen igen. Denne gang tilføjer vi routerLink-elementer to steder. I mat-sidenav tilføjer vi også en klikhåndtering for at lukke sidenavigationsmenuen direkte, når vi vælger et element ved hjælp af drawer template-referencen. I navigationsbaren i fuld skærm tilføjer vi et span-element, så vi kan flytte knapperne til højre side ved hjælp af flexbox-layoutet senere. Gå videre og ændr src/app/app-navigation/app-navigation.component.html igen:

Menu Dashboard About menuMy App
 Dashboard About 

Derudover vil alle knapper og elementer til routing modtage CSS-klassen active-link, når ruten bliver aktiv. For at sikre, at vores dashboard-sti ikke aktiveres for alle mulige sider, anvender vi en eksakt match på routerLinkActiveOptions. Endelig er vores topnavigation indkapslet i en div, som vil blive skjult, når vi når handset-enhedens bredde. På det tidspunkt har vi vores burger-menu og behøver alligevel ikke disse elementer. Nu skal vi blot tilføje de manglende klasser og kommentere en indledende klasse ud, da denne ville overskrive styling af toolbaren inde i menuen. Derfor skal du åbne src/app/app-navigation/app-navigation.component.scss og ændre den som følger:

.sidenav-container { height: 100%; } .sidenav { width: 200px; } /* .sidenav .mat-toolbar { background: inherit; } */ .mat-toolbar.mat-primary { position: sticky; top: 0; z-index: 1; } .hidden { display: none; } .spacer { flex: 1 1 auto; } .active-link { color: #ffc000; /* Guld farve for aktiv link */ } 

For at vise noget mere indhold og gøre det nemmere at route, lad os indsætte noget dummy-indhold i vores src/app/about/about.component.html:

About
 Dette er mit episke projekt! Broken link

Lad os også gøre det samme for src/app/error/error.component.html:

Error
 Denne side findes ikke - Tilbage til start

Og til sidst tilføj en global styling for begge sider inde i src/styles.scss:

.grid-container { margin: 20px; } 

Med alt dette på plads har vi en anstændig responsiv webapplikation med forskellige ruter og en super ren brugergrænseflade. Dette kunne være din skabelon til din næste webapp! Men vi stopper ikke her...

Tilføjelse af Capacitor til vores Angular Projekt

Med Capacitor kan vi nemt bygge en native applikation fra vores webapp-kode – uden faktiske ændringer i selve koden! For at opsætte Capacitor installerer vi CLI'en som en lokal afhængighed og kalder init-kommandoen. Tryk simpelthen på enter for hvert spørgsmål for nu!

Derudover skal du installere et par pakker til kernen og de native platforme (iOS/Android), som du ønsker at bruge, og tilføje dem én gang til sidst:

# Installer Capacitor CLI lokalt npm install @capacitor/cli --save-dev # Initialiser Capacitor i dit Angular projekt npx cap init # Installer de nødvendige pakker npm install @capacitor/core @capacitor/ios @capacitor/android # Tilføj de native platforme npx cap add ios npx cap add android

På dette tidspunkt bør du se en fejl, fordi Capacitor leder efter buildet af din Angular-app på det forkerte sted. Så lad os åbne capacitor.config.ts og ændre den:

import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.example.app', appName: 'material-app', webDir: 'dist/material-app', // Vigtigt: Peger på Angulars build-mappe bundledWebRuntime: false }; export default config; 

Nu peger vi på den rigtige build-mappe, og vi kan oprette et nyt build og synkronisere disse filer til vores native platforme:

# Byg Angular projektet ng build # Synkroniser vores filer til de native projekter npx cap sync

Nu skal du bare deploye appen til din enhed!

Byg og Deploy Native Apps

Du skal nu have Xcode til iOS og Android Studio til Android-apps installeret på din maskine. Derudover skal du være tilmeldt Apple Developer Program, hvis du vil bygge og distribuere apps i App Store, og det samme gælder for Google Play Store.

Hvis du aldrig har rørt ved et native mobilprojekt, kan du nemt åbne begge native projekter ved at køre:

npx cap open ios npx cap open android

Inde i Android Studio skal du nu bare vente, indtil alt er klar, og du kan deploye din app til en tilsluttet enhed uden at ændre indstillingerne! Inde i Xcode er det næsten det samme, men du skal opsætte din signaturkonto, hvis du vil deploye din app til en rigtig enhed og ikke kun simulatoren. Xcode guider dig igennem dette, hvis du aldrig har gjort det (men igen, du skal være tilmeldt udviklerprogrammet). Derefter er det lige så nemt som at trykke på play-knappen og køre appen på din tilsluttede enhed, som du kan vælge øverst! Tillykke, du har lige deployet din Angular webapp til en mobilenhed!

Men der er stadig udfordringer forude, især på iOS ser brugergrænsefladen endnu ikke godt ud. Før vi retter det, lad os gøre vores debugging-proces hurtigere.

Capacitor Live Reload

Nu er du vant til at have live reload med alle moderne frameworks, og vi kan få den samme funktionalitet selv på en mobilenhed med minimal indsats! Ideen er at gøre din lokalt-serverede app med live reload tilgængelig på dit netværk, og Capacitor-appen vil simpelthen indlæse indholdet fra den URL.

Første skridt er at finde din lokale IP-adresse, hvilket du kan gøre på en Mac ved at køre:

ipconfig getifaddr en0

På Windows skal du køre ipconfig og kigge efter IPv4-adressen.

Med den information kan du nu fortælle Angular at bruge den direkte som host (i stedet for nøgleordet localhost), eller du kan simpelthen bruge 0.0.0.0, hvilket gjorde det samme i min test:

# Alternativt ng serve -o --host 0.0.0.0 # ng serve -o --host 192.168.x.xx

Nu skal vi kun fortælle Capacitor at indlæse appen direkte fra denne server, hvilket vi kan gøre direkte i vores capacitor.config.ts med en ny post:

import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.example.app', appName: 'material-app', webDir: 'dist/material-app', bundledWebRuntime: false, server: { url: 'http://192.168.x.xx:4200', // Erstat med din IP og port cleartext: true } }; export default config; 

Sørg for at bruge den rigtige IP og port; jeg har simpelthen brugt standard Angular-porten her. For at anvende disse ændringer kan vi nu kopiere ændringerne til vores native projekt:

npx cap copy

copy er stort set ligesom sync, men vil kun kopiere ændringer af web-mappen og konfigurationen, ikke opdatere det native projekt. Nu kan du deploye din app en gang til gennem Android Studio eller Xcode, og derefter ændre noget i din Angular-app – appen vil automatisk genindlæse og vise ændringerne!

Bemærk: Hvis du installerer nye plugins som kameraet, kræver dette stadig en genopbygning af det native projekt, fordi native filer ændres, hvilket ikke kan gøres on-the-fly.

Retning af den Mobile Brugergrænseflade i Angular Material

Nu kan vi nemmere tackle de åbne problemer i vores mobile app. Først og fremmest skal vi ændre en meta-tag i vores src/index.html og også inkludere viewport-fit:

Ved at gøre dette kan vi nu få adgang til en miljøvariabel, der giver os information om iOS' notch-område øverst, som du normalt skal holde tomt. Den nemmeste måde at anvende dette korrekt på i vores tilfælde er at åbne src/app/app-navigation/app-navigation.component.scss og tilføje en ny regel:

mat-toolbar { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); /* Justerer højden for at inkludere safe area */ } 

Fordi vi ændrer top-paddingen, skal vi også beregne en ny højde for toolbaren. Men med dette på plads har du en meget native brugergrænseflade! En yderligere "fejl" kan ses, når du trækker visningen ned på iOS, noget kendt som over-scroll. Der synes ikke at være en nem løsning for dette, der virker i alle scenarier, men jeg fandt en ret anstændig en i dette Github-issue. Vi kan deaktivere adfærden direkte inde i Xcode – Capacitor giver os mulighed for at ændre de native projekter, som vi ønsker, og ændringerne vil ikke blive overskrevet af et magisk script! Derfor skal du generere en ny DisableBounce.m fil inde i Xcode og indsætte dette (vælg ja til at generere en bridging header): ios/App/App/DisableBounce.m

#import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @implementation UIScrollView (NoBounce) - (void)didMoveToWindow { [super didMoveToWindow]; self.bounces = NO; } @end

Og med den rettelse på plads er der ikke mere over-scroll på iOS! Det betyder, at folk ikke rigtig vil bemærke, at de faktisk bruger en webapp – hvilket de fleste af os allerede har gjort uden at bemærke det, højst sandsynligt!

Opsummering

Angular Material er et fantastisk bibliotek af komponenter til at bygge smukke Angular-apps, og vi har endnu ikke engang berørt alle de andre fantastiske komponenter, som du kunne bruge nu! Ved at bruge en sidenav kan vi også gøre vores side responsiv ret nemt, og senere tilføje Capacitor til blandingen for at få fordelen af at bygge en mobil app fra vores eksisterende kodebase. Hvis du har spørgsmål, så lad mig det vide, og du kan også tjekke en videoversion af denne tutorial nedenfor!

Ofte Stillede Spørgsmål (FAQ)

Hvordan bruger man Angular Material i HTML-kode?

Angular Material komponenter bruges primært inden for Angular-komponenters templates (.html filer), ikke direkte i ren HTML uden for Angular-konteksten. Du refererer til komponenterne ved hjælp af deres specifikke tags (f.eks. <mat-toolbar>, <button mat-button>) og anvender direktiver og databinding. For at bruge Angular Material i et projekt, skal det først importeres i din app.module.ts.

Hvordan installeres Angular Material?

Den mest almindelige metode er at bruge npm eller yarn. Kør ng add @angular/material i din projektmappe. Dette kommando installerer de nødvendige pakker og kører en opsætningsguide, der hjælper med at konfigurere projektet.

Hvorfor skal man bruge Angular?

Angular tilbyder finjusteret ydeevne, er bygget af Angular-teamet for problemfri integration med Angular-frameworket, er fuldt testet på tværs af moderne browsere, er temastisk (tilpasningsdygtig til branding), tilgængelig og internationaliseret for alle brugere.

Sammenligningstabel: Web vs. Native App med Capacitor

Ved at vælge Angular Material og Capacitor investerer du i en fremtidssikret udviklingsstrategi, der minimerer redundant arbejde og maksimerer din rækkevidde på tværs af platforme.

Hvis du vil læse andre artikler, der ligner Angular Material: Fra web til mobil, kan du besøge kategorien Teknologi.