Het gebruik van Resolvers in je Angular applicatie

Oscar KooiJul 26, 2020
Een betere project structuur doormiddel van een resolver service.

In dit artikel wil ik een voorbeeld geven waar het gebruik van Angular resolvers juist toegepast kan worden. Dit is een methode welke geïmplementeerd kan worden in de Angular router. Laten we een voorbeeld geven voor een lijstje met blogposten, er vanuit gaande dat je API client in een service zit als volgt;

export class ApiService {
  	
  	public path = environment.apiEndpoints;
	constructor(private http: HttpClient) {}
	getBlogPosten() {
    	return this.http.get<BlogPostModel[]>(this.path + '/blogpost');
	}
	
}

Nu kunnen we kiezen om data per component op te halen, dit houd in dat we in elk component de ApiService gaan inladen. Dit heeft enkele nadelen;

  • Veel al meer regels code, dus een onoverzichtelijke code base.
  • Slecht te onderhouden.
  • Inefficiënt en fout gevoelig.

Zeker als we meerde API requesten per component zouden uitvoeren is dit iets van je niet wilt, nu zou je dit met een ForkJoin van de RXJS library kunnen oplossen. Maar daar gaat deze blog niet over. Best practice bouwen een resolver service. Met een resolver service geven we de data mee in onze Angular router. 

Maak een service. 

ng g s services/blogpostResolver

Hierna doen we het volgende in onze service. 

export class BlogpostResolverService {

	constructor(private api: ApiService) {}
	resolve(): 	Observable<BlogPostModel[]> {
    return this.api.getBlogPosten();
  }
}

We geven nu pas onze data terug zodra deze API call voltooid is. 

En nu kunnen we dit in onze Angular router gebruiken. 

const routes: Routes = {
	{
    	path: '',
    	component: HomeComponent,
    	resolve: {
      		posten: BlogpostResolverService
      		}
  	},
}

Wat we nu doen is eerste onze data inladen en daarna pas ons component. Voordelen;

  • ‘posten’ is nu altijd beschikbaar in de scope. Include je componenten in HomeComponent hoeven we niet nogmaals de data op te halen.
  • Mochten we dezelfde data ergens anders in onze applicatie nodig hebben, kunnen we dit meteen inladen.
  • Overzichtelijke hoe onze applicatie structuur is opgebouwd.

En op onze HomeComponent, of component dat we in deze specifieke route gebruiken kunnen we data als volgt gebruiken. 

export class BlogSnippetComponent implements OnInit {
  	public posten: BlogPostModel[];
  	constructor(private route: ActivatedRoute) {
    	this.posten = new Array<BlogPostModel>();
   	}

  	ngOnInit() {
		this.posten = this.route.snapshot.data.posten;  
	}
	  
}

Conclusie

Een Resolver service is best practice als je een API client gebruikt. Code wordt beter te lezen en eventuele aanpassingen kunnen sneller worden gemaakt. Daarnaast gaan we efficiënter om met onze resources etc.