<\/div>\n

Merhaba,<\/p>\n

\u00d6nceki Angular 4 \u0130\u00e7in Yeni Bir Proje Olu\u015fturmak<\/a> ba\u015fl\u0131kl\u0131 makalemizde Angular CLI ile bir Angular 4 projesi olu\u015fturmu\u015ftuk. \u015eimdi ise olu\u015fturdu\u011fumuz bu projeyi Visual Studio Code ortam\u0131na aktarmay\u0131 ve yap\u0131lan i\u015flevleri canl\u0131 bir \u015fekilde izleyebilmek i\u00e7in yay\u0131na almay\u0131 inceliyor olaca\u011f\u0131z.<\/p>\n

Makale serimizde genellikle bir \u00f6nceki makalede olu\u015fturulan ya da ele al\u0131nan yap\u0131 bir sonrakinde de kullan\u0131laca\u011f\u0131 i\u00e7in yap\u0131lara yap\u0131lan at\u0131flar makaleler aras\u0131ndaki ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 gerektirmektedir. O y\u00fczden seriyi en ba\u015f\u0131ndan seyretmeniz gerekebilir. Demek istedi\u011fim o ki, makaleler aras\u0131 devam niteli\u011finde bir ili\u015fki olaca\u011f\u0131ndan dolay\u0131 baz\u0131 yap\u0131lar \u00f6nceki makalelerde olu\u015fturulup sonraki makalelerin senaryolar\u0131nda kullan\u0131l\u0131yor olabilir. Bu bilin\u00e7le seriyi komple bir b\u00fct\u00fcn olarak alg\u0131lay\u0131n\u0131z.<\/p>\n

Neyse biz konumuza d\u00f6nelim.<\/p>\n

Bir \u00f6nceki makalede “OrnekProje” isminde bir Angular 4 projesi olu\u015fturmu\u015ftuk. “Ba\u015flat” -> “Komut \u0130stemi” kombinasyonuyla komut penceresine gelerek “OrnekProje” isimli klas\u00f6re “cd” komutu ile locate oluyoruz.
\n $\"Angular$ <\/a><\/p>\n

Angular 4 projemizin bulundu\u011fu klas\u00f6re locate olmam\u0131z\u0131n sebebi, bu klas\u00f6rdeki proje dosyalar\u0131n\u0131 Visual Studio Code edit\u00f6r\u00fc \u00fczerinde a\u00e7mak istememizdir. Ve bu i\u015flemi ger\u00e7ekle\u015ftirmek i\u00e7in \u00f6ncelikli \u015fart\u0131m\u0131z ilgili klas\u00f6re locate olmam\u0131zd\u0131r.<\/p>\n

Locate i\u015fleminden sonra ilgili dizinde a\u015fa\u011f\u0131daki komutu yazarak projeyi komple Visual Studio Code ortam\u0131na ta\u015f\u0131m\u0131\u015f olursunuz.<\/p>\n

\r\ncode .\r\n<\/pre>\n

$\"Angular$ <\/a>
\n\u0130lgili komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra direkt olarak Visual Studio Code edit\u00f6r\u00fc proje dosyalar\u0131n\u0131 entegre bir \u015fekilde kar\u015f\u0131m\u0131za gelecektir.
\n $\"Angular$ <\/a><\/p>\n

Evet… \u015eimdi projemizi Visual Studio Code ortam\u0131na aktarm\u0131\u015f olduk. Bu noktadan sonra proje \u00fczerinde yap\u0131sal \u00e7al\u0131\u015fmalar\u0131 ele al\u0131p ad\u0131m ad\u0131m geli\u015fmeye ba\u015flayaca\u011f\u0131z lakin ben genede “\u015fuana kadar ne yapt\u0131k?<\/em>” sorusuna istinaden projemizin neye benzedi\u011fini g\u00f6rmek ad\u0131na uygulamay\u0131 yay\u0131na almay\u0131da ele alaca\u011f\u0131m.<\/p>\n

Bir projeyi yay\u0131na almak i\u00e7in komut penceresinde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rmam\u0131z gerekmektedir.<\/p>\n

\r\nng serve\r\n<\/pre>\nE\u011fer ki bu \u015fekilde kodu \u00e7al\u0131\u015ft\u0131r\u0131rsak uygulama varsay\u0131lan olarak “localhost” \u00fczerinden “4200” portunda yay\u0131na ge\u00e7ecektir.
\n<\/a>
\nTabi yay\u0131n ba\u015flad\u0131ktan sonra herhangi bir taray\u0131c\u0131da site otomatik a\u00e7\u0131lmayacakt\u0131r. Gidip manuel bir \u015fekilde bir taray\u0131c\u0131 \u00fczerinden “localhost:4200” adresini tetikledi\u011fimiz zaman projemiz ilk temel\/varsay\u0131lan \u015fablonuyla a\u015fa\u011f\u0131daki gibi bizi kar\u015f\u0131layacakt\u0131r.
\n<\/a><\/p>\n
“Yaa! amaAa olmaz hoca! ben yay\u0131n\u0131 ba\u015flatt\u0131\u011f\u0131m zaman otomatik taray\u0131c\u0131da da projeyi g\u00f6rmek istiyorum!<\/em>” diyorsan\u0131z e\u011fer kodu a\u015fa\u011f\u0131daki gibi yazman\u0131z yeterli olacakt\u0131r.<\/p>\n
\r\nng serve --o\r\nya da\r\nng serve --open\r\n<\/pre>\nBu \u015fekilde kodu belirtti\u011finiz zaman proje “localhost”un “4200” varsay\u0131lan portu \u00fczerinde yay\u0131nlanacakt\u0131r ve otomatik olarak bir taray\u0131c\u0131da projeyi a\u00e7acakt\u0131r.<\/p>\n
Yok e\u011fer “4200” varsay\u0131lan port numaras\u0131n\u0131 de\u011fi\u015ftirmek istiyorsan\u0131z a\u015fa\u011f\u0131daki gibi m\u00fcdahalede bulunabilirsiniz.<\/p>\n
\r\nng server --port 1453\r\n<\/pre>\nE\u011fer ki yukar\u0131daki kodu \u00e7al\u0131\u015ft\u0131r\u0131rsan\u0131z projemiz “localhost” \u00fczerinde “1453” portunda \u00e7al\u0131\u015ft\u0131r\u0131lacakt\u0131r.<\/p>\n
\r\nng server --port 1453 --open\r\n<\/pre>\nBu kodumuz ise benzer mant\u0131kla projeyi “localhost” \u00fczerinde “1453” portunda \u00e7al\u0131\u015ft\u0131racak ve projeyi otomatik taray\u0131c\u0131da a\u00e7acakt\u0131r.<\/p>\n
Evet…<\/p>\n
Angular 4 projemizi yay\u0131na nas\u0131l al\u0131nd\u0131\u011f\u0131n\u0131 g\u00f6rm\u00fc\u015f olduk. Yay\u0131na al\u0131nan proje \u00fczerinde yap\u0131lan t\u00fcm \u00e7al\u0131\u015fmalar manuel yenileme yapmadan taray\u0131c\u0131 \u00fczerinde anl\u0131k olarak g\u00fcncellenmektedir. Bu sayede yap\u0131lan t\u00fcm i\u015flemleri net bir \u015fekilde takip edebilece\u011fiz. Tabi bu nimetlerden ileride faydaland\u0131\u011f\u0131m\u0131z\u0131 net bir \u015fekilde g\u00f6receksiniz.<\/p>\n
Bir sonraki makalemizde olu\u015fturmu\u015f oldu\u011fumuz Angular 4 proje dosyalar\u0131n\u0131 tek tek ele al\u0131p neyin ne i\u015fe yarad\u0131\u011f\u0131ndan bahsedece\u011fiz.<\/p>\n
O halde g\u00f6r\u00fc\u015fmek \u00fczere diyelim \ud83d\ude42
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, \u00d6nceki Angular 4 \u0130\u00e7in Yeni Bir Proje Olu\u015fturmak ba\u015fl\u0131kl\u0131 makalemizde Angular CLI ile bir Angular 4 projesi olu\u015fturmu\u015ftuk. \u015eimdi ise olu\u015fturdu\u011fumuz bu projeyi Visual Studio Code ortam\u0131na aktarmay\u0131 ve yap\u0131lan i\u015flevleri canl\u0131 bir...<\/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,2161,2162],"class_list":["post-7286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4","tag-angular-4-visual-studio-code","tag-angular-4-yayina-almak"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7286","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=7286"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7286\/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=7286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}