කොහොමද යාලුවනේ! ඔන්න මං අදත් ආවා Angular පාඩම් මාලාවේ තුන්නවෙනි පාඩමත් සමගින්.කලින් පාඩමේදී අපි කතා කලා Angular වල folder structure එක සහ index page එක render වුන විදිය ගැන. අද පාඩමේදී අපි කතා කරන්ට බලාපොරොත්තු වෙන්නේ Angular වල components ගැන.ගොඩක් දේවල් කතා කරන්න තියන නිසා කෙලින්ම පාඩමට බහිමු.

Angular වල component එකක් හැදිලා තියෙන්නේ Template , class හා metadata කියන කොටස් තුනේ එකතුවෙන්.view එකට අදාලව තියන HTML code ඔක්කොම වගේ අයිති වෙන්නේ මෙන්න මේ Template කියන කොටසට…component එකේ properties , methods හා view එකට අදාලව තියන logic තියාගන්නේ component class එක ඇතුලේ..metadata කියන කොටසේ තමයි තියෙන්නේ component එක අපේ app එකට සම්බන්ධ(attach) කිරීමට අදාල විස්තර…Metadata define කරලා තියෙන්නේ Decorator කියලා එකකින්.Decorator එකක් කියන්නේ අපේ component එක app එකට සම්බන්ධ කිරීමට අදාල විස්තර සපයන විශේෂ function එකක්.component එකක ප්‍රධාන කොටස් තුන ගැන සරලව ඔය ටික තමයි කියන්න තියෙන්නේ…දැන් අපි එකින් එක ගැන තව පොඩ්ඩක් කතා කරලා බලමු.

මුලින්ම අපි අලුත් component එකක් හදාගමු. ඔයාලගේ terminal එකේ අපි කලින් හදා ගත්ත angular project එක ඇතුලට ගිහින්ng g c <component_name> කියන command එක දුන්නාම අලුත් component එකක් හදා ගන්න පුලවන්.ඔන්න ඔය විදියට component එකක් හදා ගත්තාම ඔයාලට පේනවා file 4 ක් තියන folder එකක් තමයි component එකක් විදියට හැදිලා එන්නේ.අන්න ඒ file 4 ගැන සලකා බැලුවොත් , typescript (.ts ) file එකේ තමයි component එකේ class එකයි metadata යි තියා ගන්නේ.html file එකේ තමයි component එකේ view එක තියෙන්නේ. component එකකට අදාල styles තියාගන්නේ මෙන්න මේ .css කියන css file එක ඇතුලේ..අනික් file එක(.spec.ts) නම් පාවිච්චි කරන්නේ testing වලට.

ඔයාලට මතකද දන්නේ නෑ මං කලින් පාඩමේදී පාවිච්චි කලා root component කියලා වචනයක්..ඒ වෙලාවෙදි ඒක ගැන කතා කලේ නැති වුනාට දැන් අපි ඒ ගැන පොඩ්ඩක් කතා කරලා බලමු.root component එක තමයි අපේ app එකේ තියන ප්‍රධානම component එක.අපි අලුතින් හදන component දාන්නේ මෙන්න මේ root component එක ඇතුලට.මුලින්ම අපිට index page එක render වෙද්දි පෙනුනේ මෙන්න මේ root component එකේ elements තමයි.මුලින්ම අපි root component එකේ typescript file එකට ගිහින් බලමු.

ඔන්න ඔහොම තමයි root component එකට අදාල typescript file එක( app.component.ts file ) තියෙන්නේ. මෙහි මුලින්ම තියනවා Metadata..

Metadata ගැන බැලුවොත්, මුලින්ම තියන selector එක , component එක html file එකට attach කරන විට custom html tag එකක් විදියට වැඩ කරනවා …අපි open කරලා තියෙන්නේ root component එකට අදාල typescript file එක නිසා එහි selector එක නම් කරලා තියනවා app-root කියලා..දැන් ඔයාලට index.html file එක ඇතුලට ගියොත් බලාගන්න පුලුවන් app-root කියලා custom html tag එකක් තියනවා

ඔන්න ඔය custom html tag එක තියන තැනට තමයි root component එක index page එකට attach කරලා තියෙන්නේ.

component එකක් තවත් component එකකට හරි අදාල html page එකකට හරි attach කරන්න පුලුවන් විදි තුනක් තියනවා..පලමු ක්‍රමය තමයි selector එක custom html tag එකක් විදියට පාවිච්චි කරලා attach කරන්න පුලුවන්..අපි ඉහලින් කතා කලේ අන්න ඒ ක්‍රමය ගැන තමයි..දෙවෙනි ක්‍රමය තමයි selector එක class එකක් විදියට පාවිච්චි කරල attach කරන්නත් පුලුවන්..code එක ගත්තොත් මෙන්න මේ වගේ..

app-component.ts

index.html

