> For the complete documentation index, see [llms.txt](https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/angular-va-typescript-asoslari.md).

# Angular va TypeScript asoslari

### Mundarija

1. **Angular nima va nima uchun kerak?**
   * Single Page Application (SPA) tushunchasi
   * Angular vs oddiy JavaScript
   * Angular versiyalari. Zamonaviy Angular(14+) afzalliklari
2. **Muhitni sozlash:**
   * Node.js va npm o'rnatish
   * Angular CLI o'rnatish: `npm install -g @angular/cli`
   * Birinchi loyihani yaratish: `ng new math-platform`
3. **TypeScript asoslari:**
   * O'zgaruvchilar: let, const
   * Turlar: string, number, boolean, any
   * Interface va type
   * Funksiyalar va arrow functions
4. **Loyiha strukturasi:**
   * src/app papkasi
   * Component tuzilishi
   * Module nima?

***

### Angular nima va nima uchun kerak?

**Angular** — bu Google tomonidan ishlab chiqilgan **frontend framework** bo’lib web saytlar, web ilovalar, katta va murakkab interfeyslar yaratish uchun ishlatiladi.

Angular yordamida:

* Kod tartibli bo‘ladi
* Katta loyihalarni boshqarish osonlashadi
* Xatolar kamayadi
* Tezkor va interaktiv ilovalar yaratiladi

{% hint style="info" %}
**Oddiy qilib aytganda:** Angular — bu HTML + CSS + JavaScript asosida websaytlarni oson, tez va professional darajada qura olish imkoniyatini beruvchi framework(yozilgan qonun qoida, konsepsiya va kutubxonalar to’plami)
{% endhint %}

{% embed url="<https://youtu.be/pI-9RB78yaw>" %}

***

### Single Page Application (SPA) nima?

#### Oddiy sayt qanday ishlaydi?

Oddiy saytlar har sahifa almashganda Serverga qayta so‘rov yuboradi va sahifa to‘liq yangilanadi. Bu esa sayt sekin yuklanishi, ortiqcha internet sarf bo’lishiga sababchi bo’ladi.

#### SPA qanday ishlaydi?

Faqatgina **bitta HTML sahifa** yuklanadi va qolgan sahifalar, o’zgarishlar JavaScript orqali sahifa yangilanmasdan to’ldirib, o’zgarib boraveradi. Bu esa sayt samaradorligini yanada oshirib beradi ya’ni dasturlash tilida aytganda “performance’i yuqori” bo’ladi.

#### SPA afzalliklari:

* Juda tez ishlaydi;
* Foydalanuvchi uchun qulay interfeys taqdim qiladi (yuqori UX);
* Mobil ilovaga o‘xshab ishlaydi;

“SPA ni Angularga qanday aloqasi bor o’zi?” degan savol sizda tug’ilgan bo’lsa javobi oddiy. Angular - Single Page Application yaratish uchun **eng kuchli frameworklardan biri**.

***

### Angular vs oddiy JavaScript

| Oddiy JavaScript       | Angular               |
| ---------------------- | --------------------- |
| Kichik loyihalar uchun | Katta loyihalar uchun |
| Strukturasi yo‘q       | Qattiq struktura      |
| Hammasi qo‘lda         | Ko‘p narsa avtomatik  |
| Kod chalkashib ketadi  | Kod tartibli          |

{% hint style="info" %}
**Xulosa**

Agar katta va kengayib boradigan loyiha qilmoqchi bo‘lsangiz — Angular to’g’ri tanlov.
{% endhint %}

**⁉️ Topshiriq 1** Siz HTML orqali oddiy input va uning yonida ikkita `+` `-` tugmalarini yasashingiz kerak. `+` tugmasi bosilganda input ichidagi qiymat 1 ga oshishi, `-` tugmasi bosilganda esa 1 ga kamayishi kerak. Bu funksional JavaScript orqali qilinishi kerak. Xo’sh, bu topshiriqni qanday qilasiz? Amalda qilib ko’ring yoki topshiriq juda oddiy bo’lsa qanday qilishingizni miyangizda o’ylab, o’zingizni interviewdaman deb tasavvur qilib unga to’liq javob berishga harakat qiling.

<figure><img src="/files/neDWLUg3osEHqj5FDpNp" alt=""><figcaption></figcaption></figure>

***

### Angular versiyalari. Zamonaviy Angular(14+) afzalliklari

Angular:

* Har 6 oyda yangilanadi
* Eski versiyalar sekin-asta qo‘llab-quvvatlanmaydi

#### Angular 14+ afzalliklari:

* Tezroq ishlaydi
* Standalone Components (Module’siz ishlash)
* Kamroq kod
* Zamonaviy yondashuv

{% hint style="warning" %}
Ushbu kursda **zamonaviy Angular (14+)** ishlatiladi.
{% endhint %}

