Angular පාඩම 7 - Structural Directives( ngIf, ngSwitch, ngFor )

අපි java , C languages ඉගෙන ගනිදිදි if else, switch case , for loop මෙන්න මේ වගෙ දේවල් ටිකක් ඉගෙන ගත්තා ඔයලට මතක ඇති... ඒවගෙන් උනු වැඩත් මතක ඇති.එන්න ඒ වැඩ ටික කරගන්න තමයි angular වලදි මෙන්න මේ Structural Directives use වෙන්නෙ..

අපි මුලිම්ම බලමු ngIf ගැන..
මේකෙදි වෙන්නෙ මොකක් හරි variable එකක් true උනොත් මේ ngif එක යටතේ තියෙන form එක වැඩ කරනව..false නම් වැඩ කරන්නෙ නැ...පහල නිදසුන බැලුවොත් ඒක පැහැදිලි වේවි...

මේකෙ myVaribale_one කියන එක true නිසා ngIf = true වන form එක පමනයි වැඩ කරන්නෙ..

මේකෙ else part එකක් එන විදියටත් පහල විදියට code එක ලියාගන්න පුලුවන්.ඒකට ng-template කියල elements  හදාගන්න වෙනව..ඒ හදාගන්න element එකට reference variable assign කරන්නත් වෙනවා...

මේකෙදි trueblock එක වැඩ කරනවා බලාගන්න පුලුවන්..මොකද myVaribale_one  true නිසා...

දැන් අපි බලමු ngSwitch Directive එක ගැන...

java වල switchcase තේරුනා නම් මේකත් ඒ වගේමයි.හරිම ලේසියි.සමාන output කිහිපයක් තියෙද්දි  නිවැරදි එක තෝරගන්න තමා මේක ඕන වෙන්නෙ..java වල වගේම ngSwitch කියල මුලිම්ම අදාල variable එක assign කරනවා...ඊට පස්සෙ *ngSwitchCase කියල selective ටික assign කරනව... code එක බැලුවාම හොදටම පැහැදිලි වේවි...  

date එක Friday නිසා ඒ අදාල case එක වැඩ කරනව බලාගන්න පුලුවන්...

දැන් අපට බලන්න තියෙන්නෙ ngFor ගැන.. 

for කියද්දි අපට මතක් වෙන්නෙ looping.මේ ngFor Directive එක use වෙන්නෙත් loop වලට.ඒ කියන්නෙ හිතන්නකො template  එකේ එකම component එකක් හරි form එකක් හරි කිහිපවතාවක් , සිය දහස් වතාවක් පෙන්නගන්න ඕන කියල..ඒ කියන්නෙ array එකක තියෙන elements ටික පෙන්නගන්න ඕන කියල හිතන්න. මේ වගේ වැඩ වලට තමයි ngFor use කරන්නෙ...

අපි උදාහරනයක් අරන් බලමු.මුලිම්ම component class එකේ array එකක් හදාගන්න ඕන.

මේ වගේ,

days=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

දැන් අපි මේක template එකේ එකින් එක පෙන්න ගන්න ඕන.ඒකට මෙන්න මේ වගෙ syntax එකක් use වෙනවා..  *ngFor='let day of days';

මෙතන කියවෙන්නෙ days කියන array එකෙන් එකක් බැගින් අරගෙන day කියන variable එකට assign කරන්න කියන එක.මෙතන day වෙනුවට අපට කැමති නමක් දෙන්න පුලුවන්.නමුත් days කියන එක වෙනස් කරන්න බෑ..ඒක තමයි array එකේ name එක.

දැන් ඉතින් day කියන variable එක view කරගන්න තියෙන්නෙ...ඒකට interpolation use කරන්න පුලුවන්.මතක ඇති component එකේ තියෙන දෙයක් template එකේ පෙන්නගන්න interpolation යොදාග්ත්තා double curly brases දාගෙන.ඒකම තමයි මෙතනත් කරන්න තියෙන්නෙ..

මේක පහල විදියට view වෙනවා බලාගන්න පුලුවන් වෙවි..

ඒනම් අදට ඉවරයි..සුබ දවසක්.

ජයවේවා...

Angular පාඩම 6 - data binding

