Angular bilan ishlashni boshlash

Angular-dan foydalanish uchun Node.js-ga kiritilgan npm kerak.

Node.js ni tekshiring

Angular asboblari (CLI va qurish vositalari) Node.js da ishlaydi va paketlarni o‘rnatish uchun npm dan foydalanadi.

Node.js va npm o‘rnatilganligini va PATH da o‘rnatilganligini tasdiqlash uchun ularni ishga tushiring:

node -v

Bu sizning o‘rnatilgan Node.js versiyasini chop etadi, masalan:

v20.x.x

Angular joriy LTS (Long Term Support) nashri (18 yoki 20) bilan yaxshi ishlaydi.

Agar “buyruq topilmadi” xatosiga duch kelsangiz, Node.js-ni o‘rnating (batafsil ma’lumot uchun Node.js qo‘llanmamizga tashrif buyuring).

npm ni ham tekshirishingiz mumkin:

npm -v

npm - Node paketlar menejeri.

Bu sizning npm versiyangizni chop etadi, masalan:

10.x.x

npm avtomatik ravishda Node.js bilan o‘rnatilishi kerak.

Angular CLI-ni o‘rnating

Angular CLI - Angular ilovalarni yaratish, yaratish va ularga xizmat ko‘rsatish uchun rasmiy vositadir.

CLI (Buyruqlar qatori interfeysi) loyihalarni yaratadi, ishlab chiqaruvchi serverni ishga tushiradi va foydali buyruqlar beradi.

Angular CLI ni global miqyosda o‘rnating:

npm install -g @angular/cli

Uni global miqyosda o‘rnatish ng buyrug‘ini hamma joyda mavjud qiladi.

npx-dan global o‘rnatmasdan ham foydalanishingiz mumkin.

Agar siz ruxsat berish xatolariga duch kelsangiz, npx-dan foydalaning yoki terminalingizni yuqori huquqlar bilan boshqaring.

Angular CLI-ni tekshiring

ng sizning PATH-da ekanligiga va versiyalar mos kelishiga ishonch hosil qilish uchun o‘rnatishni tasdiqlang.

ng version

O‘rnatishni tasdiqlashingiz uchun Angular CLI, Node.js va Angular paket versiyalarini ko‘rsatadi:

Angular CLI: 18.x.x Node: 20.x.x Package Manager: npm 10.x.x

PATH - bu tizimingiz ng kabi buyruqlarni qidiradigan papkalar ro‘yxati.

Angular dastur yarating

my-angular-app nomli loyiha yarating:

ng new my-angular-app

Bu loyiha fayllari va papkalarini yaratadi va bog‘liqliklarni o‘rnatadi.

Bu bir necha daqiqa vaqt olishi mumkin va bir nechta so‘rovlarni so‘raydi (quyida tavsiya etilgan variantlarni ko‘ring).

So‘ralganda tavsiya etilgan tanlovlar:

Uslublar jadvali formati: CSS (keyinroq o‘zgartirishingiz mumkin)
Server tomonida ko‘rsatish (SSR): Hozircha yo‘q (keyinroq ng add @angular/ssr bilan qo‘shishingiz mumkin)
Hududsiz ilova: Hozircha yo‘q (keyinroq ng add @angular/zoneless bilan o‘zgartirishingiz mumkin)
Boshqa takliflar: standart sozlamalarni saqlang

Agar siz CLI-ni global miqyosda o‘rnatishni xohlamasangiz, npx-dan foydalanishingiz mumkin:

npx @angular/cli@latest new my-angular-app

Angular ilovasini ishga tushiring

cd my-angular-app ng serve

cd yangi loyiha papkangizga kiradi.

ng serve mahalliy ishlab chiqaruvchi serverni ishga tushiradi va o‘zgarishlarni kuzatadi.

Birinchi qurilish bir daqiqa vaqt olishi mumkin.

✔ Compiled successfully. ✔ Browser application bundle generation complete.

Ilovani standart brauzeringizda avtomatik ravishda ochish uchun --open bayrog‘ini qo‘shishingiz mumkin:

ng serve --open

Odatiy bo‘lib ishlab chiqaruvchi server http://localhost:4200 da ishlaydi.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish