Start with Angular Modules
Tags: angular, javascript, codenewbie
Published: 2020-08-03 19:39:28

I am back with Angular and today I was reading about the **Angular Modules** it help us to encapsulate and share our code between apps.

If you have been working with java or .net is like a library where you can keep some functionality private or public.

Angular modules help to share or encapsulate, business logic, components, pipes, services and help us to keep our app.module light and split our code into areas with his responsibility.

### How to modularize an Angular app.

My example is simple, my app contains 3 main areas when I said areas mean features or modules of my app, every module will have his own scope and keep it private but also export some component or feature.

- Users: list and create users
- Ads: list all ads and expose a top ad.
- Welcome: main area.

A normal app, we create this list of components and everyone will be registered into the app.module and it works but the app.module will have a lot of responsibility.

But using Angular modules we can split our code and it makes it easy to share or share it between other apps.

### Creating my app
The Angular-cli helps us to generate components, services, pipes, and also modules.

The first step is to create the app and the welcome component, it will be registered into the app.module.

```bash
ng new banking
```
### The welcome component
 The components are generated with angular cli using *ng g c mycomponent*, the cli understand *g* generate and *c* component.
```bash
ng g c welcome
CREATE src/app/welcome/welcome.component.html (22 bytes)
CREATE src/app/welcome/welcome.component.spec.ts (635 bytes)
CREATE src/app/welcome/welcome.component.ts (280 bytes)
CREATE src/app/welcome/welcome.component.scss (0 bytes)
UPDATE src/app/app.module.ts (400 bytes)
```
### App Module
The app.module only have the welcome component and router module with the route to him.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';

import {RouterModule} from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '**', component: WelcomeComponent}
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
The app.module only takes care of the welcome and his routing anything else.

Every new module has full control over his scope and context like routing, services, pipes, or components.


### Users Module.
The user module has 2 components the user-list and user-create, the user module has ownership about his routing

Using angular-cli *g* for generate, *m* module, *user/user --flat* set the directory and --flat to skip create an extra directory for the module and *m* the module registers.

```bash
ng g m users/user --flat -m app
ng g c users/user-list -m user
ng g c users/user-detail -m user
```

The user.module only imports the Router module for his routing navigation but doesn't need to export anything else.

```javascript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list/user-list.component';
import {RouterModule} from '@angular/router';
import { UserDetailComponent } from './user-detail/user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'users', component: UserListComponent},
      { path: 'users/:id', component: UserDetailComponent}
    ])
  ]
})
export class UsersModule { }
```

### Ads Module
Ads module encapsulates everything about ads, a bit similar to user.module but ads. the module exposes the adstop component to be used in any app.

```bash
ng g m ads/ads --flat -m app
ng g c ads/ads-list -m ads
ng g c ads/ads-top -m ads
```
The ads module has his routing and exports the AdsTopComponent to be used for any app with the AdsModule.

```javascript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdsListComponent } from './ads-list/ads-list.component';
import { AdsTopComponent } from './ads-top/ads-top.component';
import {RouterModule} from '@angular/router';

@NgModule({
  declarations: [AdsListComponent, AdsTopComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'adlist', component: AdsListComponent}
    ])
  ],
  exports: [ AdsTopComponent]
})
export class AdsModule { }
```
### How looks the app.module 
The app.module doesn't need to have anything about every component or how his routing works just import these modules and our code looks clean and split.

The app.module only need import the Ads and User modules and get access to every functionality provide by them.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router';
import { AdsModule } from './ads/ads.module';
import { UsersModule } from './users/users.module';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  imports: [BrowserModule,  AdsModule, UsersModule, RouterModule.forRoot([
    { path: "**", component: WelcomeComponent }
  ])],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

If someone needs to work with user or ad modules, only need to go or edit his module without impact any other modules.

Well, Hopefully, that will give you a bit of a head-start on Angular Modules.
  
Thanks!

Photo by <a href="https://unsplash.com/@markkoenig?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mark König</a> on <a href="https://unsplash.com/s/photos/modules?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>