Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Birinchi Angular ilovasi

Endi sizning muhitingiz tayyor, keling, oddiy Angular ilovasini yarataylik

ULASHISH

1-qadam: src/main.ts-ni oching

Angular 20 ilovalari mustaqil root komponentini yuklaydi.

Siz uni main.ts da inline belgilashingiz mumkin.

Uni oching va kodni quyidagi bilan almashtiring:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Hello, World!</h1>`
})
class App {}

bootstrapApplication(App);

Misolni ishga tushirish »

Jonli qayta yuklash: Angular ilovasi ishlayotganda (oxirgi bobda ko‘rsatilganidek, ng serve bilan boshlangan), brauzer saqlanganida avtomatik ravishda qayta yuklanadi.

Tez primer: componentlar

  • component - bu ko‘rinishni (uning shablonini) boshqaradigan class.
  • Har bir komponentda HTMLda joylashtirgan selektor (masalan, app-root ) mavjud.
  • root komponenti index.html ning <app-root> ichida ko‘rsatiladi.

Komponentlarni keyinroq chuqurroq o‘rganamiz: componentlar.

2-qadam: index.html-dagi xost elementi

Angular root komponentini uning selektori paydo bo‘lgan joyda ko‘rsatadi.

src/index.html oching va root tegi <body> ichida ekanligiga ishonch hosil qiling.

Teg 1-bosqichdagi component selektoringizga mos kelishi kerak (bu yerda u app-root).

Agar siz loyihani CLI bilan yaratgan bo‘lsangiz, bu teg odatda allaqachon mavjud:

Misol: Minimal indeks.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Angular App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <!-- Host element -->
    <app-root></app-root>
  </body>
</html>

Marshrutlash keyinroq ishlashi uchun <base href="/"> ni <head> da saqlang.

3-qadam: Ba’zi ma’lumotlarni bog‘lang

Xususiyat qo‘shing va uni interpolatsiya bilan ko‘rsating:

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`
})
class App { name = 'Angular 20'; }

bootstrapApplication(App);

Misolni ishga tushirish »

Interpolatsiya component xususiyati o‘zgarganda ko‘rinishni avtomatik ravishda yangilaydi.

Maslahat: iboralarni oddiy qilib qo‘ying.

Ishlash uchun shablonlarda chaqiruv metodlari ustidan xususiyatlardan foydalaning.

Loyiha tuzilishi

Minimal Angular ish maydonidagi asosiy fayllar:

  • src/main.ts - bootstrapApplication bilan ilovani ishga tushiradi.
  • src/app/app.component.ts - root komponenti (agar foydalanilsa). main.ts da root qatorini ham belgilashingiz mumkin.
  • src/app/ - componentlar va xususiyatlarni qo‘shadigan joy.
  • src/index.html - <app-root> ni o‘z ichiga olgan xost sahifasi.
  • src/styles.css - Ilova uchun global uslublar.
  • angular.json - Angular workspace configuration (build, serve, test).
  • package.json - Skriptlar va bog‘liqliklar.
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish