Angular Projesi Oluşturma Ve Klasör Yapısı

Daha önceki yazımda Angular kurulumu ile ilgili bilgi vermiştik. Şimdi yeni bir proje oluşturup klasör içeriğini inceleyelim.
Yeni bir proje oluşturmak için

ng new yeni-proje

D:\Angular klasörü altında yeni-proje adında bir Angular projesi oluşturduk. Şimdi projemizi açma zamanı. Editör olarak Visula Studio Code kullanıyorum. Tamamen ücretsiz olan bu editör kullanımı gayet kolay ve etkili. Şimdi projemizi açıyoruz

Klasör yapımız bu şekilde.
src klasörünün altında app klasörü bulunuyor. İşimizin çoğunu bu klasörde yapacağız. İlk olarak app.module.ts dosyasından başlamak istiyorum.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular uygulaması ilk açıldığında çalışan modül AppModule’dir. Angular’da modül dosyalarının temel görevi; Component,service,directive,pipe ve diğer modül dosyalarını bir araya getirmektir. Yani ilk çalışma esnasında kendisine tanıtılan diğer component ve servisleri yükler ve kullanılır hale getirir. Kısaca AppModule’ü Root modülü olarak düşünebiliriz. AppModule de
declaretions:View classlarıdırlar. Yani componentlerin declare edildiği yerdir.
imports: Başka modüllerin import edildiği yerdir.
providers:Injectable Service Class’larının uygulama içerisinde global olarak erişim sağlayan alandır

Şimdi gelelim component mevzusuna.
Componentler ekranın belli bir bölümünü yada hepsini yöneten class’lardır. View üzerinde uygulama mantığını gerçekleyen ve dom mapipülasyonlarını yapan, eventleri yöneten yapıdır

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

@Component ile oluşturulan componentin html,css ve diğer componentlerin içerisinde kullanılacak adının tanımlandığı selector bulunur.
Component ile aynı ada sahip class içerisinde metotlar, değişkenler tanımlanabilir ve html sayfası içerisinde işlemler yapılabilir.

Index.html’yi inceleyecek olursak

style,script ve meta taglarının çağrıldığı sayfamızın ana html dosyası gibi düşünebiliriz.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>YeniProje</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>

body tagları arasında <app-root></app-root> çağrılmış. Böylece app.component.ts sayfasında selector olarak tanımladığımız component ismini burada çağırabiliyoruz.

package.json dosyamız ise npm ile paket yönetimi için kullanılan dosyadır. Kısaca yüklediğimiz mödüllerin versiyonlarını burada görüntüleyebilirsiniz.

Şimdi uygulamamızı çalıştırıp test edelim. VS Code kullanıyorsanız yukarıda bulunan terminal sekmesini açıp açıp new terminal’e tıklayıp yeni terminal açabilirsiniz. Aşağıda açılan terminale

ng serve --o

ng serve komutu projenin ayağa kalmasını sağlar. –o ise proje ayağa kalktığı zaman tarayıcınızda açılmasını sağlıyor. Eğer yanlış bir şeyler yapmadıysanız projeniz çalışacak ver Angular versiyonunuza bağlı olarak farklı bir açılış sayfası ile karşılacaksınız. Ben Angular 6 kullanıyorum ve görüntü bu şekilde.

İyi Çalışmalar.

Bir yanıt yazın Yanıtı iptal et