Angular. Kirish

Angular.
Kirish
Angular bu OOP asosida web saytlarning Front End qismini qiluvchi JavaScript frameworki hisoblanadi.
Angularda qilingan saytlar toza kod arxitekturasi asosida bo’ladi.
Web sayti: https://angular.io
Angularda ishlash uchun NodeJs muhitidan foydalaniladi.(nodejs.org)
Nodjs o’rnatilganligini bilish: node -v
Angularni o’rnatish(cmd orqali): npm install -g @angular/cli
Angular o’rnatilganligini bilish: ng v

Angularda yangi loyiha yaratish uchun cmd orqali kerakli papkaga

Kirib olinadi. So’ngra: ng new
buyrug’i beriladi.
Masalan: ng new ob-havo
Shundan so’ng routing qo’shishni so’raydi “y” ni kiritamiz
Keyin CSS ni turlarini so’raydi SCSS ni tanlaymiz .
Barcha kutubxonalanri yuklaguncha kutib turamiz.
Yuklab bo’lgach loyiha papkasini VS Code da ochib olamiz.
Loyiha papkasiga cmd orqali “code .” buyrug’i berilsa ham ochiladi.
Angularni yurgizish uchun “ng serve” buyurug’i beriladi.
Succesfully natijasi bo’lgandan so’ng brouzerga
localhost:4200 manzili beriladi.

Angularda kompanent tushunchasi
Component – bu HTMLda qo’lda yasalgan element(teg) bo’lib o’zining klassiga, HTML va CSS kodlariga egadir.
Misol: tugmacha.component.ts
import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-tugmacha',
templateUrl: './tugmacha.component.html',
styleUrls: ['./tugmacha.component.scss']
})
export class TugmachaComponent implements OnInit {

constructor() { }

ngOnInit(): void {

}

}
tugmacha.component.html

tugmacha.component.scss
h1 {
text-align: center;
}


Binding – HTML va Klass o’rtasida integratsiya
Binding deganda biror bir narsani boshqa narsaga bog’lab qo’yish tushuniladi. Angularda bir nechta binding mavjud:

1. 
   Klassdan -> HTML
   

Komponent klassdagi biror o’zgaruvchini htmlga kursatish
Uchun bir tomonlam bindingdan foydalaniladi. Bunda {{ va }}
qavlari ichiga o’zgaruvchi yoziladi.
Misol:
Klassda:
export class AppComponent{
ism=”Anvar”;
}
HTMLda:

{{ism}}

2. 
   Atribut binding
   

Html elementlarning atributiga qiymatni klassdan olish uchun atribut [ ] qavlar ichida yoziladi:
Misol:
rasmManzil = “rasm.jpg”;

3. 
   Html-> Klass
   

HTML elementlarda qiymat o’zgarganda klass ga olish uchun
Hodisa metodilaridan foydalniladi.
Masalan:
HTML:

Klass:
ozgar(event: any){

console.log(event.target!.value);
}

4. 
   Aralash binding ikki tomonlama bo’glanish bo’lib o’zgaruvchi
   

o’zgaritirlsa html elemetnda o’zgarish va html elementning qiymati o’zgarsa o’zgaruvchida o’zgarish bo’ladi.
Buning uchun [(ngModel)]=”ozgaruvchi” ishlatiladi.
KLASS:
yozuv: any;

HTML:

Yozuv: {{yozuv}}
Eslatma: ngModel ishlashi uchun app.module.ts ga
FormsModule qo’shilishi kerak.

Angualarda direktivalar
Direktiva bu html elementni boshqaruvchi buyruqlardir.
Direktivalar ikki xil bo’lib * bilan farqalanadi. * qo’yilgani html ni o’zgaritiruvchidir.

1. 
   *ngIf – bu direktiva o’ziga mantiqiy qiymat olib, qiymat rost bo’lsa elemnti ko’rsatadi yolg’on bo’lsa olib tashlaydi.
   

Misol:

{{user.ism}}

Agar user mavjud bo’lsa uning ismi chiqariladi bo’lmasa ushbu div element olib tashlanadi.
Shart bajarilmasa boshqa narsani chiqarish uchun
… ishlatiladi.
Misol:

{{user.ism}}

User mavjud emas

2. 
   *ngFor – bu direktiva massiv, ro’yxat, to’plamlardan elementlarni HTMLga chiqarish uchun ishlatiladi.
   

Misol:

Ism	Familiya
{{u.ism}}	{{u.familiya}}

3. 
   [ngSwitch] – Berilgan qiymatga qarab bir nechta elementdan
   

Bittasini HTMLda chiqarish uchun ishlatiladi.
Misol:
App.component.ts
lavozim = "DIREKTOR";
app.componets.html

Siz direktorsiz

Siz managersiz

Siz kotibsiz

Noaniq lavozim

constructor – Angular loyihalarda konstruktordan asosan “Dependency Injection” bajarish uchun ishlatiladi.

ngOnInit – construktordan keyin ishlovchi metod bo’lib
bir marta bajariladi.

ngAfterViewInit – komponent HTML hujjati to’liq ishga tushgandan so’ng bir marta ishlovchi metod.

Yangi komponent yaratish uchun “ng g c ” buyrug’i beriladi.
Yaratilgan komponent app.module.ts faylga declaration ga e’lon qilib
Qo’yish zarur(asosan avtomatik o’zi qo’yiladi)