{"id":14,"date":"2025-11-21T22:32:28","date_gmt":"2025-11-21T22:32:28","guid":{"rendered":"https:\/\/gurayarik.com\/blog\/?p=14"},"modified":"2025-11-21T22:32:28","modified_gmt":"2025-11-21T22:32:28","slug":"angular-ile-ilk-adimlar","status":"publish","type":"post","link":"https:\/\/gurayarik.com\/blog\/angular-ile-ilk-adimlar\/","title":{"rendered":"Angular ile \u0130lk Ad\u0131mlar"},"content":{"rendered":"\n

Angular ile Projeye Ba\u015flamak: \u0130lk Ad\u0131mlar ve \u0130pu\u00e7lar\u0131<\/h1>\n\n\n\n

\u00d6nceki yaz\u0131lar\u0131m\u0131zda Angular’\u0131n ne oldu\u011funu, mimarisini ve \u00e7al\u0131\u015fma prensiplerini derinlemesine inceledik. Art\u0131k Angular’\u0131n g\u00fcc\u00fcne ikna olduysan\u0131z ve kendi projelerinizi geli\u015ftirmeye ba\u015flamak istiyorsan\u0131z, do\u011fru yerdesiniz! Bu yaz\u0131m\u0131zda, Angular geli\u015ftirme ortam\u0131n\u0131z\u0131 kurmaktan ilk uygulaman\u0131z\u0131 olu\u015fturmaya kadar ad\u0131m ad\u0131m rehberlik edece\u011fiz ve baz\u0131 \u00f6nemli ipu\u00e7lar\u0131 sunaca\u011f\u0131z.<\/p>\n\n\n\n

Geli\u015ftirme Ortam\u0131n\u0131 Kurmak<\/h2>\n\n\n\n

Angular ile geli\u015ftirmeye ba\u015flamak i\u00e7in \u00f6ncelikle bilgisayar\u0131n\u0131zda baz\u0131 ara\u00e7lar\u0131n y\u00fckl\u00fc olmas\u0131 gerekir:<\/p>\n\n\n\n

    \n
  1. Node.js ve npm (Node Package Manager):<\/strong> Angular uygulamalar\u0131 JavaScript \u00e7al\u0131\u015fma zaman\u0131 olan Node.js \u00fczerinde \u00e7al\u0131\u015f\u0131r. Ayn\u0131 zamanda, Angular ve di\u011fer k\u00fct\u00fcphaneleri y\u00fcklemek i\u00e7in npm’i (veya alternatif olarak Yarn’\u0131) kullan\u0131r\u0131z. Node.js’in resmi web sitesinden (nodejs.org) LTS (Long Term Support) versiyonunu indirip kurabilirsiniz. Kurulum tamamland\u0131\u011f\u0131nda, terminalinizde node -v<\/code> ve npm -v<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak do\u011fru \u015fekilde y\u00fcklendi\u011fini kontrol edebilirsiniz.<\/li>\n\n\n\n
  2. Angular CLI (Command Line Interface):<\/strong> Angular CLI, Angular uygulamalar\u0131n\u0131 olu\u015fturmak, y\u00f6netmek, test etmek ve da\u011f\u0131tmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z temel ara\u00e7t\u0131r. Global olarak y\u00fcklenmesi \u00f6nerilir: npm install -g @angular\/cli <\/code>Kurulumdan sonra ng version<\/code> komutu ile CLI’\u0131n y\u00fcklendi\u011fini do\u011frulayabilirsiniz.<\/li>\n\n\n\n
  3. Metin D\u00fczenleyici veya IDE:<\/strong> Angular projeleri i\u00e7in Visual Studio Code (VS Code) en pop\u00fcler ve \u00f6nerilen ara\u00e7t\u0131r. Geni\u015f eklenti deste\u011fi sayesinde TypeScript, HTML ve CSS i\u00e7in m\u00fckemmel bir geli\u015ftirme deneyimi sunar.<\/li>\n<\/ol>\n\n\n\n

    \u0130lk Angular Uygulaman\u0131z\u0131 Olu\u015fturmak<\/h2>\n\n\n\n

    Geli\u015ftirme ortam\u0131n\u0131z haz\u0131r oldu\u011funa g\u00f6re, ilk Angular uygulaman\u0131z\u0131 kolayca olu\u015fturabilirsiniz:<\/p>\n\n\n\n

      \n
    1. Yeni Bir Proje Olu\u015fturma:<\/strong> Terminalinizde projenizi olu\u015fturmak istedi\u011finiz klas\u00f6re gidin ve \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131n: ng new my-first-angular-app <\/code>Bu komut size routing (y\u00f6nlendirme) eklemek isteyip istemedi\u011finizi ve hangi stil bi\u00e7imini (CSS, SCSS, Sass vb.) kullanaca\u011f\u0131n\u0131z\u0131 soracakt\u0131r. Tercihlerinize g\u00f6re yan\u0131tlayabilirsiniz. CLI, gerekli t\u00fcm dosyalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 sizin i\u00e7in otomatik olarak kuracakt\u0131r.<\/li>\n\n\n\n
    2. Projeyi \u00c7al\u0131\u015ft\u0131rma:<\/strong> Proje olu\u015fturulduktan sonra, proje klas\u00f6r\u00fcn\u00fcze girin: cd my-first-angular-app <\/code>Ard\u0131ndan, uygulamay\u0131 yerel geli\u015ftirme sunucusunda ba\u015flatmak i\u00e7in \u015fu komutu kullan\u0131n: ng serve --open <\/code>--open<\/code> bayra\u011f\u0131, uygulaman\u0131z\u0131n varsay\u0131lan taray\u0131c\u0131n\u0131zda otomatik olarak a\u00e7\u0131lmas\u0131n\u0131 sa\u011flar (genellikle http:\/\/localhost:4200\/<\/code> adresinde). Tebrikler, ilk Angular uygulaman\u0131z \u00e7al\u0131\u015f\u0131yor!<\/li>\n<\/ol>\n\n\n\n

      Angular Geli\u015ftirmede \u0130pu\u00e7lar\u0131<\/h2>\n\n\n\n
        \n
      • Bile\u015fenleri Anlay\u0131n:<\/strong> Angular’\u0131n temel yap\u0131 ta\u015f\u0131 bile\u015fenlerdir. Her yeni \u00f6zellik veya UI par\u00e7as\u0131 i\u00e7in yeni bile\u015fenler olu\u015fturmay\u0131 \u00f6\u011frenin (ng generate component my-component<\/code>).<\/li>\n\n\n\n
      • Servisleri Kullan\u0131n:<\/strong> Veri \u00e7ekme veya i\u015f mant\u0131\u011f\u0131 gibi uygulamalar aras\u0131 payla\u015f\u0131lan i\u015flevler i\u00e7in servisler olu\u015fturun (ng generate service my-service<\/code>) ve bunlar\u0131 ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu ile bile\u015fenlere sa\u011flay\u0131n.<\/li>\n\n\n\n
      • Routing’i \u00d6\u011frenin:<\/strong> Tek sayfa uygulamalar\u0131 i\u00e7in sayfa navigasyonunu y\u00f6neten Angular Router’\u0131 etkili bir \u015fekilde kullanmay\u0131 \u00f6\u011frenin.<\/li>\n\n\n\n
      • Dok\u00fcmantasyonu Takip Edin:<\/strong> Angular’\u0131n resmi dok\u00fcmantasyonu (angular.io) \u00e7ok kapsaml\u0131 ve g\u00fcnceldir. Kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z her sorun veya merak etti\u011finiz her konu i\u00e7in ilk ba\u015fvurman\u0131z gereken kaynak buras\u0131 olmal\u0131d\u0131r.<\/li>\n\n\n\n
      • En \u0130yi Pratikleri Uygulay\u0131n:<\/strong> Angular ekibi ve toplulu\u011fu taraf\u0131ndan \u00f6nerilen kodlama standartlar\u0131na ve mimari en iyi pratiklere uymaya \u00e7al\u0131\u015f\u0131n.<\/li>\n<\/ul>\n\n\n\n

        Angular ile yolculu\u011funuza ba\u015flarken bu ad\u0131mlar size sa\u011flam bir zemin sunacakt\u0131r. Unutmay\u0131n, pratik yapmak en iyi \u00f6\u011frenme y\u00f6ntemidir. Kodlamaya ba\u015flay\u0131n ve modern web uygulamalar\u0131 geli\u015ftirmenin keyfini \u00e7\u0131kar\u0131n!<\/p>\n","protected":false},"excerpt":{"rendered":"

        Angular ile Projeye Ba\u015flamak: \u0130lk Ad\u0131mlar ve \u0130pu\u00e7lar\u0131 \u00d6nceki yaz\u0131lar\u0131m\u0131zda Angular’\u0131n ne oldu\u011funu, mimarisini ve \u00e7al\u0131\u015fma prensiplerini derinlemesine inceledik. Art\u0131k Angular’\u0131n g\u00fcc\u00fcne ikna olduysan\u0131z ve kendi projelerinizi geli\u015ftirmeye ba\u015flamak istiyorsan\u0131z, do\u011fru yerdesiniz! Bu yaz\u0131m\u0131zda, Angular geli\u015ftirme ortam\u0131n\u0131z\u0131 kurmaktan ilk uygulaman\u0131z\u0131 olu\u015fturmaya kadar ad\u0131m ad\u0131m rehberlik edece\u011fiz ve baz\u0131 \u00f6nemli ipu\u00e7lar\u0131 sunaca\u011f\u0131z. Geli\u015ftirme Ortam\u0131n\u0131 Kurmak Angular […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":1,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gurayarik.com\/blog\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}