Angular JS මුලසිට – 3


කලින් පොස්ට් එකේදී විස්තර කරපු විදියට front-end එකේ data display කරන්න පුළුවන් expressions use කරලා. නමුත් මේ front-end එකට serve කරන data structured වෙනවා නම් තමයි app එකේ stability එක වගේම maintainability එකත් රැකෙන්නේ. මෙතැනදී අපි JavaScript object එකක් තමයි use කරන්නේ. 

var pen= {
name: 'Sign Pen',
price: 2.95,
description: 'This is sample description',
}

Controllers

Angular වලදී controllers වලින් තමයි app එකේ activities handle කරන්නේ. සරලව කියනවා නම් app එක වැඩ කරන්නේ කොහොමද කියන එක.

7

දැන් බලමු කලින් create කරපු object එක app.js එකේ use කරන්නේ කොහොමද කියලා. මෙතැනදී app එකේ define වෙන්න ඕන මොනවද use කරන data resources කියන එක.

8

දැන් data process කරන part එක ඉවරයි. දැන් තියෙන්නේ data serve කරන part එක. ඒක කරන්න ඕන index.html එකේ.

9

මෙතන රතු පාටින් පෙන්නලා තියන div එකේ තියන structure එකට තමයි අපි data load කරන්න ඕන. ඒ නිසා මුලින්ම කරන්න ඕන මේ structure එක හරියට හදාගන්න එක. මෙතැනදී plain text එකක් උනාට app එකකදී නම් css styling එහෙම තියන design එකක් තමයි තියෙන්නේ.

කලින් ලිව්ව object එකේ controller එක define කරන්න තමයි දැන් තියෙන්නේ. මෙතනින් තමයි කියන්නේ controller එකේ තියන values, functions access කරන්න පුළුවන් මොන scope එකේදීද කියන එක.

මෙතනදී අලුත් දේවල් කීපයක් එනවා.

  • Directive
  • Controller name
  • Alias

10

code එකේ 7 වෙනි line එකේ තියෙන්නේ controller එක define කරන විදිය.

  • Directive – ng-controller
  • Controller name – StoreController
  • Alias – store

දැන් මේ scope එක ඇතුලේ කලින් create කරපු object එක access කරන්න පුළුවන් මේ විදියට. මේ div එකෙන් පිට scope එකකදී object එක access කරන්න බැහැ.

11

මේ විදියට තමයි final result එක එන්නේ.

12

තව දුරටත් data එක්ක වැඩ කරන්නේ කොහොමද කියලා ඊළඟ tute එකේදි බලමු.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s