Angular Yazı Serisi - 2 - Proje Ortamının Tanımlanması
Bir önceki yazımızda Node.js, NPM(Node Package Manager) ve Angular-CLI kurulumunu yapmıştık. Şimdi oluşturduğumuz Angular projesi içerisindeki dosya ve klasörleri inceleyeceğiz.
Bir Angular projesi oluşturduğumuzda aşağıda görülen dosya ve klasörler otomatik olarak oluşturulur.
node_modules : tüm modüllerimiz bu klasörün altında yer alır(animations, bootstrap vs.)
src : Oluşturduğumuz component'ler, servisler ve html dosyaları src klasörü altında depolanır.
angular-cli.json : Başlangıç html dosyası, Typescript dosyası, test dosyaları vs. bu dosyada tutulur.
package.json : Kullanılan tüm paketler burada belirtilir(typescript, rxjs, @angular/animations vs.)
src klasörü altında app, assets ve enviroment klasörleri bulunur. Ana html(index.html) ve typescript(main.ts) dosyaları da bu klasör altında tutulur.
Projemiz app klasörü içerisinde bulunur. Aslında projemiz app klasörüdür. Diğer component'ler app klasörü içerisinde oluşturulur.
app klasörü içeriği aşağıda görülmektedir.
app.component.css : app projesinin css kodlarını barındırır.
app.component.html : app component'inin html kodlarını barındırır.
app.component.ts : app component'inin typescript kodlarını barındırır.
app.module.ts : projede kullanılacak component, service ve module'lerin tutulduğu typescript dosyasıdır. Burada tanımlanan servisler global olarak erişilebilirdir.
app.component.ts dosyamızı inceleyelim.
Burada selector olarak tanımladığımız tag'i(burada "app-root") kullanılarak index.html sayfası içinden erişilebilir.
templateUrls : app component'inin html dosyasının tutulduğu yerdir.
styleUrls : app component'ta kullanılan css dosyalarının yolunun tutulduğu yerdir.
export class AppComponent {}
export burada "public" anlamına gelir.
En üst kısımdaki "import {Component} from "@angular/core" ifadesi, ilgili paketten Component'ın app componentine import edildiği anlamına gelir.
app.module.ts dosyasını inceleyelim.
Burada "@angular/core" paketinden NgModule import edilir. @NgModule içerisinde ise Component, Module, Service'ler tanımlanır.
Eklenen her component otomatik olarak "declarations" bölümüne eklenir.
Bir Module eklediğimizde("FormsModule" gibi) "imports" bölümüne eklenir.
Bir Service eklediğimizde ise Service 'i "providers" bölümüne ekleriz. Eğer app.module 'e eklersek global olarak kullanabiliriz. Eğer belli bir component içerisinden service'e erişim sağlamak istiyorsak, o component içerisindeki "provider" bölümüne service'i ekleriz
Son olarakta "index.html" dosyamızı inceleyelim.
Yukarıda da belirttiğimiz gibi, app component'inin selector'ü "app-root" olarak belirlenmişti.
index.html içerisinde app component.html'ine erişmek için "<app-root>" yazarak erişebiliriz.
Şimdilik bu kadar. Bir daha ki yazımızda küçük bir proje yapmaya başlayacağız.
İyi kodlamalar !
Bir Angular projesi oluşturduğumuzda aşağıda görülen dosya ve klasörler otomatik olarak oluşturulur.
node_modules : tüm modüllerimiz bu klasörün altında yer alır(animations, bootstrap vs.)
src : Oluşturduğumuz component'ler, servisler ve html dosyaları src klasörü altında depolanır.
angular-cli.json : Başlangıç html dosyası, Typescript dosyası, test dosyaları vs. bu dosyada tutulur.
package.json : Kullanılan tüm paketler burada belirtilir(typescript, rxjs, @angular/animations vs.)
src klasörü altında app, assets ve enviroment klasörleri bulunur. Ana html(index.html) ve typescript(main.ts) dosyaları da bu klasör altında tutulur.
Projemiz app klasörü içerisinde bulunur. Aslında projemiz app klasörüdür. Diğer component'ler app klasörü içerisinde oluşturulur.
app klasörü içeriği aşağıda görülmektedir.
app.component.css : app projesinin css kodlarını barındırır.
app.component.html : app component'inin html kodlarını barındırır.
app.component.ts : app component'inin typescript kodlarını barındırır.
app.module.ts : projede kullanılacak component, service ve module'lerin tutulduğu typescript dosyasıdır. Burada tanımlanan servisler global olarak erişilebilirdir.
app.component.ts dosyamızı inceleyelim.
Burada selector olarak tanımladığımız tag'i(burada "app-root") kullanılarak index.html sayfası içinden erişilebilir.
templateUrls : app component'inin html dosyasının tutulduğu yerdir.
styleUrls : app component'ta kullanılan css dosyalarının yolunun tutulduğu yerdir.
export class AppComponent {}
export burada "public" anlamına gelir.
En üst kısımdaki "import {Component} from "@angular/core" ifadesi, ilgili paketten Component'ın app componentine import edildiği anlamına gelir.
app.module.ts dosyasını inceleyelim.
Burada "@angular/core" paketinden NgModule import edilir. @NgModule içerisinde ise Component, Module, Service'ler tanımlanır.
Eklenen her component otomatik olarak "declarations" bölümüne eklenir.
Bir Module eklediğimizde("FormsModule" gibi) "imports" bölümüne eklenir.
Bir Service eklediğimizde ise Service 'i "providers" bölümüne ekleriz. Eğer app.module 'e eklersek global olarak kullanabiliriz. Eğer belli bir component içerisinden service'e erişim sağlamak istiyorsak, o component içerisindeki "provider" bölümüne service'i ekleriz
Son olarakta "index.html" dosyamızı inceleyelim.
index.html içerisinde app component.html'ine erişmek için "<app-root>" yazarak erişebiliriz.
Şimdilik bu kadar. Bir daha ki yazımızda küçük bir proje yapmaya başlayacağız.
İyi kodlamalar !
Yorumlar
Yorum Gönder