Proje Yapısı

Bu yazımızda bir önceki yazımızda angular cli’la yarattığımız proje yapısını inceleyeceğiz.

 

Proje dizinimizde ilk gördüğümüz uçtan uca test için gerekli olacak e2e dizini.

Sonraki node_modules dizini nodejs tarafından çoğu yapılandırma amaçlı kullanılan bir dizin.

src dizini projemizi yaratacağımız dizin.

src altında üretilmiş olan dosyalar da konfigürasyonla ilgili ve bu dosyalara pek fazla dokunmayacağız. Angular’ın tek sayfa uygulama oluşturmak için kullanıldığını söylemiştik. Buradaki index.html dosyası sunacağımız tek sayfayı içeriyor.

Index.html de bir şey değiştirmemiz gerekmiyor ama açıp bakalım.

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>MerhabaDunya</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>Loading...</app-root>
</body>
</html>

 

Çok basit bir html dosyası görüyoruz. Head kısmındaki base ref uygulamamızın baz adresini gösterior, bunu ilerdeki yazılarımızda tekrar ele alacağız. App-root etiketi bizim uygulamamızın görüntüleneceği yeri belirtiyor. Buradaki  Loading metni bizim uygulamamız yükleninceye kadar geçen sürede ekranda gösterilecek metin. Gerçek uygulamamızda daha görsel bir yükleniyor ekranı hazırlayarak buraya yerleştirebiliriz.

Biz uygulamamızı app dizinine yazacağız.

Assets dizininde imajlar vb statik kaynaklarmızı tutacağız.

Environments dizininde uygulamamıza çalıştığı ortama göre farklı ortam değişkenleri tanımlayabileceğiz.

Ana dizindeki diğer dosyalar konfigürasyon için gerekli olan dosyalar ve varsayılan halleri bizim için yeterli.

Uygulamamızı yazacağımız yer olarak söylediğimiz app dizinine dönelim.

App.component.ts dosyasını açalım.

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

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


ts,  typescript dosyaları için kullanılan uzantıdır. Şimdilik neyin ne olduğunu açıklamadan app works yazısını değiştirip dosyayı kaydedelim. Bu işi ng serve komutunu çalıştırdığımız komut penceresini de görecek şekilde yapacak olursak kaydettiğimiz anda tekrar bir derleme işlemi yapıldığını görürüz. Çünkü ng serve, proje dizinimizdeki bütün dosyaları izler ve bir değişiklik gördüğü anda yeniden derleyip tarayıcıdaki sayfayı yeniler.

Çalışma Mantığı

Uygulamamızın tek sayfa uygulama olarak index.html’i sunduğunu söyledik. Tarayıcıdan kaynak koduna baktığımızda da bunu görüyoruz. Ve kaynak kodda standart bir html dosyanın ötesinde app-root gibi bir etiket var. Angular’ın bu etiketi de nasıl yorumlayacağını bilmesi gerekiyor.

Uygulamamızı başlatmak için ng serve yazdık. Ng komutu uygulama giriş noktasını bulmak için .angular-cli.json dosyasından index ve main değerlerine bakıyor.

Bizimkinde bunlar:


"index": "index.html",
"main": "main.ts",

şeklinde tanımlı.

Index le uygulamamızın sunacağı tek sayfayı Angular’a söylemiş olduk.


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Main.ts’e baktığımız zaman bir kaç import ve çevre değişkeni kontrolu satırlarını ve en sonda da bootstrapmodule fonksiyonunun çağrılmasını görüyoruz. Bu fonksiyona gönderilen AppModule uygulamamızın giriş noktasını belirtiyor.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

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

App.module.ts dosyasına baktığımızda en üst seviyede AppComponent’ın kullanılacağınının belirtildiğini görüyoruz.  AppComponent’ın nasıl kullanılacağı app.component.ts dosyasında selector’le veriliyor. App-root etiketinin geçtiği yere appcomponent yerleştirilecek. Appcomponent’in görüntüsünün nasıl olacağı da app.component.html şablonunda tanımlanıyor.  Ve sonuçta sayfamızı tarayıcıda görüyoruz.

İlerdeki yazılarımızda yeni bir component yarattığımız zaman bunlar daha iyi anlaşılacaktır.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir