Neden Açısal kullanmalıyım? [kapalı]


20

Temel Açısal öğreticiden, yaptığı tek şey bir API'den bazı JSON almak ve görüntülemek gibi görünüyor. Ayrıca, çift bağlayıcı sihri var.

Ama neden arka uçtaki görünümü oluşturan ve kullanıcıya her şeyi zaten uygulayan bir arka uç çözümü (Rails gibi) yerine neden kullanayım? Kullanım durumları nelerdir?

Yanıtlar:


26

TLDR;

Açısal, zengin kullanıcı arayüzlerinin doğasında var olan karmaşıklıkla başa çıkmanıza yardımcı olur. Kullanıcı arayüzü karmaşıklığı arttıkça, sunucuda sayfa oluşturma geleneksel modeli çok daha karmaşık hale gelir. Açısal, kullanıcı arayüzünüzü yönetilebilir parçalara ayırmanıza ve kullanıcı arayüzünü uygulamadan ayırmanıza olanak tanır. Bu, sunucu tarafı sayfa oluşturmayı çok daha kolay hale getirir, ancak saf javascript tabanlı uygulamalara geçtiğinizde Angular gerçekten kendi başına gelir. Böyle bir uygulamanın iyi bir örneği Trello'dur .

Uzun hikaye

Açısal, sunucudaki her şeyi oluşturarak ve göndererek rahatça uygulayabileceğiniz siteleri gerçekten hedeflemez. Ayrıca, bu, internetteki birçok site ve uygulama için çalışan mükemmel bir yaklaşım olsa da, sitenizdeki etkileşim düzeyini artırmaya çalışırken bu yaklaşımı çalışmaya devam ettirmek gittikçe karmaşıklaşmaktadır (bu nedenle zorlaşmaktadır).

Nihayetinde bunu çözmenin yolu, kullanıcı arayüzünüzü denklemin Javascript tarafına daha fazla itmektir. Açısal, kullanıcı arayüzünüzü bileşenlere ayırmanıza olanak tanır, görünüm ve his ile nasıl çalışır arasında net bir ayrım sağlar. Daha sonra sunucuda oldukça basit sayfalar oluşturabilirsiniz ve JS ön ucu, ihtiyaç duydukları veriler için sunucunuza ayrı çağrılar yapan zengin bir kullanıcı arayüzü oluşturmak için kullanılır.

Bununla birlikte, tek yapmanız gereken, sunucuya tamamen javascript tabanlı bir uygulama yükleyen bir saplama sayfası olduğu bir nokta geliyor. Muhtemelen Angular'ın gerçekten parladığı kullanım örneği türünün en iyi bilinen örneği Trello'dur (Açısal değil Omurga kullanır, ancak aynı kullanım örneğidir). Angular kullanan daha fazla örnek siteye sahip olan bir site http://builtwith.angularjs.org/ var.

Peki kısa cevap? Açısal, kullanıcı arayüzünüzü bileşenlere ayırmanıza ve sonuçta tamamen javascript'e gitmenize izin vererek zengin, son derece etkileşimli kullanıcı arayüzleri oluşturmayı kolaylaştırır.


3
AngularJ düğümleri, görünüm ve his ve mantığın net bir şekilde ayrılmasını sağlamaz.
rsman

13
@rsman, açıkça öyle. Veri bağlamanın bütün amacı, bir sürü DOM manipülasyon kodu yazmamanız, açısal sizin için yapar, ergo, neye benzediğini tanımlarsınız, etkileşimlerinizin nasıl çalıştığını tanımlarsınız, ancak bu ikisini etkileşimleri işleyen koddan neye benzediğini güncelleyen kodla birleştirmek zorunda.
guysherman

3
Trello, örnekte kullanılan Angular blog.fogcreek.com/the-trello-tech-stack
JAMESSTONEco

1
@jamesstoneco gerçekten de öyle değil, ben sadece tamamen istemci tarafı JS uygulaması bir örnek olarak Trello kullandım. Bunu en iyi yapan ilklerden biriydi.
guysherman

7

Daha duyarlı kullanıcı arayüzleri yapmakla ilgilidir. Çift ciltleme, bağımlılık enjeksiyonu vb. Sayesinde dinamik sayfalar kolayca oluşturulabilir. Angular'da direktifleri yazarak size bir görünüm oluşturmanın açıklayıcı bir yolunu yazabilirsiniz.

Örnek olarak, mevcut bir projede, duyarlı bir kullanıcı deneyimi sağlamak için birkaç yüz satır JavaScript kodu kullanan bir görünüme sahibiz. Buna rağmen sayfa biraz hatalı ve bakımı çok zor. Daha iyi bir seçenek aramaya başladık ve backbone.js ve knockout.js'ye baktık. Sonunda Angular'ı denedik. Sadece birkaç satır kodla çok daha duyarlı ve sürdürülebilir bir sayfa oluşturabildik. Gitti tüm DOM manipülasyon kodu. Gitti, doğru yerlere getirilmesi ve yerleştirilmesi gereken tüm tıknaz arka uç görünüm kreasyonları. Modeli ve görünümü senkronize tutmak için yazılan tüm kodlar gitti. Bu deneyimle Angular'a geçme kararı daha kolay hale geldi ve şimdiye kadar pişman olmadık.


"Gitti tüm DOM manipülasyon kodu." Bu bence en önemli şey.
Bent

5

Açısal Tek Sayfa Uygulamaları geliştirmek içindir, uygulamanız için sağlam bir iskelet sağlamaya yardımcı olur. Formlarla da iyidir, çok sayıda veri içeren karmaşık kalabalık UI'lerle o kadar iyi değildir. İki yönlü veri bağlama ilk başta "sihirli" olmakla birlikte, en basit çerçevelerin (Açısal 2 dahil olmak üzere) daha basit bir Veri akışı / olay akışı yukarı yaklaşımı için iki yönlü veri bağlamadan uzaklaştığının farkında olmanız gerekir. hikaye burada çok uzun olurdu).

Ayrıca, Angular'ın belirli bir şey yapmanın kesin bir yolu olmadığını ve bazen bir kedinin derisini almak için çok fazla yol sunduğunu ve öğrenme eğrisini daha dik hale getirebileceğini de uyarmalıyım. Ayrıca bir Açısal uygulamayı ölçeklendirmek istiyorsanız, iç mekaniğini ve performans üzerindeki olası etkisini anlamanız gerekir. Bunu yaptıktan sonra ve tutarlı katı tasarım desenleri oluşturduğunuzda, gökyüzü sınırdır. Ama buna zaman ayırmanız gerekiyor.

Bununla birlikte, sorunuz Angular'ın kendisinden ziyade SPA'ların kullanım durumları hakkında daha fazla görünüyor.

Tek Sayfa Uygulamalarının kullanım örnekleri, sağlam UI / UX ve genel olarak daha iyi uygulama hissine sahip web uygulamalarına sahip olmak içindir. Sayfanızı yeniden yüklemenize gerek kalmadan oluşturma süresinden ve bant genişliğinden tasarruf edersiniz. Ayrıca harika veri ve sunum ayırın. Başvurunuz:

  • İndex.html dosyanız dahil statik dosyalar
  • Veri sunan bir REST API'sı
  • Veri odaklı bir ön uç uygulaması
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.