Angular ve ASP.NET MVC / Web api'yi karıştırmak?


87

ASP.NET MVC / Web API kullanarak geliyorum ve şimdi Angular kullanmaya başlıyorum, ancak bunları karıştırmanın doğru yolu konusunda net değilim.

Angular'ı kullandıktan sonra, MVC sunucu tarafı kavramları hala herhangi bir değer sağlıyor mu? Yoksa Web API'yi yalnızca açısal HTTP çağrıları için veri almak amacıyla mı kullanmalıyım?

Angular'a geçiş yapan bir ASP.NET MVC için sahip olduğunuz tüm ipuçları yardımcı olacaktır


4
Değişirdi, ancak "Web API'yi sadece açısal HTTP çağrıları için veri almak için kesinlikle kullanmalı mıyım" diye düşünürdüm bunu yapmanın doğru yolu.
MikeSmithDev

ASP.NET Core Web API arka ucu ile Angular uygulama oluşturmaya yönelik bir öğretici burada -> medium.com/@levifuller/…
Levi Fuller

Yanıtlar:


113

Saf Web API

Eskiden ASP.NET MVC ile oldukça serttim ama Angular ile tanıştığım için herhangi bir neden kullanmam için bir neden göremiyorum sunucu tarafı içerik oluşturma çerçevesini . Pure Angular / REST (WebApi), daha zengin ve pürüzsüz bir sonuç verir. Çok daha hızlıdır ve herhangi bir tuhaf hack olmadan masaüstü uygulamalarına oldukça yaklaşan web siteleri oluşturmanıza olanak tanır.

Angular'ın biraz öğrenme eğrisi var, ancak ekibiniz bu konuda ustalaştıktan sonra, daha kısa sürede çok daha iyi web siteleri oluşturacaksınız. Esasen bu, artık tüm bu durum (daha az) sorunlarına sahip olmadığınız gerçeğiyle ilgilidir.

Örneğin , herhangi bir geleneksel sunucu tarafı çerçevesine sahip bir sihirbaz formu hayal edin . Her sayfanın ayrı ayrı doğrulanması ve gönderilmesi gerekir. Belki sayfanın içeriği önceki bir sayfadaki değerlere bağlıdır. Belki kullanıcı geri düğmesine bastı ve önceki bir formu yeniden gönderiyor. Müşterinin durumunu nerede saklıyoruz? Angular ve REST kullanılırken tüm bu komplikasyonlar mevcut değildir.

Öyleyse ... karanlık tarafa gelin ... kurabiyelerimiz var.

Benzer soru


Angular aracılığıyla uygulama geliştirmenin hızı ve akıcılığı konusunda hemfikirim. MVC veya WebForms'da (ugh) bu zamanı işaretlemeyi dağıtmak için harcarsınız ve ardından istemci kodunu üzerine cıvatalamak için birkaç geçiş yapmanız gerekir ki bu tuhaftır, yoğun emek gerektirir ve bağlantısız doğası nedeniyle boşa basit şeyler yapmak için çok zaman.
moribvndvs

3
@Narayana; Bu biraz SEO sevgisi sağlar.
boş

5
Çünkü belirli bir modeldeki bir özelliği yeniden adlandırdığımda, "sihirli dizeler" için AngularJS'de araştırma yapmam gerekmez mi? Angular iyidir, ancak .net'in sıkı bir tür güvenli dünyasında, daha sıkı entegrasyon, sunucu tarafından tür güvenliğinden yararlanmanıza olanak tanır.
Sleeper Smith

6
@Sleeper Smith: Ekibimdeki insanlarla birçok kez bu tartışmayı yaşadım, ancak son kod kurallarında , birim testi ve endişelerin ayrılması dünyadaki tüm güvenlik tiplerinden çok daha fazlasını sunuyor . Ben de JS'nin C # gibi bir şeyle değiştirilmesini görmek isterim , ama gerçekte durum böyle değil. Önemli olan tek şey elde edebileceğiniz sonuçtur. Müşterileriniz muhtemelen kodlama tercihlerinizi önemsemiyor, havalı görünen, düzgün performans gösteren bir web sitesi istiyorlar ve hızlı olmasını istiyorlar. Angular bu işi hallediyor.
null

1
Örneğin, KnockoutJS kullanırken normal bir ASP.NET MVC uygulaması oluşturuyordum ve her görünüm MVC Denetleyicisinden model verilerini alıyordu. Daha sonra sunucudan gelen bu veriler JSON'a serileştirilir ve oradan KnockoutJS onu gözlemlenebilir verilere dönüştürür, böylece iki yönlü veri bağlama elde ederim. Ve bu harikaydı! Peki AngularJS kendi yönlendirme sistemine sahip olduğuna göre şimdi ne yapacağız? MVC yönlendirmesiyle ne olur? Onu hiç kullanıyor muyuz? "_Layout" görünümü ve @RenderBody () ile şimdi ne olacak?
AlexRebula