අපි අද බලන්න යන්නෙ data binding කියන්නෙ මොකද්ද කියල... මේක one way data binding සහ two way data binding කියල ආකාර දෙකයි... ඒකෙන් two way data binding කියල කියන්නෙ template එක පැත්තෙ ඉදන් component එක පැත්තටත් (ඒ කියන්නෙ  html file එකේ ඉදන් ts file පැත්තට) component එකේ ඉදන් template එක පැත්තටත් එකවර data pass කරන වැඩේට...මේකෙ එක පැත්තකට විතරක් data pass කරනවනම් ඒකට one way data binding කියල කියනවා...

අපි මේ වැඩේ කරන්න  login form එකක් හදාගමු.
මුලිම්ම අපි login කියන නමින් component එකක් හදාගමු.( >ng g c login )
ඒට පස්සෙ මේ වගේ bootstrap login form එකක් login.component.html එකට දාගන්න..

දැන් ඒකෙ selector එක app.component.html එකට දාගන්න ඕන.. (<app-login></app-login>)...මතක නැතිනම් කලින් පාඩම් බලන්න.
ng serve කරගත්තාම මේ විදියට පෙනේවි.

දැන් අපි මේ form එකට නමක් දෙන්න ඕන... <form #login = "ngForm"> කියල දෙන්න පුලුවන්..ඒ වගේම  මේ form එක submit කලාම වෙන්න ඕන දේ ts file එකේ ලියගන්න පුලුවන්...එහෙම කරන්න නම් form එකේ ඒ අදාල method එක මේකයි කියල ලියන්න තියෙන්න ඕන..
<form  (ngSubmit)="onSubmit(login)" #login = "ngForm"> 
මෙතන method එකට login කියල ngForm එකෙ විස්තර ටික යවල තමයි තියෙන්න.

දැන් අපි මේ form එකේ විස්තර console log කරගන්න බලමු.
ඒකට login.component.ts එකේ මේ විදියට onSubmit() කියන  method එක ලියාගන්න ඕන.
method එක ඇතුලෙ ngForm එකෙන් එන data console log කරගන්න පුලුවන්ද කියල බලමු...

ඊට කලින් NgForm එක import කරගන්න අමතක කරන්න එපා...
NgForm import කරගන්න කලින් app.module.ts එකට FormsModule එක import කරගන්න වෙනවා...

login.component.ts එක එන්නෙ මේ විදියට...

දැන් අපි form එක submit කරල inspect බැලුවොත් අපේ ngForm එක  console log වෙලා තියෙනව බලාගන්න පුලුවන්...

 ඒ කියන්නෙ දැන්  අපේ form එක වැඩ කරනව කියන එකයි...

දැන් අපි බලමු මේ input , console log කරගන්න හැටි.ඒකට අපි input එකට නමක් දෙන්න වෙනව...ඒ වගේම ngModel කියන directive එක දෙන්න ඕන...ඒක කරන්නෙ මේ විදියට...

email එකයි password එකයි console log කරන්නෙ මේ විදියට...

දැන් email එකයි..password එකයි ගහල submit කලාම මේ විදියට console log වෙනවා බලාගන්න පුලුවන්....

හරි දැන් අපි බලමු data bind කරන්නෙ කොහොමද කියල..

මුලිම්ම අපි oneway data binding එකක් කරන හැටි බලමු.ඒ කියන්නෙ component එකේ ඉදන් template එකට.

ඒකට අපි component එකේ object එකක් හදාගන්න ඕන.student කියල object එකක් හදාගමු.ඒ object එකේ අපේ form එකට ගැලපෙන විදියට json type එකට attribute ටිකක් හදාගමු.

      student={

                email:" ",

                password: " "

               }

දැන් ඔය email , password template එකට bind කරගන්න ඕන... ඒක කරන්න නම් template එකේ ngModel එකට අපි component file එකේ  සාදගත් object එකේ තියෙන attributes දෙන්න වෙනවා.. ඒක කරන්නෙ මෙහෙමයි... (ngModel එකට square brackets දාගන්න ඕන.)

