අපි කලින් ලිපි 2න් කතා කලා fontend එක සහ backend එක Design කරගන්න විදිය. මේ ලිපියෙන් කතා කරන්නේ මේ වෙන වෙනම හදා ගත්ත fontend එකයි Backend එකයි එකට Connect කරගන්නේ කොහොමද කියලා. කලින් ලිපි 2 බැලුවේ නැත්නම් මෙතනින් බලන්න

Part 01
part 02

මුලින්ම frontend කියන folder එක ඇතුලට ගිහින් එතනින් command prompt එකක් open කරන්න. දැන් අපි කරන්න හදන්නේ font එකේ පොඩි වෙනස්කම් කිහිපයක් කරන්න.

cd frontend

දැන් අපි අලුතින් Issue Service එකක් හදා ගන්න ඕන. ඒ service එක හරහා තමයි අපි Backend එකෙන් අපිට ඕන Data ගන්න සහ දාන්න යන්නේ. මුලින්ම ඒක මේ විදියට Generate කරගමු.

ng g s services/Issue

මේ විදියට issue service එක generate කරගත්තාම services කියලා folder එකක් ඇතුලේ issue.service.ts කියන file එක generate වෙනවා. දැන් අපි මේ issue service එක app.module.ts එකට import කරගන්න ඕන.

 import { IssueService } from './services/issue.service'; 

ඒ වගේම providers array එක ඇතුලටත් මේක දාගන්න.

providers: [IssueService]

මේකෙත් මේ issue Service එක අපේ components ඇතුලේ use කරන්න පුළුවන් වෙනවා.

Implementing IssueService

කලින් කිවුවා වගේ මේ issue Service එකේ අරමුණ තමයි backend එකත් එක්ක ගනුදෙනු කිරීම. ඒකට අපි http requests යොදා ගන්නවා. ඒක නිසා මේ විදියට මුලින්ම issue.service.ts file එකට httpClient එක import කරගන්න.

import { HttpClient } from '@angular/common/http';

ඒ වගේම Constructor එකට මේ http service එක inject කරගන්න මේ විදියට

constructor(private http: HttpClient) {}

Retrieving Issues

අපි දැන් බලමු කොහොමද Database එකේ save වෙලා තියෙන issue එකක් හෝ කිහිපයක් Backend එක හරහා Retrieve කරන්නේ කොහොමද කියලා.

මේකෙ වර්ග 2ක් තියෙනවා. ඒ කියන්නේ අපි issue ID එකක් දුන්නාම අදාල issue එක ගන්න එකයි තියෙන ඔක්කොම Issues ටික ගන්න එකයි. මේ method 2 හදා ගන්න විදිය බලමු.

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

 @Injectable({
   providedIn: 'root'
 })

 export class IssueService {
   uri = 'http://localhost:4000/';
   constructor(private http: HttpClient) {
   }
   getIssues() {
     return this.http.get(${this.uri}/issues);
   }
   getIssueById(id) {
     return this.http.get(${this.uri}/issues/${id});
   }
 }

මේකෙදි අපි කරන්නේ http://localhost:4000/issues කියන backend එක response කරන url එකට get request එකක් යවලා json object එකක් විදියට result එකක් ගන්නවා. getIssueById method එකෙන් කරන්නෙත් ඒ වගේම issue id එක දුන්නම අදාල issue එක josn object එකක් විදියට එළියට ගන්නවා.

Adding Issues

මේකෙදි අපි post request එකක් විදියට අපිට add කරන්න ඕන issue එකේ Data ටික යවන්න ඕන. ඒක කරන්නේ මේ විදියට..

   addIssue(title, responsible, description, severity) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity
     };
     return this.http.post(${this.uri}/issues/add, issue);
   }

ඔයාලට පේනවා ඇති මෙතනදි අපි post request එකත් එක්ක issue කියලා අපි අලුතින් හදා ගත්ත object එකත් යවනවා. මේ request එක යැවුවට පස්සේ එතනින් එහාට Backend එක තමයි Database operations handle කරගන්නේ. මතක ඇති අපි කලින් මේ methods ටික backend එකේ implement කලා.

Updating Issues

කලින් කරපු addIssue එක වගේම post request එකක් යවනවා මේකෙත් Update වෙන්න ඕන dataත් එක්ක.

updateIssue(id, title, responsible, description, severity, status) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity,
       status: status
     };
     return this.http.post(${this.uri}/issues/update/${id}, issue);
   }

