Moderatör myakn55 Oluşturulma : 24 Nisan, 2022 Moderatör #1 Paylaş Oluşturulma : 24 Nisan, 2022 AngularJS, büyük ilgi uyandıran özelliklere sahip, sadece geliştiriciler için değil, dizayn cılar için de yapılmış, harika bir JavaScript framework' üdür. Bu makalede, en çok başı çeken özelliklerin ve bu özelliklerin bir sonraki mükemmel web uygulamanızı nasıl kolaylaştıracağı üzerinde duracağız. AngularJs' in güzelliği AngularJS, yeni, güçlü, istemci taraflı teknolojiyle çalışıp, HTML, CSS ve JavaScript' i genişleterek gerçekten güçlü işler yapmanızı sağlar. HTML nasıl olması gerekiyorsa öyledir, dinamik içerikler için oluşturulmuştur. Bu makalede, "büyük resim" i algılayabilmeniz için, AngularJS' in en önemli birkaç konseptinin üzerinde duracağız. Önemli olan şu ki, bahsi geçen özellikleri gördükten sonra, AngularJS ile eğlenerek birşeyler yapmak için yeterince heyecanlanmış olacaksınız. Özelik 1: Çift taraflı Veri-Bağlamak Düşünün ki model, uygulamanız için güvenilirliğin tek kaynağı. Modeliniz, uygulamanızda okunacak veya güncellenecek her türlü şeyin yerini alıyor. Veri-Bağlamak, AngularJS' in muhtemelen en çekici ve kullanışlı özelliği. Bu sizi hatırı sayılır ölçüde başlangıç kodu yazma zahmetinden kurtaracaktır. Tipik web uygulamalarının 80% e kadarı, DOM' da seçim yapma, manipülasyonlar vasıtasıyla düzenleme yapma ve dinleme işlemleri yapan baz kodlar ile doludur. Veri-Bağlama özelliği, bu kodu ortadan kaldırır ve sizin sadece uygulamanıza fokuslanmanızı sağlar. Yukarıda da bahsettiğimiz üzere, model sizin için uygulamanızda güvenilirliğin tek kaynağı. Her türlü okuma ve güncelleme yapılacak yerde, model i kullanıyorsunuz. data-binding direktif' i, modelinizin, uygulamanızın görüntüsüne yansımasını sağlar. Bu yansıma gözden uzak ve hiçbir efor sarfetmenize gerek kalmadan gerçekleşir. Alışılagelmiş yapıda, model adını verdiğimiz uygulama değişkenleri her değişiklik gösterdiği an, geliştirici bu değişikliklerin elle, DOM elementlerine ve niteliklerine aksettirilmesinden sorumludur. Bu çift taraflı gidilen bir yoldur. Bir yanda model, DOM elementlerinin değişimini sürdürür. Diğer bir yanda ise, DOM elementlerindeki değişiklikler, modelin yeni değerini belirler. Bu, kullanıcının etkileşimidir. Bu etkileşimde geliştiricinin sorumluluğu, etkileşimlerin sonuçlarını model' de tutmak ve uygulamanın görüntüsünde yapılacak güncellemeleri sağlamaktır. Bu çok fazla elle yapılan ve külfetli bir işlemdir. Uygulama büyüdükçe ve daha kompleks hale geldikçe, kontrolü zorlaşan bir hal almaktadır. Mutlaka daha iyi bir yol olmalı! AngularJS' in çift taraflı veri-bağlama özelliği, DOM' dan model'e ve tam tersine, aralarındaki senkronizasyonu ele alır İşte çok basit bir örnek ile, bir input' un değerinin h1 elementine nasıl bağlandığını deneyimliyoruz. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 <!doctype html> <html ng-app> <head> <script src="https://code.angularjs.org/angular-1.0.0rc10.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello, {{yourName}}!</h1> </div> </body> </html> Bu son derece uygulanabilirliği basit ve herşeyin sihirli bir şekilde gerçekleşmesidir. Özellik 2: Şablonlar Farkına varmamız gereken önemli bir noktada şu ki, AngularJS şablon manipülasyonlarını string olarak yapmaz. Bu tamamiyle, Tarayıcı DOM' udur. AngularJS' de bir şablon sadece düz klasik HTML' dir. HTML kelime haznesi, Model' in görüntüye aksettirilmesini kapsamak amaçlı büyütülmüştür. HTML şablonları tarayıcı tarafından DOM' un içine oturtulmuştur. DOM, AngularJS compiler için veri giriş alanı olmuştur. AngularJS direktif olarak adlandırılan, DOM şablonlarının uygulanması için seçim işlemi yapar. Direktifler, uygulamanızın görüntüsü için veri-bağlama işlemini kurmanın sorumluluğunu alırlar. Önemli olan nokta, AngularJS' in şablonlar üzerinde yaptığı manipülasyonu string olarak gerçekleştirmemesidir. AngularJS' e veri girişi DOM üzerindendir ve kesinlikle HTML string değildir. Veri-bağlamalar DOM transformasyonlarıdır, string tarzında değişiklikler yapılmaz, yada alışılagelmiş innerHTML değişikliği uygulanmaz. DOM' u veri girişi için kullanmak, AngularJS' in diğer frameworklerden en büyük farkıdır. DOM' u kullanmak, direktifleri geliştirmeyi ve kendi direktiflerinizi oluşturmanıza imkan tanır, ayrıca tekrar kullanılabilen komponentlerde de kullanabilirsiniz. En büyük avantajlarından biri de, tasarımcılar ve geliştiriciler arasında, sıkı bir iş akışı sağlayabilmesidir. Tasarımcılar, geliştiricilerin yazdığı direktifleri, teknik bilgi gereksinime ihtiyaç duymadan rahatça kullanabilirler. Tasarımcılar, normal akışında HTML yazarlar, geliştiriciler ise işe fonksiyonellik katarlar, çok az bir efor sarfederek veri-bağlamayı gerçekleştirirler. Aşağıdaki örnekte, ng-repeat direktifini kullanarak, images dizisini img şablonunda döndürüyorum. function AlbumCtrl($scope) { scope.images = [ {"thumbnail":"img/image_01.png", "description":"Image 01 description"}, {"thumbnail":"img/image_02.png", "description":"Image 02 description"}, {"thumbnail":"img/image_03.png", "description":"Image 03 description"}, {"thumbnail":"img/image_04.png", "description":"Image 04 description"}, {"thumbnail":"img/image_05.png", "description":"Image 05 description"} ]; } 1 2 3 4 5 6 7 <div ng-controller="AlbumCtrl"> <ul> <li ng-repeat="image in images"> <img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> </li> </ul> </div> Ayrıca şunun notu düşülmelidir ki, AngularJS size yeni bir sözdizimi öğrenmeniz konusunda zorlamaz yada şablonlarınızı uygulamanızdan çıkarmanızı gerektirmez. Özellik 3: MVC AngularJS, orjinal MVC tasarım deseninin temel prensiplerini, istemci taraflı web uygulamalarda kullanabilmenizi sağlar. MVC yada Model-View-Controller tasarım deseni, bambaşka insanlara bambaşka anlamlar ifade eder. AngularJS, MVC yapısını geleneksel şekilde içermez. Daha çok MVVM (Model-Görüntü-GörüntüModel) yapısına daha yakındır. Model Model' i basitçe özetlersek, uygulamanızdaki veridir. Model tamamen Javascript' in klasik obje tipidir. Kesinlikle, framework' ün class larından miras almasına gerek yoktur. Erişim için klasik getter ve setter metodlarını kullanabilirsiniz. Ayrıca vekil objeler ile de sarmalayabilirsiniz. Doğal javascript yazımı ile ilerlemek en hoş özelliğidir. Görüntü Model GörüntüModel, özelleştirilmiş veri ve metodları, özelleştirilmiş görüntülerde işleyebilmemizi sağlar. GörüntüModel, AngularJS uygulamasındaki $scope un içinde yaşayan bir objedir. $scope basit bir javascript objesidir. Dizayn edilmiş ufak bir API vasıtası ile, değişiklikleri, dahil olduğu yapıda farkeder ve bildirimde bulunur. Controller Controller, bağlı olduğu yapıyı kurmaya ve $scope taki metodların kontrolüyle ilgilenmekten sorumludurç Controller adına dikkat edilmesi gereken şey, Controller bir yapı depolamaz ve uzak servisler ile etkileşime girmez. View (Görüntü) View yani görüntü kelimesinden kasıt, AngularJS' in HTML' i ele alıp compile ettikten sonra, veri bağlamak için hazır hale getirdiği şeklidir. Bu ayrım ile uygulamanızın mimarisinde solid bir çözüm elde edersiniz. $scope veri ile bağlantılı bir referans a sahiptir. View, layout' u ele alır ve tüm etkileşimleri controller' a anında aktarır. Özellik 4: Dependency Injection AngularJS dahili olarak, geliştiricinin uygulamasını kolaylıkla geliştirmesini, anlamasını ve test etmesini sağlayan dependency injection sistemine sahiptir. Dependency Injection (DI) size bağımlılıklarınızı sorgulamanız konusunda yardımcı olur. Aksi taktirde bu işlemleri kendiniz yapmanız gerekmektedir. Şöyle düşünün; "Merhaba, ben şuna ihtiyaç duyuyorum" diyorsunuz ve DI ihtiyaç duyduğunuz şeyin yaratılması ve size sunulmasından sorumlu oluyor. Çekirdek AngularJS servislerine erişmek için çok basit bir şekilde parametre olarak eklemeniz yeterlidir. AngularJS ihtiyaçlarınızı farkedecek ve sizin için sağlayacaktır. function EditCtrl($scope, $location, $routeParams) { // Something clever here... } Ayrıca kendi servislerinizi yaratma ve bunları enjekte edilebilir hale getirme konusunda da özgürsünüz. angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify']; Özellik 5: Directives (Direktifler) Benim AngularJS' teki favori özelliğim direktifler. Hiç tarayıcınızın sizin için yeni çözümler yapabileceğini hayal ettiniz mi? Güzel, çünkü artık yapabilir! Bu benim AngularJS' teki favori kısımlarımdan biri. Bu muhtemelen AngularJS' in en zor kısmı. Direktifler özelleştirilmiş HTML etiketleri yaratmanızda ve bunları widget olarak sunmanız için kullanılabilir. Bunlar ayrıca, elementleri davranışları ile birlikte "dekore" etmek için ve DOM niteliklerini ilginç bir yolla manipüle etmek için kullanılabilir. Aşağıdaki, bir olayı dinleyen ve sonucunda $scope unu güncelleyen bir direktif örneği bulunmaktadır. myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '<input>' }; }); Bu özelleştirilmiş direktif' i şu şekilde kullanabilirsiniz. <my-component ng-model="message"></my-component> Uygulamalarınızı, komponentlerin soyutlandığı bir kompozisyon şeklinde yapmanız, ihtiyaç duyduğunuzda daha kolay ekleme, güncelleme ve silme yapmanıza imkan tanıyacaktır. Bonus Özellik: Testing AngularJS ekibinin üzerinde ağırlıkla durduğu düşünce; JavaScript' te yazılan kodun sıkı bir test setinden geçmeye ihtiyaç duyduğudur. AngularJS ekibi, AngularJS' i test edilebilir şekilde dizayn etti, bu sayede AngularJS uygulamalarınızı mümkün olduğunca kolay test edebilirsiniz. Bu sebeple, uygulamamanız için bir neden bulunmuyor. Javascript, compile edilmek yerine dinamik ve yorumlanmıştır, Bu durum geliştiriciler için disiplinli bir zihniyet ile test yazmaya adapte eder. AngularJS tamamen test edilebilir şekilde yazılmıştır. Uçtan uça ve unit test in çalışabileceği şekilde kurulmuştur. Eğer ki bunu aksiyon halinde görmek isterseniz, https://github.com/angular/angular-seed adresindeki angular-seed (angular-çekirdek) projesini inceleyebilirsiniz. AngularJS çekirdek projesine sahip olduğunuzda, projenin üzerinde testleri çalıştırmak çocuk oyuncağıdır. Aşağıdan sonucu inceleyebilirsiniz. API dökümanı, uçtan uça testlerin, framework' ün ilgili kısımlarında harika bir şekilde uygulanışlarıyla doludur. Bir süre sonra kendimi, işlerin nasıl yürüdüğünü gördüğüm testlere girmiş şekilde buldum, ve belki dökümanın devamını okumak, bu işi kapmayı sağlayacaktır. Sonuç olarak AngularJS' in 6 adet çok sevdiğim özelliğini inceledik. İnanıyorum ki, bu 6 özellik AngularJS' in büyütebileceğiniz yada çalıştırabileceğiniz esas özellikler değil fakat, uygulamanızı bakım yapılabilir ve genişletebilir bir yola sokacaktır. AngularJS' in web sitesi http://angularjs.org, çalışan bolca örnek ve harika dökümanlara sahip. Alıntı Technology is Real Yorum bağlantısı Şimdi Paylaş Daha fazla paylaşma seçeneği...