දැන් ගොඩක් දුරට වැඩ ඉවරයි..component එකට අපට කැමති values දුන්නම component එකෙන් template එකට data bind වෙලා තියෙන නිසා open කරදිදිම form එක ඒ values වලින් fill වෙලා තියෙනවා බලාගනන පුලුවන්...

ඒ වගේම දැන් object එක  console log කරගත්තොත් ඒ values ටිකම බලාගන්න පුලුවන්.

දැන් අපි value එක change කරල submit කලොත් console log වෙන්නෙ අර කලින් තිබුනු value එකමයි...ඒකට හේතුව අපි මේකෙ කරල තියෙනෙ one way bind එකක් හින්ද..data pass වෙන්නෙ component එක පැත්තෙ ඉදන් template එක පැත්තට විතරයි.template එක change කලා කියල console log එක වෙනස් වෙන්නෙ නෑ...

මේ නිසා ඒකට two way bind කරන්න වෙන්වා...

එකට banana in the box syntax (   [(  )]  )  එක use කරනව..

දෙන් two way data bind එකත් කරල ඉවරයි. දැන්  template එකේ කරන වෙනස්කමක් නිසා component එක ඒ කියන්නෙ console log එක change වෙනවා...

 හරි.data binding අදට ඉවරයි...අලුත් ලිපියකින් ආයෙත් හමුවෙමු.

සුබ දවසක්...! 

Angular 6 පාඩම - 5 - Interpolation

ආයුබෝවන්,අද මම කියල දෙන්න යන්නෙ interpolation ගැන,

Interpolation කියන්නෙ අපි typescript file එකේ කරන වෙනස්කම් කොහොම්ද  අපේ  html file එකේ පෙන්නගන්නෙ කියන එක ගැන.

මං මේ වැඩේ කරගන්න hello කියන නමින් අලුතෙන් component එකක් හදාගත්තා..ඊට පස්සෙ ඒකෙ selector එක වන <app-hello> කියන selector එක app.component.html එකට දා ගත්තා..(මේ වැඩේ කරන හැටි කලින් ලිපියෙන් පැහැදිලිව කතා කලා)

මම html file එකේ hello,Amal කියල h2 tag එකක් ඇතුලෙ ටයිප් කලා…මේක run කරල බැලුවොත් hello,Amal කියල view වෙනව…

නමුත් මේක static.අපට මේකෙ නම මොකක් හරි logic එකකින් වෙනස් කරන්න හැකියාවක් නෑ..වෙනස් කරන්න html file එකම වෙනස් කරන්න වෙනව…

නමුත් අපට ts file එකේ logic එකක් ලියල මේ නම වෙනස් කරගන්න පුලුවන් වෙන්න ඕන.එ කියන්නෙ මොකක් හරි Array එකක තියෙන text එකක් ,JSON file එකක තියෙන එකක් පෙන්න ගන්න ඕන නම්  ts file එකත් එක්ක ගනු දෙනු කරන්නම වෙනව…

හරි.දැන් අපි ts file එකේ name කියල variable එකක් හදාගන්නව…ඊට පස්සෙ ඒකට නමක් assign කරනව…පහල රූපය බලන්න.

මේ නම කොහොමද දැන් අපි පෙන්නගන්නෙ…ඒකට තමයි අපි සගල වරහන් යුගලක් use කරන්නෙ… {{ }}

 Html file එක ඇතුලෙ අර හදාගත්තු name කියන variable එක දාගත්තාම ඒකට assign කල නම view වෙනව බලාගන්න පුලුවන.

ඉතින්  සරලව ඔන්න ඔය වගේ  වැඩක් තමයි interpolation කියන්නෙ..

තව දුරටත් methods use කරමින් මේ වැඩේ කරන හැටි තමයි මේ…

Interpolation කියන්නෙ සරලව මේ දේ කියල කියන්න පුලුවන්.මෙක සරල උනාට ඉදිරි පාඩම් වලට ගොඩක් ඕන වෙනව…එහෙනම් ගිහිං එන්නම්.

ජය.!!!

Angular පාඩම - 4 - what is component?

අද පාඩමෙන් අපි බලන්න යන්නෙ මොකද්ද මේ component එකක් කියන්නෙ සහ angular component හදල ඒවත් එක්ක වැඩ කරන ආකාරය..
component එකක් කියල කියන්නෙ angular වල basic building blocks වලට.component එකකට files වර්ග තුනක් ඇතුලත් වෙනවා...අපි හිතමු test කියල component එකක් හැදුව කියල..එතකොට මේ විදියට files 4ක් හැදෙනව..

