Merhaba angularJs kullanarak SharePoint web servislerine erişim ve bu erişim sayesinde Custom WebPart oluşturma serisinde birincisini Home Pagede Günün yemeğini göstererek yapacağız.
Intranet ortamlarında hem görsel olarak hemde işlevsel olarak SharePoint çözümleri kullanan firmalar yada arkadaşlar artık tekdüzelikten sıkılmış olsalar gerekli. Yeni web dünyasında kurumsal mimarideki yazılımların geçerliliği gün geçtikçe artmaktadır.
Sözü fazla uzatmadan ilk step olarak SharePoint Site Admin yönetim panelinden Site Contents’e Gidiyoruz 
ve bir Adet App ekliyoruz. App tipimiz Custom List. 
Listemizdeki alanlar aşağıdaki gibi olabilir. Yada tercih edeceğiniz herhangi col’lardan oluşabilir.
Development sunucumuz üzerinde bulunan Visual Studio muza bir adet Sandbox solution projesi ekliyoruz.
Add new item vasıtası ile bir adet Visual Web Part Ekliyoruz.
WebPartımızın Html Kısmı için Editor kısmına geliyoruz ve aşağıdaki kod kümesini paste ediyoruz.
[csharp]
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.2.21/angular-sanitize.min.js"></script>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<!– Optional theme –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<!– Latest compiled and minified JavaScript –>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
var app= angular.module(‘app’, [‘ngAnimate’, ‘ngSanitize’]);
app.controller(‘spController’, [‘$scope’, ‘$http’, ‘$filter’, function ($scope, $http, $filter) {
var lastWeek = $filter(‘date’)(new Date(), ‘yyyy-MM-ddT00:00:00’);
$scope.currentDate = lastWeek;//new Date();
var yemekListesiUrl = "/_vti_bin/listdata.svc/YemekListesi?$filter=LunchDate eq datetime’" + lastWeek + "’";
$http({
method: ‘GET’,
url: yemekListesiUrl,
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (d, s, h, c) {
$scope.lunches = d.d.results;
});
}]);
</script>
<div data-ng-app="app">
<div ng-controller="spController">
<style>
.productbox {
background-color: #ffffff;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
.producttitle {
font-weight: bold;
padding: 5px 0 5px 0;
}
.productprice {
border-top: 1px solid #dadada;
padding-top: 5px;
}
.pricetext {
font-weight: bold;
font-size: 1.4em;
}
</style>
<h2>Today in Caffeterria</h2>
<div class="col-md-12 column productbox">
<img src="/SiteAssets/caffeterria.jpg" width="660" class="img-responsive"/><br />
<div class="producttitle">{{lunches[0].MainFood}}</div>
<div class="producttitle">{{lunches[0].Food1}}</div>
<div class="producttitle">{{lunches[0].Food2}}</div>
<div class="producttitle">{{lunches[0].Food3}}</div>
<div class="producttitle">{{lunches[0].Food4}}</div>
<div class="productprice">
<div class="pull-right">
<a href="/Lists/Yemek%20Listesi/Aylk%20Liste.aspx" class="btn btn-info btn-sm" role="button">This Mounth</a>
<a href="{{lunches[0].Path}}/DispForm.aspx?ID={{lunches[0].Id}}" class="btn btn-info btn-sm" role="button">Detail</a>
</div>
<div class="pricetext">
</div>
</div>
</div>
</div>
</div>
[/csharp]
Son olarak Projemizi deploy yapıp Sayfamıza add webpart komutlarını kullanarak ekliyoruz.
