Sådan tilføjer du uendelig rulning til din Angular-app

For at begynde at bygge appen skal vi starte med at installere Angular CLI ved at køre npm i @angular/cli. Når vi har installeret det, kører vi ng new image-gallery for at oprette en ny Angular til vores billedgalleri-app. Vi opretter også et Flux-lager til at gemme menuens tilstand.

Næst installerer vi bibliotekerne til appen. Vi kører npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store for at installere de biblioteker, vi har brug for til at vise billederne og vise billeddiasshowet. Derefter kører vi ng add @ngrx/store for at tilføje koden.

Næste gang tilføjer vi skeletkode til den kode, vi vil skrive. Vi kører følgende kommandoer for at gøre dette:

ng g component homePage
ng g component randomSlideshowPage
ng g component topBar
ng g class httpReqInterceptor
ng g service photo

Dette vil oprette de komponenter, der bruges til visning. httpReqInterceptor-klassen bruges til at vedhæfte API-nøglen til forespørgselshovedet i hver forespørgsel. Photo service er der, hvor koden til at foretage opkald til Pexels API’et vil ligge.

I environment.ts sætter vi til at lade os importere din API-nøgle til andre filer.:

export const environment = {
production: false,
pexelsApiKey: 'your pexels api key'
};

I http-req-interceptor.ts, sætter vi:

Dette vedhæfter vores token til Authorization-anmodningshovedet i hver anmodning med denne blok:

let modifiedReq = req.clone({});
modifiedReq = modifiedReq.clone({
setHeaders: {
'Authorization': environment.pexelsApiKey
}
});

I photo.service.ts, sætter vi:

Dette lader os foretage anmodningerne til Pexels API. Vi har brugt slutpunktet for kuraterede fotos og søgning med paginering i vores app.

Næst i home-page.component.ts sætter vi:

Det er her, vi henter billederne fra slutpunktet for kuraterede fotos, der ligger her, for at få billed-URL’erne ved at kalde map på photos-feltet i svaret.

Hvis der indtastes et søgeudtryk, bruger vi slutpunktet for søgning af fotos her og gør det samme med map-funktionen. Vi har uendelig rulning, så når brugeren ruller til bunden af siden, øger vi sidetallet og bliver ved med at tilføje flere billed-URL’er til vores array.

I home-page.component.html sætter vi:

Dette viser søgeformularen og indpakker vores billedgitter i en uendelig rulning div, så den indlæser nye billeder, når brugeren ruller ned.

infiniteScrollDistance er procentdelen af sidens position fra bunden af siden, så 2 betyder, at uendelig rulning udløses, når vi har rullet gennem 98 % af det aktuelle indhold på siden.

infiniteScrollThrottle er antallet af millisekunder, indtil uendelig rulning udløses, efter at brugeren holder op med at rulle. scrolled udløses, når brugeren scroller nedad på siden. Disse er alle valgfrie og kan justeres, som du ønsker det.

I home-page.component.scss tilføjer vi:

.tile-image {
width: 100%;
height: auto;
}

Dette får billederne til at fylde gitterboksen.

I random-slideshow-page.component.ts sætter vi:

Det er her, vi henter de tilfældige billeder fra slutpunktet for kuraterede billeder.

I random-photos-page.component.html tilføjer vi:

Det viser diasshowet med billeder.

Næst laver vi en fil kaldet menu-reducer.ts og tilføjer følgende for at gemme menutilstanden:

I reducers/index.ts sætter vi:

import { menuReducer } from './menu-reducer';export const reducers = {
menu: menuReducer,
};

Dette gør det muligt for StoreModule i @ngrx/store at bruge menuforkorteren til lagring af tilstanden.

I app.component.ts indsætter vi:

Dette lukker automatisk menuen i venstre side, når du skifter side, og hvis du ikke klikker på menuknappen. Vi får menutilstanden i butikken, og hvis menuen skal lukkes ved navigation eller ved at klikke uden for menuen, slår vi menuen fra og indstiller tilstanden i butikken.

I top-bar.component.ts sætter vi:

Det giver os mulighed for at slå menuen fra og gemme tilstanden i butikken.

I app.component.html har vi:

Dette viser menuen i venstre side til navigation, og router-outlet lader brugerne se vores sider, når de klikker på linkene ovenfor eller skriver URL’en direkte.

I app.component.scss tilføjer vi:

#content {
padding: 20px;
min-height: 130vh;
}ul {
list-style-type: none;
margin: 0;
li {
padding: 20px 5px;
}
}

Dette tilføjer noget padding og fjerner margenerne på siderne.

Sidst i app.module.ts sætter vi:

Dette indeholder alle bibliotekerne, HTTP-interceptoren og de tjenester, vi skal bruge for at få appen til at fungere.

Endeligt har vi følgende i den færdige app: