{"id":5151,"date":"2023-05-23T07:25:29","date_gmt":"2023-05-23T07:25:29","guid":{"rendered":"https:\/\/www.turkticaret.net\/blog\/?p=5151"},"modified":"2023-05-23T07:25:42","modified_gmt":"2023-05-23T07:25:42","slug":"angular-nedir-ozellikleri","status":"publish","type":"post","link":"https:\/\/www.turkticaret.net\/blog\/angular-nedir-ozellikleri\/","title":{"rendered":"Angular Nedir? Mimarisi, \u00d6zellikleri ve Avantajlar\u0131"},"content":{"rendered":"

Sosyal medyadan sa\u011fl\u0131k hizmetlerine, bankac\u0131l\u0131ktan e-ticaret uygulamalar\u0131na kadar g\u00fcn\u00fcm\u00fczde bir\u00e7ok insan mobil uygulamalar\u0131 kullanmaktad\u0131r. Bu uygulamalar olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r sorunsuz kullan\u0131c\u0131 deneyimleri ile aray\u00fczler sunarak g\u00fcnler hayattaki bir\u00e7ok i\u015fimizde bize yard\u0131mc\u0131 olmaktad\u0131r. Bu t\u00fcr uygulamalar bizim i\u00e7in nas\u0131l bu kadar g\u00fcvenilir oldu? B\u00fcy\u00fck bir oran\u0131 sa\u011flam ve g\u00fcvenilir uygulamalar olu\u015fturmay\u0131 kolayla\u015ft\u0131rmaya yarayan Angular gibi yayg\u0131n olarak kullan\u0131lan \u00e7er\u00e7evelere gider.<\/p>\n

\"Angular<\/p>\n

Angular Nedir?<\/h2>\n

TypeScript kullanarak yaz\u0131lm\u0131\u015f olup a\u00e7\u0131k kaynakl\u0131 bir JavaScript \u00e7er\u00e7evesidir. Google<\/a> bunu s\u00fcrd\u00fcr\u00fcr ve amac\u0131 tek sayfal\u0131k uygulamak geli\u015ftirmektedir. Angular, bir \u00e7er\u00e7eve olarak b\u00fcy\u00fck avantajlara sahipken, geli\u015ftiricilere \u00e7al\u0131\u015fmak i\u00e7in standart bir yap\u0131 da sa\u011flar. Kullan\u0131c\u0131lar\u0131n bak\u0131m yapabilecekleri b\u00fcy\u00fck uygulamalar olu\u015fturmas\u0131n\u0131 sa\u011flar.<\/p>\n

Neden Bir \u00c7er\u00e7eveye ihtiyac\u0131n\u0131z Var?<\/h2>\n

\u00c7er\u00e7eveler genellikle, kodu s\u0131f\u0131rdan olu\u015fturmak zorunda kalmaman\u0131z i\u00e7in birbirini destekleyen yap\u0131 ile web geli\u015ftirme performanslar\u0131n\u0131 art\u0131r\u0131r. \u00c7er\u00e7eveler ekstra \u00e7aba sarf etmeden yaz\u0131l\u0131ma eklenebilecek ekstra \u00f6zellik sunan zaman kazand\u0131ran ara\u00e7lard\u0131r.<\/p>\n

Farkl\u0131 S\u00fcr\u00fcmleri Nelerdir?<\/h2>\n

\u00c7e\u015fitli \u00e7er\u00e7eve s\u00fcr\u00fcmleri i\u00e7in her \u015feyi kapsayan bir terimdir. \u0130lk olarak 2009 y\u0131l\u0131nda geli\u015ftirilmeye ba\u015flad\u0131 buna ba\u011fl\u0131 olarak bug\u00fcne kadar bir\u00e7ok yenileme yap\u0131ld\u0131. Ba\u015flang\u0131\u00e7 olarak AngularJS halk aras\u0131nda angular 1 olarak bilinmektedir. Ard\u0131ndan 1,2,3,4,5 geldi ve son olarak 11.11.2020\u2019de payla\u015f\u0131lan s\u00fcr\u00fcm 11\u2019e kadard\u0131r. Ba\u015f\u0131ndan sonuna kadar her\u00a0 s\u00fcr\u00fcm\u00fc mevcut sorunlar\u0131 ele alarak, hatalar\u0131 d\u00fczenleyerek ve mevcut platformlara ayak uydurarak kendini geli\u015ftirmi\u015ftir.<\/p>\n

\u00d6zellikleri<\/h2>\n

Belge Nesnesi Modeli<\/h3>\n

Belge Nesne Modeli (DOM), bir XML ya da HTML belgesini her d\u00fc\u011f\u00fcm\u00fcn belgenin bir b\u00f6l\u00fcm\u00fcn\u00fc temsil eden a\u011fa\u00e7 yap\u0131s\u0131 olarak ele al\u0131r. Normal bir belge nesneni modeli kullan\u0131r. Ayn\u0131 HTML \u00fczerinde birden fazla g\u00fcncelleme oldu\u011funu d\u00fc\u015f\u00fcn\u00fcn, hali haz\u0131rda g\u00fcncellenmi\u015f olanlar\u0131 de\u011fil t\u00fcm\u00fcn\u00fc g\u00fcncelleyecektir.<\/p>\n

Yaz\u0131 Tipi<\/h3>\n

TypeScript, kullan\u0131c\u0131lar\u0131n anla\u015f\u0131lmas\u0131 daha az karma\u015f\u0131k olan JavaScript kodu yazmaya yard\u0131mc\u0131 olan birden fazla JavaScript t\u00fcr\u00fc tan\u0131mlar. T\u00fcm TypeScript kodu, JavaScript ile bir araya getirilerek herhangi bir platformda kolayca \u00e7al\u0131\u015fabilmektedir.<\/p>\n

Veri Ba\u011flama<\/h3>\n

Veri ba\u011flama, m\u00fc\u015fterilerin bir internet taray\u0131c\u0131s\u0131 ile net web sayfas\u0131 fakt\u00f6rlerini de\u011fi\u015ftirmesine \u015fans tan\u0131yan y\u00f6ntemdir. Dinamik HTML kullan\u0131l\u0131r ve karma\u015f\u0131k komut dosyas\u0131 olu\u015fturma ya da programlamaya ihtiya\u00e7 duyulmaz. Veri ba\u011flanma, hesap makineleri, \u00f6\u011freticiler, oyunlar vb. i\u00e7in kullan\u0131lmaktad\u0131r.vAyr\u0131ca, sayfalar genellikle veri i\u00e7erdi\u011finde, bir web sayfas\u0131n\u0131n y\u00fcksek kademeli olarak g\u00f6sterilmesini sa\u011flar.<\/p>\n

Test<\/h3>\n

Jasmine test \u00e7er\u00e7evesini kullanmaktad\u0131r. Farkl\u0131\u0131 t\u00fcrde test seneyolar\u0131n\u0131 yapmak i\u00e7in Jasmine test \u00e7er\u00e7evesi kullan\u0131lmaktad\u0131r. Birden fazla i\u015flevsellik sa\u011flamaktad\u0131r. Art\u0131k Angular\u2019\u0131n temel \u00f6zelliklerini kavrad\u0131ktan sonra yap\u0131s\u0131n\u0131 tan\u0131mak istersiniz. Angularla g\u00fcnl\u00fck hayatta \u00e7al\u0131\u015fmak istiyorsan\u0131z Angular Sertifikasyon E\u011fitim Kursu alarak kullanmaya ba\u015flayabilirsiniz.<\/p>\n

Mimari<\/h3>\n

Donan\u0131ml\u0131 bir model-view-controller (MVC) \u00e7er\u00e7evesidir. Uygulaman\u0131n yap\u0131s\u0131n\u0131n nas\u0131l olmas\u0131 gerekti\u011fini anlatmak i\u00e7in net bir rehberlik servisine sahiptir ve DOM sunarken \u00e7ift y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 sa\u011flar. Temel yap\u0131ta\u015flar\u0131 \u015funlard\u0131r;<\/p>\n

Mod\u00fcller<\/h3>\n

Angular\u2019\u0131n , uygulamay\u0131 ba\u015flatmak i\u00e7in AppModule ad\u0131nda bir temel mod\u00fcl\u00fc mevcuttur.<\/p>\n

Bile\u015fenler<\/h3>\n

Uygulamadaki bile\u015fenler, uygulama mant\u0131\u011f\u0131n\u0131 ve verilerini tutan bir s\u0131n\u0131f tan\u0131mlar. Bile\u015fen genel olarak kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn bir b\u00f6l\u00fcm\u00fcn\u00fc kapsar.<\/p>\n

\"Angular<\/p>\n

\u015eablonlar<\/h3>\n

\u015eablonu, HTLM \u00f6gelerini g\u00f6sterilmeden \u00f6nce de\u011fi\u015ftirmek i\u00e7in angular i\u015faretlemesini ve Html\u2019i birle\u015ftirir. \u0130ki t\u00fcr ba\u011flama t\u00fcr\u00fc vard\u0131r;<\/p>\n

    \n
  • Olay Ba\u011flama:<\/strong> Var olan uygulaman\u0131z\u0131n verilerinde g\u00fcncelleme yaparak hedefindeki kullan\u0131c\u0131 giri\u015fine yan\u0131t verilmesini sa\u011flamaktad\u0131r.<\/li>\n
  • \u00d6zellik Ba\u011flama<\/strong>: Kullan\u0131c\u0131lar\u0131n, uygulama verilerinizden hesaplanan de\u011feri Html\u2019ye enterpolasyon yapmas\u0131na olanak sa\u011flar.<\/li>\n<\/ul>\n

    Meta veriler<\/h3>\n

    Meta veriler, angular\u2019a bir s\u0131n\u0131f\u0131n nas\u0131l i\u015fledi\u011fini s\u00f6ylemektedir. Bir s\u0131n\u0131fta beklenen davran\u0131\u015f\u0131n\u0131 yap\u0131land\u0131rabilmesi i\u00e7in s\u0131n\u0131f i\u00e7ini dekore etmek i\u00e7in kullan\u0131lmaktad\u0131r.<\/p>\n

    Hizmetler<\/h3>\n

    G\u00f6r\u00fcn\u00fcmle bir ili\u015fkisi olmayan ancak bile\u015fenler aras\u0131nda payla\u015f\u0131lmas\u0131 gereken veriniz ve d\u00fc\u015f\u00fcnceleriniz oldu\u011funda, bir hizmet s\u0131n\u0131f\u0131 olu\u015fturulmu\u015f olur.\u00a0 Bu s\u0131n\u0131flar her zaman @Injectible ile ili\u015fkilendirilir.<\/p>\n

    Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/h3>\n

    Bu \u00f6zellik, bile\u015fen s\u0131n\u0131flar\u0131n\u0131z\u0131 verimli ve net tutman\u0131za olanak sa\u011flar. Herhangi bir sunucudan veri getirmez, kullan\u0131c\u0131 giri\u015finizi do\u011frulamaz ve do\u011frudan oturum a\u00e7maz. Kendi avantaj ve dezavantajlar\u0131yla birlikte gelir. Bunlara birlikte bakal\u0131m;<\/p>\n

    Angular’\u0131n Avantajlar\u0131<\/h2>\n
      \n
    • \u00d6zel Bile\u015fenler<\/strong><\/li>\n<\/ul>\n

      Kullan\u0131c\u0131lar\u0131n g\u00f6sterdikleri i\u015flevselli\u011fi yeni olarak kullan\u0131laca\u011f\u0131 par\u00e7alara d\u00f6n\u00fc\u015ft\u00fcrme mant\u0131\u011f\u0131 ile paket olu\u015fturabilen kendi bile\u015fenlerini olu\u015fturmaya \u015fans vermektedir.<\/p>\n

        \n
      • Veri Ba\u011flama<\/strong><\/li>\n<\/ul>\n

        Kullan\u0131c\u0131lar\u0131n verilerini JavaScript kodundan manuel olarak bir kod yaz\u0131lmas\u0131na gerek duyulmadan kullan\u0131c\u0131 olaylar\u0131na tepki vermesine olanak tan\u0131maktad\u0131r.<\/p>\n

          \n
        • Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/strong><\/li>\n<\/ul>\n

          Kullan\u0131n\u0131n hizmet yazmas\u0131n\u0131 ve ihiya\u00e7 duyulan her yere eri\u015fimde bulunmalar\u0131n\u0131 sa\u011flar. Bu ayn\u0131 zamanda test edilme \u00f6zelli\u011finin kullan\u0131labilirli\u011fini geli\u015ftirir.<\/p>\n

            \n
          • Test<\/strong><\/li>\n<\/ul>\n

            Testler birinci s\u0131n\u0131f ara\u00e7lar kategorisine girerler ve test edilebilirli\u011fini g\u00f6z \u00f6n\u00fcnde bulundurularak olu\u015fumunu sa\u011flam\u0131\u015ft\u0131r. Uygulaman\u0131zdaki t\u00fcm b\u00f6l\u00fcmleri test etme olas\u0131l\u0131\u011f\u0131na sahip olabilirsiniz.<\/p>\n

              \n
            • Kapsaml\u0131 Olu\u015fum<\/strong><\/li>\n<\/ul>\n

              Tam anlam\u0131yla te\u015fekk\u00fcrl\u00fc bir \u00e7er\u00e7evedir uygulama i\u00e7inde y\u00f6nlendirme, sunucu i\u00e7inde ileti\u015fim kurma ve daha fazlas\u0131n\u0131 kullanmak i\u00e7in haz\u0131r \u00e7\u00f6z\u00fcmler sunar.<\/p>\n

                \n
              • Taray\u0131c\u0131 ile Uyumlulu\u011fu<\/strong><\/li>\n<\/ul>\n

                Platformlar aras\u0131ndad\u0131r ve birden fazla taray\u0131c\u0131 ile uyum sa\u011flamaktad\u0131r. Uygulama ayn\u0131 oranda taray\u0131c\u0131larda ve i\u015fletim sistemlerinde \u00e7al\u0131\u015fabilir.<\/p>\n

                Angular Dezavantajlar<\/h2>\n
                  \n
                • Derin \u00d6\u011frenme Etkisi<\/strong><\/li>\n<\/ul>\n

                  Kullanan t\u00fcm kullan\u0131c\u0131lar\u0131n bilmesi gereken temel y\u00f6nergeleri, bile\u015fenleri, mod\u00fclleri, \u015fablonlar\u0131 ve dekorat\u00f6rleri i\u00e7erir. Geli\u015fmi\u015f konular aras\u0131nda de\u011fi\u015fiklik alg\u0131lama, b\u00f6lgeler ve AoT derlemeleri yer al\u0131r. Angular 4 adet tam \u00e7er\u00e7eve oldu\u011fu i\u00e7in yeni ba\u015flayanlar\u0131n kavramas\u0131 zor olabilir.<\/p>\n

                    \n
                  • S\u0131n\u0131rl\u0131 SEO se\u00e7enekleri<\/strong><\/li>\n<\/ul>\n

                    Arama motoru taray\u0131c\u0131lar\u0131na ve s\u0131n\u0131rl\u0131 SEO se\u00e7eneklerine zay\u0131f eri\u015febilirlik sunmaktad\u0131r.<\/p>\n

                      \n
                    • G\u00f6\u00e7<\/strong><\/li>\n<\/ul>\n

                      Firmalar\u0131n angular\u2019\u0131 s\u0131k s\u0131k kullanmalar\u0131n\u0131n sebeplerinden biri eskiden kullan\u0131lan js\/jquery tabanl\u0131 olan kodu angular\u0131n mimarisine ta\u015f\u0131man\u0131n zor olmas\u0131d\u0131r. Ayr\u0131ca her yeni olan s\u00fcr\u00fcm\u00fcn y\u00fckseltilmesi zor olabilir ve bir\u00e7o\u011fu geriye d\u00f6n\u00fck i\u00e7in uyumlu de\u011fildir.<\/p>\n

                        \n
                      • Karma\u015f\u0131k ve Ayr\u0131nt\u0131l\u0131<\/strong><\/li>\n<\/ul>\n

                        Toplulu\u011fundaki yayg\u0131n olan bir di\u011fer sorun, \u00e7er\u00e7evelerin ayr\u0131nt\u0131l\u0131 olmas\u0131d\u0131r. Di\u011fer \u00f6n u\u00e7 ara\u00e7larla k\u0131yasla olduk\u00e7a karma\u015f\u0131kt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"

                        Sosyal medyadan sa\u011fl\u0131k hizmetlerine, bankac\u0131l\u0131ktan e-ticaret uygulamalar\u0131na kadar g\u00fcn\u00fcm\u00fczde bir\u00e7ok insan mobil uygulamalar\u0131 kullanmaktad\u0131r. Bu uygulamalar olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r sorunsuz kullan\u0131c\u0131 deneyimleri ile aray\u00fczler sunarak g\u00fcnler hayattaki bir\u00e7ok i\u015fimizde bize yard\u0131mc\u0131 olmaktad\u0131r. Bu t\u00fcr uygulamalar bizim i\u00e7in nas\u0131l bu kadar g\u00fcvenilir oldu? B\u00fcy\u00fck bir oran\u0131 sa\u011flam ve g\u00fcvenilir uygulamalar olu\u015fturmay\u0131 kolayla\u015ft\u0131rmaya yarayan Angular gibi yayg\u0131n olarak […]<\/p>\n","protected":false},"author":2,"featured_media":5153,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[55,51],"tags":[],"_links":{"self":[{"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/posts\/5151"}],"collection":[{"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/comments?post=5151"}],"version-history":[{"count":2,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/posts\/5151\/revisions"}],"predecessor-version":[{"id":5157,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/posts\/5151\/revisions\/5157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/media\/5153"}],"wp:attachment":[{"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/media?parent=5151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/categories?post=5151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turkticaret.net\/blog\/wp-json\/wp\/v2\/tags?post=5151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}