NgModule dan Optimization – 1

by

Karena Angular tidak secara otomatis melakukan scanning aplikasi yang Anda buat. Maka perlu satu cara untuk memberitahu Angular, fitur-fitur apa saja yang dimiliki oleh aplikasi. Hal ini dideklarasikan melalui NgModule.

Setiap aplikasi Angular memerlukan minimal satu App Module. (Kita dapat melakukan split menjadi lebih dari satu module).

Mari kita analisis project buku resep, NgModule apa saja yang kita miliki. Jika Anda periksa, terdapat 2 yaitu pada app.module.ts dan pada app-routing.module.ts

app.module.ts

Pada app.module.ts kita melakukan beberapa hal

  • Mendeklarasikan component dan directive yang digunakan dalam aplikasi (lihat declarations array).
  • Import module lainnya agar dapat digunakan dalam aplikasi. (lihat imports array).
  • Mendefinisikan service yang digunakan. (lihat providers array). Perhatian, selain melalui app.module.ts, Anda bisa mendefinisikan service melalui decorator @Injectable (lihat contoh data-storage.service.ts).
  • Mendifinsikan starting point dari aplikasi (lihat bootstrap array). Perhatian, kita bisa menambahkan lebih dari satu component bootstrap, namun tidak disarankan, karena akan sulit untuk memanage state diantara component.
import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule } from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropDownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipeHomeComponent } from './recipes/recipe-home/recipe-home.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
import { RecipeService } from './recipes/recipe.service';
import { AuthComponent } from './auth/auth.component'; 
import { LoadingSpinnerComponent } from './shared/loading-spinner/loading-spinner.component';
import { AlertComponent } from './shared/alert/alert.component';
import { PlaceholderDirective } from './shared/placeholder/placeholder.directive';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropDownDirective,
    RecipeHomeComponent,
    RecipeEditComponent,
    AuthComponent,
    LoadingSpinnerComponent,
    AlertComponent,
    PlaceholderDirective 
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [ShoppingListService, RecipeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

app-routing.module.ts adalah module untuk mengatur routing dari aplikasi. Kita bisa mendeklarasikan routing didalam app.module.ts, dipilih menggunakan file berbeda karena jika Aplikasi Anda complex, isi dari code akan cukup panjang.

Routing module ini akan melakukan import routerModule milik Angular dan kemudian melakukan export agar bisa digunakan oleh aplikasi. Perhatian, setiap module dalam angular berdiri sendiri, jadi perlu dilakukan export agar bisa digunakan oleh module lainnya.

Lihat pada app.module.ts, dimana modul AppRoutingModule diimport agar bisa digunakan.

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { AuthComponent } from "./auth/auth.component";
import { RecipeDetailComponent } from "./recipes/recipe-detail/recipe-detail.component";
import { RecipeEditComponent } from "./recipes/recipe-edit/recipe-edit.component";
import { RecipeHomeComponent } from "./recipes/recipe-home/recipe-home.component";
import { RecipesComponent } from "./recipes/recipes.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";
import { RecipesResolverService } from "./recipes/recipes-resolver.service";
import { AuthGuardService } from "./auth/auth-guard.service";

const appRoutes: Routes = [
    {path: '', redirectTo:'/recipes', pathMatch: 'full'},
    {path: 'recipes', component: RecipesComponent, canActivate: [AuthGuardService] , children:[  
        {path: '', component: RecipeHomeComponent},
        {path: 'new', component: RecipeEditComponent},
        {path: ':id', component: RecipeDetailComponent, resolve: [RecipesResolverService]},
        {path: ':id/edit', component: RecipeEditComponent, resolve: [RecipesResolverService]}
    ]},
    {path: 'shopping-list', component: ShoppingListComponent},
    {path: 'auth', component: AuthComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{
}

Sampai sejauh ini module diatas berjalan dengan baik. Jika Aplikasi Anda lebih kompleks, memisahkan module menjadi lebih kecil dapat meningkatkan performa, yang akan kita bahas pada modul berikutnya.

Sharing is caring:

Leave a Comment