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.
Angular 4 - Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak

  • 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.
    Angular 4 – Proje Dosyalarını Tanıyalım
    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…

Bunlar da hoşunuza gidebilir...

3 Cevaplar

  1. 26 Mart 2018

    […] Angular 4 – Proje Dosyalarını Tanıyalım […]

  2. 26 Mart 2018

    […] Angular 4 – Proje Dosyalarını Tanıyalım başlıklı yazımda Angular 4 proje dosyalarının ne işe yaradığına değinmiştik. Amma […]

  3. 13 Nisan 2018

    […] projemizin ana dizininde bulunan “package.json” dosyasını kullanmamız gerekecektir. Şuradaki makalede de değerlendirdiğimiz gibi “package.json” dosyası NPM ile indirilen […]

Bir Cevap Yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.