<\/div>\n

Merhaba,<\/p>\n

\u00d6nceki Angular 4 \u2013 Proje Dosyalar\u0131n\u0131 Tan\u0131yal\u0131m<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda Angular 4 proje dosyalar\u0131n\u0131n ne i\u015fe yarad\u0131\u011f\u0131na de\u011finmi\u015ftik. Amma velakin \u00f6zellikle “app” klas\u00f6r\u00fcne hususi bir de\u011ferlendirmede bulunaca\u011f\u0131m\u0131zdan dolay\u0131 konuyu ilgili makalede es ge\u00e7mi\u015ftik. \u015eimdi gelin Angular 4 projesinin \u015fah damar\u0131n\u0131 te\u015fkil eden “app” klas\u00f6r\u00fcn\u00fc, klas\u00f6rden daha \u00e7ok i\u015flevselli\u011fini inceleyelim.<\/p>\n

“app” klas\u00f6r\u00fc a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnden de g\u00f6rebilece\u011finiz gibi “src” klas\u00f6r\u00fc alt\u0131nda bulunan ve i\u00e7erisinde component tarz\u0131 yap\u0131lar bar\u0131nd\u0131ran bir klas\u00f6rd\u00fcr.
\n $\"Angular$ <\/a>
\n\u015eimdi h\u0131zl\u0131ca “app” klas\u00f6r\u00fc i\u00e7erisindeki dosyalar\u0131 tan\u0131mlayal\u0131m ve ard\u0131ndan bizlere Angular 4’\u00fc kavratacak ray\u0131 yava\u015f yava\u015f d\u00f6\u015femeye ba\u015flayal\u0131m.<\/p>\n

app.component.css<\/em><\/strong>
\nComponente \u00f6zel css dosyas\u0131d\u0131r.<\/li>\n

app.component.html<\/em><\/strong>
\nComponentin html sayfas\u0131d\u0131r.<\/li>\n

app.component.spec.ts<\/em><\/strong>
\nComponentin Uniq Testi.<\/li>\n

app.component.ts<\/em><\/strong>
\n\u0130lgili componentin kendi dosyas\u0131d\u0131r.<\/li>\n

