Birkaç hafta önce AngularJS ile karşılaştığımda ilk başta merak ettim. AngularJS web sitesinde bulunan dersler setinde çalışmış olduğum süre boyunca, bu çerçeveyi bulmuş olmaktan çok heyecanlandım.
AngularJS nedir? AngularJS, kodlama bloğunda (nispeten) yeni bir çocuktur. Kendi web sitesinden alıntı yapmak, özellikle de bir sayfa web uygulamaları oluşturmak için özellikle uygun olan dinamik web uygulamaları için yapısal bir çerçevedir.
2009 yılında Miško Hevery ve Adam Abrons tarafından geliştirildi - hem o zamanlar Google çalışanları - tamamen JavaScript ve tamamen istemci tarafı, bu yüzden her yerde JavaScript çalıştırabilirsiniz, AngularJS çalıştırabilirsiniz. Ayrıca küçük: sıkıştırılmış ve minimize 29 kb daha az. Ve MIT lisansı altında açık kaynak. Creative Commons Attribution-ShareAlike 3.0 Sınırsız Lisansı altında bulunan logoyu bile kullanabilirsiniz.
Vikipedi'ye göre Açısal'nın amacı, tarayıcı tabanlı uygulamaların model görüntüleme-denetleyici (MVC) özelliği ile güçlendirilmesidir ”ve yalnızca bir bağlayıcı / MVC çerçevesi sağlamasıdır. Bu iki yönlü bağlayıcı, aklına takılır. Lezzetli. {{My data}} kadar basit bir yapıda, verileri sayfanıza bağlarsınız. $ Kapsam hizmeti, modeldeki değişiklikleri algılar ve denetleyicilerin görünümünde HTML ifadelerini değiştirir. Diğer yönde çalışma, bakış açısına bakış, modele yansır. Bu, veri merkezli DOM manipülasyonlarının büyük bir çoğunluğunun, jQuery gibi bir kitaplık ile çalışırken kendim de dahil olmak üzere, dahil olduğumuzu ortadan kaldırır.
Açısal, kütüphane bağımlılıkları olmadan kutunun dışında çalışır, ancak mevcut birçok modülle genişletilebilir ve elbette ki, özel ihtiyaçlarınıza uyacak şekilde kendi başınıza inşa edebilirsiniz. Saf JavaScript olmak, aynı zamanda sunucu-agnostik olma yararına sahiptir.
JQuery gibi güçlü bir kütüphaneye alışmış olmak, bunu açısal şeyler yapmak için karıştırmak çok kolay. Bu potansiyel tuzağı fark ederek, geliştiriciler şunları söylüyor: “Alışkanlığı kırmaya çalışıyorsanız, jQuery'yi uygulamanızdan kaldırmayı düşünün. Gerçekten mi. Açısal, $ http hizmetini ve onu neredeyse her zaman gereksiz kılan güçlü yönergelere sahiptir. ”Bir şey kesin, eğer Angular'e yapışırsanız, jQuery döngülerine ve sunucu ile açık ve ileriye dönük açık-kodlar, kodunuzdan çıkmayacaktır. Açısal, aynı şeyleri elde etmek için bu kadar özlü ve temiz bir yöntem sağlar.
Açısal, eylemini sayfaya eklemek için yönergeleri kullanır. Tümüyle ng- olan yönergeler, html özniteliklerine yerleştirilir.
Angular ile önceden oluşturulmuş bazı ortak direktifler şunlardır:
ng-app: Bu, esas olarak sayfaya Açısal'ın başlangıç giriş noktasıdır. Harekete geçeceği yerde Açısal'ya söyler. Bir sayfayı Açısal uygulama olarak tanımlamak için tek yapmanız gereken şey.
ng-bind: bir öğenin metnini bir ifadenin değerine değiştirir.
span içindeki 'name' değerini gösterir. 'İsim' ile ilgili herhangi bir değişiklik, değişkenin kullanıldığı her yerde DOM'da anında yansıtılır.
ng-controller: Verilen eylem için JavaScript sınıfını belirtir. Denetleyiciler genellikle harici .js dosyalarında tutulur.
ng-repeat: Sayfanızdaki çok temiz döngü yapılarını oluşturur.
- {{item.description}}
Koleksiyondaki her ürüne zahmetsizce basar.
Onları henüz kullanmadım, fakat özel yönergeler oluşturmanın zor bir konu olabileceğini, kafanı sarmak için biraz zaman alan bir şey olduğunu okudum. Açısal bir sunar video netleştirmek için kavram.
Daha önce de belirtildiği gibi, ng-app yönergesi etiketi, Angular'ın sayfada çalıştırılacağı sahneyi ayarlar.
Eklemek Açısal çerçevenin kendisini getirmek için sayfa başlığına.
Harici JavaScript dosyasına veya Angular uygulamanızın JavaScript sınıflarını tutan dosyalara işaret eder. Örnek olarak çok basit bir sınıf olabilir:
function ItemListCtrl ($scope) {$scope.items = [{ "description": "coffee pot" } , {"description": "nerf gun"}, {"description": "telefon"},];} Hayali JavaScript sınıfımın adını taşıyan "ItemListCtrl" ng-denetleyicisinin geçmesi, hangi kodun çalıştırılacağını Açısal olarak bildirir:
ve çift parantezli notasyon, hangi ifadelerin değerlendirileceğini açıklar.
ng-repeat, geçerli koleksiyona bağlanan ve belirtilen eylemi gerçekleştiren veya belirtilen verileri sağlayan, son derece kısa bir tekrarlayıcı direktiftir. Çok basit ve temiz.
Stuff on my desk:
{{item.description}}Bu basit kurulum görüntülenecektir:
Stuff on my desk:coffee potnerf gunphoneKuşkusuz, bu çok etkileyici görünmüyor, ama fikrin kendisi. Çok basit sayfa biçimlendirme ve denetleyicileri, Açısal, iyi, çok basit kullanmaya başlar.
Uygulamanıza gerçek veriler almak da çok kolay. Açısal JSON tüketmek ister:
function ItemListCtrl ($scope, $http) {$http.get(‘items/list.json').success(function (data) {$scope.items = data;} } Bu, Açısal uygulamanızda istediğiniz zaman işlenen bir JSON nesnesini döndürür.
Angular'ın kurduğu temel ilkelerden biri, onunla yapılan uygulamaların tamamen test edilebilir olmasıydı. Uçtan uca test için, uygulamanızla kullanıcı etkileşimlerini simüle etmek üzere Açısal Senaryo Çalıştırıcımız var. JavaScript ile yazılmış senaryo testlerini beslersiniz.
Tarayıcıda hata ayıklamak için AngularJS Batarang github'da kullanılabilen bir Chrome uzantısıdır.
AngularJS daha fazla çekiş gücü kazandığından, daha fazla kaynak kullanılabilir hale gelecektir, ancak Angular'ı genişletme yolları ve yönlendirme sağlayan bir çok site var.
AngularJS site AngularJS sitesi kendisi, elbette sizin kesin kaynağınızdır. Sağlam, basit öğreticiler sunarlar ve oldukça aktiftirler. Google+ varlığı
Bir dizi açısal vardır GitHub'daki depolar.
Açısal Modüller, Omurga hizmetlerinden Rails entegrasyonuna kadar kullanıcı tarafından sunulan modüllerin bir koleksiyonunu sunar.
Henüz AngularJS kullandın mı? JQuery gibi daha büyük kütüphanelerle nasıl karşılaştırılır? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, açı görüntüsü Shutterstock üzerinden.