Angular - 3 |Bootstrap and JS installation

Feb 03, 2021

අද කරන්න යන්නෙ අපි හදාගත්තු angular project එකට bootstrap සහ JavaScript install කරන විදිය සහඅපේ project එක component වලට වෙන්කරන විදියගැනයි.

මුලින්ම අපි අපේ angular project එකට bootstrap සහ JavaScript install කරගැනීමට https://getbootstrap.com/ කියන bootstrap official web site එක use කරනවා.

Bootstrap Site

දැන් මම 2 වන article එකේ කරපු විදියට  

අපේ file path  එකටගිහින් url bar එකේ cmd කියන command එක type කරලා Enter key එක press කරන්න.

cmd

දැන් කලින් කීව විදියට 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  කිරිමයි..

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.