Reading Time: 3 minutes

ආයුබෝවන් හැමෝටම! ඔන්න මම අදත් ආවා Angular පාඩම් මාලාවේ දෙවන පාඩමත් සමගින්.අපි කලින් පාඩමේ කතා කලා මොකද්ද Angular කියන්නේ, ඇයි Angular පාවිච්චි කරන්නේ කියලා හා කොහොමද Angular install කරලා run කරන්නේ කියන එක ගැන.කලින් පාඩම මඟ හැරුන කෙනෙක් ඉන්නවනම් මෙතනින් ගිහින් බලන්නත් පුලුවන්..හරි එහෙනන් අපි අද පාඩමට බහිමු.

මුලින්ම අපි Angular වල folder structure එක ගැන බලමු..කලින් පාඩමේ අපි හදා ගත්ත angular project එක මොකක් හරි text editor එකකින් open කලාම මෙන්න මේ වගේ folder structure එකක් දැක ගන්ට පුලුවන්..

මෙහි අපිට දැක ගන්න පුලුවන් e2e, node module හා src කියලා ලොකු folder තුනකුයි තව .json file කිහිපයකුයි .මුලින්ම අපි ලොකු folder තුන ගැන කතා කරමු.

e2e – මේ folder එකේ තියන files පාවිච්චි කරන්නේ testing වලට.

node module – මේ folder එකේ තමයි අපේ project එකට අදාල modules install කරලා තියා ගන්නේ.උදාහරණයක් විදියට ගත්තොත් අපේ project එකට bootstrap ඕනි කියලා හිතමුකෝ… bootstrap install වෙන්නේ මෙන්න මේ node module කියන folder එකේ තමයි.

src – මේ folder එකේ තමයි අපේ project එකට අවශය වැදගත්ම files ටික තියෙන්නේ.src folder එක open කරලා බැලුවොත් මුලින්ම අපිට දැක ගන්න පුලුවන් app කියලා folder එකක්..අපේ project එකට අදාල වන component වල files තියා ගන්නේ මෙන්න මේ app folder එක ඇතුලේ.තවද,main.ts file එක, index.html file එක වගේ ඒවා තබා ගන්නෙත් මෙන්න මේ src folder එක ඇතුලේ.

package.json – මෙන්න මේ file එකේ තමයි තියෙන්නේ අපේ project එකට අදාලව තියන dependency වල විස්තර හා install කරලා තියන modules වල විස්තර..මේ විස්තර වලට අදාලව තියෙන dependency හා modules තියෙන්නේ අපි කලින් සදහන් කල node module කියන folder එක ඇතුලේ. පහලින් ඔයාලට බලා ගන්න පුලුවන් package.json file එකේ තියන code line කීපයක්..

මේ code line කිහිපය දැක්කට පස්සේ ඔයාලාට මතක් වෙන්න ඇති අපි කලින් පාඩමේ කතා කරපු ng serve හා npm start කියන command දෙක.කලින් පාඩමේ කිව්ව විදියට Angular වල server එක start කරන්න තමයි මේ command දෙක ගත්තේ..මේවා දෙකෙන් කරන වැඩේ එකම වුනාට වැඩකරන විදිය වෙනස්.. ng serve command එකෙන් වෙන්නේ server එකට direct ම කියනවා start වෙන්න කියලා…නමුත් npm start command එක දුන්නාම වෙන්නේ internally ng serve කියන command එක run වෙලා තමයි server එක start වෙන්නේ..කෙලින්ම server එක start කරන්න යන්නේ නෑ…ඔය වගේම තමයි npm build හා ng build , npm test හා ng test …යන command වැඩ කරන්නනෙත්..මේ ටික නම් කිව්වේ ඔයාලගේ අමතර දැනුමට..කෝකටත් කියලා දැනගෙන ඉන්න එක හොදයිනේ..😀😀..

හරි ඔන්න ඔය වගේ folder structure එකක් තමයි Angular වල තියෙන්නේ…දැන් අපි බලමු Angular වල index page එක render වුනේ කොහොමද කියලා.

ඔයාලට මතක ඇති අපි කලින් පාඩමේදී කතා කලා කොහොමද Angular project එක run කරන්නේ කියන එක ගැන..එහිදී Angular වල server එක start කරලා ng -o හරි ng -open හරි ගැහුවාම Auto ම localhost:4200 port එකේ app එක run වුනා.අපි දැං බලමු කොහොමද මේ වැඩේ වුනේ කියලා.localhost:4200 කියන url එක ආවාම මුලින්ම request එක එන්නේ src folder එක ඇතුලේ තියන main.ts කියන typescript file එකට..ඊට පස්සේ main.ts file එකෙන් src/app folder එකේ තියන app.module.ts file එකට (root module) call වෙනවා ..ඊට පස්සේ app.component.ts කියන root component එකේ class එකට ඇවිත් තමයි අවසානයේදී app.component.html page එක render වෙලා පෙන්නුවේ ..හරි හැටි තේරුනේ නැතිනම් අවුලක් ගන්න එපා ..ඊලග පාඩමේදී හරියටම තේරේවි.

හරි අදට අපි කතා කරන්න බලාපොරොත්තු වෙන්නේ ඔච්චරයි..මීලඟ පාඩමේදී අපි බලමු Angular වල component ගැන..post එක ගැන ඔයාලගේ අදහස comment එකක් දාන්නත් අමතක කරන්න එපා..මීලඟ පාඩමෙන් හමුවනතුරු ඔබට සුභ දවසක්! !


Gayan Sampath

Undergraduate at University of colombo school of computing | Blogger @thesigma.gq

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *