SHAREPOINT SATURDAY PRESENTATION by Keith Rimington REAL EXPERIENCES WITH ANGULARJS AND SHAREPOINT

Please remember to thank our sponsors.

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION A little tour of Insider

SHAREPOINT SATURDAY PRESENTATION Demo

SHAREPOINT SATURDAY PRESENTATION Intro to AngularJS “AngularJS lets you extend HTML vocabulary for your application.” “The resulting environment is extraordinarily expressive, readable, and quick to develop”

SHAREPOINT SATURDAY PRESENTATION Intro to AngularJS

SHAREPOINT SATURDAY PRESENTATION Source Code

SHAREPOINT SATURDAY PRESENTATION AngularJS Basics (Markup) Calculate

SHAREPOINT SATURDAY PRESENTATION AngularJS Basics (Controllers) function SumCtrl(scope) { // Optional default values scope.addend1 = 1076; scope.addend2 = 532; // Scope operations scope.calculate = function calculate() { scope.sum = scope.addend1 + scope.addend2; }

SHAREPOINT SATURDAY PRESENTATION AngularJS Basics (Modules) // Build the AngularJS module and injector database. angular.module('app', []).controller('SumCtrl', SumCtrl); //.constant('Name', ConstantValue) //.factory('ServiceName', ServiceFunction) //.directive('DirectiveName', DirectiveFunction) // Define dependency injections. SumCtrl.$inject = ['$scope']; // Load the application angular.bootstrap(document, ['app']);

SHAREPOINT SATURDAY PRESENTATION Demo

SHAREPOINT SATURDAY PRESENTATION AngularJS Vocabulary - Databinding ng-bind ng-bind-html ng-bind-template ng-model ng-options ng-href, ng-src Bind a simple value as text Bind a simple value as html Bind an expression as text Two-way bind to an input Bind a list of options to a select Bind overrides to certain attributes

SHAREPOINT SATURDAY PRESENTATION AngularJS Vocabulary - Control ng-if ng-show ng-hide ng-disabled ng-class ng-style Emit element if truthy Display element if truthy Hide element if truthy Disable input if truthy Dictionary. Assign class for each truthy attribute Dictionary. Assign style for each truthy attribute

SHAREPOINT SATURDAY PRESENTATION AngularJS Vocabulary - Events ng-click ng-dblclick ng-change ng-focus, ng-blur ng-keyup, ng-keydown ng-cut, ng-copy, ng-paste

SHAREPOINT SATURDAY PRESENTATION AngularJS AJAX

SHAREPOINT SATURDAY PRESENTATION AngularJS Service function RestSvc(http, SPContextInfo) { var apiBaseUrl = SPContextInfo.webServerRelativeUrl.replace(/\/$/, "") + "/_api/web/lists/GetByTitle('Todo')/Items"; var service = { 'getList': getList, 'getSingle': getSingle, 'create': create, 'update': update, 'remove': remove }; return service; }

SHAREPOINT SATURDAY PRESENTATION What kind of JSON do you want? (JSONLight) –Accept: application/json; odata=verbose –Accept: application/json –Accept: application/json; odata=minimalmetadata –Accept: application/json; odata=nometadata

SHAREPOINT SATURDAY PRESENTATION Select Top 100 function getList() { return http.get(apiBaseUrl); } // Results, abbreviated for clarity. { "odata.nextLink": " "value": [ { "odata.etag": "\"1\"", "Id": 1, "Title": "Learn about international cheeses", "Priority": "A", "Completed": false, },... ] }

SHAREPOINT SATURDAY PRESENTATION Select Single function getSingle(id) { return http.get(apiBaseUrl + "(" + id + ")" ); } // Results, abbreviated for clarity. { "odata.etag": "\"1\"", "Id": 1, "Title": "Learn about international cheeses", "Priority": "A", "Completed": false, }

SHAREPOINT SATURDAY PRESENTATION Create New Item // Start with the writable data. Anything you leave out uses the default value. var item = { "Title": "Learn about international cheeses", "Priority": "A", "Completed": false, } function create(item) { return http.post(apiBaseUrl, item); } // Results look just like selecting a single.

SHAREPOINT SATURDAY PRESENTATION Request Digests Any call that has side effects also requires an extra HTTP header, X- RequestDigest Where do I get a form digest? – –Send a POST to _api/contextinfo // Results, abbreviated for clarity. { "FormDigestTimeoutSeconds": 1800, "FormDigestValue": "0xCBC blah blah blah gibberish,20 Feb :54: ", "SiteFullUrl": " "WebFullUrl": " }

SHAREPOINT SATURDAY PRESENTATION AngularJS HTTP Interceptor Intercept HTTP calls before they leave the browser Inspect HTTP configuration and make changes Can return either: –A new configuration –A promise to return a new configuration Our strategy will grab a new digest on demand only if needed and inject it into the config

SHAREPOINT SATURDAY PRESENTATION AngularJS Promise var d = $q.defer() d.resolve()d.reject()d.promise promise.then( resolved, resolved, rejected rejected);

SHAREPOINT SATURDAY PRESENTATION AngularJS HTTP Interceptor (1 of 3) // Add a factory to the module linked to this interceptor. // Then configure your module to push the object onto the interceptors list. function SPRestInterceptor(injector, q, SPContextInfo) { var context = {}; var expiry = new Date(); var contextUrl = SPContextInfo.webServerRelativeUrl.replace(/\/$/, '') + "/_api/contextinfo"; var webUrl = SPContextInfo.webServerRelativeUrl; var interceptor = { request: InterceptRequest } return interceptor; }

SHAREPOINT SATURDAY PRESENTATION AngularJS HTTP Interceptor (2 of 3) function EnsureContext() { var deferred = q.defer(); if (expiry > new Date()) { deferred.resolve(context); } else { var http = injector.get('$http'); http.post(contextUrl). success(function (data) { angular.extend(context, data); expiry = new Date(); expiry.setSeconds(expiry.getSeconds + data.FormDigestTimeoutSeconds); deferred.resolve(context); }). error(function (data) { deferred.reject(data || 'Unknown error'); }); } return deferred.promise; }

SHAREPOINT SATURDAY PRESENTATION AngularJS HTTP Interceptor (3 of 3) function InterceptRequest(config) { if (config && config.url && config.url.indexOf(webUrl) == 0) { config.withCredentials = true; if (config.method != "GET" && config.url != contextUrl) { var deferred = q.defer(); EnsureContext().then( function (digest) { config.headers = config.headers || {}; config.headers['X-RequestDigest'] = digest.FormDigestValue; deferred.resolve(config); }, function (reason) { deferred.reject(reason); }); return deferred.promise; } return config; }

SHAREPOINT SATURDAY PRESENTATION AngularJS HTTP Interceptor (4 of 3)! angular.module('ngSharePoint', []).config(SPConfigModule).value('SPContextInfo', _spPageContextInfo).factory('SPRestInterceptor', SPRestInterceptor) SPConfigModule.$inject = ['$httpProvider']; SPRestInterceptor.$inject = ['$injector', '$q', 'SPContextInfo']; function SPConfigModule (provider) { provider.interceptors.push('SPRestInterceptor'); } function SPRestInterceptor (injector, q, SPContextInfo) {... }

SHAREPOINT SATURDAY PRESENTATION Delete Item // Deletes cause side effects, and require an X-RequestDigest header. // Our HTTP interceptor takes care of that for us. // Deletes also have other required headers, IF-MATCH, and X-HTTP-Method. function remove(item) { var config = { headers: { 'IF-MATCH': '*', 'X-HTTP-Method': 'DELETE' } }; return http.post(apiBaseUrl + "(" + item.Id + ")", null, config); }

SHAREPOINT SATURDAY PRESENTATION Update Item // Updates cause side effects, and require an X-RequestDigest header. // Our HTTP interceptor takes care of that for us. // Updates also have other required headers, IF-MATCH, and X-HTTP-Method. // The HTTP method can be PUT (to replace) or MERGE (to update). // Updates produce a 204 No Content response. // To get the new Etag, check the Etag header of the response. function update(item) { var config = { headers: { 'IF-MATCH': item["odata.etag"], 'X-HTTP-Method': 'MERGE' } }; var patch = { Title: item.Title, Priority: item.Priority, Completed: item.Completed }; return http.post(apiBaseUrl + "(" + item.Id + ")", patch, config); }

SHAREPOINT SATURDAY PRESENTATION Demo

SHAREPOINT SATURDAY PRESENTATION by Keith Rimington CONCLUSION