කලින් ලිපියෙන් කතා කල විදියට අපි අපේ mean project එකේ මූලික අදියර අවසන් කරල තියෙන්නෙ.
අපි මේ වෙනකොට කතා කරල තියනව node install කරගන්න විදිය, express application එකට යොදා ගන්න විදිය, server එක හදා ගන්න එක වගේ දේවල්.
අපි දැන් කතා කරමු කොහොමද අපේ application එකේ folder structure එක හදා ගන්න විදිය සහ Angular.JS අපේ application එකට භාවිතා කරන විදිය. ඒ කියන්නෙ front end එක හදා ගන්න විදිය.
Folder structure
meanApp කියන අපේ root folder එකේ මේ වෙනකොට තියනව
node_modules folder
app.js
package.json
package-lock.json file එකත් package.json වගේම generate වෙන file එකක්. මේ file එක auto update වෙනව package.json file එක හෝ node_modules folder එකේ tree structure එක වෙනස් වුනාම. මේ සියල්ලන්ගෙම තොරතුරු තියාගන්න file එකක් විදියට package-lock.jason file එක හඳුන්වන්න පුලුවන්.
අපි මේ කියන files, folders වලට අමතරව තවත් files සහ folders කිහිපයක් add කරගන්න ඕනෙ.
මුලින්ම අපි root folder එකේ හදා ගන්නව තවත් folder එකක් public කියල. මේ folder එක අපි පාවිච්චි කරන්නෙ අපේ application එකට අදාල HTML, CSS වගේ frontend related files තියාගන්න.
අපි මුලින්ම sample HTML file එකක් හදා ගනිමු අපේ public folder එක ඇතුලෙ index.html කියල.
ඒ file එක හදා ගත්තට පස්සෙ කරන්න තව ප්‍රධාන වැඩක් තියනව. ඒ තමයි public folder එක server එකෙන් access කරන විදියට හදා ගන්න ඕනෙ.
අපි මුලින් හදපු app.js file එකේ change එකක් කලාම මේ දේ පහසුවෙන්ම කරගන්න පුලුවන්.
app.use(express.static(__dirname+"/public"));
මේ code එක අපේ app.js file එකට add කලාම අපිට ඕනෙ දේ සිද්ද වෙනව. මේකෙන් කියන්නෙ මොකද්ද කියල අපි ටිකක් පැහැදිලි කරගනිමු.
(__dirname+"/public"));
මේ කියන code part එකෙන් output එක විදියට එන්නෙ root folder එකේ ඉඳල public folder එකට යනකන් තියන path එක.
__dirname කියන කොටසෙන් කියන්නෙ app.js කියන file එක තියන තැන.
මේකෙදිනම් app.js තියෙන්නෙ root එකේ නිසා ඒ කොටස නැති වුනා කියල ගැටලුවක් නෑ. නමුත් සමහර අවස්තා වලදි ඒක ගැටලුවක් වෙන නිසා ඒ කොටසත් පාවිච්චි කරන්න පුරුදු වෙන්න.
ඊට පස්සෙ “/public” කියන කොටස මුල් කොටසත් එක්ක concatenate කරල තියෙන්නෙ. ඒ විදියට තමයි මේ path එක හදාගෙන තියෙන්නෙ.
(මේ කොටස තේරුම් ගන්න බැරි උනාට ගැටලුවක් කරගන්න එපා. ඉදිරියට යමු.)
මේ image එකෙන් පෙන්නන්නෙ app.js එකට අදාල code එක.
දැන් නැවත terminal එකෙන් server එක restart කරල node app.js කියන command එකෙන් server එක run කලාම HTML file එකේ content එක display වෙනවා.
(දැනට server එක run වෙනවනන් ඒක නවත්තන්න terminal එකේ Ctrl+c කියන command එක use කරන්න.)
මේ විදියට තමයි folder structure එක හදා ගන්න ඕනෙ. තව දුරටත් ඉදිරියට යද්දි තවත් කොටස් මේ structure එකට එකතු වේවි. දැනට තියෙන්න ඕනෙ tree එක තමයි මේ.
දැන් බලමු කොහොමද අපි Angular භාවිතා කරන්නෙ කියල.
Angular භාවිතා කිරීම.
අපිට ඉතාම පහසුවෙන් JavaScript file එකක් සාමාන්‍යයෙන් HTML file එකකට import කරන විදියටම Angular අපේ application එකේ use කරන්න පුලුවන්.
ඒකට කරන්න තියෙන්නෙ
මේ ලින්ක් එකෙන් CDN link එක අරන් HTML file එකට දාගන්න.
අපි උදාහරණයක් විදියට සරල Angular code එකක් මගින් මූලික දේවල් කිහිපයක් පැහැදිලි කර ගනිමු.
මේ රූපයේ තියෙන්නෙ සරල angular code එකක්. කලින් කිව්ව විදියට line no – 6 වල Angular වලට අදාල CDN link එක දාගෙන තියනව.
අපි code එක පැහැදිලි කර ගනිමු.
ng-app
මේ මගින් තමයි Angular වලට application එකේ root එක හඳුන්වා දෙන්නෙ. අපි අනිවාර්යයෙන් root එක define කරන්න අවශ්‍ය වෙනව.
ng-model
input field එකට අදාල values ගන්න පාවිච්චි කරන model එකට තමයි ng-model කියන්නෙ. මේක name attribute එකට සමානයි. මේ හරහ අපිට කෙලින්ම input field එක access කරන්න හැකියාව තියනව. අපි මොනම දෙයක් හෝ input field එකට enter කරනවනන් real time ඒක model එකෙන් අරගන්නව.
අපිට අවශ්‍ය උනාම ng-model එකට දීල තියන නම use කරල අදාල value එක ලබා ගන්න පුලුවන්. මේකෙදි වෙන්නෙත් ඒ වගේ දෙයක් තමයි.
{{yourName}}
කලින් කිව්ව වගේ yourName කියන එකට අදාල value එක retrieve කරගන්න විදිය තමයි මේ. මෙහිදී භාවිතා කරන්නෙ data binding කියන එක.
Model එක වෙනස් වන විට view එක automatically update කරන්න භාවිතා කරන ආකාරයක් තමයි data binding කියන්නෙ.
මේ code එක index.html file එකට දාල browser එක refresh කරල බලන්න.
එවිට පහත ලෙස පෙන්වාවි.
දැන් පහත text box එකට value එකක් දී බලන්න. එවිට real time එම value එක display කරන ආකාරය දැක ගත හැකියි.
මෙම ලිපියෙන් අපි කතා කලේ Angular වල මූලික කොටසක්. මීළඟ ලිපියෙන් අපි බලමු Angular වලදි Controllers අපිට ඕනෙ වෙන්නෙ කොහොමද කියන එක වගේම controlers එක්ක වැඩ කරන විදිය.