Breeze/Angular şablonu

tarafından Mads Kristensen

Breeze/Angular MVC Şablonu Ward Bell tarafından yazılmıştır

Breeze/Angular MVC Şablonunu indirin

AngularJS, Google'ın Tek Sayfalı Uygulamalar (SPA) oluşturmaya yönelik bir açık kaynak kitaplığıdır. Veri bağlama, bağımlılık ekleme ve ekran yönetimi sunar. Bunu veri modelleme ve veri yönetimi için başka bir açık kaynak kitaplığı olan BreezeJS ile birleştirdiğinizde harika bir HTML/JavaScript istemci uygulaması için gerekli bileşenlere sahip olursunuz.

Breeze/Angular SPA şablonu, ASP.NET and Web Tools 2012.2 Güncelleştirmesi'nde yer alan KnockoutJS SPA şablonundaki bir çeşitlemedir. Visual Studio'nuz varsa, 60 saniyeden kısa bir süre içinde çalışan örnek bir SPA'nız olur.

Dışa doğru uygulama, KnockoutJS SPA şablonuna çok benzer. Ama arka planda durum oldukça farklı. KnockoutJS şablonu veri bağlama için Knockout ve veri erişimi için ham AJAX kullanır. Breeze/Angular şablonu veri bağlama için Angular ve veri erişimi için Breeze kullanır. Bu kitaplıklar sayfa gezintisi ve geçmiş gibi ek özellikler sağlar.

Uygulamanın Hakkında sayfasında, geçerli kullanıcı oturumu sırasında aşağıdakiler de dahil olmak üzere çalışan bir olay günlüğü görüntülenir:

• Sayfalama. Todo denetleyicisinin oluşturulduğuna dikkat edin.
• Uzak sorgular ve yerel önbellek sorguları.
• Yeni ve değiştirilmiş varlıklar kaydediliyor.
• Değişiklikler istemcide doğrulandığından, kullanıcının değişiklikleri veritabanına işlemeden önce hataları düzeltebilmesini sağlar.

Bu şablonda keşfedilecek daha fazla şey vardır, örneğin:

• HTML görünümü şablonlarının dinamik yüklenmesi.
• Angular "yönergeleri" aracılığıyla özel veri bağlama.
• Modülerlik ve bağımlılık ekleme.
• İlgili varlıkların filtrelerini, sıralamalarını, sayfalamalarını, projeksiyonlarını ve dahil edilmesini sorgulayın.
• Birden çok ekranda veri paylaşma.
• Birden çok değişikliği tek bir işlem olarak kaydetme.
• Doğrulama kuralları sunucudan JavaScript istemcisine otomatik olarak yayılır.

Haydi başlayalım.

Breeze/Angular Şablon Projesi Oluşturma

Yukarıdaki İndir düğmesine tıklayarak şablonu indirin ve yükleyin. Şablon, Visual Studio Uzantısı (VSIX) dosyası olarak paketlenmiştir. Visual Studio'yu yeniden başlatmanız gerekebilir.

Şablonlar bölmesinde Yüklü Şablonlar'ı seçin ve Visual C# düğümünü genişletin. Visual C# altında Web'i seçin. Proje şablonları listesinde ASP.NET MVC 4 Web Uygulaması'nı seçin. Projeyi adlandırın ve Tamam'a tıklayın.

Yeni Proje sihirbazında Breeze Angular SPA'yı seçin.

Uygulamayı hata ayıklamadan derlemek ve çalıştırmak için Ctrl-F5 tuşlarına basın veya hata ayıklama ile çalıştırmak için F5 tuşuna basın.

Uygulama ilk kez çalıştırıldığında bir oturum açma ekranı görüntülenir. "Kaydol" bağlantısına tıkladığınızda, kullanıcı adı ve parola girebileceğiniz yeni bir sayfa görüntülenir. (Oturum açma ve kayıt sayfaları ASP.NET MVC kullanılarak oluşturulur.) Kayıt formunu gönderdiğinizde, sunucu hesabınız için iki öğe içeren bir TodoList oluşturur. Sonra bunları sarı bir notta size sunar.

Şimdi SPA'nın topraklarındasınız. Todos'ı işlerken gördüğünüz ve deneyimlediğiniz her şey Knockout ve Breeze yardımıyla istemcide işlenir ve yönetilir. Uygulamayı kullanıcı olarak keşfedin... ama geliştirici gözüyle. Ağ trafiğini yakalamak için tarayıcınızdaki geliştirici araçlarını kullanın. (Internet Explorer'da: F12 tuşuna basın, Ağ sekmesini seçin ve Yakalamayı başlat'a tıklayın.) Şimdi aşağıdakileri deneyin:

