MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 01)

Reading Time: 4 minutes

අපි කලින් ලිපි කිහිපයකින්ම කතා කලා මේ MEAN Stack ගැන වෙන වෙනම Examples විදියට. මේ ලිපි කිහිපයෙන් කරන්න බලාපොරොත්තු වෙන්නේ මේ වෙන වෙනම කතා කරපු Applications ටික එකතු කරලා තනි Application එකක් හදා ගන්න. මේ Application එක Issue Tacking Application එකක්. ඒ කියන්නේ Users ලට Log වෙලා Issues post කරන්න පුළුවන් Application එකක්.

මේ Post එකෙන් කලින් post වලදි වගේ මේ MEAN Stack එක Install කරන විදිය මුල ඉදන් කියන්න යන්නේ නෑ. ඒ ගැන කලින් ලිපි වලින් අපි කතා කලා. ඒ ලිපි බැලුවේ නැත්නම් මේ Link වලින් මුලින්ම ඒ ටික බලලා ඉන්න.

• MongoDB
• Express
• Angular
• Node

මේ Project එකේ අන්තිමට මොන වගේ Application එකක් හැදෙයිද කියලා Idea එකක් ගන්න මේ Images ටික බලන්න.

හරි එහෙනම් අපි මුල ඉඳන් වැඩේ පටන් ගමු..

Installing Node.js & Angular CLI

මේ Project එකේ dependencies install කරගන්න ඉදිරියේදී පාවිච්චි කරන්නේ npm package එක. ඒක නිසා මුලින්ම Nodejs Install කරගන්න ඕන. දැනට Nodejs Install කරලා නැත්නම් මේ Link එකෙන් ගිහින් Download කරගන්න.

දැන් අපි ළඟ npm එක තියෙන නිසා අපිට පුළුවන් ලේසියෙන්ම අලුන් Angular project එකක් Initialize කරගන්න. ඒකට මේ Command එකෙන් Packages Install කරගන්න.

$ npm install -g @angular/cli

මේ command එකෙන් අපේ path variable එකක් හැදෙනවා ng commands වලට Response කරන්න පුළුවන් විදියට.

FRONT-END Design

මේ පළවෙනි ලිපියෙන් කරන්න යන්නේ Front-End එක Design කරගන්න එක. ඒකට මුලින්ම අලුතින් Project එකක් හදා ගන්න ඕන. ඒකට අපි මුලින් Install කරපු ng command එක දැන් භාවිතා කරන්න පුළුවන්. ඒකට මේ Command එක Use කරන්න. (Command Line එකේ)

ng new frontend

Project එක හදා ගන්නකොට අපෙන් අහනවා Routing Module එක දාන්න ඕනද කියලා. වැඩේ ලේසි වෙන්න ඒකට yes දෙන්න. අපි මේකට ගන්නේ CSS stylesheets. ඒකත් එතනින් Select කරගන්න.

අදාල Module ටික install වෙලා ඉවර වුණාම font-end කියලා අලුතින් Project එකක් හැදෙයි. ඒකෙ අපේ Font-end එකට අදාල Codes ටික තියා ගන්නේ. දැන් අලුතින් හැදුනු folder එක ඇතුලට ගිහින් ng serve කරලා අලුතින් හැදුනු project එක වැඩ කරනවද කියලා test කරලා බලන්න පුළුවන්.

cd fontend
ng serve -o

Adding Angular Material

Interfaces ලස්සනට Design කරගන්න පුළුවන් වෙන්න අපි මේ Project එකට භාවිතා කරනවා Angular Material CSS Library එක. ඒක මේ විදියට Project එකට Add කරගන්න පුළුවන්.

ng add @angular/material

මේ Package එක Install වෙනකොට ඔයාගෙන් අහයි මොන වගේ Theme එකක්ද ඕන Animation Use කරන්නද වගේ දේවල්. ඒවට yes select කරලා enter කරන්න.

Creating Components

දැන් අපි හදන්නේ අපිට ඕන කරන Components ටික හදා ගන්න. මේකට අපි ng command එක use කරනවා.

ng g c components/list 
ng g c components/create
ng g c components/edit

මේකෙන් components කියලා folder එකක් හැදිලා ඒක ඇතුලට මේ list, create, edit කියල components 3 create වෙනවා. අපි දැන් බලමු routings ටික හදා ගන්න.

Adding Routing

දැන් අපි කලාන් හදා ගත්ත RouterModule එකේ තමයි අපිට ඕන කරන routes ටික ලියා ගන්න ඕන.

src -> app -> app-routing.module.ts file එක open කරගෙන මේ Code එක routes කියන variable එක වෙනුවට replace කරගන්න.

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
]; 

මේ විදියට Code එක දාගෙන උඩින්ම අදාල Components Import කරගන්නත් ඕන වෙනවා.

මේ ටික කර ගත්තාම ඔයාගෙ AppRoutingModule එක මේ විදියට තියෙන්න ඕන.

 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateComponent } from './components/create/create.component'
import { EditComponent } from './components/edit/edit.component'
import { ListComponent } from './components/list/list.component'

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
];

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

දැන් අපි කරන්න යන්නේ හැම page එකේම Display වෙන විදියට පොඩි Menu tool එකක් දාගන්න. ඒකට මේ Code එක app.component.html file එකේ Paste කරගන්න.

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div> 

අපි මේ Layout එකට <mat-toolbar> කියන tag එක යොදා ගන්න හින්දා මුලින්ම ඒක import කරගන්න ඕන. ඒකට මේ Import command එක app.module.ts එකේ දාන්න

 
import { MatToolbarModule } from '@angular/material'; 

ඒ වගේම ඒකෙ Import Array එකටත් මේක දාගන්න ඕන.

 
imports: [
    ...
    MatToolbarModule
 ], 

අන්තිමට File එකේ Content එක මේ වගේ තියෙන්න ඕන

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ListComponent } from './components/list/list.component';
import { CreateComponent } from './components/create/create.component';
import { EditComponent } from './components/edit/edit.component';
import { MatToolbarModule } from '@angular/material'; 

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    CreateComponent,
    EditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div>

<router-outlet></router-outlet>

මේක කලාම අපේ Basic Frontend part එක ඉවරයි. ඊළඟ Part එක තමයි අපේ Application එකේ BackEnd එක Design කරගන්න විදිය. ඊළඟ ලිපියෙන් ඒ ගැන කතා කරමු. මේකෙ Installation වල හරි Code වල හරි මොකක් හරි ප්‍රශ්ණයක් ආවොත් Comment එකක් දාන්න.