43

AngularJS, daha çok tek sayfalı uygulama paradigmasıyla ilişkilidir ve bu nedenle, işaretlemeyi oluşturan sunucu tarafı teknolojilerinden pek yararlanmaz. Bunları birlikte kullanmanıza engel olan teknik bir neden yok, ama pratik anlamda neden yapasınız?

Bir SPA, ihtiyaç duyduğu varlıkları (JS, CSS ve HTML görünümleri) alır ve kendi başına çalışır, veri göndermek veya almak için hizmetlere geri bildirir. Bu nedenle, bu hizmetleri sağlamak için bir sunucu tarafı teknolojisi hala gereklidir (kimlik doğrulama ve beğeniler gibi diğer araçların yanı sıra), ancak işleme parçaları büyük ölçüde ilgisizdir ve özellikle yararlı değildir, çünkü bu çabaların bir kopyasıdır, ancak MVC bunu yapar sunucu tarafında ve Angular bunu istemcide yapıyor. Angular kullanıyorsanız, en iyi sonuçlar için istemcide olmasını istersiniz. Angular post HTML formları oluşturabilir ve MVC eylemlerinden kısmi görünümler alabilirsiniz, ancak Angular'ın en iyi ve en kolay özelliklerini kaçırır ve hayatınızı zorlaştırırsınız.

MVC oldukça esnektir ve bir SPA uygulamasından çağrılara hizmet vermek için kullanabilirsiniz. Bununla birlikte, WebAPI daha ince ayarlıdır ve bu tür hizmetler için kullanımı biraz daha kolaydır.

Önceden var olan WebForms ve MVC uygulamalarından taşınan bir çift de dahil olmak üzere bir dizi AngularJS uygulaması yazdım ve ASP.NET yönü, AngularJS uygulamasını gerçek istemci olarak sunmak ve uygulama katmanını barındırmak için bir platforma dönüşüyor istemci REST aracılığıyla (WebAPI kullanarak) iletişim kurar. MVC iyi bir çerçevedir, ancak genellikle bu tür uygulamalarda kendini işsiz bulur.

ASP.NET uygulaması, sorumluluklarının aşağıdakilerle sınırlı olduğu başka bir altyapı katmanı haline gelir:

  • Bağımlılık kapsayıcısını barındırın.
  • İş mantığı uygulamalarını kapsayıcıya bağlayın.
  • JS ve CSS için varlık paketleri oluşturun.
  • WebAPI hizmetlerini barındırın.
  • Güvenliği uygulayın, günlük kaydı ve teşhis gerçekleştirin.
  • Performans için uygulama önbellekleriyle arayüz oluşturma.

Bir SPA ile ilgili bir diğer harika şey, ekibinizin bant genişliğini artırabilmesidir. Bir grup, diğer grup istemci uygulamasında yer alırken hizmetleri patlatabilir. REST hizmetlerini kolayca saplayabileceğiniz veya alay edebileceğiniz için, sahte hizmetlerde tam olarak çalışan bir istemci uygulamasına sahip olabilir ve işiniz bittiğinde gerçek olanlarla değiştirebilirsiniz.

Angular'a önden yatırım yapmanız gerekir, ancak karşılığını büyüktür. MVC'ye zaten aşina olduğunuz için, bazı temel kavramlar hakkında bilgi edinebilirsiniz.


Tamam, bu yüzden API, Entity Framework, güvenlik vb. İle üretkenliğimi korumak için Angular ile devam etmek ve bir .NET arka ucuna sahip olmak istiyorum. Sayfalarımın hala bir sunucu tarafı ana-alt yapılandırması / düzenine ihtiyacı var mı? Bunun için ne kullanmalıyım - WebForms (hayır - o zaman görünüm durumunu alırım), MVC, ASP.NET Web Sayfaları veya başka bir şey?
Sean

1
Teknik olarak herhangi bir sunucu sayfasına, düzen sayfasına vb. İhtiyacınız yoktur. Sadece düz HTML yeterli olacaktır. Ancak, uygulamanızın boyutuna ve karmaşıklığına bağlı olarak, Angular uygulamanızı işlevselliğe göre birkaç farklı uygulamaya bölmek isteyebilirsiniz (ve bir uygulamadan diğerine ortak bir nav veya başka bir şey kullanarak bağlanabilirsiniz). Bu durumda, işleri KURU ve tutarlı tutmak için bir düzen sayfası kullanabilirsiniz. Ayrıca, muhtemelen CSS veya komut dosyaları için varlık paketlerini kullanıyorsunuz ve Razor olan kök sayfalara veya bunları bir araya getirecek her şeye sahip oluyorsunuz.
moribvndvs

1
ASP.NET MVC'yi üç yıldır en az 8 büyük projede kullanıyorum ve bu iyi, olgun sunucu tarafı çerçevesine alıştım. Bununla birlikte, SPA'ların önemini biliyorum ve Angular'a bayılıyorum, bu yüzden şimdi mini SPA'lar veya hibrit uygulamalar ... veya Miguel Castro'nun dediği gibi "SPA siloları" almaya karar verdim. Sorum şu - Yetkilendirme ve kimlik doğrulama ne olacak? ASP.NET MVC'nin bu görevi önemli ölçüde kolaylaştırdığını biliyorum. Bu ASP.NET MVC olmadan nasıl yapılır?
AlexRebula

1
@AlexRebula Bence soru daha çok WebApi'de MVC'ye karşı kimlik doğrulamasını nasıl yapmak istediğinize dair bir soru. Normalde çerezlerle (WebApi ile FormsAuth veya ASP.NET Kimlik çerezlerini bile kullanabilirsiniz) veya üstbilgilerle (OAuth, vb.) Her iki yaklaşım da hem Web API hem de Angular tarafından tam olarak desteklenir, ancak uygulama konusunda bir seçim yapmanızı gerektirir. Ne yaptığınız ve özel hedefleriniz hakkında daha fazla ayrıntı olmadan size daha kesin bir cevap vermek zordur.
moribvndvs

@HackedByChinese Anlıyorum. Ve şimdi Web API'sini daha fazla araştırmak için daha fazla zamanım olsaydı gerçekten harika olacağını düşünüyorum ...
AlexRebula

6

Üzerinde çalıştığınız projeye bağlıdır.

AngularJS sizin için yeni bir şeyse, başlamak için küçük bir düşük risk / baskı projesi seçmeyi ve işleri doğru şekilde nasıl yapacağınızı öğrenmenizi tercih ederim (Angularjs kullanan birçok projenin baskı, son tarihler nedeniyle yanlış olduğunu gördüm ... doğru bir şekilde öğrenmek için zamanın olmaması, örneğin JQuery kullanmak veya denetleyiciler içindeki DOM'a erişmek, vb.).

Proje bir yeşil alan ise ve AngularJS konusunda biraz deneyime sahipseniz, ASP.net MVC'yi terk etmek ve sunucu tarafında saf REST / WebAPI'ye gitmek mantıklıdır.

Mevcut bir projeyse, karmaşık bir işlevsellik alt kümesini seçebilir ve bu sayfayı ayrı bir angularJS uygulaması olarak oluşturabilirsiniz (örneğin, uygulamanız çok sayıda standart basit / orta karmaşıklıkta Razor tabanlı sayfalardan oluşur, ancak ihtiyacınız olan ve gelişmiş bir düzenleyici / sayfa, AngularJS ile oluşturulacak hedef parça olabilir).


1
Cevabınızı beğendim ve söylediklerinizin çoğuna katılıyorum. Ancak beni rahatsız eden bir şey var. ASP.NET MVC, kimlik doğrulama ve yetkilendirme gibi harika yerleşik özelliklere sahip çok hoş ve olgun bir sunucu tarafı web çerçevesidir. Saf REST / WebAPI'ye gitmek için ASP.NET MVC'den vazgeçilebileceğini yazdınız. Şimdi merak ediyorum: Kimlik doğrulama ve yetkilendirmenin gerçekleştirilmesi ASP.NET MVC'deki kadar kolay mı? Google vb. İçin OAuth'u uygulamanın ne kadar kolay olduğundan bahsetmiyorum bile .. Yani sorum şu, tüm bu işleri REST / WebAPI ile başarmanın ne kadar kolay olduğu. Bu yüzden mini bir SPA yaptırmayı düşünürdüm.
AlexRebula

Bizim durumumuzda, her http isteğinde bir belirteç kurarız (eklemek için http varsayılan tek yer) belirteci ve izinleri kontrol etmek için ASP .net MVC / web api AuthorizeAttribute kullanın, web api yönteminin içinde de bu belirteci alabilir ve gerçekleştirebilirsiniz daha ince ayarlanmış güvenlik denetimi. OAuth'a ihtiyacınız varsa, bu konuda size yardımcı olacak açısal tarafta kitaplıklar da vardır.
Braulio

0

Ön uç geliştirme, yani görünümler oluşturmak için Angular çerçeveyi kullanabilirsiniz. Size sağlam bir mimari sağlar ve öğrendikten sonra Asp.net MVC'nin jilet görüntüleme motoruna göre avantajlarını göreceksiniz. Verileri almak için WebAPI'leri kullanmanız gerekir ve artık ASP.Net MVC projesi hem WebAPI hem de MVC denetleyicilerini kutudan çıkarır. Angular ve ASP.Net MVC uygulama geliştirme ile aşağıdaki bağlantı başlangıcına başvurabilirsiniz.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

Açısal uygulamalar için UI bileşenleri geliştirmek için şu anda mevcut iki çerçeve vardır. Çalıştığım açısal projelerden birinde bu iki çerçeveyi de kullandım.

Malzeme https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

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.