Angular servislarining asosiy vazifalari quyidagilar bo'lishi mumkin

Download 19.25 Kb.
Sana	01.03.2024
Hajmi	19.25 Kb.
	#165289

Bog'liq
Service
adabiyatlar, TIL XAZINA, Xristianlik dininiń bayramları, ЭНЕРГИЯ СОЛНЦА.. (2), Build Your API with Spring, LAB1 SQL, Pazandachilik ishlarida qo’llaniladigan jixozlar, tikuv asbob-uskunalari (1), PSIXOLOGIYA, Общая педагогика-fayllar.org, Amaliy matematika (2), 1-амалий, oOTN7yHd9cDpbT4Gzy5WO8q15U02UmfOpM2lfAFB, 793542, Menejmentda motivlashtirish 140-20 guruh talabasi murotjonova mu

Service
Anqular servislari, Angular framework-i ichidagi katta qisqa funksiyalar, metodlar va ma'lumotlarga oid obyektlar. Ushbu servislar, ilova yoki komponentlardagi mantiqiy kodni ajratib turish va uni qayta ishlash imkoniyatini beradi. Shuningdek, komponentlar va diger servislar orasida ma'lumot almashish va ulashish uchun ham foydalaniladi.

Angular servislarining asosiy vazifalari quyidagilar bo'lishi mumkin:

1. **Ma'lumotlarni olish va qayta ishlash:** API-dan ma'lumotlarni olish, ularni qayta ishlash, filtirlash, taxminiy ma'lumotlar qo'shish va boshqalar.

2. **Kiritilgan ma'lumotlarni saqlash:** Ilgari kiritilgan ma'lumotlarni saqlash, doimiy xotirada o'zgartirishlar qilish va ularga qarab ma'lumotlar qo'shish.

3. **Xizmatlarni boshqarish:** Xodimlar, foydalanuvchilar, mahsulotlar va boshqa narsalarga oid xizmatlarni boshqarish.

4. **Boshqa komponentlarga ma'lumotlar uzatish:** Agar biror komponent boshqa komponentga ma'lumot uzatmoqchi bo'lsa, servislar ularga yordam beradi.

5. **Gloval ma'lumotlar:** Birinchi yuklanayotgan va ilovada o'rnatilgan global ma'lumotlar uchun servislar.

Angular servislarini yaratish uchun `@Injectable()` dekoratoridan foydalaniladi va kerakli funksiyalar uchun lozim bo'lgan metodlarni yozish mumkin. Keyingi qadamda, servislar komponentlarda `constructor` orqali injeksiya qilinadi va ularga kerakli ma'lumotlar o'tkaziladi.

Bunday servislar ko'p vaqt global o'zgaruvchilar yordamida injekt qilinadi, shuningdek, komponentlar yoki modellar orasida ma'lumot almashish uchun kerak bo'lgan xizmatlar kabi.
Angular Validation
Angularda maydonni tekshirish va tasdiqlash juda qulaydir. Ushbu qisqa misolni ko'rsatish orqali maydonlarni qanday tekshirish va xatolar chiqarishni ko'rib chiqamiz.

1. **Tekshirish Qo'llanmasi:** Kiritilgan matn maydonlarini tekshirish uchun Angularda standart direktivlar mavjud. Masalan, `required`, `minlength`, `maxlength`, `pattern` va hokazo.

```html

```

2. **Custom Validatsiyalar:** Kerakli bo'lgan muayyan shartlar va tekshiruvlar bo'yicha o'z foydalanuvchi validatsiya funksiyalarini yaratishingiz mumkin.

```typescript
import { AbstractControl, ValidatorFn } from '@angular/forms';

export function customValidator(): ValidatorFn {

return (control: AbstractControl): {[key: string]: any} | null => {
const forbidden = /admin/.test(control.value);
return forbidden ? {'forbiddenName': {value: control.value}} : null;
};
}
```

3. **FormGroup va FormControl bilan ishlash:** Ko'p maydonli formalar uchun `FormGroup` va shuningdek har bir maydon uchun `FormControl` obyektlari yaratish juda qulaydir.

```typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({

selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;

constructor(private fb: FormBuilder) {

this.myForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(10)]]
});
}

submitForm(form: FormGroup) {

console.log('Form submit successful!', form.value);
}
}
```

Bu oddiy misol asosida Angular formalar va validatsiyalari bilan tanishib chiqing. Buni o'zgartirib, xohlagan usulda o'z imkoniyatlaringizni qo'shishingiz mumkin.

