Tozlanmış blog sayfalarıma şöyle bir üfleyerek uzun zamandan sonra yeni satırlar eklemek nasip oldu.
Microsoft tarafından geliştirilen Asp.NET Web API uygulama çatısı(framework) ile Google tarafından desteklenen AngularJs uygulama çatısını buluşturacağız bu yazımızda.Kavramları biraz daha soyutlamak gerekirse eğer, Asp.NET Web API projesi ile ayağa kalkan bir uygulamanın View katmanını AngularJs ile geliştireceğiz.
Yani ASP.NET Web API ile single page application(SPA) geliştireceğiz. O halde kısaca kullanacağımız teknolojilere değinelim.
AngularJs ile geliştireceğimiz SPA sayesinde sayfa yenilemeye yada ulaşılmak istenilen view bilgisi için ASP.NET MVC uygulama çatısındaki gibi sayfanın ilgili controllar sınıfı içerisindeki view ilgisini döndürecek olan action metoduna istek yapmamıza gerek kalmadan sayfalar arasında geçişler yapabileceğiz. AngularJs demişken two way binding özelliğinden bahsetmemek olmaz.
Model katmanının doğrudan View katmanı ile etkileşimde olması şüphesiz işleri kolaylaştırdığı gibi beğeni toplayan bir özelliğidir.
AngularJS uygulama çatısından bahsetmişken Asp.NET Web API' den de kısaca bahsedelim. Asp.NET Web API Rest tabanlı web servisleri geliştirebildiğimiz bir uygulama çatısıdır. Rest mimarisinin SOAP(Simple Object Access Protocol) mimarisinden farklı yönlerden üstünlüğü kısa zamanda yaygınlaşmasını sağlamış ve artık SOAP yerini yavaş yavaş Rest' e bırakır duruma gelmiştir. Bu durum karşısında Microsoft WCF ile atakta bulunarak Rest tabanlı servisler geliştirmeyi mümkün hale getirdi. Fakat WCF ile Rest tabanlı servisler geliştirmek o kadar kolay değildi ve karmaşık konfigürasyonlar yapmayı mecbur kılıyordu. WCF' in yaşattığı bu zorluklar karşısında yeni bir uygulama çatısına ihtiyaç vardı ve bu noktada Asp.NET Web API geliştirildi. Asp.NET Web API ile oldukça hızlı bir şekilde MVC deseninde servisler geliştirilip ve Asp.NET MVC uygulama çatısına olan benzerliği ile .NET geliştiricileri tarafından kolay öğrenilebilmekte. Her ne kadar benzeselerde ikisi farklı uygulama çatılarıdır.
Teknolojiler hakkında kısa bilgilendirmeden sonra yapacağımız basit uygulamaya geçiş yapalım.
Öncelikle bir Asp.NET Web Application projesi oluşturalım ve Web API template seçelim.
Views->Shared klasörünün altındaki _Layout.cshtml üzerinde biraz değişiklik yapacağız.
Projede kullanacağımız tüm js vs css dosyalarımızı bu sayfada belirteceğiz.
Kullanmak istediğim kütüphaneleri Bower ile indirdim ve Gulp kullanarak tek bir libraries.js dosyası oluşturdum (jquery.js, angular.js, angular-ui-router.js).
Custom yazdığım scriptleride all.js olarak oluşturdum.
Ve yine css dosyaları için ise style.min.css tek bir css dosyası oluşturarak _layout.cshtml içinde belirttim.
Bu tür araçlar işleri acayip kolaylaştırıyor :)
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link href="~/dist/css/style.min.css" rel="stylesheet" />
</head>
<body ng-controller="mainController">
<div>
@RenderBody()
</div>
<a ui-sref="main" ui-sref-active="active">Main</a>
<a ui-sref="Page1" ui-sref-active="active">Page 1</a>
<a ui-sref="Page2" ui-sref-active="active">Page 2</a>
<ui-view></ui-view>
<script src="~/dist/libraries.js"></script>
<script src="~/dist/all.js"></script>
</body>
</html>
Örnekte görüldüğü gibi sayfa başında <html> tagı içerisine ng-app direktifini belirttik. Sayfa yüklendikten sonra AngularJs kütüphanesi bu direktifi aramak için sayfayı tarar. ng-app direktifi uygulamanın başladığı satırdır ve her uygulamada en az bir tane ng-app barındırmalıdır.
mainController içerisinde uygulama ayarlarını ve diğer sayfa yönlendirmelerini içeren bir controller olacaktır. Ben basit uygulama için tek bir js dosyası içine yazdım ama kullanım kolaylığı açısından projelerde ayrı js dosyalarına yazmakta fayda var.
ui-sref ile anasayfamızdan ulaşacağımız diğer sayfa linklerini belirttik. Aşağıda bu konu hakkında ayrıntıya ulaşacağız.
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('main');
$stateProvider
.state('main', {
templateUrl: '/Content/dashboard.html'
})
.state('Page1', {
templateUrl: '/Content/Page1.html'
})
.state('Page2', {
templateUrl: '/Content/Page2.html'
})
});
app.controller('mainController', function ($scope, $state) {
//To do
});
app.controller('page1Controller', function ($scope, $state) {
//To do
});
app.controller('page2Controller', function ($scope, $state) {
//To do
});
Script klasörünün altında main.js diye bir dosya açarak mainController nesnemizi yukarıdaki gibi oluşturuyoruz. Fazla detaya boğulmadan bahsedelim çünkü internette bahsedeceğimiz konularda oldukça fazla döküman mevcut. app adında yeni bir modul oluşturduk ve ui-router bağımlılığını ekliyoruz. Angular Route komponentinin yetersizliğinden dolayı bu tip 3. parti kütüphaneleri tercih ediliyoruz. app.config ile modül ile ilgili konfigürasyonları yapıyoruz. Burada _Layout.cshtml dosyasında ui-sref satırları ile ilişkili state ayarlarını yapıyoruz. state' lerde belirtilen örneğin Page1 yada Page2 çağırıldığında templateUrl' de belirtilen şablon alınıp _Layout.cshtml içinde belirttiğimiz <ui-view>' e eklenecektir. Böylece proje ayağa kalktığında AngularJS' e anahtarlanmış olacaktır.
İyi çalışmalar dileklerimle...
