SharePoint 2013: WebParts and Basic AngularJS

 

SharePoint2013_AngularJS_Logo

In this post I am going to show you how to apply AngularJS to your Visual WebParts in SharePoint.

Create a SharePoint 2013 Solution.

From Visual Studio menu File->New->Project and then use the SharePoint 2013 – Empty Project Template. Name the project DemoSite1 and the solution SharePoint2013 and click OK to continue. While Visual Studio is preparing your solution why not go and make yourself some coffee!

SP2013_WebParts_AngularJS_00

Right click on the DemoSite1 project and from the popup menu select Add->SharePoint “Layouts” Mapped Folder. After you have created the Layouts folder you will see another sub folder  called DemoSite1. So in the Layouts folder create a Scripts folder, and then create another Scripts folder inside the DemoSite1 folder.

(more…)

Binding SPList to Binding Controls.

To bind a SPList to a binding control list for example the DetailsView data control you will need to provide a DataSource to it. The problem is SPList doesn’t implment the IDataSource interface, but I have discovered that there is a SPDataSource which allows you to pass a SPList object as a parameter in the constructor. Below is a code

var spList = SPContext.Current.Web.Lists["List Name"];
var ds = new SPDataSource(spList);
DetailsView1.DataSource = ds;
DetailsView1.DataBind();

Shares