Implement Service with Resolver

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will go through Practices to be followed for Implement Service with Resolver

If you're required to know,

• Options to Setup Angular Environment Click Here
• Practices for Your First Angular App Click Here
• To Implement Your First Module Click Here

I have covered things using Angular CLI in Windows.

In all command, request to use Angular CLI installed in App's Dev Dependencies.

In package.json

"scripts": {
    "ng": "ng",
    ...
},
"devDependencies": {
    ...
    "@angular/cli": "~10.0.6",
    ...
  },
...

Service

In Angular Application, we should not operate Fetch & Save Data within Component. For that purpose, we start using Service.

By Default, every developer thing of Angular Service is only to consume data via API. It is more than it.

Things to know

• A Piece of Code required to write multiple times has to be as Service.
• Each Service should have its use cases with purpose.
• The purpose of each Service may differ, but its Scope will be only within,
• Module.
• Application.
• Some General Purposes are,
• Logger.
• Authentication.
• Validator, etc.,

Things to do

• Every Service required to be Singleton Service.
• Each HTTP request is required to have a pipe with Observable to handle data.
• Each Function is required to have one Functionality.

Things Can do

• Join Multi HTTP Call to One via forJoin using the RxJS module for a single request.
• Handle Local or Session Storage via Service.

Create it,

• Always Add Service to Providers in Module based on its Scope.

In Any Terminal:

npm run ng generate service <folder>/<service-name>

Sample to Create Service:

PS C:\ngAngularPractices> npm run ng generate service hello/hello             

> ng-angular-practices@0.0.0 ng C:\ngAngularPractices
> ng "generate" "service" "hello/hello"

CREATE src/app/hello/hello.service.spec.ts (352 bytes)
CREATE src/app/hello/hello.service.ts (134 bytes)

import { HelloService } from './hello.service';
...
@NgModule({
 ...
 providers: [
    HelloService
  ]
...

Resolver

In Angular Application, every page requires some information to display it.

By Default, every developer call service to fetch some information to display in OnInit Function inside Component.

Most people forgot about Resolver itself. It helps our application to way better than you think.

Service & Resolver has to be like bread & butter to Solve Data dependencies on Page Load.

Things to know

• By default, we don't have the option to Create Resolver via Angular-CLI.
• Add Angular Snippets from Extension Marketplace. Recommended is "Angular Snippets (Version 9)" Click Here
• Each Resolver can have only one resolve method.

Things to do,

• The Only thing to do is Use it.
• Create Resolver and map with routes in Routing.
• Add Resolver to Providers in Module.

Create it,

To Create Snippets Commands:

a-resolver

The Below code will be generated,

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class YourResolver implements Resolve<any> {
    resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
        return ;
    }
}

import { HelloResolver } from './hello.resolver';
...
@NgModule({
 ...
 providers: [
    HelloResolver
  ]
...

You may also access to updated source on GitHub by Click Here

On-road head, we will discuss a lot of things.

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.