• Yeni bir Yapılacaklar öğesi ekleyin.
• Etikete tıklayın ve Yapılacaklar öğesi başlığını düzenleyin
• Öğeyi tamamlandı olarak işaretlemek için onay kutusunu işaretleyin. Metin kutusunun devre dışı bırakıldığından başlığın artık düzenlenebilir olmadığına dikkat edin.
• Etiketin sağındaki 'x' işaretine tıklayın. Öğe kaybolur ve veritabanından silinir.
• Başka bir öğe seçin ve başlığını temizleyin. Başlığın gerekli olduğunu belirten bir doğrulama hatası alırsınız. Kısa bir duraklamadan sonra önceki başlık geri yüklenir.
• Saçma bir şekilde uzun bir başlık yazın. Başlığın çok uzun olduğuna ilişkin farklı bir doğrulama hatası alırsınız.
• "Yapılacaklar Listesi Ekle" düğmesine tıklayın. Önceki listenin solunda yeni bir liste görüntülenir.
• Gerekli ve uzunluk doğrulamalarını tetikleyerek TodoList başlığıyla oynayın.
• Hata iletisini temizlemek için başlık metin kutusuna tıklayın.
• TodoList ve todos değerlerini silmek için sağ üst köşedeki dairedeki "x" işaretine tıklayın.
• Bu etkinliklerin günlüğünü görmek için sağ üstteki "Hakkında" bağlantısına tıklayın.

Doğrulama mantığı Breeze tarafından istemci tarafında gerçekleştirilir. Sunucu modeli sınıflarında doğrulama öznitelikleri istemciye yayılır ve istemci sunucuyla bağlantı oluşturmadan önce otomatik olarak yürütülür.

Ağ trafiğini gözden geçirin. Breeze bir hata algıladığında sunucuya hiçbir çağrı olmadığına dikkat edin. Her geçerli değişiklik "/api/Todo/SaveChanges" için post isteğine neden oldu. Breeze, değişiklikleri paketleyip Web API denetleyicisinin SaveChanges yöntemine tek bir istek olarak gönderir. Bu, her öğe için ayrı ayrı PUT, POST ve DELETE istekleri yapan KnockoutJS SPA şablonundan farklıdır.

Ayrıca, TodoList ve Hakkında sayfaları arasında geçiş yaptığınızda ağ trafiği olmadığına dikkat edin. Bunun nedeni sorgunun yerel Breeze önbelleğiyle kısıtlanmış olmasıdır.

İçeriye göz atın

Bu uygulamanın bir istemci tarafı ve bir sunucu tarafı vardır. İstemci tarafı yığını, küçük bir HTML ve uygulama JavaScript modüllerinin ("uygulama" klasöründe) yanı sıra üçüncü taraf JavaScript kitaplıklarından ("Betikler" klasöründe) oluşur.

UI mimarisi, görünümlerin HTML pencere öğelerini denetleyicilerdeki destekleyici sunu kodundan ayırır. Angular veri bağlama sistemi görünümleri ve denetleyicileri koordine eder, böylece her biri diğerini yakından bilmeden işini yapabilir.

Denetleyici, veri bağlamından model varlıklarını alıp kaydetmesini ister. Veri bağlamı, JSON sorgu sonuçlarından kendi kendine izleme modeli nesneleri oluşturan Breeze'e çalışmanın büyük bölümünü temsilci olarak verir.

Sunucu tarafı yığını bazı geliştirici kodlarından ve üç temel .NET kitaplığından oluşur: Web API'si, Entity Framework ve Breeze.NET.

Temel mimari, KnockoutJS SPA şablonuyla aynıdır. Ancak, uygulama çok daha basittir: DTO'lar silindi ve Entity Framework ayrıntılarının çoğu Breeze.NET için temsilci olarak atandı.

Sonraki Adımlar

Breeze web sitesindeki istemci ve sunucu yığınlarının kapsamlı tartışması tarafından yönlendirilen kodu incelemenizi öneririz.

Breeze istemci tarafı sorgusuyla yürütmeyi deneyebilirsiniz; bazı filtreler ve sıralamalar ekleyin. Uçtan uca SPA geliştirme konusunda daha iyi bir his elde etmek için daha fazla model özelliği ve daha fazla varlık ekleyebilirsiniz. Tasarımdan emin olduğunuzda, Todo özelliklerini yok edebilir ve kendi özelliklerinizle değiştirebilirsiniz.

Kodlamanız kutlu olsun!