Angular - 3 |Bootstrap and JS installation
අද කරන්න යන්නෙ අපි හදාගත්තු angular project එකට bootstrap සහ JavaScript install කරන විදිය සහඅපේ project එක component වලට වෙන්කරන විදියගැනයි.
මුලින්ම අපි අපේ angular project එකට bootstrap සහ JavaScript install කරගැනීමට https://getbootstrap.com/ කියන bootstrap official web site එක use කරනවා.
දැන් මම 2 වන article එකේ කරපු විදියට
අපේ file path එකටගිහින් url bar එකේ cmd කියන command එක type කරලා Enter key එක press කරන්න.
දැන් කලින් කීව විදියට getbootstrap.com web site එකේ මේ URL එකටගිහින් CSS code එකcopy කරගන්න.
https://getbootstrap.com/docs/5.0/getting-started/introduction/CSS
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
ඒ විදියට copy කරගන්න CSS code එකඅපිකලින් open කරගත්ත අපේ project එකේ index.html කියනfile එකේ <head> </head> tag එකඇතුලෙන් paste කරගන්න
දැන් අපිට පිලිවෙලටම java script bundle එකත් install කරගන්න පුලුවන්.
JS Bundle
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
මීලග පියවර විදියට කරන්නෙ අපේ web page එක design කරන වැඩ. ඒ සදහා,
src > app > app.component.html කියන path එකේ යන්න.
ඒ විදියට ගියාම ඔයාලට sample code තියෙනවා පේනවා ඇති ඇත්තටම මේක අපිට අනවශ්‍යයි ඒ නිසා මේක clear කරගන්න.
ඒ විදියට clear කරගත්තට පසුව
<h1>Hello NG</h1>
රූපයේ තියෙන විදිහට tag එකක් add කරගන්න. ඉන්පසු file සියල්ලම save කරගන්න ..මීළඟට කලින් කරපු විදිහටම අපේ project ඒක run කරලා බලමු.
ඒ සඳහා
ng server -oභාවිතා කරන්න.
දැන් project එක build වෙනවා, මේකට සුළු කාලයක් ගතවෙනවා.
සම්පූර්ණ ප්‍රොජෙක්ට් එක build උනාට පස්සේ ඔයාලට මේ වගේ output දැකගන්න පුළුවන් .
මේ ලිපියෙන් කතා කලේ Angular project එකට Bootstrap සහ JavaScript install කිරිමයි..