<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[AngularJS Guide Part 1]]></title><description><![CDATA[<p dir="auto"></p><section class="align-center"><img src="/assets/uploads/files/1545303782696-angularjs-resized.jpg" alt="0_1545303782535_AngularJS.jpg" class=" img-responsive img-markdown" /></section><p></p>
<p dir="auto">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 &amp; CSS , Javascripts  විතරක් use කරලා mobile app එකක් හදාගන්න පුළුවන් වෙන එක.</p>
<p dir="auto">Angular Js install කරන්න ඔයාගේ computer එකේ node JS install කරලා තියෙන්න ඕනේ Angular CLI (Command Line Interface) එක ඕනේ Angular app එක create, test, build, deploy කරන්න, ඒ වගේම තමයි angular වල සමහර codes මේ CLI  එක හරහා generate කරගනත් පුළුවන් .</p>
<h3>Node Js install කරන විදිය</h3>
<hr />
<p dir="auto"><a href="http://www.nodejs.org" target="_blank" rel="noopener noreferrer nofollow ugc">www.nodejs.org</a> වලට ගිහින් තමන්ගේ platform එකට අදාලව nodejs download කරගෙන install කරගන්න. තව instruction official page එකේ තියෙනවා.</p>
<h3>Angular install කරමු</h3>
<hr />
<p dir="auto">Node JS  install කරගත්තට පස්සේ install කරගන්න ඕනේ Angular CLI එක  . ඔයාගේ computer  එකේ  command line / terminal එක open කරලා පල්ලෙහා තියෙන code එක run  කරන්න</p>
<pre><code>npm install -g @angular/cli
</code></pre>
<h3>Angular app එක create කරමු</h3>
<hr />
<p dir="auto">Angular Js install කරගත්තට පස්සේ ඔයාට project එක create  කරන්න ඕනේ තැනට ගිහින් terminal එකේ, Angular CLI  command එකෙන් workspace එකක් create කරගන්න ඕනේ, මේකේ my-app කියන්නේ ඔයාගේ app එකේ name එක .</p>
<pre><code class="language-markdown">cd desktop
ng new my-app
</code></pre>
<p dir="auto">මේ ng  new command එක run කරාම  ඔයාගෙන් අහනවා app  එකේ informations ටික , දැනට හැම එකටම enter press කරලා default තියන්න. පස්සේ මේ infomations වෙනස් කරගන්න  පුළුවන් ඔයාට.</p>
<p dir="auto">**Note : ng  new  command  එකෙන්  Angular npm packages සහ other dependencies install කරන නිසා  app එක create වෙන්න ටිකක් වෙලා ගන්නවා.</p>
<h3>Angular app එක run  කරමු</h3>
<hr />
<p dir="auto">ඔයාගේ Angular app  name  එකෙන් create උන folder  එකට යන්න.</p>
<pre><code class="language-markdown">cd my-app
</code></pre>
<p dir="auto">folder එකට ගියාට පස්සේ Angular CLI එකෙන් serve කරන්න පුළුවන් අපි හදාගත්ත angular app එක. angular serve  එකෙන් start කරනවා local  server  එකක්, ඒ වගේම ඔයාගේ app එකේ හැම file එකක්ම watch කරනවා, මේකේ තියෙන තවත් වාසියක් තමා අපි මොකක් හරි change එකක් කරොත් file එකකට rebuild කරනවා automatically, (auto reload වෙනවා කියලත් මේකට කියනවා)</p>
<pre><code class="language-markdown">ng serve --open
</code></pre>
<p dir="auto">angular serve උනාට පස්සේ automatically open වෙනවා app url (<a href="http://localhost:4200/" target="_blank" rel="noopener noreferrer nofollow ugc">http://localhost:4200/</a>)  එක ඔයාගේ computer එකේ  default web එකෙන් . එහෙම open උනේ නැත්නම් , angular serve එක ආපහු run කරන්න --open (or just -o) flag  එකත් එක්ක .</p>
<p dir="auto">පහල තියෙන image  වගේ default app එකේ view එක ඔයාට බලාගන්න පුළුවන්.</p>
<p dir="auto"><img src="/assets/uploads/files/1545302907665-app-works.png" alt="0_1545302907342_app-works.png" class=" img-responsive img-markdown" /></p>
<p dir="auto">next step එකේදී බලමු මේ app එක එඩිට් කරගන්න කොහොමද කියලා සහ angular app  එකක් හදන්න දැනගන්න ඕනේ මොනාද කියලා (Controllers, Directives, Services, Factories, Filters) , angular  documentation එකේ හැමදේම simple විදියට කියලා තියෙනවා , මම එක තව simple කරලා සිංහලෙන් දාන්නම් . ඉස්සරහටත් <a href="http://lankadeveloeprs.com" target="_blank" rel="noopener noreferrer nofollow ugc">lankadeveloeprs.com</a> එකතු වෙලා ඉන්න.</p>
<p dir="auto">මේක simple  start එකක් උනාට , ඔයාට පුළුවන් angular documentation එක refer කරලා advanced පැත්තටම යන්න, angular ගොඩක් ලේසි වගේම ලොකු community එකක් ඉන්න නිසා ඔයා මොකක් හරි දෙකදී හිර උනොත් හෙල්ප් කරන්න කට්ටිය ඉන්නවා.angular ගැන ප්‍රශ්න තියෙනවනම් මෙතන  දාන්න , ලංකාවේ angular  වැඩ කාරයෝ help කරයි.</p>
<p dir="auto">Source : <a href="https://angular.io/guide/quickstart" target="_blank" rel="noopener noreferrer nofollow ugc">https://angular.io/guide/quickstart</a></p>
]]></description><link>https://lankadevelopers.lk/topic/43/angularjs-guide-part-1</link><generator>RSS for Node</generator><lastBuildDate>Mon, 13 Apr 2026 23:45:33 GMT</lastBuildDate><atom:link href="https://lankadevelopers.lk/topic/43.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 20 Dec 2018 11:01:50 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Tue, 29 Dec 2020 19:18:22 GMT]]></title><description><![CDATA[<p dir="auto">Thanks. Keep it up.</p>
]]></description><link>https://lankadevelopers.lk/post/4209</link><guid isPermaLink="true">https://lankadevelopers.lk/post/4209</guid><dc:creator><![CDATA[Deucalion]]></dc:creator><pubDate>Tue, 29 Dec 2020 19:18:22 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Mon, 24 Dec 2018 12:35:28 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://lankadevelopers.lk/uid/20">@Foxy</a></p>
<p dir="auto">elaz diagatama set wela idapan</p>
]]></description><link>https://lankadevelopers.lk/post/362</link><guid isPermaLink="true">https://lankadevelopers.lk/post/362</guid><dc:creator><![CDATA[ciaompe]]></dc:creator><pubDate>Mon, 24 Dec 2018 12:35:28 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Mon, 24 Dec 2018 07:03:38 GMT]]></title><description><![CDATA[<p dir="auto">Niyamai macho hodata therenna explain karala thiyenawa</p>
]]></description><link>https://lankadevelopers.lk/post/358</link><guid isPermaLink="true">https://lankadevelopers.lk/post/358</guid><dc:creator><![CDATA[Foxy]]></dc:creator><pubDate>Mon, 24 Dec 2018 07:03:38 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Mon, 24 Dec 2018 04:28:19 GMT]]></title><description><![CDATA[<p dir="auto">supiri.dan habai Angular nam bahagena yana seen ekak tiyenne neda? React , Vue tama issarahata awit tiyenne</p>
]]></description><link>https://lankadevelopers.lk/post/353</link><guid isPermaLink="true">https://lankadevelopers.lk/post/353</guid><dc:creator><![CDATA[DevKasun]]></dc:creator><pubDate>Mon, 24 Dec 2018 04:28:19 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Mon, 24 Dec 2018 03:32:26 GMT]]></title><description><![CDATA[<p dir="auto">Niyamai brother<br />
Digatama karagena yamu<br />
Jaya wewa..</p>
]]></description><link>https://lankadevelopers.lk/post/352</link><guid isPermaLink="true">https://lankadevelopers.lk/post/352</guid><dc:creator><![CDATA[rachitha]]></dc:creator><pubDate>Mon, 24 Dec 2018 03:32:26 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Thu, 20 Dec 2018 13:48:51 GMT]]></title><description><![CDATA[<p dir="auto">Thanks bro.</p>
]]></description><link>https://lankadevelopers.lk/post/266</link><guid isPermaLink="true">https://lankadevelopers.lk/post/266</guid><dc:creator><![CDATA[maheshmb]]></dc:creator><pubDate>Thu, 20 Dec 2018 13:48:51 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Thu, 20 Dec 2018 11:52:23 GMT]]></title><description><![CDATA[<p dir="auto">Superb. Keep it up brother..</p>
]]></description><link>https://lankadevelopers.lk/post/259</link><guid isPermaLink="true">https://lankadevelopers.lk/post/259</guid><dc:creator><![CDATA[dinlinux]]></dc:creator><pubDate>Thu, 20 Dec 2018 11:52:23 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Thu, 20 Dec 2018 11:46:19 GMT]]></title><description><![CDATA[<p dir="auto">Nice explanation. Keep it up bro .Best of luck  Lanka Developers.</p>
]]></description><link>https://lankadevelopers.lk/post/258</link><guid isPermaLink="true">https://lankadevelopers.lk/post/258</guid><dc:creator><![CDATA[root]]></dc:creator><pubDate>Thu, 20 Dec 2018 11:46:19 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Thu, 20 Dec 2018 11:39:15 GMT]]></title><description><![CDATA[<p dir="auto">superb machn</p>
]]></description><link>https://lankadevelopers.lk/post/257</link><guid isPermaLink="true">https://lankadevelopers.lk/post/257</guid><dc:creator><![CDATA[dev_lak]]></dc:creator><pubDate>Thu, 20 Dec 2018 11:39:15 GMT</pubDate></item><item><title><![CDATA[Reply to AngularJS Guide Part 1 on Thu, 20 Dec 2018 11:13:01 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="https://lankadevelopers.lk/uid/1">@ciaompe</a> thanks bro</p>
]]></description><link>https://lankadevelopers.lk/post/256</link><guid isPermaLink="true">https://lankadevelopers.lk/post/256</guid><dc:creator><![CDATA[fern]]></dc:creator><pubDate>Thu, 20 Dec 2018 11:13:01 GMT</pubDate></item></channel></rss>