1. test.component.html
2. test.component.css
3. test.component.spec.ts
4. test.component.ts   

ඉතිං මෙන්න ගොඩක් වෙලාවට මේ වගේ  component කිහිපයක් එකතු වෙලා තමයි අපේ angular page එකක් view වෙන්නෙ...ඒක හරියට මේ වගේ..

angular project එකක් මුලිම්ම හදාගන්නකොට එක component එකක් angular cli එක විසින් අපට හදල දෙනව..ඒ තමයි app component එක.මේකට root component එක කියලත් කියනවා..මොකද මේක තමයි අපේ project එකේ ප්‍රධානම component  එක වෙන්නේ..

app.component.ts කියන file එකට ගිහිං බැලුවොත් මෙන්න මේ වගේ code එකක් බලාගන්න පුලුවන්..

ඒකෙ තියෙන selector එකෙන් තමයි component  එක හදුනාගන්නෙ.මේකෙ නම් 'app-root'
කලිං පාඩමේදි කිව්ව මේ හැමදෙයක්ම render කරල view කරන්නෙ index.html file එකෙන් කියල.index.html file එකට ගියොත් ඔයාලට බලාගන්න පුලුවන් මේ <app-root></app-root>
කියල selector එකක් තියෙන්ව.ඒකෙන් කියන්නෙ මේ root component  එකේ තියෙන දේවල්  පෙන්නන්න කියන එක.

අපි දැන් බලමු අලුතෙන් component එකක් හදා ගන්නෙ කොහොමද කියල..

මේ වැඩේ කරන්නෙ terminal එකෙන්..
(vs code එකෙන් terminal eka අරගන්නෙ මෙහෙමයි.)
view > terminal

ඔය විදියට terminal එක අරගෙන පහල තියෙන command එක type කරල enter කරන්න..
(අපි nav bar එකක් දාගන්න component එකක් හදාගන්න තමයි යන්නෙ.ඒක නිසා nav-bar කියල component  එකක් හදාගමු.)

>ng generate component nav-bar

මේක කෙටියෙන් >ng g c nav-bar කියල ලියන්නත් පුලුවන්.

එතකොට terminal එකේ පහල විදියට පෙන්නාවි.

මං මුලිම්ම කියපු files 4 හැදිල තියෙනවා බලාගන්න  පුලුවන්..
ඒ වගේම තමයි app.module.ts එක update වෙලත් තියෙනවා...

(අපි හදන සෑම component එකක්ක්ම app.module.ts එකට import කරගෙන  declarations වලට දාන්න ඕන.(මේ වැඩේ auto ම වෙනවා..:) ))

හරි.දැන් අපට nav bar component  එකේ html එකේ තියෙන දේ පෙන්න ගන්න ඕන.දැනට
"nav-bar works!" කියල text එකක් තියෙනවා...

කලිං කියපු nav-bar.componanet.ts file එකේ තියෙන selector එක app.componant.html එකට දැම්ම නම් අපට ඕන වැඩේ කරගන්න පුලුවන්.

මේ විදියට කරල save කරල ng serve මගින් app එක run කරල බලන්න...

හරි.අපට ඕන වැඩේ හරියටම වෙලා තියෙනවා...
දැන් අපට ඕනම දෙයක් nav-bar.component.html එකට දාගත්තාම ඒක view වෙනව බල්ලගන්න පුලුවන්..

bootstrap nav bar කියල  search කරල ඔයාට කැමති ලස්සන nav bar එකක් nav-bar.component.html එකට දාගෙන project එක run කරල බලන්න...
(bootstrap CDN එක index.html එකට copy කරගන්න අමතක කරන්න එපා.. :) )


මේ මම තෝරගත්තු nav bar එක.

මගෙ nav-bar.component.html එක.

මේක run කලාම පහල වගේ ලස්සන navbar එකක් ඔයාගෙ app එකෙත් බලාගන්න පුලුවන් වේවි..

