AngularJS Direktifi - Servis ve Denetleyici


15

Şirketlerimin iç web sitesinde, bir grup alanı kontrol edecek ve belirli yönergelere uymaları durumunda bunları vurgulayacak bir değişiklik isteği uygulamaya başlamak üzereyim. Örneğin, doğum tarihi bugün ise, bu alan ana hatlarıyla belirtilir ve araç ipucu "Onlara mutlu yıllar dilerim!"

Teknik özellikler, sayfanın geri kalanı oluşturulduktan sonra yüklenmesini ister, bu nedenle yükleme süresini uzatmaz. AngularJS'de yeni olduğum için, bunun yapılması gereken 'uygun' yollardan emin değilim.

Sorunlar:

Bu sınırlar ve görüntüler ve başlık öznitelikleri (DOM manipülasyonu) eklemeyi içerdiğinden, bir direktif kullanmalıyım gibi görünüyor.

Ancak, çoğu direktif gibi göründüğü gibi tekrar kullanılamaz veya 'kısa' olmayacaktır.

Kontrol etmem gereken verilerin yarısı sayfa yükündeki orijinal çağrıda iade edilecek, bu yüzden bunu kaydetmek istiyorum ve tekrar almak için başka bir çağrıyı boşa harcamak istemiyorum, bu da bir hizmetin tüm bu verileri depolamak için iyi olacağını düşünüyor.

Tüm denetleyicide bunu nasıl yapacağımı biliyorum, ama bu kötü kötü kod: P

Bunun en iyi şekilde yapılabilmesi için herhangi bir fikrin var mı? Temel olarak, tüm verileri kontrol etmek için bir http çağrısına ihtiyacım olacak. Sonra bu liste üzerinden çalışacağım ve değer doğru ise, bir kenarlık, resim ve araç ipucu metni ekleyin.

Bu sorunun yeterince açık olup olmadığından emin değilim, bu yüzden bazı ayrıntılar eklememi istiyorsanız, lütfen sorun. Teşekkür ederim!


1
Neden 3'ten sadece birini kullanmalısınız? Bana en azından direktiflerin bir kombinasyonu gibi görünüyor ve servis / denetleyici burada en iyi olurdu.
Pete

Bir kombinasyon da iyi, bunun nasıl çalışması gerektiği konusunda kafam karıştı.
Bobo

Üzgünüm bu yorumlarda, doğru cevap için zaman yok. Veri yapma çağrınız muhtemelen bir hizmete girer. Bu hizmet kumandanıza enjekte edilmelidir. Bu verilerin görünümüne herhangi bir mantık sağlamanız gerekiyorsa, denetleyiciye gider. Son olarak, görüşünüz denetleyicide maruz kalabileceğiniz herhangi bir mantığı kullanabileceğiniz direktiflerinizi kullanmalıdır.
Pete

Yanıtlar:


27

Haklısın, oyunda birçok seçenek var.

Bir kontrolör, açısal olarak yeni bir şeyler yazmaya başlamak için iyi bir yerdir. Bir denetleyiciyi bir işaretleme parçasına bağlamak, açısalın zaten var olan yönerge kütüphanesini, açısalın mevcut hizmetleriyle kullanmanızı sağlar.

Bununla çok kısa bir süre yaşadıktan sonra kontrol cihazınızın çok büyüdüğünü fark edeceksiniz. Şimdi refactor zamanı. İşte izlemeye eğilimli olduğum genel yönergeler.

  • Denetleyiciler: denetleyiciler $ kapsamına bağlı değerleri / işlevleri ekler ve yönetir. Sonuçta $ kapsam yoğun bir şekilde sunum odaklı olma eğilimindedir . IE bir görünüm modelidir.
  • Hizmetler: hizmetler altyapı, arka uç veya diğer tarayıcı özelliklerine bağlanma eğilimindedir
  • Direktifler: direktifler, mevcut işleyiciler tarafından işlenmeyen DOM olayları / işlevleri ile entegre olmanızı sağlar.

Yani kodu üç yönden birine itmek isteyeceksiniz:

  1. Denetleyicimdeki kod gerçekten mantıksal olarak başka bir sunum verisi / mantığıdır ve başka bir denetleyiciye bölünmelidir . $ Kapsamındaki öğelerle çalışırken, her denetleyicinin sorumlu olduğu parçaları $ kapsamındaki kendi nesnelerine ayırmanın en iyi yol olduğunu unutmayın. Örneğin, bir denetleyici için $ scope.creditCard. [Blah] - $ scope.billingAddress. [Blah] ile başka bir denetleyici için. Bu, açısalin $ kapsamındaki prototip mirasını kullanmasıyla ilgili sorunların önlenmesine yardımcı olur.

  2. Denetleyicimdeki kod, uygulama aracılığıyla paylaşılması gerekebilecek ve bir hizmete bölünmesi gereken bir uygulama altyapısı veya yardımcı program kodudur.

  3. Denetleyicimdeki kod büyük ölçüde sunum / DOM organizasyonu ile ilgilidir ve bu nedenle kendi yönergesine bölünmelidir

Kredi kartını ödeme formunun geri kalanından ayrı olarak girme / onaylama işlemine 1. örnek verilebilir. Kullanıcıların adres girmesine izin vermek için mantıktan ayrı bir denetleyicide bir grup kredi kartı mantığınız olur, bu nedenle mantıksal olarak ayrı denetleyiciler olurlar.

2 örneği, kredi kartı arka uç hizmetiyle iletişim kuran kısmı ödemeyi kabul etmek / reddetmek için taşımak olabilir. Veya başka bir örnek, kullanıcı oluşturma API'sını işlemek için arka uçla konuşan bir modül olabilir.

3 örneği, bir kredi kartı için 4 sayı girildikten sonra imleci 4 düzenleme kutusu arasında hareket ettiren bir tür otomatik sekme işlevi oluşturmak olabilir.

Uygulamanızı buna göre bölün.


Bu gerçekten açısal hakkında daha fazla anlamama yardımcı oldu. Çok teşekkür ederim :)
Bobo
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.