Angular 4 – Proje Dosyalarını Tanıyalım

Merhaba,

Önceki makalemizde Angular 4 projesi oluşturmuş ve bu projeyi Visual Studio Code ortamına taşımış ve hatta yayına almıştık. Şimdi ise Angular 4 nimetlerine giriş yapmadan önce oluşturmuş olduğumuz bu projenin dosya ve klasörüleri üzerine ne nedir? ne değildir? maksadıyla genel bir bakış sergileyeceğiz. En nihayetinde bu şekilde Angular 4’ün çalıştığı fiziksel yapıları tanıyarak dolaylı yoldan Angular 4 yapısını zihnimizde oturtmaya başlayacağız.

Önceki yazılarımızda oluşturduğumuz “OrnekProje” isimli projenin dosyalarını aşağıda görmektesiniz. Şimdi gelin bu dosya ve klasörlerin ne işe yaradığından bahsedelim.

• e2e(End to End)
  Unit teslerin ve diğer testlerin konfigürasyonuyla ilgili dosyaları içerir.
• node-modules
  Node.js aracılığıyla indirilen paketleri içerir.
• src
  Uygulamanın dosyaları bu klasörde mevcuttur. Önemlidir. Bizim çalışmalarımızın %95’i bu klasör içerisinde ceyran edecektir.
  
  src klasörü içerisindeki dosya ve klasörleri aşağıda tek tek tanımlamaktayız.
  • app
    Bu klasörle ilgili bir sonraki yazımızda daha detaylı bir değerlendirmede bulunacağız.
  • assets
    Siteyle ilgili tüm varlıklar(image vs.) burada bulunmaktadır.
  • environments
    Geliştirme ve yayına alma ortamıyla ilgili konfigürasyonu barındırır.
    • environment.ts
      Geliştirme ortamı için konfigürasyonu sağlar.
    • environment.prod.ts
      Yayın ortamı için konfigürsayonu sağlar.
  • index.html
    Temel geliştirme sayfamızdır. İçinde temel direktifi barındırır.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>OrnekProje</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>
    </html>
    

    Yukarıdaki kod bloğunda gördüğünüz gibi <app-root></app-root> direktifini barındırmaktadır. Bunun ne anlama geldiğini daha bilmediğinizi varsayıyorum ve manasını ilerideki makalelere bırakıyorum.

  • main.ts
    Uygulamanın giriş noktası. Program.cs’si diyebiliriz 🙂 Uygulamanın compiler edilmesinden tutunda hangi modülün ana modül olarak ayarlanacağı bu yapı içerisinde belirtilir.

    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)
      .catch(err => console.log(err));
    

    Yukarıdaki kod bloğuna göz atarsanız eğer “AppModule” isimli modülün başlangıç modülü olduğu belirtilmiştir. Tabi bu “AppModule” isimli modül, “src” -> “app” kombinasyonu içerisinde bulunmaktadır.

  • polyfills.ts
    Uygulamadan önce tarayıcıya yüklenecek olan “polyfills” listesini tutmaktadır. Uygulamanın farklı tarayıcılarda olası desteklenmeme durumlarında devreye girmektedir.
• .editorconfig
  Editörle ilgili temel konfigürasyonları barındırır.
• package.json
  NPM ile indirilen paketleri tutar. İçeriğine bakarsak eğer;

  {
    "name": "ornek-proje",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.2.0",
      "@angular/common": "^5.2.0",
      "@angular/compiler": "^5.2.0",
      "@angular/core": "^5.2.0",
      "@angular/forms": "^5.2.0",
      "@angular/http": "^5.2.0",
      "@angular/platform-browser": "^5.2.0",
      "@angular/platform-browser-dynamic": "^5.2.0",
      "@angular/router": "^5.2.0",
      "core-js": "^2.4.1",
      "rxjs": "^5.5.6",
      "zone.js": "^0.8.19"
    },
    "devDependencies": {
      "@angular/cli": "~1.7.3",
      "@angular/compiler-cli": "^5.2.0",
      "@angular/language-service": "^5.2.0",
      "@types/jasmine": "~2.8.3",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "jasmine-core": "~2.8.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~2.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~4.1.0",
      "tslint": "~5.9.1",
      "typescript": "~2.5.3"
    }
  }
  

  Dikkat ederseniz “dependencies” ve “devDependencies” olmak üzere iki adet paket tanımlaması mevcuttur. Bu paketlerin farkını aşağıda ele alalım;

  • dependencies
    Uygulama için lazım olan, arayüzle alakalı paketlerdir.
  • devDependencies
    Biz geliştiriciler için lazım olan, client ve arayüz ile pekte alakası olmayan paketlerdir.
• tsconfig.json
  TypeScript compiler konfigürasyonunu tutar.

Bir Angular 4 projesi içerisinde bulunan çoğu dosya ve klasörün ne işe yaradığını teorik olarak incelemiş bulunmaktayız. Tabi ki de zamanla bu dosya ve klasörler üzerinde detaylı pratik işlemler yapacağız. Ve yaptıkça olay zihninizde daha da netleşecektir.

Bir sonraki makalemizde “app” klasörü üzerine detaylı bir değerlendirmede bulunacak, Angular 4 yapısının nasıl modüler sisteme dayandığı hakkında konuşacak ve component yapılarının nasıl yönetildiği ve inşa edildiği üzerine duracağız.

O halde görüşmek üzere diyelim…
Siz okurken ben dinlenmeye geçeyim 🙂

İyi çalışmalar…