Deleting Issues

මේකෙදි අපි කරන්නේ අපිට Delete කරන්න ඕන issue එකේ id එක get request එකක් විදියට යනවනවා backend එකට

deleteIssue(id) {
   return this.http.get(${this.uri}/issues/delete/${id});
}

මේ පහලින් තියෙන්නේ සම්පූර්ණ issue service file එකේ තියෙන code එක.

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

 @Injectable({
   providedIn: 'root'
 })

 export class IssueService {
   uri = 'http://localhost:4000/';
   constructor(private http: HttpClient) {
   }
   addIssue(title, responsible, description, severity) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity
     };
     return this.http.post(${this.uri}/issues/add, issue);
   }
   getIssues() {
     return this.http.get(${this.uri}/issues);
   }
   getIssueById(id) {
     return this.http.get(${this.uri}/issues/${id});
   }
   updateIssue(id, title, responsible, description, severity, status) {
     const issue = {
       title: title,
       responsible: responsible,
       description: description,
       severity: severity,
       status: status
     };
     return this.http.post(${this.uri}/issues/update/${id}, issue);
   }
   deleteIssue(id) {
     return this.http.get(${this.uri}/issues/delete/${id});
   }
 }

Injecting The Service

දැන් කරන්න තියෙන්නේ අපි හදපු issue Service එක inject කරගන්න එක. ඒකට අපි හදපු හැම component එකේම (list.component.ts, edit.component.ts and create.component.ts) මේ විදියට දාගෙන යන්න.

import { IssueService } from '../../services/issue.service';

ඒ වගේම මේ විදියට dependency injection එකක් කරන්නත් ඕන

 constructor(private issueService: IssueService, private router: Router) { }

හැම component එකේම මේ විදියට හදා ගත්තාම අපේ components Design කරගන්න එකේ මූලික පියවර ඉවරයි.

අපි මේ ලිපියෙදි ඉගෙන ගත්තේ angular service එකක් හරහා backend එකත් එක්ක fontend එක connect කරන්නේ කොහොමද කියලා. ඊළඟ ලිපියෙන් අපි කතා කරමු front-end එක complete කරගන්නේ කොහොමද කියලා. මේ දක්වා මොනවා හරි අවුලක් තිබුණොත් comment එකක් දාන්න.

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

අපි කලින් ලිපියෙන් කතා කලා කොහොමද FrontEnd එක angular වලින් Design කරගන්නේ කියලා. ඇත්තටම අපි නිකත් Structure එකක් විතරයිනෙ හැදුවේ. දැනට ඒ ඇති. මේ ලිපියෙන් කතා කරන්නේ Node වලින් Backend එක හදා ගන්න විදිය ගැන. බලමු හදා ගන්නේ කොහොමද කියලා.

මුලින්ම අපි කලින් fontEnd කියලා අලුත් Project එකක් හැදුව තැනම අලුත් folder එකක් හදනවා Backend කියලා මේ විදියට.

mkdir backend 

දැන් මම ඉන්න Directory එක වෙනස් කර ගන්නවා අලුතින් හදපු Folder එකට

cd backend 

දැන් අලුත් project එකක් initialise කරගන්නවා මේ විදියට npm command එකෙන්.

 npm init -y 

අපේ project එකේ ES6 Features යොද ගන්න නම් අපිට Babel compiler එක use කරන්න වෙනවා. ඒකට babel-cli එක සහ babel-preset-env එක මේ විදියට install කරගන්න පුළුවන්.

 npm install --save-dev babel-cli babel-preset-env 

මේක install වෙලා ඉවර වුණාට පස්සේ අපි කරන්නේ Babel config file එක හදා ගන්න එක. ඒකට .babelrc නමින් අලුත් file එකක් හදලා ඒකේ content එක විදියට මේක දාගන්න.

{
  "presets": ["env"]
} 

හරි දැන් Babel compiler එක use කරන්න අපිට පුළුවන්

Installing babel-watch

මේක අපි යොදා ගන්නේ code එකේ change එකක් වෙනකොට autoම server එක restart කර ගන්න. ඒක ගොඩක් ලේසියි Manual restart කරනවට වඩා. මේක Install කරගන්නේ මෙහෙමයි.

 npm install babel-watch --save-dev 

ඊට පස්සේ අපි කරන්න ඕන Package.json එකට මේක add කරගන්න එක. ඒකට package.json file එක open කරගෙන මේක paste කරගන්න scripts කියලා තියෙන කොටස ඇතුලෙ.

 
"scripts": {
    "dev": "babel-watch server.js"
  } 

මේක අපි add කරේ මේ ලිපියේ අන්තිමට අපි server එක start කරන්න මේ command එක use කරන නිසා.

Installing Express

අපි දැන් Express Framework එක add කරගන්න යන්නේ. මේ steps ටික follow කරන්න

 npm install express 

අපි database එකක් විදියට යොදා ගන්න mogodb driver එකත් මේ විදියට install කරගන්න.

 npm install mongoose 

ඒ වගේම මේකෙදි අපි backend එකේ ඉදන් frontend එකට data යවනවා. ඒක නිසා අපිට ඕන වෙනවා cors package එකත්.

 npm install cors 

මේ cors කියන package එක Express server එකට middleware එකක් විදියට වැඩ කරනවා. ඒ කියන්නේ Cross-Origin Resource Sharing මේකෙදි වෙන්නේ මොකක් හරි request එකක header එකේ අපි allow කරලා තියෙන content එකක් තියෙනවද කියලා බලනවා Domain එකෙන් පිටින් එන requests වලට.

Implementing The Server

අපෙ Baisc Packages Installation එක ඉවර වුණාට පස්සේ අපි දැන් බලන්න හදන්නේ Server එක implement කරගන්න විදිය.

Implementing A Basics Node.js/Express Server

මුලින්ම අපි බලමු Baisc server එකක් හදා ගන්න විදිය.. මේකට project එකට අලුතින් file එකක් add කරන්න ඕන server.js කියලා. ඒකේ content එක මේ වගේ හදා ගන්න.

import express from 'express';
const app = express();
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(4000, () => console.log(`Express server running on port 4000`)); 

දැන් අපි මේක run කරලා බලමු. ඒකට මේ command එක use කරන්න.

npm run dev

මේ dev කියන වචනේ භිවිතා කරන්න පුළුවන් වුණේ අපි කලින් package.json එකට add කරපු නිසා. දැන් මේ url එක ( http://localhost:4000/ ) web browser එකක් දැම්මොත් අපිට hello wold කියලා output එකක් බලා ගන්න පුළුවන්.

මොනවා හරි error එකක් ආවොත් fix කරගන්න try එකක් දීලා බැරි වුනොත් node_modules කියන folder එක backend එකේන delete කරලා package.json එක මේ විදියට හදාගෙන npm install කියන command එක run කරගන්න.

{
  "name": "backEnd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "babel-watch server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-watch": "^2.0.8"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.13"
  }
}

Extending The Server Implementation

දැන් අපි කරන්න යන්නේ මේ server එක අපිට ඕන විදියට වැඩි දියුණු කරගන්න එක. මේකෙදි අපි ප්‍රධාන Task 5ක් කරන්න යනවා. ඒවා තමයි

• GET request එකකින් list එක retrieve කරගන්න එක
• GET request එකකින් issue id එකකට අදාල record එකක් ගන්න එක
• POST request එකකින් අලුත් issue එකක් insert කරගන්න එක
• POST request එකකින් දැනට තියෙන record එකක් update කරගන්න එක
• GET request එකකින් issue එකක් delete කරගන්න එක

මුලින් අපි හදපු server.js එක මේ විදියට හදා ගන්න.

const app = express();
 const router = express.Router();

 app.use(cors());
 app.use(bodyParser.json());

 mongoose.connect('mongodb://[server]/issues');
 const connection = mongoose.connection;

 connection.once('open', () => {
     console.log('MongoDB database connection established successfully!');
 });

 app.use('/', router);
 app.listen(4000, () => console.log(Express server running on port 4000));

මේකෙ mongoose.connect එක ඇතුලෙ තියෙන server එක වෙනුවට ඔයගෙ තියෙන remote server එකක් නැත්නම් local mongo server එක දාගන්න. local server එකක් නම් server වෙනුවට local කියලා දාගන්න. ඒ වගේම ඔයාගෙ mongo server එක ඇතුලේ issues කියලා අලුත් collection එකකුත් හදා ගන්න.