තුන්වෙනි විදිය තමයි selector එක attribute එකක් විදියට පාවිච්චි කරලත් component එක page එකට attach කරන පුලුවන්.ඒකේ code එක ගත්තොත් මෙන්න මේ වගේ..

app.component.ts

Index.html

ඔන්න ඔය ක්‍රම තුනෙන් කැමති විදියක් පාවිච්චි කරලා අලුත් component එකක් html page එකට attach කරන්න පුලුවන්.

Metadata වල ඊලගට තියෙන්නේ templateurl එකයි styleurls එකයි. templateurl එකෙන් තමයි අපේ component එකේ html page එක තියන තැන පෙන්නනේ. component එකේ styles තියන css file එක තියන තැන පෙන්නනේ මෙන්න මේ styleurls එකෙන්.component එකකට අදාල metadata නම් තියෙන්නේ ඔච්චරයි..

typescript file එකේ metadata වලට යටින් තියෙන්නේ component එකේ class එක..component එකේ methods , properties තියාගන්නේ මෙන්න මේ component class එක ඇතුලේ. මුලින් අපි කතා කලානේ root componet එකේ metadata ගැන.දැන් බලමු root componet එකේ class එක ගැන.

ඉහලදි මම පෙන්නපු විදියට root component එකේ typescript file එක ඔන්න ඔය විදියට තමයි තියෙන්නේ. root component කියලා metadata වලට යටින් තියෙන්නේ component class එක.root component class එක ගත්තොත් ඔයාලට පේනවා ඇති title කියලා property එකක් define කරලා තියනවා..ඔන්න ඔය විදියට අපේ component එකට අවශය properties , methods ඕනි තරමක් define කරන්න පුලුවන් මෙන්න මේ component class එක ඇතුලේ.

component එකක තියන අනෙක් කොටස තමයි view එක .component එකේ view එක පෙන්නනේ මෙන්න මේ html file එකෙන්.root component එකේ view එක බැලුවොත් මෙන්න මේ වගේ view එකක් තමයි තිබුනේ.

root component එකට අදාල html file එක බැලුවොත් මෙන්න මේ වගේ.

මුලින්ම තියනවා well come message එක.

ඔයාලට මතක ඇති root component class එකේ property එකක් තිබුණා title කියලා.අන්න ඒ title property එක තමයි well come massage එක වදියට මෙතනදි display වෙලා තියෙන්නේ.ඔන්න ඔය වඳියට component class එකේ define කරන properties සහ methods අපේ component එකේ view එකට අවශය විදියට display කරලා පෙන්න පුලුවන්.component ගැන කියන්න තියෙන්නෙනම් ඔච්චරයි. component ගැන තවමත් පොඩි හෝ අවුලක් තියනවනම් මෙන්න මේ උදාහරණයත් බලන්නකෝ.

මෙහිදී මම කරන්න යන්නේ අලුතින් component එකක් හදාගෙන ඒක root component එකට attach කරලා display කරන එක.

මුලින්ම මම component එකක් හදා ගන්නම් “firstComponent” කියලා.

ng g c firstComponent

හරි, දැන් ඔයාලට හැදිලා එන්න ඇති file 4 ක් තියන “firstComponent” කියලා folder එකක්. මුලින්ම මම හදා ගත්ත අලුත් component එකේ property එකක් define කරනවා “header” කියලා. “header ” එකට value එකක් දෙනවා “This is my first component ” කියලා.

හරි , දැන් ඒ define කරපු property එක මෙන්න මේ විදියට html page එකට set කරමු.

හරි දැන් හදා ගත්ත component එක root component එකට attach කරමු. අපේ හදා ගත්ත component එක පැහැදිලිව පෙනෙන්න ඕනි නිසා root component එකේ දැනට තියන elements delete කරලා අපේ අලුත් component එක attach කරමු.හරියට මෙන්න මේ වගේ.

ඔන්න ඔය විදියට අලුත් component එක attach කලාට පස්සේ මෙන්න මේ වගේ view එකක් ඔයාලට දැක ගන්න පුලුවන්

හරි, components ගැන හොදටම තේරෙන්න ඇති කියලා හිතනවා..තවත් මොකක් හරි අව්ලක් තියනවනම් comment එකක් දාන්න.මීලඟ පාඩමෙන් අපි බලමු Angular වල data binding ගැන.මීලඟ පාඩමෙන් හමුවන තුරු ඔබට සුභ දවසක් ! ☺☺

The post Components in Angular appeared first on The SIGMA.

ආයුබෝවන් හැමෝටම! ඔන්න මම අදත් ආවා 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 එකක් දාන්නත් අමතක කරන්න එපා..මීලඟ පාඩමෙන් හමුවනතුරු ඔබට සුභ දවසක්! !

The post Angular 7 මුල සිට ඉගෙන ගනිමු – 2 කොටස 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.