AngularJS Guide Part 1

[ciaompe]

Angular Js කියන්නේ cllient-side MVC/MVVM framework එකක් , මේක හැදුවේ google සමගම නිසා මේක ආපු දවසේ ඉදලම ගොඩක් famous උනා , Angular වලින් කරන්න පුළුවන් වැඩ ගොඩක් තියෙනවා, හැබැයි මේක ගොඩක්ම famous උනේ Single Page Web Applications හදන්න , එත් දැන් websites හදන්නත් මේක use කරනවා. ඒ වගේම තමයි මේ දවස්වල Angular Js base කරගෙන හදපු Ionic ( Hybrid Mobile Application ) development framework එක use කරනවා ගොඩක් mobile application හදන්නත් . Ionic වල තියෙන වාසිය තමයි HTML & CSS , Javascripts විතරක් use කරලා mobile app එකක් හදාගන්න පුළුවන් වෙන එක.

Angular Js install කරන්න ඔයාගේ computer එකේ node JS install කරලා තියෙන්න ඕනේ Angular CLI (Command Line Interface) එක ඕනේ Angular app එක create, test, build, deploy කරන්න, ඒ වගේම තමයි angular වල සමහර codes මේ CLI එක හරහා generate කරගනත් පුළුවන් .

Node Js install කරන විදිය

---

www.nodejs.org වලට ගිහින් තමන්ගේ platform එකට අදාලව nodejs download කරගෙන install කරගන්න. තව instruction official page එකේ තියෙනවා.

Angular install කරමු

---

Node JS install කරගත්තට පස්සේ install කරගන්න ඕනේ Angular CLI එක . ඔයාගේ computer එකේ command line / terminal එක open කරලා පල්ලෙහා තියෙන code එක run කරන්න

npm install -g @angular/cli

Angular app එක create කරමු

---

Angular Js install කරගත්තට පස්සේ ඔයාට project එක create කරන්න ඕනේ තැනට ගිහින් terminal එකේ, Angular CLI command එකෙන් workspace එකක් create කරගන්න ඕනේ, මේකේ my-app කියන්නේ ඔයාගේ app එකේ name එක .

cd desktop
ng new my-app

මේ ng new command එක run කරාම ඔයාගෙන් අහනවා app එකේ informations ටික , දැනට හැම එකටම enter press කරලා default තියන්න. පස්සේ මේ infomations වෙනස් කරගන්න පුළුවන් ඔයාට.

**Note : ng new command එකෙන් Angular npm packages සහ other dependencies install කරන නිසා app එක create වෙන්න ටිකක් වෙලා ගන්නවා.

Angular app එක run කරමු

---

ඔයාගේ Angular app name එකෙන් create උන folder එකට යන්න.

cd my-app

folder එකට ගියාට පස්සේ Angular CLI එකෙන් serve කරන්න පුළුවන් අපි හදාගත්ත angular app එක. angular serve එකෙන් start කරනවා local server එකක්, ඒ වගේම ඔයාගේ app එකේ හැම file එකක්ම watch කරනවා, මේකේ තියෙන තවත් වාසියක් තමා අපි මොකක් හරි change එකක් කරොත් file එකකට rebuild කරනවා automatically, (auto reload වෙනවා කියලත් මේකට කියනවා)

ng serve --open

angular serve උනාට පස්සේ automatically open වෙනවා app url (http://localhost:4200/) එක ඔයාගේ computer එකේ default web එකෙන් . එහෙම open උනේ නැත්නම් , angular serve එක ආපහු run කරන්න --open (or just -o) flag එකත් එක්ක .

පහල තියෙන image වගේ default app එකේ view එක ඔයාට බලාගන්න පුළුවන්.

next step එකේදී බලමු මේ app එක එඩිට් කරගන්න කොහොමද කියලා සහ angular app එකක් හදන්න දැනගන්න ඕනේ මොනාද කියලා (Controllers, Directives, Services, Factories, Filters) , angular documentation එකේ හැමදේම simple විදියට කියලා තියෙනවා , මම එක තව simple කරලා සිංහලෙන් දාන්නම් . ඉස්සරහටත් lankadeveloeprs.com එකතු වෙලා ඉන්න.

මේක simple start එකක් උනාට , ඔයාට පුළුවන් angular documentation එක refer කරලා advanced පැත්තටම යන්න, angular ගොඩක් ලේසි වගේම ලොකු community එකක් ඉන්න නිසා ඔයා මොකක් හරි දෙකදී හිර උනොත් හෙල්ප් කරන්න කට්ටිය ඉන්නවා.angular ගැන ප්‍රශ්න තියෙනවනම් මෙතන දාන්න , ලංකාවේ angular වැඩ කාරයෝ help කරයි.

Source : https://angular.io/guide/quickstart

[fern]

@ciaompe thanks bro

[dev_lak]

superb machn

[root]

Nice explanation. Keep it up bro .Best of luck Lanka Developers.

[dinlinux]

Superb. Keep it up brother..

[maheshmb]

Thanks bro.

[rachitha]

Niyamai brother
Digatama karagena yamu
Jaya wewa..

[DevKasun]

supiri.dan habai Angular nam bahagena yana seen ekak tiyenne neda? React , Vue tama issarahata awit tiyenne

[Foxy]

Niyamai macho hodata therenna explain karala thiyenawa

[ciaompe]

@Foxy

elaz diagatama set wela idapan

[Deucalion]

Thanks. Keep it up.