Building Single Page Applications (SPA) with AngularJS and SharePoint 2013 – Part I

This is Part 1 of Building Single Page Applications (SPA) with AngularJS ad SharePoint 2013. We will stick with the main moving parts of building SPA with SP 2013 and AngularJS. Assumption here is that you have played a little with AngularJS before.

So, we will build a SharePoint Hosted Apps that will display customer and their order information. This is what the final output looks like

Customer Information:

So, when you click on the CustomerID, it will take you to the Order screen without any refresh following the model of SPA. The snipped screen shot below shows Orders for CustomerID 1

There are plenty of resources to read upon SPA and how it works. So, let us stick with SharePoint and AngularJS.

Here are the high level steps:

1) Create a SharePoint Hosted Apps.

2) Add the angularjs files to your Scripts folder.

3) Add these script tags to your default/ page

angular.js is the core AngularJS file and angular-route is using for routing between pages.

4) Verify a script file App.js exists under Scripts folder. If not, create one. This is where all our angularJS scripting will take place. In real world, I would recommend that you split script files based on the number of controllers you have.

5) Under Pages folder, create a folder named Templates, and create 2 blank html files. customer.html and orders.html. This is where the angular ng-repeat commands go in.

6) Next, on the default/, add these lines,

<div ng-app=”CustomerApplication” ng-view>

<div style=”text-align: center;”>

<img src=”../images/ajax_loader.gif” alt=”Loading…” title=”Loading..” style=”height: 50px;” />

</div>

As you can see, the above lines reference the ng-view and is pointed to the CustomerApplication angular APP.

In the next part, let us get into building the angularJS commands in App.js