Implement Your First Module

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 Your First Module.

If you're required to know,

• Options to Setup Angular Environment Click Here
• Practices for Your First Angular App 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",
    ...
  },
...

Things to know On Module

• By Default App Module is Entry Point for every App.
• Each Angular App is required to have @Core & @Shared Module Apart from App Module.
• In @Core Module
• Should Include All Common Services, Interface, Enum, etc.,
• Some Services,
  • Authentication
  • Validator
  • Logger, etc.,
• Should not include any UI related stuff.
• In @Shared Module
• Should Include All Common Component, Directive, Pipe, etc.,
• Some Component,
  • Header
  • Footer
  • Pop-Up, etc.,

Things to consider while creating our Module

• Have an Appropriate Name & Same Name for Module & its Component, Service, Resolver & etc.,
• Add Routing By Default using --routing in Ng Generate command except for @Core & @Shared Module.
• Required to have everything inside a single folder.
• Only include modules & dependency required to it.
• Each Module should have one main Component & Sub-Components (if necessary).
• Add Service in Module level, if it's used by only by that Module else Add to the @Core Module.
• Add & Use Resolver, if Page Required somethings to display on Load.

For Create Angular Module,

In Any Terminal:

npm run ng generate module <module-name> -- --routing

Sample to Create Module:

PS C:\ngAngularPractices> npm run ng generate module hello -- --routing

> ng-angular-practices@0.0.0 ng C:\ngAngularPractices
> ng "generate" "module" "hello" "--routing"

CREATE src/app/hello/hello-routing.module.ts (248 bytes)
CREATE src/app/hello/hello.module.ts (276 bytes)

Create an Angular Component inside Module,

Things to do

• Always link Module while creating Component.
• Use #region to Sections the Code.
• Use ngOnInit to Assign Values for Variables.

In Any Terminal:

npm run ng generate component <comp-name> -- -m <module-name>

Sample to Create Component:

PS C:\ngAngularPractices> npm run ng generate component hello -- -m hello       

> ng-angular-practices@0.0.0 ng C:\ngAngularPractices
> ng "generate" "component" "hello" "-m" "hello"

CREATE src/app/hello/hello.component.html (20 bytes)
CREATE src/app/hello/hello.component.spec.ts (621 bytes)
CREATE src/app/hello/hello.component.ts (272 bytes)     
CREATE src/app/hello/hello.component.scss (0 bytes)     
UPDATE src/app/hello/hello.module.ts (342 bytes)   

...
#region Variables

Valid: boolean;

#endregion

ngOnInit() {
  this.Valid = true;
}
...

Create an Angular Service inside Module,

Things to do,

• Always Add Service to Providers in Module.

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
  ]
...

Create an Angular Resolver inside Module,

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

Things to do,

• Always Add Resolver to Providers in Module.

To Create Snippets Commands:

a-resolver

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 source on GitHub by Click Here

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

In the Next Post, we will see more depth in Service & Resolver.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.