Life, the Universe, and Software Engineering

SharePoint has always been one of the best platforms for managing data and documents for the enterprise.  SharePoint 2013 simplified the ability to change the look and feel of SharePoint web pages.  Now with the addition of AngularJS functionality to SharePoint changing the look and feel of data and documents inside SharePoint web pages is now possible without the need for writing new web parts or having XML style sheet experience.

Microsoft also introduced the SharePoint client-side javascript library to access data in on a SharePoint server giving web developers more tools to display and format information on a web page.  By combining some of this functionality along with the AngularJS framework we can take advantage of the declarative nature of the AnguarJS framework to work almost entirely in HTML.     AngularJS allows the web page designer to focus on markup and style, not code, making pages easier to understand.

The union of all of this functionality comes in the form of the angular-sharepoint library.  This new library defines a set of powerful AngularJS directives to give the web page author direct access to two major types of data on a SharePoint server:  Term sets from the term store; and any data stored in a SharePoint list.

The module angular-sharepoint defines a few new angular directives that allow you to iterate through SharePoint list data and the SharePoint term store.

Introducing sp-list

The first directive is sp-list which allows access to data in any SharePoint list and example of this is the following snippet:

<div sp-list="My Titles">
    <ul>
        <li ng-repeat="item in items">
            <span>{{item.Title}}</span>
        </li>
    </ul>
</div>

The above snippet could be placed on a SharePoint page using a Script Editor Web Part.  Which would result in a list of titles from the "My Titles" list.  
The Resuable Content list could also be used to store this type of AngularJS because it is just HTML.  Because of the limitations of the rich text field in the reusable content list through,
we would have to make a slight modification to get past the html cleaner imposed on reuable content:

<div data-sp-list="My Titles">
    <ul>
        <li data-ng-repeat="item in items">
            <span>{{item.Title}}</span>
        </li>
    </ul>
</div>

 The introduction of the prefix "data-" works on any AngularJS directive and allows the attribute to be ignored by the HTML cleaner used by the  reusable content editor.

Introducing sp-term-set

The second powerful AngularJS directive sp-term-set defined by the angular-sharepoint library allows access to term sets from the SharePoint term store.

An example of iterating through a navigation term set to create a list of links is as follows:

<div data-sp-term-set="Consoto:HR Department:*">
    <div data-sp-messages="termSetState">
        <div style="color:red;" data-sp-message="'error'">{{termSetMessage}}</div>
    </div>
    <ul>
        <li data-ng-repeat="term in terms">
            <a data-ng-href="term.LocalCustomProperties.NavigationUrl">{{term.Name}}</a>
        </li>
    </ul>
</div>

The above example iterates through all HR department pages of the Consoto company producing a list of links to those pages.
If there is a problem access the term set an error message will be displayed in red.

Getting started with AngularJS and SharePoint.

The best way to implement AngularJS in the SharePoint framework is to make basic modifications to the SharePoint master page. 
SharePoint has an interesting problem when it comes to using javascript frameworks like JQuery or AngularJS that affect editable markup on a SharePoint page.   If the javascript is allowed to run while the rich text editor is being used,  each time the rich text edit saves changes to a page, it also inadvertently can save the results of the javascript framework's output as well.   This can cause duplication to appear on the page each time it is edited.   Obviously we do not want this to happen so it requires a few careful changes to the SharePoint master page to ensure the framework is used correctly.

The first step in modifying the SharePoint standard master page is to include a reference to the publishing controls so we can detect when the page is in edit mode. 

 In the above snippet you can see the addition of the line:

<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
We access to the Microsoft.SharePoint.Publishing namespace we have access to the EditModePanel which allows use to selectively add markup to the page based on the display mode that the page is in.
We will use this function to make sure that our angular application is only running when the page is in display mode.



In the above snippet you can see three distinct changes to the SharePoint master page to enable JQuery and AngularJS frameworks, then add the angular-sharepoint library.
First the section bracketed in red: This section enclose all references to JQuery script libraries in an EditModePanel that runs only when the page is in display mode.
Strictly speaking JQuery library references are only really required if you plan on mixing JQuery and AngularJS controls on web pages.
JQuery is still a much wider used framework on the net and so has many more controls written for it than AngularJS.

Next you will see the angular script library references with the script tags highlighted in yellow. Also include in the yellow highlighted tags are references to Angular UI libraries and then
three angular-sharepoint libraries (which are the focus of this blog article).
If you are looking for be bare minimum of files required to implement the angular-sharepoint libraries then the following list is for you:

• angular.min.js
  
  • The code angular library.
• angular-resource.min.js
  
  • The resource module for angular.  Used to retrieve data from the SharePoint server.
• angular-messages.min.js
  
  • Though not strictly required, some example templates use the messages module to show error indicators on the page if something goes wrong.
• angular-sharepoint.js
  • The core angular-sharepoint library.
• angular-sharepoint.directives.js
  • The angular-sharepont directives libarary.
• angular-sharepoint.filters.js
  • The angular-sharepont filters libarary.
• angular-dh.js
  • Not part of the library, but a sample implementation of the angular application used.

Note that it is up to you as to where the script files are actually placed on the SharePoint server.  In the above master pages the script libraries were placed in sub-directories of the "Style Library", a fairly typical place to store such files on a SharePoint site.

The angular template I created from your html page looks like this: ​

Downloading the angular-sharepoint library

The latest angular-sharepoint library is available on git hub here: https://github.com/aarondh/angular-sharepoint.