Home bileşenini oluşturun

Bu eğitim dersi, Angular uygulamanız için nasıl yeni bir bileşen oluşturacağınızı gösterir.

Neler öğreneceksiniz

Uygulamanızda yeni bir bileşen var: Home.

Angular bileşenlerinin kavramsal önizlemesi

Angular uygulamaları, Angular'ın yapı taşları olan bileşenler etrafında oluşturulur. Bileşenler, uygulamadaki bir öğenin işlevini ve görünümünü sağlayan kodu, HTML düzenini ve CSS stil bilgilerini içerir. Angular'da bileşenler başka bileşenler içerebilir. Bir uygulamanın işlevleri ve görünümü bileşenlere bölünebilir ve parçalanabilir.

Angular'da bileşenler, özelliklerini tanımlayan meta verilere sahiptir. Home bileşeninizi oluştururken şu özellikleri kullanırsınız:

  • selector: Angular'ın şablonlarda bileşene nasıl başvurduğunu tanımlar.
  • standalone: bileşenin bir NgModule gerektirip gerektirmediğini tanımlar.
  • imports: bileşenin bağımlılıklarını tanımlar.
  • template: bileşenin HTML işaretlemesini ve düzenini tanımlar.
  • styleUrls: bileşenin kullandığı CSS dosyalarının URL'lerini bir dizi içinde listeler.

  1. Home bileşenini oluşturun

    Bu adımda, uygulamanız için yeni bir bileşen oluşturursunuz.

    IDE'nizin Terminal bölmesinde:

    1. Proje dizininizde, first-app dizinine gidin.

    2. Yeni bir Home bileşeni oluşturmak için bu komutu çalıştırın

      ng generate component home

    3. Uygulamanızı derlemek ve sunmak için bu komutu çalıştırın.

      NOTE: Bu adım yalnızca yerel ortamınız içindir!

      ng serve

    4. Bir tarayıcı açın ve uygulamayı bulmak için http://localhost:4200 adresine gidin.

    5. Uygulamanın hatasız derlendiğini doğrulayın.

      HELPFUL: Yeni bir bileşen eklemiş olsanız bile, henüz uygulamanın şablonlarından hiçbirine dahil etmediğiniz için önceki dersteki gibi görünmesi gerekir.

    6. Sonraki adımları tamamlarken ng serve komutunu çalışır durumda bırakın.

  2. Yeni bileşeni uygulamanızın düzenine ekleyin

    Bu adımda, yeni bileşen Home'u, uygulamanızın kök bileşeni App'e eklersiniz, böylece uygulamanızın düzeninde görüntülenir.

    IDE'nizin Edit bölmesinde:

    1. Editörde app.ts dosyasını açın.

    2. app.ts dosyasında, bu satırı dosya düzeyindeki import'lara ekleyerek Home'u içe aktarın.

      Import Home in src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    3. app.ts dosyasında, @Component içindeki imports dizi özelliğini güncelleyin ve Home'u ekleyin.

      Replace in src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    4. app.ts dosyasında, @Component içindeki template özelliğini aşağıdaki HTML kodunu içerecek şekilde güncelleyin.

      Replace in src/app/app.ts

      import {Component} from '@angular/core';
import {Home} from './home/home';

@Component({
  selector: 'app-root',
  imports: [Home],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/public/logo.svg" alt="logo" aria-hidden="true" />
      </header>
      <section class="content">
        <app-home />
      </section>
    </main>
  `,
  styleUrls: ['./app.css'],
})
export class App {
  title = 'homes';
}

    5. Değişikliklerinizi app.ts dosyasına kaydedin.

    6. ng serve çalışıyorsa, uygulama güncellenmelidir. ng serve çalışmıyorsa, tekrar başlatın. Uygulamanızdaki Hello world metni, Home bileşeninden gelen home works! metniyle değişmelidir.

    7. Tarayıcıda çalışan uygulamayı kontrol edin ve uygulamanın güncellendiğini doğrulayın.

    browser frame of page displaying the text 'home works!'

  3. Home bileşenine özellikler ekleyin

    Bu adımda Home'a özellikler eklersiniz.

    Önceki adımda, varsayılan Home bileşenini uygulamanızın şablonuna eklediniz, böylece varsayılan HTML'si uygulamada göründü. Bu adımda, ilerideki bir derste kullanılacak olan bir arama filtresi ve düğmesi eklersiniz. Şimdilik, Home sadece bunlara sahip. Bu adımın yalnızca arama öğelerini düzene eklediğini, henüz herhangi bir işlevsellik sağlamadığını unutmayın.

    Başlangıç uygulamasını indirmek yerine yeni bir Angular projesinden başladıysanız (ng new): arama düğmesi ve giriş kenarlığının görünür olması için bu genel stilleri src/styles.css dosyasına ekleyin:

    :root {
  --primary-color: #605DC8;
  --secondary-color: #8B89E6;
  --accent-color: #e8e7fa;
  --shadow-color: #E8E8E8;
}

button.primary {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

    IDE'nizin Edit bölmesinde:

    1. first-app dizininde, editörde home.ts dosyasını açın.

    2. home.ts dosyasında, @Component içindeki template özelliğini bu kodla güncelleyin.

      Replace in src/app/home/home.ts

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

@Component({
  selector: 'app-home',
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {}

    3. Ardından, editörde home.css dosyasını açın ve içeriği bu stillerle güncelleyin.

      NOTE: Tarayıcıda, bunlar src/app/home/home.ts dosyasındaki styles dizisine eklenebilir.

      Replace in src/app/home/home.css

      .results {
  display: grid;
  column-gap: 14px;
  row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
  margin-top: 50px;
  justify-content: space-around;
}

input[type="text"] {
  border: solid 1px var(--primary-color);
  padding: 10px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-block;
  width: 30%;
}

button {
  padding: 10px;
  border: solid 1px var(--primary-color);
  background: var(--primary-color);
  color: white;
  border-radius: 8px;
}

@media (min-width: 500px) and (max-width: 768px) {
  .results {
      grid-template-columns: repeat(2, 1fr);
  }
  input[type="text"] {
      width: 70%;
  }   
}

@media (max-width: 499px) {
  .results {
      grid-template-columns: 1fr;
  }    
}

    4. Uygulamanın hatasız derlendiğini doğrulayın. Uygulamanızda filtre sorgu kutusunu ve düğmeyi bulmalı ve bunların stillendirilmiş olması gerekir. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.

    browser frame of homes-app displaying logo, filter text input box and search button

SUMMARY: Bu derste, uygulamanız için yeni bir bileşen oluşturdunuz ve ona bir filtre düzenleme kontrolü ve düğme eklediniz.

Bu derste ele alınan konular hakkında daha fazla bilgi için: