Online Conference

June 17th and 18th 2015WWW.COLLAB365.EVENTS

Building Flexible SharePoint Solutions with AngularJS

@Bob1German

WWW.COLLAB365.EVENTS

Bob German

BlueMetal

Email: collab@bobg.tv

Twitter: @Bob1German

Blog: http://bob1german.com/

LinkedIn: http://bit.ly/Bob1German

Bob German is Principal Architect at BlueMetal,

where he leads Office 365 and SharePoint

development for enterprise customers.

Bob German

@Bob1German

Cloud & Services

Content & Collaboration

Data & Analytics

Devices & Mobility

Strategy & Design

WWW.COLLAB365.EVENTS

Agenda• Introduction to AngularJS

• Remote Provisioning vs.SharePoint Add-in Model

• Solution that works:– As a SharePoint add-in

– As a drag-and-drop solution

– As a centrally managed solution

@Bob1German

Session assumes you know:

• JavaScript

• SharePoint basics (lists, forms, web parts)

Session does not assume you know:

• AngularJS

You will learn:

• How to build web parts, forms, and pages with AngularJS

• About the new Remote Provisioning pattern as an alternative to the Add-in model

It all works in Office 365 or on premises!

WWW.COLLAB365.EVENTS

What is AngularJS?Extremely popular Javascript framework

• Build complex apps that run on a web page

• Maintained by Google – a good bet for sustained support

• HTML Templates with 2-way data binding

• MVC pattern separates code from DOM manipulation – improves testability

• Adds new HTML elements and attributes for building dynamic applications

• Dependency Injection and Unit Testing

• Routing and Navigation

• Flexible data presentation using Filters

Interest in JavaScript FrameworksSource: Google trends

WWW.COLLAB365.EVENTS

What’s in an AngularJS Application?

View(HTML with Bindings)

Controllermanipulate scope to control the UI

Services

WebServices

$scope or ViewModel

Module

Directivesnew elements and

attributes

Routesnavigation within single-page app

Web Page

@Bob1German

WWW.COLLAB365.EVENTS

Commonly Used Angular Services

$httpHTTPcalls

$scope

Access toview

scope

$locationBrowser location

$logLogging service

$qPromises

$interval$timeout

Timerservices

Custom

@Bob1German

Online Conference

June 17th and 18th 2015WWW.COLLAB365.EVENTS

demo

@Bob1German

WWW.COLLAB365.EVENTS

Remote Provisioning: The “Other” App ModelIt’s simple:

Content is created directly in a SharePoint siteusing any remote API

(CSOM, JSOM, SOAP, REST)

Examples:

• .NET Code in PowerShell or a consoleapplication

• Javascript in a SharePoint HostedApp or Content Editor Web Part

• .NET Code in a Provider Hosted App

• The Mechanical Turk approach (A person manually creates contentusing a web browser)

@Bob1German

WWW.COLLAB365.EVENTS

Modern SharePoint Development OptionsAdd-in Models Remote Provisioning

Provisioning across many sites

Complete access to site (e.g. Branding)

Direct access to page (e.g. Connected Web Parts)

End-user additions / modifications

Protection from Untrusted Code

Storefront Distribution

Centralized Distribution

StrengthWeakness@Bob1German

WWW.COLLAB365.EVENTS

MicroSurvey Sample Application

main.html

mainController.js

surveyService.js

spDataService.js

settingsController.js

settings.html

initUI.js

Default.aspx

VIEWS

CONTROLLERS

SERVICES

@Bob1German

viewmodel viewmodel

SharePoint (Online or On Premises)

@Bob1German

Online Conference

June 17th and 18th 2015WWW.COLLAB365.EVENTS

demo

@Bob1German

WWW.COLLAB365.EVENTS

OfficeDev Patterns and Practices

OfficeDev PnPCore Library (C#)

CSOM“15”

CSOM“16”

PowerShellCommands

CDN Manager

Provisioning Samples

https://github.com/OfficeDev/PnP

YourCode

SharePoint 2013

SharePoint Online

WWW.COLLAB365.EVENTS

Links

Resources

@Bob1German

PnP PowerShell Cmdlet Reference http://bit.ly/1KVgrqq

AngularJS Tutorial http://bit.ly/18AjTWI

Angular JS Training on PluralSight - (one of many!) http://bit.ly/1BY6QL0

How to complete basic operations using SP2013 REST API’s http://bit.ly/1MyirkK

Multiple AngularJS Web Parts on a Page - “The Well-Tempered AngularJS Web Part” http://bit.ly/1T80iQO

New Guidance from Microsoft for Packaging and Deploying SharePoint Solutions http://bit.ly/1F54S7L

Code samples

• Hello Angular: http://bit.ly/Plunk1

• Angular Weather: http://bit.ly/Plunk2

• MicroSurvey: http://bit.ly/uSurvey

WWW.COLLAB365.EVENTS

Stay tuned for more great sessions …

@Bob1German