<\/div>\n

Merhaba,<\/p>\n

\u00d6nceki makalemizde<\/a> Angular 4 projesi olu\u015fturmu\u015f ve bu projeyi Visual Studio Code ortam\u0131na ta\u015f\u0131m\u0131\u015f ve hatta yay\u0131na alm\u0131\u015ft\u0131k. \u015eimdi ise Angular 4 nimetlerine giri\u015f yapmadan \u00f6nce olu\u015fturmu\u015f oldu\u011fumuz bu projenin dosya ve klas\u00f6r\u00fcleri \u00fczerine ne nedir? ne de\u011fildir? maksad\u0131yla genel bir bak\u0131\u015f sergileyece\u011fiz. En nihayetinde bu \u015fekilde Angular 4’\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131 fiziksel yap\u0131lar\u0131 tan\u0131yarak dolayl\u0131 yoldan Angular 4 yap\u0131s\u0131n\u0131 zihnimizde oturtmaya ba\u015flayaca\u011f\u0131z.<\/p>\n

\u00d6nceki yaz\u0131lar\u0131m\u0131zda olu\u015fturdu\u011fumuz “OrnekProje” isimli projenin dosyalar\u0131n\u0131 a\u015fa\u011f\u0131da g\u00f6rmektesiniz. \u015eimdi gelin bu dosya ve klas\u00f6rlerin ne i\u015fe yarad\u0131\u011f\u0131ndan bahsedelim.
\n $\"Angular$ <\/a><\/p>\n

e2e(End to End)<\/em><\/strong>
\nUnit teslerin ve di\u011fer testlerin konfig\u00fcrasyonuyla ilgili dosyalar\u0131 i\u00e7erir.<\/li>\n

node-modules<\/em><\/strong>
\nNode.js arac\u0131l\u0131\u011f\u0131yla indirilen paketleri i\u00e7erir.<\/li>\n