අපිට හැම තිස්සෙම issues refer කරන්න වෙන නිසා දැන් කරන්න හදන්නේ අලුතින් issue කියලා model එකක් හදා ගන්න එක. ඒකට ඔයාගෙ backend folder එක ඇතුලේ අලුතින් models කියලා folder එකක් හදාගෙන ඒක ඇතුලේ Issue.js කියලා file එකක් create කරගන්න. ඒකේ content එකට මේක paste කරගන්න. මෙකෙ අපි ලියන්නේ අපේ issue එකට ඕන කරන properties ටික.

 import mongoose from 'mongoose';
 const Schema = mongoose.Schema;
 let Issue = new Schema({
     title: {
         type: String
     },
     responsible: {
         type: String 
     },
     description: {
         type: String
     },
     severity: {
         type: String
     },
     status: {
         type: String,
         default: 'Open'
     }
 });
 export default mongoose.model('Issue', Issue);

දැන් අපි මේ හදා ගත්ත අලුත් model එක server.js එකට import කරගන්න ඕන. ඒකට Server.js එකේ මේ විදියට import command එකක් උඩින් ලියා ගන්න

import Issue from './models/Issue';

Retrieving All Issues

අපි දැන් කරන්න යන්නේ අපෙ පළවෙනි task එක. ඒ කියන්නේ issues list එකම retrieve කරගන්න එක. ඒකට මේ Code එක server.js එකේ ලියා ගන්න.

 router.route('/issues').get((req, res) => {
     Issue.find((err, issues) => {
         if (err)
             console.log(err);
         else
             res.json(issues);
     });
 });

මේකෙ වෙන වැඩේ සරලවම කිවුවොත් router එකට ‘/issues’ කියලා get request එකක් ආවොත් එයා Issue කියන Schema එකේ තියෙන records ඔක්කොම අරගෙන json response එකක් විදියට එළියට දෙනවා. ඕන නම් ඔයාලට පුළුවන් මේ Code එක වෙනස් කර කර බලන්න මොන වගේ දේවල්ද කරන්න පුුළුවන් කියලා.

මම මේ වගේ Methods ඔක්කොම ලියන විදිය කියලා අන්තිමට server.js එකේ තියෙන්න ඕන content එක දාන්නම්

Retrieving An Issue By ID

මේකෙදි කරන්නේ අපි issue එකේ id එක දුන්නාම ඒ ID එකට අදාල record එක විතරක් අරගෙන දෙන ඒක. ඒක ලියන්නේ මෙහෙමයි.

router.route('/issues/:id').get((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (err)
             console.log(err);
         else
             res.json(issue);
     })
 });

:id එකෙන් කියන්නේ අපිට හොයා ගන්න ඕන කරන id එක router parameter එකක් විදියට දෙනවා කියල. එතකොට අපි කලින් කතා කලා වගේ Schema එකට කියනවා අදාල id එක තියෙන record එක json object එකක් විදියට එලියට දෙන්න කියල.

Adding New Issues

අපි කලින් ක්‍රම දෙකේදිම කතා කලේ GET method එකෙන් data එකක් ගන්න විදිය. හැබැයි දැන් අපිට ඕන වෙනවා අලුතින් data එකක් නැත්නම් issue එකක් store කරගන්න. ඒකට අපිට data එක යවන්න වෙන නිසා අපිට post method එක යොදා ගන්න සිද්ධ වෙනවා. ඒක කරන්නේ මෙහෙමයි

router.route('/issues/add').post((req, res) => {
     let issue = new Issue(req.body);
     issue.save()
         .then(issue => {
             res.status(200).json({'issue': 'Added successfully'});
         })
         .catch(err => {
             res.status(400).send('Failed to create new record');
         });
 });

මේ විදියට එක post request එකේ body එකේ තියෙන data ටිකෙන් අපි අලුත් issue object එකක් හදලා ඒක db එකේ save කරගන්නවා.

Updating Issues

මේකෙදි අපිට වැඩ දෙකක් කරන්න වෙනවා. මුලින් අපි දෙන ID එකට අදාල record එක හොයා ගන්න වෙනවාත ඊට පස්සේ ඒකෙ තියෙන Data වෙනුවට අපි අලුතින් එවන ඒවා දාලා ඒක save කරන්න වෙනවා. මේ වැඩේ කරගන්නේ කොහොමද කියලා බලමු.

