This document contains details about an online conference session on building flexible SharePoint solutions with AngularJS. The session will be held on June 17th and 18th, 2015 and will be presented by Bob German. The agenda includes an introduction to AngularJS, a discussion of the Remote Provisioning pattern versus the SharePoint add-in model, and a demonstration of a sample AngularJS solution that can be used as an add-in, drag-and-drop solution, or centrally managed solution. Attendees will learn how to build web parts, forms and pages with AngularJS and about the Remote Provisioning pattern as an alternative to the add-in model.

1. Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
Building Flexible SharePoint Solutions
with AngularJS
@Bob1German

2. 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

3. 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!

4. 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 Frameworks
Source: Google trends

5. WWW.COLLAB365.EVENTS
What’s in an AngularJS Application?
View
(HTML with Bindings)
Controller
manipulate scope to control the UI
Services
Web
Services
$scope or ViewModel
Module
Directives
new elements and
attributes
Routes
navigation within
single-page app
Web Page
@Bob1German

6. WWW.COLLAB365.EVENTS
Commonly Used Angular Services
$http
HTTP
calls
$scope
Access to
view
scope
$location
Browser
location
$log
Logging
service
$qPromises
$interval
$timeout
Timer
services
Custom
@Bob1German

7. Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
demo
@Bob1German

8. WWW.COLLAB365.EVENTS
Remote Provisioning: The “Other” App Model
It’s simple:
Content is created directly in a SharePoint site
using any remote API
(CSOM, JSOM, SOAP, REST)
Examples:
• .NET Code in PowerShell or a console
application
• Javascript in a SharePoint Hosted
App or Content Editor Web Part
• .NET Code in a Provider Hosted App
• The Mechanical Turk approach
(A person manually creates content
using a web browser)
@Bob1German

9. WWW.COLLAB365.EVENTS
Modern SharePoint Development Options
Add-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
Strength
Weakness@Bob1German

10. 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

11. Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
demo
@Bob1German

12. WWW.COLLAB365.EVENTS
OfficeDev Patterns and Practices
OfficeDev PnP
Core Library (C#)
CSOM
“15”
CSOM
“16”
PowerShell
Commands
CDN
Manager
Provisionin
g Samples
https://github.com/OfficeDev/PnP
Your
Code
SharePoint
2013
SharePoint
Online

13. 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

14. WWW.COLLAB365.EVENTS
Stay tuned for more great sessions …
@Bob1German