src<\/em><\/strong>
\nUygulaman\u0131n dosyalar\u0131 bu klas\u00f6rde mevcuttur. \u00d6nemlidir. Bizim \u00e7al\u0131\u015fmalar\u0131m\u0131z\u0131n %95’i bu klas\u00f6r i\u00e7erisinde ceyran edecektir.
\n $\"Angular$ <\/a>
\nsrc klas\u00f6r\u00fc i\u00e7erisindeki dosya ve klas\u00f6rleri a\u015fa\u011f\u0131da tek tek tan\u0131mlamaktay\u0131z.<\/p>\n
\n
app<\/em><\/strong><\/span>
\nBu klas\u00f6rle ilgili bir sonraki yaz\u0131m\u0131zda daha detayl\u0131 bir de\u011ferlendirmede bulunaca\u011f\u0131z.<\/li>\n
assets<\/em><\/strong><\/span>
\nSiteyle ilgili t\u00fcm varl\u0131klar(image vs.) burada bulunmaktad\u0131r.<\/li>\n
environments<\/em><\/strong><\/span>
\nGeli\u015ftirme ve yay\u0131na alma ortam\u0131yla ilgili konfig\u00fcrasyonu bar\u0131nd\u0131r\u0131r.<\/p>\n
\n
environment.ts<\/em><\/strong><\/span>
\nGeli\u015ftirme ortam\u0131 i\u00e7in konfig\u00fcrasyonu sa\u011flar.<\/li>\n
environment.prod.ts<\/em><\/strong><\/span>
\nYay\u0131n ortam\u0131 i\u00e7in konfig\u00fcrsayonu sa\u011flar.<\/li>\n<\/ul>\n<\/li>\n
index.html<\/em><\/strong><\/span>
\nTemel geli\u015ftirme sayfam\u0131zd\u0131r. \u0130\u00e7inde temel direktifi bar\u0131nd\u0131r\u0131r.<\/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
Yukar\u0131daki kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi\u00a0<app-root><\/app-root> direktifini bar\u0131nd\u0131rmaktad\u0131r. Bunun ne anlama geldi\u011fini daha bilmedi\u011finizi varsay\u0131yorum ve manas\u0131n\u0131 ilerideki makalelere b\u0131rak\u0131yorum.<\/li>\n
main.ts<\/em><\/strong><\/span>
\nUygulaman\u0131n giri\u015f noktas\u0131. Program.cs’si diyebiliriz \ud83d\ude42 Uygulaman\u0131n compiler edilmesinden tutunda hangi mod\u00fcl\u00fcn ana mod\u00fcl olarak ayarlanaca\u011f\u0131 bu yap\u0131 i\u00e7erisinde belirtilir.<\/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
Yukar\u0131daki kod blo\u011funa g\u00f6z atarsan\u0131z e\u011fer “AppModule” isimli mod\u00fcl\u00fcn ba\u015flang\u0131\u00e7 mod\u00fcl\u00fc oldu\u011fu belirtilmi\u015ftir. Tabi bu “AppModule” isimli mod\u00fcl, “src” -> “app” kombinasyonu i\u00e7erisinde bulunmaktad\u0131r.<\/li>\n
polyfills.ts<\/em><\/strong><\/span>
\nUygulamadan \u00f6nce taray\u0131c\u0131ya y\u00fcklenecek olan “polyfills” listesini tutmaktad\u0131r. Uygulaman\u0131n farkl\u0131 taray\u0131c\u0131larda olas\u0131 desteklenmeme durumlar\u0131nda devreye girmektedir.<\/li>\n<\/ul>\n<\/li>\n
.editorconfig<\/em><\/strong>
\nEdit\u00f6rle ilgili temel konfig\u00fcrasyonlar\u0131 bar\u0131nd\u0131r\u0131r.<\/li>\n
package.json<\/em><\/strong>
\nNPM ile indirilen paketleri tutar. \u0130\u00e7eri\u011fine bakarsak e\u011fer;<\/p>\n
\r\n{\r\n "name": "ornek-proje",\r\n "version": "0.0.0",\r\n "license": "MIT",\r\n "scripts": {\r\n "ng": "ng",\r\n "start": "ng serve",\r\n "build": "ng build --prod",\r\n "test": "ng test",\r\n "lint": "ng lint",\r\n "e2e": "ng e2e"\r\n },\r\n "private": true,\r\n "dependencies": {\r\n "@angular\/animations": "^5.2.0",\r\n "@angular\/common": "^5.2.0",\r\n "@angular\/compiler": "^5.2.0",\r\n "@angular\/core": "^5.2.0",\r\n "@angular\/forms": "^5.2.0",\r\n "@angular\/http": "^5.2.0",\r\n "@angular\/platform-browser": "^5.2.0",\r\n "@angular\/platform-browser-dynamic": "^5.2.0",\r\n "@angular\/router": "^5.2.0",\r\n "core-js": "^2.4.1",\r\n "rxjs": "^5.5.6",\r\n "zone.js": "^0.8.19"\r\n },\r\n "devDependencies": {\r\n "@angular\/cli": "~1.7.3",\r\n "@angular\/compiler-cli": "^5.2.0",\r\n "@angular\/language-service": "^5.2.0",\r\n "@types\/jasmine": "~2.8.3",\r\n "@types\/jasminewd2": "~2.0.2",\r\n "@types\/node": "~6.0.60",\r\n "codelyzer": "^4.0.1",\r\n "jasmine-core": "~2.8.0",\r\n "jasmine-spec-reporter": "~4.2.1",\r\n "karma": "~2.0.0",\r\n "karma-chrome-launcher": "~2.2.0",\r\n "karma-coverage-istanbul-reporter": "^1.2.1",\r\n "karma-jasmine": "~1.1.0",\r\n "karma-jasmine-html-reporter": "^0.2.2",\r\n "protractor": "~5.1.2",\r\n "ts-node": "~4.1.0",\r\n "tslint": "~5.9.1",\r\n "typescript": "~2.5.3"\r\n }\r\n}\r\n<\/pre>\n
Dikkat ederseniz “dependencies” ve “devDependencies” olmak \u00fczere iki adet paket tan\u0131mlamas\u0131 mevcuttur. Bu paketlerin fark\u0131n\u0131 a\u015fa\u011f\u0131da ele alal\u0131m;<\/p>\n
\n
dependencies<\/strong><\/em><\/span>
\nUygulama i\u00e7in laz\u0131m olan, aray\u00fczle alakal\u0131 paketlerdir.\n<\/li>\n
devDependencies<\/strong><\/em><\/span>
\nBiz geli\u015ftiriciler i\u00e7in laz\u0131m olan, client ve aray\u00fcz ile pekte alakas\u0131 olmayan paketlerdir.\n<\/li>\n<\/ul>\n<\/li>\n
\ntsconfig.json<\/em><\/strong>
\nTypeScript compiler konfig\u00fcrasyonunu tutar.\n<\/li>\n<\/ul>\n
Bir Angular 4 projesi i\u00e7erisinde bulunan \u00e7o\u011fu dosya ve klas\u00f6r\u00fcn ne i\u015fe yarad\u0131\u011f\u0131n\u0131 teorik olarak incelemi\u015f bulunmaktay\u0131z. Tabi ki de zamanla bu dosya ve klas\u00f6rler \u00fczerinde detayl\u0131 pratik i\u015flemler yapaca\u011f\u0131z. Ve yapt\u0131k\u00e7a olay zihninizde daha da netle\u015fecektir.<\/p>\n
Bir sonraki makalemizde “app” klas\u00f6r\u00fc \u00fczerine detayl\u0131 bir de\u011ferlendirmede bulunacak, Angular 4 yap\u0131s\u0131n\u0131n nas\u0131l mod\u00fcler sisteme dayand\u0131\u011f\u0131 hakk\u0131nda konu\u015facak ve component yap\u0131lar\u0131n\u0131n nas\u0131l y\u00f6netildi\u011fi ve in\u015fa edildi\u011fi \u00fczerine duraca\u011f\u0131z.<\/p>\n
O halde g\u00f6r\u00fc\u015fmek \u00fczere diyelim…
\nSiz okurken ben dinlenmeye ge\u00e7eyim \ud83d\ude42<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, \u00d6nceki makalemizde Angular 4 projesi olu\u015fturmu\u015f ve bu projeyi Visual Studio Code ortam\u0131na ta\u015f\u0131m\u0131\u015f ve hatta yay\u0131na alm\u0131\u015ft\u0131k. \u015eimdi ise Angular 4 nimetlerine giri\u015f yapmadan \u00f6nce olu\u015fturmu\u015f oldu\u011fumuz bu projenin dosya ve klas\u00f6r\u00fcleri...<\/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":[2175,2146,2167,2168,2177,2178,2163,2164,2171,2170,2169,2172,2165,2176,2174,2173,2166,2179],"class_list":["post-7311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-editorconfig","tag-angular-4","tag-app","tag-assets","tag-dependencies","tag-devdependencies","tag-e2e","tag-end-to-end","tag-environment-prod-ts","tag-environment-ts","tag-environments","tag-main-ts","tag-node-modules","tag-package-json","tag-polyfills","tag-polyfills-ts","tag-src","tag-tsconfig-json"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7311","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=7311"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7311\/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=7311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}