Introduction
When I had some downtime, I wanted to create a sample using AngularJS framework to display list items from a SharePoint Online site. I have seen some of the angular demonstrations and I was drawn to the idea of breaking up javascript into self contained modules that can be unit tested. The result is a very clean easy to read and maintain javascript code base.This article will touch on some of the nuances I found when using AngularJS with Sharepoint and Sharepoint Online.
Background
There are a few things I found with AngularJS framework which is very different from other javascript frameworks. The learning curve. It is very easy to write an Angular application with very little knowledge of the framework unlike BackBone.js. However, it very hard to write a hard core serious Angular application. The documentation is either incomplete or lacking. Don't be frustrated, just keep on plugging away.Using the code
AngularJS Service
Creation of the service
Here we create the service within the SharePointJSOMService.js file and grab the user information from sharepoint using a rest call
myApp.service('SharePointJSOMService', function ($q, $http) {
this.getCurrentUser = function () {
var deferred = $.Deferred();
//First we must call the EnsureSetup method
JSRequest.EnsureSetup();
hostweburl = decodeURIComponent(JSRequest.QueryString["SPHostUrl"]);
appweburl = decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]);
var userid = _spPageContextInfo.userId;
var restQueryUrl = appweburl + "/_api/web/getuserbyid(" + userid + ")";
var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync({
url: restQueryUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data, textStatus, xhr) {
deferred.resolve(JSON.parse(data.body));
},
error: function (xhr, textStatus, errorThrown) {
deferred.reject(JSON.stringify(xhr));
}
});
return deferred;
};
Creation of the list in the Host Web
The following function will grab the context of the host web and create a list. Remember, you have to specify the application to have access to the host web in your AppMainifest.xml file.
this.createList = function ($scope, listTitle) {
var deferred = $.Deferred();
//First we must call the EnsureSetup method
var hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var currentcontext = new SP.ClientContext.get_current();
var hostcontext = new SP.AppContextSite(currentcontext, hostUrl);
var hostweb = hostcontext.get_web();
//check list exists
var lists = hostweb.get_lists();
currentcontext.load(lists);
currentcontext.executeQueryAsync(
function () {
var isListAvail = false;
var listEnumerator = lists.getEnumerator();
while (listEnumerator.moveNext()) {
list = listEnumerator.get_current();
if (list.get_title() == listTitle) {
isListAvail = true;
deferred.done("success list already exists");
}
}
if (isListAvail != true) {
//create the list
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title(listTitle);
listCreationInfo.set_templateType(SP.ListTemplateType.tasks);
var list = hostweb.get_lists().add(listCreationInfo);
currentcontext.load(list);
currentcontext.executeQueryAsync(
function () {
deferred.done("created list");
},
function (sender, args) {
deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
);
}
},
function (sender, args) {
deferred.reject('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
);
return deferred;
};
Retrieval of the List
The following function will use a REST call to retrieve information from the list within the hostweb
this.getTasksREST = function ($scope, listTitle) {
var deferred = $.Deferred();
//First we must call the EnsureSetup method
JSRequest.EnsureSetup();
hostweburl = decodeURIComponent(JSRequest.QueryString["SPHostUrl"]);
appweburl = decodeURIComponent(JSRequest.QueryString["SPAppWebUrl"]);
var restQueryUrl = appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getByTitle('" + listTitle + "')/items?$select=Title,ID,DueDate,Status,Priority&@target='" + hostweburl + "'";
var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync({
url: restQueryUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data, textStatus, xhr) {
deferred.resolve(JSON.parse(data.body));
},
error: function (xhr, textStatus, errorThrown) {
deferred.reject(JSON.stringify(xhr));
}
});
return deferred;
};
AngularJS Controller
Creation of the controller
The creation of the controller by passing in the scope and SharePointJSOMService objects
myApp.controller('ListCtrl', ['$scope', 'SharePointJSOMService', function ($scope, SharePointJSOMService) {
SP.SOD.executeOrDelayUntilScriptLoaded(runDelayedCode, "SP.js");
function runDelayedCode() {
$scope.tasks = [];
// grab current user from web service
// place it in scope
$.when(SharePointJSOMService.getCurrentUser())
.done(function (jsonObject) {
currentUser = jsonObject.d;
$scope.currentUser = currentUser;
//scope was not updated so we need to push it in
if (!$scope.$$phase) { $scope.$apply(); }
})
.fail(function (err) {
console.info(JSON.stringify(err));
});
Default.aspx Page
The default.aspx will create the AngularJS application and bind to the list items. It is a very clean binding.
<div ng-app="myApp">
<div ng-controller="ListCtrl">
<div>
Find current user from _api/webs/getuserbyid using angular service
<h1>Welcome: {{currentUser.Title}}</h1>
</div>
<ul class="unstyled">
<li class="row" ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.done" />
<span class="done-{{todo.done}}">{{task.text}}</span>
</li>
</ul>
</div>
</div>
App.js
The App.js file will set up some global variables for use in the default.aspx page
'use strict';
var TaskListName = 'testlist';
var myApp = angular.module('myApp', ['ui.bootstrap']);
var hostweburl;
var appweburl;
var currentUser;
Points of Interest
Some examples loaded the sharepoint js files by using the following tags in the default.aspx page
<SharePoint:ScriptLink name="sp.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="sp.runtime.js" runat="server" LoadAfterUI="true" Localizable="false" />
I found that had the side effect of inconsitent list creation in the host web. The error was "Unexpected Response From Server" with a null stack trace. To fix the issue, I went with the following javascript includes
<script type="text/javascript" src="/_layouts/15/sp.runtime.
or within my javascript
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () {
$.getScript(scriptbase + "SP.RequestExecutor.js",
function () {
