අපි කලින් ලිපි කිහිපයකින්ම කතා කලා මේ 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 එකක් දාන්න.

The post MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 01) appeared first on The SIGMA.

මුලින්ම ආයුබෝවන් කියනවා යාලුවෝ හැමෝටම..ගොඩ කාලෙකට පස්සේ ඔන්න මං ඇරගෙන ආවා අලුත්ම පාඩම් මාලාවක්..thesigma blog අඩවියත් සමග නිරන්තරයෙන් රැදී සිටි යාලුවෝ නම් දන්නවා අපි කලින් අපි කලින් පාඩමේ කතා කලා MEAN stack වල Database system එක වන mongoDB ගැන..ඒ පාඩම් ටික කලින් මඟ හැරුන කෙනෙක් ඉන්නවනම් මෙතනින් ගිහින් බලන්න පුලුවන්..අද මම පටන් ගන්න යන්නේ ඒ පාඩම් මාලාවේ දෙවන දිගහැරුමයි..ඒ තමයි Angular .

ඇත්තටම කියනවනම් Angular කියන්නේ ඉතාම කෙටි කාලෙකින් මෑත කාලීනව ගොඩක් ජනප්‍රිය වුන javascript front end framework(client side frame work) එකක්.2016 September 14 තමයි මුලින්ම Angular හදුන්වා දෙන්නේ..ඊටපස්සේ 2017 march 23 දී Angular version 4 ද, 2017 november 1 දී Angular version 5 ද, 2018 May 4 දී Angular version 6 ද හදුන්වා දෙනවා ..මං මේ post එක ලියන මේ මොහොතේ තියන latest ම version එක තමයි 2018 October මාසයේ හදුන්වා දුන් Angular version 7..පේනවනේ නේද මේ frame work එක දියණු වෙලා තියන ඉක්මන😃😃😃..ඇත්තටම Angular හදුන්වා දුන්නේ google වුනාට microsoft ලාගේ typescript language එකත් මේකේ තියනවා..ඒ ගැන අපි පස්සේ හෙමීට බලමුකෝ..😀😀

ඇත්තටම මොකද්ද මේ Angular වල තියෙන විශේෂත්වය ..ඒ තමයි එක page එකක ඉදලා තවත් page එකකට යද්දි url එකට අදාලව component වෙනස් වීමක් පමණයි වෙන්නේ..මුලු page එකම refresh වීමක් වෙන්නෑ…ඔන්න ඔය නිසා අපිට පුලුවන් අපේ app එකේ efficiency එක වැඩි කර ගන්න..ඔන්න ඕක තමයි Angular frame work එකේ තියන ප්‍රධානම විශේෂත්වය..හරි එහෙනන් Angular ගැන පොඩි හෝ idea එකක් ගන්න ඇති කියලා හිතනවා..අපි දැන් බලමු Angular කොහොමද install කරගන්නේ කියලා..

මේ සදහා අපිට මුලින්ම nodejs සහ npm ( Node Package Manager ) install කර ගන්න වෙනවා..සාමානයයෙන් nodejs intall කරනකොට npm auto ම install වෙනවා..පහල තියන url එකෙන් ගිහින් ඔයාගේ machine එකට අදාල nodejs version එක download කරලා install කර ගන්න පුලුවන්..

ඔන්න ඔය විදියට install කර ගත්ත nodejs version එක අපිට බලන්න පුලුවන් command prompt එකේ ng -v ලෙස type කරලා..npm -v ලෙස type කරලා npm version එක බලන්න පුලුවන්.ඔන්න ඔය ටික තමයි prerequisites වෙන්නේ Angular සමග වැඩ කරද්දි.

ඔන්න ඔය prerequisites satisfy කලාම අපිට පුලුවන් අලුත් Angular project එකක් start කරන්න.මේ සදහා ng new <project_name> කියන command එක පාවිච්චි කරන්න පුලුවන්..හරි මම Desktop එකේ අලුත් project එකක් හදනවා angular කියලා..ඊට අදාල command ටික මෙන්න මේ විදියට run කරන්න පුලුවන්..

ඊටපස්සේ මෙන්න මේ වගේ files ගොඩක් Download වෙනවා..

හරි එහෙනම් අපි දැන් අලුත් project එකක් start කලා angular කියලා..අපි දැන් බලමු හදා ගත්ත project එක run කරන්නේ කොහොමද කියලා..ගොඩක් frame work වල වගේම Angular වලත් තියනවා එයාටම කියලා server එකක්..project එක run කරනවානම් මුලින්ම අපි ng serve හරි npm start හරි ගහලා server එක start කරගෙන ඉන්න ඕනි.ඊට පස්සේ ng -open හරි ng -o හරි ගැහුවහම automatically ඔයාලගේ browser එකේ localhost:4200 කියන port එකේ app එක run වෙනවා..ඔන්න ඔය විදියට app එක run කලාම මෙන්න මේ වගේ view එකක් අපිට බලා ගන්න පුලුවන්.

හරි අදට ඇති නේද😃..පාඩම නම් ටිකක් දිග වුනා තමයි , නමුත් අපි දැන ගත්තා මොකද්ද Angular කියන්නේ, ඇයි Angular විශේෂ වෙනේ ,කොහාමද Angular project එකක් හදා ගන්නේ හා කොහොමද හදා ගත්ත Angular project එක run කරන්නේ කියන එක ගැන..මීලඟ පාඩමේදී අපි බලමු Angular වල folder structure එක සහ index page එක කොහොමද render වුනේ කියන එක ගැන…අදට පාඩම හමාර කරන්නයි යන්නේ..post එක ගැන ඔයාලගේ අදහස comment එකක් දාන්නත් අමතක කරන්න එපා..මීලඟ පාඩමෙන් හමුවනතුරු ඔබට සුභ දවසක්!😊

The post Angular7 මුල සිට ඉගෙන ගනිමු-1 කොටස appeared first on The SIGMA.