IT help desk: Angular පාඩම - 4

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

test.component.html
test.component.css
test.component.spec.ts
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 එක.