Hur du lägger till oändlig rullning i din Angular-app

För att börja bygga appen börjar vi med att installera Angular CLI genom att köra npm i @angular/cli. När vi har installerat det kör vi ng new image-gallery för att skapa en ny Angular för vår bildgalleriapp. Vi skapar också en Flux-butik för att lagra menyns tillstånd.

Nästan installerar vi biblioteken för appen. Vi kör npm i @angular/cdk @angular/material ng-simple-slideshow ngx-infinite-scroll @ngrx/store för att installera de bibliotek vi behöver för att visa bilderna och visa bildspelet. Sedan kör vi ng add @ngrx/store för att lägga till koden.

Nästan lägger vi till skelettkod för den kod vi kommer att skriva. Vi kör följande kommandon för att göra detta:

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

Detta kommer att skapa de komponenter som används för visning. Klassen httpReqInterceptor används för att fästa API-nyckeln i begäranhuvudet för varje begäran. Photo service är där koden för att göra anrop till Pexels API kommer att finnas.

I environment.ts sätter vi för att låta oss importera din API-nyckel till andra filer.:

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

I http-req-interceptor.ts lägger vi till:

Detta fäster vår token till Authorizationförfrågningshuvudet för varje förfrågan med det här blocket:

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

I photo.service.ts sätter vi:

Detta låter oss göra förfrågningarna till Pexels API. Vi använde slutpunkten curated photos och search med paginering i vår app.

Nästan i home-page.component.ts lägger vi in:

Det är här vi hämtar bilderna från slutpunkten curated photos, som ligger här, för att få fram bild-URL:erna genom att anropa map på photos-fältet i svaret.

Om ett sökbegrepp skrivs in, kommer vi att använda slutpunkten search photos här och göra samma sak med funktionen map. Vi har oändlig rullning, så när användaren rullar ner till sidans botten ökar vi sidnumret och fortsätter att lägga till fler bild-URL:er till vår matris.

I home-page.component.html lägger vi in:

Detta visar sökformuläret och sveper in vårt bildgalleri i en oändlig rullning div så att det laddar in nya bilder när användaren rullar ner.

infiniteScrollDistance är den procentuella andelen av sidans position från sidans botten, så 2 innebär att oändlig rullning utlöses när vi har rullat igenom 98 % av det aktuella innehållet på sidan.

infiniteScrollThrottle är antalet millisekunder tills oändlig rullning utlöses efter att användaren har slutat att scrolla. scrolled utlöses när användaren rullar nedåt på sidan. Dessa är alla valfria och kan justeras som du vill.

I home-page.component.scss lägger vi till:

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

Detta gör att bilderna fyller gridrutan.

I random-slideshow-page.component.ts lägger vi till:

Det är här vi hämtar de slumpmässiga bilderna från slutpunkten för kurerade bilder.

I random-photos-page.component.html lägger vi till:

Detta visar bildspelet med bilder.

Nästan gör vi en fil som heter menu-reducer.ts och lägger till följande för att lagra menystatusen:

I reducers/index.ts lägger vi till:

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

Detta gör det möjligt för StoreModule i @ngrx/store att använda menyreduceraren för att lagra statusen.

I app.component.ts lägger vi till:

Detta stänger automatiskt vänstermenyn när man byter sida och om man inte klickar på menyknappen. Vi hämtar menytillståndet i butiken, och om menyn behöver stängas genom navigering eller genom att klicka utanför menyn, stänger vi av menyn och anger tillståndet i butiken.

I top-bar.component.ts lägger vi till:

Detta gör att vi kan stänga menyn och lagra tillståndet i butiken.

I app.component.html har vi:

Detta visar vänstermenyn för navigering och router-outlet låter användarna se våra sidor när de klickar på länkarna ovan eller skriver webbadressen direkt.

I app.component.scss lägger vi till:

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

Detta lägger till lite utfyllnad och tar bort marginalerna på sidorna.

Slutligt i app.module.ts lägger vi in:

Detta innehåller alla bibliotek, HTTP-interceptorn och de tjänster vi behöver för att appen ska fungera.

Enligt har vi följande i den färdiga appen: