SharePoint 2013: WebParts and Basic AngularJS



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!


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.


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;

Deploying Assembly Files With Your Sharepoint Solution

Recently I have been working on a Sharepoint 2010  and I had created a Class Library project that will contain some classes and methods. One of the custom webparts I had created was calling a method from one of the class, but when I press F5 to deploy and test my web part I got an error and my assembly file was missing in Sharepoint. I realised that my Class Library assembly file was not deployed. 

Below is a simple step by step instruction on how to include a assembly file in your Sharepoint package.

For example here I have a solution with a Sharepoint 2010 and a class library project. In the Sharepoint 2010 project there is a package folder containing a file called Package.package

visual studio 2010 solution