හරි.ඒනම් අදට ඇති.තවත් මේ වගේ පාඩමකින් ආයෙත් හමුවෙමු.
ස්තූති.
සුබ දවසක්.

Angular 6 පාඩම - 3

අද පාඩමෙන් මං කියල දෙන්න යන්නෙ visual studio code එකෙන් අපි හදාගත්තු project එක open කරගෙන වැඩ කරන හැටි සහ angular project එකේ තියෙන files ගැන පොඩි හැදින්වීමක් කරන්න..

මුලින්ම  ඔයාල vs code එක open කරගන්න...
ඊට පස්සෙ file click කලාම එන list එකේ  open folder කියන එක click කරන්න.(ctrl+o press කලත් හරි.)

ඊට පස්සෙ එන dialog box එකේ අපේ project එක තියෙන තැන තෝරන්න..

හරි. දැන් select folder කියන එක click කරන්න.දැන් vs code එකෙන් ඔයාගෙ project එක open වෙයි.

දැන් ඔයා project එක open කරගෙන ඉවරයි..එතකොට මොනවද මේ files folders ගොඩක් තියෙන්න...අපි  බලමු ඒ මොනවද කියල.

e2e -  මේ folder එකේ තියෙන්නෙ end to end testing වලට ඕන කරන files.අපිට මේක එච්ච්ර වැදගත් වෙන්නෙ නෑ..

node_modules -  මේ folder එකේ තමයි අපේ project එකට ඕන කරන හැම module එකක්ම තියාගන්නෙ..සහ අපි install කරන හැම module එකක්ම තියාගන්නෙ.

src - මේ folder එක ඇතුලෙ  තමයි අපේ  project  එකේ  source code ඔක්කොම තියාගෙන ඉන්නෙ.. මේක ඇතුලෙ තවත්  folder කිහිපයක් තියෙනවා..

          app> මේ තමයි app component එක.මුලිම්ම app එක run කරදිදි වෙන්න ඕන දේවල් ලියල තියෙන්නෙ මේ component එකේ..මේ folder එකේ files කිහිපයක් තියෙනවා..

app.component.html - front end එකේ පෙන්නන්න ඕන දේවල් ටික තියාගන්න file එක.

app.component.css  - html file එක ලස්සන කරන්න තියෙන css file එක.

app.component.spec.ts - මේක තියෙන්නෙත් testing වලට..

app.component.ts - html file එකෙ handle/control කරන්නෙ මේ file එකෙන්.

app.module.ts - component එකට ඕන  කරන  module ටික load කරන්නෙ මේ file එකට. 

        assets> background images වගේ use කරනවනම් එ වගේ දේවල් තියාගන්නෙ මේ folderඑකේ..

        

        environment> අපේ project එක තියෙන්න production environment එකේද,development environment එකේද කියන එක කියවෙන files තියාගන්නෙ මේ folder එකේ..

index.html -  server  එකෙන් අවසානයට render කරන්නෙ  මේ file එක තමයි.මේ file එකේ තියෙන <app-root></app-root> කියන tag එක ඇතුලෙ තමයි අපි කරන සියලු වැඩ view වෙන්න load වෙන්නෙ.

main.ts - අපේ application එක මුල ඉදන් load කරන්නෙ මේ file එකෙන්..ඒ වගේම app component එක මුලින්ම load වෙන්න අදාල දේවල් මේකෙ ලියවිල තියෙනවා..

polifills.ts - web pak එකට ඕන කරන දේවල් තමයි මේකෙ තියෙන්නෙ.

style.css - මුලු  application එක පුරාවටම ඕන කරන css ලියන්නෙ මේ file එකේ...

test.ts, tsconfig.app.json , tsconfig.spec.json , typings.d.ts - මේ files ඔක්කොම තියෙන්නෙ testing වලට.

.gitignore - ඔයාගෙ computer එකට git install කරල තියෙනවන්ම් මේ විදිහෙ file එකක් හැදිල ඇති.මේකෙන් කියවෙන්නෙ github ( හෝ  bitbucket) එකට code එක push කරදිදි push වෙන්න ඕන නැති files මොනවද කියන එක..මෙකේ ලියල තියෙන විදියෙ files github එකට push වෙන්නෙ නෑ..(ex-node_module files)

angular-cli.json - cli settings ලියල තියෙන්නෙ මේ file එකේ...

package.json - සියලුම  dependencies තියන් ඉන්න file එක.

ඉතිං ඔය කියපු විදියට තමයි angular project එකක file සහ folder structure එක හැදිල තියෙන්නෙ..

අපි තවත් පාඩමකින් ආයෙත් හමුවෙමු.

සුබ දවසක්...

Angular 6 පාඩම - 2

අපි කලින් ලිපියෙන් කතා කලා nodejs සහ VScode install කරගන්නා හැටි..ඔයාල මේ වෙද්දි ඒ දෙක හරියට install කරගෙන ඇති කියල හිතනවා...

cmd එක අරගෙන ඒකෙ මේ විදියට type කරල බලන්න...

node version එක බලාගන්න >node -v

npm version එක බලාගන්න >npm -v

හරි...දැන් අපි angular cli එක install කරගන්නයි යන්නෙ...මේක කරන හැටි https://cli.angular.io  ගියොත් බලාගන්න පුලුවන්...

cmd එක open කරල පලවෙනියට තියෙන මේ command එක type කරල enter කරන්න.

> npm install -g @angular/cli

මේකෙ -g කියන එකේ තේරුම තමයි ඔයාගෙ computer එකට globally angular install කරනව කියන එක.

මේ වැඩේට තත්පර කිහිපයක් යාවි.

අමතක කරන්මේන එපා මේ  වැඩේ හරියට වෙන්න නම්  ඔයාගෙ computer එක internet එකට connect වෙලා තියෙන්නම ඕනි.

දැන් ඔයාලගෙ computer එකට angular install වෙලා ඉවරයි.

අපි දැන් අලුතින් angular project එකක් හදාගන්නනයි යන්නෙ..කොහොමද මේක කරන්නෙ...

ඉස්සල්ලම ඔයාගෙ ප්‍රොජෙක්ට් එක save කරගන්න hard එකේ තැනක් තෝරගන්න..(මම  D partition ekee "My projects" කියල Folder එකක් හදාගත්තා.. D:\My Projects)

හරි දැන් ඔය කියන තැනට cmd එක ගන්න ඕන...මේක ක්‍රම කිහිපයකට කරන්න පුලුවන්.

1. folder එක ඇතුලට ගිහිල්ල Shift Key එක press කරගෙන write  click කරන්න.එතකොට " open command prompt here " කියල ඒවි.ඒක click කරන්න.
2. එහෙම නැතිනම් older එක ඇතුලට ගිහිල්ල address bar එකේ cmd කියල type කරල enter කරන්න.
3. එහෙමත් නැතිනම්  cmd එකේ cd <folder address> (cd D:\My Projects) මෙහෙම කරල enter කරන්න.

මේ මොනවිදිහට කලත් දැන් පහල  තියෙන විදියට cmd එක  ඇවිත් තියේවි.

දැන් මෙතන පහල තියෙන විදියට type කරල enter කරන්න.

>ng new <your_project_name>

ex: ng new myfirstproject

මේ වැඩේට ටික වෙලාවක් යයි.මිනිත්තුවක් 2ක් වගේ...

දැන් ඔයාලගෙ folder එකේ ඔයා දාපු නමින් folder එකක් හැදිල ඇති.

දැන් ඔයා cd <your_project_name> කියන command එක ගහල ඒ හැදුනු folder එක ඇතුලට යන්න ඕන..(මගේ නම් cd myfirstproject)

දැන් අපි හදාගත්තු ප්‍රොජෙක්ට් එක run කරන්නයි යන්නෙ...

අපේ cmd promt එකේ මේ විදියට type කරන්න..

  > ng serve

හරි.දැන් ඔයාලගෙ internet browser(ex:Google Chrome) එකට ගිහින් localhost:4200 කියල type කරල enter කරන්න...

ඔයා හරියට කලා නම් පහල විදියට ඔයාගෙ project එක පෙන්නාවි..

ඔන්න අද ඔයාල angular project එකක් හදල ඒක serve කරන්න ඉගෙන ගත්තා...
අද පොස්ට් එකේ අමාරු දෙයක් තියේනම් පහලින් comment එකක් දාන්න...මීලග post එකන් ආයෙත් හමුවෙමු.

ඉස්තූතියි...

ජයවේවා...

Angular 6 මුල සිට... - Intro

ආයුබෝවන් ඔයාල හැමෝටම...අද මං කියල දෙන්න යන්නෙ angular කියන්නෙ මොකද්ද සහ angular ත් එක්ක ඉස්සරහට වැඩ කරන්නෙ කොහොමද කියල කියල දෙන්න...මේක ලිපි මාලවක් විදියට දිගටම ලියන්න බලාපොරොත්තු වෙනවා...

හරි.angular කියල කියන්නෙ open source front-end web application platform  එකක්..මේකට  open source කියන්නෙ මේකෙ source code එක අපට මේ ලින්ක් එකෙන්  ගිහින්  ඩව්න්ලෝඩ් කරගන්න පුලුවං.ඒ වගේම ඒක වෙනස් කරන්න සහ ඒකට contribute කරන්නත් අවස්තාව තියෙනව..angular කියල 100%  free platform එකක්.. ඒ වගේම angular කියන්නෙ google ලගෙ වැඩක්...

මීට අවුරුදු 7 කට විතර කලින් release උනු angularJS කියන එකේම latest version තමයි angular 2,angular 4,angular 5 සහ මේ වෙද්දි තියෙන latest ම version එක angular 6 කියන්නෙ..මේ තියෙන්නෙ එයාලගෙ website එක.ඔයාලත් මේ ලින්ක් එකෙන් ගිහින් බලන්න.

ඉතිං මේ ලිපි මාලාවෙන් කියල දෙන්න යන්නෙ angular 6 ගැන.angular 6 කිව්වට බයවෙන්න එපා...මේ කලින් කියපු version හැම එකකම basics ගොඩක් දුරට සමානයි.

වැඩි කතා ඕන නෑ..අපි වැඩේට බහිමු..මුලිම්ම angular ඉගෙන ගන්න කලින් අපි දැනගෙන ඉන්න ඕන දේවල් මොනවද කියල බලමු.

1. HTML පිලිබඳ පොඩි දැනුමක්
2. CSS ටිකක්
3. Javascript/Typescript
4. terminal එකත් එක්ක වැඩකරන හැටි

දැන් ඔයාලට මේ උඩ කියපු දේවල් බෑ කියල බයවෙන්න එපා...මේ පාඩම දිගටම කරගෙන යද්දි ලේසියෙන්ම ඒව ගැන දැනගන්න පුලුවං.

හරි.දැන් අපි බලමු development environment  එක setup කරගන්න හැටි...ඒ කියන්නෙ ඔයාලගෙ computer එක angular develop කරන්න පුලුවන් විදියට හදාගන්න හැටි..

මුලින්ම ඔයාගෙ ලැප් එකේ node install කරල තියෙන්න ඕන...ඒක නැත්නම් මෙතනින් ගිහිං download කරගන්න.. 

ඔය ලින්ක් එකට ගියාම මේ වගේ page එකකට යාවි..

ඒකෙ "Recommended for most users" කියන තැනින් setup එක download කරගෙන install කරගන්න..(install කරග්න්න විදිය ගැන අමුතුවෙන් කියන්න දෙයක් නෑනෙ..default settings දීල install කරන්න තමයි තියෙන්නෙ..)

ඊලගට ඔයාට මේ වැඩේට text editor එකක් ඕන වෙනවා... මේකට Visual Studio Code,Web Storm වගේ text editor එකක් use කරන්න පුලුවං... මෙතනින් ගිහිං Visual Studio Code එකේ setup එක download කරගෙන install කරගන්න...

හරි..දැන් තියෙන්න angular CLI එක install කරගෙන අලුත් angular ප්‍රොජෙක්ට් එකක් හදාගන්න...අපි ඒක කරන හැටි ඊලග ලිපියෙන්  බලමු.

මේ කියපු දේවල් වල ප්‍රශ්න අඩුපාඩු තියේනම් යටින් comment එකක් දාගෙන යන්න..

කියෙව්වට ඉස්තූතීයි..

ජයවේවා...!!!

References : www.javatpoint.com , learntocoding.com