router.route('/issues/update/:id').post((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (!issue)
             return next(new Error('Could not load Document'));
         else {
             issue.title = req.body.title;
             issue.responsible = req.body.responsible;
             issue.description = req.body.description;
             issue.severity = req.body.severity;
             issue.status = req.body.status;
             issue.save().then(issue => {
                 res.json('Update done');
             }).catch(err => {
                 res.status(400).send('Update failed');
             });
         }
     });
 });

ඔයාලට පේනවා ඇති අපි මුලින්ම දෙන ID එකට අදාල records තියෙනවද කියලා check කරලා හම්බ වුණේ නැත්නම් error එකක් දෙනවා. හම්බවුණොත් අපි එකින් එක replace කරගෙන යනවා අපි දෙන අලුත් data set එක්ත් එක්ක.

Deleting Issues

මේක ගොඩක් සරලයි. සාමාන්‍ය විදියට id එකකින් අදාල issue එක හොයාගෙන delete කරලා දාන්න තියෙන්නේ. අපි data එවන්නේ නැති නිසා සාමාන්‍ය get request එකක් මේකට භවිතා කරන්න පුළුවන්.

router.route('/issues/delete/:id').get((req, res) => {
     Issue.findByIdAndRemove({_id: req.params.id}, (err, issue) => {
         if (err)
             res.json(err);
         else
             res.json('Removed successfully');
     });
 });

මේක ඉවර වුණාම අපේ Basic task ටික ඉවර වෙනවා. දැන් අපි බලමු අන්තිමට අපිට හැදිලා තියෙන server.js එක මොන වගේ එකක්ද කියලා. මේක දිහා බලලා ඔයාලගේ code එකේ අඩුපාඩු තිබුණොත් හදාගන්න.

 import express from 'express';
 import cors from 'cors';
 import bodyParser from 'body-parser';
 import mongoose from 'mongoose';
 import Issue from './models/Issue';
 const app = express();
 const router = express.Router();
 app.use(cors());
 app.use(bodyParser.json());
 mongoose.connect('mongodb://[server]/issues');
 const connection = mongoose.connection;
 connection.once('open', () => {
     console.log('MongoDB database connection established successfully!');
 });
 router.route('/issues/add').post((req, res) => {
     let issue = new Issue(req.body);
     issue.save()
         .then(issue => {
             res.status(200).json({'issue': 'Added successfully'});
         })
         .catch(err => {
             res.status(400).send('Failed to create new record');
         });
 });
 router.route('/issues').get((req, res) => {
     Issue.find((err, issues) => {
         if (err)
             console.log(err);
         else
             res.json(issues);
     });
 });
 router.route('/issues/:id').get((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (err)
             console.log(err);
         else
             res.json(issue);
     })
 });
 router.route('/issues/update/:id').post((req, res) => {
     Issue.findById(req.params.id, (err, issue) => {
         if (!issue)
             return next(new Error('Could not load Document'));
         else {
             issue.title = req.body.title;
             issue.responsible = req.body.responsible;
             issue.description = req.body.description;
             issue.severity = req.body.severity;
             issue.status = req.body.status;
             issue.save().then(issue => {
                 res.json('Update done');
             }).catch(err => {
                 res.status(400).send('Update failed');
             });
         }
     });
 });
 router.route('/issues/delete/:id').get((req, res) => {
     Issue.findByIdAndRemove({_id: req.params.id}, (err, issue) => {
         if (err)
             res.json(err);
         else
             res.json('Removed successfully');
     });
 });
 app.use('/', router);
 app.listen(4000, () => console.log(Express server running on port 4000));

Testing The Server With Postman

Node වලින් backend එක හදා ගත්තට පස්සේ අපිට test කරගන්න පුළුවන් tool එකක් තමයි PostMan කියන්නේ. ඒක නැත්නම් මෙතනින් Download කරගන්න. ඒකෙන් අපේ backend එකෙන් එලියට Data ගන්න පුළුවන්ද කියලා check කරගන්න පුළුවන්.

Install කරගෙන ඉවර වුණාට පස්සේ node server එක run කරලා මේ වගේ request ගහලා බලන්න අපි හදපු routes වලට data එනවද කියලා

හරි මේ ලිපියෙන් අපි කතා කලේ Backend එක Nodejs වලින් Design කරගන්නේ කොහොමද කියලා. තේරුණේ නැති තැනක් තියෙනවා නම් Message එකක් දාන්න. ඊළඟ ලිපියෙන් කතා කරන්නේ අපි හදා ගත්ත Front එකයි Back එකයි Connect කරගන්න විදිය ගැන…

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

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