Interpolition
Angular interpolatsiya, Angular templating systems'i yordamida JavaScript ifodalarini HTML-ni ichida namoyish etish imkoniyatini ta'minlaydi. Bu, Angular komponentlari orqali ma'lumotlarni HTML-ni ichida chiqarish uchun juda qulay usul.

Interpolatsiya qo'llanilishi kerak bo'lgan nuqtalar:

1. **Mazmunni dinamik ko'rsatish:** Komponentlar orqali JavaScript ifodalarini HTML-ni ichida namoyish etish, ya'ni {{ ... }} operatorlaridan foydalanish orqali.

```html

Salom, {{ user.name }}

```

2. **O'zgaruvchilarga murojaat:** Interpolatsiya orqali komponentlar ichidagi o'zgaruvchilarga murojaat qilish mumkin.

```html

```

3. **Ifodani murakkablashtirish:** Interpolatsiya yordamida matn, sonlar, arraylar va obyektlar kabi murakkab ifodalarni ham chiqarish mumkin.

```html

Hisoblash natijasi: {{ 2 + 2 }}

Foydalanuvchi soni: {{ users.length }}

```

Interpolatsiya Angular framework-i tomonidan avtomatik ravishda o'zgaruvchilarni ko'rib chiqib, o'zgarishlarga moslashtiradi. Agar ushbu o'zgaruvchilar almashinuvi sodir bo'lsa, HTML-ni avtomatik ravishda yangilaydi.

Shuningdek, interaktiv sahifalar yaratishda juda qulaydir. Agar ko'p ma'lumotlarga ega bo'lgan komponentlaringiz bo'lsa, Angular interpolatsiyasidan kuchli foydalanishingiz mumkin.

Directive

Angular direktivlari, HTML-ni o'zgartirish, boshqarish va dinamik ravishda ruxsat etish imkonini beruvchi usullardir. Bu Angularning kuchli vositasi hisoblanadi va komponentlarni, dom elementlarni va komponentlar orasidagi bog'lanishlarni boshqarish uchun ishlatiladi. Angular direktivlari uchun ikkita turi mavjud: komponent direktivasi va atama direktivasi.

1. **Komponent direktivasi**: Bu, Angular komponentlarining asosiy qismi bo'lib, HTML, CSS va logikani bir qatorda o'z ichiga oladi.

```typescript
import { Component } from '@angular/core';

@Component({

selector: 'app-custom-directive',
template: `
Salom, dunyo!
`,
})
export class CustomDirectiveComponent {}
```

2. **Atama direktivasi**: Bu, bir DOM elementiga o'zgaruvchilar yoki haqiqiy qiymatlar taqdim etish imkonini beradi. Angular boshqaruv qilish uchun keng qo'llaniladi.

```typescript
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({

selector: '[appHighlight]'
})
export class HighlightDirective {

constructor(private el: ElementRef) {}

@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {

this.highlight(null);
}

private highlight(color: string) {

this.el.nativeElement.style.backgroundColor = color;
}
}
```

Bu misolda, `appHighlight` direktivasi yangi bir fon rangi berish uchun ishlatiladi.

Angular direktivlari, elementlarga, atributlarga, klasslarga yoki komponentlarga taalluqli bo'lishi mumkin. Ular, kodni yanada toza va tuzilgan qilishga yordam beradi, shuningdek, ko'proq muvaffaqiyatli korinish uchun komponentlarni kengaytirishga yordam beradi.

Data biding Angular'da, data binding ma'lumotlarni komponentlardan HTML-ga yoki HTML-dan komponentlarga uzatishni tushunish uchun ishlatiladi. Ushbu interaktiv vosita, ma'lumotlarni o'zgartirish va ko'rsatishni osonlashtiradi va foydalanuvchining interaktivlik darajasini oshiradi. Data binding uchun uch turi mavjud:

1. **Interpolatsiya (`{{ ... }}`)**: Ma'lumotni HTML-ni ichida namoyish etish uchun ishlatiladi. Misol uchun:

```html

Salom, {{ user.name }}!

```

2. **Property binding (`[property]="..."`)**: Elementlar orqali JavaScript obyektlarini o'zgaruvchilarga bog'lash uchun ishlatiladi. Misol uchun:

```html

```

3. **Event binding (`(event)="..."`)**: Foydalanuvchi amalini aniqlash va javob sifatida ma'lumotlarni o'zgartirish uchun ishlatiladi. Misol uchun:

```html

```

Data binding Angularning katta qulayliklari orasida hisoblanadi, chunki bu texnologiya komponentlar orasidagi ma'lumot almashish va ulashishni osonlashtiradi. Bu, interaktiv interfeyslar yaratishda va dinamik ma'lumotlarni ko'rsatishda kuchli vosita hisoblanadi.

Download 19.25 Kb.