app.module.ts<\/em><\/strong>
\nUygulamam\u0131z\u0131n root mod\u00fcl\u00fcd\u00fcr.”src” klas\u00f6r\u00fc i\u00e7erisindeki “main.ts” dosyas\u0131n\u0131n i\u00e7eri\u011fine g\u00f6z atarsak e\u011fer;<\/p>\n
\r\nimport { enableProdMode } from '@angular\/core';\r\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\r\nimport { AppModule } from '.\/app\/app.module';\r\nimport { environment } from '.\/environments\/environment';\r\nif (environment.production) {\r\n enableProdMode();\r\n}\r\nplatformBrowserDynamic().bootstrapModule(AppModule)\r\n .catch(err => console.log(err));\r\n<\/pre>\n
g\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere “platformBrowserDynamic().bootstrapModule(AppModule)” komutunda ba\u015flang\u0131\u00e7 mod\u00fcl\u00fc olarak “AppModule” g\u00f6sterilmi\u015ftir. \u0130\u015fte o “AppModule” bizim “app.module.ts” dosyam\u0131z\u0131n i\u00e7erisinde olu\u015fturulmu\u015f root mod\u00fcld\u00fcr.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n<\/li>\n<\/ul>\n
Angular 4 mimarisinde t\u00fcm temel mod\u00fcler yap\u0131lar \u00fczerine in\u015fa edilmi\u015ftir. Haliyle bu mod\u00fcllerde bizler tasarlad\u0131\u011f\u0131m\u0131z componentleri kullanaca\u011f\u0131z. Ama dikkat etmemiz gereken nokta tasarlanan componentlerin kullan\u0131laca\u011f\u0131 mod\u00fcllere import edilip deklerasyonu sa\u011flanmal\u0131d\u0131r.<\/p>\n
Mod\u00fcl \u0130ncelemesi<\/h3>\n
Bir mod\u00fcl\u00fcn mod\u00fcl olabilmesi i\u00e7in NgModule’den deklarasyon ediliyor olmas\u0131 gerekmektedir.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\n\/\/AppComponent buraya import ediliyor.\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n\/\/import edilen AppComponent nesnesinin mod\u00fcle deklarasyonu sa\u011flan\u0131yor.\r\n\/\/declarations i\u00e7erisinde genellikle kendi componentlerimizi tan\u0131mlar\u0131z.\r\n\/\/Yani bu uygulamada bulunan componentleri tan\u0131mlar\u0131z.\r\n ],\r\n imports: [\r\n BrowserModule\r\n\/\/Componentlerini ya da servislerini kullanmak istedi\u011fimiz d\u0131\u015f\r\n\/\/componentler buradan mod\u00fcle entegre edilir.\r\n\/\/Yukar\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere farkl\u0131 componentler import edilmekte\r\n\/\/ve bu componentlerden BrowserModule bu mod\u00fcle import edilmekte.\r\n\/\/Genellikle @angular'da tan\u0131ml\u0131 mod\u00fclleri import ederiz.\r\n ],\r\n exports: [\r\n\/\/Projemiz \u00fczerinden d\u0131\u015far\u0131ya hangi mod\u00fcllerin a\u00e7\u0131lmas\u0131n\u0131 istiyorsak\r\n\/\/buraya ilgili componentleri verebiliriz.\r\n ],\r\n providers: [\r\n\/\/Uygulamam\u0131zda s\u00fcrekli Singleton bir nesne tan\u0131mlamak istiyorsak\r\n\/\/buray\u0131 kullan\u0131r\u0131z.\r\n ]\r\n ,\r\n bootstrap: [\r\n AppComponent\r\n\/\/Bu mod\u00fcl\u00fcn ba\u015flang\u0131\u00e7 komponentini belirtti\u011fimiz aland\u0131r.\r\n\/\/Burada da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bu mod\u00fcl\u00fcn ba\u015flang\u0131\u00e7 componenti\r\n\/\/AppComponent olarak ayarlanm\u0131\u015ft\u0131r.\r\n ]\r\n})\r\nexport class AppModule {\r\n\/\/export; bildi\u011finiz C#'ta ki public eri\u015fim belirleyicisine\r\n\/\/kar\u015f\u0131l\u0131k gelmektedir.\r\n}\r\n<\/pre>\n
Component \u0130ncelemesi<\/h3>\n
Angular’da component bir HTML \u00e7\u0131kt\u0131s\u0131na hizmet eden class yap\u0131s\u0131d\u0131r. Bir component olu\u015fturmak istiyorsan\u0131z Component mod\u00fcl\u00fc taraf\u0131ndan gelen @Component deklarasyonuyla beslenmesi gerekmektedir.<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n title = 'app';\r\n}\r\n<\/pre>\n
Yukar\u0131da g\u00f6rm\u00fc\u015f oldu\u011funuz gibi bir \u00f6rnek component olu\u015fturulmu\u015ftur. @Component i\u00e7erisindeki parametrelere de\u011finmemiz gerekirse e\u011fer;
\nselector<\/strong>, bu componentin html i\u00e7erisinde hangi etiketle \u00e7a\u011fr\u0131laca\u011f\u0131n\u0131 belirtmektedir. index.html dosyas\u0131na a\u00e7\u0131p bakarsak e\u011fer;<\/p>\n
\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n <meta charset="utf-8">\r\n <title>OrnekProje<\/title>\r\n <base href="\/">\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" type="image\/x-icon" href="favicon.ico">\r\n<\/head>\r\n<body>\r\n <app-root><\/app-root>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
“<app-root><\/app-root><\/em>” etiketlerine dikkat ediniz. Uygulama bu etiketler yerine “AppComponent” isimli componentin \u00e7\u0131kt\u0131s\u0131n\u0131 basacakt\u0131r.<\/p>\n
“Peki AppComponent isimli componentin \u00e7\u0131kt\u0131s\u0131 nerede?<\/em>” diye sorarsan\u0131z e\u011fer s\u0131ran\u0131n templateUrl<\/strong> parametresine geldi\u011fini anl\u0131yoruz. templateUrl, bu componentin html kayna\u011f\u0131n\u0131 tutmaktad\u0131r. “app.component.html” dosyas\u0131 a\u015fa\u011f\u0131da da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere html bir i\u00e7erikten ibarettir.<\/p>\n
\r\n<div style="text-align:center">\r\n <h1>\r\n Welcome to {{ title }}!\r\n <\/h1>\r\n <img width="300" alt="Angular Logo" src="angular4.png">\r\n<\/div>\r\n<\/pre>\n
Burada dikkat etmenizi istedi\u011fim husus component i\u00e7erisindeki s\u0131n\u0131fta tan\u0131mlanm\u0131\u015f de\u011fi\u015fkenin html i\u00e7erisinde {{ }}->(s\u00fcsl\u00fc parantez) ile ula\u015f\u0131labilir olmas\u0131d\u0131r. Buradan \u015f\u00f6yle bir genellemeye varabiliriz. Component i\u00e7erisinde tan\u0131mlanan de\u011fi\u015fkenler, propertyler, fonksiyonlar vs. hepsi html taraf\u0131ndan eri\u015filebilirdirler. Ek olarak burada sadece title de\u011fi\u015fkeninin de\u011feri yazd\u0131r\u0131ld\u0131\u011f\u0131ndan dolay\u0131 “One Way DataBinding<\/em>” ger\u00e7ekle\u015fti\u011fini de bilmenizde fayda var.<\/p>\n
styleUrls<\/strong> parametresi ise ilgili componentin kullanaca\u011f\u0131 \u00f6zel bir style yap\u0131s\u0131 varsa o bilgiyi tutmaktad\u0131r.<\/p>\n
Evet arkada\u015flar. Bu yaz\u0131m\u0131zda Angular 4 projesindeki “app” klas\u00f6r\u00fcnde olan yap\u0131lanmay\u0131 mant\u0131\u011f\u0131yla irdeleme \u00e7al\u0131\u015ft\u0131k. Bu ad\u0131mdan sonra s\u0131ra component olu\u015fturmaya geldi. Ee haliyle bu konuyuda sonraki makaleye saklayal\u0131m art\u0131k…<\/p>\n
O halde sonraki yaz\u0131da g\u00f6r\u00fc\u015fmek \u00fczere \ud83d\ude42
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, \u00d6nceki Angular 4 \u2013 Proje Dosyalar\u0131n\u0131 Tan\u0131yal\u0131m ba\u015fl\u0131kl\u0131 yaz\u0131mda Angular 4 proje dosyalar\u0131n\u0131n ne i\u015fe yarad\u0131\u011f\u0131na de\u011finmi\u015ftik. Amma velakin \u00f6zellikle “app” klas\u00f6r\u00fcne hususi bir de\u011ferlendirmede bulunaca\u011f\u0131m\u0131zdan dolay\u0131 konuyu ilgili makalede es ge\u00e7mi\u015ftik. \u015eimdi...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2146,2180,2181,2182,2183,2184,2185,2186],"class_list":["post-7332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-app-component-css","tag-app-component-html","tag-app-component-spec-ts","tag-app-component-ts","tag-app-module-ts","tag-ngmodule","tag-one-way-databinding"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7332"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7332\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}