{"id":14125,"date":"2022-03-18T15:35:40","date_gmt":"2022-03-18T13:35:40","guid":{"rendered":"https:\/\/www.ihs.com.tr\/blog\/?p=14125"},"modified":"2022-03-18T15:35:40","modified_gmt":"2022-03-18T13:35:40","slug":"angular-nedir","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/","title":{"rendered":"Angular Nedir? Mimarisi, \u00d6zellikleri ve Avantajlar\u0131"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Sosyal medyadan sa\u011fl\u0131\u011fa, e-ticaretten \u00e7evrimi\u00e7i bankac\u0131l\u0131\u011fa, d\u00fcnya \u00e7ap\u0131nda milyarlarca insan hemen hemen her \u015fey i\u00e7in web ve mobil uygulamalar\u0131 kullan\u0131yor. Bu uygulamalar kullan\u0131\u015fl\u0131d\u0131r ve sorunsuz kullan\u0131c\u0131 deneyimleri ve aray\u00fczleri sunarak g\u00fcnl\u00fck ya\u015famlar\u0131m\u0131zda bize yard\u0131mc\u0131 olur. Bu uygulamalar b\u00f6yle bir g\u00fcvenilirlik sa\u011flamak i\u00e7in nas\u0131l geli\u015ftiriliyor? Bu i\u015fleri geli\u015ftirmek i\u00e7in yap\u0131lan harcamalar\u0131n bir k\u0131sm\u0131 <\/span><strong>Angular<\/strong><span style=\"font-weight: 400;\"> gibi yayg\u0131n olarak kullan\u0131lan framework\u2019lere gidiyor ve bu da sa\u011flam uygulamalar olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131yor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00d6yleyse Angular&#8217;\u0131 daha iyi tan\u0131yal\u0131m. Bu makalede Angular hakk\u0131nda kafan\u0131zdaki soru i\u015faretlerini gidermeye ve Angular hakk\u0131nda daha do\u011fru d\u00fc\u015f\u00fcnmenizi sa\u011flamaya \u00e7al\u0131\u015faca\u011f\u0131z.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_77 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7erik Tablosu<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f0c2b56d0c9\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\" id=\"ez-toc-cssicon-toggle-item-69f0c2b56d0c9\" aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angular-nedir\" >Angular nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Neden-Bir-Frameworke-Ihtiyaciniz-Var\" >Neden Bir Framework\u2019e \u0130htiyac\u0131n\u0131z Var?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Neden-Angular\" >Neden Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Farkli-Angular-Surumleri-Nelerdir\" >Farkl\u0131 Angular S\u00fcr\u00fcmleri Nelerdir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angularin-Ozellikleri-Nelerdir\" >Angular\u0131n \u00d6zellikleri Nelerdir?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#1-Belge-Nesne-Modeli\" >1. Belge Nesne Modeli\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#2-TypeScript\" >2. TypeScript\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#3-Veri-Baglama\" >3. Veri Ba\u011flama<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#4-Test\" >4. Test\u00a0<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angular-Mimarisi\" >Angular Mimarisi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#1-Moduller\" >1. Mod\u00fcller<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#2-Bilesenler\" >2. Bile\u015fenler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#3-Sablonlar\" >3. \u015eablonlar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#4-Meta-veriler\" >4. Meta veriler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#5-Hizmetler\" >5. Hizmetler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#6-Bagimlilik-Enjeksiyonu\" >6. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#AngularJS-Yonergeleri\" >AngularJS Y\u00f6nergeleri<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angularin-Avantajlari-Nelerdir\" >Angular&#8217;\u0131n Avantajlar\u0131 Nelerdir?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#1-Ozel-Bilesenler\" >1. \u00d6zel Bile\u015fenler<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#2-Veri-Baglama\" >2. Veri Ba\u011flama<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#3-Bagimlilik-Enjeksiyonu\" >3. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#4-Test-2\" >4. Test<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#5-Kapsam\" >5. Kapsam<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#6-Tarayici-Uyumlulugu\" >6. Taray\u0131c\u0131 Uyumlulu\u011fu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angularin-Sinirlamalari\" >Angular&#8217;\u0131n S\u0131n\u0131rlamalar\u0131<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#1-Dik-Ogrenme-Egrisi\" >1. Dik \u00d6\u011frenme E\u011frisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#2-Sinirli-SEO-Secenekleri\" >2. S\u0131n\u0131rl\u0131 SEO Se\u00e7enekleri<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#3-Migrasyon-%E2%80%93-Tasima\" >3. Migrasyon &#8211; Ta\u015f\u0131ma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#4-Ayrintili-ve-Karmasik\" >4. Ayr\u0131nt\u0131l\u0131 ve Karma\u015f\u0131k<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angular-ve-AngularJS-Arasindaki-Farklar\" >Angular ve AngularJS Aras\u0131ndaki Farklar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Angular-Kullanan-Sirketler\" >Angular Kullanan \u015eirketler<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.ihs.com.tr\/blog\/angular-nedir\/#Son-Olarak\" >Son Olarak:<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Angular-nedir\"><\/span><strong>Angular nedir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\"><strong>Angular<\/strong>, <strong>TypeScript<\/strong><\/span><span style=\"font-weight: 400;\"> ile yaz\u0131lm\u0131\u015f a\u00e7\u0131k kaynakl\u0131 bir <\/span><strong>JavaScript<\/strong><span style=\"font-weight: 400;\"><strong> framework&#8217;\u00fc<\/strong>d\u00fcr . Angular Google taraf\u0131ndan desteklenir ve birincil amac\u0131 tek sayfal\u0131k uygulamalar geli\u015ftirmektir. Bir framework olarak Angular, geli\u015ftiricilerin birlikte \u00e7al\u0131\u015fmas\u0131 i\u00e7in standart bir yap\u0131 sa\u011flarken a\u00e7\u0131k avantajlara sahiptir. Kullan\u0131c\u0131lar\u0131n s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde b\u00fcy\u00fck uygulamalar olu\u015fturmas\u0131n\u0131 sa\u011flar.\u00a0<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Neden-Bir-Frameworke-Ihtiyaciniz-Var\"><\/span><strong>Neden Bir Framework\u2019e \u0130htiyac\u0131n\u0131z Var?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Genel olarak framework\u2019er, geli\u015ftiricilerin kodu s\u0131f\u0131rdan yeniden olu\u015fturmaya devam etmek zorunda kalmamalar\u0131 i\u00e7in tutarl\u0131 bir yap\u0131 sa\u011flayarak web ve uygulama geli\u015ftirme verimlili\u011fini ve performans\u0131n\u0131 art\u0131r\u0131r. Framework\u2019ler, geli\u015ftiricilere ekstra \u00e7aba gerektirmeden yaz\u0131l\u0131ma eklenebilecek bir dizi ekstra \u00f6zellik sunan zaman kazand\u0131r\u0131c\u0131lard\u0131r.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Neden-Angular\"><\/span><strong>Neden Angular?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>JavaScript<\/strong><span style=\"font-weight: 400;\"> , en s\u0131k kullan\u0131lan istemci taraf\u0131 betik dilidir. Web sayfalar\u0131yla bir\u00e7ok benzersiz \u015fekilde etkile\u015fimi sa\u011flamak i\u00e7in <\/span><strong>HTML<\/strong><span style=\"font-weight: 400;\"> belgelerine yaz\u0131labilir. Yayg\u0131n deste\u011fe sahip, nispeten \u00f6\u011frenmesi kolay bir dil olarak, modern uygulamalar geli\u015ftirmek i\u00e7in \u00e7ok uygundur.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ancak JavaScript mod\u00fclerlik, test edilebilirlik ve geli\u015ftirici \u00fcretkenli\u011fi gerektiren tek sayfal\u0131k uygulamalar geli\u015ftirmek i\u00e7in ideal midir? Belki de de\u011fil.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Bu g\u00fcnlerde alternatif \u00e7\u00f6z\u00fcmler sa\u011flamak i\u00e7in tasarlanm\u0131\u015f \u00e7e\u015fitli Framework\u2019ler ve k\u00fct\u00fcphaneler var. Front-end web geli\u015ftirme ile ilgili olarak, Angular, geli\u015ftiricilerin JavaScript&#8217;i tek ba\u015f\u0131na kullan\u0131rken kar\u015f\u0131la\u015ft\u0131klar\u0131 sorunlar\u0131n hepsini olmasa da \u00e7o\u011funu ele al\u0131r.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Farkli-Angular-Surumleri-Nelerdir\"><\/span><strong>Farkl\u0131 Angular S\u00fcr\u00fcmleri Nelerdir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">&#8220;Angular&#8221;, \u00e7e\u015fitli framework s\u00fcr\u00fcmleri i\u00e7in her \u015feyi kapsayan terimdir. Angular 2009 y\u0131l\u0131nda geli\u015ftirildi ve sonu\u00e7 olarak bir\u00e7ok geli\u015ftirme yap\u0131ld\u0131.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0130lk olarak, \u201cAngular 1\u201d olarak adland\u0131r\u0131lan ve sonunda AngularJS olarak bilinen orijinal Angular vard\u0131. Ard\u0131ndan Angulars 2, 3, 4, 5 \u2026 13 geldi ve s\u00fcrekli geli\u015ftirilmeye de devam ediliyor. Sonraki her bir Angular s\u00fcr\u00fcm\u00fc, \u00f6nceki s\u00fcr\u00fcm\u00fc geli\u015ftirerek hatalar\u0131 d\u00fczeltir, sorunlar\u0131 giderir.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mobil cihazlara uygun uygulamalar ve\/veya daha karma\u015f\u0131k uygulamalar tasarlamak istiyorsan\u0131z, Angular\u2019\u0131 en g\u00fcncel s\u00fcr\u00fcm\u00fcne y\u00fckseltmeniz gerekir.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angularin-Ozellikleri-Nelerdir\"><\/span><strong>Angular\u0131n \u00d6zellikleri Nelerdir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Belge-Nesne-Modeli\"><\/span><span style=\"font-weight: 400;\">1. Belge Nesne Modeli\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14131\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/data-object-model.jpg\" alt=\"data-object-model\" width=\"907\" height=\"435\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/data-object-model.jpg 907w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/data-object-model-300x144.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/data-object-model-585x281.jpg 585w\" sizes=\"(max-width: 907px) 100vw, 907px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">DOM (Document Object Model &#8211; Belge Nesne Modeli), bir <\/span><a href=\"https:\/\/www.ihs.com.tr\/blog\/xml-sitemap-olusturmak-optimize-etmek-icin-13-ipucu\/\"><span style=\"font-weight: 400;\">XML<\/span><\/a><span style=\"font-weight: 400;\"> veya HTML belgesini, her d\u00fc\u011f\u00fcm\u00fcn belgenin bir b\u00f6l\u00fcm\u00fcn\u00fc temsil etti\u011fi bir a\u011fa\u00e7 yap\u0131s\u0131 olarak ele al\u0131r.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular, normal DOM kullan\u0131r. Ayn\u0131 HTML sayfas\u0131nda on adet g\u00fcncelleme yap\u0131ld\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcn. Angular, halihaz\u0131rda yeni olu\u015fturulanlar\u0131 olanlar\u0131 g\u00fcncellemek yerine, HTML etiketlerinin t\u00fcm a\u011fa\u00e7 yap\u0131s\u0131n\u0131 g\u00fcncelleyecektir.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-TypeScript\"><\/span><span style=\"font-weight: 400;\">2. TypeScript\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14130\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-typeScript.jpg\" alt=\"angular-typeScript\" width=\"586\" height=\"223\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-typeScript.jpg 586w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-typeScript-300x114.jpg 300w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">TypeScript, JavaScript&#8217;e, kullan\u0131c\u0131lar\u0131n anla\u015f\u0131lmas\u0131 daha kolay JavaScript kodu yazmas\u0131na yard\u0131mc\u0131 olan bir dizi t\u00fcr tan\u0131mlar. TypeScript kodunun tamam\u0131 JavaScript ile derlenir ve herhangi bir platformda sorunsuz bir \u015fekilde \u00e7al\u0131\u015fabilir. Bir Angular uygulamas\u0131 geli\u015ftirmek i\u00e7in TypeScript zorunlu de\u011fildir. Bununla birlikte, kod yap\u0131s\u0131n\u0131n anla\u015f\u0131lmas\u0131n\u0131 ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131rken daha iyi s\u00f6zdizimsel yap\u0131 sundu\u011fu i\u00e7in \u015fiddetle tavsiye edilir.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">TypeScript&#8217;i a\u015fa\u011f\u0131daki komutla bir NPM paketi olarak y\u00fckleyebilirsiniz:<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><code><strong>npm install -g typescript<\/strong><\/code><\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Veri-Baglama\"><\/span><span style=\"font-weight: 400;\">3. Veri Ba\u011flama<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Veri ba\u011flama<\/span><span style=\"font-weight: 400;\"> , kullan\u0131c\u0131lar\u0131n bir web taray\u0131c\u0131s\u0131 arac\u0131l\u0131\u011f\u0131yla web sayfas\u0131 \u00f6\u011felerini de\u011fi\u015ftirmelerini sa\u011flayan bir i\u015flemdir. Dinamik HTML kullan\u0131r ve karma\u015f\u0131k komut dosyas\u0131 olu\u015fturma veya <\/span><a href=\"https:\/\/www.ihs.com.tr\/blog\/programlamayi-neden-ogrenmeliyiz\/\"><span style=\"font-weight: 400;\">programlama<\/span><\/a><span style=\"font-weight: 400;\"> gerektirmez . Veri ba\u011flama, hesap makineleri, \u00f6\u011freticiler, forumlar ve oyunlar gibi etkile\u015fimli bile\u015fenler i\u00e7eren web sayfalar\u0131nda kullan\u0131l\u0131r.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular, iki y\u00f6nl\u00fc ba\u011flamay\u0131 kullan\u0131r. Model durumu, ilgili <a href=\"https:\/\/www.ihs.com.tr\/blog\/kullanici-deneyimi-ux-nedir-neden-onem-vermeniz-gerekiyor\/\">UI (User Interface &#8211; Kullan\u0131c\u0131 Aray\u00fcz\u00fc)<\/a> \u00f6\u011felerinde yap\u0131lan de\u011fi\u015fiklikleri yans\u0131t\u0131r. Tersine, UI durumu da, model durumundaki t\u00fcm de\u011fi\u015fiklikleri yans\u0131t\u0131r. Bu \u00f6zellik, framework&#8217;\u00fcn denetleyici arac\u0131l\u0131\u011f\u0131yla DOM&#8217;un model verilerine ba\u011flamas\u0131n\u0131 sa\u011flar.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Test\"><\/span><span style=\"font-weight: 400;\">4. Test\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14129\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-test.jpg\" alt=\"angular-test\" width=\"710\" height=\"300\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-test.jpg 710w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-test-300x127.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-test-585x247.jpg 585w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Angular, <\/span><span style=\"font-weight: 400;\">Jasmine test <a href=\"https:\/\/www.ihs.com.tr\/blog\/cms-vs-framework-hangisi-daha-iyi\/\">framework<\/a>&#8216;\u00fcn\u00fc<\/span><span style=\"font-weight: 400;\"> kullan\u0131r . Jasmine framework&#8217;\u00fc, farkl\u0131 t\u00fcrde test senaryolar\u0131 yazmak i\u00e7in birden fazla i\u015flevsellik sa\u011flar. Karma, ba\u015flatma, raport\u00f6rler ve test framework&#8217;\u00fcn\u00fc ayarlamak i\u00e7in bir yap\u0131land\u0131rma dosyas\u0131 kullanan testler i\u00e7in g\u00f6rev y\u00fcr\u00fct\u00fcc\u00fcd\u00fcr.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Art\u0131k Angular&#8217;\u0131n temel \u00f6zelliklerine a\u015fina oldu\u011funuza g\u00f6re, Angular ile g\u00fcnl\u00fck olarak \u00e7al\u0131\u015fmak istiyorsan\u0131z mimarisini anlaman\u0131z gerekir.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular&#8217;\u0131n ne oldu\u011funu \u00f6\u011frenmeye devam etmek i\u00e7in mimariye ge\u00e7elim<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angular-Mimarisi\"><\/span><strong>Angular Mimarisi<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14128\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-mimarisi.jpg\" alt=\"angular-mimarisi\" width=\"1070\" height=\"496\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-mimarisi.jpg 1070w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-mimarisi-300x139.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-mimarisi-1024x475.jpg 1024w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-mimarisi-585x271.jpg 585w\" sizes=\"(max-width: 1070px) 100vw, 1070px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Angular, tam te\u015fekk\u00fcll\u00fc bir model g\u00f6r\u00fcn\u00fcm denetleyicisi (MVC) framework&#8217;\u00fcd\u00fcr. Uygulaman\u0131n nas\u0131l yap\u0131land\u0131r\u0131lmas\u0131 gerekti\u011fi konusunda net rehberlik sa\u011flar ve ger\u00e7ek DOM olu\u015fturulurken \u00e7ift y\u00f6nl\u00fc veri ak\u0131\u015f\u0131 sunar.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A\u015fa\u011f\u0131dakiler, bir Angular uygulamas\u0131n\u0131n sekiz yap\u0131 ta\u015f\u0131d\u0131r:\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Moduller\"><\/span><span style=\"font-weight: 400;\">1. Mod\u00fcller<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bir Angular uygulamas\u0131n\u0131n, uygulamay\u0131 ba\u015flatmak i\u00e7in \u00f6ny\u00fckleme mekanizmas\u0131 sa\u011flayan AppModule adl\u0131 bir k\u00f6k mod\u00fcl\u00fc vard\u0131r.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Bilesenler\"><\/span><span style=\"font-weight: 400;\">2. Bile\u015fenler<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Uygulamadaki her <\/span><span style=\"font-weight: 400;\">bile\u015fen<\/span><span style=\"font-weight: 400;\">, uygulama mant\u0131\u011f\u0131n\u0131 ve verilerini tutan bir s\u0131n\u0131f\u0131 tan\u0131mlar. Bir bile\u015fen genellikle kullan\u0131c\u0131 arabiriminin (UI) bir b\u00f6l\u00fcm\u00fcn\u00fc tan\u0131mlar.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Sablonlar\"><\/span><span style=\"font-weight: 400;\">3. \u015eablonlar<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular \u015fablonu, HTML \u00f6\u011felerini g\u00f6r\u00fcnt\u00fclenmeden \u00f6nce de\u011fi\u015ftirmek i\u00e7in Angular i\u015faretlemelerini (markup) HTML ile birle\u015ftirir. \u0130ki t\u00fcr veri ba\u011flama vard\u0131r:\u00a0<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Olay ba\u011flama:<\/strong> Uygulama verilerinizi g\u00fcncelleyerek uygulaman\u0131z\u0131n hedef ortamdaki kullan\u0131c\u0131 giri\u015fine yan\u0131t vermesini sa\u011flar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>\u00d6zellik ba\u011flama:<\/strong> Kullan\u0131c\u0131lar\u0131n, uygulama verilerinizden hesaplanan de\u011ferleri HTML i\u00e7ine yazmas\u0131na \/ eklemesine olanak tan\u0131r.<\/span><\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"4-Meta-veriler\"><\/span><span style=\"font-weight: 400;\">4. Meta veriler<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Meta veriler, Angular&#8217;a bir s\u0131n\u0131f\u0131n nas\u0131l i\u015flenece\u011fini s\u00f6yler. Bir s\u0131n\u0131f\u0131n beklenen davran\u0131\u015f\u0131n\u0131 yap\u0131land\u0131rabilmesi i\u00e7in s\u0131n\u0131f\u0131 dekore etmek i\u00e7in kullan\u0131l\u0131r.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Hizmetler\"><\/span><span style=\"font-weight: 400;\">5. Hizmetler<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">G\u00f6r\u00fcn\u00fcmle ili\u015fkili olmayan ancak bile\u015fenler aras\u0131nda payla\u015f\u0131lmas\u0131 gereken verileriniz veya mant\u0131\u011f\u0131n\u0131z oldu\u011funda, bir <\/span><span style=\"font-weight: 400;\">hizmet<\/span><span style=\"font-weight: 400;\"> s\u0131n\u0131f\u0131 olu\u015fturulur. S\u0131n\u0131f her zaman @Injectible dekorat\u00f6r\u00fc ile ili\u015fkilendirilir.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Bagimlilik-Enjeksiyonu\"><\/span><span style=\"font-weight: 400;\">6. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bu \u00f6zellik<\/span><span style=\"font-weight: 400;\"> , bile\u015fen s\u0131n\u0131flar\u0131n\u0131z\u0131 canl\u0131 ve verimli tutman\u0131za olanak tan\u0131r. Bir sunucudan veri almaz, kullan\u0131c\u0131 giri\u015fini do\u011frulamaz veya do\u011frudan konsolda oturum a\u00e7maz. Bunun yerine, bu t\u00fcr g\u00f6revleri hizmetler olarak adland\u0131r\u0131lan i\u015f s\u0131n\u0131flar\u0131na devreder.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Angular, kendi avantajlar\u0131 ve dezavantajlar\u0131 ile birlikte gelir. Sonraki iki b\u00f6l\u00fcm bunlar\u0131 k\u0131saca a\u00e7\u0131klamaktad\u0131r.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"AngularJS-Yonergeleri\"><\/span><strong>AngularJS Y\u00f6nergeleri<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">AngularJS y\u00f6nergeleri, HTML&#8217;yi yeni s\u00f6zdizimi sa\u011flayarak geni\u015fletir. \u201cng-\u201d \u00f6n ekine sahip olduklar\u0131 i\u00e7in direktifleri kolayca tespit edebilirsiniz. AngularJS&#8217;ye \u00f6\u011feye belirli bir davran\u0131\u015f eklemesini veya hatta onu do\u011frudan de\u011fi\u015ftirmesini s\u00f6yleyen DOM \u00f6\u011fesindeki i\u015faret\u00e7iler olarak d\u00fc\u015f\u00fcn\u00fcn.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0130\u015fte iki \u00f6rnek direktif:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>ng-model<\/b><span style=\"font-weight: 400;\"> Direktifi<\/span><\/li>\n<\/ul>\n<p><b>ng-model<\/b><span style=\"font-weight: 400;\">, HTML kontrol\u00fcn\u00fcn de\u011ferini belirtilen AngularJS ifade de\u011feriyle ba\u011flar.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>ng-bind<\/b><span style=\"font-weight: 400;\"> Direktifi<\/span><\/li>\n<\/ul>\n<p><b>ng-bind<\/b><span style=\"font-weight: 400;\">, HTML kontrol de\u011ferini belirtilen bir AngularJS ifade de\u011feriyle de\u011fi\u015ftirir.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angularin-Avantajlari-Nelerdir\"><\/span><strong>Angular&#8217;\u0131n Avantajlar\u0131 Nelerdir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14127\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-avantajlari.jpg\" alt=\"angular-avantajlari\" width=\"687\" height=\"393\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-avantajlari.jpg 687w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-avantajlari-300x172.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2022\/03\/angular-avantajlari-585x335.jpg 585w\" sizes=\"(max-width: 687px) 100vw, 687px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ba\u015flang\u0131c\u0131ndan bu yana Angular&#8217;\u0131n bir\u00e7ok s\u00fcr\u00fcm\u00fc yay\u0131nland\u0131. T\u00fcm bu s\u00fcr\u00fcmler, framework&#8217;\u00fcn verimli \u00e7al\u0131\u015fmas\u0131na katk\u0131da bulunmu\u015ftur.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Ozel-Bilesenler\"><\/span><span style=\"font-weight: 400;\">1. \u00d6zel Bile\u015fenler<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, kullan\u0131c\u0131lar\u0131n i\u015flevselli\u011fi yeniden kullan\u0131labilir par\u00e7alar halinde i\u015fleme mant\u0131\u011f\u0131 ile birlikte paketleyebilen kendi bile\u015fenlerini olu\u015fturmalar\u0131n\u0131 sa\u011flar. Ayr\u0131ca web bile\u015fenleriyle de iyi \u00e7al\u0131\u015f\u0131r.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Veri-Baglama\"><\/span><span style=\"font-weight: 400;\">2. Veri Ba\u011flama<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, kullan\u0131c\u0131lar\u0131n verileri JavaScript kodundan g\u00f6r\u00fcn\u00fcme ta\u015f\u0131mas\u0131n\u0131 ve manuel olarak herhangi bir kod yazmak zorunda kalmadan kullan\u0131c\u0131 olaylar\u0131na tepki vermesini sa\u011flar.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Bagimlilik-Enjeksiyonu\"><\/span><span style=\"font-weight: 400;\">3. Ba\u011f\u0131ml\u0131l\u0131k Enjeksiyonu<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, kullan\u0131c\u0131lar\u0131n mod\u00fcler hizmetler yazmalar\u0131n\u0131 ve ihtiya\u00e7 duyduklar\u0131 her yere bunlar\u0131 enjekte etmelerini sa\u011flar. Bu, ayn\u0131 hizmetlerin test edilebilirli\u011fini ve yeniden kullan\u0131labilirli\u011fini art\u0131r\u0131r.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Test-2\"><\/span><span style=\"font-weight: 400;\">4. Test<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Testler birinci s\u0131n\u0131f ara\u00e7lard\u0131r ve Angular, s\u0131f\u0131rdan test edilebilirlik g\u00f6z \u00f6n\u00fcnde bulundurularak olu\u015fturulmu\u015ftur. Uygulaman\u0131z\u0131n her b\u00f6l\u00fcm\u00fcn\u00fc test etme olana\u011f\u0131na sahip olacaks\u0131n\u0131z ki bu \u015fiddetle tavsiye edilir.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Kapsam\"><\/span><span style=\"font-weight: 400;\">5. Kapsam<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, tam te\u015fekk\u00fcll\u00fc bir framework&#8217;t\u00fcr ve sunucu ileti\u015fimi, uygulaman\u0131z i\u00e7inde y\u00f6nlendirme ve daha fazlas\u0131 i\u00e7in kullan\u0131ma haz\u0131r \u00e7\u00f6z\u00fcmler sunar.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Tarayici-Uyumlulugu\"><\/span><span style=\"font-weight: 400;\">6. Taray\u0131c\u0131 Uyumlulu\u011fu<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, platformlar aras\u0131d\u0131r ve birden \u00e7ok taray\u0131c\u0131yla uyumludur. Angular uygulamas\u0131 genellikle t\u00fcm taray\u0131c\u0131larda (\u00d6rn: Chrome, Firefox, Edge) ve Windows, macOS ve Linux gibi i\u015fletim sistemlerinde \u00e7al\u0131\u015fabilir.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angularin-Sinirlamalari\"><\/span><strong>Angular&#8217;\u0131n S\u0131n\u0131rlamalar\u0131<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Dik-Ogrenme-Egrisi\"><\/span><span style=\"font-weight: 400;\">1. Dik \u00d6\u011frenme E\u011frisi<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular&#8217;\u0131n t\u00fcm kullan\u0131c\u0131lar\u0131n bilmesi gereken temel bile\u015fenleri aras\u0131nda y\u00f6nergeler, mod\u00fcller, dekorat\u00f6rler, bile\u015fenler, hizmetler, ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu, pipes ve \u015fablonlar bulunur. Daha geli\u015fmi\u015f konular aras\u0131nda de\u011fi\u015fiklik alg\u0131lama, b\u00f6lgeler, AoT derlemesi ve Rx.js bulunur. Yeni ba\u015flayanlar i\u00e7in Angular eksiksiz bir framework oldu\u011fu i\u00e7in \u00f6\u011frenmesi zor olabilir.\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Sinirli-SEO-Secenekleri\"><\/span><span style=\"font-weight: 400;\">2. S\u0131n\u0131rl\u0131 SEO Se\u00e7enekleri<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular, s\u0131n\u0131rl\u0131 SEO se\u00e7enekleri ve arama motoru taray\u0131c\u0131lar\u0131na zay\u0131f eri\u015filebilirlik sunar.Bunun sebebi Angular\u2019\u0131n istemci taraf\u0131nda \u00e7al\u0131\u015fmas\u0131d\u0131r. Ancak Yine de Google bu konuda geli\u015ftirmeler yapmaktad\u0131r. \u00d6zellikle Angular 11 sonras\u0131 geli\u015ftirmelerde \u00f6zellikle \u00f6n i\u015fleme modunda \u00e7al\u0131\u015fmas\u0131 sayesinde daha seo dostu ve okunabilirli\u011fi artt\u0131rmay\u0131 hedeflemi\u015flerdir.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Migrasyon-%E2%80%93-Tasima\"><\/span><span style=\"font-weight: 400;\">3. Migrasyon &#8211; Ta\u015f\u0131ma<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u015eirketlerin Angular&#8217;\u0131 s\u0131k kullanmamalar\u0131n\u0131n nedenlerinden biri, eski js\/jquery tabanl\u0131 kodu Angular stil mimarisine ta\u015f\u0131man\u0131n zorlu\u011fudur. Ayr\u0131ca, her yeni s\u00fcr\u00fcm\u00fcn y\u00fckseltilmesi zahmetli olabilir ve bunlar\u0131n bir\u00e7o\u011fu geriye d\u00f6n\u00fck uyumlu de\u011fildir.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Ayrintili-ve-Karmasik\"><\/span><span style=\"font-weight: 400;\">4. Ayr\u0131nt\u0131l\u0131 ve Karma\u015f\u0131k<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Angular toplulu\u011fundaki yayg\u0131n bir sorun, framework&#8217;\u00fcn ayr\u0131nt\u0131 d\u00fczeyidir. Ayr\u0131ca di\u011fer front-end ara\u00e7lara k\u0131yasla olduk\u00e7a karma\u015f\u0131kt\u0131r.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angular-ve-AngularJS-Arasindaki-Farklar\"><\/span><strong>Angular ve AngularJS Aras\u0131ndaki Farklar<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Angular, framework&#8217;\u00fcn (1-13) her s\u00fcr\u00fcm\u00fc i\u00e7in t\u00fcm\u00fcn\u00fc kapsayan bir terimdir, AngularJS ise yeniden adland\u0131r\u0131lan ilk Angular s\u00fcr\u00fcm\u00fcd\u00fcr. On y\u0131ldan daha eski olmas\u0131na ra\u011fmen, AngularJS eski de\u011fil; hala daha k\u00fc\u00e7\u00fck web uygulamalar\u0131 geli\u015ftirmek i\u00e7in bir\u00e7ok kullan\u0131m buluyor.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Baz\u0131 temel farkl\u0131l\u0131klar\u0131 \u00f6zetleyen kullan\u0131\u015fl\u0131 bir tablo<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><\/td>\n<td><span style=\"font-weight: 400;\">AngularJS<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Angular<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Mimari<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Mod g\u00f6r\u00fcn\u00fcm\u00fc bile\u015fen tasar\u0131m\u0131n\u0131 destekler<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Y\u00f6nergeleri ve bile\u015fenleri kullan\u0131r<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Dil<\/span><\/td>\n<td><span style=\"font-weight: 400;\">JavaScript<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Microsoft&#8217;un TypeScript&#8217;i<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Mobil yetenek<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Mobil taray\u0131c\u0131 deste\u011fi yok<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u00fcm pop\u00fcler mobil taray\u0131c\u0131lar taraf\u0131ndan desteklenir<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Yap\u0131<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Angular kadar y\u00f6netilebilir de\u011fil, ancak k\u00fc\u00e7\u00fck uygulamalar i\u00e7in ideal<\/span><\/td>\n<td><span style=\"font-weight: 400;\">B\u00fcy\u00fck uygulamalar\u0131 olu\u015fturmak ve s\u00fcrd\u00fcrmek daha kolay<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Y\u00f6nlendirme<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Y\u00f6nlendirme yap\u0131land\u0131rmas\u0131 i\u00e7in $routeprovider.When() kullan\u0131r<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Y\u00f6nlendirme yap\u0131land\u0131rmas\u0131 i\u00e7in @Route Config{(\u2026)} kullan\u0131r<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Verim<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Angular kadar h\u0131zl\u0131 de\u011fil<\/span><\/td>\n<td><span style=\"font-weight: 400;\">AngularJS&#8217;den daha h\u0131zl\u0131<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Angular-Kullanan-Sirketler\"><\/span><strong>Angular Kullanan \u015eirketler<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Google, Nike, Upwork, HBO ve di\u011ferleri gibi bir\u00e7ok \u00fcst d\u00fczey \u015firket Angular&#8217;dan yararlan\u0131r.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Son-Olarak\"><\/span><strong>Son Olarak:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bu makale, g\u00fc\u00e7l\u00fc \u00f6zellikleri ve karma\u015f\u0131kl\u0131klar\u0131 dahil olmak \u00fczere yaln\u0131zca Angular&#8217;\u0131n temellerine de\u011findi. Dahas\u0131 i\u00e7in IHS Blog\u2019u takip etmeyi ve i\u00e7eriklerimizi ilgilenebilece\u011fini d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fcz arkada\u015flar\u0131n\u0131z\u0131n faydalanabilmesi i\u00e7in payla\u015fmay\u0131 unutmay\u0131n \ud83d\ude42<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sosyal medyadan sa\u011fl\u0131\u011fa, e-ticaretten \u00e7evrimi\u00e7i bankac\u0131l\u0131\u011fa, d\u00fcnya \u00e7ap\u0131nda milyarlarca insan hemen hemen her \u015fey i\u00e7in web ve mobil uygulamalar\u0131 kullan\u0131yor. Bu uygulamalar&hellip;<\/p>\n","protected":false},"author":3,"featured_media":14133,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[417],"tags":[],"class_list":["post-14125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-yazilim"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=14125"}],"version-history":[{"count":3,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14125\/revisions"}],"predecessor-version":[{"id":14135,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/14125\/revisions\/14135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/14133"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=14125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=14125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=14125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}