***

### Muhitni sozlash (Environment Setup)

Angular bilan ishlash uchun quyidagilar kerak:

#### 1. Node.js va npm

* Node.js — JavaScript’ni serverda ishlatadi
* npm — paket menejeri

🔗 Yuklab olish:<https://nodejs.org> (LTS versiyasini tanlang)

Tekshirish:

```bash
node -v
npm -v
```

***

#### 2. Angular CLI o‘rnatish

Angular CLI — Angular loyihalarni boshqarish uchun yordamchi ish quroli.

```bash
npm install -g @angular/cli
```

Tekshirish:

```bash
ng version
```

***

#### 3. Birinchi loyihani yaratish

```bash
ng new math-platform
```

Savollarga tavsiya:

* Standalone: **Yes**
* Routing: **Yes**
* Style: **CSS**

Loyihani ishga tushirish:

```bash
cd math-platform
ng serve
```

Brauzerda:

```
<http://localhost:4200>
```

🎉 Sizning birinchi Angular ilovangiz ishga tushdi!

{% embed url="<https://youtu.be/ZIvAmuck4QA>" %}

***

### TypeScript asoslari

Angular **TypeScript** bilan yoziladi. TypeScript — bu JavaScript’ning kuchliroq versiyasi.

***

#### O‘zgaruvchilar

```tsx
let age: number = 15;
const name: string = 'Ali';
```

* `let` — o‘zgaruvchan
* `const` — o‘zgarmas

***

#### Asosiy turlar (Types)

```tsx
let isActive: boolean = true;
let score: number = 100;
let title: string = 'Matematika';
let data: any = 'istalgan narsa';
```

📌 `any` — imkon qadar kam ishlatiladi.

***

#### Interface va type

**Interface** — obyekt tuzilmasini belgilaydi.

```tsx
interface Student {
	id: number;
	name: string;
	grade: number;
}
```

**Type** ham shunga o‘xshash:

```tsx
type Course = {
	 id:number;
	 title:string;
};
```

***

#### Funksiyalar

```tsx
function add(a: number, b: number): number {
	return a + b;
}
```

#### Arrow function

```tsx
const multiply = (a: number, b: number): number => a * b;
```

{% embed url="<https://youtu.be/w7fLeB2edpY>" %}

***

### Angular loyiha strukturasi

`src/app` papkasi loyihaning asosiy papkasi

```
src/
 └── app/
     ├── app.component.ts
     ├── app.component.html
     ├── app.component.css
```

***

#### Component nima?

Component — bu:

* HTML (ko‘rinish)
* CSS (dizayn)
* TypeScript (mantiq ya’ni logika)

bir joyda saqlanadigan qism.

```tsx
@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent {}
```

***

#### Module nima? (Qisqacha)

Module:

* Ilovani bo‘limlarga ajratadi
* Component, service’larni birlashtiradi

{% hint style="info" %}
Hozirgi zamonaviy Angulardagi **Standalone Component** sababli module deyarli ishlatilmaydi.
{% endhint %}

{% embed url="<https://youtu.be/AcNUd3C7KMc>" %}

{% embed url="<https://youtu.be/2DzboodOY38>" %}

***

### Savollarga javob bering!

1. Angular nima va nima uchun kerak?
2. SPA nima?
3. Angular CLI nima vazifa bajaradi?
4. TypeScript nima uchun kerak?
5. Component deganda nimani tushunasiz?

### **Test**

1. Angular loyihasini yaratish uchun qaysi buyruq ishlatiladi?
   * A) `npm create angular`
   * B) `ng new project-name`
   * C) `angular init`
   * D) `npm install angular`
2. Component yaratish buyrug'i:
   * A) `ng create component`
   * B) `ng add component`
   * C) `ng generate component`
   * D) `ng new component`
3. TypeScript faylining kengaytmasi:
   * A) .js
   * B) .ts
   * C) .jsx
   * D) .angular
4. Angular loyihasini ishga tushirish:
   * A) `npm start`
   * B) `ng serve`
   * C) `node app.js`
   * D) `angular run`
5. Component decoratori qaysi faylda yoziladi?
   * A) .html
   * B) .css
   * C) .ts
   * D) .json

{% hint style="info" %}
[Quiz Bot](https://t.me/QuizBot?start=70iD5PoX)
{% endhint %}

### **Amaliy vazifa**

1. Angular loyihaningiz ichida `math-operations` nomli yangi komponent yarating
2. Komponentda ikkita input maydoni (son1, son2) va 4 ta tugma (+, -, \*, /) yarating
3. Root component ya’ni app.component.ts (yoki app.ts) da esa ushbu componentni chaqirib ishlating.

<figure><img src="/files/aJzsF2Y7L3uWEnckrasj" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/angular-va-typescript-asoslari.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.