Perşembe , 23 Şubat 2017
Anasayfa » JavaScript » AngularJS » AngularJS Template (Asp.net WebService)

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz.

Öncelikle bilmeniz gereken bu kavram bir önceki yazının devamı olduğu için bir önceki yazının sonunda paylaştığım dosyayı indirip onun üzerinden devam etmeniz gerekir.

Bir önceki yazıda index sayfası için anasayfa.html adında bir template dosyası oluşturmuştuk. Bu anasayfa.html sayfası içinde anaSayfaController adında bir kontrol tanımlamıştık.

 

 

2.Adım:  hakkimizda.html  dosyası açıp  aşağıdaki html kodlarını yapıştırın.

 

3.Adım: jskod.js  dosyasını açıp 23.satırdan sonraki hakkimizdaController bağlantısını aşağıdaki şekilde değiştirin.  Daha önceki yazılarda asp.net servis ile angularjs bağlantısı hakkında yazı yazmıştım. Bu kavram üzerinden anlatıma devam ediyorum.

 

4.Adım:  Projeye personel.cs  adında bir sınıf ekleyip, aşağıdaki kodları yapıştırın.

 

5.Adım: Bu aşamada SQL Server ile tblPersoneller tablosunu aşağıdaki gibi oluşturup, içerisine bir kaç tane örnek kayıt giriniz.

 

6.Adım: PersonelServis.asmx servisini oluşturup aşağıdaki şekilde düzenliyoruz.  PersonelServis.asmx dosyasının tamamını yazdım, kendinize göre düzenlemeniz gerekebilir.

Yapılan işlemini özetleyecek olursak. index.html içindeki <ng-view></ng-view> içinde şablonlarımız bağlantılara tıkladıkça yüklenecektir. hakkımızda şablonu yüklendiğinde hakkimizdaController çalıştırılacak ve post işlemini gerçekleştirip sql server üzerinden okuma yaparak personeller modelini oluşturacaktır.

Bir sonraki yazıda aynı işlemlerin PHP ile nasıl yapılacağını anlatacağım.

Örnek uygulamayı indirip sql dosyasını ve  sql bağlantısını doğru şekilde yapıp örneği çalıştırın. veritabani.sql dosyası ile veritabanını oluşturabilrisiniz.

Uygulamanın ASP.NET ile yapılmış örneğini indirmek için tıklayın

Hakkında Hayri

İlginizi Çekebilir

AngularJS $anchorscroll Servis Kullanımı

$anchorscroll servisi sayfada belirtilen bir noktaya hareket etmek için kullanılır.  Bu yazıda $anchorscroll, $location servisleri ve $anchorscroll() …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir