Merhaba dünya

Bu ilk ders, bu eğitimdeki her dersin eksiksiz bir Angular uygulaması oluşturmak için yeni özellikler eklediği başlangıç noktası olarak hizmet eder. Bu derste, uygulamayı ünlü "Hello World" metnini görüntüleyecek şekilde güncelleyeceğiz.

Neler öğreneceksiniz

Uygulamanız tarayıcıda başarıyla çalışıyorsa ve yürütülen içeriği hatasız görüntülüyorsa, geliştirme ortamınızın ve IDE'nizin bir Angular uygulaması oluşturmaya başlamak için doğru şekilde kurulduğunu doğrular.

1. Varsayılan uygulamayı indirin

   Kod editörünün sağ üst köşesindeki "İndir" simgesine tıklayarak başlayın. Bu, bu eğitimin kaynak kodunu içeren bir .zip dosyası indirecektir. Bunu yerel Terminal ve IDE'nizde açın, ardından varsayılan uygulamayı test etmeye geçin.

   Eğitimin herhangi bir adımında, o adımın kaynak kodunu indirmek ve oradan başlamak için bu simgeye tıklayabilirsiniz.

2. Varsayılan uygulamayı test edin

   Bu adımda, varsayılan başlangıç uygulamasını indirdikten sonra, varsayılan Angular uygulamasını derlersiniz. Bu, geliştirme ortamınızın eğitime devam etmek için ihtiyacınız olan her şeye sahip olduğunu doğrular.

   IDE'nizin Terminal bölmesinde:

   1. Proje dizininizde, first-app dizinine gidin.

   2. Uygulamayı çalıştırmak için gereken bağımlılıkları yüklemek üzere bu komutu çalıştırın.

      npm install

   3. Varsayılan uygulamayı derlemek ve sunmak için bu komutu çalıştırın.

      ng serve

      Uygulama hatasız derlenmeli.

   4. Geliştirme bilgisayarınızdaki bir web tarayıcısında http://localhost:4200 adresini açın.

   5. Varsayılan web sitesinin tarayıcıda göründüğünü doğrulayın.

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

3. Projedeki dosyaları inceleyin

   Bu adımda, varsayılan bir Angular uygulamasını oluşturan dosyaları tanıyacaksınız.

   IDE'nizin Explorer bölmesinde:

   1. Proje dizininizde, first-app dizinine gidin.
   2. Bu dosyaları görmek için src dizinini açın.

      1. Dosya gezgininde Angular uygulama dosyalarını (/src) bulun.

         1. index.html uygulamanın en üst düzey HTML şablonudur.
         2. styles.css uygulamanın en üst düzey stil sayfasıdır.
         3. main.ts uygulamanın çalışmaya başladığı yerdir.
         4. favicon.ico herhangi bir web sitesinde olduğu gibi uygulamanın simgesidir.

      2. Dosya gezgininde Angular uygulamasının bileşen dosyalarını (/app) bulun.

         1. app.ts, app-root bileşenini tanımlayan kaynak dosyasıdır. Bu, uygulamadaki en üst düzey Angular bileşenidir. Bir bileşen, Angular uygulamasının temel yapı taşıdır. Bileşen tanımı, bileşenin kodunu, HTML şablonunu ve stillerini içerir; bunlar bu dosyada veya ayrı dosyalarda tanımlanabilir.

            Bu uygulamada stiller ayrı bir dosyada iken bileşenin kodu ve HTML şablonu bu dosyadadır.

         2. app.css bu bileşenin stil sayfasıdır.

         3. Yeni bileşenler bu dizine eklenir.

      3. Dosya gezgininde uygulama tarafından kullanılan görselleri içeren görsel dizinini (/assets) bulun.

      4. Dosya gezgininde bir Angular uygulamasının derlenmesi ve çalıştırılması için gereken, ancak normalde etkileşime girmediğiniz dosya ve dizinleri bulun.

         1. .angular Angular uygulamasını derlemek için gereken dosyaları içerir.
         2. .e2e uygulamayı test etmek için kullanılan dosyaları içerir.
         3. .node_modules uygulamanın kullandığı node.js paketlerini içerir.
         4. angular.json Angular uygulamasını derleme araçlarına tanımlar.
         5. package.json, tamamlanmış uygulamayı çalıştırmak için npm (node paket yöneticisi) tarafından kullanılır.
         6. tsconfig.* uygulamanın TypeScript derleyicisine yapılandırmasını tanımlayan dosyalardır.

   Bir Angular uygulama projesini oluşturan dosyaları inceledikten sonra, bir sonraki adıma geçin.

4. Hello World oluşturun

   Bu adımda, görüntülenen içeriği değiştirmek için Angular proje dosyalarını güncellersiniz.

   IDE'nizde:

   1. first-app/src/index.html dosyasını açın. NOTE: Bu adım ve sonraki adım yalnızca yerel ortamınız içindir!

   2. index.html dosyasında, uygulamanın başlığını güncellemek için <title> öğesini bu kodla değiştirin.

      Replace in src/index.html

      <!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <title>Homes</title>
          <base href="/" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" type="image/x-icon" href="favicon.ico" />
          <link
            href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
            rel="stylesheet"
          />
        </head>
        <body>
          <app-root></app-root>
        </body>
      </html>
      

      Ardından, index.html dosyasında yaptığınız değişiklikleri kaydedin.

   3. Sonra, first-app/src/app/app.ts dosyasını açın.

   4. app.ts dosyasında, @Component tanımındaki template satırını, uygulama bileşenindeki metni değiştirmek için bu kodla değiştirin.

      Replace in src/app/app.ts

      import {Component} from '@angular/core';
      
      @Component({
        selector: 'app-root',
        imports: [],
        template: ` <h1>Hello world!</h1> `,
        styleUrls: ['./app.css'],
      })
      export class App {
        title = 'homes';
      }
      

   5. app.ts dosyasında, App sınıf tanımındaki title satırını, bileşen başlığını değiştirmek için bu kodla değiştirin.

      Replace in src/app/app.ts

      import {Component} from '@angular/core';
      
      @Component({
        selector: 'app-root',
        imports: [],
        template: ` <h1>Hello world!</h1> `,
        styleUrls: ['./app.css'],
      })
      export class App {
        title = 'homes';
      }
      

      Ardından, app.ts dosyasında yaptığınız değişiklikleri kaydedin.

   6. 1. adımdaki ng serve komutunu durdurduysanız, IDE'nizin Terminal penceresinde ng serve komutunu tekrar çalıştırın.

   7. Tarayıcınızı açın ve localhost:4200 adresine gidin; uygulamanın hatasız derlendiğini ve başlıkta Homes, gövdesinde Hello world görüntülediğini doğrulayın:

      

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