Angular CLI And Bootstrap Setup

Photo by Raphael Nogueira on Unsplash

Angular CLI

Angular project တွေတည်ဆောက်ဖို့ နဲ့ တခြားလုပ်ဆောင်ချက်တွေ လုပ်ဖို့ အရင်ဦးဆုံး Angular CLI ကို install လုပ်ပေးရပါမယ်။ Angular CLI ကိုဒီမှာ အသေးစိတ် လေ့လာနိုင်ပါတယ်။

Angular

Angular CLI Installation

npm install -g @angular/cli

Help

ng help
ng generate --help

Create a new project

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Build Project

ng build // In Angular 12, build is default to production

Component Generate

ng generate component COMPONENT_NAME
ng g c COMPONENT_NAME
ng g c COMPONENT_NAME --skip-tests true // skip test file 

Service Generate

ng g s SERVICE_NAME
ng g s SERVICE_NAME --skip-tests true

ဒီလောက်ဆိုရင် Angular CLI ကိုအသုံးပြုပြီး ရေးသားလို့ရပါပြီ။ တခြား command တွေကို လိုအပ်မှရှာပြီးသုံးလို့ရပါတယ်။

Bootstrap 5 setup

Project ထဲကိုဝင်ပြီး install လုပ်ပါ။

npm install bootstrap

styles.scss ကိုဖွင့်ပြီးအောက်ပါစာကြောင်းကိုထည့်ပါ။

@import "~bootstrap/dist/css/bootstrap.min.css";

ဒါဆိုရင် Bootstrap 5 setup ပြီးပါပြီ။

Bootstrap 5 Icon setup

npm i bootstrap-icons

styles.scss ထဲမှာ ဒီစာကြောင်းကိုထည့်ပါ။

@import '~bootstrap-icons/font/bootstrap-icons';

Icon setup ပြီးပါပြီ icon တွေကို ဒီမှာ ကြည့်ပြီးထည့်ပါ။

Previous: Angular Getting Started

Next: Things to know before learning Angular