SharePoint Meets AngularJS

Extending SharePoint

SharePoint offers a rich set of functionality out of the box that can be used to build basic document and collaboration workflows (and a lot more). Once you want to get more out of it, you have to start thinking about how you can customize SharePoint to offer the features you need for your business. In times of SharePoint 2007 or 2010 the typical approach would have been to develop a custom SharePoint solution, deploy the .wsp file to the server and then activate the custom solution in the site settings.

Since SharePoint 2013 Microsoft is shifting the development pattern towards so-called SharePoint Add-ins. We differentiate between SharePoint-hosted and provider-hosted Add-ins. While SharePoint-hosted Add-ins are centered around SharePoint components like lists, pages and libraries, provider-hosted Add-ins outsource their functionality to some server application outside of the current SharePoint server or farm.

In this post we are focusing on a SharePoint-hosted Add-in since we want to make heavy usage of the SharePoint REST API and AngularJS as the client-side Javascript framework.

Hooking into SharePoint

The easiest way to hook into SharePoint for now is to use the Script Editor Web Part.

Once you added the Script Editor Web Part to the SharePoint page of your choice, you can choose to edit the Web Part and then also edit the snippet.

Now just add the very basic HTML content.

<link href="/sites/my-site/SiteAssets/styles.css" rel="stylesheet" type="text/css" />
<div data-ng-app="app"> 
  <div data-ng-controller="MyController">
    <ul>
        <li data-ng-repeat="technology in technologies">{{ technology }}</li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/sites/my-site/SiteAssets/script.js"></script>

As you can see we included three files: our stylesheets and our script file, both residing in the SiteAssets library of the SharePoint Site called my-site. And the AngularJS library in the version 1.5.6. We also recognize the data-ng-app="my-app" attribute and the div element with the data-ng-controller attribute. That is all we need to have the starting point of our AngularJS app. Let's see now, how we can kick off AngularJS in that SharePoint context.

AngularJS for the win

In the Script Editor Web Part we defined that our AngularJS app is called my-app. So all we have to do, is to create an AngularJS app with that particular name and to define a controller with the same name as we used before in the Script Editor Web Part.


angular.module("my-app", [])
  .controller("MyController", function($scope) {
    $scope.technologies = ["SharePoint", "AngularJS", "HTML/CSS"];
  });

Once we added this code to the script.js file in the SiteAssets library, we can reload the page et voilĂ  see a list of the three technolgies we defined in the controller.

We did it. We included AngularJS into a SharePoint page. Now of course, that's not all the magic AngularJS can do. There are a ton of other topics we should address now to create a sophisticated front end application like routing, translations, modularization, tests, build automation, integration of third party libraries, templating and styling. But since this would be way beyond a single blog post, I want to only address one more topic and leave the others for another blog post (or for a live session if you would like to hire me for your project or team).

Calling the SharePoint REST API

Since we run AngularJS in a SharePoint-hosted Add-in, we don't have to handle authentication at all when sending REST calls to the server. One of the simplest calls you can make is the request for the current user.

$http.get('/sites/my-site/_api/web/currentuser')
.then(function success(response) {
  console.log('Retrieved user data: ' + JSON.stringify(response.data));
 }, function error() {
  console.error('Could not retrieve user data.');
});

You could add this code snippet to our controller code above and then print the user data to the page. But don't forget to inject the $http service into the controller. And to bind the result to a scope variable. Or even better work with ui-router and views. Oh my, still so much to learn.

Once last thing for today, before I leave you to do more important stuff. When you want to use the SharePoint REST API you always need the form digest token when you want to retrieve data from a SharePoint list. And additionally you need the - take a deep breath - ListItemEntityTypeFullName when you want to change list items or add new items to the list. Those two values you can easily retrieve with the following two functions.


let getFormDigestValue = () => {
 return $q(function (resolve, reject) {
  $http.post('/sites/my-site/_api/contextinfo')
   .then(function (result) {
     try {
      resolve(result.data.d.GetContextWebInformation.FormDigestValue);
     }
     catch(err) {
      reject(err);
     }
   });
 });
};

let getListItemEntityFullName = (listName) => {
 return $q(function (resolve, reject) {
  $http.get('/sites/my-site/_api/lists/GetByTitle(\'' + listName + '\')?$select=ListItemEntityTypeFullName')
   .then(function (result) {
    try {
     resolve(result.data.d.ListItemEntityTypeFullName);
    }
    catch(err) {
     reject(err);
    }
   });
 });
};

With those basic information you can take your first steps into the direction of integrating the SharePoint REST API into your AngularJS application. If you have any further questions or would like to talk to me in more detail, just drop me a message. Thanks for reading!