SharePoint Client Side Applications and AngularJS

May the 4th is here, the moment we’ve all been waiting for. There was a lot announced, and part of it was the release of a new, modern way of developing on SharePoint. Here, I take you through a quick run-through of a simple boiler-plate AngularJS Client Side Application. This is not intended to be a tutorial, I plan to release a series of posts taking you through the end-to-end steps once the tools have been released.

WARNING: This was produced with pre-release material and is subject to change!!

Overview

Many of us have invested a lot of time and resource into building AngularJS applications on-top of SharePoint, the great news is - all is not lost and you still can. Microsoft may be using React, but the message is not “you must use React” - which is great (at least for me :) )

My ‘Hello World’ application does three neat things

  1. Brings in AngularJS & ngOfficeUIFabric
  2. Creates a branding template, similar in concept to SharePoint masterpages (which you’ll promise not to use now, right?).
  3. Gets html templates working from a CDN, so you can code up beautiful UIs in quick-time.

It’s not much to look at, but the screenshot below represents a pretty big step forward for SharePoint developers. Note that the missing suitebar is an environmental issue - that’s not changing too!

AngularJS Client Side Application

Firstly, no more masterpages. What this means is you start with a blank(ish) piece of paper. No hacking around to get it working, and no faffing around with large SharePoint deployments.

Using AngularJS, there is however still a way to create a branding template, in this example the navbar and heading are in my template, and the canvas is loaded into a page. In my hands-on tutorials I’ll be taking you through how I created my boilerplate template, and how to use TypeScript to create Classes which inherit from one another to create great looking applications which are easy to extend.

Furthermore, developers now have access to the Canvas we’ve seen in Delve blogs. The example below is an extract from an upcoming post on an AngularJS canvas directive I’m writing…super easy!

let canvas: Canvas;   
canvas = new Canvas(instanceElement[0], DisplayMode.Edit)
canvas.render();  

Behind the scenes

Microsoft will be releasing a number of node modules to support development, these will include classes and typings to speed up development and reduce the learning curve. Applications will extend the ClientSideApplication class, and developers will be able to implement methods such as onLoad() and onRender() The class below shows a simple implementation of a ClientSideApplication, onRender() has been implemented to retrieve the HTML from BrandingTemplate.templateHtml, AngularJS is then initialised in the same way people recognise.

class AngularCanvasApplication extends ClientSideApplication {

  protected onLoad(): void {
    // (perform actions before the page starts rendering)
  }

  protected onRender(): void {
    this.domElement.innerHTML = BrandingTemplate.templateHtml;

     let app = angular
        .module('demoApp', ['officeuifabric.core', 'officeuifabric.components'])
        .controller('demoController', DemoController)
        .config(function($sceDelegateProvider) {
              $sceDelegateProvider.resourceUrlWhitelist([
              // Allow same origin resource loads.
              'self',
              // Allow loading of html templates from the CDN defined in System
              System.baseURL + '/dist/templates/*.html'
            ]);
        });

    angular.bootstrap(this.domElement, ['demoApp']);

  }
}

Next steps

This is very much a whistlestop introduction, I’ll be releasing full guides on creating AngularJS applications in due course. While you’re waiting to get your hands on these new tools, I highly recommend checking this post out.