Arayüz oluşturma

Bu eğitim dersi, bir arayüz oluşturmayı ve onu uygulamanızın bir bileşenine dahil etmeyi gösterir.

Neler öğreneceksiniz

• Uygulamanızda veri türü olarak kullanabileceği yeni bir arayüz var.
• Uygulamanızda örnek verilerle yeni arayüzün bir örneği var.

Arayüzlerin kavramsal önizlemesi

Arayüzler uygulamanız için özel veri türleridir.

Angular, güçlü tip denetimi olan bir programlama ortamında çalışmanın avantajlarından yararlanmak için TypeScript kullanır. Güçlü tip denetimi, uygulamanızdaki bir öğenin başka bir öğeye yanlış biçimlendirilmiş veri göndermesi olasılığını azaltır. Bu tür tip uyumsuzluğu hataları TypeScript derleyicisi tarafından yakalanır ve bu tür hataların çoğu IDE'nizde de yakalanabilir.

Bu derste, tek bir konut konumu hakkındaki verileri temsil eden özellikleri tanımlamak için bir arayüz oluşturacaksınız.

1. Yeni bir Angular arayüzü oluşturun

   Bu adım, uygulamanızda yeni bir arayüz oluşturur.

   IDE'nizin Terminal bölmesinde:

   1. Proje dizininizde, first-app dizinine gidin.

   2. first-app dizininde, yeni arayüzü oluşturmak için bu komutu çalıştırın.

      ng generate interface housinglocation

   3. Uygulamayı derlemek ve http://localhost:4200 adresinde sunmak için ng serve komutunu çalıştırın.

   4. Bir tarayıcıda, uygulamanızı görmek için http://localhost:4200 adresini açın.

   5. Uygulamanın hatasız derlendiğini doğrulayın. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.

2. Yeni arayüze özellikler ekleyin

   Bu adım, uygulamanızın bir konut konumunu temsil etmesi için gereken özellikleri arayüze ekler.

   1. IDE'nizin Terminal bölmesinde, uygulamayı derlemek ve http://localhost:4200 adresinde sunmak için ng serve komutunu başlatın (zaten çalışmıyorsa).

   2. IDE'nizin Edit bölmesinde, src/app/housinglocation.ts dosyasını açın.

   3. housinglocation.ts dosyasında, yeni arayüzünüzün bu örnekle eşleşmesi için varsayılan içeriği aşağıdaki kodla değiştirin.

      Update src/app/housinglocation.ts to match this code

      export interface HousingLocationInfo {
        id: number;
        name: string;
        city: string;
        state: string;
        photo: string;
        availableUnits: number;
        wifi: boolean;
        laundry: boolean;
      }
      

   4. Değişikliklerinizi kaydedin ve uygulamanın herhangi bir hata görüntülemediğini doğrulayın. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.

   Bu noktada, bir id, name ve konum bilgileri dahil olmak üzere bir konut konumu hakkındaki verileri temsil eden bir arayüz tanımladınız.

3. Uygulamanız için bir test evi oluşturun

   Bir arayüzünüz var, ancak henüz kullanmıyorsunuz.

   Bu adımda, arayüzün bir örneğini oluşturacak ve ona bazı örnek veriler atayacaksınız. Bu örnek verilerin uygulamanızda henüz görünmeyeceğini göreceksiniz. Bunun gerçekleşmesi için tamamlanması gereken birkaç ders daha var.

   1. IDE'nizin Terminal bölmesinde, uygulamayı derlemek ve http://localhost:4200 adresinde sunmak için ng serve komutunu çalıştırın (zaten çalışmıyorsa).

   2. IDE'nizin Edit bölmesinde, src/app/home/home.ts dosyasını açın.

   3. src/app/home/home.ts dosyasında, Home'un yeni arayüzü kullanabilmesi için mevcut import ifadelerinden sonra bu import ifadesini ekleyin.

      Import Home in src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      

   4. src/app/home/home.ts dosyasında, bileşende yeni arayüzün tek bir örneğini oluşturmak için boş export class Home {} tanımını bu kodla değiştirin.

      Add sample data to src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      

   5. home.ts dosyanızın bu örnekle eşleştiğini doğrulayın.

      src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      

      Home sınıfına HousingLocation türünde housingLocation özelliğini ekleyerek, verinin arayüzün tanımına uyduğunu doğrulayabilirsiniz. Eğer veri arayüzün tanımını karşılamazsa, IDE size faydalı hatalar verecek kadar bilgiye sahiptir.

   6. Değişikliklerinizi kaydedin ve uygulamanın herhangi bir hatası olmadığını doğrulayın. Tarayıcıyı açın ve uygulamanızın hala "housing-location works!" mesajını görüntülediğini doğrulayın.

      

   7. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.

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